100% Width & Parallax Areas

By using  „Fullwidth Container“ shortcode you can insert and style 100% width areas with optional parallax anywhere on your page and add to this area any content & shortcodes you wih. To insert fullwidth container, choose this element from the list of TheGem’s shortcodes here:

Color: select the font color for the text content you will insert in your fullwidth area

Background Color: select the background color for your fullwidth area

Background Image: select some image to be used as background image of fullwidth container. For parallax areas we advice to use large images in 1920 x 1200 px resolution

Background Style: choose a style of displaying background image

Background horizontal position: choose the horizontal position of your background imageBackground vertical position: choose the vertical position of your background image

Parallax: enable parallax effect if you wish to use parallax

If enabled:

Parallax type: choose parallax type you wish to use

Parallax overlay color: select overlay color for your parallax area

Padding top: set the top padding of the fullwidth area in pixel

Padding bottom: set the bottom padding of the fullwidth area in pixel

Padding left: set the left padding of the fullwidth area in pixel. NOTE: set this padding to “0” if you wnat to avoid any paddings to the left

Padding right: set the right padding of the fullwidth area in pixel. NOTE: set this padding to “0” if you wnat to avoid any paddings to the right

Container: enable this option if you don’t want to display the content inside your fullwidth area in 100% width layout, i.e. to display your content width limited to main website content width

Top & Bottom styled marker: choose if you wish to dispaly a styled marker and on which position After adding a fullwidth container, you can add any content element inside it by simply clicking on “+” symbol on it: