Your website consists of various modules, structures, widgets and, of course, pages and subpages in general. You can manage these pages with Elementor* easily according to your wishes.
Some things, such as the design, fonts, header and footer, are usually set once and used again and again. You make these settings globally. This means that you define them once, usually at the start of creating your site, and can access these settings again and again. If you then want to make a change to the color of your website, for example, you don't have to edit and update each page individually, but simply go to the global settings, change the selected background color and WordPress or your website will be updated. Elementor will automatically change the color settings on all pages that you have included globally in the color selection.
In the following, I will show you how to implement some of these global settings on Elementor. The topics listed include the logo, the creation of the header and footer. Since widgets are not global settings per se, but you can access them, I will link my all-round explanation of various widgets here.
Integrate logo globally
Step 1: Open the general settings by clicking on the three lines in the top left of the Elementor editing bar.
Step 2: Next, you need to Website settings open. It is the top term and the first option you can click on.
Step 3: In the website settings, you define various global settings, e.g. the colors and fonts of your page. To set the logo globally, you must click on the Website information.
Step 4: You are now in the website settings in the Website information sub-item. Here you can set the title, the description and also the logo and a favicon for the website globally. To set the logo, simply click on the image icon under "Website logo". You can now upload a logo from your website media library or from your files and save it as a logo.
Step 5: Very important when you make changes, always save!
Elementor Header
To create your Elementor header and footer, you need to go to the WordPress dashboard via the menu on the left-hand side of your screen and click on Templates and then to Theme Builder go. The link will then take you to a separate subpage where you can create, edit and define global templates.
Click on the white-blue plus icon ("Add New") in the Theme Builder on the right and start the creation of a new template. Now select Header. Next, Elementor Pro users have the option of selecting a header template from the Theme Builder library, which then only needs to be edited in terms of content and color. As this is relatively self-explanatory, I will not choose a template and show you how you can easily create your personal header in just a few steps.
First, I choose a structure. As a rule, website headers consist of a logo and a drop-down menu. Since we always work with as few unused structure areas as possible on all our pages, I choose a structure that only has two fields, just as I like it.
Since I have already defined my colors, the logo and the fonts globally, I don't have to worry about that for now. If you haven't already done so, you can find out how to continue with global color and font settings here. The explanation of how to set your logo globally can be found at the beginning of this article.
Once you have chosen your structure, you will find it on your page in roughly the same way:
Header: Logo
Now we fill these fields with the widgets we want. As standard, I select the logo on the left and link it to the start page that I have already created. On the left, I want to insert a menu that categorizes my subpages. Here, too, I use a menu that I have already created. You can find out how to create your menu further down in this article.
So I select my first widget from the Elementor widgets and drag & drop it into the desired structure field.
As you can see, Elementor has inserted my globally preset logo directly, but the size does not match my expectations. This means that I now have to edit the logo widget. To do this, I click on the structure field that I want to edit and then on the little blue pencil. This opens the widget settings for this particular widget. Now I can make my changes. And don't forget: when you make settings or changes, always save them!
With a few exceptions, the widget settings generally always consist of content, style and advanced settings that you can make as a user. This allows you to design and change the structure and form of each widget as you wish.
In the picture on the right you can see the default settings of the widget in the content area. I won't be changing anything here for the time being.
In this case, I make my settings at the handle level. But remember here too: Colors, logo and fonts are usually edited at the global level. So if possible, do not make any individual changes here. These instructions only serve as a guide to the functions of the widget settings.
On the left you can see the default settings of the widget and on the right the changes I have made. Whether you change the width and co. via the %, Px or VW is entirely up to you. However, I would recommend that you make the settings via the Px, i.e. pixels.
Since, as already mentioned, settings relating to the logo and co. should be made via the global settings if possible, I do not make any further changes in the advanced widget settings. However, you are completely free to change anything you want according to your wishes and creativity.
Header: Menu
Next, I select the "Nav Menu" widget. Here I can decide whether I want a drop-down menu or a very simple menu. I also make these settings in the widget settings. The widget itself only gives me the option of accessing ready-made menus on my website and displaying them visually.
By default, the Nav menu widget looks like this:
Here you can now choose which menu you want to display. In my case, I have chosen the main menu of my created website. You also decide which type of menu you would like to have under the keyword Layout:
However, I would now like the menu in the structure field to be displayed right-aligned. I therefore make the following setting for the Align item:
Now I am very convinced by the pure appearance of the header.
The last thing that bothers me is the color of the font when I hover over the menu items.
I have already made the global settings for the colors and have therefore already defined the colors globally. I now use one of these colors I have defined and change them in the style area of the nav menu widget.
To do this, I go to Hover in the Main Menu submenu in the style area and then to Text Color. Here I go to the globe, because that's where the globally saved colors are. Then I select my preferred color and save the whole thing once.
Personally, I am now happy with my header. In terms of widgets, I only chose the bare minimum. The website logo on the left and a horizontal menu on the right. Basically, however, you can let your creativity run wild here too. If you are looking for a guide to the other widgets, then take a look at my article on Elementor widgets - 62 widgets exclusively at a glance. There I have listed the most frequently used widgets, basic and pro widgets.
Elementor Footer
To create your Elementor header and footer, you need to go to the WordPress dashboard via the menu on the left-hand side of your screen and click on Templates and then to Theme Builder go. Proceed in the same way as described in the header above.
A footer usually consists of the most important products, services and company or contact details that your website or company offers. However, it is very important that you always have a link to your legal notice, your privacy policy and your terms and conditions here. This is mandatory in Germany. Otherwise, your website will not comply with the GDPR regulations and legal action could be taken against you. Many companies also have their logo here. You can find out how to create a menu in the article below.
Again, proceed as for the header. In the Theme Builder, select the white-blue plus icon ("Add New") and start the creation of a new template. Now select Footer. Next, if you have Elementor Pro, you can again select a template from the Elementor Theme Builder library, I again choose no template and create my footer completely by myself, just like users without Elementor Pro.
As with the header, the first step is to choose a structure. I have decided that I want to create my logo and 3 short menus in the footer. Accordingly, I choose a structure template with 4 structure fields.
Now I have to decide how I want to arrange my selected widgets. I now follow best practice and place my logo on the left and then insert my three menus in the three columns on the right.
As the Elementor Page Builder is based on the drag & drop principle, you simply drag the desired widget into the structure field of your choice.
Now you can see that my logo has been inserted directly. This is because I have already integrated it globally in advance. This means that Elementor can access this data directly and make the changes. You can see how this works in the post above. However, I don't like the way the logo is displayed. In principle, all changes to globally defined information are also made globally so that you don't always have to update it individually, but in this case it is the widget structure that needs to be adjusted, which is why I make my changes myself in the widget settings.
I don't change anything in the content area for the time being. This is where you select the image size, alignment, possible captions or links, for example.
On the left you can see the default settings of the widget in the style area. I only change the widget width here, but remain in the selected structure. If you want to make changes to the structure, you must either go to the advanced settings of the widget, or generally to the settings of the relevant structure field.
However, I am now satisfied with the display of my Elementor site logo widget and am therefore moving on to the next widget.
The procedure is the same for the remaining three structure fields. The only difference is the selected menu within the widget settings in the Content area.
All in all, my footer now looks like this:
You will probably find this structure on many websites. One example is our WPspace website, which I have chosen as a template and best practice.
If you have questions about other widgets, then take a look at my article on other Elementor widgets.
Create Elementor menu
As a rule, you need at least one menu in the header, footer and optionally also in the main area of your website. These are created on the WordPress dashboard itself, as Elementor is only responsible for editing the pages themselves. The pure division of the pages into a menu works as follows:
First you need to go to the area where you create your menus. To do this, go to the WordPress menu in the dashboard on the left-hand side of your screen, click on Design and then on Menus.
The following page will now open:
As I already have menus, I go to the "Create new menu" link. If you don't have one yet, just go to "Create menu".
Next, fill in your data in the menu structure section. Give your menu a name and tick what this menu should be used for. Then click on Create menu on the right.
Once you have completed these steps, the faded section on the left entitled "Add menu items" will become fully visible.
Here you now select the pages that your menu should contain. You have the option of accessing existing pages and simply clicking on them or searching for them. Then you always have to click on the "Add to menu" button and finally save everything.
You also have the option of accessing posts, individual links or categories. For my part, I have only created one post. But I could also link this in my menu. Again, "Add to menu" and save.
It is also possible not only to insert individual links, but also to create placeholders for future pages. To do this, simply add "#" to the URL. You will find this on your keyboard to the left of the Enter key. Then enter the title of your future page as the link text and add the whole thing to the menu using the button.
You will also always see the category to the right of the titles that you used to add the menu items. You can also use drag & drop to move them to the desired location and click on the small arrows on the right to edit the links further.
And never forget: Always save at the end!
You will find the button at the bottom right.
In future, you will find your various menus via the drop-down menu on the top half of the page.
