Building a Page

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

Adding Content Blocks

content-block-chooseAdd 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
    • Images or color entered here will fill the section, going edge to edge on the viewer's screen.
  • 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.
    • 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.
      • This allows 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.
    • alt-text-inlineFor all images be sure to add Alternate Text. Each image you add to your site should be named well and have text that describes what the image contains. (not "Picture of ...") This is required for the American's with Disabilities Act (ADA) and can be helpful to search engines and any consumer.
    • Learn our Recommended Image Sizes for various content blocks

Special Content Blocks

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

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.

Slideshow

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

Additional Notes

  • Preview your page by saving changes and clicking the preview button in the upper right.
  • See our image size recommendations for our 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.
  • To make sure white or light colored text is readable if images don't load (and to prevent contrast errors intools used to test for ADA compliance) add a background color along with any image you add in Column Settings or Section Settings.
    background-color-1