Stylish User Account Pages: A Breakdance Styling Guide

Web Development & Design
Surfer AI - Best All-in-one Assistant

- Your article will be ready in less than 20 minutes and it will be 10 times cheaper than using a dedicated writer.
- Create ready-to-rank articles in minutes with Surfer AI.
- Research, write, and optimize across industries with the click of a button.

Medium. You must know a standard sum about this instrument/subject
Time Needed:
~twenty minutes

If you are setting up an e-commerce website, then an account webpage is a should.

An account webpage offers a customized purchasing expertise for your end users. For instance, it aids them hold track of their purchases, entry their downloaded articles, or acquire tailored suggestions.

In this manual, we’re going to set up a basic digital shop employing Simple Digital Downloads and Breakdance

I’ll demonstrate you how effortless it is to include new goods, produce a customized account webpage, and show text hyperlinks based mostly on the user’s login standing. 

By the finish, you will have a basic shop exactly where end users can register, log in, and see their account webpage, just like this:

user account page in Breakdanceuser account page in Breakdance

Styling A Consumer Account Web page With Breakdance

one) Set up Simple Digital Downloads

To deliver e-commerce abilities to our website, specially for offering digital goods, we’ll use the Simple Digital Downloads (EDD) plugin. EDD is my best choose for offering a selection of digital products, from PDFs and webinars to apps, audiobooks, and pictures.

For this manual, we’ll stick to the cost-free edition of EDD. Nonetheless, if you are hunting for a broader selection of functions, take into account upgrading to EDD Professional.

In your WordPress admin location, navigate to Plugins &gt Include New. In the search bar, kind ‘Easy Digital Downloads’ and hit enter. Discover the plugin in the search benefits and click Set up and activate.

easy digital downloads plugineasy digital downloads plugin

Following activation, you are going to recognize a new ‘Downloads’ tab on the left menu. This will also lead you to the setup webpage. Merely click on the Get Began button.

easy digital downloads setup pageeasy digital downloads setup page

Fill in the essential information to configure your digital shop. When you attain the last stage, you are going to be prompted to input information of the solution you want to promote. This consists of the solution title, picture, pricing possibilities, and the set price tag.

add new product via Easy Digital Downloadsadd new product via Easy Digital Downloads

If you want to include far more goods later on, just go to Downloads and pick Include New. Fill in the solution information and the file for download, then hit conserve and publish.

add new product via Easy Digital Downloadsadd new product via Easy Digital Downloads

When you revisit the downloads part, all your additional goods will be displayed. Keep in mind, you can also categorize and tag your goods for far better organization.

add new product via Easy Digital Downloadsadd new product via Easy Digital Downloads

two) Generate a Header Template

For this manual, I’ve picked the ‘Travel Trip’ template from the Breakdance Style Library. Nonetheless, you are cost-free to choose any template that resonates with your undertaking.

Breakdance design libraryBreakdance design library

Now, let’s customize our header template. 

From your WordPress dashboard, go to Breakdance &gt Headers. Open the primary header in the Breakdance editor. If you are feeling innovative, you can also design and style your very own header by clicking ‘Add Header.’

Breakdance header templateBreakdance header template

Now, it is time to personalize. Modify the menu hyperlinks, upload your brand, and tweak the background colour to match your brand. Here is a glimpse of how my header seems in the editor:

Breakdance header templateBreakdance header template

You may see I have integrated the two ‘Login’ and ‘Logout’ text hyperlinks. The thought is to show one particular of these hyperlinks based mostly on a user’s login standing, and we’ll obtain this by setting circumstances.

Let us commence with the ‘Login’ hyperlink. Click on its text component and head more than to the settings tab on the left. Decide on Circumstances &gt Edit Circumstances. In the pop-up that seems, set the ‘User Logged In Status’ to ‘logged out’. This guarantees the ‘Login’ hyperlink is noticeable only when a consumer is not logged in.

add condition based on logged in statusadd condition based on logged in status

Repeat the method for the ‘Logout’ hyperlink, but this time, set the ‘User Logged In Status’ to ‘logged in’.

add condition based on logged in statusadd condition based on logged in status

three) Generate an Account Web page

Let us produce an account webpage that feels individual to the consumer. Ideally, it must greet them with a warm ‘Welcome back, [User Name]!’ and a handful of possibilities to see their buy historical past, advised goods, account settings, and far more.

Here’s how to set it up.

From your WordPress dashboard, navigate to Pages &gt Include New. Title your webpage, conserve it, and then publish it.

create new page on Breakdancecreate new page on Breakdance

Now, let us type this webpage employing Breakdance.

In my edition, I have made the account webpage with a ‘Manage Your Account’ menu on the left and e-book suggestions on the appropriate.

create account page on Breakdancecreate account page on Breakdance

To make the greeting dynamic, I have integrated the user’s title. Click on the dynamic icon adjacent to the text label. In the pop-up, pick ‘user name’ from the ‘Current User’ class.

Then, prepend and append a handful of texts to make the text show ‘Welcome back, consumer title!’ as proven beneath.

personalize site welcome messagepersonalize site welcome message

Up coming, we’re going to include a issue to the welcome text so that it only exhibits when the consumer is logged in.

add condition based on logged in statusadd condition based on logged in status

Underneath the ‘Manage My Account’ part, I have temporarily utilised placeholder hyperlinks. These will manual the consumer to one more webpage on clicking. Because we have not set up the distinct pages for these sections nevertheless, these placeholders will do. Keep in mind to change them with the appropriate hyperlinks when these pages are prepared.

add URL placeholderadd URL placeholder

four) Generate a Solution Web page

With Simple Digital Downloads, every single solution you include is instantly provided its very own webpage. Let us improve this webpage to make it far more engaging for your end users.

Here is how I have tailored the solution webpage

To include a buy button, I have utilised EDD’s shortcode. To discover and use it, go to the Downloads part in your WordPress dashboard. Open the preferred solution webpage. On the left navigation panel, find the buy shortcode and copy it.

EDD purchase shortcodeEDD purchase shortcode

Switch to your Breakdance editor, include a shortcode component, and paste the copied buy shortcode there.

EDD purchase shortcodeEDD purchase shortcode

With this setup, each time a consumer clicks the buy button, they will be taken to the checkout webpage, which, conveniently, is car-produced by EDD.

After you are articles with the design and style and layout of your solution webpage, click conserve.

Now, let us go back to the account webpage to integrate the solution hyperlinks. 

In my design and style, I have linked the solution webpage to the ‘Start Reading’ button. This way, if a consumer is interested in the e-book, they are led straight to the solution webpage to discover the e-book more.

add URL on Breakdance text linkadd URL on Breakdance text link

Following guaranteeing all hyperlinks and components are in area, conserve your progress.

five) Generate a Registration Web page

Up coming, we’re going to produce a registration webpage for new end users to signal up and produce their accounts.

From your WordPress dashboard, head more than to Pages &gt Include New. Include a title to your webpage. Then, hit conserve and publish.

Open the newly designed webpage in your Breakdance editor. Right here, you are going to want to include crucial components like a heading and a registration type.

Breakdance register form elementBreakdance register form element

Really feel cost-free to get innovative! Change the type, alter the discipline labels, or resize the type to your liking.

Up coming, allow your website to accept registrations. From your WordPress admin location, go to Settings &gt Basic Settings. On the ‘Membership’ part, verify the box labeled ‘Anyone can register.’ Then, decide on a ‘New Consumer Default Role’ from the dropdown.

enable site registration in WordPressenable site registration in WordPress

After you are content with the appear and performance of the registration webpage, will not overlook to conserve your alterations.

six) Generate a Login Web page

Possessing set up the registration webpage, it is time to produce a room for end users to log in.

Start off by producing a new webpage, just as you did with the registration webpage.

After you are in the Breakdance editor, include the essential components. This consists of a heading and a login type. 

Breakdance login form elementBreakdance login form element

Change the type to match your site’s aesthetics or to produce a special consumer expertise.

Following finalizing the design and style and guaranteeing almost everything functions smoothly, click conserve.

seven) Include the URLs

Now, we’re completed producing the pages for the registration, login, solution, and consumer account. The remaining stage is to include the hyperlinks.

Tip: To discover the hyperlinks of a webpage, open the preferred webpage from your WordPress dashboard. The URL can be copied from the settings on the appropriate. For solution pages, navigate to Downloads, open the solution webpage, and copy the hyperlink from the URL part. 

find WordPress page URLfind WordPress page URL

Now, let’s include hyperlinks to our login and registration types.

On the login webpage, end users must have two possibilities: logging in with an current account or registering for a new one particular.

Include a redirect URL for the login type. In my setup, I have linked it to the account webpage. This guarantees end users are directed to their account webpage submit-login.

add redirect URL on Breakdanceadd redirect URL on Breakdance

For the registration button, hyperlink it to the registration webpage. 

add URL on register buttonadd URL on register button

On the registration webpage, I have picked not to use a redirect URL. Rather, following registration, end users see a accomplishment message and continue to be on the identical webpage. Nonetheless, I have linked the login button to the login webpage. 

add URL on login buttonadd URL on login button

Based on your preference, you can set a redirect URL submit-registration, like directing end users to their account webpage or property webpage.

Lastly, let’s hyperlink the login and logout from the headers to their designated pages. 

Website link the login text in the header to the login webpage. This way, end users are directed to the login webpage on clicking.

add URL to login textadd URL to login text

Linking the logout can be somewhat complicated. To successfully log end users out, you may well require customized codes or a plugin. 

For simplicity, let’s use the LoginWP plugin.

LoginWP pluginLoginWP plugin

Following putting in the plugin, configure the logout URL to redirect end users to a distinct webpage submit-logout. I have picked the login webpage for this goal. The plugin also lets you management the redirect URLs based mostly on the user’s function.

LoginWP plugin settingsLoginWP plugin settings

Now, go back to your header template on the Breakdance editor. Click the logout text. On the left, paste the following WordPress logout hyperlink on the ‘Link’ discipline: 

Then, conserve your function. And you are completed!

eight) Check Your Internet site on the Front-Finish

Let’s check our website on the front-finish to make confident that almost everything functions as meant.

Very first, open your website in an incognito window (or a various browser). By performing so, you can see the website as a new visitor. 

a) Registration Check

Now, go to the login webpage and click register.

Enter the essential information on the registration type and click on register. 

Breakdance register pageBreakdance register page

b) Confirm the New Consumer on the Backend 

To verify the registration was effective, entry your website as an administrator in a separate window. Go to Consumers &gt All Consumers. This part displays all registered end users and their roles. You must see the newly registered account right here.

WordPress users tableWordPress users table

c) Login Check

Now, back to the incognito browser, let’s attempt to log in employing the account we’ve just registered. 

On effective login, you must be directed to the account webpage. The header must now show your title, and the ‘Log In’ hyperlink must have modified to ‘Log Out’.

Breakdance login pageBreakdance login page

d) Solution Web page Navigation

Underneath the solution suggestions, click the ‘Start Reading’ button on one particular of the goods. This action must lead you to the solution webpage.

Breakdance account pageBreakdance account page

e) Buy Movement

On the solution webpage, click the buy button. If everything’s set up appropriately, you are going to be redirected to the checkout webpage.

EDD checkout pageEDD checkout page

After a buy has been produced, you can verify it on the Downloads &gt Orders part. 

f) Logout Check

On the account webpage, click the logout button. You must now be signed out from the website and taken back to the login webpage.

log out from Breakdance sitelog out from Breakdance site

And That is It!

With Simple Digital Downloads and Breakdance, you can now craft a consumer-pleasant account webpage, providing your end users a customized expertise. 

We’ve also designed one more tutorial about how to set up an Easy Digital Downloads store in Breakdance. Right here, we’ve presented far more information on how to use this plugin to produce a digital shop. So make confident to verify it out. 

If you have ideas or inquiries about the setup method, please drop a comment beneath.