Introduction

This tutorial will explain how to add a Text Block to your page, using the content editor. Text Blocks added to your Warehouse can then be placed on any of your Web pages.

To use the content editor, first click the "Pages" tab (located in the menu at the top of any HillTop page). This will bring you to a list of the site's pages. Next, click the Edit button (pencil icon) to the left of the page title. This will bring you to the content editor.

 

Step 1 - Add the Text Block Group

In the page's content editor, click the "Text Blocks" link (under the "Add Content" heading) to add a new Text Block Group to your page. 

Content editor Text Block link

Optionally, click "Click to add a Group Title" text, located at the top of the group, and enter a title for the Text Block Group. Next, click the "New Text Block" button to add a new Text Block to the group, or click the "Existing Text Block" button to search for and add an existing Text Block. Step 2 explains how to add a new Text Block.

Note: To move the Text Block Group to a new position on the page, click the Move button ("four arrows" icon) and drag the Text Block Group vertically to its new position on the page.

Step 2 - Complete the Form

After clicking the "New Text Block" button, the "Add Text Block" form will appear. The form's sections are detailed below.

Title Information

Title and Name fields

This section is optional, and allows you to title and/or name the individual text blocks in the group. 

  • Title:  The title of your Text Block.
  • Name:  This field will auto-complete based on the title you have entered.

    The "Name" is the internal designator of your Text Block, and is used when adding existing Text Blocks to a page, as described in the final step of this tutorial. 

Content

Content field

  • Content:  Use this field to enter the main body of text. The WYSIWYG toolbar, located directly above the field, can be used to format your text, add links or images, create tables, and more. See Using the WYSIWYG Toolbar for more information.

Properties

Click the "Properties" section is optional. Click the "Properties" text to expand it. 

Text Block Properties Section

  • URL:  This field is used in conjunction with the "Image" field, below. If you are adding an image to the "Properties" section, entering a URL in this field will turn the image into a link.

    "Upload Image" will allow you to select an image file from your computer, while "Choose from warehouse" is used to select images that have already been uploaded to HillTop. Clicking "No image" will remove any attached images.

  • Image:  Images added here will appear to the left of the text entered into the "Content" field. The images can be turned into links, using the URL field, above.

Finish - Add to Page and Select Display Options

Once you have completed the form, click the "Submit" button to create your Text Block. Once a Text Block has been submitted, it will automatically ne stored in your Warehouse.

To add an existing Text Block to a page, begin by editing the page's content. This can be done by, first, clicking the "Pages" link at the top of your HillTop Dashboard, then locating the appropriate page from the list and clicking the Edit button (pencil icon).

From the page content editor, click the  "Text Blocks" link, located in the right margin, under the "Add Content" heading. This will create a new Text Block Group on your page. Next, click "+Existing Text Block" located on the bottom of your new Text Block Group.

Existing Text Block button

Locate the appropriate Text Block, listed by "Name" in the left hand column. Click the arrow to the right of the "Name" to select the Text Block. This can be repeated for each Text Block you would like to add to the Text Block Group. Once the appropriate Text Blocks have been selected, click the "Submit' button to add them to your page.

Select Text Block window

Optional - Modify Display Settings

Once you have added a Text Block to your page, you can customize its look by clicking the "Settings" link, located on the right side of your Text Block Group's blue heading. Clicking this link will display a list of options, which are detailed below. Some options listed below may not be availeble, dependant on the version of HillTop that is used by your site.

Template Placement

Main Body: This is the default option, and displays your Text Block in the main body of your page.

Sidebar: Select this option if you want to display your Text Block in the left or right margin of your page, offset from the main body of content.

Sort By

Drag Order: This is the default option, and allows you to choose the order in which your Text Blocks are displayed, by clicking and dragging them within the Text Block Group.

Date Updated: This automatiicaly displays your Text Blocks in the order they were created/updated.

Layout

Default: This is the standard layout, with no special formatting applied.

Table of Contents: This setting adds a horizontal rule beneath your Text Block's title, and any image attached in the properties section will be displayed to the left of the title.

Profile: This option creates a light gray background behind the Text Block, with a thin dark gray border. An image attached in the properties section will be displayed to the left of the title.

Image Blocks: This setting is used in conjunction with an image attached in the properties section, and the "featured" image size option. When combined, these settings will produce a narrow column of text, with an image above and centered with the text. 

Sort Order

This option is used in conjunction with the "Date Updated" sorting option.

Ascending: This will display your Text Blocks in newest-oldest order.

Descending: This will display your Text Blocks in oldest-newest order.

Display Image

Yes: If you have attached in image in the properties section, it will be displayed according to your chosen layout.

No: Choosing this option will hide any image attached in the properties section.

Image Size

These options determine the display size, in pixels, of an image attached in the properties section.

Thumbnail: 100 x 50

Profile: 150 x 150

Medium Square: 200 x 200

Featured: 600 x 400

Display: 325 x 162