- Understanding Site Builder
- Home Content
- Link Content
- Friendly URLs
- Layout Editor
- Legacy Stock Layout Editor
- Advanced Layout Editor (Sandbox Sites Only)
- Frequently Asked Questions
- Website Admin: Home Page Content
- Website Admin: Link Content
- Website Admin: Friendly URLs
- Website Admin: Stock Layout Editor
From within Site Builder, an admin is able to take action by either clicking on the desired button or its corresponding link. The four main buttons are:
- Home Content: Edit and post the content for the public site's home page, which is visible to all visitors to the public site.
- Link Content: Make changes to the links in the customizable menu on the public site's home page. You can add links to this menu and specify content for each of the links through a WYSIWYG editor.
- Friendly URLs: Add, change, or delete user-friendly URLs.
- Layout Editor: Change the site's color theme, switch the public layout to responsive design, and upload images for the header and footer.
Important Note: An additional option of "Edit Stock Layout (Advanced)" only exists within Site Builder on sandbox sites. This advanced layout feature allows an admin to upload files, such as custom stylesheets (CSS), and view how such files will impact a site in a test environment. After uploading files to your sandbox site, it is possible to request that these be transferred to your production site by opening a Support request.
- Create New Link: Use this button to add a new link to your site.
- Re-Order: Links can be organized to appear in a desired order on your site's home page using this column. Items labeled with "1" will appear first, and so on.
- Link Title: This is how the link appears to site visitors on your public-facing home page. Clicking on a link title on this page will allow you to view how the link content appears to site visitors.
- Type: View if a link is using content from the WYSIWYG editor or from an assigned external URL.
- When an external URL is used, the options displayed in the "Type" column will be based on how the linked webpage behaves. Content will open in a new window, the same window, or in-line with the link.
- Actions: Edit a link, indent as desired, or delete a link using the corresponding icons in this column.
- Link Title: Use this field to enter the desired title for your new link.
- External Link URL: This is an optional field that when used will redirect a site visitor to another website's URL. Using a URL in this field will override any WYSIWYG content entered in the "Page Content" section. Any URL entered should contain the "https://" text.
- Behavior: Indicate how you want content to appear by choosing "New Window", "Same Window", or "In-Line".
- Friendly URL Label
- Add Link As: Use this drop-down to set the link as a new top-level link or as a sub-link of an existing link.
The "Page Content" section contains a WYSIWYG editor in which content can be entered and configured as desired. The content may contain text, images, or HTML. Content should only be entered in this space if you are not using an external link URL in the "New Link" section above. Otherwise, any content entered in the WYSIWYG editor will be overridden by the external link URL.
- URL: This is the friendly URL that has been created.
- Open in New Window: This is a hyperlink that gives you access to the URL in a new tab.
- Actions: Choose to edit or delete the friendly URL.
To create a friendly URL, click on the "Add Friendly URL" button on the "Friendly URLs" page. A new page will appear where you can specify the friendly URL label and its destination URL. Click "Add" to preserve your changes.
To edit a friendly URL, click the URL's corresponding edit pencil in the "Actions" column. To delete a friendly URL, click the corresponding red "X".
The Layout Editor feature allows an admin to change the site's primary color theme, upload images for the header and footer, and switch the public layout to responsive design. If you would like your public pages to use Terra Dotta's responsive interface, then you can switch it over in the Layout Editor. Changes made via the Layout Editor will apply only to pages using the responsive design layout.
To access the Layout Editor, navigate to Site > Site Builder and click on the "Layout Editor" button or "Edit Layout Styles and Content" link. This will open the Layout Editor page from which the following options appear:
Responsive Public Pages
Important Note: Most clients will be using responsive design on their sites and should leave this setting enabled.
To enable responsive design on your public website, change this setting to "Yes" and click "Update". If you have a custom layout, changing this setting will replace your custom look with the new responsive stock look and feel. You can switch back and forth between your site's legacy public page style and the new responsive style as often as necessary using this setting. If you have a custom layout that includes Google Analytics, switching your public pages to the responsive layout will remove the Google Analytics code from your site. Open a Support request for help enabling Google Analytics on public responsive pages.
By default, the header of the responsive layout will show your office and institution name. You can upload images to be used in the header area of your site and set the alignment of the image (center, left, right). Once an image has been uploaded, it can be removed by clicking "Remove".
Header Background Color
The color of the header area of your site can be adjusted by making a selection from the color grid or entering the corresponding hex color code.
By default, the footer of the responsive layout will display a "Powered by Terra Dotta" logo. You can upload images to be used in the footer area of your site and set the alignment of the image (center, left, right). Once an image has been uploaded, it can be removed by clicking "Remove".
Footer Background Color
The color of the footer area of your site can be adjusted by making a selection from the color grid or entering the corresponding hex color code.
The color theme refers to the primary color used throughout the site. Choose from one of the default options or select "Custom" to set your site's primary color to something specific using a hex color code. The color selected (and various shades of that color) will be used for panel headings, buttons, hyperlinks, borders, and the background gradient.
By default, all hyperlinks on your site will be displayed with the same color as your site's color theme. You can use the "Anchor/Link Color" setting to choose a different color for your site's hyperlinks.
Functional Site Links
Check the box next to any site links that you wish to display on your public site and in the "Home" menu.
If a site does not have responsive design enabled, then access to the Legacy Stock Layout Editor will appear in a banner at the top of the Layout Editor page.
Important Note: Most sites will have responsive design enabled, and it is recommended that you leave this setting enabled. Therefore, this section of the Knowledgebase article will be irrelevant to most admins.
The Legacy Stock Layout Editor page displays a long list of configuration options as follows:
A list of customizable elements appear (under "Element Name") along with the current color value (under "Current Value") and a field where you can enter a new color value (under "New Value").
If you type in the name of the new color and click the color preview box directly to the right of the new value field, a color preview pane will appear. The preview pane will display a larger sample of your chosen color, as well as grid of available color choices. If you click on one of the colors in the grid, it will automatically be added to the '"New Value" field. Click the preview box again, and the color preview pane will disappear.
If you already have a banner image uploaded to the site, it will be displayed under "Current Banner Image" column. Use the "Orientation column to select how your image is situated on the page. Click "Browse" under "New Banner Image" to view and select a file to upload.
The default footer in the stock layout has a Terra Dotta logo that is right aligned. If you would like a footer other than the default, you can upload a footer image in this area of the stock layout editor. The image uploaded will replace the Terra Dotta logo.
The recommended width of the content area on public pages is 850px or less. If the header or footer image you use is wider than 850px, it will be bigger than the content area. There is no height restriction.
Note: If you already have a header or footer image uploaded and are trying to change the alignment, you must upload the image again and set the alignment at the time of upload.
Once you have entered the correct information, type in a name for the layout and click the "Apply Style" button at the bottom of the page.
By default, Terra Dotta has four functional links that appear on all pages of the site (public-facing and logged in): Home, Programs, Staff, Deadlines. In this area of the legacy stock layout editor, you can choose to turn those links on/off by checking the corresponding boxes. This feature only works if you are using the stock layout. If you have a custom layout, the custom layout files will determine which of those links are displayed on your site.
Use the "Preview Public" link to view the public page layout. Click "Preview Private" to see a preview of the logged in page layout. Use these buttons to preview your updated settings before you click the "Apply Style" button.
In the legacy stock layout editor, you can create different layouts. This is useful for people who want to try several different iterations or color schemes without having to reset each element every time they want to try something different. Before you click the "Apply Style" button at the bottom of the page, you will see a field where you can enter the layout name. Each time you apply the style with a new name, the system will save that as a different layout. To switch between the different layouts, choose from the drop-down list in the "Load another layout" field and click the "Load" button. You also have the option to re-instate the default settings by choosing "Return to defaults" via this feature.