Overview
The Site Builder for Terra Dotta Study Abroad consists of a comprehensive content management tool that gives administrators the ability to apply templates or drag and drop components to build public site pages.
This article covers the following topics related to editing content in the Site Builder:
- Icon Glossary
- The Details Modal
- Using Image and Text Components
- Using Buttons and Links
- Using Columns
- Using Blocks: Pre-Built, Basic, & TDS
- Frequently Asked Questions
Important Considerations
As you get started exploring the Site Builder's content editing tools, keep the following in mind:
- A canvas refers to the white space in your content editor.
- Several resources are available for use with the Site Builder, including:
- The Site Builder for Terra Dotta Study Abroad: This article contains all available learning resources for the Site Builder, including video instruction.
- The Site Builder Import Guide
Any time you edit content in a canvas, you are presented with a series of commands which perform specific tasks. These appear as icons in a menu across the top of the canvas.
The command menu consists of the following options, from left to right:
Device Manager Commands
Use these commands to preview the responsiveness of these various devices:
- Desktop: Displays content in a desktop view.
- Tablet: Displays content in a tablet view.
- Mobile Device: Displays content in a mobile device view.
General Commands
- View Components: Selects all components on the canvas to be edited.
- Preview: Shifts view to see the canvas as it would appear with the content you have created. To leave the preview mode, click on the "End Preview" icon located on the top left corner of your footer canvas.
- Full Screen: Shifts view so that the canvas occupies the entire computer screen. Click the icon a second time to return to your regular view.
- View Code: A view-only modal that allows you to see any HTML and CSS that has been applied. Click the "Export to Zip" link to create a zip file.
- Undo: Revert your most recent unsaved changes to the data which existed prior to the change.
- Redo: Move back to your most recent state of unsaved data that existed prior to your undo action.
- Import: Paste in code as input. This action overrides the current code.
- Delete: Remove content from the canvas.
- Edit Code: Modify existing code in your canvas.
Layout, Settings, & Block Commands
The style, component, and layer commands are more advanced options that support a variety of CSS properties. They are available for use as desired.
Important Note:
When editing text and creating behaviors, such as linked URLs, for selected components on your canvas, you will be prompted to make these edits in a Details modal after double clicking on the component. Most editing work will be done in the Details modal.
From left to right:
- Style Manager: Access detailed levels of style options for a selected component on your canvas. This includes borders, alignment, and padding. Each section of the Style Manager expands to display a series of style options.
- Component Settings: Used to provide data to create the behavior of a selected component.
- Layer Manager: Access detailed levels of a selected component on your canvas. Each level breaks down from the largest level to the smallest, such as from Body > Row > Cell > Text.
- Blocks: Access different elements that you can drag and drop onto the canvas. This menu is organized into three sections: Pre-Built, Basic, and TDS.
Pre-Built Blocks
Custom Blocks
TDS Blocks
Using Image and Text Components
When you drag and drop blocks onto your canvas, a template will appear for the respective block and may contain a default image and text that can be modified.
Images
Double click on a default image to open up the Image Library modal. From here, you can access and modify image details, select a different photo from the Image Library, upload a new image, or search the catalogue of copyright-free images in Pixabay.
Text
Double click on your default placeholder text to open the Details modal. From here, you have access to a rich-text editor from which you can perform several of the most common modifications to your text.
These common options include:
- Copying/pasting in source code.
- Performing style options, such as bold, italics, and underline.
- Linking to a URL.
- Creating a table.
After you've entered your text and modified it as desired, click on "Set Values". This action will apply your changes directly to the canvas. You will need to click the "Save" icon at the top of the page to preserve these changes.
Double click on your default button or link to open the Details modal. From here, you will need to populate the following information:
- Text: This will appear to site users as the text on your button or link.
- Title: This text displays when a user hovers their mouse over the button or link.
- Href (Hypertext Reference): The URL to which you want to direct users.
- Window: Determine if the user should view the linked page in the same window or a new one.
After you've entered your information, click on "Set Values". This action will apply your changes directly to the canvas. You will need to click the "Save" icon at the top of the page to preserve these changes.
A column can be thought of as a container from which you can more easily work with other components, such as buttons or images. Let's imagine that you want to create a page with a button that is centered in the middle of your page. Here is an example of how you can achieve this desired setup with a column:
1. From the "Basic" blocks section of your Content Editor, drag and drop the single column block onto your canvas. You can view the column on the canvas by clicking on the "View Components" icon in the General Commands menu bar.
2. From the "Pre-Built" blocks section of your Content Editor, drag and drop the button block into the single column on your canvas.
3. Next, you will center the column. This action will then center anything within the column, including your button. Click on the container in your canvas so that it is outlined. Then click on the Style Manager section. From this menu, navigate to the Typography section and locate the option for "Text Align". Click on "Center". Your column will now center any component, such as a button, that has been placed within it.
As mentioned before, this option works to center components in the column, including an image. You can also select one of the other mobile devices to view the responsiveness. In this image, we see how content would display on a mobile device.
4. You must click "Save" at the top right of the page to preserve your changes.
Using Blocks: Pre-Built, Basic, & TDS
The following listing outlines the default template for each block:
Pre-Built Blocks
- Image & Text
- Text & Image
- Text on Image
- Hero
- Count Up
To use the Count Up block, drag and drop the block onto your canvas. When editing, you will see two text fields, one which can be used with a number and the second with text, such as "K" or "M".
The best practice is to use both text blocks so that the counting action occurs in a timely manner. For example, if you wanted to demonstrate 5,650 students abroad, then enter "5.65" into the first text block and "K" into the second.
It is not required to use both text blocks. However, entering only a number, such as 500000, would result in a counter which needs to count up quite a bit before the desired number is reached.
- Testimonials
- Carousel
- Program Search
- Button
- Linked Document
After you drag and drop the linked document block onto your canvas, double click on the link provided. This action will open a Document Center modal from which you can locate your desired document. To select the document, click on the corresponding check mark under the "Actions" column.
You have now officially set your document. The title of your document in the Document Center will be displayed as the name of the link in the Site Builder:
Basic Blocks
Anytime you drag and drop a column block onto your canvas, you can then drag and drop an image or text block into each column. For example, the 3-column block could be edited to include images and text, such as the following:
TDS Blocks
This panel contains blocks for Terra Dotta components that include:
- Course Search
- Deadlines
- Program Discovery
- Staff Cards
- Staff Table
These blocks cannot be modified. They are hard-coded, so you only need to drag and drop them onto your canvas.
1. How can I link to a document in the Document Center?
There are two options:
Copying a Link
In the Site Builder, navigate to the Document Center tab. If a document is a non-WYS type, an option will appear under the "Actions" column from which you can copy a link for the document. You can then insert this link where needed. It is not possible to copy a link to WYS-type documents in this way. However, it is possible to use the "Linked Document" block
Using the Linked Document Block
When creating a page in the Site Builder, use the "Linked Document" block. After you drag and drop this block onto your canvas, double click on the link provided. This action will open a Document Center modal from which you can locate your desired document of any type. To select the document, click on the corresponding check mark under the "Actions" column. You have now officially set your document. The title of your document in the Document Center will be displayed as the name of the link in the Site Builder.
2. How can I create a table in the Site Builder?
There is not a table component available to drag and drop onto your canvas when editing a page in the Site Builder. Instead, it is recommended that you drag and drop a 3-column table block onto your canvas. Then drag and drop a text block into the center column. When the "Details" modal opens, select the table icon to configure and create your table. See the following video for a quick explanation: