help center

On this page

Show and hide elements on a page (Display Conditions)

Last Update: March 11, 2024

Display Conditions allow you to show elements to specific visitors, thus hiding them from others, depending on various criteria . Some examples of this might be:

  • A blog where you want different images to appear depending on the author of the post.
  • A homepage where you want the Header content to change depending on the season.
  • Including a Limited Time Offer banner on specified categories of products. 
Note
Display conditions are an experimental feature and must be activated to be used. To learn about activating experimental features, see What are Elementor experimental features?

Apply display conditions

To apply display conditions:

  1. Select the element you want to apply display conditions to.
    image 31 Show and hide elements on a page (Display Conditions) 1
    The element options will appear in the panel.
    image 32 Show and hide elements on a page (Display Conditions) 3
  2. In the panel, click the Advanced tab.
    image 33 Show and hide elements on a page (Display Conditions) 5
  3. In the Layout section, click the Display Conditions icon.
    image 34 Show and hide elements on a page (Display Conditions) 7
  4. Click Add Condition. Three dropdown menus appear, allowing you to create a display condition.
    image 35 Show and hide elements on a page (Display Conditions) 9
  5. From the dropdown menus, select the desired display conditions.
    Depending on the chosen condition, the content of the dropdown menus will change.  Fill out the condition’s additional dropdowns. For a detailed explanation of the display conditions, see Available display conditions below. 
    image 36 Show and hide elements on a page (Display Conditions) 11
  6. Click Save & Close.
    Note
    Your display conditions will not take effect until you either Save or Publish the page in the Editor. If you exit the page without saving the display conditions you chose will not be implemented.

    image 37 Show and hide elements on a page (Display Conditions) 13

For most conditions, you can set more than one value. For example, you can create an Author  condition that an element will appear only when the Author is either Alex, Francis or Jaime. 

Best Practice
In general, it’s more effective to use display conditions within a template as seen in the examples mentioned below. Otherwise, you will have to apply conditions individually for each instance.
.

Add additional display conditions

You may want to add more than one display condition. For example, you may want a post to appear if it is categorized as both Vegan and Top Pick. When setting up display conditions, you have two choices: AND or OR. If you select AND, Elementor will only show the element if all conditions are met. If you choose OR, the element will be displayed if it meets any one of the conditions. 

To add an AND display condition:

  1. Create a display condition as described above.
    image Show and hide elements on a page (Display Conditions) 15
  2. To the right of the condition, click the AND button.
    image 1 Show and hide elements on a page (Display Conditions) 17
    Another display condition field appears.
    image 2 Show and hide elements on a page (Display Conditions) 19
  3. Use the fields to add a new display condition.  
    image 3 Show and hide elements on a page (Display Conditions) 21
  4. Click Save & Close.
    The element will only display if both conditions are met.

To add an OR condition:

  1. Create a display condition as described above.
    image 4 Show and hide elements on a page (Display Conditions) 23
  2. Under the condition, click Add Condition group.
    image 5 Show and hide elements on a page (Display Conditions) 25
    A new condition field appears with an OR connector.
    image 6 Show and hide elements on a page (Display Conditions) 27
  3. Use the fields to add a new display condition. 
    image 8 Show and hide elements on a page (Display Conditions) 29
  4. When you finish adding conditions, click Save & Close.
    The element will display if either condition is true.

Example

You can combine the two types of conditions (AND and OR). For example, you may want to display either a Top Pick post or a vegan recipe written by Blake Gray.

To do this:

  1. Define the category as Top Pick.
  2. Click Add condition group.
  3. Define author as Blake Grey.
  4. Click AND.
  5. Define Category as Vegan.
    8 Add another condition Show and hide elements on a page (Display Conditions) 31

Available display conditions

For pages 

Display or hide elements according to who wrote the page or where it’s located in the website hierarchy.

Page parentIf you create a website with a hierarchical structure of parent and child pages, you have the option of displaying elements based on their parent page. For example, all pages that are children of the About Us page, can display a company logo.
AuthorEvery page in a WordPress website has an author. You can display elements depending on the author. For example, when creating a single page template, you can create a condition that only pages written by Alex or Jake will display their photos. 

Conditions for posts

Display or hide elements according to who wrote the post, when it was written or how it’s classified.

In CategoriesIn WordPress sites, posts are generally divided by categories. You can display elements depending upon their categorization. For example, when using this condition in a single post template for all of your posts, you can set that all posts in the category of France, can display an image of the Eiffel Tower while all posts in the category of England can display an image of Big Ben.
In TagsIn WordPress sites, posts and products are often given tags to help visitors understand the subject matter. So, for example, if you are using a single product template for all of your products, you can display elements depending on their tags. In a store site, for instance, all products tagged as Specials can have a countdown widget showing how much longer they will be sold at a discount price.
Date ModifiedDisplay elements according to when they were last changed. For example, all posts changed in the last week can be marked, Updated.
Date of PublishDisplay elements in a post according to when the post was published. For example, hide the comments section in posts that were published before a certain date 
AuthorEvery post in WordPress has an author. You can display elements depending on the author. For instance, in a review site, posts written by the movie reviewer can show the video widget while reviews by the restaurant critic can show images.

Conditions according to user status 

Display or hide elements according to the status of the person viewing the page.

Login StatusDisplay elements depending on whether or not the user (someone who has a role in building and/or maintaining the website) or visitor is logged in. For example, showing a discount coupon only to logged in visitors.
RoleDisplay elements according to the role a user (someone who has a role in building and/or maintaining the website) has when working on the site.
Registration DateThe registration date marks the day a user  (someone who has a role in building and/or maintaining the website) was assigned their particular role. For example, if Alex is assigned a role of admin on September 1, 2024, their registration date is September 1, 2024. 

Conditions according to date and time

Display or hide elements according to when the page is viewed.

Note
Currently the display condition determines the date and time by the date and time of the server where the website is located, not by the date and time on the visitor’s device. Future versions will enable you to use the visitor’s date and time to create conditions.
Day of the weekDisplay elements depending on what day of the week it is. For example, you could display a We’re Closed sign on your site over the weekend.
Time of dayDisplay elements depending on what time it is. For example, you could have an image of a sun during the day and the moon at night.
Current dateDisplay elements according to the date. For example, you can show animations of snow during the winter and sunshine during the summer.

Conditions according to archive

Display or hide elements on archive pages according to the classification of the post.

Of TagsFor use in templates. Allows you to display elements of posts in a template in accordance with their tags. For example, in an archive page of a clothing store, you can show a Discount Price banner for everything tagged as Hat while showing a video of the beach for everything tagged Swimwear.
Of CategoriesFor use in templates. Allows you to display elements of posts in a template in accordance with their categories. For example, in an archive page of a toy store, you can show a cartoon image for all toys categorized as Kids 3-6, and a clip from a videogame for toys categorized as Kids 12-16.

Conditions according to other statuses 

Display or hide elements according to which page the viewer is coming from.

From URLDisplay an element according to where the visitor arrived from. For example, you can add a custom logo to a page that only visitors from an affiliated page will see. 

Multiple display conditions

You can choose multiple display conditions for an element. These will always be connected by an AND logical operator. For example, if you set display conditions as: Author is Alex Smith, Current Date is July 3, Day of the Week is Tuesday, all these conditions must be met in order for the element to display. It will only display on posts by Alex Smith when the date is July 3 and that date falls on a Tuesday. 

Warning
Because display conditions are dynamic, they do not work well in conjunction with caching. If you use display conditions, we recommend you disable advanced caching or any caching plugins.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Wait! You get 30-Day Money-back Guarantee

You have nothing to lose – but the discount

days
hours
minutes
seconds