Use this step-by-step tutorial to learn about the new revolutionary way to customize your WordPress theme without code or plugins!
Customizing your theme is one of the main tasks when building WordPress websites. Since they control a site’s design, this is where many professionals spend most of their time.
Creating a custom WordPress theme usually involves working with the theme files and a code editor. Layout changes happen in the template files, design changes via CSS. Plus, there is typically a lot of refreshing the browser window to view the effect. It can be a bit cumbersome, mainly because you often need to set up a child theme first.
WordPress Theme Customization Without Code
When you customize your theme with Elementor, you can do all of the above straight from the user interface. No need to change a single line of code or reload a browser window even once. It allows you to modify every site element quickly and easily with just a few mouse clicks and in this tutorial you will learn how.
The following post will show you how to take an existing theme and completely customize it via Elementor and built-in WordPress functionality.
It will cover how to:
- Change your site header and footer
- Create and customize page templates for every part of your site
- Control your page’s usage
- Optimize your design for mobile devices.
At the same time, you will learn how Elementor makes this process much easier by using dynamic content and letting you preview your pages. That way, you can immediately see how the design changes are going to affect your actual site and content.
In the end, we want you to feel confident in your ability to customize your theme with Elementor so you can shave significant time and effort off your development process. We have a lot to cover so let’s get started right away.
First Things First: Preparation
This tutorial is about working with an existing theme and your own content. Consequently, before diving into how to adjust a theme to your liking, we first need to create a basic site to work with. So, we will assume you have a fresh and blank install of WordPress and go from there.
1. Choose a WordPress Theme
In order to customize your theme with Elementor, the first thing you need to do is pick one. For this tutorial, I’ll go with something very simple as it makes it easier to demonstrate the changes as we go along.
In addition to that, with a basic theme, you can take it in any direction you want. I have chosen Simplent, which you can see below.
However, it doesn’t really much matter which theme you choose as the principles you will learn below always apply. Additionally, you’ll probably have your own theme requirements depending on the type of site you are building.
2. Add Some Content
As you can see above, besides picking a theme, I also filled it in with some dummy content. While one reason for this is to give you something to see, there’s actually more to it than that.
As you will learn in the tutorial below, Elementor can and will dynamically pull existing content into the preview screen. That way, you can work with your actual site content, customize its design right in front of your eyes and know exactly what it will look like on the page. It doesn’t get more what-you-see-is-what-you-get than that.
Don’t worry if this still sounds a bit abstract at this point, you will soon understand how useful it is.
3. Set a Site Logo
Another thing we will do in terms of preparation is set a site logo via the WordPress Customizer. This will help with your site’s branding and also show up in Elementor. You usually find this setting under Appearance > Customize > Site Identity.
Click the Select logo button to enter your media library and upload your logo file, preferably in the size recommended by your theme.
Select and crop in the next screen if necessary (which it shouldn’t be if you followed my earlier advice) and it should appear on the screen.
Make any other changes you find crucial and don’t forget to click on Publish to push the changes to your live site. Well done.
4. Create a Custom Menu
Next on our to-do list is create a menu. This, too, will appear inside Elementor. So, the next stop is Appearance > Menus.
Enter a new menu name at the top and then click the Create Menu button. After that, populate it with items from the options on the left side.
Change the order of the menu items by dragging and dropping them and create subitems in the same way if needed. Editing the labels via the options is also up to you.
Finally, don’t forget to assign the newly created menu to a theme location so that it will actually show up on your site.
Alright, enough preparation. Now you are ready to learn how to customize your theme with Elementor.
Designing a New WordPress Header
Starting from the top, the first thing you’ll learn is how to change your site header. This will also give you a good overview of the basic ways to work with Elementor for customizing your theme that you will apply throughout the whole process.
1. Create a Header Template
First set up a new header template. For that, go to Elementor > My Templates.
Here, one way to get started is to hit the Add New button at the top. In the next screen, use the drop-down menu to pick Header as the type of template you want to design.
You can also get to this screen by clicking on the Header tab in the previous screen and then hitting the big green button that will appear.
This will pre-select Header as the template type. Either way, you need to add a fitting name for the template (so you’ll know what it is later on) and then continue by clicking Create Template. Doing so will take you here.
With Elementor Pro, you can choose from pre-made header blocks. These are design templates you can use as a starting point for your own design, which is what we’ll do in this case.
When you hover over a header block, a click on Insert lets you start designing it right away. Alternatively, click on the image first to see a larger version. Then, you can still hit Insert at the top.
Alternatively, if want to start from scratch, simply close the window by clicking on X in the upper right corner.
2. Modify the Basic Header Design
After you input the new header, the first thing you’ll notice is that the logo and menu we set up earlier are already present.
That is exactly the reason why we set them up and we will talk about how to customize them soon. However, let’s first see how to customize the entire header section itself.
For that, simply hover over it and click the edit button at the top. This opens up a whole lot of editing options on the left.
Here’s what you can control in the different menus:
- Layout – Control the width of the section, the size of the gap between columns, its height, vertical column and content positioning, its assigned HTML tag and general structure.
- Style – Here you can change the background color including hover effects, even add an image or video if you want, add overlay effects, borders and shape divider as well as modify typography settings.
- Advanced – This part lets you add CSS attributes like margin, padding and z-index, animations, IDs and classes. It also enables you to make the section sticky and control responsive settings (more on both later) as well as to add custom CSS.
All of the above is fairly self-explanatory, and you’ll quickly get the hang of it by merely experimenting around. Be aware, that you can control the settings of the separate navigation menu in the same way. More on that below.
3. Customize Header Elements
However, you can not only modify the header section as a whole but also the elements included in it. For example, to customize the site logo, simply click on it. This, too, will provide you with editing options on the left-hand side.
In the case of the logo, this gives you the following options:
- Content – Change image size, alignment and where it links to.
- Style – Control width and height, add CSS and hover effects, include a border and box-shadow if you want.
- Advanced – Here you basically find the same options as for the header section.
Use the settings to customize the logo in any way you want so it looks good in the header. Also, note that every element has their own type of options, so be sure to check each of them.
4. Add Elements
Of course, with Elementor you are also able to add elements to the header. Just click the symbol on the top right to see what’s available.
When editing a header template, Elementor will automatically display relevant blocks at the top of the list that make the most sense for the circumstances. In this case, these are things like site logo, nav menu, and site title.
So, for example, if you want to add the site title next to the logo, just drag and drop it in there. However, the header template that I chose currently only allows me to add it above or below the logo. But, this is a problem easily remedied.
In a case like this is, first hover over the existing header and use the plus symbol to add a section above it.
Here, click on the purple button to choose a three-column design.
Then, drag the elements from the existing header section into the new one and add the site title in the middle.
But wait, the styling is totally different! No problem. Just right click the existing header and select Copy. Then, right click the new section and here pick Paste Style. Elementor will then apply the style of the existing section, which you can close afterward. More info on this feature here.
You can do the same process with any of the other header elements and, of course, with all other elements included in Elementor.
5. Customize the WordPress Menu
Next up is the menu. Here, too, you can control a lot of its style and behavior after you click on it. Because the menu is a special case, we will cover it in more detail than before.
Under Content, you’ll find the following layout options:
- Menu – Here, you can choose which menu to show on your site. Naturally, this only works if you have more than one saved in the WordPress menu settings.
- Layout – Align menu items horizontally, vertically or as a drop-down menu.
- Align – Move items left, center, right or switch it to no alignment.
- Pointer – Determines the location of the hover effects you can control under Animation.
- Animation – Pick one of many effects for your menu items.
- Submenu indicator – Choose the style of indicator that lets visitors know there are sub-items available.
We will talk about everything in the Mobile Dropdown in the next section. In addition to what was mentioned above, the Style menu has the following settings:
- Typography – Contains the usual settings to control everything related to the text design of your menu items.
- Text Color – Control the color of your menu text in normal state, when hovered over and when active.
- Pointer Color – This is only available for Hover and Active and lets you control the color of the animation present in these states.
- Horizontal and Vertical Padding – Control the spacing around your menu item text.
- Space Between – Shrink or expand the space between menu items.
- Border Radius – Control the border radius (meaning corner curvature) of menu buttons.
We will cover everything under Dropdown and the Toggle Button when talking about mobile responsive settings for menus.
Under Advanced, again, you’ll find the usual settings. However, here, especially the sticky feature (found under Advanced > Scrolling Effect) is interesting as it enables you to fix the menu to the top of the screen. That way, users still have access to it even when scrolling down your page.
6. Make Your Site Sections Mobile Responsive
In addition to the usual settings, every element also comes with options for mobile responsive design. This is indicated by the small computer icon that you’ll find next to many settings. It expands to tablet and mobile options when you click on it.
You can use these to make changes to the design depending on what device people are using to view your site.
For example, you might want to reduce the size of your logo on phone screens. To do so, click on the logo and go to Style. Here, click on the desktop icon under Width and then choose the phone option. When you do so, the preview window will automatically shrink to the appropriate size.
Now, you can make adjustments to the logo width in mobile. The changes will only apply to this type of device. When you click the desktop icon again, it will jump back to its original size.
Sometimes it can even make sense to disable elements on smaller screens altogether. The site title is a good example. Click on it and then go to Advanced > Responsive.
Here, you are able to keep the element from showing up on different screen sizes. When you switch this on for mobile phones and then enter preview mode (the small arrow on the right), you can see what that looks like.
Just keep these settings in mind when designing your site to make sure your mobile experience is as excellent as it is on desktop. Quick note: You can also always check your mobile design by clicking Responsive Mode at the bottom of the menu and then choosing the size you want to preview your site in.
7. Configure Mobile Responsive Settings for the Menu
As can be expected, the navigation menu has additional settings for mobile screens.
Under Content > Mobile Dropdown you can control at what point it will turn into a drop-down menu that users need to toggle to view it. Other options include whether it should stretch the full width of the page, how its menu items align, as well as whether to include a toggle button at all and its alignment.
In addition to that, under Style, you find styling options for the responsive menu. You can control things like:
- text color
- background color
- typography, border
In addition to that, Toggle Button lets you change the design and behavior of the Hamburger Menu Icon. In particular, you can adjust settings for icon and background color, icon size and border settings.
These settings also exist for the hover state. Of course, you can also make the mobile menu sticky in the usual way. In short, you can control pretty much everything concerning your menu.
8. Publish the New Header
Once you are satisfied, it’s time to publish your new header. This is as easy as clicking Publish at the bottom of the main menu.
However, when you do, you will encounter a screen that asks you for the conditions under which the header should appear.
This will happen to you for many different templates, so we might as well cover it now. Click Add Condition.
For conditions, you only have two basic settings: Include and Exclude. Via those you can define where a particular template should appear or not on your site. You can choose between them by clicking on the gray box on the left.
After that, it’s time to set the actual conditions. You do this on the right side. For example, to use the header we just created site-wide, just select Include and then Entire Site as shown above.
If you want to display it everywhere, except for one page, add another condition at the bottom and set it up like this:
It’s all pretty logical, isn’t it? You will figure it out in no time, no worries. To remove any of the conditions, all you need to do is click the big gray X to the right of them.
Also, you can always change conditions later on by opening the Save Options via the arrow next to Publish and then clicking on Display Conditions.
For even more detailed information on conditions, watch our video on that topic.
Once you are satisfied with your current choices, hit the big green Publish button to get your template out on your site.
Well done! You are now familiar with the most fundamental ways of customizing your theme with Elementor. Many of these also apply to everything we will cover next, so from here on in, we’ll pick up the pace a bit.
Customizing Your WordPress Footer
What you can do for the header also works for your site footer. Here, too, you can set up a custom template to use on your WordPress website.
The good news is that, if you have gone through the process of setting up a header, creating a custom footer with Elementor is a cinch.
One of the main differences is that you start doing so via Elementor > My Templates > Footer or Add New and by choosing Footer as the type of template you want to edit.
No surprises here. After that, it’s pretty much the same:
- Name your template and continue
- Choose an existing block or start from scratch
- Customize it with the Elementor options
- Add and modify elements to your liking
- Set conditions for its appearance
The only thing you need to keep in mind is that a footer typically has very different content than the header. Specifically, you usually find a lot of links, icon lists (for links to your social profiles), email subscriber forms and even testimonials. Elementor has options for all of these, so you are set.
Setting Up a Single Post Template
Our next big step in customizing your WordPress theme with Elementor are so-called single templates. These control the design of your posts and pages and are therefore a very central part of the website.
Just a quick note: To effectively work on single post templates, it helps tremendously if you have an example. That’s why, in the beginning, I suggested adding some dummy content to your site, so you have material to work with. If you haven’t done so yet, go ahead and do so.
1. Create a New Template
Creating a template works in the usual way. However, this time choose Single as your template type. Then, below that, pick which single template you wish to edit. In this example that is Post.
If you wanted to create a new page design, change your 404 page (more on that later) or edit a particular custom post type, you would choose something else. In either case, enter a name and continue.
In the next screen, you can pick from pre-designed templates as usual. However, in this case, we want to create a new template from scratch. So, click the X on the top right to close this window.
2. Set Up the Preview
Next up, set the preview window to an existing post. You can do this by clicking on the eye icon at the bottom of the editor options and then Settings.
In the menu that opens up, under Preview Dynamic Content as choose Post. After that, in the next line, you can search and choose an existing post by name.
Once you have done so, hit Apply & Preview. While you won’t be able to see anything at this point (since there is nothing on the page yet), it will tell Elementor to use that post’s data from now on. You will soon see what that means.
3. Build the Above the Fold Section
First off we’ll create the above the fold section of the post. Here, you will typically find things like the post title and metadata like author, date, and category.
The first step is to click on the plus sign and create a single-column section.
When you do, in the layout section you have the possibility to control its width, height, positioning and styling. In this case, there is not much to do here. Also, don’t worry, you can always go back and make changes later.
Next up, pull the post title widget into the new section.
When you do, be sure to use all options available to you to adjust the design and layout to your liking. For example, here are my settings to make it look like above:
There’s also one cool feature that you should learn about. When you click on the wrench symbol for the post title, you can add static content before and after your dynamic data.
For example, if you were creating a template for a certain post category such as news items or recipes, you could add this to the post title like this:
This way, this data would show up for every single post in that category. Since I am building the general template for all of my posts here, I won’t use that at this point, but I thought it was an important side note for you.
Under the post title, we will now insert the Post Info widget to display the post metadata.
Here are the settings that I use:
Plus, I used the Style options to make the design fit the rest of the page. Be sure to do the same.
4. Set Up the Post Body
After the post head, it’s time to create the body of the page. If you want this part to have a different design than the head, it is an option to set up a new section for it. However, I keep it simple, so there is no need to do that.
The first thing we want to insert is the featured image. For that, you can place the widget of the same name under what is already on the page.
I basically did not change any of the settings but just left everything as is.
Then, it’s time for the post content. Here, too, you have a corresponding block.
You will notice that for both the featured image and post content Elementor automatically pulls what is already on the site. Make any adjustments to the design of the new block that you need such as playing with the typography settings.
Aside from that, that’s it. Not too much work to do here so we can move on to the final part.
5. Configure the Post Footer
In this case, we want the footer of the post to include the profile of the author, sharing options and reader comments. To achieve this, first we need to create a new section with two columns. To make more space for the author profile, you can set it to a 66.33 layout.
After that, place the Author Box widget in the left section.
Make sure to style it according to your needs. I added some background color, some padding and adjusted the typography settings a bit.
After that, it’s time to add the Share Buttons block on the right side.
You can see my settings in the screenshot above.
After this, all that’s left is to create one more single-column section underneath and drag and drop the Post Comments widget into it.
(By the way, if you ever have problems locating any of these widgets, just use the handy search function).
Make any adjustments to the comment section you deem necessary (I left it as is) and you are ready to publish. Here is the finished design:
6. Publish the Single-Post Template
Before you push out the new template, a quick warning: Don’t forget to go over the mobile responsive settings. We have already covered how to do that in detail above, which is why we are not doing it here again. However, having proper mobile design is super important, so don’t forget to make any necessary adjustments.
Once finished, publishing your single post template is no different than doing it for the header and footer before. Hit the Publish button, set your conditions and you are done.
However, in the case of blog post templates, it can make sense to know about different use cases. So, here are a few examples:
- Use the new template in all places where blog posts appear: Include – All Posts – All
- Only for specific one post: Include – All Posts – Find post title
- Use for a specific category: Include – In Category – Pick a category
- Display for all posts except one category: Include – All Posts – All, Exclude – In Category – Pick a category
In this case, I want to use this as my design for all blog posts, so I leave the conditions as they are. Once satisfied, hit Publish and you are done.
Customizing Your Archive Template
The last thing we want to go over in terms of templates is archives. Archives exist everywhere where you see a list of posts on your site. This includes your most recent blog posts but can also be things like a category, tag, author or date archive as well as search results. With Elementor, you are able to determine what all of these look like and here’s how.
1. Set up Your WordPress Archive Template
By now, you already know the drill about creating new templates. The only difference is that in this case, you will choose Archive as your template type.
After that, as usual, you get a number of blocks to choose from or can also create your own from scratch. However, for archives, you pretty much only have two Elementor widgets that are important anyway.
2. Set the Archive Title
The first block I want to talk about is the Archive Title.
As the name suggests, this shows the name of the archive on the page. Besides the usual settings under Style and Advanced, you can find one important option when you click on the wrench symbol under Title.
Here, you can switch on and off whether Elementor shows the type of archive on the page such as the part where it says Author: below. This happens via the button under Include Context.
By the way, as usual, you can preview different archives by using the preview settings (Eye Symbol > Settings). That way, you can see the design for singular categories, tags, authors and more. Just keep it in mind.
3. Use the Archive Posts Block
The second important widget for archives is the Archive Posts. This one brings all posts belonging to any archive onto a page. When you choose a pre-made template, they are already on there but you can also easily add them yourself with this block.
Let’s go over what options it gives you for customizing your archive pages:
- Skin – Choose to show off your posts in classic or card-style design.
- Columns – Determines the number of columns your posts are displayed in.
- Show Image – Switch featured images on archive pages on or off.
- Masonry – Display posts in masonry design or not.
- Image Size – The image size Elementor should use on archive pages.
- Title – Do you want to show post titles or not?
- Title HTML Tag – If so, which HTML tag should be wrapped around it?
- Excerpt – Include excerpts from your posts or show only the title.
- Excerpt Length – Determines the length of the excerpts.
- Metadata – Defines which post metadata is available to visitors.
- Separator Between – The separator symbol between metadata information.
- Read More – Include a “read more” link, yes or no?
- Read More Text – Here, you can input what you want the “read more” link to read.
- Badge – Allows you to add more information to posts, such as categories and tags.
- Badge Taxonomy – Here, you can decide what information to include.
- Avatar – With this, you can switch the profile pic of post authors on and off.
In addition to the above, you have some more options. Under Pagination, you can define how archive pagination should be handled. For example, how to display it, the number of pages to include and text alignment.
Finally, Advanced allows you to define the message to display when a visitor lands on an empty archive. Everything else should be familiar. Just note that the Style options change according to which skin you chose.
4. Control the Number of Posts per Archive
One quick note on archive templates. To change the number of posts that appear in an archive (or on your blog page), you need to do so in WordPress under Settings > Reading.
Here, simply input the number of posts you want your visitors to see and save your changes.
5. Publish the Archive
After you set up your archive template (plus, its responsive design, don’t forget!), publishing it works the usual way. Just be sure to assign the right conditions.
You can use the template for all archives (including your latest posts), certain types of archives (e.g. only categories or even one specific category) and even custom post types. It’s up to your site and needs.
One More Note on Dynamic Content
Above, you already saw how Elementor uses dynamic content to make your life easier. It automatically pulls in titles, content, featured images and more of the page you are previewing.
However, there is one more thing worth knowing about, which is that you can also use dynamic content in some blocks that usually contain static information. A good example of that is the Heading block.
You would normally use this to simply put text onto a page that you can input yourself. However, you are also able to have it dynamically pull content existing on your site.
For that, click the little Dynamic link inside the widget settings. With that, you can choose from a multitude of data options that Elementor can fill in automatically.
Once you choose one, don’t forget that the wrench icon enables you to add static content before and after dynamically pulled data as shown above. Just keep an eye out for this, it’s useful for cases like these.
Alright, you are almost done customizing your WordPress theme with Elementor. There are only a few things left, which is configuring important site pages.
Set Your Homepage and Blog Page
Now that we are done with how to design everything, we still need to define the basic site architecture. By default, a WordPress site will show your latest blog posts. However, that is not always desirable, especially for business websites.
In order to be able to change this, you need to create at least two pages – one for your homepage and one for the blog page.
They can both be empty at this point (in fact, your blog page never needs to be filled) but need to be present. Once that’s the case, go to WordPress Settings > Reading, where you’ll find these options:
To create a separate homepage and blog page, switch to a static page and then use the drop-down menus to pick the pages that you want in those places.
Save and you’re done!
Configure Your 404 Page
The 404 page is an error page that appears whenever someone uses a link on your site that doesn’t exist.
It is usually controlled by a WordPress template called 404.php and to alter it, you need to edit the template directly. However, with Elementor you can change it the same way as everything else on your site.
Add a new template and then choose Single for template type and 404 Page for post type.
As usual, you get a few pre-configured templates to choose from.
Apart from that, creating a template for your 404 page works the same way as what we have done so far. Check this post to learn about what is relevant to include on your error page. Once completed and published, it will automatically appear when anyone encounters this error on your site.
For Theme Developers Only: Elementor Theme Locations API
If you are theme developer and would like to enable people to customize your theme with Elementor as shown above, you can use the Theme Locations API.
It allows you to define custom locations in your theme to let users edit them. Locations are pretty much like template parts and replace the usual header.php, footer.php etc. files. For more information about this, check our developer documentation above.
Customizing WordPress themes is the bread and butter of many WordPress professionals. While it usually involves a lot of coding and editing theme files directly, with Elementor that is no longer necessary.
As you have seen above, the plugin is a full-fledged theme editor. It enables you to customize each and every part of a WordPress theme from its user interface. You can change the site header, footer, page and post templates, archive templates and more, quickly and easily.
What’s more, you can create detailed conditions for where the different theme parts show up. Whether that’s sitewide, for a single taxonomy, a single page or any other use case, you can think of. It’s definitely easier than coding conditions by hand.
Plus, thanks to the ability to use dynamic content and preview any part of your site, you can implement all customizations in true what-you-see-is-what-you-get fashion.
In short, Elementor makes customizing your WordPress theme way easier. Instead of laboriously making changes with dozens of files and hundreds of lines of code, you can swiftly do it all in one place.
Do you regularly customize your theme with Elementor? What’s your favorite part of the process? Let us know in the comments section below!