{"id":33399,"date":"2025-08-19T11:59:17","date_gmt":"2025-08-19T05:59:17","guid":{"rendered":"https:\/\/hasthemes.com\/?post_type=docs&#038;p=33399"},"modified":"2025-08-21T11:34:03","modified_gmt":"2025-08-21T05:34:03","password":"","slug":"how-to-use-pagination-title-feature-in-ht-scroll-navigation-slider","status":"publish","type":"docs","link":"https:\/\/hasthemes.com\/docs\/how-to-use-pagination-title-feature-in-ht-scroll-navigation-slider\/","title":{"rendered":"How to Use Pagination Title Feature in HT Scroll Navigation Slider"},"content":{"rendered":"\n<p>The Pagination Title feature in the HT Scroll Navigation Slider displays slide titles when users hover over pagination dots or when slides are active. This enhances user experience by providing clear navigation hints and improves content accessibility.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Benefits of Using Pagination Titles \ud83d\ude80 <\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Enhanced User Experience \ud83c\udfaf<\/strong> \u2013 Users instantly understand slide content before navigating<\/li>\n\n\n\n<li><strong>Improved Accessibility \u267f<\/strong> \u2013 Better navigation for users with disabilities<\/li>\n\n\n\n<li><strong>Professional Appearance \ud83d\udcbc<\/strong> \u2013 Adds sophistication to your sliders<\/li>\n\n\n\n<li><strong>Reduced Bounce Rate \ud83d\udcc8<\/strong> \u2013 Clear navigation encourages exploration<\/li>\n\n\n\n<li><strong>Mobile-Friendly \ud83d\udcf1<\/strong> \u2013 Automatically adapts to smaller screens with text truncation<\/li>\n\n\n\n<li><strong>Customizable Design \ud83c\udfa8<\/strong> \u2013 Match your brand colors and typography<\/li>\n\n\n\n<li><strong>Multiple Trigger Options \ud83d\uddb1\ufe0f<\/strong> \u2013 Choose how and when titles appear<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step-by-Step Guide to Enable Pagination Titles<\/h2>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Enable Pagination Title Feature <\/h3>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the page with the HT Scroll Navigation Slider in <strong>Edit with Elementor<\/strong> mode.<\/li>\n\n\n\n<li>Select the <strong>HT Scroll Navigation Slider<\/strong> widget.<\/li>\n\n\n\n<li>Navigate to the <strong>Slider Options<\/strong> tab.<\/li>\n\n\n\n<li>Locate the <strong>Show Pagination Title<\/strong> setting (marked with a <strong>NEW<\/strong> badge) and enable it.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"505\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-pagination-title-2-1024x505.png\" alt=\"\" class=\"wp-image-33427\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-pagination-title-2-1024x505.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-pagination-title-2-300x148.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-pagination-title-2-768x379.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-pagination-title-2-1536x758.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-pagination-title-2-360x178.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-pagination-title-2.png 1595w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"539\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-title-options-1024x539.png\" alt=\"\" class=\"wp-image-33450\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-title-options-1024x539.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-title-options-300x158.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-title-options-768x404.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-title-options-1536x809.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-title-options-360x190.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-title-options.png 1599w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure Pagination Title Settings<\/h3>\n\n\n\n<p>After enabling the feature, you'll see additional configuration options:<\/p>\n\n\n\n<p><strong>Show Title On:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Hover<\/strong> \u2013 Titles appear only when hovering over pagination dots<\/li>\n\n\n\n<li><strong>Active<\/strong> \u2013 Titles show only for the currently active slide<\/li>\n\n\n\n<li><strong>Both Hover & Active<\/strong> \u2013 Combines both behaviors for maximum visibility<\/li>\n\n\n\n<li><strong>Always Visible<\/strong> \u2013 Titles are permanently displayed<\/li>\n<\/ul>\n\n\n\n<p><strong>Title Position:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Top<\/strong> \u2013 Displays titles above pagination dots<\/li>\n\n\n\n<li><strong>Bottom<\/strong> \u2013 Shows titles below pagination dots<\/li>\n\n\n\n<li><strong>Left<\/strong> \u2013 Positions titles to the left of dots<\/li>\n\n\n\n<li><strong>Right<\/strong> \u2013 Places titles to the right of dots<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"541\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-show-pagination-title-1024x541.png\" alt=\"\" class=\"wp-image-33428\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-show-pagination-title-1024x541.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-show-pagination-title-300x158.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-show-pagination-title-768x406.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-show-pagination-title-1536x811.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-show-pagination-title-360x190.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-show-pagination-title.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Add Custom Slide Titles<\/h3>\n\n\n\n<p>To add personalized titles for each slide:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate to slides source section.<\/li>\n\n\n\n<li>Select Source Type: custom content.<\/li>\n\n\n\n<li>Go to the <strong>Slider Items<\/strong> section.<\/li>\n\n\n\n<li>For each slide item, you'll find a <strong>Slide Title<\/strong> field.<\/li>\n\n\n\n<li>Enter a descriptive title for each slide (e.g., &#8220;Welcome Section&#8221;, &#8220;Our Services&#8221;, &#8220;Contact Us&#8221;).<\/li>\n\n\n\n<li>If no custom title is provided, the system will automatically extract text from the slide content.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"430\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-custom-source-1024x430.png\" alt=\"\" class=\"wp-image-33432\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-custom-source-1024x430.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-custom-source-300x126.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-custom-source-768x323.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-custom-source-1536x645.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-custom-source-360x151.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-custom-source.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"586\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-custom-slide-title-1024x586.png\" alt=\"\" class=\"wp-image-33431\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-custom-slide-title-1024x586.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-custom-slide-title-300x172.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-custom-slide-title-768x439.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-custom-slide-title-1536x879.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-custom-slide-title-360x206.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-custom-slide-title.png 1591w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Style Your Pagination Titles<\/h3>\n\n\n\n<p>Navigate to the <strong>Style<\/strong> tab and find the new <strong>Pagination Title<\/strong> section:<\/p>\n\n\n\n<p><strong>Typography Options:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Font family, size, weight, and style<\/li>\n\n\n\n<li>Text transform and letter spacing<\/li>\n\n\n\n<li>Line height customization<\/li>\n<\/ul>\n\n\n\n<p><strong>Color Settings:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Text color for optimal readability<\/li>\n\n\n\n<li>Background color with transparency support<\/li>\n\n\n\n<li>Border colors and styles<\/li>\n<\/ul>\n\n\n\n<p><strong>Spacing & Positioning:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Padding for internal spacing<\/li>\n\n\n\n<li>Margins for external positioning<\/li>\n\n\n\n<li>Border radius for rounded corners<\/li>\n<\/ul>\n\n\n\n<p><strong>Visual Effects:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Box shadow for depth<\/li>\n\n\n\n<li>Border styling options<\/li>\n\n\n\n<li>Hover state customizations<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"560\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-tooltip-style-1024x560.png\" alt=\"\" class=\"wp-image-33429\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-tooltip-style-1024x560.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-tooltip-style-300x164.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-tooltip-style-768x420.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-tooltip-style-1536x840.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-tooltip-style-360x197.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-tooltip-style.png 1597w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Configure Animations (Optional) <\/h3>\n\n\n\n<p>Add engaging entrance animations to your pagination titles:<\/p>\n\n\n\n<p><strong>Animation Types:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Fade In<\/strong> \u2013 Smooth opacity transition (professional)<\/li>\n\n\n\n<li><strong>Slide Up<\/strong> \u2013 Slides from bottom to position<\/li>\n\n\n\n<li><strong>Slide Down<\/strong> \u2013 Slides from top to position<\/li>\n\n\n\n<li><strong>Slide Left<\/strong> \u2013 Enters from the right side<\/li>\n\n\n\n<li><strong>Slide Right<\/strong> \u2013 Enters from the left side<\/li>\n\n\n\n<li><strong>Zoom In<\/strong> \u2013 Scales from small to normal size<\/li>\n\n\n\n<li><strong>Bounce In<\/strong> \u2013 Playful bouncing entrance effect<\/li>\n<\/ul>\n\n\n\n<p><strong>Animation Duration:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adjust timing from 100ms to 2000ms<\/li>\n\n\n\n<li>Default: 300ms for optimal user experience<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"554\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-pagination-animation-1024x554.png\" alt=\"\" class=\"wp-image-33430\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-pagination-animation-1024x554.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-pagination-animation-300x162.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-pagination-animation-768x415.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-pagination-animation-1536x831.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-pagination-animation-360x195.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-slider-pagination-animation.png 1599w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The Pagination Title feature in the HT Scroll Navigation Slider displays slide titles when users hover over pagination dots or when slides are active. This enhances user experience by providing clear navigation hints and improves content accessibility. Benefits of Using Pagination Titles \ud83d\ude80 Step-by-Step Guide to Enable Pagination Titles Step 1: Enable Pagination Title Feature [&hellip;]<\/p>\n","protected":false},"author":22,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","_mi_skip_tracking":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"doc_category":[256],"doc_tag":[],"class_list":["post-33399","docs","type-docs","status-publish","hentry","doc_category-ht-slider"],"acf":[],"year_month":"2025-11","word_count":455,"total_views":"217","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Saidul","author_nicename":"saidul","author_url":"https:\/\/hasthemes.com\/author\/saidul\/"},"doc_category_info":[{"term_name":"HT Slider","term_url":"https:\/\/hasthemes.com\/docs-category\/ht-slider\/"}],"doc_tag_info":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"htmega_size_585x295":false,"htmega_size_1170x536":false,"htmega_size_396x360":false,"betterdocs-category-thumb":false},"uagb_author_info":{"display_name":"Saidul","author_link":"https:\/\/hasthemes.com\/author\/saidul\/"},"uagb_comment_info":0,"uagb_excerpt":"The Pagination Title feature in the HT Scroll Navigation Slider displays slide titles when users hover over pagination dots or when slides are active. This enhances user experience by providing clear navigation hints and improves content accessibility. Benefits of Using Pagination Titles \ud83d\ude80 Step-by-Step Guide to Enable Pagination Titles Step 1: Enable Pagination Title Feature&hellip;","knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/33399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/comments?post=33399"}],"version-history":[{"count":20,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/33399\/revisions"}],"predecessor-version":[{"id":33454,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/33399\/revisions\/33454"}],"wp:attachment":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/media?parent=33399"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_category?post=33399"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_tag?post=33399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}