Important Note: This article discusses classic functionality. For information on the modern applicant experience, refer to the Applicant Experience Knowledgebase article. For information on available functionality after this date, refer to the Site Builder for Terra Dotta Study Abroad Knowledgebase article.

Terra Dotta's Site Builder feature provides options from which an admin can manage home page content, links, menus, and other site-related content.

This article covers the following topics related to the Site Builder feature:

Understanding Site Builder
Home Content
Link Content
Friendly URLs
Layout Editor
Legacy Stock Layout Editor
Advanced Layout Editor (Sandbox Sites Only)
Frequently Asked Questions

Understanding Site Builder

The Site Builder feature is accessible only to admins with the corresponding Website Admin permissions:

Website Admin: Home Page Content
Website Admin: Link Content
Website Admin: Friendly URLs
Website Admin: Stock Layout Editor

To access the Site Builder, navigate to Site > Site Builder.

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.

Home Content

To add or change content on a site's home page, navigate to Site > Site Builder. From here, click on "Home Content" or the "Change your site's Home Page content" link. A WYSIWYG editor will appear within which content can be added or modified. This may include text, images, or HTML. To save the content, click "Update" at the bottom of the page. The new content is immediately displayed on the site's home page.

Link Content

It is possible to create links within a navigation menu that appears on your site's home page. These links can be accessed by any site visitor and provide them with important information before logging into your site.

To create or update a link which displays on your site's home page, navigate to Site > Site Builder and click on the "Link Content" button or "Change Your Site's Links and Content" link. From within the "Link Content" page, information is organized into columns as follows:

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.

Creating a New Link

To create a new link, click "Create New Link" at the top of the "Link Content" page.

This action opens a configuration page containing two distinct sections, "New Link" and "Page Content". From this page, you can create a link that appears on your site's home page that directs site visitors to an external URL or specific content that you've configured. After entering information as desired in the two sections below, you will need to click "Add" at the bottom of the page to preserve your changes.

The "New Link" section contains the following options:

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.

Editing Links

To edit the content in your links, click the corresponding edit pencil in the "Actions" column. The content of the linked page is displayed. Make changes as desired and click "Update" to preserve your edits.

To reorder the position of the links in the navigation menu, edit the numbers in the fields to the left of the links on the "Link Content" page. Then click "Re-order". The changes are immediately displayed on the public site. If you change the order of a top-level link that has sub-links, the sub-links will stay "attached" to the same top-level link. You can also change the order of the various sub-links under the same top-level link.

To make a top-level link a sub-link (or vice versa), take action using the corresponding edit pencil in the "Actions" column. You can also take action from the "Link Content" page by clicking the black arrow pointing to the right in order to indent the link. This will make the top-level link a sub-link of the top-level link directly above it. You can also make a sub-level link into a top-level link by clicking the black arrow pointing to the left in order to remove the indentation.

Important Note: The navigation menu only supports up to three levels of links - a top-level link and two nested links.

Deleting Links

To delete a linked page, click the corresponding red "X" from the link's "Actions" column.

Important Note: A link cannot be deleted if it has sub-links associated with it. The "X" in the link's "Actions" column will be grayed out if there are sub-links attached to it. Hence, it cannot be deleted. You need to move or delete the sub-links so they are no longer nested under that link before you can delete the link.

Friendly URLs

With the use of a friendly URL, an admin can create a unique URL to use in place of an existing URL. Such an action might be beneficial when you need a URL that more accurately describes the content of the page or is more concise and user-friendly.

To access friendly URLs on your site, navigate to Site > Site Builder and click on the "Friendly URLs" button or "Change Your Site's Friendly URLs" link. Any existing friendly URLs will be displayed in columns as follows:

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".

Layout Editor

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.

Header Image

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".

An image size of 1500 x 400 pixels is recommended yet may need to be modified depending on your needs.

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.

Footer Image

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.

Color Theme

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.

Anchor/Link Color

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.

Legacy Stock Layout Editor

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:

Layout Elements

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.

Go through the rest of the page and set all the desired color values, type in a name for the layout, and then click the 'Apply Style’ button at the bottom of the page. Your color choices will automatically be applied to the site.

Banner Image

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.

Footer Image

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.

Banner Links

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.

Page Previews

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.

Layouts

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.

Advanced Layout Editor (Sandbox Sites Only)

After navigating to Site > Site Builder on a sandbox site, an additional option appears for "Edit Stock Layout (Advanced)". As previously mentioned, 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.

For more details on this feature, see the Advanced Layout Editor article.

Frequently Asked Questions

1. How can I create site content pages that don't appear in my site's navigation menu?

The Document Center can be used for this purpose. Take the following steps:

1. Navigate to Site > Document Center. Click on "New Document".

2. Using "Option 1: Create a WYSIWYG Document", assign your document a title that reflects the text of the hyperlink that you will use to link to the content.

3. Enter the site page content in the "Custom WYSIWYG Content" section. Click "Save" to preserve your changes. Your document will now appear in the Document Center as a WYSIWYG object.

4. Navigate to the WYSIWYG editor for the page from which you want the new content to be accessed. This could also be a brochure page (using a content widget) in Program Wizard.

5. Position your cursor where you wish the hyperlink to be placed. From the WYSIWYG editor's toolbar, click the "Insert Document" icon, which looks like a yellow file folder. Select you document's title from the "Existing File" menu.

6. Select "in-line'" for the behavior that defines how your content will appear. Then click "Submit". Make sure to save your changes to the existing site page.

When a site visitor clicks on the added link, they will be taken to a page displaying your Document Center object's content wrapped in your site layout as if it were a standard page on your site.

The Knowledgebase

Study Abroad: Site Builder's Site Content (Classic)