Full-width Layout Bleed Shortcode

While the extend content style enables you to “break” an element out of the content column and span the total width of the layout, it does not enable you to break an element all the way out to the edges of the screen.

For this type of behavior, you’ll need a full-width layout bleed.

Thanks to a built-in shortcode that makes output a breeze, you can include bleeds whenever you want, regardless of the Content Presentation Mode you’re using.

On top of that, you can choose from 18 different color options for each bleed, so you can always nail that perfect presentation.

Let’s take a closer look at how you can use the Focus full-width layout bleed to enhance your Posts and Pages.

How to Use the Bleed Shortcode

Focus includes a tag-style bleed shortcode that outputs the HTML necessary to create a full-width layout bleed:

[bleed]
You can put any kind of content you want in here!
[/bleed]

Notice the opening and closing bleed tags—hence the “tag-style shortcode” description.

This enables you to clearly delineate where a full-width section starts and stops. And as I’ve already indicated, there are no limits to what you can place between the bleed tags:

// Modular Content (or any shortcode)
[bleed][modular_content id="1288"][/bleed]

// Long-form content
[bleed]
<h2>Section Heading</h2>

This is the first paragraph of content.

This is the second paragraph, followed by a list:

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

And a final sentence fragment masquerading as a paragraph.
[/bleed]

Shortcode Options

The examples shown above will output the following HTML structure for full-width layout bleeds:

<div class="bleed">
	<div class="container">
		<div class="text post_content">
			...your content appears here...
		</div>
	</div>
</div>

This results in a bleed containing a column of text that works exactly like a typical column of text in Focus (same content width, $w-content, and associated typography treatments).

But depending on what you want to do with your bleeds, you may want to employ one or more of the following parameters when including a bleed shortcode:

• style — (string) add a CSS class to the outermost bleed container
• id — (integer) add an ID to the outermost bleed container
• full — (boolean) if true, your bleed content will span the entire usable width of the layout, $w-total, instead of only spanning the content width, $w-content
• depth — (integer) specify tab depth for OCD HTML source indentation

The style parameter is the most useful, as this enables you to specify a CSS class (or classes) to change the appearance of your bleed.

The id option enables you to specify an ID on the outermost bleed container, and this is helpful for both link and JS targeting.

Want a bigger usable canvas inside your bleed? Use the full parameter to remove the inner <div class="text post_content"> container, and this will leave you with the total layout width, $w-total, to work your presentational magic.

Finally, if you are an insufferable OCD nutcase like me, you can use the depth parameter to specify a tab depth for precise HTML source indentation.

Pre-defined Color Classes

To make your bleeds stand out, you’ll need to add a color class using the style parameter introduced above.

Focus includes 18 different color schemes for bleeds, and each one has been carefully calibrated for maximum impact and accessibility.

Scroll through the color options below and see which ones you’ll want to use on your site!

[bleed style="red"]
...your bleed content goes here...
[/bleed]

[bleed style="salmon"]
...your bleed content goes here...
[/bleed]

[bleed style="orange"]
...your bleed content goes here...
[/bleed]

[bleed style="yellow"]
...your bleed content goes here...
[/bleed]

[bleed style="chartreuse"]
...your bleed content goes here...
[/bleed]

[bleed style="lime"]
...your bleed content goes here...
[/bleed]

[bleed style="green"]
...your bleed content goes here...
[/bleed]

[bleed style="aquamarine"]
...your bleed content goes here...
[/bleed]

[bleed style="turquoise"]
...your bleed content goes here...
[/bleed]

[bleed style="cyan"]
...your bleed content goes here...
[/bleed]

[bleed style="blue"]
...your bleed content goes here...
[/bleed]

[bleed style="steel"]
...your bleed content goes here...
[/bleed]

[bleed style="lavender"]
...your bleed content goes here...
[/bleed]

[bleed style="purple"]
...your bleed content goes here...
[/bleed]

[bleed style="orchid"]
...your bleed content goes here...
[/bleed]

[bleed style="magenta"]
...your bleed content goes here...
[/bleed]

[bleed style="pink"]
...your bleed content goes here...
[/bleed]

[bleed style="rose"]
...your bleed content goes here...
[/bleed]