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

contentsection
contentsection
contentsection

Dialog

contentsection
contentsection
contentsection
contentsection
contentsection
contentsection
contentsection

Attributes

AttributeTypeDialog TitleDescriptionDefaultAvailable Values
idtextIDoptional
sizedropdownSizefullboxedfullboxed - 100% Full Width with Boxed Content
full - 100% Full Width
partial - Partial Width with Boxed Content
background_typedropdownBackground Type - None
color - Color
image - Image
video - WordPress Video
webvideo - Youtube/Vimeo Video
imageimageImageWordPress ID or any URL
imageiddeprecateduse image instead
imageurldeprecateduse image instead
imagesizeimage_sizeImage Sizelarge1600
imagemodedropdownBackground Modefullfull - Full
parallax - Parallax
fixed - Parallax - Fixed
repeat - Repeat
repeat-x - Repeat-X
repeat-y - Repeat-Y
zoom-in - Zoom In
background_image_positiontextBackground Image Positionsets the background image position according to the background-image CSS property rules50% 50%
image_horizontal_positiondropdownHorizontal Position - Left
right - Right
center - Center
speedtextParallax SpeedParallax mode only - default 22
posterimagePoster Imagerequired for WordPress videoWordPress ID or any URL
poster_iddeprecateduse poster instead
poster_urldeprecateduse poster instead
mp4videoMP4 VideoWordPress ID or any URL
mp4_iddeprecateduse mp4 instead
mp4_urldeprecateduse mp4 instead
ogvvideoOGV VideoWordPress ID or any URL
ogv_iddeprecateduse ogv instead
ogv_urldeprecateduse ogv instead
webmvideoWebM VideoWordPress ID or any URL
webm_iddeprecateduse webm instead
webm_urldeprecateduse webm instead
videotextVideoYoutube or Vimeo video ID or URL
autoplaycheckboxAutoplayWhen enabled, the video will play automatically.11 = true, 0 = false
volumetextVolumeVideo volume level (0 - 100)50
volumebuttoncheckboxShow Volume On/Off ButtonWhen enabled, the volume on/off button will be visible.1 = true, 0 = false
playbuttoncheckboxShow Play/Pause ButtonWhen enabled, the play/pause button will be visible.1 = true, 0 = false
restartbuttoncheckboxShow Restart ButtonWhen enabled, the restart button will be visible.1 = true, 0 = false
button_colorcolor_advancedButton ColorColor to be used for volume, play, and restart buttons.#ffffffoption colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
button_font_colorcolor_advancedButton Font ColorColor to be used for the font on the volume, play, and restart buttons.#999999option colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
button_positiondropdownButton PositionThis is where the buttons that are enabled above will display over the content section.bottomleftbottomleft - Bottom Left
bottomright - Bottom Right
bottomcenter - Bottom Center
topleft - Top Left
topright - Top Right
topcenter - Top Center
background_colorcolor_advancedBackground Coloroption colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
box_classtextBoxed Content Classoptional css class name to apply to the boxed content within the content section
heighttextHeightoptional - manually sets the height of the content section
full_heightcheckboxFull Heightautomatically sized to the window height1 = true, 0 = false
vertical_aligncheckboxVertical Alignvertically aligns the content in the center (applies to full height or manual height content sections)1 = true, 0 = false
height_adjustmenttextHeight Adjustmentsubtracted from computed full height
breakoutcheckboxBreak Outtries to break out of its parent container to force full width. May be needed if theme doesn't support full width pages/posts1 = true, 0 = false
classtextCSS Class
margin_toptextMargin Top
margin_bottomtextMargin Bottom
margin_lefttextMargin Left
margin_righttextMargin Right
padding_toptextPadding Top25
padding_bottomtextPadding Bottom25
padding_lefttextPadding Left
padding_righttextPadding Right
overlay_imageimageImageUse a semi-transparent image to overlay the background image.WordPress ID or any URL
overlay_colorcolor_advancedColorThis color will overlay the background image. Make sure to set an opacity.option colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
overlay_opacitytextOpacity0 - 100: leave blank for solid color (used with Color).
overlay_gradientdropdownGradient TypeThis option will set an overlay that has a gradient effect. For best results, set all gradient options below. - None
linear - Linear
radial - Radial
overlay_gradient_start_colorcolor_advancedGradient Start ColorThis color will overlay the background image. Make sure to set the gradient start opacity.option colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
overlay_gradient_start_opacitytextGradient Start Opacity0 - 100: leave blank for solid color (used with Gradient Start Color).
overlay_gradient_end_colorcolor_advancedGradient End ColorThis color will overlay the background image. Make sure to set the gradient end opacity.option colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
overlay_gradient_end_opacitytextGradient End Opacity0 - 100: leave blank for solid color (used with Gradient End Color).
borderborderAll Bordersstandard CSS border style
border_topborderTop Borderstandard CSS border style
border_rightborderRight Borderstandard CSS border style
border_bottomborderBottom Borderstandard CSS border style
border_leftborderLeft Borderstandard CSS border style
border_radiusborder_radiusBorder Radius%, em, px - examples: 25% or 10em or 20px
show_advancecheckboxEnablewhen enabled, a button will show that allows users to advance to another part of the page1 = true, 0 = false
advance_target_idtextTarget IDleave blank to advance to just below the content section
advance_sizedropdownSizelargedefault - default
mini - mini
small - small
medium - medium
large - large
advance_colorcolor_advancedColorprimaryoption colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
advance_icon_sourceicon_sourceIcon Sourcefont-awesome
advance_iconiconIconchevron-downeach icon pack has a different list of icons
advance_icon_positiondropdownIcon Positionleftleft - Left
right - Right
advance_texttextText
show_advance_arrowcheckboxEnablewhen enabled, an arrow will show that encourages the users to advance to the next part of the page1 = true, 0 = false
advance_arrow_background_colorcolor_advancedBackground Colorwill usually be set to match the next section to create a seemless look#ffffffoption colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
advance_arrow_positiontextPositionpercent offset from the left (ex. 50 is in the center of the page)50
show_navigationcheckboxEnablewhen enabled, side navigation will show for each content section with this enabled. This works best for pages with several tall content sections.1 = true, 0 = false
titletextTitleoptional
top_divider_typedropdownType -
boxes - Boxes
circle-big - Circle Big
circle-edge - Circle Edge
circle - Circle
clouds - Clouds
curve-big - Curve Big
curve-left - Curve Left
curve-right - Curve Right
diagonal-left - Diagonal Left
diagonal-right - Diagonal Right
diamond-tripple - Diamond - Tripple
diamond - Diamond
round-edge - Round Edge
round-split-shadow - Round Split Shadow
round-split - Round Split
triangle-big-centered - Triangle Big - Centered
triangle-big-inverse - Triangle Big - Inverse
triangle-big-left - Triangle Big - Left
triangle-big-right - Triangle Big - Right
triangle-big-shadow-left - Triangle Big Shadow - Left
triangle-big-shadow-right - Triangle Big Shadow - Right
triangle - Triangle
waves - Waves
zigzag - Zigzag
zigzag-castle - Zigzag Castle
zigzag-incline - Zigzag Incline
zigzag-small - Zigzag Small
top_divider_primary_colorcolor_advancedPrimary Coloroption colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
top_divider_secondary_colorcolor_advancedSecondary Colormay not apply to most divider typesoption colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
top_divider_tertiary_colorcolor_advancedTertiary Colormay not apply to most divider typesoption colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
bottom_divider_typedropdownType -
boxes - Boxes
circle-big - Circle Big
circle-edge - Circle Edge
circle - Circle
clouds - Clouds
curve-big - Curve Big
curve-left - Curve Left
curve-right - Curve Right
diagonal-left - Diagonal Left
diagonal-right - Diagonal Right
diamond-tripple - Diamond - Tripple
diamond - Diamond
round-edge - Round Edge
round-split-shadow - Round Split Shadow
round-split - Round Split
triangle-big-centered - Triangle Big - Centered
triangle-big-inverse - Triangle Big - Inverse
triangle-big-left - Triangle Big - Left
triangle-big-right - Triangle Big - Right
triangle-big-shadow-left - Triangle Big Shadow - Left
triangle-big-shadow-right - Triangle Big Shadow - Right
triangle - Triangle
waves - Waves
zigzag - Zigzag
zigzag-castle - Zigzag Castle
zigzag-incline - Zigzag Incline
zigzag-small - Zigzag Small
bottom_divider_primary_colorcolor_advancedPrimary Coloroption colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
bottom_divider_secondary_colorcolor_advancedSecondary Colormay not apply to most divider typesoption colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)
bottom_divider_tertiary_colorcolor_advancedTertiary Colormay not apply to most divider typesoption colors - primary, error, info, inverse, muted, success, warning, link

web color - hex, rgb, rgba, hsl, hsla, color name (see wikipedia web colors)

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]