Kadence Tutorial: Setting Up Conditional Displays with Kadence Blocks Complete Tutorial

in using Kadence Blocks Pro devise WordPress When you are on a page, you may encounter the need for certain content to be displayed only in specific contexts. For example, you dynamically control the display or hiding of page elements (such as blocks, modules, content, etc.) based on specific conditions.Kadence The "Conditional Display" feature controls the visibility of blocks based on specific fields or page data, allowing for a more dynamic page presentation.

Image [1]-Kadence Conditional Display Setup Tutorial: Dynamically Controlling Block Display by Field

Function Introduction

Conditional displays can be used for multiple core blocks, including:

  • Advanced Imaging
  • Advanced Text
  • Block Section
  • line layout
  • Single icon
  • Icon List
  • Advanced Buttons
  • infobox

Each block that supports this feature can set one or moreprerequisiteIt can dynamically control the display state based on the data of the current page or article.

Condition Setting Portal

After selecting the supported blocks, in the settings panel on the right side go to "high level" tab, expand "Conditional display settings", you can start the configuration.

Image [2]-Kadence Conditional Display Setup Tutorial: Dynamically Controlling Block Display by Field

optional condition

The system provides a large number of fields for setting conditions such as:

  • Article title, type, status, date,URL
  • Custom Fields
  • Featured Image URL
  • Classifieds
  • Author's name, field value
  • Number of comments
  • Archive Title and Fields
  • Subcontents in repeatable fields
Image [3]-Kadence Conditional Display Setup Tutorial: Dynamically Controlling Block Display by Field

Each of these fields can be used as a judgmental basis for deciding whether a block is displayed or not.

Conditional data sources

By default, the data source is the current article or page. If there are special scenarios, such as needing to grab field values from a specific page, you can also click the pencil icon in the settings box to manually modify the data source.

Image [4]-Kadence Conditional Display Setup Tutorial: Dynamically Controlling Block Display by Field

Description of the comparison method

A variety of comparisons can be selected in the condition settings, including:

  • Displayed when field is not empty (Not Empty)
  • Displayed when field is empty (Empty)
  • be valued at true maybe false
  • Equal to/not equal to a value
  • Greater than / less than a certain value
  • Greater than or equal to / less than or equal to a value
Image [5]-Kadence Conditional Display Setup Tutorial: Dynamically Controlling Block Display by Field

Flexible combination of these judgments allows for a variety of presentation rules.

Application Example: Controlling Featured Image Block Display

In article templates, a featured image block is often added. If the article is not set with an image, this block may leave a blank spot on the front end.

At this point, you can use the conditional display function to have the block displayed only if an image address exists.

Image [6]-Kadence Conditional Display Setup Tutorial: Dynamically Controlling Block Display by Field

Operational Steps:

  • Check the Advanced Image block
  • Open the right side settings and go to the Advanced tab
  • Add conditional field as "Featured Images URL"
Image [7]-Kadence Conditional Display Setup Tutorial: Dynamically Controlling Block Display by Field
  • Keep the data source as the current article
Image [8]-Kadence Conditional Display Setup Tutorial: Dynamically Controlling Block Display by Field
  • Select "Not Empty" for comparison.
Image [9]-Kadence Conditional Display Setup Tutorial: Dynamically Controlling Block Display by Field

After completing the setup, the image block will only appear on the page if there is an image address. The opposite will not be displayed and the page layout will not leave gaps.

Effect Comparison

When the conditional display is not used, if no image is set for the article, an empty area will remain on the front end.
After enabling this function, the system will automatically ignore these invalid contents, and the display will be more neat and natural.

Image [10]-Kadence Conditional Display Setup Tutorial: Dynamically Controlling Block Display by Field

summarize

Kadence Blocks The conditional display feature in Pro brings more flexibility to block editing. With this tool, theWordPressPage content can be based on different conditions to respond, eliminating the need to manually modify the template of the tedious operation.

This feature is very useful in displaying article content, controlling layout structure, achieving customized output and other scenarios, and it is recommended to give full play to its role to make the page content more expressive.


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
Customer Service
Customer Service
Tel: 020-2206-9892
QQ咨詢:1025174874
(iii) E-mail: info@361sale.com
Working hours: Monday to Friday, 9:30-18:30, holidays off
? Reprint statement
This article was written by: thieves will be rats and mice courage
THE END
If you like it, support it.
kudos843 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments