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.

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.

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.

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.

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.

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.

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.