AVERITT DIGITAL STYLE GUIDE

Settings

Hero Banner

To set up the Hero Banner, Select the "Clean 6 - Hero - Banner" module and add these settings.

• Under "Start here", make sure the number of columns is set to 1.
• Then, under "Column 1", add your text in the content field.
• Lastly, under "Row settings", choose whether you want an image or a video background and right below, add the video file or image. 

Columns

To set up different columns using the "Clean 6 - Row - Multi-column content" module, do the following. 

• Under "Start Here" select the number of columns you want.
• Then, under "Add & edit content here" Add the content in the text editor field. Right below the text field under "Settings" uncheck the "Show Divider Accent". Do this for each of the columns you have.
• Lastly, under "Row settings" Adjust the background color.

Image/Video and text

The "Clean 6 - Row - image and text" and "Clean 6 - Row - video and text" modules will have the image/video and text side by side. To set up these modules:

• Under "Start Here", if this is the first module you're using for a page, set the image/video to be on the right. If this is second module that's being used, set the image/video to the left.
• • Under "Style options" further down, make sure "Show video/image first on mobile" is checked.
  • Set the text animation to none with a 1 second delay.
  • Set the video/image animation to none with a 1/2 second delayUnder "Add & Edit content here", add the content under the text editor and then add the image or video below.
  • Under "Extra design elements" for the image module, make sure "Layer headline on top of image" is checked. Then, overlap text by 100px.
  • Check the "Text cutout image" box and then enter 20 for the cutout size.
  • Under "Add an overlay" Select color and set the color to #33475b and 50%. 
  • Under " Underlay offset position" for the image module, Select either left or right depending on what side the image is on. Then, set the offset distance to 30.
  • Finally, Check the "give image a shadow box" box and set the shadow size to 50. Then, set the color to #000000 at 50%.

Column overlapping Banner

Use the "Clean 6 - Row - Multi-column content" module and add these settings to overlap the banner

• Under "start here" add 2 columns.
• Under "Add & edit content here", add the content in the content field. 
• Under "Row settings" add the following,
  • Make sure column width is set to slim.
  • Padding top on desktop is small
  • Padding bottom on desktop is XX-small
  • Padding top and bottom on tablet is small
  • Padding top and bottom on mobile is X-small
  • Under "Style options", Check the "Pull content over the row" box and set 100 for pull up desktop. 
  • Finally, add a white background color to the module.

Flexi cards

Add these settings to the "Clean 6 - Row - Flexi Cards"

• Under "Start here" add the number of cards to the section.
• Under "Add & edit content here" Add the image and headline, then under "Link options" add the link to where the card will take you once clicked. 

Testimonials

Add these settings to the "CLEAN 6-1 - Row - Testimonial Cards".

• Under "Start here" add the amount of testimonials you want. 
• Then, under "Add & edit testimonial", add the name and the quote.

Form

You could use the multi-column content or the hero banner to add the form below. 

• With the multi-column content, set the column to 1 and under "Add & edit content" Check the "Add form" box and add the from the dropdown menu below. 
• With the hero banner, add 2 columns the the banner module and add the form to the second column, by selecting form from the dropdown menu at the top of the "Add & edit content here" for the second column.

Blog

Add this last. The "CLEAN 6-1 - Row - Blog Post Thumbnails" will be used to show the blogs. Add these settings to the module:

• Under "Start here" Select the blog you want to show and set both the columns and blog post to 3. 
• Under "Row settings" add the following under "spacing options"
  
  • Padding top for all devices set to X-small
  • Padding bottom for desktop and mobile set to small
  • Padding bottom for mobile set to X-small