Site Modules > Page Builder
•Access the Page Builder module through the Site Modules top navigation link.
Access Page Builder from the Site Modules navigation link
Click “View Website” to openthe Site in a new Window.
View Website: Company – About Us
•The Site layout, or template, brackets the content area with header, footer and ride-sidebar areas. Not all Sites use the same layout butmost all Sites have at least a header and footer.
•Only the content area is managed via the WebDirect Page Builder module.
Header
Main Navigation
Secondary Navigation
Left Sidebar Area
Right Sidebar Area
Footer navigation
Footer
Page Builder Landing Page
•Sub-navigation links for Page Builder
–Instance Manager
–Add Content
–Edit Content
•Existing pages are listed alphabetically in the drop-down list.
–Page names are structured as “Main Page Name” space hyphen space “Secondary Page Name”
•Example: “Company” is the top-level Page. “About Us” is the Secondary page. The title for the About Us page would be structured as “Company –About Us”
•Select a page from the drop-down list and click Edit Content to edit an existing page.
–Pages may be deleted when opened for editing.
•Deleted pages cannot be recovered.
While in the Page Buildermodule, sub-navigationlinks to Page Builderfunctions will be listedfor the Module.
Instance Manager: Change font and appearancestyles for the Page Builder module.
Add Content: Create a new page using PageBuilder.
Edit Content: Return to this landing page toselect a page for editing.
Site pages created using Page Builder are listed alphabetically, withmain page name preceding secondary page names.
Pages may be deleted when opened for editing
Select a page and click Edit Content to open thepage for editing.
Add A New Content Page
•A page will not be visible on the Website until a link is created on a page or in the Navigation to the new page.
•Refer to “Editor Toolbar.PPT” for specific toolbar features.
Enter a Page Title.
If the new page is part of a larger section, it is considered asecondary page and must use the following page name structure forthe Page Title: Main Page Name – Secondary Page Name.
C
o
m
p
a
n
y
-
A
b
o
u
t
U
s
Page Content may becreated in the Content areausing the Editor toolbarfunctions, or
Page Content may becreated using MicrosoftWord and pasted into thePage Builder Content areawithout losing formatting.
Refer to“Editor Toolbar.PPT”for toolbar features.
Click “Add Page” to savethe new content page.
Edit a Content Page
•Refer to “Editor Toolbar.PPT” for specific toolbar features.
•Edit text, links and images in the content area.
•Click “Update Content” to save changes.
•Click “Delete Content” to delete the entire page.
–Deleted pages cannot be recovered.
Perform changes tocontent by removing andreplacing text, imagesand links.
Refer to“Editor Toolbar.PPT”for toolbar features.
Click “Update Content”to save changes.
Click “Delete Content” todelete the entire Contentpage.
Deleted content pagescannot be recovered.
HTML Mode
•Switch to HTML mode to make changes directly to the page content source code.
•A new Window will open and display the HTML for the page.
•Checking the “Word Wrap” checkbox at the top right of the HTML Source Editor Window will keep all text visible in the displayed area.
–Un-checking the “Word Wrap” checkbox will allow the HTML text to scroll left-to-right in the HTML Source Editor Window.
•Click “Update” to save the HTML changes and return to the main Page Builder Content Page Edit screen.
Click “Edit HTMLsource” to open the EditHTML Source Window.
Check the Word wrap box tokeep all text visible in theeditor Window.
Perform changes to heHTML code.
Click “Update” to save thechanges and return to theregular Editor Window.
Changes to the HTMLcode will now be visiblein the Content area.
Full-screen Mode
•The Editor Window may be enlarged to see more content by clicking the “Toggle fullscreen mode” icon (First row, 6th from the end onthe right)
•A new full-sized Window will open containing the Editor toolbar and the Content area.
•Changes may not be saved while in full-screen mode.
•Click the “Toggle fullscreen mode” again to return to the normal Editor screen prior to saving changes.
• Closing the full-screen editor any way other than by using the icon will result in the loss of any updates performed while in full-screenmode.
Click the “Toggle fullscreen mode” icon toview the page in a new, full-size Window.
The editor toolbarremains available.
Perform content updates the same aswhen performing updates using thenormal editor view.
The Update Content and DeleteContent buttons are not availablewhile in fullscreen mode.
To save updates, the Window mustbe closed by clicking the “Togglefullscreen mode” icon.
Images
•Insert the cursor in the Content Area where the image is to be placed.
•Click the “Insert/edit image” icon in the Editor toolbar (top row, 4th from the end on the right)
•Click “Browse” to the right of the Image URL field to open Asset Manager.
•Select an image in Asset Manager, or upload a new image to Asset Manager, and click to Insert Image”.
•Asset Manager will close. The Image URL and Title fields will now be populated with the selected information under the General tab ofthe Insert/edit image Window.
•Alignment, size, spacing and border options are available under the Appearance tab of the Insert/edit image Window.
•Advanced options include special tags and mouseover behaviors.
•Click Insert to place the image into the page Content area.
Click the “Insert/edit image”icon to open the Insert/editImage Window.
Click the “Browse” icon toopen asset Manager..
Upload and/or select animage from Asset Managerand click “Insert Asset”.
The Image URL, Title and aPreview will appear underthe General tab of theInsert/edit image Window.
Click “Insert” to place theimage into the content area.
Changes to fields under theAdvanced options tab will previewin the right sidebar area.
Click “Insert” to place theimage into the content area.
Set Advanced image controloptions.
Click “Insert” to place theimage into the content area.
The image is now visible inthe content area.
Once placed, an image may bedragged and dropped into a newposition in the content area.
Click on the image and thenclick the “Insert/edit image”icon to make changes to theimage.
Tables
•Tables consist of Columns (Vertical) and Rows (Horizontal). Data is entered into the square space (Cell) created by the intersections of aColumn and a Row.
•Click the “Inserts a new table” icon in the editor toolbar to create a new table (second row, 4th from the end on the right)
Place the mouse cursor in the contentarea where a table is to be placed andclick the “Inserts a new table” icon.
Set the table options for Columns,Rows, Cellpadding, Callspacing,Alignment, Border, Width, Heightand font Class.
Click toInsert table.
Advanced table options includeBackground image, border colorand background color.
Click toInsert table.
The table is now visible in the contentarea and ready for data entry.
Right-click inside a table cell toedit cell and/or table properties.
Links
•Highlight a section of text or click on an image to serve as a hyperlink, and click the Insert/edit link icon in the toolbar (second row, 3rdfrom the end on the right)
•Click “Browse” to create a link to a page on the Site, or
–Manually enter an email address or a URL for an off-Site link.
•Select the Module containing the information/page, and then select the file/page for the link target.
•The Link URL field will now contain the pathway to the file or page (Object)
•Set the Target to “Open in new window (_blank) if the link target is an external Website or a link to a file, such as a PDF.
•Click Insert to place the link into the Content area.
Highlight page content, or an image, andclick the “Insert/edit link” icon to insert anew link or edit an existing link.
Manually enter an email address(must begin with maito:), or aURL to an external Website, OR
Click “Browse” to build alink to a Site page or file.
Select the Modulecontaining the page or file.
Select the page or file from thealphabetical list.
The Link URL field will nowcontain the pathway to thepage or file (Object)
Select to open in newwindow (_blank) if this isan external URL or a linkto a file, such as a PDF.)
Click “Insert” to close the Insert/editlink Window and place the link intothe content area.
The link is now available inthe content area.
Highlight existing link text or animage and click “Insert/edit linkto make changes to the link.
Click Unlink to remove the linkfrom the content area.