Breakout Content

Often times, you may have some special content that needs to “break out” of the content container. This page shows an example of how to do so.

Often times, you might have some special content that you’d stand out a little more. One trend is to “break out” of the main content container and display it full-width. Typically, in order to do this you’d have to close all open elements, add your markup and then reopen everything all over again. The [breakout] shortcode makes this a cinch.
Below is an example.

This is some breakout content

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It’s also called placeholder (or filler) text. It’s a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.

Pretty Easy Eh?

The [breakout] shortcode has a few parameters that allow you to style it to your likings. The example above uses the defaults, however you can implicitly set the background, color, and padding CSS attributes as well as a custom classname to inherit.

[breakout bg="#EEE" color="#000" padding="80px" class="aligncenter"]
// Your content here. You can even display images and other shortcodes within this area.


parameter description default
bg background color #EEEEEE
color text color #000000
padding css vertical padding 40px
img fullscreen background image (URL) null
video fullscreen background video (YouTube ID) null
class CSS class (for advanced styling) null