/ Documentation /General/Spectra – Responsive Conditions

Spectra – Responsive Conditions

One of the cool features of Spectra is its Responsive Conditions. This helps you decide how your website looks on different devices, like mobile, tablet, or PC.

For example, you have a section on your homepage that displays the restaurant’s featured dishes side by side. On larger screens like desktops and laptops, this layout looks great, but on smaller screens like mobile phones, the dishes appear too cramped.

So with Responsive Conditions, you can display one dish at a time on mobile devices.

Ready to know more about the Responsive Conditions?

Go through the following sections of this document to learn how to use this feature.

Understanding the Purpose of Spectra’s Responsive Conditions

Modern users engage with websites through a variety of devices, including desktops, tablets, and mobiles. Each device has unique characteristics that can impact the user experience.

Spectra’s Responsive Conditions feature allows you to selectively show or hide specific content to users based on the device they are using.

Whether it’s optimizing content for a particular screen size or temporarily disabling certain blocks, Spectra’s Responsive Conditions offer the flexibility you need.

How to Use Responsive Condition in Spectra

Now that we understand more about why you might want to use the responsive conditions, let’s look at how you can create an option to enable or disable the Responsive Conditions.

Note that for this tutorial, we’ll assume you already have Spectra installed and activated on your website.

Once you have Spectra installed on your site, you can simply follow the steps below.

Finding Responsive Conditions Options

To get started with Spectra’s Responsive Conditions, navigate to the admin panel. You’ll find it under Spectra > Blocks / Extensions > Extensions > Responsive Conditions.

Finding Responsive Conditions Options

Enabling Responsive Conditions Extensions

Make sure to turn on the Responsive Conditions option in the Spectra admin panel. This step is really important because it lets you access the special ability to customize how your content looks.

Enabling Responsive Conditions Extensions

Hide/Display Content Setting in Block Editor

When you add a block to your page or post using Spectra, you just need to click on the “Advanced” settings for that block.


Please note that this feature exclusively functions with Spectra blocks only.

That’s where you’ll discover the Responsive Conditions Options, ready for you to check out.

Next up, you can click on the Advanced settings. Inside, you’ll find the Responsive Conditions Options waiting for you. This is where the real excitement starts.

Hide/Display Content Setting in Block Editor

In the Responsive Conditions Options, you’ll find settings for Desktop, Tablet, and Mobile. These settings let you choose exactly when and where your content appears.

Hide/Display Content Setting in Block Editor

Save the Changes

Once you’ve set up your content for different devices, remember to save your changes. Just click the “update” or “publish” button to make sure your changes show up on your website.

save the changes

That’s it!

Now your website will appear as per the responsive conditions you set.

We hope this article has been helpful. If you have any questions, please feel free to leave a comment below.

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

On this page
Build Ultra High Performance
Websites, Without Coding

Whether you are a beginner, marketer, or professional, Spectra has the tools and resources you can rely on to succeed

Get Notified When Available

Note - You can purchase the Essential Toolkit now and easily upgrade to the Business Toolkit once it becomes available.

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Get your hands on Spectra Pro

Enter your name and email address to get access to Spectra Pro.