Share

Designing responsive websites can be challenging due to various form factors and screen sizes. Advanced tools are essential to manage these variations effectively. Avada, already a fully responsive Website Builder for WordPress, offers powerful global options and specialized tools for fine-tuning responsive design. Among these tools, Avada Responsive Option Sets stand out for providing granular control.

Overview

What Are Avada Responsive Option Sets?

Avada Responsive Option Sets allow designers to independently customize the appearance of website elements based on three distinct screen sizes—large, medium, and small. Instead of relying solely on Avada Global Options, designers can specify unique settings for each screen category within the same element, significantly enhancing flexibility and control.

Avada Responsive Option Sets

These responsive option sets are primarily available in Avada Containers and Avada Columns, though they also exist across many Avada Elements throughout Avada Builder. Each responsive option is identified by a specific screen-size icon beside the setting.

To recap, Avada Responsive Option Sets can be found in these locations:

  • Avada Containers – These offer options such as content wrap, margins, padding, container background color, and background images.
  • Avada Columns – The first six design options are responsive, including margin, padding, and width adjustments. Columns also include responsive options for background color and images.
  • Avada Elements – Fewer responsive settings, typically related to alignment and margin.

How to Use Avada Responsive Option Sets

The Avada Factory pre-built website provides a practical demonstration for this article. By editing a Container, the responsive options appear through icons next to specific controls. Clicking these icons enables switching between large, medium, and small screen views, allowing distinct settings for each size.

For privacy reasons YouTube needs your permission to be loaded.

For instance, Columns initially set to one-quarter width on large screens can automatically change to half-width on medium and full-width on small screens. While Avada defaults to inheriting large screen settings on medium screens and full-width layouts on small screens, designers can override these settings for more precise control.

Practical Example: (Avada Factory) Services Section

Consider a typical services section where individual service items appear in quarter-width columns on large screens. By navigating to medium screens through Avada’s responsive options, designers might adjust these columns to half-width, deviating from global defaults. On small screens, reverting columns to default full-width typically provides optimal readability, though customization is possible.

Avada Responsive Example

It’s crucial to test design adjustments on actual devices. Just because an option exists doesn’t imply its practicality in every scenario. For example, setting half-width Columns on small screens may adversely impact readability due to limited screen real estate.

Responsive Option Sets vs. Rendering Logic

The primary responsive settings are located under Options > Responsive in the Avada Dashboard. However, other global options throughout Avada also affect how a site looks on different devices.

Avada Responsive Option Sets

  • Purpose – To provide fine-grained control over the visual design (e.g., layout, margins, padding, width, alignment, backgrounds) on different screen sizes—large, medium, and small.
  • Functionality – Allows a single element (Container, Column, or Element) to hold multiple values corresponding to each screen size. For instance, you can adjust a column’s width, margin, or padding specifically for mobile devices without changing the desktop layout.
  • Typical Use Cases
  • Changing a three-column layout on desktop to a single-column layout on mobile.
  • Adjusting margins or padding to improve readability on tablets and smartphones.
  • Modifying alignment and spacing specifically for smaller screens.
  • Control Scope – Primarily visual and layout-focused, responsive to the viewport width.

Avada Rendering Logic

  • Purpose – To conditionally display or hide content based on logical conditions (e.g., user roles, logged-in status, device type, browser, dynamic conditions based on date/time, or custom conditions).
  • Functionality – Controls whether elements are rendered (displayed) or not based on specified logical conditions rather than just viewport size adjustments. Unlike responsive options, rendering logic completely removes or shows content based on conditions rather than adjusting its appearance.
  • Typical Use Cases
  • Displaying special offers only to logged-in users or specific user roles.
  • Showing a particular banner or content block only on mobile devices or specific browsers.
  • Dynamically changing content visibility based on date, time, or other conditions (e.g., displaying event announcements only during specific periods).
  • Control Scope – Logical content visibility and conditional rendering are based on user or environment conditions rather than purely screen size adjustments.

Summary

Responsive Option Sets are among Avada’s most powerful responsive design tools. They provide substantial control and flexibility for creating exceptional, device-specific user experiences. Designers can significantly enhance their layouts through thoughtful use of responsive settings, ensuring optimal design clarity and functionality across all devices.

This is the Avada Builder’s main responsive feature, allowing you to set specific options independently for different screen sizes. Some specific Element options can hold up to three sets of values corresponding to the three Responsive screen sizes: large (Desktop), Medium (Tablet), and Small (Phone).

Subscribe To Our Newsletter

Receive all of the latest news and updates fresh from ThemeFusion!

Related Articles

Leave a comment