slider – XTRA Tutorials https://xtratheme.com/docs Documentation of XTRA WordPress Theme Sun, 23 Feb 2025 07:01:50 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.2 How to remove Slider Revolution from Home page? https://xtratheme.com/docs/how-to/how-to-remove-slider-re-from-home-page/ https://xtratheme.com/docs/how-to/how-to-remove-slider-re-from-home-page/#respond Sun, 15 Sep 2024 16:34:25 +0000 https://xtratheme.com/docs/?p=4207

Description and Screenshot

Step 1
Xtra

Remove Slider Revolution from Page or Post

There are a few reasons why some people choose to remove sliders (also known as carousel sliders) from their home pages:

  • User Experience: Sliders can be distracting and may slow down a website’s loading time. Some users find them annoying or hard to navigate, especially if the slides change too quickly or if they’re on mobile devices.
  • Content Visibility: Key messages or calls to action can get lost if they’re buried in a slider. Users might not wait long enough to see all the slides or might miss important content altogether.
  • Performance: Sliders can impact website performance, especially if they are poorly optimized. They might use a lot of resources, affecting the page load speed and overall user experience.
  • Accessibility: Not all users can interact easily with sliders. For those using screen readers or other assistive technologies, sliders can present challenges.
  • Design Trends: Design trends have shifted towards simpler, more streamlined websites. Static images or direct content might be preferred for a cleaner, more focused presentation.
  • Conversion Rates: Some studies suggest that sliders can negatively impact conversion rates. Users might be less likely to interact with the content if it’s presented in a rotating format.

Ultimately, removing a slider can be a way to improve a website’s usability, accessibility, and effectiveness.

To deactivate the Revolution Slider in our WordPress theme, you can follow the steps below:

Go to Dashboard > Edit your Page > Page Settings > Header Settings > Title Type Change title type from Revolution Slider to another type or default.

Slider3
]]>
https://xtratheme.com/docs/how-to/how-to-remove-slider-re-from-home-page/feed/ 0
How to Change the Home Slider on Your Website? https://xtratheme.com/docs/how-to/how-to-change-the-home-slider-on-your-website/ https://xtratheme.com/docs/how-to/how-to-change-the-home-slider-on-your-website/#respond Tue, 03 Sep 2024 00:00:00 +0000 https://xtratheme.com/docs/?p=3088

Where is the page Slider setting?

Step 1
Step01

Page Edit

If you want to create a slider with images and overlay layers, we recommend using the Slider Revolution plugin that comes with the theme. After creating the slider, you can display it on your site by following the path below.
You can set Revolution Slider for each page as its Title and it will show it on the Page title area.

Go to Page Edit in back-end mode

Home slider
  1. Go to Page edit (in back-end)
  2. Scroll down to find Page Settings
  3. Click on Header Settings on left tabs
  4. set Title type as Revolution Slider
  5. Select Slider from dropdown menu
Home slider 2
Tip

You might be interested to know that…

And if you do not wish to display the slider on the homepage or other pages, you can simply choose not to activate it. This will not cause any issues with your site.

]]>
https://xtratheme.com/docs/how-to/how-to-change-the-home-slider-on-your-website/feed/ 0
Theme Options: Title and Breadcrumbs https://xtratheme.com/docs/theme-options/theme-options-title-and-breadcrumbs/ https://xtratheme.com/docs/theme-options/theme-options-title-and-breadcrumbs/#comments Wed, 26 Jun 2024 07:45:57 +0000 https://xtratheme.com/docs/?p=1874

Description and Screenshot

Step 1
XTRA

Title and Breadcrumbs settings

Under Theme Options > Header > Title and Breadcrumbs you can find title and breadcrumbs settings and StyleKits, enable/disable revolution slider or page cover.

  1. Header Position – You can change header position according to title and breadcrumbs
  2. Title Type – You can set to title, slider, image, custom code, custom page, etc.
  3. Title and Breadcrumbs – Position and display of title and breadcrumbs
  4. Center Mode – Force title and breadcrumbs in center place
  5. Breadcrumbs Delimiter – Choose separator icon between breadcrumbs item
  6. StyleKits – Customize any part of title and breadcrumbs
Theme options title breadcrumbs
Theme options title breadcrumbs 2
Tips

You may want to know …

  • Enable Slider as page Title – First go to Dashboard > Revolution slider menu and create your own slider, then go back to theme options and title breadcrumbs panel, then set Title type to Slider revolution and then choose your slider.

  • Background Image or Color – In title and breadcrumbs panel find Container StyleKit and set your background image or color.

  • Background color in specific page – After you enabled title and breadcrumbs from theme options, go to Dashboard > Pages and edit your page, then from Page settings > Header settings you can find title and breadcrumbs container StyleKit and change background color.
]]>
https://xtratheme.com/docs/theme-options/theme-options-title-and-breadcrumbs/feed/ 2
codevz/importer/after_import_slider https://xtratheme.com/docs/developer/codevz-importer-after_import_slider/ https://xtratheme.com/docs/developer/codevz-importer-after_import_slider/#respond Wed, 19 Jun 2024 12:03:49 +0000 https://xtratheme.com/docs/?p=3076

Example code

Step 1
XTRA

Using WordPress action add content or PHP codes

In the following example you can see how to run your custom PHP codes after importing slider from demo importer side.

XTRA

How and where should I add this PHP codes?

Best solution is to add custom actions and filters in Child Theme functions.php file. But also you can create your own plugin and use this codes in your plugin.

]]>
https://xtratheme.com/docs/developer/codevz-importer-after_import_slider/feed/ 0
codevz/after_slider https://xtratheme.com/docs/developer/codevz-after_slider/ https://xtratheme.com/docs/developer/codevz-after_slider/#respond Tue, 18 Jun 2024 10:50:03 +0000 https://xtratheme.com/docs/?p=2978

Example code

Step 1
XTRA

Using WordPress action add content or PHP codes

In the following example you can see how to add content or PHP codes after page slider.

XTRA

How and where should I add this PHP codes?

Best solution is to add custom actions and filters in Child Theme functions.php file. But also you can create your own plugin and use this codes in your plugin.

]]>
https://xtratheme.com/docs/developer/codevz-after_slider/feed/ 0
codevz/before_slider https://xtratheme.com/docs/developer/codevz-before_slider/ https://xtratheme.com/docs/developer/codevz-before_slider/#respond Tue, 18 Jun 2024 10:46:23 +0000 https://xtratheme.com/docs/?p=2975

Example code

Step 1
XTRA

Using WordPress action add content or PHP codes

In the following example you can see how to add content or PHP codes before page slider.

XTRA

How and where should I add this PHP codes?

Best solution is to add custom actions and filters in Child Theme functions.php file. But also you can create your own plugin and use this codes in your plugin.

]]>
https://xtratheme.com/docs/developer/codevz-before_slider/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