Full Width Sections

Full width sections are sections that span across the width of the entire browser. There are three options for full width sections that allow for a background color, background image, or a background video.

Notice: Full Width Sections work best with the One Column Full Width layout (no sidebars). Exception: See Background Video Section.

Background Color

Shortcode Breakdown

[heels_full_width color="#F5F5F5" class=""]Content[/heels_full_width]

color: the color hexadecimal code. See the W3Schools Color Picker for options.
class: (optional) used in conjunction with Custom CSS for additional styling.

Shortcode Example

This full width section has a background color of #F5F5F5.

Parallax Background Image

Shortcode Breakdown

[heels_full_parallax color="#F5F5F5" class="" background="your image url"]Content[/heels_full_parallax]

color: the backup color hexadecimal code if the image doesn’t load. See the W3Schools Color Picker for options.
class: (optional) used in conjunction with Custom CSS for additional styling.
background: the url of the background image

You may need to change the color of the text for legibility when using a background image. Find out how.

Shortcode Example

This full width section has a background color of #F5F5F5 and this background image. The font is also white for better visibility.

Background Video Section

Notice: The Background Video Section will be contained if it is placed within the page, regardless of the One Column Full Width layout. To get the full width effect, place the shortcode in the Featured Content meta box.

Shortcode Breakdown

[heels_full_video poster="your image placeholder url" mp4="your mp4 url" class="" height="420px" align="center" bottom="40%"]Content[/heels_full_video]

poster: the url of the backup background image if the video doesn’t load.
mp4: the url of the video. It’s best to use a video without sound as sound will play once the video loads (with no way to silence the sound). Cannot use YouTube videos, you must link directly to video file.
class: (optional) used in conjunction with Custom CSS for additional styling.
height: the height of the fullwidth section.
align: the alignment of text.
bottom: the height percentage of the bottom padding. E.g. 40% will have a bottom padding taking up 40% of the full width section height, so any text will be situated almost vertically center. At 90%, the bottom padding will take up 90% of the height, with the text being almost at the top of the section.

You may need to change the color of the text for legibility when using a background image. Find out how.