Conditional Login & User Pages in Breakdance
Conditional formatting is a powerful tool that can be used on a variety of elements in Breakdance. We'll go over how to use it to create customized user experience pages and how to dynamically display content depending on a user's login status.
Justin Gluska
Updated August 10, 2022
Reading Time: 5 minutes
Have you visited websites that allow you to see and do more when you're logged in? Such as being able to add comments or like content when you're logged in? Of course! If you're setting up a website and would like to have different content for logged in users compared to guests, you might be wondering how to set up conditional login and user pages in Breakdance Builder. Luckily, it's a fairly straightforward process that just requires a few steps.
In this tutorial, we'll show you how to create conditional login links, account, and user pages in Breakdance Builder so that your website visitors can enjoy a more personalized experience.
What Is Conditional Formatting?
Conditional formatting is a way to change the appearance of an element on a web page based on certain conditions, such as whether a user is logged in or not.
For example, you might want to show a login link to users who are not logged in, and a logout link to users who are logged in. Or, you might want to show a different menu to logged in users compared to guests.
Conditional formatting is a powerful tool that can be used to create a more customized and engaging user experience on your website.
Setup WordPress and Install Breakdance
The first thing you'll need to do is set up WordPress and install the Breakdance Builder plugin. Once you've completed those steps, you should have a working WordPress site with the Breakdance plugin installed and activated.
Create a Register Element (optional)
If you want to give users the option to register for an account on your site, we'll need to add a Register element to our menu that is only available to logged-out users. If you don't want to allow registration, skip this step.
To add the register element, add a menu custom dropdown element to your header. Inside, add a register form element. I chose to add some text above the form to let users know what they're doing. Feel free to customize the form as you choose.
Once this is created, we need to add conditional formatting options to the menu custom dropdown.
Add User Login Conditional Formatting in Breakdance
Go into the settings of the element, add a condition, and set it to:
if USER LOGGED IN STATUS is LOGGED OUT
Create a Login Element to Menu
This will be similar to our previous step, but we'll be using a Login Form element instead of the Register Form element.
To add the login element, add a menu custom dropdown to your header. Inside, add a login form element. Again, I chose to add some text above the form to let users know what they're doing. Feel free to customize the form as you choose.
Once this is created, we need to add conditional formatting options to the menu custom dropdown. To do this, go into the dropdown element settings and copy the same conditional formatting options from register
Add Account Page to Logged In User Menu
Now we'll want to add a link to our account page if a user is logged in, this is really useful for those working with ecommerce websites. To add a link to our account page, add a menu link. Set the link to your WooCommerce account page, by default it should be yoursite.com/my-account.
To make this look nicer, we're going to use dynamic data to pull the username of the logged in account. Click on the small icon besides the text to view the dynamic data menu. Scroll to the current user and select username. Now our menu displays a username.
Clicking the dropdown dynamic text will also let you append text before or after the dynamic name. This is really useful for a 'Hello' or 'Welcome' message to display in your menu bar.
We'll now add our conditional formatting as we can only show this block to users that are logged in. It's the same steps as before but now we will be showing it to logged in users, not logged out ones.
On the front end, when a user is logged in and clicks on their username, they'll now be redirected to their account page which displays their dashboard, orders, account details, and more. Another great thing about this page is it provides a logout button, so we don't need to create an additional menu element to log out of your account.
Custom Conditional Content in Breakdance
We've now gone over how to create a more customized user account pages by conditionally displaying content depending on if a user is logged in or not. This can be really useful for ecommerce sites, membership sites, and more.
If you want to take things a step further, you can also use conditional formatting to change the individual content & sections that appear on a page. To start, create a page you would like to show certain content on. Let's create two color-coded sections which get displayed depending on login status.
Simply add whatever you want in each one, enable conditional formatting depending on the content, and you're good to go.
You can test this out by visiting the page live. Since you're editing your website you will most likely be logged in by default so you should see the following:
Conclusion
Conditional formatting is a powerful tool that can be used on a variety of elements in Breakdance. In this article we've gone over how to use it to create more customized user experience pages and how to dynamically display content depending on a user's login status.
Using these settings, we could make fully operational ecommerce shops in WordPress, with a variety of different membership levels, custom content for logged in users and more. Hope this helped!
Want to Learn Even More?
If you enjoyed this article, subscribe to our free newsletter where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.