Immersive Article Covers
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
Select the code component with the same number of columns as in the grid system of your post.
You can also adjust border style and color in the component CSS.
Select the code component with the same number of columns as in the grid system of your post.
You can also adjust background shape and color in the component CSS.
Select the code component with the same number of columns as in the grid system of your post.
You can also adjust border style and color in the component CSS.
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’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.
Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the page.
Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the page.
Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the page.
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, , 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.
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 .
Nielsen Norman Group
Setka
UX Planet
