> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/other-pages/blog-post/article-banner.md). # Article Banner The Article Banner section displays a large banner image at the top of article pages with the article title overlaid on top. This creates an impressive visual introduction to each article and helps set the tone for the content. You can customize the banner image, add overlay effects, control text positioning, and adjust the layout to create a professional and engaging article header that matches your brand style.
{% hint style="info" %} ### How to set it up 1. Go to **Online Store** > **Themes** > **Customize**. 2. Open **Templates** > **Article Banner**. 3. Configure the sections and blocks. 4. Preview live, then click **Save**. {% endhint %} *** ### Settings #### Media * **Show article image**: When enabled, displays a banner image at the top of the article page. This creates a visually striking header that helps showcase your article. * **Article image source**: Choose where the banner image comes from. Options include Default (uses the article's featured image set in your Shopify admin) or Custom (allows you to upload a specific image for this section). * **Custom article image**: When using custom image source, upload the image you want to display in the banner. This gives you full control over the banner appearance for each article. #### Effects * **Overlay opacity**: Control how dark or light the overlay is on top of the banner image. Options range from 0% (no overlay, image fully visible) to 100% (completely dark overlay). This helps ensure text is readable over images. * **Overlay color**: Choose the color of the overlay that appears on top of the banner image. This is typically set to black or a dark color to improve text readability, but you can use any color to match your design. * **Overlay on scroll**: When enabled, the overlay gradually darkens as customers scroll down the page. This creates a dynamic effect that helps text remain readable as the page scrolls. * **Overlay target opacity**: When overlay on scroll is enabled, set how dark the overlay becomes when fully scrolled. Options range from 0% to 100%. This controls the final darkness level of the overlay effect. * **Image behavior**: Choose how the banner image animates or behaves. Options include None (static image), Ambient movement (subtle floating animation), Fixed background position (image stays fixed while content scrolls), or Zoom in on scroll (image zooms in as customers scroll down). #### Layout * **Height**: Control how tall the banner section is on desktop screens. Options include Small (compact banner), Medium (standard height), Large (tall banner), or Adapted to screen (automatically adjusts to screen size). This affects how much of the image is visible and how prominent the banner appears. * **Colors**: Choose a color scheme for the banner section background. This affects the overall appearance when no image is displayed or around the banner area. * **Content max width limit**: Control the maximum width of the text content box. Options include Full width (content can span the entire banner width) or Page width (content is limited to your theme's page width setting). This helps control how wide the text box appears. * **Content max width**: When the text box is displayed, control its maximum width. Options include 50rem (narrow), 70rem (medium), or 90rem (wide). This helps ensure text doesn't spread too wide and remains readable. * **Position**: Control where the text content appears on the banner image on desktop screens. Options include nine positions: Top Left, Top Center, Top Right, Middle Left, Middle Center, Middle Right, Bottom Left, Bottom Center, or Bottom Right. This lets you place text wherever it looks best with your image. * **Alignment**: Control how text is aligned within the content box on desktop screens. Options include Left (text aligned to the left), Center (text centered), or Right (text aligned to the right). This works with the position setting to create the perfect text layout. * **Container**: When enabled, displays the text content inside a styled container box with background color. When disabled, text appears directly on the image without a background box, creating a more minimal look. * **Container color scheme**: Choose a color scheme for the text container box. This affects the background and text colors of the content box, allowing you to create contrast with the banner image. #### Content * **Heading size**: Control the size of the article title. Options range from h4 (smallest) to hxxl (extra large) to match your design preferences. * **Underline**: When enabled, adds a decorative underline beneath the article title for visual emphasis. #### Content Mobile * **Height**: Control how tall the banner section is on mobile devices. Options include Adapt to media (image height adjusts to image proportions), Small (compact banner), Medium (standard height), Large (tall banner), Full screen (banner fills the entire screen), or Adapted to screen (automatically adjusts to screen size). Mobile settings help ensure the banner looks great on phones and tablets. * **Position**: Control where the text content appears on the banner image on mobile devices. Options include Top (text at the top of the banner), Middle (text in the center), or Bottom (text at the bottom). This ensures text is positioned well on smaller screens. * **Alignment**: Control how text is aligned within the content box on mobile devices. Options include Left (text aligned to the left), Center (text centered), or Right (text aligned to the right). This helps create the best mobile reading experience. * **Container**: When enabled on mobile, displays the text content below the banner image instead of overlaid on top. This ensures text is always readable on mobile devices, especially when images are complex or busy. #### Padding * **Padding top**: Add space above the section. Options range from 0px (no space) to 400px in 10px increments. On mobile devices, this is automatically reduced to half the value for better mobile display. * **Padding bottom**: Add space below the section. Options range from 0px (no space) to 400px in 10px increments. On mobile devices, this is automatically reduced to half the value for better mobile display. *** ### Tips * Use a high-quality banner image that represents your article content well. The image should be clear, well-lit, and showcase the article topic visually. * Adjust the overlay opacity to ensure text is always readable. Darker overlays (40-60%) work well for light images, while lighter overlays (20-40%) work for darker images. * Use the "Overlay on scroll" effect to create a dynamic, engaging experience. This effect helps text remain readable as customers scroll and adds visual interest to the page.