page – XTRA Tutorials https://xtratheme.com/docs Documentation of XTRA WordPress Theme Wed, 18 Sep 2024 07:36:48 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.2 How to Create a Custom Sidebar and Assign It to Individual Pages in Theme? https://xtratheme.com/docs/how-to/how-to-create-a-custom-sidebar-and-assign-it-to-individual-pages-in-theme/ https://xtratheme.com/docs/how-to/how-to-create-a-custom-sidebar-and-assign-it-to-individual-pages-in-theme/#respond Sun, 15 Sep 2024 13:49:29 +0000 https://xtratheme.com/docs/?p=4178

Create a New Sidebar with Widgets for a Page

Step 1
Step01

Create a New Sidebar

First, create your desired custom sidebar. You can create a new sidebar through the following path.

Go to Dashboard > Appearance > Widgets > Add Custom Sidebar > Select a Name > Save.

Sidebar

Then add some widgets to Sidebar

Side2
Step02

Add a New Sidebar to a Page

Go to Dashboard > Post/Page > Page Settings > General Settings >
Sidebar ( select a type of sidebar) > Primary Sidebar > Select the Sidebar.

Sidebar3
]]>
https://xtratheme.com/docs/how-to/how-to-create-a-custom-sidebar-and-assign-it-to-individual-pages-in-theme/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 Import a Single Page from Another Demo? https://xtratheme.com/docs/how-to/how-to-import-a-single-page-from-another-demo/ https://xtratheme.com/docs/how-to/how-to-import-a-single-page-from-another-demo/#respond Sun, 18 Aug 2024 10:08:01 +0000 https://xtratheme.com/docs/?p=3506

Description and Screenshot

Step 1
XTRA

Import only one page from another demo

In the WordPress Xtra theme, you can import just one page, post, portfolio from a demo that you like.

The path is Dashboard > Xtra > Page Importer.

Import
]]>
https://xtratheme.com/docs/how-to/how-to-import-a-single-page-from-another-demo/feed/ 0
How to Duplicate Posts, Pages, and Widgets? https://xtratheme.com/docs/how-to/how-to-duplicate-posts-pages-and-widgets/ https://xtratheme.com/docs/how-to/how-to-duplicate-posts-pages-and-widgets/#respond Sat, 17 Aug 2024 09:58:45 +0000 https://xtratheme.com/docs/?p=3490

Description and Screenshot

Step 1
XTRA

Duplicate any posts, pages, categories and widgets

You can duplicate all kinds of categories,posts, pages, and widgets, and just go to the desired path and click on duplicate. We have shown this in the screenshot of the guide below.

Duplicate
Widg dupli
Cat
]]>
https://xtratheme.com/docs/how-to/how-to-duplicate-posts-pages-and-widgets/feed/ 0
codevz/page/after_title https://xtratheme.com/docs/developer/codevz-page-after_title/ https://xtratheme.com/docs/developer/codevz-page-after_title/#respond Tue, 18 Jun 2024 08:31:31 +0000 https://xtratheme.com/docs/?p=2920

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 title section.

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-page-after_title/feed/ 0
codevz/page/before_title https://xtratheme.com/docs/developer/codevz-page-before_title/ https://xtratheme.com/docs/developer/codevz-page-before_title/#respond Tue, 18 Jun 2024 08:28:20 +0000 https://xtratheme.com/docs/?p=2917

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 title section.

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-page-before_title/feed/ 0
Elements Overview https://xtratheme.com/docs/page-builder/elements-overview/ https://xtratheme.com/docs/page-builder/elements-overview/#respond Thu, 13 Jun 2024 09:34:50 +0000 https://xtratheme.com/docs/?p=1335

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.

Page builder xtra theme elements
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.

  1. Hide on Desktop? – Hide element only on desktop
  2. Hide on Tablet? – Hide element only on tablet
  3. Hide on Mobile? – Hide element only on mobile
  4. Parallax – Make this element moveable on scroll
  5. Parallax speed – Parallax movement speed on scroll
  6. Mouse speed – Movement speed on mouse move
  7. Tilt effect – Parallax on hover tilt effect
  8. Tilt Glare – Glare effect on mouse hover
  9. Tilt Scale – Scale effect on mouse hover
  10. CSS Animation – Show element on page scroll
  11. Animation Delay – Animation delay time in milliseconds
  12. Extra Class – Allows you to add custom class to element
Element common advanced settings
]]>
https://xtratheme.com/docs/page-builder/elements-overview/feed/ 0
Page SEO Settings in Xtra WordPress Theme: A Comprehensive Guide https://xtratheme.com/docs/page-builder/page-seo-settings-in-xtra-wordpress-theme-a-comprehensive-guide/ https://xtratheme.com/docs/page-builder/page-seo-settings-in-xtra-wordpress-theme-a-comprehensive-guide/#respond Wed, 12 Jun 2024 09:05:16 +0000 https://xtratheme.com/docs/?p=1275

Page SEO Settings

Step 1
Intro

Settings Overview

In XTRA WordPress theme you can change some important settings in specific custom pages, for example if you want to change SEO meta tags in specific page, you can do it in any page settings section. Also theme is fully compatible with any SEO plugins such as Yoast WP Plugin.

Page seo settings
Part01

SEO Description

The meta description is a snippet of up to about 155 characters, a tag in HTML that summarizes a page’s content. Search engines show it in search results mostly when the searched for phrase is within the description. So optimizing it is crucial for on page SEO.

Part02

SEO Keywords

Meta Keywords are a specific type of meta tag that appear in the HTML code of a Web page and help tell search engines what the topic of the page is. Meta keywords are distinguished from regular keywords because they appear “behind the scenes”, in the source code of your page, rather than on the live, visible page itself.

]]>
https://xtratheme.com/docs/page-builder/page-seo-settings-in-xtra-wordpress-theme-a-comprehensive-guide/feed/ 0
How to Import a Specific Page from Any Demo? https://xtratheme.com/docs/how-to/how-to-import-a-specific-page-from-any-demo/ https://xtratheme.com/docs/how-to/how-to-import-a-specific-page-from-any-demo/#respond Wed, 12 Jun 2024 08:14:56 +0000 https://xtratheme.com/docs/?p=2810

Page Import Requirements

Step 1
Step01

Theme Activation

For importing the specific page of any demos you should first activate your theme with a valid purchase code.

Step02

Which Page Builder?

Before importing any page you should choose a correct demo compatible with your page builder, Xtra has a two page builders: Elementor & WPBakery

If you see elementor in the page URL, it is a Elementor version of that page, for e.g.

https://xtratheme.com/elementor/business-3/about/
https://xtratheme.com/arabic-elementor/medical/faq/
Step03

Import Page

Copy the URL of your wanted page from xtratheme.com (make sure that you are on right place, URL must contains xtratheme.com)

Page import url

Paste it in Dashboard > Xtra > Page Importer

For e.g. we want to import this page:

https://xtratheme.com/elementor/factory-2/about-us/
Page import

Click on import and wait for result

Page import 2

Page imported to your pages successfully and you can find it in your pages list.

Page import 3

Warning

The demo page you want to import may have a second color, To avoid the color problem, set a second color for your site from Theme Options > General > Colors
]]>
https://xtratheme.com/docs/how-to/how-to-import-a-specific-page-from-any-demo/feed/ 0
How to Edit Pages with Elementor Page Builder? https://xtratheme.com/docs/how-to/how-to-edit-pages-with-elementor-page-builder/ https://xtratheme.com/docs/how-to/how-to-edit-pages-with-elementor-page-builder/#respond Tue, 11 Jun 2024 10:43:41 +0000 https://xtratheme.com/docs/?p=2804

How to use Elementor?

Step 1
Step01

Requirement

You can go to Pages > All Pages and if you see Elementor after some pages it means that you are imported the Elementor version of the demo website.

Pages elementor
Step02

How to edit with Elementor?

All pages created by Elementor have an “Edit with Elementor” link on all pages.

You can click on it and go to the Elementor page builder page to edit this page.

Pages elementor edit

Also on the front page, you have the “Edit with Elementor” button on the Admin bar, click on it to edit that page with Elementor.

Pages elementor3
]]>
https://xtratheme.com/docs/how-to/how-to-edit-pages-with-elementor-page-builder/feed/ 0
codevz/page/meta https://xtratheme.com/docs/developer/codevz-page-meta/ https://xtratheme.com/docs/developer/codevz-page-meta/#respond Tue, 11 Jun 2024 07:47:51 +0000 https://xtratheme.com/docs/?p=2755

Example code

Step 1
XTRA

Using WordPress filter to modify any page meta values

In the following example you can see how to change page layout to left.

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.

XTRA

How to find any page meta settings key?

In the below screenshot, you can see how to find hide header page meta key. First edit your page in backend then find your option and then open your browser inspect element feature to find the input name or data-depent-id attribute. Exactly like below shot you can find key. For hide header key is hide_header

How to find page meta key settings min
]]>
https://xtratheme.com/docs/developer/codevz-page-meta/feed/ 0
Page Header Settings https://xtratheme.com/docs/page-builder/page-header-settings/ https://xtratheme.com/docs/page-builder/page-header-settings/#respond Sun, 09 Jun 2024 09:13:39 +0000 https://xtratheme.com/docs/?p=1250

Page Header Settings

Step 1
Intro

Settings Overview

In XTRA WordPress theme you can change some important settings in specific custom pages, for example if you want to have page with or without sidebar, you can edit page and change its settings and settings will only affect on that specific page. You can change page header position, header type, header background, title background, etc.

Page header settings
Part01

Header Position

You can change header position in specific page, Available options:

  1. Default position
  2. Header and title bar
  3. Title bar and header
  4. Header overlay on desktop
  5. Header overlay on tablet
  6. Header overlay on mobile
Header position
Part02

Page Title Type

You can change title type for specific page, set slider, custom image, shortcode or set custom page content, available options:

  1. Default type
  2. Disable title bar
  3. Title and Breadcrumbs
  4. Revolution Slider
  5. Custom Image
  6. Custom Shortocde
  7. Custom page content
Title type
Part03

Title bar color and styling

You can change title bar background, color, border and all Styling related to Title and Background for specific page.

Title bar styling page
Part04

Page header styling

If you wish to change specific custom page header styling, then you can do it in any page settings header section.

  1. Header top bar
  2. Main Header
  3. Header bottom bar
Page header styling
Part05

Overal header StyleKit

If you want to change background image or color of overall header section, you can do it with this StyleKit.

Part06

Fixed side StyleKit

If your site have fixed side enabled, then you can change fixed side styling for specific page. For e.g. change background color, width, border, etc.

]]>
https://xtratheme.com/docs/page-builder/page-header-settings/feed/ 0
Page General Settings https://xtratheme.com/docs/page-builder/page-general-settings/ https://xtratheme.com/docs/page-builder/page-general-settings/#respond Sat, 08 Jun 2024 05:51:33 +0000 https://xtratheme.com/docs/?p=1191

Page General Settings

Step 1
Intro

Settings Overview

In XTRA WordPress theme you can change some important settings in specific custom pages, for example if you want to have page with or without sidebar, you can edit page and change its settings and settings will only affect on that specific page. You can change page background, hide header or footer, change header colors, etc.

Page general settings
Part01

General Settings Tab

Under general settings tab you can see general page settings, Available settings:

  1. Sidebar position
  2. Page content gap
  3. Page background
  4. Hide header
  5. Hide footer
  6. Featured image / Menu location
Part02

Sidebar Position

You can change sidebar and page content position for specific page, Sidebar position option have multiple different types, Left and Right and even both sides. Available Positions:

  1. No Sidebar
  2. Content Center
  3. Sidebar Left
  4. Sidebar Right
  5. Sidebar Small
  6. Sidebar Both sides
Sidebar position page
Part03

Page Content Gap

If you want to remove page content gap between header, content and footer only on one specific page, you can try this option setting.

Page setting content gap
Part04

Page Background

If you wish to change specific custom page background, in XTRA theme you can do it, Available options:

  1. Background Color
  2. Background Gradient Color
  3. Background Image
  4. Background Color Overlay
  5. Background Position
Page background
Part05

Hide Header

If you want hide header in specific page, then you can do it via page settings. It only affect on specific page and not all website.

Part06

Hide Footer

If you want hide footer in specific page, then you can do it via page settings. It only affect on specific page and not all website.

Step07

Last General Setting

In single posts, you can hide featured image in specific post and in Single page, you can change menu navigation location.

]]>
https://xtratheme.com/docs/page-builder/page-general-settings/feed/ 0
How to Create a New Page on Your WordPress Website? https://xtratheme.com/docs/page-builder/how-to-create-a-new-page/ https://xtratheme.com/docs/page-builder/how-to-create-a-new-page/#respond Sat, 08 Jun 2024 01:05:51 +0000 https://xtratheme.com/docs/?p=1299

Create a new custom page

Step 1
Step01

Start creating a new custom page

To get started adding a new page to your WordPress site, find the Pages menu in the WordPress Dashboard Navigation menu. Click Add New.

  1. Go to Dashboard > Pages
  2. Click on Add New button
Create wp custom page
Part02

WordPress page editor

You’ll now see the WordPress page editor. WordPress 5.0 introduced an entirely new editor with a new approach to adding content to your new page called the WordPress Block Editor. In the WordPress editor, each paragraph, image, or video is presented as a distinct “block” of content.

Create a custom page 2
Part03

Switch page editor to WPBakery page builder

Now you must set page title and publish page, then switch page editor to WPBakery page builder for continue.

  1. Enter page title
  2. Publish or update page
  3. Switch to WPBakery page builder
Switch to wpbakery page builder
Part04

Page builder backend editor

Click on Backend Editor button then you will see page builder welcome screen like following preview image, by clicking on Add Element you can see list of all the available elements.

Wpbakery page builder backend editor
Part05

Elements overview

\WPBakery Page Builder comes pre-packed with 50+ content elements allowing you to create pages and posts within minutes by simply dragging and dropping elements into your WordPress website, Also XTRA theme added 49+ premium elements that exclusively designed and developed for XTRA theme.

Page builder xtra theme elements
Part06

Example: Add button element

Find Button element and click on it, Now you can see button element has been added to page builder editor and you can see button settings modal box, So make your changes and click on save button. Now update page and see your page live.

Page builder button elements
Part07

WPBakery frontend page builder

Edit your page with WPBakery page builder frontend, or edit your page in backend and click on Frontend Editor button to see live page builder.

  1. WPBakery Logo and Loader
  2. Add Element(s) to page builder
  3. Add custom premade template
  4. See live without edit icons
  5. Page settings and Custom CSS
  6. Responsive modes
  7. Switch into backend editor
  8. Update page changes
  9. Close page builder
  10. Add elements
  11. Add text block element
  12. Add custom premade template
Front1
Front2
Part07

Add new Row and Element

After adding row or element, you can see something like below screenshot, You can edit row, duplicate or change layout, edit column, edit element, etc.

  1. Edit Row
  2. Change row columns layout
  3. Add new column to row
  4. Duplicate row
  5. Remove row
  6. Columns settings
  7. Edit element
  8. Duplicate element
  9. Remove element
  10. Add new element under others
  11. Element settings modal box
Row column element edit icons
]]>
https://xtratheme.com/docs/page-builder/how-to-create-a-new-page/feed/ 0