Would you like to find out how to customize a WordPress theme with the Elementor plugin ?
Customizing your WordPress theme is one of the main tasks when building WordPress websites. Since she controls the design of a website, 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 template files, design changes through CSS. Also, you'll have to constantly refresh the browser window to show your customizations, which can be a bit of a cumbersome.
Fortunately, with Elementor, this process becomes extremely easy, so you might want to check it out.
But before, let's discover together How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog.
Then, back to why we are here.
What is a WordPress theme
A WordPress theme is, in essence, a collection of templates that define the visual appearance of a WordPress website.
The WordPress theme encompasses everything that affects the design of a website, from headers and footers to color scheme, layout, and more.
There are plenty of themes available, both free and premium, which fit almost any industry like photography websites, gym club websites, hair salon websites, law websites, And much more.
Why customize a WordPress theme?
One of the main reasons for creating a website is to promote your business. What better way to do that than to create a website unique that promotes the style and design of the company.
Can you imagine Amazon, eBay, or Google being what they are without their unique design?
Of course not, and that's one of the reasons we want to customize a WordPress theme. We want to make it unique and adapt to the message of our company.
Also, sometimes, or rather, often, you run through a WordPress theme that is plagued by poor design, colors that don't go well together, or a theme that is too heavy and only impacts site performance. web. WordPress theme could be powerful except for that thing that bothers you. Customize it and change this thing could solve all your problems and create better user experience.
How to customize a WordPress theme
There are several methods to customize a WordPress theme.
- Manually, via the WordPress customizer
- With the code
- With Elementor
How to manually customize a WordPress theme
You can customize the WordPress theme of your choice via the built-in WordPress Customizer. If you do it without code, you are often limited in what you can change. Some WordPress themes premium allow you more customization options, but in essence there aren't a lot of design options for you.
Before we dive deeper into this area, we would like to point out that when you customize an existing WordPress theme, it is best that you use a child theme and not the parent theme.
WordPress child theme
A child theme is a WordPress theme that has exactly the same functions and characteristics of another WordPress theme, the parent theme. The child theme is used to safely customize and modify the theme, without affecting the parent theme and without losing the ability to update it.
WordPress theme customizer
So now that we know it's best to work with a child theme, let's learn how to customize a theme with the WordPress Customizer. To access it, go to your dashboard, click on Appearence on the left side and choose Personalize.
The main features that you can modify with this Customizer are as follows:
Adding a website title, logo and icon
To add or change your title, logo or icon, you can simply go to the Identity panel of the website. and choose each of these elements to modify them.
Changing the colors of the WordPress theme
Some WordPress themes will allow you to change their color schemes, but not all of them, and they are usually WordPress themes premium. If your WordPress theme allows you to change the color scheme, you will see this option when you access the Customizer.
Added navigation menus
The Customizer also allows you to easily add and modify your website navigation menus.
How to customize a WordPress theme with code
You will notice that under the Appearance tab, you have the option to choose the theme editor. Clicking on it will greet you with a window with the theme code. This option requires a good understanding of CSS coding and is not recommended for beginners.
Here you will have access to files like style.css, function.php, and this is exactly the scenario that you will need a child theme for so that you don't break your website.
The other way to customize your theme by coding is to upload files using an FTP solution. The process involves creating FTP credentials through your hosting provider, downloading and installing an FTP solution (like FileZilla), logging into your account and editing your files, which you'll then upload through the same. FTP solution.
Discover our guide on How to install WordPress with FileZilla
Unless you're familiar with coding, we don't recommend this option.
Customize a WordPress theme easily with Elementor
You can do this directly from the user interface. There's no need to change a single line of code or reload a browser window, even once.
Elementor lets you change every element of the website quickly and easily with just a few mouse clicks and you can even optimize these features for the mobile platform.
Elementor makes this process much easier by using dynamic content and allowing you to preview your pages. This way, you can immediately see how the design changes will affect your actual website and content.
Customize the header and footer
Elementor allows you complete flexibility when it comes to designing your headers and footers. We all know how boring it can be, that you have a WordPress theme, and you can't change a single aspect of the header or footer design. You need specialized themes, plugins, etc.
With Elementor, it's easy.
1. Create a header template
First configure a new header template. To do this, go to Elementor> My Templates.
Here one way to start is to hit the Add New button at the top. In the next screen, use the drop-down menu to select Header as the type of template to design.
You can also reach this screen by clicking on the Header tab from the previous screen and then pressing the large green button that appears.
It will pre-select the header as the template type. Either way, you need to add a suitable name for the template (so you know what it is later) and then continue by clicking on Create Template.
It will get you here.
With Elementor Pro, you can choose from pre-designed header blocks. These are design templates that you can use as a starting point for your own design, which is what we're going to do in this case.
When you hover over a header block, clicking Insertion allows you to start designing it immediately. Otherwise, click on the image first to view a larger version. Then you can always press Insertion up.
Otherwise, if you want to start from scratch, just close the window by clicking X in the upper right corner.
2. Change the basic header design
After entering the new header, the first thing you will notice is that the logo and menu we configured earlier are already there.
This is exactly the reason we put them together and we're going to talk about how to customize them. However, let's first see how to customize the header section itself.
To do this, just hover over it and click the edit button at the top. This opens a list of editing options on the left.
Here is what you can control in the different menus:
- layout - Control section width, size of space between columns, height, vertical column and content placement, assigned HTML tag and general structure.
- Style - Here you can change the background color including the hover effects, even add image or video if you want, add overlay, border and divider effects as well as change typography settings.
- Advanced - This part allows you to add CSS attributes like margin, and z index, animations, IDs and classes. It also allows you to make the section sticky and control the settings responsive as well as add some Custom CSS.
All of the above is pretty self-explanatory, and you will quickly get what you want.
3. Customize the header elements
However, you can not only edit the header section as a whole, but also the items included in it. For example, to customize the website logo, just click on it. This, too, will provide you with editing options on the left side.
In the case of the logo, this gives you the following options:
- Content - Change the image size, alignment and the place to which it is linked.
- Style - Control width and height, add CSS effects and hover effects, include border and shadow if you want.
- Advanced - Here you will find essentially the same options as for the header section.
Use the settings to customize the logo the way you want it to display well in the header. Also note that each item has its own type of options, so be sure to check each one out.
4. Add items
Of course with Elementor you are able to add elements to the header as well. Just click on the symbol at the top right to see what's available.
When editing a header template, Elementor automatically displays the relevant blocks at the top of the list, which makes the most sense under the circumstances. In this case, these are things like the website logo, the nav menu and the website title.
So for example, if you want to add the website title next to the logo, just drag and drop it on it. However, the header template we have currently chosen allows us to add it above or below the logo. But, it is a problem that will be easily resolved.
In a case like this, hover over the header and use the plus symbol –+-to add a section above.
Click here on the purple button to choose a three column design.
Then drag the elements from the existing header section into the new section and add the website title in the middle.
But wait, the style is totally different! no problem. Just right click on the existing header and select Copy Then right click on the new section and click here on PasteStyle. Elementor will then apply the style of the existing section, which you can close later.
You can do the same process with any of the other header elements and, of course, with all the other elements included in Elementor.
Customize a unique post template
In Elementor, you can also customize a single post template. Here's how :
1. Create a new model
Creating a template works in the usual way. However, this time choose Single as the model type. Then, below, choose the unique template you want to edit. In this example, that of Post.
If you want to create a new page design, edit your 404 page (more on that later) or edit a custom post type particular, you would choose something else. In either case, enter a name and continue.
In the next screen, you can choose from the predefined templates as usual. However, in this case, we want to create a new model from scratch. So click on the X at the top right to close this window.
2. Configure the preview
Then 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, then Settings.
In the menu that opens, under Preview dynamic content, choose Publish. After that, in the next line, you can search and choose an existing post by name.
Once you've done that, tap Apply & Preview. While you won't be able to see anything at this point (as there is nothing on the page), it will tell Elementor to use the data in this post from now on. You will soon see what this means.
3. Let's create the section Above
First, we'll create the section above. Here you will usually find things like the post title and metadata like author, date, and category.
The first step is to click on the sign + and creating a single column section.
When you do, in the layout section, you have the option to control its width, height, positioning, and style. In this case, there is not much to do here. Also, don't worry, you can always go back and make changes later.
Then drag the post title widget to the new section.
When you do, make sure to use all of the available options to adjust the design and layout to your liking. For example, here are my settings for doing it:
There is also a cool feature that you should learn. When you click the key symbol of the post title, you can add static content before and after your dynamic data.
For example, if you create a template for a certain post category, like news or recipes, you can add it to the post title like this:
That way, that data would show up for every post in that category. I'm not going to use this at this point, but thought it was an important side note for you.
Under the title of the post we will insert the Post Info widget to view the post's metadata.
Here are the settings I use:
Additionally, I used the styling options to make the design fit the rest of the page. Make sure you do the same.
4. Set up the post body
After the header, it's time to create the body of the page. If you want this part to have a different design than the header, you will need to set up a new section. However, I keep it simple, so I don't have to.
The first thing we want to insert is the featured image. For this, you can place the widget of the same name under what is already on the page.
I basically didn't change any of the settings, just left everything as is.
Then it's time for the content to post. Here too you have a corresponding block.
You'll notice that for featured image and post content, Elementor automatically pulls what's already on the website. Make any adjustments to the design of the new block that you need, for example playing with the typographic settings.
Other than that, that's all. Not too much work to do here so that we can move on to the last part.
5. Configure the footer
In this case, we want the footer to show the author's profile, sharing options, and reader comments. To do this, first of all, we need to create a new section with two columns. To create more space for the author profile, you can set it to a 66.33 layout.
After that place the widget AuthorBox in the left section.
Make sure to customize the style to suit your needs. I added a little background color, and adjusted the typography settings slightly.
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 that, all that's left is to create a section one more column down and drag and drop the Post Comments widget into it.
(By the way, if you ever have trouble locating any of these widgets, just use the search function).
Make any adjustments to the comments section you feel necessary (I left it as is) and you're ready to post. Here is the finished design:
Customize the archive template
1. Configure your WordPress archive template
By now you already know the solution on creating new models. The only difference is that in this case you will choose Archive as the model type.
After that, as usual, you get a number of blocks to choose from or you can also create your own model from scratch. However, for archives you have roughly only two widgets Elementor which are important anyway.
2. Define the title of the archive
The first block I want to talk about is the archive title Archive Title.
In addition to the usual settings under Style and Advanced, you can find an important option when you click on the key symbol under Title
Here you can enable and disable whether Elementor shows the archive type on the page like the part where it says Author: below. This happens through the button under Include Context.
By the way, as usual, you can preview different archives using the preview settings (Eye Symbol> Settings). This way you can see the design for unique categories, tags, authors, and more. Keep it in mind.
3. Use the archive publications block
The second important widget for archives is Archive Posts. This brings all the posts belonging to any archive on one page. When you choose a template they are already there, but you can also easily add them yourself with this block.
Let's take a look at the options it gives you to customize your archive pages:
- Skin - Choose to display your posts in a classic or card style design.
- Columns - Determines the number of columns in which your posts are displayed.
- Show Image - Activate featured images on archive pages
- Masonry – Displays items in masonry design or not.
- Image Size - The size of the image Elementor should use on archive pages.
- Title - Do you want to display post titles or not?
- Title HTML Tag - If so, what HTML tag should be wrapped around it?
- Excerpt - Include excerpts from your posts or only show the title.
- Except Length - Determine the length of the extracts.
- Metadata - Defines the post metadata available to visitors.
- Separator Between - Separator symbol between metadata information.
- Read more - Include a "read more" link, yes or no?
- Badge - Allows you to add more information to posts, such as categories and tags.
- Taxonomy badge - Here you can decide what information to include.
- Avatar – With this you can change the profile picture of the authors of the articles
In addition to the above, you have a few more options. Under Paging, you can define how archive paging should be handled. For example, how to display it, the number of pages to include and the alignment of the text.
Advanced allows you to set the message to display when a visitor lands on an empty archive. Everything else should be familiar. Just note that the style options change depending on the skin you have chosen.
4. Control the number of publications per archive
A 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, just enter the number of posts you want your visitors to see.
Personalization easy WordPress theme with Elementor
Customizing WordPress themes is the bread and butter of many professionals. Although this usually involves a lot of coding and editing of files, with Elementor this is no longer necessary.
As you saw above, the plugin is a full-fledged WordPress theme editor. It allows you to customize every part of it from its user interface. You can edit the website header, footer, page and post templates, archive templates, and more.
With the ability to use dynamic content and preview any part of your website, you can implement all the trendy customizations
In short, Elementor makes it easy to customize your WordPress theme. Instead of painstakingly making changes with dozens of files and hundreds of lines of code, you can quickly do it all in one place.
Get Elementor Pro Now!
Conclusion
There it is ! That's it for this article that shows you how to customize a WordPress theme with the Page Builder Elementor. If you have any concerns about how to get there let us know within Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
