Building a Page

Add content to a responsive page by selecting a content block and dragging it onto the page.

Adding Content Blocks

Add page content by adding content blocks.

  • Mouse over the upper left corner of the responsive page to open the sidebar with all blocks.
  • Click on a block type  (1 Column, 2 Column, etc.) to see a preview of the pre-built blocks.
  • Drag and drop the block where you want it on the page. 

Section Settings

To the right of every section on your page, there is a small gear icon with several options. 

Section Settings 

sectionsettings

  • Set Start/End dates for this section.
  • Set a CSS class for the section. You will add the CSS that refers to 
    this section in Page Settings, or within Template Publisher.
  • Make the section full-screen width, this does not work for Catalog sections.
  • Add a background image or color.

Reset Section

  • Clear the changes you've just made, and goes back to the last version you saved.

Clone Section

  • Create an exact replica of a content block.

Delete Section

  • Deletes this content block.

Editing Content Blocks

There are two additional elements you can edit in conjunction with the Section Settings, the Column and the Content itself

Column Settings

  • Add a background image or color
  • Add a class name to style the column as configured in page-specific or template CSS

Edit Content

  • Add text, images, video to your block.Screenshot 2019-10-04 at 10.34.44
    • The editor offers a suite of editing tools you will find familiar to many content and text editors and includes an HTML editor. Mouseover any icon for a description.
  • Some blocks come with placeholder images, to replace these simply click on the light grey placeholder. Dark grey placeholder images are updated in column settings.
    • When uploading a new image to replace a current image, it will automatically apply the same aspect ratio/crop to the new image.
    • If you want an image with a different aspect ratio, delete the placeholder before uploading your image.
    • The minimum size/aspect ratio is listed when you click Edit Image.
    • If you want a different part of the image to show up, click Edit Image > Crop and it will allow you to adjust what part of the image appears within the allotted space.
    • When prepping images for upload, make sure you're sizing well and compressing or using a lower quality to reduce file size, as this will impact page load speeds if you have many large files/images.

Special Content Blocks

These blocks have a Create button you select to edit or add the content.

Slideshow

  • We don't recommend using these as they slow page load times down, don't work well on mobile devices and are not good for search engine optimization. 

Catalog

  • Select a category, brand, or other criteria to create a catalog section. Select Carousel or Tabular on the Display Options tab.

Custom Content Block

  • You can create a content block section without using a pre-built block. Select Custom, there are several column widths, and then you can add an HTML or WYSIWYG block.

Additional Notes

  • Preview your page by saving changes and clicking the preview button.
  • See our image size recommendations for our pre-built content blocks.
  • See what your page will look like on different devices by selecting the Mobile or Tablet icon at the top-left of the page.