post – XTRA Tutorials https://xtratheme.com/docs Documentation of XTRA WordPress Theme Sun, 23 Feb 2025 10:09:10 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.2 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
Theme Options: Blog Single Styling https://xtratheme.com/docs/theme-options/theme-options-blog-single-styling/ https://xtratheme.com/docs/theme-options/theme-options-blog-single-styling/#respond Thu, 27 Jun 2024 07:19:47 +0000 https://xtratheme.com/docs/?p=1951

Description and Screenshot

Step 1
XTRA

Blog Single Styling settings

Under Theme Options > Blog > Single Styling you can find and manage your blog single post styling, next and previous posts styling, Related posts and comments styling.

  1. Single Post Styling – Customize single post parts styling image, title, meta and icons.
  2. Next & Previous Posts – Customize Icon, Title and Subtitles of next & previous
  3. Related Posts and Comments – Customize design of related posts and comments
Theme options blog single styling
Theme options blog single styling 2
Tips

You may want to know …

  • Enable/Disable Features – If you can’t see or find some parts of single post, then go to Theme Options > Blog > Single Settings and enable them
]]>
https://xtratheme.com/docs/theme-options/theme-options-blog-single-styling/feed/ 0
Theme Options: Blog Single Settings https://xtratheme.com/docs/theme-options/theme-options-blog-single-settings/ https://xtratheme.com/docs/theme-options/theme-options-blog-single-settings/#respond Thu, 27 Jun 2024 07:00:44 +0000 https://xtratheme.com/docs/?p=1942

Description and Screenshot

Step 1
XTRA

Blog Single settings

Under Theme Options > Blog > Single Settings you can find and manage your blog single post settings, sidebar position, translations, meta settings, etc..

  1. Sidebar – You can choose sidebar position for all single posts
  2. Single Post – Manage single post parts, image, date, categories, etc.
  3. Prev Post Sur Title – Translation of the previous post item sur title
  4. Next Post Sur Title – Translation of the next post item sur title
  5. Related Posts – Set number of related posts section after single post
  6. Related Columns – Related posts section number of columns
  7. No Comment title – Translation of comments when there is no comments
  8. Comment Title – Translation of comments section title when it does 1 comment
  9. Comments Title – Translation of comments section when it does more than 1 comment
Theme options blog single settings 1
Theme options blog single settings 2
Tips

You may want to know …

  • Related Posts Grid – For e.g. you can set related posts count to 9 and set related columns to 3 columns to have a grid related posts section
]]>
https://xtratheme.com/docs/theme-options/theme-options-blog-single-settings/feed/ 0
Theme Options: Blog Settings https://xtratheme.com/docs/theme-options/theme-options-blog-settings/ https://xtratheme.com/docs/theme-options/theme-options-blog-settings/#respond Wed, 26 Jun 2024 09:30:38 +0000 https://xtratheme.com/docs/?p=1921

Description and Screenshot

Step 1
XTRA

Blog Posts settings

Under Theme Options > Blog > Blog Settings you can find and manage your blog posts settings, template, excerpt length, excerpt type, etc..

  1. Sidebar – Choose sidebar position for archive and single blog pages
  2. Template – Choose archive blog posts template
  3. Hover Icon – Will show icon on mouse hover over posts image
  4. Excerpt Length – Limit characters or words for post description
  5. Excerpt Type – You can change excerpt length type by characters or words
  6. Excerpt Dots – Post excerpt continue, default is three dots
  7. 2x Height Image – Will change post featured image height size 2x bigger
  8. Read More – Translation for read more button title
  9. Not Found Message – Translation for posts not found messages
  10. Comments Disable Message – Translation of when comments are disabled
Theme options blog posts
Theme options blog posts settings
Tips

You may want to know …

  • Custom Template – If you create a custom page from Dashboard > Pages and insert Posts Grid element inside it and publish, then from Blog settings you can set it as custom blog page.
Blog1
]]>
https://xtratheme.com/docs/theme-options/theme-options-blog-settings/feed/ 0
Element: Posts Grid https://xtratheme.com/docs/page-builder/element-posts-grid/ https://xtratheme.com/docs/page-builder/element-posts-grid/#respond Mon, 17 Jun 2024 09:38:26 +0000 https://xtratheme.com/docs/?p=1564

Video Tutorial

Description and Screenshot

Step 1

Display blog or other post types posts as Grid | Masonry | Metro styles anywhere you want. Fully customizable and filterable.

Posts_grid
  • Layout – Gallery templates, There are more than 20 gallery styles
  • Posts gap – Custom margin / gap between gallery images
  • Posts count – Number of posts to display
  • Posts details style – Choose hover style of icon, title and caption of images
  • Icon – Select icon, this will show on post hover
  • Intro animation – Custom animation for loading images on first load
  • Meta position? – Meta position before posts title or after title or excerpt
  • Details align – Title and caption position on image or after image
  • Hover visibility – Hover details and icon visibility mode, Show on hover or keep showing
  • Hover effect – Custom CSS hover effect for icon, title and caption
  • Hover image effect – Custom image effect on mouse hover
  • Ideal height – If you set layout 1, So you can set custom ideal height for images
  • All posts Styling – Overall styling background, border, shadow, etc.
  • Images Styling – Styling for images only, border, shadow, etc.
  • Overlay scale – Gallery items have overaly color on hover, You can change scale size of it
  • Overlay Styling – You can change overlay hover color or add custom border
  • Icon Styling – Style icon on hover with color, size, background, etc.
  • Title Styling – Images title styling such as color, font family, size, etc.
  • Posts Meta – Posts meta below title such as date | category | tag | author name | custom text
  • Meta Styling – Meta details styling color, size, typography, etc.
  • Meta Icons Styling – If your meta details have icon, you can styling color, size, etc. of icons
  • Exceprt words lenght – Number of words to show for the post content
  • Excerpt Styling – Post description styling color, size, background, etc.
  • Read more button – Do you want to show read more button under post description?
  • Pagination Type – Pagination type Load more | Infinity | Numbers | Old prev/next
  • Pagination Position – Pagination position left | center | right
  • Pagination Title – Load more button title
  • Pagination End Message – Show this messsage on button when last post reached
  • Pagination Posts count – Number of posts you want to show after each load more button clicked
  • Pagination Load more Styling – Button styling color, background, border, etc.
  • Pagination Active mode Styling – Button border color while animation
  • Choose Filters – You can find and select category or tag for posts filters, this will show above posts.
  • Filter Position – If you set linkable gallery and add class for each items, Then you can have filters.
  • Filter Show all – Translation of Show All button in gallery filters
  • Filter Container Styling – Styling of overall filters container
  • Filter Filters Styling – Each filter styling color, background, size, etc.
  • Filter Active filter Styling – Activated filter styling colo, background, etc.
  • Filter Filters Delimiter Styling – You can add delimiter between filters, Any charachters allowed
  • Query Post Type – Select post type name
  • Query Order – Show posts in reverse mode or default
  • Query Orderby – Filter posts order by date | id | title | random | etc
  • Query Category Taxonomy – Name of category taxonomy for current post type
  • Query Category(s) – Type and select your category(s)
  • Tags Taxonomy – Name of tag taxonomy for current post type
  • Query Tag(s) – Type and select your tag(s
  • Query Search keyword – You can filter posts by specific keyword, Posts will shows only contains this keyword
  • Query Filter by ID(s) – If you want to show specific posts, then add posts IDs and separate by comma
  • Carousel SettingsSame as Carousel Settings
  • Cursor image – You can set custom cursor on images hover
  • Cursor Size and Position – If you set custom cursor, then you can select best size for it
  • Advanced tab – Responsive, Animation, Parallax, etc.
]]>
https://xtratheme.com/docs/page-builder/element-posts-grid/feed/ 0
Post Formats in WordPress Themes: A Complete Guide https://xtratheme.com/docs/page-builder/post-formats-in-wordpress-themes-a-complete-guide/ https://xtratheme.com/docs/page-builder/post-formats-in-wordpress-themes-a-complete-guide/#respond Wed, 12 Jun 2024 09:44:09 +0000 https://xtratheme.com/docs/?p=1282

Post Format Settings

Step 1
Intro

Settings Overview

In XTRA WordPress theme you can change post format for any posts, There are Gallery, Audio, Video, Slider, Quote and Standard post formats. Each post formats have separate options.

  1. Standard
  2. Gallery
  3. Video
  4. Audio
  5. Quote
Post formats
Part01

Standard

Standard is the default post format in WordPress. It can be an article, a blog post, or anything the user want it to be. A standard post can also be any of the other post formats as well. For example, a standard post can have a gallery or a video. The user can decide whether they want to use their theme’s built in support for the formatting and display of a particular post format or they would rather use the standard post format.

Part02

Gallery and Carousel slider

An image gallery in WordPress can be inserted using the Add Media button and then clicking on “Create Gallery” tab. Gallery feature allows you to add multiple images in a WordPress post, gallery post format have following options:

  1. Gallery type
  2. Upload gallery images
  3. Gallery layout type
  4. Gallery gap
Gallery post format
Part03

Video format

A post in video post format usually contains a video either embedded from a third party video hosting service like YouTube or uploaded and played directly from WordPress. Since WordPress version 3.6 there is support for native video upload and playback.

  1. Post format type
  2. Video type
  3. Video URL or upload video file
Post format video
Part04

Music player format

A post with the audio post type usually contains an audio file embeded from a third party hosting service or uploaded directly through WordPress media uploader.

  1. Post format type
  2. Audio URL or upload audio file
Audio post format
Part05

Quote format

Quote is one of the post formats supported by WordPress. It is used for quotations, specially when a user wants to just share a quote which is not within a standard post or article. A user may decide to add or to wrap a quote around blockquote HTML tag.

  1. Post format type
  2. Quote content
  3. Cite name
Post format quote
]]>
https://xtratheme.com/docs/page-builder/post-formats-in-wordpress-themes-a-complete-guide/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
How to Change the Post Date Format on Your WordPress Website? https://xtratheme.com/docs/how-to/how-to-change-the-post-date-format-on-your-wordpress-website/ https://xtratheme.com/docs/how-to/how-to-change-the-post-date-format-on-your-wordpress-website/#respond Tue, 11 Jun 2024 10:00:27 +0000 https://xtratheme.com/docs/?p=2430

Description and Steps

Step 1
XTRA

Custom date format for posts

To change all posts date and time format, Go to Dashboard > Settings > General and find Date and Time Format settings.

Time
Tips

You may want to know …

  • Custom Format  – In official PHP website you can find out all the date and time formats, Click here, Or by searching in google you can find date formats.
]]>
https://xtratheme.com/docs/how-to/how-to-change-the-post-date-format-on-your-wordpress-website/feed/ 0