Immersive Article Covers

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

4 columns grid HTML

<!--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>

6 columns grid HTML

10 columns grid HTML

12 columns grid HTML

CSS

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.

Full-width cover with the background shape

4 columns grid HTML

<!--Article Cover 02 (grids, 4 cols)-->
<div data-ce-tag="grid" class="stk-snippets-article-cover-02 stk-grid stk-layout__overhangs_both">
  <div class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col" data-col-width="4">
    <figure data-ce-tag="image-figure" class="stk-reset stk-image-figure stk-theme_00000__mb_15">
      <div data-ce-tag="mask" class="stk-mask"></div>
    </figure>
    <div class="stk-snippets-article-cover-02__content stk-container" data-ce-tag="container" data-container-name="Article cover content">
      <h4 class="stk-reset align-center stk-theme_00000__style_small_header stk-theme_00000__mb_05">FLOW</h4>
      <h2 class="stk-reset stk-theme_00000__style_large_header align-center stk-theme_00000__pad_hor_1">How to manage a remote content marketing team</h2>
      <p class="stk-reset align-center stk-theme_00000__pad_hor_1">Best practices from Lisa Oda, the Content Director at Upwork, the leading freelancing website</p>
    </div>
  </div>
</div>

6 columns grid HTML

10 columns grid HTML

12 columns grid HTML

CSS

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 background shape and color in the component CSS.

Full-width cover with animation

4 columns grid HTML

<!--Article Cover 03 (grids, 4 cols)-->
<div data-ce-tag="grid" class="stk-snippets-article-cover-03 stk-grid stk-layout__overhangs_both">
  <div data-ce-tag="grid-col" data-col-width="4" class="stk-grid-col stk-grid-col_last align-center stk-snippets-css__pb_120px">
    <figure data-ce-tag="image-figure" data-anim="true" data-anim-m="true" data-anim-name="preset-slideInRight" data-anim-trigger="scroll" data-anim-duration="1" data-anim-delay="0" data-anim-scroll-start="10" data-anim-scroll-finish="50" class="stk-reset stk-image-figure stk-theme_00000__mb_2">
      <div data-ce-tag="mask" class="stk-mask"><img src="https://ceditor.setka.io/clients/MoIrh0M4cHsxxH7znG1AuAYtTvmlKgtL/post_images/JPtCDnqJjjh1nttm_lPE6A.png" data-image-id="66360" data-image-name="car.png" alt="" title="" class="stk-reset stk-image"></div>
    </figure>
    <div class="stk-snippets-article-cover-03__content stk-container" data-ce-tag="container" data-container-name="Content">
      <h4 class="stk-reset align-center stk-theme_00000__style_small_header stk-theme_00000__mb_05">INTERVIEW</h4>
      <h2 class="stk-reset stk-theme_00000__style_large_header align-center stk-theme_00000__pad_hor_1"><span class="stk-reset">I’m a celebrity stylist for American Idols and former heartthobs</span></h2>
      <p class="stk-reset align-center stk-theme_00000__pad_hor_1"><span class="stk-reset">Best practices from Lisa Oda, the Content Director at Upwork, the leading freelancing website</span></p>
    </div>
  </div>
</div>

6 columns grid HTML

10 columns grid HTML

12 columns grid HTML

CSS

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.

Learn More

The Fold Manifesto: Why the Page Fold Still Matters Nielsen Norman Group

Using Visuals & Imagery to Improve Content Engagement Setka

Unsung Heroes of UI: Look at Hero Images in Web Design UX Planet

Extra Inspiration