Immersive article covers are full-width, highly designed article headers that stand out from the pack of a stock image and a headline and really wow a user when they land on your page. Think of this as the splashy magazine cover of the digital world.
Examples
Full-width cover with image
How to make full-width cover with image
Full-width cover with custom borders
<!--Article Cover 01 (grids, 4 cols)-->
<div data-ce-tag="grid" class="stk-snippets-article-cover-01 stk-grid stk-layout__overhangs_both">
<div data-col-width="4" class="stk-grid-col stk-grid-col_last stk-snippets-css__pt_30px stk-snippets-css__pb_60px stk-snippets-css__px_20px-m" data-ce-tag="grid-col">
<hr class="stk-reset stk-theme_00000__separator_basic_divider stk-theme_00000__mb_0">
<h4 data-ce-tag="paragraph" class="stk-reset stk-theme_400000__mb_0 stk-theme_00000__style_small_header stk-theme_00000__color_4507_custom_color_0">FLOW</h4>
<hr class="stk-reset stk-theme_00000__separator_basic_divider stk-theme_00000__mb_0">
<h2 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_large_header stk-theme_00000__color_4507_custom_color_1 stk-theme_00000__mb_05"><strong class="stk-reset">How to manage a remote content marketing team</strong></h2>
<hr class="stk-reset stk-theme_00000__separator_basic_divider stk-theme_00000__mb_05">
<p class="stk-reset stk-theme_00000__color_4507_custom_color_1">Best practices from Lisa Oda, the Content Director at Upwork, the leading freelancing website</p>
</div>
</div>
<div data-ce-tag="grid" class="stk-snippets-article-cover-01 stk-grid stk-layout__overhangs_both">
<div data-col-width="6" class="stk-grid-col stk-grid-col_last stk-snippets-css__pt_30px stk-snippets-css__pb_60px stk-snippets-css__px_20px-m" data-ce-tag="grid-col">
<hr class="stk-reset stk-theme_00000__separator_basic_divider stk-theme_00000__mb_0">
<h4 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__mb_0 stk-theme_00000__style_small_header stk-theme_00000__color_4507_custom_color_0">FLOW</h4>
<hr class="stk-reset stk-theme_00000__separator_basic_divider stk-theme_00000__mb_0">
<h2 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_large_header stk-theme_00000__color_4507_custom_color_1 stk-theme_00000__mb_05"><strong class="stk-reset">How to manage a remote content marketing team</strong></h2>
<hr class="stk-reset stk-theme_00000__separator_basic_divider stk-theme_00000__mb_05">
<p class="stk-reset stk-theme_00000__color_4507_custom_color_1">Best practices from Lisa Oda, the Content Director at Upwork, the leading freelancing website</p>
</div>
</div>
<!--Article Cover 01 (grids, 10 cols)-->
<div data-ce-tag="grid" class="stk-snippets-article-cover-01 stk-grid stk-layout__overhangs_both">
<div data-col-width="10" class="stk-grid-col stk-grid-col_last stk-snippets-css__pt_30px stk-snippets-css__pb_60px stk-snippets-css__px_20px-m" data-ce-tag="grid-col">
<hr class="stk-reset stk-theme_00000__separator_basic_divider stk-theme_00000__mb_0">
<h4 data-ce-tag="paragraph" class="stk-reset stk-theme_000007__mb_0 stk-theme_00000__style_small_header stk-theme_00000__color_4507_custom_color_0">FLOW</h4>
<hr class="stk-reset stk-theme_00000__separator_basic_divider stk-theme_00000__mb_0">
<h2 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_large_header stk-theme_00000__color_4507_custom_color_1 stk-theme_00000__mb_05"><strong class="stk-reset">How to manage a remote content marketing team</strong></h2>
<hr class="stk-reset stk-theme_00000__separator_basic_divider stk-theme_00000__mb_05">
<p class="stk-reset stk-theme_00000__color_4507_custom_color_1">Best practices from Lisa Oda, the Content Director at Upwork, the leading freelancing website</p>
</div>
</div>
<!--Article Cover 01 (grids, 12 cols)-->
<div data-ce-tag="grid" class="stk-snippets-article-cover-01 stk-grid stk-layout__overhangs_both">
<div data-col-width="12" class="stk-grid-col stk-grid-col_last stk-snippets-css__pt_30px stk-snippets-css__pb_60px stk-snippets-css__px_20px-m" data-ce-tag="grid-col">
<hr class="stk-reset stk-theme_00000__separator_basic_divider stk-theme_00000__mb_0">
<h4 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__mb_0 stk-theme_00000__style_small_header stk-theme_00000__color_4507_custom_color_0">FLOW</h4>
<hr class="stk-reset stk-theme_00000__separator_basic_divider stk-theme_00000__mb_0">
<h2 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_large_header stk-theme_00000__color_4507_custom_color_1 stk-theme_00000__mb_05"><strong class="stk-reset">How to manage a remote content marketing team</strong></h2>
<hr class="stk-reset stk-theme_00000__separator_basic_divider stk-theme_00000__mb_05">
<p class="stk-reset stk-theme_00000__color_4507_custom_color_1">Best practices from Lisa Oda, the Content Director at Upwork, the leading freelancing website</p>
</div>
</div>
Select the code component with the same number of columns as in the grid system of your post.
Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the Introduction page.
You can also adjust border style and color in the component CSS.
Content Experience Impact
You probably already know that the area “above the fold” on your page matters a lot to grabbing a user’s attention and enticing them to scroll further down the page. There’s a reason a large image with a header has become the industry norm for the top of a content page—researchers D Lagun and M Lalmas at the ACM International Conference on Web Search and Data Mining shared that users tend to stay almost twice as long on the first screen when the article starts with an image, compared to articles without an image on top. And, in one case study from Crazy Egg, redesigning a homepage using full-width imagery increased leads by 18%. With components, you can design these to be even more eye-catching with multiple images, custom backgrounds, fonts in various styles to convey different information, author pictures and profiles, a short summary of the article to come, or anything else that you think will make a user want to keep reading.
Dos
Use design to encourage scrolling, such as by having a bouncing arrow pointing down, or by having an illustration or bit of text straddle the fold so the user feels compelled to scroll to see what’s next. In other words, you want to avoid the illusion of completeness.
Be incredibly picky with the photos or illustrations you use as part of your immersive article colors. Even though these may only be one component of the full design, it’s still critical they represent the topic at hand, align with your brand styles, and feel fresh and exciting for the reader.
Don'ts
Don’t make the header text a static part of your immersive header image. You still want your text to be built directly into the website with an <h1> or <h2> tag to help with SEO.
