Dev: Working with Conditional Elements

This page give how-to instructions for creating, deleting and modifying conditional elements. For an introduction to this relatively advanced topic, read About Conditional Elements before proceeding.

The Content and Conditions of Elements

Building and editing the content of a conditional element is similar to authoring any ordinary page. The power of conditional elements comes from the flexibility in where you can place them in webpages and the conditions that control whether they appear or not. The content of such a conditional element is fixed; the element settings control whether users see it based on factors such as:

  • Which pages the element appear on.
  • Where within those pages the element appears.
  • Which users can see it, based on user roles.
  • What kinds of devices (large screen or mobile) can display the element.
  • The dates and times when the element is visible.

A requirement that you might expect to require a programmer to code using if … then … else logic, can often be solved with a conditional element. The conditional code is executed when by the Kadence process that links to webpages, not within those webpages. Read what goes into an element in the Kadence Knowledge base for more detail of the element settings.

Working with Conditional Elements

To access conditional elements from the WordPress Dashboard, open the Appearance menu and select Elements. A panel that opens in which all elements currently are listed. At the time of the writing, three elements appear.

Setting up conditions for a new element typically takes more time and thought than entering the contents. Expect to go through several rounds of testing and modification to make sure the element performs as expected in all situations. The steps below walk you through the process of creating an element but cannot describe the possible combinations of conditions that you can configure.

  1. Click the Add New Element button at the top of the Elements panel.
  2. On the Element Setup panel, select Content Section. This is the only type of element currently used in the LLIR website.
  3. When a page that looks much like the WordPress editor opens, enter a title to identify the element.
  4. Use the panel below the title to add text and other content you want to display conditionally. Use the WordPress editor as you do to enter and edit any page content. Use the Document Outline and Settings panels as usual.
  5. When you are or ready to review what you have, click the Publish button on the upper right.
  6. To review the content, click the View Element button that appears on the lower left of the screen. Note that the title does not appear; It never appears in webpages. You can return to the editing panel by clicking the back-arrow button
  7. To set up the conditions, click Element Settings (icon of a pen over contents) on the upper right.
    Refer to the Table of Element Settings below and to help specify the conditions.
  8. When you done, click Save on the upper right. The element is published but you can continue to modify it.
  9. Test thoroughly. This step may required several rounds of testing. To test thoroughly, you must simulating all combination of situations that can affect the conditions.
    Open all pages where you hope to see the element and verify the contents of the element appear.
    Open other pages to verify that the contents of the element do not appear when and where you don’t it.

To delete a conditional element, hover over its title in the Elements panel and click Move to Trash. There is no harm in keeping an element to use for future reference, provided its conditions for display are never met. For example, because the expiry date for the WaitList Open element is in the past, the element never appears.

To modify an conditional element, hover over its title in the Elements panel and click Edit. The element opens for editing. Then proceed as described in Creating a conditional element.

  • To modify the contents, use the WordPress editor as usual
  • To modify the settings, click Element Settings (icon of a pen over contents) on the upper right. Then refer to the Table of Element Settings below.
  • When you have made changes, Save and test carefully described under Creating a Conditional Element.

Table of Element Settings

These settings give you the power to add conditional behaviour to a website without writing code. The examples column explains the effect of the setting on the conditional elements in the LLIR website.

Setting
Name		DescriptionExample/Comment
Element typeShould be Content SectionAll existing elements are Content Sections.
Preview settingsThe default is usually appropriate for pages. These settings usually apply to websites composed of posts rather than pages.
PlacementThis dropdown list shows where you can position the element within a pages.
The most common placements are below the page header or before the footer.		The Developer Notes element appears above the page footer.
The content of the Member Only Page (the Please Log In message follows the page header.
PriorityThe default is usually adequate. If elements and their settings produce conflicts, element priorities determine which element’s conditions apply first.
Display SettingsThis expandable set of options controls which pages the element appears on. You can specify pages by category or select pages individually, You can also exclude specific pages.The Waitlist Open element can appears only on the Waitlist Process page.
The Member Only Page element is excluded from pages in the public area of the website.
User SettingsExpand this option to see a dropdown list from which you can select the category of user who can see this element (typically by user role or whether logged in).Only WordPress administrators see the Developer Notes element.
Users who are not logged in see the Member Only Page element.
Device SettingsExpand this option to see a dropdown list from which you can select that element appears only on Desktop (relatively large) screens or Mobile (smartphones and small) screens.The Developer Notes element appears only on relatively large screens.
ExpirationExpand this option and set Enable Expires for elements that appear only at specific times. Then you can set the expiry date and time (in the Toronto time-zone).Whether the WaitList Open element is visible when it’s expiry date is in the future.
Warning

The power and flexibility of conditional elements comes with the potential of complicating the logic required to combine elements and element settings to get the intended results. If you add more conditional elements, think carefully through all possible combinations that may apply to the same pages.