This is part of a series of posts I wrote about migrating a number of WordPress sites I run from a single multi-site setup to separate single site configurations. Along the way I also switched to a more modern, and configurable, theme and a theme manager/editor.
- Migrating to a Single Site Setup
- Learning Elementor
- Wouldn’t It Be Nice if WordPress and Elementor Were Better Structured?
Page Content
Creating an Elementor Header
With a better understanding of Elementor and WordPress themes the first thing I wanted to do was create an Elementor header template. So I clicked on Templates in the admin toolbox and was promptly confused:
I knew I’d created a bunch of templates (which I was going to replace)…and yet only a subset of them showed up. Compare the entries pointed to by the red arrow with the information displayed above the template list (blue arrow). There should be six templates visible since looking at all the saved templates. But there are only two. To see all the templates you need to click on the Published link, after which they’ll appear.
Notice also that the tabs seem to indicate that only Saved Templates, Pages, Sections and Global Widgets are stored and available. The reality is that there was a header and footer defined when I took this screenshot…but the corresponding tabs don’t show up. They will, though, after you click that Published link.
This is an example of something that crops up occasionally when using Elementor: if you don’t see what you know should be there, refresh the page or click on an “all” link to force the missing items to be displayed.
Creating a header is straightforward: just click on Add New, select Header from the dropdown that appears, assign a name to the new header, and begin editing. If you have a Header tab showing click on Add New and Elementor will preselect Header from the dropdown and wait for a name.
Here’s an example of a header I designed:
All of the visual elements you see — the picture (which is actually an image carousel), the navigation menu, the site tagline, the site name and the Subscribe and Posts by Category buttons — are objects that I added to the canvas from the Elementor toolbox.
But the arrows point to other design elements which are in a sense more important than the obvious ones. Elementor works around the concept of sections and columns. Each section can have one or more columns (it can also contain inner sections, which can in turn hold one or more columns). You can add, delete and resize them through the property window (which is off-screen to the left of the image) or by dragging demarcation lines on the canvas.
You can also set properties on the sections and columns by selecting them so that their properties are editable in the property window. The section “handles”, which enable them to be selected or dragged, are the blue/white icons pointed at by the red arrows. The column “handles” are the gray/white icons pointed at by the green arrows.
The yellow arrow points to a “shape divider” that belongs to (is a property of) the outermost section (the one whose handle is at the very top of the image). The wave shape you see is simply the result of selecting various properties of the shape divider; no custom drawing (at least by me) was involved.
The basic structure of the header is simple: a single section which contains two inner sections (Inner 1 and Inner 2). Inner 1 contains the navigation menu (which is an Elementor widget that points to a menu I built in the theme’s customizer). Inner 2 contains two columns. The left one contains the tagline, site name and the two buttons. The right one contains the image carousel.
Why did I set it up this way? Because I wanted the gradient fill to apply to the entire header. If I’d used two separate outer sections stacked on top of each other I would’ve had to coordinate the gradients together somehow. Which I don’t think is possible, at least not without some custom programming.
One last point about the layout: Elementor includes the concept of gaps between sections and between items within columns. There’s a default gap that you can adjust globally. There are also options to eliminate or change the way gaps are applied for each section and column. These properties are different than margins and padding (which also exist as properties of certain visual elements) and generally more useful when creating responsive designs because they allow for shifting things around automagically. I was able to compress the gap around the navigation menu by setting its containing section’s gap to “no gap” while leaving the outermost section’s gap set to “default”.
Creating an Elementor Footer
Creating a footer is very similar to creating a header but you just pick “Footer” when you create a new Elementor template (or click Add New while on the Footer tab of the Saved Templates page). Here’s an example of what the end result can look like within the Elementor editor:
So far as the footer is concerned you’ll notice that it’s built around two stacked outer sections (the lower one contains the copyright slug). The upper section has a four column inner section. Three of the four columns contain title slugs and text areas while the right-most one contains an Elementor login widget.
But the main thing I want to draw your attention to is the header pointed at by the red arrow. This is not editable here because it’s not part of the footer. It’s appearing on the footer canvas because it’s set as the site-wide header.
That’s because we set the usage condition for the header template to be site-wide:
One of the confusing things, for me, about WordPress and Elementor is that there isn’t one central place where you define the settings which control how your site displays. Some settings are in WordPress Settings. Some are in the theme’s customization properties. And some are in Elementor itself. It probably has to be this way to support WordPress’ open architecture…but it can make life difficult particularly if you only work in WordPress’ design environment occasionally.
Creating an Elementor Sidebar
The last piece of my example is a sidebar. Here’s how what I built looks like within the Elementor editor:
Once again the header and footer showed up because they’re set to display site-wide. But what I want to point out is that the sidebar content itself — the picture, the Categories widget and the Archives widget — occupy the full width of the canvas. You might think you have to constrain them — by setting the width of the Elementor section they’re inside — to a more appropriate width.
But you don’t. One of the nice things about Elementor is that the sizing is taken care of automatically by the page or post in which you embed the sidebar.
Which is a natural segue to discussing how you use all three pieces — header, footer and sidebar — to create pages and templates.