Live Component Guide

Contents

Your guide for building sweet content pages!

The purpose of this page is to display all of the different components that you can use to build a content page using the Page - Components content type.

Pages & Sections

Pages & Sections

Page settings

Each page built with this template has some settings you can use as needed.

  • Hide page title
    Use this check box to hide the page title. By default, the page title shows in large, Orange text at the top of the page. Hiding the title is useful if you're using a banner to display the page title instead.
  • Include secondary menu
    If the page you're building is a sub-page, checking this box will display a submenu on the page that contains a link to this page and all other sub-menu pages.
  • Include sticky table of contents
    If you're setting up a long page with a bunch of sections, optionally include a sticky table of contents. To add a section to the table of contents, all you need to do is enter a section title which is in the settings of each section.
  • Page class
    Optionally add a unique page class used for page-specific styling.

Section settings

Each section within the page has a number of settings that you can use to affect the section.

  • Section title for table of contents
    When the table of contents is enabled, adding a section title here will add this section to the table of contents menu.
     
  • Background colour
    Select a background colour for this section.
  • Display full width
    By default, the content within a section will be in a container that is about 1200px wide. Check this box to allow the content to be displayed the full width of the screen instead. This is useful for things like header banners with a background image set.
  • Remove padding (top and bottom)
    By default, each section has some padding added to the top and bottom of the section. Check these boxes to remove that padding. This is useful for things like header banners with a background image set where you don't want any blank space around the image.
  • Section FX
    Optionally select a transition in/out effect for this section. Currently, only some basic fades are available to use, but more can potentially be added if needed (see http://michalsnik.github.io/aos/).
Sub-Section Titles

Sub-Section Titles

Sub-section titles

The Sub-Section Title component works in tandem with the table of contents menu to let you specify the start of a new sub-section. When a sub-section title has been added and the Table of Contents menu has been enabled for the page, the table of contents will display the sub-section within the menu and provide a quick-link to this section of the page.  

You can see in the table of contents menu that a sub-section title has been added for this block of text here. Whoop!

Section FX

Section FX

Any section can have an effect applied to it via a Section FX dropdown. Just select the effect you want to use. Currently, only some basic fades are available to use (shown below), but more can be added if needed (see http://michalsnik.github.io/aos/).

Fade up effect

Fade left effect

Fade right effect

Modals

Modals

When creating or editing a page, below the page sections is a place where you can create Modals. Creating modals uses many of the same paragraphs that you use for the page sections. In this way, you can add text, forms, video, etc. into a modal. Each modal gets assigned an ID, and any linked paragraph will give you the option to link to that ID to open the modal.

Modals can be created in a variety of different sizes: small, medium (default), large, and full screen. The alternate full screen modal is great for videos. Examples of these are shown below.

Rich Media Banners

Rich Media Banners

The Rich Media Banner component has a lot of options that you can configure for making awesome banners. You can use the section background colour as a background or set an image instead. When using an image, you can optionally set the image to have a parallax effect or a follow-mouse effect. Examples of these effects are shown on the first two banners below.

Another option you have with the Rich Media Banner is to show it full screen. Checking this option will let the banner take up the full browser height of the device viewing it. The height is calculated automatically.

Finally, you can optionally add more than one slide to create a slideshow. The same options above apply, but with a slideshow, the user will have arrows and a bullet nav to navigate through the slides.

Text Sections

Text Sections

"Basic Content/Text Section" Components

These components are both used to add text-based content, but there is a difference between them.

The 'Basic Content' component adds a full-width block of text and has a WYSIWYG editor. Use this if you just need some text content full width. This section you're reading right now uses the Basic Content component.

The 'Text Section' component has a main section and secondary section. The main section can be used for a full width block of text like the 'Basic Content' component, however an option secondary section can also be used to add another column of content. The secondary section has various settings to control how wide the secondary section is. Further examples are shown below.

Main with 1/3 secondary

This is an example of the Secondary Section set to appear on the right side of the Main Section, taking up 1/3 the width. This is great for adding images, video or lists beside the main section.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac enim id justo dapibus tristique. Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper.

Main with 1/4 secondary

This is an example of the Secondary Section set to appear on the left side of the Main Section, taking up 1/4 the width. This is great for adding images, video or lists beside the main section.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac enim id justo dapibus tristique. Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit.

Main with 1/2 secondary

This is an example of the Secondary Section set to appear on the right side of the Main Section, taking up 1/2 the width. This is great for adding images, video or lists beside the main section.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac enim id justo dapibus tristique. Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. 

Button CTAs

Button CTAs

Button CTAs can be used in combination with most other components and have a variety of different themes. Each button can optionally have a Font Awesome icon set to display either to the left or the right of the text.

Tabs

Tabs

The Tabs component is used to build tab based content. There are different theme options that you can choose from. Examples of each theme are shown below.

This is the Default tab theme.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac enim id justo dapibus tristique. Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper. Maecenas in justo in eros convallis rutrum eget at massa. Proin ante elit, congue venenatis ultricies eu, iaculis in odio. Cras lacinia sollicitudin mi, eget rhoncus ipsum lobortis semper.

This is the Default tab theme.

Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper. Maecenas in justo in eros convallis rutrum eget at massa. Proin ante elit, congue venenatis ultricies eu, iaculis in odio. Cras lacinia sollicitudin mi, eget rhoncus ipsum lobortis semper.

This is the Default tab theme.

Duis ac enim id justo dapibus tristique. Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper. Maecenas in justo in eros convallis rutrum eget at massa. Proin ante elit, congue venenatis ultricies eu, iaculis in odio. Cras lacinia sollicitudin mi, eget rhoncus ipsum lobortis semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac enim id justo dapibus tristique.

This is the Alternate tab theme.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac enim id justo dapibus tristique. Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper. Maecenas in justo in eros convallis rutrum eget at massa. Proin ante elit, congue venenatis ultricies eu, iaculis in odio. Cras lacinia sollicitudin mi, eget rhoncus ipsum lobortis semper.

This is the Alternate tab theme.

Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper. Maecenas in justo in eros convallis rutrum eget at massa. Proin ante elit, congue venenatis ultricies eu, iaculis in odio. Cras lacinia sollicitudin mi, eget rhoncus ipsum lobortis semper.

This is the Alternate tab theme.

Duis ac enim id justo dapibus tristique. Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper. Maecenas in justo in eros convallis rutrum eget at massa. Proin ante elit, congue venenatis ultricies eu, iaculis in odio. Cras lacinia sollicitudin mi, eget rhoncus ipsum lobortis semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac enim id justo dapibus tristique.

This is the Alternate 2 tab theme.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac enim id justo dapibus tristique. Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper. Maecenas in justo in eros convallis rutrum eget at massa. Proin ante elit, congue venenatis ultricies eu, iaculis in odio. Cras lacinia sollicitudin mi, eget rhoncus ipsum lobortis semper.

This is the Alternate 2 tab theme.

Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper. Maecenas in justo in eros convallis rutrum eget at massa. Proin ante elit, congue venenatis ultricies eu, iaculis in odio. Cras lacinia sollicitudin mi, eget rhoncus ipsum lobortis semper.

This is the Alternate 2 tab theme.

Duis ac enim id justo dapibus tristique. Nulla placerat cursus interdum. Nam aliquet orci malesuada eros varius blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin gravida orci nec eleifend semper. Maecenas in justo in eros convallis rutrum eget at massa. Proin ante elit, congue venenatis ultricies eu, iaculis in odio. Cras lacinia sollicitudin mi, eget rhoncus ipsum lobortis semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac enim id justo dapibus tristique.

Block CTAs

Block CTAs

The Block CTAs component lets you add groups of CTAs where each is one is contained within a defined block. Each CTA can have an icon (either image or font) and contains a title, text and link. Each element is optional, so build them as you need.

The settings for each block CTA section have options that you can choose from to customize the section. You can choose the theme. Another option is 'number of blocks'. Entering a number of blocks lets you show a specific number of blocks before a 'view all' link appears. Clicking that link reveals the remaining blocks. Examples of each theme can be seen below.

Image Block CTAs

Image Block CTAs

The Image Block CTA component lets you an unlimited number of CTA blocks that include an image, title, link, and optional action label and flag.

NOTE: By default, a maximum number of 6 blocks with show depending on the browser width. However, a setting checkbox can remove the auto-hide feature.

Responsive Image CTA

Responsive Image CTA

The Responsive Image CTA lets you upload images in 3 different sizes (desktop, tablet, and mobile) and then set a URL for these images to link to. An example is shown below. Resize your browser to see the image change based on the browser width!

Straps CTAs

Straps CTAs

The Strap CTA component can be used for building vertical or horizontal straps. Each strap lets you choose whether to use a dark or light theme depending on what section background colour you are using.

Horizontal Strap Light Theme

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum purus nec nibh venenatis feugiat.

Horizontal Strap Dark Theme

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum purus nec nibh venenatis feugiat.

Vertical Strap Light Theme

Lorem ipsum dolor sit amet , consectetur adipiscing elit . Donec elementum purus nec nibh venenatis feugiat .

Vertical Strap Dark Theme

Lorem ipsum dolor sit amet , consectetur adipiscing elit . Donec elementum purus nec nibh venenatis feugiat .

Image Straps

Image Straps

The Image Strap component lets you display an image to the left or right of some content. Each strap lets you choose whether to use a dark or light theme depending on what section background colour you are using.

The image always fills its entire container, expanding and shrinking as needed to show as much of the image as possible while staying in proportion. The image is also centred both horizontally and vertically. When the image is uploaded, an image style is applied that resizes the image to a max width of 1600px. The height remains proportional to that. The images used in the examples below are 1600px wide by 1000px tall.

Case Studies

Case Studies

Embedded Views

Embedded Views

If you ever need to embed a View into the page, The View component will let you do that. All you need to do is enter the view's machine name (i.e. hubspot_blog_feed) and the machine name for the display (i.e. block). A new view being added may still need to be styled before it looks good.

An example of the embedded HubSpot blog feed view is shown below. This view pulls in the 3 most recent blog posts from Acro Media's HubSpot hosted blog.

Embedded Code

Embedded Code

The Embed Code component lets you add in a code snippet provided by another site. This is mainly used for embedding things like HubSpot forms, YouTube videos, Google maps, etc. All you need to do is paste in the code. A few examples are shown below.

Note: Some code, such as YouTube videos, might need to be wrapped in a responsive container. A service like http://embedresponsively.com can help you do this.

Contact us!

Lorem ipsum dolor sit amet, consectetur adipiscing elit nec nibh venenatis feugiat.

Subscribe to our blog