--- title: How to build a native article slider description: Learn how to create a native article slider --- [Skip to content](https://help.indiegraf.com/how-to-build-a-native-article-slider#main-content) English Show submenu for translations [Publisher Portal](https://portal.indiegraf.com/tickets?hsLang=en) [![Indiegraf-PrimaryLogo-FullColor-1](https://help.indiegraf.com/hs-fs/hubfs/Indiegraf-PrimaryLogo-FullColor-1.png?width=262&height=60&name=Indiegraf-PrimaryLogo-FullColor-1.png)](https://help.indiegraf.com/?hsLang=en) Open main navigation Close main navigation - English Show submenu for translations - [Publisher Portal](https://portal.indiegraf.com/tickets) How can we help you? - There are no suggestions because the search field is empty. 1. [Indiegraf](https://help.indiegraf.com/?hsLang=en) 2. [Indie Ads Manager (IAM)](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en) 3. [Native Ad Templates](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#native-ad-templates) December 18, 2025 # How to build a native article slider ## Learn how to create a native article slider ![](https://downloads.intercomcdn.com/i/o/h3ow1mww/1564941938/2ea859efcc4a61696c0462bcca86/Example+-+Article+Slider+Ad.png?expires=1766188800&signature=258462a51074bd2f6f7ab8923de4ca3aedcb874e9923356dff473d8f88d8a8f2&req=dSUhEsB6nIhcUfMW3nq%2BgWnK%2FOM%2BEIA2GKKgCcAxPjWtLtw0XTks6ylL0U3q%0AR0F2rA%2FHAGsdmjJ8K7t%2FY8hYjY4%3D%0A)   ### **Requirements** To get started, ensure you have the following: - Access to the Indie Ads Manager platf orm - A standard, dynamic ad zone (not fixed size) - This template looks great at the end of posts, near the bottom of a homepage, or on a category archive page. - All partner content including recognition logos, images, destination URLs, etc.   ### **Step-by-Step Guide** 1. Log into Indie Ads Manager and navigate to the relevant ***Advertiser*** record (or create a new Advertiser) 2. Click ***Add Campaign*** and select Standard Campaign 3. Enter a name for your Campaign and adjust the targeting & scheduling levels 4. Click ***Create Campaign*** 5. In your newly created campaign, click ***Add Ad Item*** 6. From the Add Ad item window, select ***Native (Custom Rendering/API)*** 7. Give the ad a name (required) 8. Set the ad item's size to ***Dynamic*** then complete the remaining fields as needed 9. Select the ***Display: Article Slider*** template from the drop-down 10. To build your ad, you will need to populate the variables as outlined below. The template is divided into two parts: overall appearance settings and the content for each of the five individual slides 11. Repeat step 10 for each article 12. Click ***Save Ad Item***   ### **Template Variables** #### **Part 1: Overall Ad Appearance & Branding** ![](https://downloads.intercomcdn.com/i/o/h3ow1mww/1563077822/df967a4b115dcabbcd206e2d6251/Article+Slider+Branding.png?expires=1766188800&signature=49ef510942a60f50462ccb2361572879b0c16a6351f8a878bd84b059efd3c600&req=dSUhFcl5moldW%2FMW3nq%2BgYHvNnzlkvltcaKGfje9UFUZywwt4i6g9xiPvlJh%0AzRsCuynhM69wCRyHf6cQO9qfKZM%3D%0A)   These settings control the main branding and color scheme for the entire ad unit. - **Main Ad Title:** The main title for the ad block. Appears in the header - **Brand Logo:** The image for a brand logo or icon. Appears in the header - **Header Background:** Set the background color for the top header bar. Use a standard color name (e.g. 'white') or a HEX code (e.g. #F5F5F5) - **Main Title Font Color:** Choose the text color for the Main Ad Title. Ensure it has good contrast with the Header Background color for readability. Use a standard color name or a HEX code - **Article Headline Color:** Select the single color for all slide headlines in the ad. Use a standard color name or a HEX code - **Flare Color:** Pick the background color for the small "flare" tag that can appear on each item. The color will be used for all flares #### **Part 2: Content Items (1 - 5)** Fill out the details for each of the five slides in the ad unit. ​ ![](https://downloads.intercomcdn.com/i/o/h3ow1mww/1563081454/bc3b3fa7dde97102ac11788a602b/Article+Slider+Articles.png?expires=1766188800&signature=c78f9f93b07af23ee152a5fbc70951f49a95bd1e2402336a05edbf58d12bcd09&req=dSUhFcl2nIVaXfMW3nq%2BgW5cqcq%2BbwQKRqmqgwoak9yO3df6vCjgeJPAnowo%0ASpl%2B7I%2BnESlWWW%2FDO6Mh6eUonEk%3D%0A) - **Headline:** Write the main, clickable headline for this specific slide. Keep it engaging and concise to attract clicks - **Subtitle:** Add a short line of text below the headline. This could be used for a publication date, author name, or an excerpt - **Image:** Upload the main image for the slide. For best results, use a high-quality image with a 16:9 aspect ratio - **Flare Text:** Include a short, bold tag like "Exclusive" or "Trending" to make this item stand out - **Click-Through URL:** Enter the full destination URL where users will be taken when they click on a specific slide. ![](https://downloads.intercomcdn.com/i/o/h3ow1mww/1563077327/9507690c94c5a85f9640bf6599e4/Ad+Anatomy_Article+Slider_05_2026.png?expires=1766188800&signature=e2bdb552eb80bfdcb5fd6017776d7d19f16385a15c4de74b594fbad00f81d038&req=dSUhFcl5moJdXvMW3nq%2BgRxNVBKA1Ew4%2F3rsmINbNSgJ%2BlEFwP3vPXjMxWL4%0Acwiwg3Gt1Bt%2BmLpK7hoY4UzPczk%3D%0A)   ### **FAQ & Troubleshooting** 1. **Do I have to use all five slides?** Yes. This slide requires you to use all five slides. 2. **What are the best image dimensions?** This template is optimized for images with a 16:9 aspect ratio (e.g. 1,200px by 675px) Using images with this ratio will ensure they fit perfectly without unexpected cropping or distortion. 3. **Can I change the fonts?** No, the fonts are in the native ad template's CSS. They are set to Arial, sans-serif. 4. **How long should my headlines and subtitles be?** For the best appearance across all devices, aim for headlines under 70 characters long. Subtitles can be a bit longer. Clear and concise copy is most effective. 5. **My ad is not displaying:** Remember that all slides need to be completed. If values are missed, it can result in the ad not rendering correctly. ### **Conclusion** You are now ready to build your native Article Slider. By replacing the variables in the template, you can create a dynamic and visually appealing ad unit to feature your content. - [Welcome to Indiegraf](https://help.indiegraf.com/welcome-to-indiegraf?hsLang=en) - [Onboarding](https://help.indiegraf.com/onboarding?hsLang=en#main-content) - [Quick Start Guide](https://help.indiegraf.com/onboarding?hsLang=en#quick-start-guide) - [Indie Website](https://help.indiegraf.com/indie-website?hsLang=en#main-content) - [Analytics & Growth](https://help.indiegraf.com/indie-website?hsLang=en#analytics-growth) - [Audience Engagement & Forms](https://help.indiegraf.com/indie-website?hsLang=en#audience-engagement-forms) - [Configuring your Homepage](https://help.indiegraf.com/indie-website?hsLang=en#configuring-your-homepage) - [Content Creation & Management](https://help.indiegraf.com/indie-website?hsLang=en#content-creation-management) - [Design & Page Layout](https://help.indiegraf.com/indie-website?hsLang=en#design-page-layout) - [Indiegraf Pay](https://help.indiegraf.com/indie-website?hsLang=en#indiegraf-pay) - [Media & Visual Assets](https://help.indiegraf.com/indie-website?hsLang=en#media-visual-assets) - [Paywall Solution: Pelcro](https://help.indiegraf.com/indie-website?hsLang=en#paywall-solution-pelcro) - [SEO and Google Tools](https://help.indiegraf.com/indie-website?hsLang=en#seo-and-google-tools) - [Site Administration](https://help.indiegraf.com/indie-website?hsLang=en#site-administration) - [Technical Questions](https://help.indiegraf.com/indie-website?hsLang=en#technical-questions) - [Indie Email](https://help.indiegraf.com/indie-email?hsLang=en#main-content) - [Quickstart Video Guide: Indie Email](https://help.indiegraf.com/indie-email?hsLang=en#quickstart-video-guide-indie-email) - [Account Setup & Foundations](https://help.indiegraf.com/indie-email?hsLang=en#account-setup-foundations) - [Contact Management](https://help.indiegraf.com/indie-email?hsLang=en#contact-management) - [Creating Campaigns](https://help.indiegraf.com/indie-email?hsLang=en#creating-campaigns) - [Sending Campaigns & Automation](https://help.indiegraf.com/indie-email?hsLang=en#sending-campaigns-automation) - [Troubleshooting & Deliverability](https://help.indiegraf.com/indie-email?hsLang=en#troubleshooting-deliverability) - [Analytics](https://help.indiegraf.com/indie-email?hsLang=en#analytics) - [Indie Ads Manager (IAM)](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#main-content) - [Reporting & Statistics](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#reporting-statistics) - [Essential Articles](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#essential-articles) - [Native Ad Templates](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#native-ad-templates) - [Quick Start Guide](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#quick-start-guide) - [Payment Solutions](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#payment-solutions) - [Hearken](https://help.indiegraf.com/hearken?hsLang=en#main-content) - [Planning and Preparing to Launch with Hearken](https://help.indiegraf.com/hearken?hsLang=en#planning-and-preparing-to-launch-with-hearken) - [Collecting Questions](https://help.indiegraf.com/hearken?hsLang=en#collecting-questions) - [Collecting Votes](https://help.indiegraf.com/hearken?hsLang=en#collecting-votes) - [Reporting an Answer](https://help.indiegraf.com/hearken?hsLang=en#reporting-an-answer) - [Spreading Hearken Across Your Organization](https://help.indiegraf.com/hearken?hsLang=en#spreading-hearken-across-your-organization) - [Creating and Customizing an Embed](https://help.indiegraf.com/hearken?hsLang=en#creating-and-customizing-an-embed) - [Workflow Features](https://help.indiegraf.com/hearken?hsLang=en#workflow-features) - [Platform Features](https://help.indiegraf.com/hearken?hsLang=en#platform-features) - [Setting Up Notifications and Alerts](https://help.indiegraf.com/hearken?hsLang=en#setting-up-notifications-and-alerts) - [Setting up APIs and webhooks](https://help.indiegraf.com/hearken?hsLang=en#setting-up-apis-and-webhooks) - [Data collection and exporting](https://help.indiegraf.com/hearken?hsLang=en#data-collection-and-exporting) - [Automatic categorization](https://help.indiegraf.com/hearken?hsLang=en#automatic-categorization) - [Social, outreach, and marketing](https://help.indiegraf.com/hearken?hsLang=en#social-outreach-and-marketing) - [Events and In-Person Engagement](https://help.indiegraf.com/hearken?hsLang=en#events-and-in-person-engagement) - [Monetizing your Hearken work](https://help.indiegraf.com/hearken?hsLang=en#monetizing-your-hearken-work) - [Indiegraf Experts](https://help.indiegraf.com/indiegraf-experts?hsLang=en) - [Indiegraf Product Release Notes](https://help.indiegraf.com/indiegraf-product-release-notes?hsLang=en#main-content) - [Product Demo Videos](https://help.indiegraf.com/indiegraf-product-release-notes?hsLang=en#product-demo-videos) - [General](https://help.indiegraf.com/general?hsLang=en) - [RevEngine](https://help.indiegraf.com/revengine?hsLang=en#main-content) - [Getting Started with RevEngine](https://help.indiegraf.com/revengine?hsLang=en#getting-started-with-revengine) - [International giving](https://help.indiegraf.com/revengine?hsLang=en#international-giving) - [RevEngine Core](https://help.indiegraf.com/revengine?hsLang=en#revengine-core) - [Organization management](https://help.indiegraf.com/revengine?hsLang=en#organization-management) - [Working with Stripe](https://help.indiegraf.com/revengine?hsLang=en#working-with-stripe) - [Contribution page basics](https://help.indiegraf.com/revengine?hsLang=en#contribution-page-basics) - [Customizing your page](https://help.indiegraf.com/revengine?hsLang=en#customizing-your-page) - [Branding and images](https://help.indiegraf.com/revengine?hsLang=en#branding-and-images) - [Advanced page settings & features](https://help.indiegraf.com/revengine?hsLang=en#advanced-page-settings-features) - [Portal & contribution management](https://help.indiegraf.com/revengine?hsLang=en#portal-contribution-management) - [Contribution data](https://help.indiegraf.com/revengine?hsLang=en#contribution-data) - [Analytics and Reporting](https://help.indiegraf.com/revengine?hsLang=en#analytics-and-reporting) - [Best Practices and Recommendations](https://help.indiegraf.com/revengine?hsLang=en#best-practices-and-recommendations) - [Receipts, reminders and transactional communications](https://help.indiegraf.com/revengine?hsLang=en#receipts-reminders-and-transactional-communications) - [Security & Legal](https://help.indiegraf.com/revengine?hsLang=en#security-legal) - [Common issues](https://help.indiegraf.com/revengine?hsLang=en#common-issues) [![Indiegrf](https://help.indiegraf.com/hs-fs/hubfs/Indiegraf-SecondaryLogo-DarkNavy-2.png?width=260&height=130&name=Indiegraf-SecondaryLogo-DarkNavy-2.png "Indiegrf")](https://help.indiegraf.com/?hsLang=en) Indiegraf is on a mission to make local news entrepreneurship a great career and life choice for journalists everywhere. [mailto:support@indiegraf.com](mailto:support@indiegraf.com) Copyright © 2025, Indiegraf Media