Layout - Shortcodes: Content Section

Shortcodes

[intense_content_section]

Description

Add a content section to your page. Content sections are useful for many different things. They help add padding around an area. They can also be used to style a full-width portion of the page. Content sections make it easy to add an image or colored background to a portion of a post/page. The image backgrounds can even be parallax.

Screenshots

Dialog

Attributes

Compatibility

Video Background

The WordPress video background option requires a browser that supports HTML5 videos. If the browser doesn't provide support, the poster image will be shown in place of the video. Also note that not all browsers support the same video types. You are given the option to set an MP4, OGV, and WebM video. Setting all three is your safest choice. It is recommended to choose at least MP4 and WebM.

Theme Compatibility

The content section has three different sizing options:

• fullboxed (default) - 100% Full Width with Boxed Content
• full - 100% Full Width
• partial - Partial Width with Boxed Content

Fullboxed will make the content section the entire width of its container with boxed content inside. Full will make the content section the entire width of its container without a box around the content. Partial will put a box around the content section itself making the content section the size of the box.

In the HTML markup created by the [intense_content_section] shortcode, there are two different HTML elements at play when it comes to the width of the content section. The content section itself is an HTML section tag with at least two CSS classes (.intense and .content-section). Depending on the size option, there may also be an additional div used for boxing the content. The boxed div will have two CSS classes as well (.intense and .container).

The key to getting the box to look correctly within a theme is to make sure the .container class has the correct width for your theme. This class is standard for Twitter Bootstrap and may already be styled if the theme uses Bootstrap.

Another possibility is that your theme uses a different CSS class for this same purpose. If this is the case, you can set the CSS class name under the shortcodes options.

If the theme doesn't use Twitter Bootstrap and it doesn't define a similar class for the boxed content, you can manually set the width of the .container CSS class under the CSS code options.

Example:

.intense.container {
    width: 940px;
}

@media (min-width: 1200px) {
    .intense.container { 
        width: 1170px; 
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .intense.container {
         width: 724px;
    }
}

@media (max-width: 767px) {
    .intense.container { 
         width: auto; 
    }
}

Examples

[intense_content_section background_color="#1a8be2" border_bottom="0"]
[intense_row]
[intense_column size="6"]
[intense_promo_box shadow="8"]
<h2>Set Background Color</h2>
Add a content section, like this one, that has a background color of your choice.
[/intense_promo_box]
[/intense_column]
[intense_column size="6"]
<div style="color: #fff">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis commodo lectus eget fermentum. Proin molestie enim egestas odio mollis ultricies. Sed urna erat, hendrerit sed euismod sit amet, ullamcorper at felis. Sed mollis, tortor a blandit commodo, purus risus accumsan libero, vitae accumsan nunc felis fringilla eros. Fusce porttitor risus id magna scelerisque iaculis. In at elementum nibh. Etiam.</div>
[/intense_column]
[/intense_row]
[/intense_content_section]

[intense_content_section breakout="1" poster_id="9804" mp4_id="9835" ogv_id="9836" webm_id="9837"]
[intense_row]
[intense_column size="6"]
[intense_promo_box shadow="8"]
<h2>Set Background Video</h2>
Add a content section, like this one, that has an HTML5 background video of your choice.
[/intense_promo_box]
[/intense_column]
[intense_column size="6"]
<div style="color: #333; background: rgba(255,255,255,0.75); padding: 19px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis commodo lectus eget fermentum. Proin molestie enim egestas odio mollis ultricies. Sed urna erat, hendrerit sed euismod sit amet, ullamcorper at felis. Sed mollis, tortor a blandit commodo, purus risus accumsan libero, vitae accumsan nunc felis fringilla eros. Fusce porttitor risus id magna scelerisque iaculis. In at elementum nibh. Etiam.</div>
[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section background_color="#f3f3f3" imageid="3876" border_bottom="0" imagemode="repeat" margin_top="0" margin_bottom="0"]
[intense_row]
[intense_column size="6"]
[intense_promo_box shadow="8"]
<h2>Set Background Image Modes <small>repeat, repeat-x, repeat-y</small></h2>
Add a content section that has a background image of your choice and make it repeat horizontally, vertically, or both.
[/intense_promo_box]
[/intense_column]
[intense_column size="6"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis commodo lectus eget fermentum. Proin molestie enim egestas odio mollis ultricies. Sed urna erat, hendrerit sed euismod sit amet, ullamcorper at felis. Sed mollis, tortor a blandit commodo, purus risus accumsan libero, vitae accumsan nunc felis fringilla eros. Fusce porttitor risus id magna scelerisque iaculis. In at elementum nibh. Etiam.
[/intense_column]
[/intense_row]
[/intense_content_section]

[intense_content_section background_color="#f3f3f3" imageid="7474" border_bottom="0" imagemode="parallax" margin_top="0" margin_bottom="0" speed="8"]
[intense_row]
[intense_column size="6"]
[intense_promo_box shadow="8"]
<h2>Set Background Image Mode <small>parallax</small></h2>
Add a content section that has a background image with a parallax effect. Parallax is an effect where the background moves at a different speed from the foreground. In this example, the background image is moving slightly faster than the rest of the page as you scroll.
[/intense_promo_box]
[/intense_column]
[intense_column size="6"]
<div style="background: rgba(255,255,255, .6);padding: 10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis commodo lectus eget fermentum. Proin molestie enim egestas odio mollis ultricies. 

Sed urna erat, hendrerit sed euismod sit amet, ullamcorper at felis. Sed mollis, tortor a blandit commodo, purus risus accumsan libero, vitae accumsan nunc felis fringilla eros. Fusce porttitor risus id magna scelerisque iaculis. In at elementum nibh. 
</div>
[/intense_column]
[/intense_row]
[/intense_content_section]

[intense_content_section background_color="#f3f3f3" imageid="7468" imagemode="fixed" margin_top="0" margin_bottom="0"]
[intense_row]
[intense_column size="6"]
[intense_promo_box shadow="8"]
<h2>Set Background Image Mode <small>fixed</small></h2>
Add a content section that has a background image with a fixed parallax effect. Parallax is an effect where the background moves at a different speed from the foreground. In this example, the background image is staying fixed while the rest of the page is scrolled.
[/intense_promo_box]
[/intense_column]
[intense_column size="6"]
<div style="background: rgba(255,255,255, .6);padding: 10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis commodo lectus eget fermentum. Proin molestie enim egestas odio mollis ultricies. 

Sed urna erat, hendrerit sed euismod sit amet, ullamcorper at felis. Sed mollis, tortor a blandit commodo, purus risus accumsan libero, vitae accumsan nunc felis fringilla eros. Fusce porttitor risus id magna scelerisque iaculis. In at elementum nibh. 
</div>
[/intense_column]
[/intense_row]
[/intense_content_section]

[intense_content_section background_color="#f3f3f3" imageid="7489" imagemode="full" margin_top="0" margin_bottom="-30"]
[intense_row]
[intense_column size="6"]
[intense_promo_box shadow="8"]
<h2>Set Background Image Mode <small>full</small></h2>
Add a content section that has a background image that fills the full content box.
[/intense_promo_box]
[/intense_column]
[intense_column size="6"]
<div style="background: rgba(255,255,255, .6);padding: 10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis commodo lectus eget fermentum. Proin molestie enim egestas odio mollis ultricies. 

Sed urna erat, hendrerit sed euismod sit amet, ullamcorper at felis. Sed mollis, tortor a blandit commodo, purus risus accumsan libero, vitae accumsan nunc felis fringilla eros. Fusce porttitor risus id magna scelerisque iaculis. In at elementum nibh. 
</div>
[/intense_column]
[/intense_row]
[/intense_content_section]