How to Create a WordPress Theme without Coding with Elementor (Step by step)

Theme is one of the most crucial elements of a WordPress site. It is the element that makes your website looks different from other sites. There are a bunch of resources to get WordPress themes. From the official theme directory of WordPress to marketplaces like Themeforest. In order to make your WordPress site be completely different and unique, you can also create your own WordPress theme.

To develop a WordPress theme there are at least three languages you have to master in; PHP, HTML, and CSS. In most cases, you have to also master JavaScript. What if you have no coding skills at all? You still be able to develop a WordPress theme with Elementor. This tool allows you to create a WordPress theme without coding at all!

What is Elementor?

Elementor is a page builder plugin for WordPress. Just like other page builder plugins, you can use Elementor to create beautiful, unique web pages on your WordPress site. What makes Elementor different from other page builder plugins is that it features a theme builder, which allows you to create a WordPress theme without writing any single line of code. Elementor comes with a visual drag and drop editor. You can simply add the design elements (called widgets) to the editor (by dragging them) and make the adjustments according to your needs. Elementor also offers hundreds of free templates you can make use of.

How to create a WordPress theme with Elementor

Before getting started, you need to understand the key elements of a WordPress theme. In general, there are main elements of a WordPress theme; header, footer and single post (and page). Elementor allows you to create these elements without coding.

After you have done creating an element, say header, you can apply it to the entire website or certain pages only. Elementor will replace the header of the currently active WordPress theme, as well as the footer and single post.

One thing you need to know. Elementor doesn’t allow you to put together the theme elements you have created into a single package (ZIP file) like WordPress themes at large. This means that you won’t be able to share your theme with other WordPress users. Well, actually you can. But the WordPress users you share your theme with have to also use Elementor. Elementor itself only allows you to share your theme elements separately, part by part.

In this tutorial, we will guide you on how to create every element of a WordPress theme with Elementor.

Before getting started, make sure that you use the pro version of Elementor since Theme Builder is only available for the pro version.

# Create the header

• First off, login to WordPress dashboard and go to Templates -> Theme Builder.

• On the Theme Builder page, click the Header tab followed by the Add New button to create a new header template.

• Give your header template a name and click the CREATE TEMPLATE button.

• Elementor offers several ready-to-use header templates you can choose from. Simply select the one you want and click the INSERT button to use it.

• If you want to start from scratch instead of using a template, you can simply close the library pop-up to go directly to the Elementor editor. In this tutorial, we will create the header from scratch. The header we are going to create consists of two parts; the sub-header — which lies above the main header — and the main header itself. We will use the sub-header to place things like social media icons, contact info and so on. While the main header will be used to display the site logo and menu.

Sub-header

• The sub-header we are going to create consists of two columns. So, on the Elementor editor, click the plus button to create a new section and choose the two-column structure option.

• If you want, you can change the background of the section by clicking the Style tab. You can change the background on the Background section.

• To add an element, simply drag the element you want from the Elements panel (the panel on the left side) to the editor. The first element we want to add on this example is Icon List. We will use this element to display the phone number and email address.

• You can edit the element you have just added from the Elements panel. You can change the layout, change the default icon or change the text color/style. Switch to the Style tab every time you want to customize the text or icon. (To turn an element into editing mode, click the concerned element on the Elementor editor)

• Add another element on the second column. On this example, we add the Social Icons element.

• Again, you can edit this element via the Elements panel on the left side. Play around with this panel to customize your social media icons.

The main header

• We will also use two columns for the main header. The first column (the left one) to place the site logo and second column (the right one) to place the site menu. Click the plus button on the Elementor editor to add a new section and select the two-column structure option.

• Drag the Site Logo element from the Elements panel to the editor. You can find this element (Site Logo) on the SITE section. Elementor will automatically add your site logo.

• Set the alignment and size. To set the size, you can switch to the Style tab and change the width value.

• Add another element (Nav Menu) to the second column. You can find this element on the SITE section as well. Elementor will automatically add the WordPress menu you have had.

• Again, you can also play around with the Elements panel to customize your menu. You can set things like the text color, hover color, hover width and so on. Elementor itself will automatically add the main navigation to this menu. If you have more than one menus on your WordPress site, you can set which one you want to display by clicking the dropdown menu on the Menu section under the Content tab.

• If you want, you can also set your menu to be sticky. To do so, select the top section (sub-header) and go to the Advanced tab. On the Sticky option, select Top.

• Repeat the steps above on the second section (the main header). If you want, you can also add other elements like search box. Just play around until you get satisfied with the result. Once you are done, click the PUBLISH button. You can also preview the result before clicking the PUBLISH button.

• You will be asked to add a condition. Simply click the ADD CONDITION button to add one.

• If you want to enable your header to the entire website, you can simply click the SAVE & CONTINUE button since by default your header template will be applied to the entire website. Conversely, if you want to apply your header only on a specific page (or post) you can choose the page you want via the dropdwn menu. Once done, click the SAVE & CONTINUE button.

# Create the footer

Now that you are done creating the header, let’s take a switch to the footer section. Same as the header, Elementor also provides ready-to-use footer templates to save you time. On this example, we are going to create the footer from scratch. The footer we going to create consists of a single column. We will add social media icons as well as pages like about page, contact page, terms of use, and privacy policy.

• To get started, go to Templates – >Theme Builder.

• On the Theme Builder page, select the Footer tab and click the Add New button.

• Give your template a name and click the CREATE TEMPLATE button.

• Since we want to create the footer from scratch, close the library pop-up to open the Elementore editor.

• Click the plus button on the Elementor editor to add a new section. Select the single column structure option. You can customize the section like setting its background color, set the typography (font color and style) and so on. Simply go to the Style tab to customize the section.

• Drag the Social Icons element from the Elements panel to the editor. Again, you can play around with the Elements panel to customize the icons.

• To display the site’s pages (about page, contact page, terms of use and privacy policy) we are going to use the Icon List element. So, drag this element to the editor.

• Play around with the Elements panel to customize the Icon List element. Once you are done, you can click the PUBLISH button.

• Click the ADD CONDITION button to set where you want to apply the footer template.

• If you want to enable your footer template to the entire website, you can simply click the SAVE & CONTINUE button since by default your footer template will be applied to the entire website. Conversely, if you want to apply your footer only on a specific page (or post) you can choose the page you want via the dropdwn menu. Once done, click the SAVE & CONTINUE button.

# Create the single post layout

Elementor also allows you to create a custom layout of single post. On this example, we are going to create a single post layout like the following.

It takes four sections to create a single post layout like the one above.

• Section one: to place the featured image and post info.
• Section two: to pace the post content, social share buttons, author box, and the sidebar.
• Section three: to place the email subscription form.
• Section four: to place the post navigation and the post comment.

Follow the steps below to start creating the single post layout.

• On the WordPress dashboard, go to Templates -> Theme Builder.

• On the Theme Builder page, go to the Single tab and click the Add New button.

• Give your template a name. On the Select Post Type section, select Post. Click the CREATE TEMPLATE button to go to the Elementor editor

• A pop-up will appear, offering some of the ready-to-use templates you can choose from. Since we want to create the single post layout from scratch, simply close this pop-up.

Section one

• Click the plus button on the Elementor editor to create a new section. Select the single column structure option.

• Click the Style tab on the Elements panel. On the Background Type option under the Background section, select Classic. Set image to Featured Image.

• Set the size to Cover. On the Repeat option, select No-repeat.

• Drag the Post Title element to the editor.

• Go to the Style tab to customize it. You can also go the Advanced tab to make advanced settings like margin and padding. On this example, we set the left margin to 30.

• Drag the Post Info element to the editor.

• Remove the unnecessary items and go to the Style tab to customize it. Also go to the Advanced tab to set its left margin to 30.

• Drag the Spacer element to the editor and place it above the Post Title element. Set its value to about 110.

• Duplicate the Spacer element you have just added and move it beneath the Post Info element.

Section two

• Click the plus button on the editor to add a new section. Select the two-column structure option. Set the width of the columns with a comparison of about 68:32 %.

• Drag the Share Buttons element to the left column on the section you have just added.

• Go to the Advanced tab and set the margin. Set the top margin to 30, the left margin to 20, and the right margin to 50 (you can use the different values if you want).

• You can go to the Style tab to customize the button. Just play around to get the buttons you want.
• Drag the Post Content element to left column and place beneath the Share Buttons.

• Go to the Advanced tab and set the margin. Set the top margin to 15, the left margin to 20, and the right margin to 50 (you can use the different values if you want).

• You can go to the Style tab to set the typography style (like font style, font color, and font size).

• Drag the Author Box element to the second column (the right one).

• Go to the Advanced tab and set the margin. Set the top margin to 20, the left margin to 15, and the right margin to 15 (you can use the different values if you want).

• Again, you can go to the Style tab to customize this element. You can set things like the image size, typography, and so on. Just play around.

• Drag the Sidebar element to second column and place it beneath the Author Box.

• Return to the Elements panel and select a sidebar (a WordPress sidebar) you want to display.

• Go to the Advanced tab and set the margin. Set the left margin to 15, and the right margin to 15 (you can use the different values if you want).

• Activate (select) the right column and go to the Style tab (you can use the Navigator to ease your job). Change its background to white.

• Keep on the second column, switch to the Advanced tab and set the top margin to -85.

Section three

• Click the plus button on the Elementor editor and select the single column structure option.

• Drag the Inner Section element to the section you have just added and set the width of the columns with a comparison of about 68:32 %.

• Activate (select) the first column (the left one) and go to the Style tab to change its background to grey (or any color you want)

• Drag the Form element to the left column. Since we want to use this form as an email subscription form, remove all of the form items but the email.

• With the Form element selected, go to the Advanced tab to set the margin. Set the right margin to 15, the left margin to 15, and the bottom margin to 15 (you can use the different margin values if you want).

• Go to the Style tab to customize your form. Play around until you get satisfied with the result.

• Drag the Heading element to the first column and place it above the form and write a title like “Enjoyed this article? Stay informed by joining our newsletter!​”.

• With the Heading element selected, go to the Advanced tab to set its margin. Set the top margin to 15, the right margin to 15, and the left margin to 15.

• Again, you can also go to the Style tab to customize your heading.

Section four

• Click the plus button on the Elementor editor and select the single column structure option.

• Drag the Inner Section element to the section you have just added and set the width of the columns with a comparison of about 68:32 %.

• Drag the Post Navigation element to the first column (the left one).

• With the Post Navigation selected, go to the Advanced tab to set its margin. Set the top margin to 10 and the bottom margin to 10.

• Drag the Post Comments element to the first column and place it below the Post Navigation.

• Once you are done, click the PUBLISH button to publish your template.

• By default, your single post layout template will be applied to all posts of your website. If you want it to be applied to a certain post, type the title of the existing post on the All section. Once done, click the SAVE & CLOSE.

Until here, you have successfully created your own WordPress theme. If you want, you can also design the homepage of your website. We don’t cover it here since it will be too long. You can see examples of websites built with Elementor by visiting its Showcase page.

If you want to create a new website with Elementor, we strongly suggest use a proper Elementor hosting service like Kinsta, Pressidium, and Pressable.