responsive – XTRA Tutorials https://xtratheme.com/docs Documentation of XTRA WordPress Theme Fri, 20 Sep 2024 17:32:20 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.2 How to change mobile menu copyright text? https://xtratheme.com/docs/how-to/how-to-change-mobile-menu-copyright-text/ https://xtratheme.com/docs/how-to/how-to-change-mobile-menu-copyright-text/#respond Tue, 17 Sep 2024 09:31:32 +0000 https://xtratheme.com/docs/?p=4258

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

Copy mobil
]]>
https://xtratheme.com/docs/how-to/how-to-change-mobile-menu-copyright-text/feed/ 0
How to Control Element Visibility on Desktop, Mobile, and Tablet in WPBakery? https://xtratheme.com/docs/page-builder/how-to-control-element-visibility-on-desktop-mobile-and-tablet-in-wpbakery/ https://xtratheme.com/docs/page-builder/how-to-control-element-visibility-on-desktop-mobile-and-tablet-in-wpbakery/#respond Mon, 09 Sep 2024 13:24:00 +0000 https://xtratheme.com/docs/?p=4133

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.

Wc1
Wc2
Vc4
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.

]]>
https://xtratheme.com/docs/page-builder/how-to-control-element-visibility-on-desktop-mobile-and-tablet-in-wpbakery/feed/ 0
How to Show or Hide Elements on Desktop, Mobile, and Tablet in Elementor? https://xtratheme.com/docs/page-builder/how-to-show-or-hide-elements-on-desktop-mobile-and-tablet-in-elementor/ https://xtratheme.com/docs/page-builder/how-to-show-or-hide-elements-on-desktop-mobile-and-tablet-in-elementor/#respond Mon, 09 Sep 2024 12:21:56 +0000 https://xtratheme.com/docs/?p=4119

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.

Elem1
Ele2 3
Elen4 5
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.

]]>
https://xtratheme.com/docs/page-builder/how-to-show-or-hide-elements-on-desktop-mobile-and-tablet-in-elementor/feed/ 0
How to Reverse Columns on Mobile Using Elementor: Step-by-Step Guide https://xtratheme.com/docs/how-to/how-to-reverse-columns-on-mobile-using-elementor-step-by-step-guide/ https://xtratheme.com/docs/how-to/how-to-reverse-columns-on-mobile-using-elementor-step-by-step-guide/#respond Sun, 08 Sep 2024 08:24:40 +0000 https://xtratheme.com/docs/?p=4077

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.

  1. Use the Navigator to select the section containing the column.
  2. Switch the editor mode to mobile from the black toolbar at the top of the page.
  3. Go to the Layout tab > Items > Set the “Column-reversed”.
Reserved mo
]]>
https://xtratheme.com/docs/how-to/how-to-reverse-columns-on-mobile-using-elementor-step-by-step-guide/feed/ 0
How to Fix a Missing Mobile Menu? https://xtratheme.com/docs/how-to/how-to-fix-a-missing-mobile-menu/ https://xtratheme.com/docs/how-to/how-to-fix-a-missing-mobile-menu/#respond Mon, 26 Aug 2024 09:32:39 +0000 https://xtratheme.com/docs/?p=3655

Description and Screenshot

Step 1
XTRA

Solving the problem of not displaying the mobile menu

If the mobile menu is not displayed, it is necessary to check the following two paths according to the screenshot, so that the mobile menu is checked.

First, check that the mobile menu is selected in the menu list from the :
Theme options > Header > Mobile Header ,
and then check that you have selected a header for mobile from the:
Dashboard > Appearance > Menus > Menu Settings > Display location > Mobile .

Mobil menu1
Men2
]]>
https://xtratheme.com/docs/how-to/how-to-fix-a-missing-mobile-menu/feed/ 0
How to Enable PWA (Progressive Web App) on Your Website? https://xtratheme.com/docs/how-to/how-to-enable-pwa-progressive-web-app-on-your-website/ https://xtratheme.com/docs/how-to/how-to-enable-pwa-progressive-web-app-on-your-website/#respond Mon, 19 Aug 2024 07:52:05 +0000 https://xtratheme.com/docs/?p=3530

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.

  1. To enable or disable PWA
  2. Set an icon for PWA
  3. write title for PWA
  4. write description for PWA
  5. Considering the name for PWA
  6. Considering the short name for PWA
  7. Considering the description for PWA
  8. Set a color for app theme
  9. Set a color for app background
  10. Set a custom cookie



Pwa
Pwa2
]]>
https://xtratheme.com/docs/how-to/how-to-enable-pwa-progressive-web-app-on-your-website/feed/ 0
How to Add or Remove Items from Mobile Fixed Navigation https://xtratheme.com/docs/how-to/how-to-add-or-remove-items-from-mobile-fixed-navigation/ https://xtratheme.com/docs/how-to/how-to-add-or-remove-items-from-mobile-fixed-navigation/#respond Sun, 18 Aug 2024 11:39:22 +0000 https://xtratheme.com/docs/?p=3520

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.

Mobile fix
]]>
https://xtratheme.com/docs/how-to/how-to-add-or-remove-items-from-mobile-fixed-navigation/feed/ 0
Theme Options: Mobile Header https://xtratheme.com/docs/theme-options/theme-options-mobile-header/ https://xtratheme.com/docs/theme-options/theme-options-mobile-header/#respond Tue, 25 Jun 2024 11:49:59 +0000 https://xtratheme.com/docs/?p=1859

Description and Screenshot

Step 1
XTRA

Mobile Header settings

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

  1. Sticky mode – Enable/disable sticky mode for mobile header
  2. Content Before Header – Create custom page and assign its content before header
  3. Content After Header – Create custom page and assign its content after header
  4. Add Elements – Add or remove new custom elements for mobile header
  5. Menu StyleKits – You can customize menu styling for mobile header
  6. Mobile Menu Social – Enable/disable mobile OffCanvas menu social icons
  7. Mobile Menu Text – Add custom text below social icons in mobile OffCanvas menu
  8. Additional StyleKits – Customize social icons and text in mobile OffCanvas menu
Theme options mobile header
Theme options mobile header 2
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.
]]>
https://xtratheme.com/docs/theme-options/theme-options-mobile-header/feed/ 0