How to Use Rendering Logic in Avada

Share

Avada Rendering Logic is a powerful feature for WordPress web design, enhancing control over how user content is displayed based on specific conditions. Unlike the traditional element visibility options, which hide content from users but still load it in the code, Rendering Logic ensures that specified content isn’t rendered in the code, creating a cleaner, faster-loading page. Below is an in-depth guide on using Rendering Logic effectively within Avada, with practical examples illustrating its versatility.

Overview

Overview
Where Is Avada Rendering Logic Used?
Benefits of Using Avada Rendering Logic
- Example 1: Rendering Logic Based on Device Type
- Example 2: Rendering Logic Based on User State & Role
Summary

Where Is Avada Rendering Logic Used?

Avada Rendering Logic is located on the “Extras” tab of the Avada Column and Avada Containers Elements.

Although currently limited to these two Layout Elements, this functionality can be applied creatively across various layouts, enabling almost any usage imaginable.

Benefits of Using Avada Rendering Logic

The examples explained in this beginner’s guide showcase just a few ways Rendering Logic can improve site functionality by controlling the visibility of Containers or Column Layout Elements based on specific user conditions or device types.

For privacy reasons YouTube needs your permission to be loaded.

This capability can significantly enhance user experience, streamline content management, and reduce unnecessary page load times.

Example 1: Rendering Logic Based on Device Type

To illustrate how Avada Rendering Logic works, consider a Header Layout Section with three Container Elements, each set to display under different conditions based on device type.

Setting Up Device-Based Rendering Logic:

In the header section of the layout, the first container is set to render only when the device is a desktop. This setting is configured by navigating to the “Extras” tab of the container, where Rendering Logic is applied with the condition “Device = Desktop.”
The second container is adjusted to display only on mobile or tablet devices, with a similar logic setup: “Device = Mobile or Tablet.”
The third container is also configured to display exclusively on desktop devices.

Testing Device-Based Rendering:

The first and third containers appear in the header when viewed on a desktop PC.
Switching to a mobile or tablet view renders only the second container. This setup is a practical application for creating unique user experiences across different screen sizes.

Example 2: Rendering Logic Based on User State & Role

Beyond device type, Avada Rendering Logic can customize content based on the user’s login status and role. Here’s how to create content that varies depending on whether users are logged in, logged out, or have made a previous purchase.

Setting Up User State-Based Rendering Logic:

First, create three containers on a homepage layout, each designated for different user states:

Container 1: This container will only display if the user is not logged in. Under the “Extras” tab, apply Rendering Logic with the condition “User State = Logged Out.”
Container 2: Displays if the user is logged in but not a customer. For this setup, two conditions are required: “User State = Logged In” and “User Role ≠ Customer.”
Container 3: Displays for users who are logged in and have a purchase history. Set the Rendering Logic to “User Role = Customer.”

Testing User State-Based Rendering:

Only the first container appears when a user visits the page while logged out, providing an introductory or promotional message for unregistered users.
The second container becomes visible upon logging in as a non-customer user, welcoming them with a unique message or incentive.
Logging in as a customer with a purchase history triggers the third container to display, perhaps offering a personalized discount or exclusive content.

Summary

With thoughtful configuration, Rendering Logic in Avada allows for a more responsive and adaptive site design, delivering content tailored to different devices and user states. Whether aiming for a seamless cross-device experience or personalized content for different user roles, Rendering Logic makes it easy to fine-tune site visibility precisely.