mobile – XTRA Tutorials

Search Form & Account Icon Above Mobile Menu

XTRA — Tue, 29 Jul 2025 12:00:18 +0000

Displaying Search and Account Icons Above the Mobile Menu

Step 1

XTRA

You can now place a search form and user account icon directly above the off-canvas mobile menu. This layout improves accessibility by giving mobile users quick access to search and login functionalities.

You can access the settings at:

Theme Options > Header > Mobile Header > Above Menu

When enabled, your mobile menu will display a clean search bar along with an optional account/login icon. This setup is especially useful for eCommerce sites, blogs, and content-rich websites where fast navigation matters.

This user interface adjustment enhances the mobile experience by streamlining interactions and improving overall usability on small screens.

How to add/remove Expandable Menus for Fixed Mobile Navigation?

XTRA — Sun, 27 Jul 2025 10:11:39 +0000

Expandable Menus for Fixed Mobile Navigation

Step 1

XTRA

Expandable menus in the mobile fixed navigation area allow you to create cleaner and more dynamic mobile menus, improving both usability and design. This feature is especially useful for websites with multi-level menus or extensive product categories, as it helps organize submenus in a sleek, expandable format.

Where to find it?
Theme Options > Header > Mobile Fixed Navigation > Expandable Menu

How to change mobile menu copyright text?

XTRA — Tue, 17 Sep 2024 09:31:32 +0000

Enable/Disable Copyright in Mobile Menu

Step 1

Xtra

In our WordPress theme, there is an option to display the Copyright along with the year in the mobile menu. This tutorial explains how to edit or remove this copyright text.

Go to Theme Options > Header > Mobile Header > Mobile Menu Additional > Custom Text

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.

How to Reverse Columns on Mobile Using Elementor: Step-by-Step Guide

XTRA — Sun, 08 Sep 2024 08:24:40 +0000

Description and Screenshot

Step 1

XTRA

Reversing columns in Elementor on mobile devices

In the latest versions of Elementor, with the introduction of Flexbox and Container, managing column order on mobile has become much easier and more flexible. In this tutorial, we have explained how to reverse columns for mobile display.

Edit the desired page using the “Edit with Elementor” option.

Use the Navigator to select the section containing the column.
Switch the editor mode to mobile from the black toolbar at the top of the page.
Go to the Layout tab > Items > Set the “Column-reversed”.

How to Enable PWA (Progressive Web App) on Your Website?

XTRA — Mon, 19 Aug 2024 07:52:05 +0000

Description and Screenshot

Step 1

XTRA

Progressive Web App

A progressive web app (PWA) is an app that’s built using web platform technologies, but that provides a user experience like that of a platform-specific app.

You can activate this feature in the WordPress ٓXtra Theme from the following path :
Theme Options > General > Progressive Web App.

To enable or disable PWA
Set an icon for PWA
write title for PWA
write description for PWA
Considering the name for PWA
Considering the short name for PWA
Considering the description for PWA
Set a color for app theme
Set a color for app background
Set a custom cookie

How to Add or Remove Items from Mobile Fixed Navigation

XTRA — Sun, 18 Aug 2024 11:39:22 +0000

Description and Screenshot

Step 1

XTRA

Mobile Fixed Navigation

You can edit the Mobile Fixed Navigation in the WordPress Xtra form from the following path:

Theme Options > Header > Mobile Fixed Navigation.

Theme Options: Mobile Header

XTRA — Tue, 25 Jun 2024 11:49:59 +0000

Description and Screenshot

Step 1

XTRA

Mobile Header settings

Under Theme Options > Header > Mobile Header you can find mobile header elements, settings and StyleKits.

Sticky mode – Enable/disable sticky mode for mobile header
Content Before Header – Create custom page and assign its content before header
Content After Header – Create custom page and assign its content after header
Add Elements – Add or remove new custom elements for mobile header
Menu StyleKits – You can customize menu styling for mobile header
Mobile Menu Social – Enable/disable mobile OffCanvas menu social icons
Mobile Menu Text – Add custom text below social icons in mobile OffCanvas menu
Additional StyleKits – Customize social icons and text in mobile OffCanvas menu

Tips

You may want to know …

Mobile Menu – You can create custom menu from Appearance > Menus and assign its location to mobile, then in mobile header elements you can set location to mobile menu.
Content Before/After – From Dashboard > Pages you can create a custom page and then in mobile header setting select it before or after header and theme will show that page content in mobile only.

codevz/after_header_4

XTRA — Tue, 18 Jun 2024 11:39:50 +0000

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 mobile and tablet header.

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.

codevz/before_header_4

XTRA — Tue, 18 Jun 2024 11:36:30 +0000

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 mobile and tablet header.

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.

How to Reverse WPBakery Columns on Mobile Devices?

XTRA — Tue, 04 Jun 2024 14:56:44 +0000

Responsive

Step 1

Step01

WPBakery

Unfortunately, WPBakery doesn’t come with the option to reverse columns on mobile to make better responsive orders of content. However, by adding some simple CSS you can achieve this effect using CSS’s flexbox.

To get the reverse columns working:

Add the reverse-col-on-mobile CSS class to the row you want to have columns reversed
Add the CSS below into your themes additional CSS on Theme Options > Additional CSS

@media only screen and (max-width: 769px) {
	.reverse-col-on-mobile {
		display: flex !important;
		flex-direction: column-reverse;
	}
}