How to design a header with account login and registration links on Elementor

This brief tutorial extends on the functionality to design a header with Elementor and create a navigational menu. Currently there isn’t a feature where you could seamlessly let your visitors/customers easily register for an account or login/logout right from the header (also known as “Authorization Links”) unless you have WooCommerce or Easy Digital Downloads or the like installed.

In this case, you can activat it through the “Menu” tab from your WordPress dashboard, though you will come across certain limitations in terms of styling etc.

Let’s jump right into it!

Tools we use for this tutorial

1. Elementor Page Builder: the free-version should work for the specific use-case in this tutorial. If you however want to add a header template, you could opt for the Pro version or use the free Header & Footer plugin by Brainstorm Force.
2. JetBlocks by Crocoblock: An add-on plugin that includes login forms, registration form and the “Auth Link” widget which connects everything together.

Now that we’ve got the tools we need, let’s get to adding the content and incorporating the features.

1. Create the login and registration pages

You are going to need a login and a registration page which would be linked to the Authorization Links widget later on. Let’s create them first so they could be easily linked during the set up.

Registration Form

This is the page that visitors are going to be prompted when they want to register with you. Ideally, you would include a form that lets them register for a new account. We would be using JetBlock’s ‘Registration Form’ widget to achieve this. Follow the steps to create your registration page.

1. From the left-pane on your Dashboard, click Pages and select Add New
2. Give it a title. Let’s name it “Registration Form“
3. Click Edit with Elementor
4. Once at the editing panel, search for “Registration Form” widget and simply click-drag to where you want the form to appear. Note: you may receive a notification saying that registration is disabled. In this case, go back to your Dashboard > Settings > General and scroll down to ‘Membership’. Tick the box labeled ‘Anyone can register‘
5. You will now be able to customize the labels and placeholder text for each field namely Username, Email and Password.
6. You could also decide where you want to direct your visitors once they register with the default being ‘Homepage’.

Login Form

Similarly, you would now create a login page to include the login form. Under ‘Content’ tab, you can set where the visitors are directed once they login and also include a link incase the users lost their password.

2. Setting Up

Since we have decided to use the free version of Elementor, in this tutorial, we would be using the free Header & Footer plugin by Brainstorm Force to design a header with Elementor, which can be applied across the site. Assuming you have purchased the JetBlocks plugin, you would need to install it too.

Learn how to install a plugin (opens in a new tab)

Create a menu

Since we would be using a navigational menu in our header, we would need to set up the menu items.

1. From the ‘Appearance’ menu on the left-hand side of the Dashboard, select the ‘Menus‘ option to bring up the Menu Editor.
2. Select Create a new menu at the top of the page.
3. Enter a name for your new menu in the Menu Name box.
4. Click the Create Menu button.
5. Add items your menu structure from the left side-bar.
6. Once done, click ‘Save Menu’.

Create a header template

1. Once the plugin is installed, hover on Appearance from your Dashboard and select Header Footer Builder where you will be taken to a section to add a template.
2. Click Add New and give it a title.
3. Select the “Type of Template” as ‘Header’ and check the “Enable Layout for Elementor Canvas Template?” box because we would want to build the template from scratch.
4. Click ‘Publish’ and then click ‘Edit with Elementor’ to take you to the editor panel.

3. Design the navigation menu with Authorization links

You will now have a blank template to design and customize your very own header.

• Add a 3-column structure to include your logo (left), navigation menu (center) and the authorization link (right).
• Add each widget to the respective columns, and this is how it will look like by default.

Since this tutorial is to design a header with Elementor that includes authorization links, let’s dig deeper into it.

Under Login Link tab, enter the Login Page URL that we created before. Only the non-logged in users would see this text. You can change this text to whatever you want but keep it simple.

Under Logout Link tab, you can redirect your users to a particular page or go back to the previous page by setting “Left on the current page“. You can also change the prefix to suit your requirement.

Register Link tab lets you customize its text and this is where you would include the link to the “Registration Form” page that you previously created.

Registered Link refers to what the visitors would see once you register. Usually, this is where you will see the details of your account etc.

This is more useful if you are building an e-commerce site that lets you access your account details etc. But we are going to disable it here for this tutorial.

To do this, simply toggle the button labeled “Show Registered Link” to “No“.

That’s it! You have now successfully created a login/registration page and linked it to your main header!

Note: You can either choose to purchase the Crocoblock bundle or only the relevant plugin (i.e. JetBlocks) to follow this tutorial.