elements – XTRA Tutorials

Gradient Overlay Option for Gallery & Text Marquee Elements

XTRA — Mon, 11 Aug 2025 13:16:26 +0000

Add Gradient Effects to Gallery and Text Marquee

Step 1

XTRA

With this option, you can add a Gradient Overlay to Gallery and Text Marquee elements. This layer allows you to display images and text with more attractive color combinations and a modern visual touch. It also improves text readability over images, giving your website a more professional look. Colors and transparency of the gradient can be fully customized to match your design style perfectly.

Gallery

Text Marquee

Collect Emails as WP Subscribers with AJAX

XTRA — Sat, 09 Aug 2025 09:22:21 +0000

Name Field & AJAX Support for Subscribe Element

Step 1

XTRA

Collect subscriber names and emails via built-in AJAX. Submissions are stored as WordPress Subscriber accounts after email confirmation (double opt-in). Manage them in Users > All Users and connect to tools like MailPoet, Newsletter Plugin, or Mailchimp for WP.

Carousel Layout for Product by Category: Add Trending Sliders with Ease

XTRA — Wed, 06 Aug 2025 14:46:16 +0000

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.

How to Apply Inverted Border Radius to Images, Banners, Video, Content Box and Service Box?

XTRA — Tue, 05 Aug 2025 12:18:36 +0000

Inverted Radius Settings for Enhanced Visual Styling

Step 1

XTRA

This feature allows you to apply inverted border radius to various elements including images, banners, content boxes, videos, and service boxes. Instead of rounding corners inward (the traditional way), you can now create cut-out or concave corner effects, giving your layout a more dynamic and creative look.

You’ll find these options in each element’s Content tab under the Inverted Radius section.

To use this feature, simply add one of the supported elements—Image, Banner, Content Box, Video, or Service Box—to your page.

This is perfect for modern or minimal designs and lets you enhance visual interest without writing any custom CSS.

How to Control Element Visibility on Desktop, Mobile, and Tablet in WPBakery?

XTRA — Mon, 09 Sep 2024 13:24:00 +0000

Description

Step 1

Xtra

Steps to Make an Element Visible on Desktop, Mobile, or Tablet in WPBakery Page Builder

To control the visibility of an element on desktop, mobile, or tablet in WPBakery Page Builder, you can use the built-in Responsive Options feature. This allows you to decide which devices (desktop, tablet, or mobile) can see a specific element.

1. Open WPBakery Page Builder:

Go to the page you want to edit and click Edit with WPBakery Page Builder.

2. Select the Element:

Find the element (row, column, or module) you want to control and click on the Edit button (pencil icon).

3. Go to the Responsive Options:

In the popup window, click on the Design Options or Responsive Options section (depending on the version you are using).

4. Set Visibility Options:

You’ll see checkboxes for Hide on Desktop, Hide on Tablet, and Hide on Mobile.

Check the box next to the device where you want the element to be hidden.

Uncheck the box if you want the element to remain visible on that device.

5. Save: After setting the visibility options, click Save or Close to apply the changes.

6. Update the Page:

Click the Update or Publish button to save your changes and make them live on your website.

Tips

Tips You Should Know…

To make an element visible only on mobile: Check “Hide on Desktop” and “Hide on Tablet” and leave “Hide on Mobile” unchecked.
To make an element visible only on desktop: Check “Hide on Tablet” and “Hide on Mobile” and leave “Hide on Desktop” unchecked.

This way, you can tailor the visibility of elements on your website based on the user’s device, providing a more optimized and responsive design.

How to Show or Hide Elements on Desktop, Mobile, and Tablet in Elementor?

XTRA — Mon, 09 Sep 2024 12:21:56 +0000

Description

Step 1

Xtra

Steps to Show or Hide Elements on Desktop, Mobile, and Tablet in Elementor Page Builder

In Elementor, you can easily control the visibility of elements based on device types (desktop, mobile, or tablet). This feature allows you to show or hide specific elements depending on the screen size or device, optimizing your website for different devices.

1.Open Elementor Editor:

Go to your WordPress dashboard, navigate to the page you want to edit, and click Edit with Elementor.

2. Select the Element:

Click on the element (section, column, or widget) you want to show or hide on different devices.

3.Open the Advanced Tab:

In the Elementor panel on the left side, click on the Advanced tab.

4.Go to Responsive Settings:

Scroll down in the Advanced tab to find the Responsive section. Click to expand it.

5.Set Visibility Based on Devices:

You will see options labeled Hide On Desktop, Hide On Tablet, and Hide On Mobile. Toggle the buttons for the devices where you want the element to be hidden.

Hide on Desktop: Hides the element on desktop devices.
Hide on Tablet: Hides the element on tablet devices.
Hide on Mobile: Hides the element on mobile devices.

Once you’ve set the visibility preferences, click the Update button to save your changes.

Tips

Tips You Should Know…

To preview how your page looks on different devices, you can use Elementor’s Responsive Mode:

At the bottom of the Elementor panel, click the Responsive Mode icon (a screen icon).
Select Desktop, Tablet, or Mobile to preview and fine-tune your design.

This gives you more control over how your content is displayed across devices and ensures a better user experience for all visitors.

Elements Overview

XTRA — Thu, 13 Jun 2024 09:34:50 +0000

Page builder elements overview

Step 1

Part01

Theme premium elements

XTRA theme comes with at least 49 premium page builder elements, All elements are exclusively designed and developed for XTRA WordPress theme and with yellow icon you can find them under XTRA tab.

Part02

Common elements settings

Each theme elements have some common settings that you can find them under Advanced tab. Some elements have all of these settings and others have some of these settings.

Hide on Desktop? – Hide element only on desktop
Hide on Tablet? – Hide element only on tablet
Hide on Mobile? – Hide element only on mobile
Parallax – Make this element moveable on scroll
Parallax speed – Parallax movement speed on scroll
Mouse speed – Movement speed on mouse move
Tilt effect – Parallax on hover tilt effect
Tilt Glare – Glare effect on mouse hover
Tilt Scale – Scale effect on mouse hover
CSS Animation – Show element on page scroll
Animation Delay – Animation delay time in milliseconds
Extra Class – Allows you to add custom class to element