How to use conditional visibility in WeWeb?

Step 1: Log in to WeWeb

The first step is to log into your WeWeb account. Navigate to WeWeb's official website at https://www.weweb.io/. Click on the 'Login' button located at the top right corner of the webpage, enter your registered email and password and then press the 'Sign in' button.

Step 2: Navigate to the Editor

After logging in, you'll be directed to your WeWeb dashboard. From your dashboard, select the website you wish to edit and then click on the 'Editor' button. This will take you to the website editing page.

Step 3: Understand Components and Visibility

Once you've entered the editor, it's important to understand the concept of 'Components'. Components are the building blocks of your website. They represent individual parts of a webpage, like headers, images, texts, buttons and more.

In relation to components, the term 'Visibility' means whether a component appears on your website when viewed by different users under different conditions.

Step 4: Pick a Component

Choose a component to apply conditional visibility to. To do this, click on the component on your site that you'd like to change the visibility settings for.

Step 5: Accessing the Visibility Settings

After selecting the component, a toolbar should appear on the right side of your screen. Within this toolbar, click on the 'Settings' tab to reveal more options. Scroll down and find the option that says 'Visibility'. Click on it to open the visibility settings menu.

Step 6: Understanding Visibility Conditions

Under the visibility settings, you'll find various conditions you can set. You can select one condition or multiple conditions based on your preferences. For example, if you want a component to only be visible for logged-in users, you can set the condition as 'User is connected'. There are other conditions like 'User is not connected', 'User is admin' etc.

Step 7: Set Visibility Conditions

After understanding visibility conditions, choose the condition(s) you want for the selected component. Each condition will have a checkbox to its left. Click on the checkbox to select a condition.

Step 8: Save and Publish Changes

After setting your desired conditions, save your changes by clicking on the 'Save' button usually located at the top right corner of the editor. Finally, publish your website so that the changes reflect in the live version. You can do this by clicking on the 'Publish' button, also usually located at the top right corner of the editor next to the save button.

With these steps, you should be able to use conditional visibility in WeWeb successfully. Please remember that changes made with conditional visibility will only be reflected when the conditions are met. For instance, if a component is set to be visible only for logged-in users, it won't be visible for visitors viewing your site who are not logged in.