[intense_content_section]
<h2>Introduction</h2>
The content section shortcode adds an easily styled section. It is one of the most useful and powerful shortcodes for designing WordPress posts and pages.

The content sections can be customized in several ways. With the content section shortcode you can set the: size, height, background (color, image, parallax image, video), paddings and margin, overlay image or gradient, and borders. There are also several ways to direct the user to the next portion of the page using an advance button or advance arrow.
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Background</h2>
The content section shortcode allows you to set the background color, image, and video. When setting the background image, you can choose the following options:

<ul>
<li><strong>Full</strong> - the image will stretch to cover the whole content section</li>
<li><strong>Parallax</strong> - the background image will shift position as the user scrolls</li>
<li><strong>Parallax (fixed)</strong> - the background image will stay fixed while the page scrolls</li>
<li><strong>Repeat, Repeat X, Repeat Y</strong> - repeat the image</li>
<li><strong>Zoom In</strong> - slowly zoom in on the image when the image is hovered over</li>
</ul>

Background videos can come from WordPress, YouTube, or Vimeo.
[/intense_content_section]
[intense_content_section background_type="color" background_color="primary"]
[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"]

[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section background_type="image" image="699" imagesize="large1024"]
[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"]
[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section background_type="image" image="2184" imagesize="large1600" imagemode="parallax"]
[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"]
[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section background_type="image" image="712" imagemode="fixed"]
[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"]
[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section background_type="image" image="684" imagemode="repeat"]
[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"]
[/intense_column]
[/intense_row]
[/intense_content_section]

[intense_content_section background_type="image" image="3184" imagesize="large1600" imagemode="zoom-in"]
[intense_row]
[intense_column size="6"]
[intense_promo_box shadow="8"]
<h2>Set Background Image Mode <small>zoom-in</small></h2>
Add a content section that has a background image with a zoom effect. When the mouse is hovered over the image, the image will be slowly zoomed in until the mouse moves away, then the image will slowly zoom back out.[/intense_promo_box]
[/intense_column]
[intense_column size="6"]
[/intense_column]
[/intense_row]
[/intense_content_section]

[intense_content_section background_type="webvideo" video="http://www.youtube.com/watch?v=C6c-dWhCPE0" volume="0"]
[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 a background video from WordPress, YouTube, or Vimeo.

Video by <a href="http://www.youtube.com/user/mockmoon2000/">mockmoon2000</a>
[/intense_promo_box]
[/intense_column]
[intense_column size="6"]
[/intense_column]
[/intense_row]
[/intense_content_section]

[intense_content_section background_type="video" poster="3676" mp4="3677" ogv="3678" webm="3679" video_speed="1" padding_top="0" padding_bottom="0"]
[intense_spacer type="block" height="100"]
[intense_row]
[intense_column size="6"]
[intense_promo_box shadow="8"]
<h2>Set Fixed Background Video</h2>
Add a content section, like this one, that has a fixed background video from WordPress.
[/intense_promo_box]
[/intense_column]
[intense_column size="6"]
[/intense_column]
[/intense_row]
[intense_spacer type="block" height="100"]
[/intense_content_section]

[intense_content_section background_type="video" poster="3675" mp4="3672" ogv="3673" webm="3674" video_speed="1.5" padding_top="0" padding_bottom="0"]
[intense_spacer type="block" height="100"]
[intense_row]
[intense_column size="6"]
[intense_promo_box shadow="8"]
<h2>Set Parallax Background Video</h2>
Add a content section, like this one, that has a parallax background video from WordPress.
[/intense_promo_box]
[/intense_column]
[intense_column size="6"]
[/intense_column]
[/intense_row]
[intense_spacer type="block" height="100"]
[/intense_content_section]

[intense_content_section background_type="image" image="699" imagesize="large1024" overlay_image="3005" imagemode="parallax"]
[intense_row]
[intense_column size="6"]
[intense_promo_box shadow="8"]
<h2>Image Overlay</h2>
Add an image overlay to the content section shortcode.
[/intense_promo_box]
[/intense_column]
[intense_column size="6"]
[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Height, Advance Button, and Advance Arrow</h2>
The height of the content section can be controlled in a few different ways. By default, the content section will be tall enough to hold the content. If you want it to be a specific height, you can manually set the height. Also, the height can be set to the full height of the screen.

To draw attention to the next part of your page, you can add an advance button. The advance button will sit at the bottom of the content section. You can set the color, text, icon, and size of the button. By default, the button will advance to just below the content section when clicked. It can be set to advance to any part of the page as well.

Another way to draw attention down to the next part of your page is to add an advance arrow. The advance arrow sits at the bottom of the content section and points down. It will be colored the same as the content section it is in. You can control the position of the arrow moving it right or left. This is done by setting what percent of the screen from the left you want to place it.
[/intense_content_section]
[intense_content_section background_type="image" image="712" full_height="1" show_advance="1" advance_icon_position="right" advance_text="Advance Button"]
[intense_row]
[intense_column size="6"]
[intense_promo_box shadow="8"]
<h2>Full Height with Advance Button</h2>
This content section is set to be the full window height. At the bottom, you will notice an advance button that, when clicked, will scroll the page down to the next section. The advance button can also be set to advance to any part of the page.
[/intense_promo_box]
[/intense_column]
[intense_column size="6"]
[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section background_type="image" image="2184" padding_top="100" padding_bottom="100" show_advance_arrow="1" advance_arrow_background_color="#f9f9f9" height="500"]
[intense_row]
[intense_column size="6"]
[intense_promo_box shadow="8"]
<h2>Manual Height with Advance Arrow</h2>
This content section has a manual height of 500px with 100px padding on the top and bottom. It also has an advance arrow at the bottom in the middle. The position of the arrow can be set to any percent of the screen (ex. 25% - positioned at 1/4 of the screen width).
[/intense_promo_box]
[/intense_column]
[intense_column size="6"]
[/intense_column]
[/intense_row]
[/intense_content_section]

[intense_content_section background_type="color" background_color="#f9f9f9" border_bottom="1px solid #ededed"]
<h2>Size</h2>
There are several ways to control the size of a content section. The first is to control the overall width and how the content fits inside. These options include:
<ul>
<li><strong>fullboxed</strong> - 100% full width with boxed content. This is the most common use. The content section will span the width of the page. Any content added will fit in a box in the center of the content section.</li>
<li><strong>full</strong> - 100% full width. This is the same as <strong>fullboxed</strong> but the content will also span the full width of the page. An example is for sliders that span the full width of the page.</li>
<li><strong>partial</strong> - partial width with boxed content. The content section will span the width of its parent. The content within the section will be boxed. This isn't very common but may make sense for certain themes and situations.</li>
</ul>

If a theme doesn't allow for full-width content sections, there is a breakout option that tries to force full width. This option works in almost all cases. If a theme has <em>overflow: hidden</em> on a parent of the content section, additional styling may be needed.

Another way to control the size of the content section is to control its height. By default, the height of the content section will be the height of the content it contains. The height can be manually set. There is an option to set the height of the content section to be fullscreen. If there is a fixed footer or header, the fullscreen height can be adjusted to accommodate.
[/intense_content_section]
<div style="background: #f9f9f9; border-bottom: 1px solid #ededed;">
<div style=" background: #ddd;">
<div class="intense container" style="height: 200px; background: #ccc;">
<h1>fullboxed</h1>
</div></div>
<div style="background: #999;">
<div class="" style="height: 200px; background: #ccc;">
<h1>full</h1>
</div></div>
[intense_content_section]
<div style=" background: #999;">
<div class="intense container" style="height: 200px; background: #ccc;">
<h1>partial</h1>
</div></div>
[/intense_content_section]
</div>
[intense_snippet snippet_id="Child Theme | Shortcodes/footer" snippet_title="Shortcode Page Footer"]