Section Headers

Section headers help divide up your content and organize it so readers can quickly understand what your content is about and decide which areas (if any) they want to dig more into. Most people do this using different-sized header fonts, but you can make these dividers even more noticeable by stylizing them, creating almost a mini cover image for different sections of the piece.

Examples

Section header with a number

How to make section header with a number

Section header with a colored background

<div data-ce-tag="grid" class="stk-snippets-header-colored-bg stk-grid stk-layout__overhangs_both">
  <div data-ce-tag="grid-col" data-col-width="2" class="stk-grid-col stk-grid-col_empty" data-stk-css="" data-stk-css-m="">
    <p class="stk-reset ce-element--empty stk-element_no-text"></p>
  </div>
  <div data-ce-tag="grid-col" data-col-width="8" class="stk-grid-col valign-middle stk-grid-col_last stk-theme_00000__pad_ver_2">
    <p class="stk-reset stk-theme_00000__color_4507_custom_color_1 align-center stk-theme_00000__mb_3 stk-theme_00000__style_font_style-1490606809211">3</p>
    <h2 class="stk-reset stk-theme_00000__style_large_header align-center stk-theme_00000__color_4507_custom_color_1 stk-theme_00000__mb_05" data-stk-css="stkdsuFU"><span class="stk-reset">Solomon R. Guggenheim Museum</span></h2>
    <p class="stk-reset align-center stk-theme_00000__color_4507_custom_color_1"><span class="stk-reset">1071 Fifth Avenue at 89th Street, Manhattan, New York City</span></p>
  </div>
  <div data-col-width="2" class="stk-grid-col stk-grid-col_empty" data-ce-tag="grid-col">
    <p class="stk-reset ce-element--empty stk-element_no-text"></p>
  </div>
</div>

Select the code component with the same number of columns as in the layout grid 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 color in the component CSS.

Section header with animated shapes on the background

<div data-ce-tag="container" data-container-name="Section header" class="stk-snippets-header-animated-bg stk-container">
  <div data-ce-tag="container" data-container-name="Content" class="stk-snippets-header-animated-bg__content stk-reset stk-container align-center stk-theme_00000__pad_ver_2">
    <p data-stk-css="stk6VqyI" class="stk-reset stk-theme_00000__style_font_style-1490606809211">3</p>
    <h2 class="stk-reset stk-theme_00000__style_large_header align-center" data-stk-css="stkgR-Ld">Solomon R. Guggenheim
      Museum</h2>
    <p class="stk-reset align-center" data-stk-css="stkKD_qc">1071 Fifth Avenue at 89th Street, Manhattan, New York City</p>
  </div>
  <div data-ce-tag="container" data-container-name="Animated objects" class="stk-snippets-header-animated-bg__animated stk-container">
    <img class="stk-mobile-hidden" src="data:image/svg+xml,%3Csvg%20height='400'%20viewBox='0%200%20400%20400'%20width='400'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20fill='none'%3E%3Ccircle%20cx='200'%20cy='200'%20r='200'%20fill='%23fff5d3'/%3E%3C/g%3E%3C/svg%3E" alt="" data-anim="true" data-anim-m="true" data-anim-name="preset-zoomIn" data-anim-trigger="whenScrolling" data-anim-duration="1" data-anim-delay="0" data-anim-scroll-start="10" data-anim-scroll-finish="90">
    <img src="data:image/svg+xml,%3Csvg%20height='400'%20viewBox='0%200%20400%20400'%20width='400'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20fill='none'%3E%3Ccircle%20cx='200'%20cy='200'%20r='200'%20fill='%23fff5d3'/%3E%3C/g%3E%3C/svg%3E" alt="" data-anim="true" data-anim-m="true" data-anim-name="preset-zoomIn" data-anim-trigger="whenScrolling" data-anim-duration="1" data-anim-delay="0" data-anim-scroll-start="10" data-anim-scroll-finish="90">
    <img class="stk-mobile-hidden" src="data:image/svg+xml,%3Csvg%20height='400'%20viewBox='0%200%20400%20400'%20width='400'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20fill='none'%3E%3Ccircle%20cx='200'%20cy='200'%20r='200'%20fill='%23fff5d3'/%3E%3C/g%3E%3C/svg%3E" alt="" data-anim="true" data-anim-m="true" data-anim-name="preset-zoomIn" data-anim-trigger="whenScrolling" data-anim-duration="1" data-anim-delay="0" data-anim-scroll-start="10" data-anim-scroll-finish="90">
  </div>
</div>
<p class="stk-reset ce-element--empty stk-element_no-text"></p>


<style data-anim-name="preset-zoomIn" media="screen and (min-width: 768px)">
  .stk-post [data-anim-name="preset-zoomIn"]:not(#stk):not([data-anim="false"]) {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3)
  }
</style>
<style data-anim-name="preset-zoomIn" media="screen and (max-width: 767px)">
  .stk-post [data-anim-name="preset-zoomIn"]:not(#stk):not([data-anim-m]),
  .stk-post [data-anim-name="preset-zoomIn"]:not(#stk):not([data-anim-m="false"]) {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3)
  }
</style>
<script data-anim-name="preset-zoomIn" type="application/json">
  {
    "keyframes": [{
      "opacity": 0,
      "transform": "scale3d(0.3, 0.3, 0.3)",
      "offset": 0
    }, {
      "opacity": 0.6,
      "transform": "none",
      "offset": 0.6
    }, {
      "opacity": 1,
      "transform": "none",
      "offset": 1
    }],
    "options": {
      "id": "preset-zoomIn",
      "delay": 0,
      "duration": 1000
    }
  }
</script>

Select the code snippet with the same number of columns as in the layout grid 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 shapes and colors in the snippet CSS.

Content Experience Impact

According to Nielsen Norman Group, 79% of website visitors scan each new page to see what’s relevant to them, and one common scanning style—called the layer cake pattern—involves quickly scanning the page for the most important information. Well-designed and written headings help break up the text and highlight the most valuable information, making it easier for scanners to understand what your content is about and decide which sections they want to read more deeply, thereby improving content engagement and comprehension.

Dos

  • Make sure to use a larger font for section headings, even if you’re also using other design elements to help them stand out. Readers are used to the visual hierarchy of content being denoted by larger fonts for headers.

  • Play with incorporating other visual distinctions—like a different font or background color, a different typeface or bolder font style, underlining, or even icons, illustration, or imagery to help users more quickly identify different sections of the content.

  • Make sure your headings provide a succinct description of what the following section of content is about.

  • Consider including a short summary of key points in the section as part of your heading design to further support readers who are scanning your work.

Don’ts

  • Don’t make your headings too big compared to the text around them—otherwise they may distract too much or look like advertisements that the user will skip over.

  • Don’t have different layouts and text justification for each of your headings—giving your readers a predictable layout will make it easier for them to scan. Create a design for your section headings and then use the same snipped throughout the piece to keep things consistent.

Learn More

Improving Content Comprehension With Layouts Setka

The Layer-Cake Pattern of Scanning Content on the Web Nielsen Norman Group

Extra Inspiration

PreviousTutorialsNextAuthor Information

Last updated