carousel – XTRA Tutorials https://xtratheme.com/docs Documentation of XTRA WordPress Theme Wed, 06 Aug 2025 16:23:31 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.2 Carousel Layout for Product by Category: Add Trending Sliders with Ease https://xtratheme.com/docs/theme-options/carousel-layout-for-product-by-category-add-trending-sliders-with-ease/ https://xtratheme.com/docs/theme-options/carousel-layout-for-product-by-category-add-trending-sliders-with-ease/#respond Wed, 06 Aug 2025 14:46:16 +0000 https://xtratheme.com/docs/?p=4791

Enable Carousel for Product by Category Element

Step 1
XTRA

This feature allows designers to easily showcase products in a carousel format based on a selected category — a highly popular and engaging layout style for modern websites.

 

1pc
2pc
33pc
]]>
https://xtratheme.com/docs/theme-options/carousel-layout-for-product-by-category-add-trending-sliders-with-ease/feed/ 0
Add SVG Cursor Effect to Carousels https://xtratheme.com/docs/theme-options/add-svg-cursor-effect-to-carousels/ https://xtratheme.com/docs/theme-options/add-svg-cursor-effect-to-carousels/#respond Sat, 02 Aug 2025 10:11:17 +0000 https://xtratheme.com/docs/?p=4748

Add an Animated SVG Cursor to Your Carousel on Hover

Step 1
XTRA

A new option has been added to enhance user interaction on carousels: SVG cursor on mouse hover. Instead of using the default pointer, you can now apply a custom SVG cursor that appears specifically when users hover over carousel elements.

Navigate to:
Theme Options > General > Advanced > Carousel Hover Cursor


This feature is perfect for adding a modern, creative touch to your sliders—whether you want a stylish arrow, animated icon, or any custom-designed SVG. It helps create a more immersive and branded experience, especially for design-forward websites or minimal layouts. A small detail, but one that makes your UI feel sharper and more engaging.

Svg22
]]>
https://xtratheme.com/docs/theme-options/add-svg-cursor-effect-to-carousels/feed/ 0
Element: Posts Grid https://xtratheme.com/docs/page-builder/element-posts-grid/ https://xtratheme.com/docs/page-builder/element-posts-grid/#respond Mon, 17 Jun 2024 09:38:26 +0000 https://xtratheme.com/docs/?p=1564

Video Tutorial

Description and Screenshot

Step 1

Display blog or other post types posts as Grid | Masonry | Metro styles anywhere you want. Fully customizable and filterable.

Posts_grid
  • Layout – Gallery templates, There are more than 20 gallery styles
  • Posts gap – Custom margin / gap between gallery images
  • Posts count – Number of posts to display
  • Posts details style – Choose hover style of icon, title and caption of images
  • Icon – Select icon, this will show on post hover
  • Intro animation – Custom animation for loading images on first load
  • Meta position? – Meta position before posts title or after title or excerpt
  • Details align – Title and caption position on image or after image
  • Hover visibility – Hover details and icon visibility mode, Show on hover or keep showing
  • Hover effect – Custom CSS hover effect for icon, title and caption
  • Hover image effect – Custom image effect on mouse hover
  • Ideal height – If you set layout 1, So you can set custom ideal height for images
  • All posts Styling – Overall styling background, border, shadow, etc.
  • Images Styling – Styling for images only, border, shadow, etc.
  • Overlay scale – Gallery items have overaly color on hover, You can change scale size of it
  • Overlay Styling – You can change overlay hover color or add custom border
  • Icon Styling – Style icon on hover with color, size, background, etc.
  • Title Styling – Images title styling such as color, font family, size, etc.
  • Posts Meta – Posts meta below title such as date | category | tag | author name | custom text
  • Meta Styling – Meta details styling color, size, typography, etc.
  • Meta Icons Styling – If your meta details have icon, you can styling color, size, etc. of icons
  • Exceprt words lenght – Number of words to show for the post content
  • Excerpt Styling – Post description styling color, size, background, etc.
  • Read more button – Do you want to show read more button under post description?
  • Pagination Type – Pagination type Load more | Infinity | Numbers | Old prev/next
  • Pagination Position – Pagination position left | center | right
  • Pagination Title – Load more button title
  • Pagination End Message – Show this messsage on button when last post reached
  • Pagination Posts count – Number of posts you want to show after each load more button clicked
  • Pagination Load more Styling – Button styling color, background, border, etc.
  • Pagination Active mode Styling – Button border color while animation
  • Choose Filters – You can find and select category or tag for posts filters, this will show above posts.
  • Filter Position – If you set linkable gallery and add class for each items, Then you can have filters.
  • Filter Show all – Translation of Show All button in gallery filters
  • Filter Container Styling – Styling of overall filters container
  • Filter Filters Styling – Each filter styling color, background, size, etc.
  • Filter Active filter Styling – Activated filter styling colo, background, etc.
  • Filter Filters Delimiter Styling – You can add delimiter between filters, Any charachters allowed
  • Query Post Type – Select post type name
  • Query Order – Show posts in reverse mode or default
  • Query Orderby – Filter posts order by date | id | title | random | etc
  • Query Category Taxonomy – Name of category taxonomy for current post type
  • Query Category(s) – Type and select your category(s)
  • Tags Taxonomy – Name of tag taxonomy for current post type
  • Query Tag(s) – Type and select your tag(s
  • Query Search keyword – You can filter posts by specific keyword, Posts will shows only contains this keyword
  • Query Filter by ID(s) – If you want to show specific posts, then add posts IDs and separate by comma
  • Carousel SettingsSame as Carousel Settings
  • Cursor image – You can set custom cursor on images hover
  • Cursor Size and Position – If you set custom cursor, then you can select best size for it
  • Advanced tab – Responsive, Animation, Parallax, etc.
]]>
https://xtratheme.com/docs/page-builder/element-posts-grid/feed/ 0
Element: Gallery https://xtratheme.com/docs/page-builder/element-gallery/ https://xtratheme.com/docs/page-builder/element-gallery/#respond Mon, 17 Jun 2024 07:28:51 +0000 https://xtratheme.com/docs/?p=1480

Video Tutorial

Description and Screenshot

Step 1

Powerful stylish Gallery element with over 20 different gallery templates. Grid, Masonry, Metro, etc. All parts and styling are customizable.

Gallery
  • Gallery type – There are 3 types Gallery | Instagram | Linakable that you can set custom link to images
  • Add images – Add your gallery images one by one each one can have link, title, etc.
  • Images – Add your gallery images
  • Username or Hashtag – Instagram Username (Account should be public) or Hashtag (Hashtag should be like this #business)
  • Count – Number of images to show, Maximum 9 images
  • Update cache – Update transient for getting new data from instagram, Recommended 72 hours
  • Images size – Instagram images sizes
  • Layout – Gallery templates, There are more than 20 gallery styles
  • Custom size – You can set custom images size e.g. 400×600
  • Images gap – Custom margin / gap between gallery images
  • Ideal height – If you set layout 1, So you can set custom ideal height for images
  • Hover style – Choose hover style of icon, title and caption of images
  • Intro animation – Custom animation for loading images on first load
  • Details align – Title and caption position on image or after image
  • Hover visibility – Hover details and icon visibility mode, Show on hover or keep showing
  • Hover effect – Custom CSS hover effect for icon, title and caption
  • Hover image effect – Custom image effect on mouse hover
  • Icon – Select icon, this will show on image hover
  • Container Styling – Overall styling background, border, shadow, etc.
  • Gallery items Styling – Styling for each items such as background, border, shadow, etc.
  • Images Styling – Styling for images only, border, shadow, etc.
  • Overlay scale – Gallery items have overaly color on hover, You can change scale size of it
  • Overlay Styling – You can change overlay hover color or add custom border
  • Icon Styling – Style icon on hover with color, size, background, etc.
  • Title Styling – Images title styling such as color, font family, size, etc.
  • Badges Styling – Linkable gallery items badges styling color, font, size, etc.
  • Filter Position – If you set linkable gallery and add class for each items, Then you can have filters.
  • Filter Show all – Translation of Show All button in gallery filters
  • Filter Container Styling – Styling of overall filters container
  • Filter Filters Styling – Each filter styling color, background, size, etc.
  • Filter Active filter Styling – Activated filter styling colo, background, etc.
  • Filter Filters Delimiter Styling – You can add delimiter between filters, Any charachters allowed
  • Carousel SettingsSame as Carousel Settings
  • Cursor image – You can set custom cursor on images hover
  • Cursor Size and Position – If you set custom cursor, then you can select best size for it
  • Advanced tab – Responsive, Animation, Parallax, etc.
]]>
https://xtratheme.com/docs/page-builder/element-gallery/feed/ 0
Element: Carousel https://xtratheme.com/docs/page-builder/element-carousel/ https://xtratheme.com/docs/page-builder/element-carousel/#respond Sun, 16 Jun 2024 19:07:49 +0000 https://xtratheme.com/docs/?p=1418

Video Tutorial

Description and Screenshot

Step 1

Carousel element, You can add any element inside carousel such as image, text, gallery, video, etc. First add carousel via page builder then click on + to add elements into carousel, By editing carousel settings you can set number of slider and other settings.

Carousel
  • Container styling – You can set background or border for overall carousel
  • Slides to show – Number of slides you want to show on view
  • Slides to scroll – Number of slides when slides wants to change
  • Gap between slides – (px) Margin between each slides, e.x. 20px
  • Infinite? – Slider without end and after last slide will back to first slide
  • Auto play? – Start changing slider on automatically after specific time
  • Autoplay delay – If you set autoplay then you can set specific delay time
  • Center mode? – Center mode only works if you set slides to show 3 or 5 or 7
  • Center padding – This is optional, you can fix position of center slide as your needs
  • Slides styling – Styling for all slides except center slide, you can set opacity, filter, etc.
  • Center slide styling – Styling for all center slide only, you can set opacity, filter, etc.
  • Arrows position – Next and previous arrow position, 9 position are available to choose
  • Arrows inside carousel? – Will display arrows inside slider container on the images
  • Show on hover? – Only show arrows when mouse hovered on the slider container
  • Previous icon – Previous arrow button icon
  • Next icon – Next arrow button icon
  • Previous icon styling – Previous arrows icon styling background, color, opacity, size, etc.
  • Next icon styling – Next arrows icon styling background, color, opacity, size, etc.
  • Dots position – 12 Positions are available for carousel bullet dots
  • Dots style – 7 Predefined carousel dots styles you can choose
  • Dots inside carousel? – Will display dots inside slider container on the images
  • Dots show on hover? – Only show dots when mouse hovered on the slider container
  • Dots color – Carousel dots color scheme
  • Advanced tab – Responsive, Animation, Parallax, etc.
]]>
https://xtratheme.com/docs/page-builder/element-carousel/feed/ 0