According to the stats we read on CodeinWP, 34% of websites existing on the internet are built with WordPress. It’s not a hard job to find examples of websites built with WordPress. Even big brands like TED, Sony PlayStation, Microsoft to Spotify also use WordPress for one (or some) of their sites (you can use tools like Builtwith to prove this). The global CMS market share of WordPress itself is about 50-60%. You can see more websites built with WordPress on the Showcase page of WordPress.

Despite the extensive adoption, WordPress users can have a unique website because they use a different theme. Yes, theme is something that makes your WordPress site looks different from other sites. Speaking of theme, there are thousands of themes on the official theme directory of WordPress. Not to mention marketplaces like Themeforest which — according to CodeinWP trades — over 11,000 WordPress theme.

Of course, you can also create your own WordPress theme to create a completely different, unique WordPress site. However, you need to at least master four languages that construct a WordPress theme: PHP, CSS, JavaScript, and HTML.

Is there a way to create a WordPress theme without coding? Yes, there is. You can create a WordPress theme without even writing any single line of code. You can do so with Elementor.

What is Elementor?

Elementor is technically a page builder plugin for WordPress. You can use it to create beautiful pages on your WordPress sites without having to be a master at CSS or HTML thanks to its drag and drop visual interface.

What makes Elementor different from other page builder plugins is that it comes with a theme builder feature, which allows you to create a WordPress theme without writing any single line of code. All you need to do is to drag the design elements from the left panel to the editor on the right side.

Things to know before creating a WordPress theme using Elementor

In general, there are three key elements of a WordPress theme. They are header, footer, and single post layout. Elementor allows you to create these three elements, along with other elements like archive page and 404 not found page. In this example, we will walk you through the steps to create the header, footer, and the single post layout. The rest, you can follow the steps we are going to show you on other elements you want to create.

Another thing you need to know before creating a WordPress theme using Elementor is that you won’t be able to share your theme files in a single ZIP file like WordPress themes at large. Instead, if you want to share the theme you have created, you can only do so separately. Part by part. Your templates (theme elements) can be exported into a JSON file and can be imported to another Elementor-powered WordPress site.

One more thing, the theme builder feature of Elementor is only available on the pro version of Elementor, which costs only $3 per month.

Let’s get started.

# Step 1: 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 dropdown menu. Once done, click the SAVE & CONTINUE button.

Following is the demo f the header we have created.

# Step 2: 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 dropdown menu. Once done, click the SAVE & CONTINUE button.

Following is the example of the header we have created.

Step 3: 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. Goo to the Advanced tab as well 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 the left column and place it 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 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.

Following is the example of the single post layout template we have created.

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.

The verdict

Elementor is the best tool to create a WordPress theme without coding. By far, for years of working with WordPress, we have never found such a cool tool like it. Another page builder plugins might already exist before Elementor. But, Elementor is something else. Its interface is super intuitive.

Another good thing about Elementor is that it has an open enough ecosystem. While it already has plenty of design elements, third-party developers are welcomed to create design elements that are not available on Elementor yet.

In addition to creating beautiful pages and themes without coding, Elementor also has a feature to create pop-ups.