Unable to Edit Footer in Elementor? Here is How to Fix It

There are some potential technical issues you will face when working with Elementor. One of which, you might won’t be able to edit your template as the editor doesn’t show up as usual.

Today, we were working on a footer for one of the template kit projects we are working on. Normally, you can go to Templates -> Theme Builder and click the Footer tab to create a new footer. Everything went well at first. But, as we clicked the Add New button and select one of the available templates on the template library, the Elementor editor didn’t show up.

We tried several things from disabling and re-enabling the Elementor plugin to creating a new footer template. Nothing worked. So how to fix this problem?

Turns out, the problem above is caused by the theme we use. At the moment the problem happened, we used Mitra Version: 1.0.1. Once we switched to Twenty Seventeen, everything back to normal.

If you are experiencing the same problem, try to do the same thing we did. First off, go to Appearance -> Themes.

Hover your mouse over one of the available themes on your site and click the Activate button to activate it.

Now, try to create a new footer or create an existing one.

Final words

Mitra itself is a free theme developed by a developer named Manesh Timilsina. In addition to Mitra, the developer also developed several WordPress themes that are released for free. We tried another free theme, Agency Plus, and tested out if we can create a custom footer. Everything went well with Agency Plus.

How to Create a Custom Category Template in WordPress with Elementor

If you run a large dynamic website, putting together the articles by category is a great idea since it allows your visitors to find an article more easily. For instance, if you run a travel-related website, you can create categories like destination, travel story, and so on. Visitors who are looking for a tourist destination reference can simply go to the destination category.

Depending on the theme you use. Some WordPress themes, especially newspaper themes sold on Themeforest like Newspaper by tagDiv, allow you to customize the look of the category template.

If you have fallen in love with the WordPress theme you are currently using, yet not too impressed with the look of the category template, you can create a custom category template to replace it. Don’t worry, you don’t have to be master in PHP or CSS to create a custom category template. You can even do so without coding with Elementor.

Note: Theme Builder is only available on Elementor Pro. Find the differences between Elementor Free vs Elementor Pro.

How to create a custom category template with Elementor

In order to be able to create a custom category template without coding in WordPress with Elementor, you need to use the pro version. The pro version of Elementor comes with a Theme Builder feature which you will need to create a custom category page.

There are two ways to create a custom category page in WordPress using Elementor. First, you can create one from scratch. Second, you can use one of the available templates offered by Elementor. This example will show you how to create a custom category template from a template.

By the way, the following are the widgets offered by Elementor Pro to work on a custom category page.

  • Archive Title
  • Archive Posts
  • Author Box

Of course, you can also add other widgets/elements to your category page according to your needs.

Let’s get started.

  • Login to your WordPress dashboard and go to Templates -> Theme Builder.
  • On the Theme Builder page, go to the Archive tab and click the plus icon to create a new template.
  • As mentioned earlier, we will create the custom category template from a template instead of from scratch. So, select one of the available templates on the template library and click the Insert button to take it to the Elementor editor.
  • Once the template is loaded to the Elementor editor, click the PUBLISH button on the bottom side of the left panel.
  • Next, you will be asked to set the display condition. Click the ADD CONDITION button to add one.
  • Specify where you want your template to be applied to. If you want it to be applied to all categories on your website, simply select Categories from the dropdown menu. If you want it to be applied to a specific category, you can specify the category you want on the selector on the right side. Click the SAVE & CLOSE button once you are done specifying the category.

How to customize the category template

If you create a custom category template from a template instead of from scratch, everything is determined by the template creator, the Elementor team in this case. If there are some parts you want to change or remove, you can do so.

Each template consists of several sections, which you can find via the Navigator.

On the screenshot above, the template consists of three sections. Each section hosts the widgets used on the template. You can see what widgets inside a section by clicking the tiny arrow icon.

To delete a section or widget, you can right-click and select Delete. If you want to customize a widget, you can activate (by clicking it) the widget you want to customize and go to the left panel to start customizing.

There are lots of options you can set. To change things like typography options, color options, background, and other styling options, you can go to the Style tab. Just play around with the left panel until you get satisfied with the result.

How to Create a Custom Single Post Template in WordPress with Elementor

Sometimes, you love everything from the WordPress theme you use, but not the single post template. Some WordPress themes, like Newspaper by tagDiv, offers multiple single post template options, allowing you to use different post templates according to the type of articles you want to publish. Is it possible to create a custom single post template yourself? Of course.

If you don’t like the look of the single post template offered by your current theme, you can create a custom single post template to replace it. If you have a coding skill (PHP and CSS), then there is no problem to create a custom single post template. Don’t worry, you still be able to create a custom single post template even if you have coding skills. Elementor allows you to create a custom single post template without coding using its drag and drop editor.

Elementor is a WordPress page builder that has a Theme Builder feature. The Theme Builder feature of Elementor allows you to create custom elements of your theme. From header, footer, and single post layout. When creating a custom single post template with Elementor’s Theme Builder, you will be able to add the following elements:

  • Featured image
  • Post title
  • Post meta
  • Author box
  • Post comments
  • Post excerpt
  • Post content

In addition to the elements above, you can also add other elements offered by Elementor, including email subscription form (which is great if you use services like MailChimp or MailerLite).

How to create a custom single post template with Elementor

There are two ways to create a custom single post template with Elementor. You can either create one from scratch or use one of the available templates instead. In this post, we will show you how to create a custom single post template using one of the available templates.

  • First off, login to your WordPress dashboard and go to Templates -> Theme Builder.
  • On the Theme Builder page, hover your cursor over the Single Post tab and click the plus icon to create a new template.
  • As mentioned, we will use one of the single post templates offered by Elementor. So, select one of the templates on the appearing template library and click the Insert button to take it to the Elementor editor.
  • Once the template is loaded to the Elementor editor, click the PUBLISH button on the bottom side of the left panel.
  • On the next step, you will be asked to set the display condition. By default, your single post template will be applied to all posts on your site. So, if you want to apply your new custom single post template to the entire site (all posts), simply click the SAVE & CLOSE button. Conversely, if you want your new custom single post template to be applied to a specific category or post, you can specify category/post first before clicking the SAVE & CLOSE button. Elementor allows you to add multiple display conditions.

How to change font family, color, and size

If the default font offered by the template you choose doesn’t suit you, you definitely can change it. Before clicking the PUBLISH button on the left panel, you can play around with Elementor editor to customize the font family, font color, and font size. In this example, we will show you how to change the font of the post body. To do so, find the section that holds the Post Content widget (you can use the Navigator). In this example, the Post Content widget lies in the second section under the first column.

Activate the Post Content widget (by clicking it) and go to the Style tab on the left panel. Click the pencil icon on the Typography option to open the typography option.

The selector panel will appear, allowing you to set the font family, size, style, and so on. To change the font color, you can click the selector on the Text Color option.

How to Create Custom Shapes in Elementor

In web development, the geographical shape is another basic thing you need to understand other than color theory. Each geographical shape represents different meanings. Circle, for instance. This shape represents harmony and safety.

Elementor has no specific widget to create a custom shape, but you can make use of the Spacer widget if you need to add a custom shape on the web page you are working on. This article will show you how to create custom shapes in Elementor using the Spacer widget.

How to create a custom shape in Elementor using Spacer widget

Some Elementor widgets — including Spacer — have an option to set the border radius values. You can use this option to create a custom shape in Elementor.

By default, when adding Spacer widget, you will have a rectangle shape with a height of 50px. You can change this default setting to create a square, circle, or rounded shape. Please note that not all geographical shapes can be created with Spacer widget. You won’t be able to create a triangle or parallelogram. Here is how to create a custom shape in Elementor using Spacer widget.

  • First off, create a new page on WordPress and edit it with Elementor. You can either create the page from scratch or load a template instead.
  • Add Spacer widget by dragging it to the canvas/editor. You can place it anywhere.
  • Set the high of the space. You can set this later according to the shape you want to create.
  • On the left panel, go to the Advanced tab and set the background on the Background section.
  • Still on the Advanced tab, go to the Custom Positioning section and change the Width to Custom and set the value you want. If you want to create a square or circle shape, you need to set the same width value as the high value. Also set the Position to “Absolute“.
  • Still on the Advanced tab, go to the Border section to change the border radius values. If you want to create a square or rectangle shape, you don’t need to change the border radius values. You only need to change those values if you want to create a circle shape or fully custom shape (irregular shape).
  • Move the shape you have just created by dragging it to the area you want to place it.

Repeat the steps above to create other custom shapes. Or, you can simply duplicate a shape you have created to save you time. Just make sure to tailor the border radius values as well as the size (high and width).

How to Create a Custom 404 Page in WordPress with Elementor

404 is one of the most well-known error messages encountered on the web. If you are faced with this message when accessing a URL, this means the web page associated with the URL is no longer exists. Another possibility, you are not granted access to access the page.

On a website system, the 404 error message is provided by the server, but you can modify the look of this message. A WordPress theme typically comes with a modified 404 page. If you don’t like the look of the default 404 error page of the WordPress theme you use, you can edit it. However, you need to have a coding skill to do so (PHP and HTTP). If you are the sort of a WordPress user who has no coding skill, you can create a custom 404 error page with Elementor.

The Theme Builder feature of Elementor allows you to create a custom 404 page without coding. It even provides templates you can choose from, allowing you to create a custom 404 page effortlessly in minutes. This article will show you how to create a custom 404 page in WordPress with Elementor.

Note: Theme Builder feature is only available on Elementor Pro. Find the differences between Elementor Free and Elementor Pro.

How to create a custom 404 page in WordPress

Before getting started, please note that HTTP 404, 404 Not Found, 404, Page Not Found, and Server Not Found is the same thing.

Assuming you have installed Elementor Pro on your WordPress-powered site, log in to the WordPress dashboard and go to Templates -> Theme Builder.

On the Theme Builder page, hover your mouse over the Error 404 tab on the left panel and click the plus icon.

As mentioned, Elementor provides several ready-to-use 404 page templates you can choose from. You can also create the 404 page from scratch if you want. In this example, we will use one of the available templates. To use a template, hover your mouse over a template you want to use and click the Insert button.

You will be directed to the Elementor editor where you can edit the 404 page content. Once done editing the content, click the Publish button on the bottom side of the left panel.

A dialog popup will appear, asking you to set the display conditions. When creating a 404 page, the default display condition is set to 404 Page. So, nothing needs to be changed. Simply click the SAVE & CLOSE button to continue.

Done!

Now please try to access a random URL on your site (i.e. yourdomain.com/kdjkdjkj) and you should see the new 404 page you have just created.

How to Use Two Different Colors on a Heading in Elementor

A few days ago we spotted an attractive landing page. One of the things that make the page look attractive is the heading decoration. The page creator used two different colors on one of the heading elements on the page.

In Elementor, you can also use two different font colors on a heading. This article will show you how.

When adding a heading in Elementor, you can change the default content on the Title field under the Content tab. Turns out, Elementor allows you to add an HTML code to this field. To use two different colors on a heading, you can make use of the <span> tag of HTML.

In HTML, the <span> tag is used to group elements for styling purposes, including coloring. The text you put between <span></span> (example: <span>different color</span>) will have a different color to the text outside the tags. In other words, the text you put between <span></span> will have a different color to a color you set via the typography controller of Elementor.

How to use two different colors on a heading in Elementor

First off, add a heading by dragging the Heading element from the left panel to the Elementor editor.

Replace the default text with your text and set the color, font size, and font family on the Style tab. Once done, return to the Content tab and specify the words/letters you want to have a different color and add the <span> tag and close it with </span>. Inside the <span> tag, type style="color:#fe667b;". Replace the color hex code (#fe667b) with your own color. Take a look at the example below.

How to Create a Full-Width Slider on WordPress with Elementor

There are lots of ways to make the homepage of your website look more attractive. One of which is by adding a full-width slider. There are probably some plugins to create a slider in WordPress. With Elementor, you can effortlessly create a slider to your WordPress site. You can also customize the slider to make it looks the way you want. For instance, you can set the slider to full-width.

Elementor comes with a Slides widget which you can use to create a slider on your WordPress site. The Slides widget of Elementor comes with several options. You can, for instance, set the background overlay and add text or button to the slide. If you add a new slider in Elementor, the slides are set to box width by default. You can change them to full width.

Note: The Slides widget is only available on Elementor Pro. Find the differences between Elementor Free and Elementor Pro.

How to Create a Full-Width Slider in Elementor

To start creating a full-width slider on your Elementor-powered WordPress site, create a new page or post and edit it with Elementor. On the Elementor editor, click the plus button to create a new section.

Add new slides by dragging the Slides widget from the left panel to the canvas. By default, this widget brings 3 slides. You can remove a slide by clicking the “x” button. Or, if you want to add a new slide, you can simply click the ADD ITEM button.

To customize the content (like adding an image background or change the default text), you can click each slide to open the available options.

As mentioned, the slides are set to box width by default. To set them to full-width, you can activate the section that hosts the slides. To do so, click the section handler or click the section name on the Navigator.

Once the section is active, go the Layout tab on the left panel and set the Content Width to Full Width under the Layout section. Also change the Columns Gap to No Gap.

If you want to make the slide fit the screen, you can activate the Slides widget (by clicking it on the Navigator) and set the height unit to VH. Set the value to 100.

Until here, you have successfully set the slides to full-width as well as fit the screen. To make sure the slides fit the screen on any device, make sure to set the height value on both tablet and smartphone.

You can play around with the left panel to customize your slides. There are many other options you can set to, including the animation effect.

How to Install New Fonts in Elementor

The use of a font is crucial enough in the context of design, including web design. A font can represent your brand. That is why Coca Cola never changed the base of its font on its logo. Elementor allows you to use your own font although the page builder itself already provides a bunch of font families.

Elementor offers you about 800 different fonts you can choose from. Also, you can integrate Elementor with TypeKit to give you more font options. As a professional designer, you might want to use a completely different font by creating one yourself. Follow the steps below to install a new font in Elementor.

Step one: Prepare your font

Before installing a new font on Elementor, you definitely need to prepare your font first. If you want to create a new font, that’s great. There are also some websites you can rely on to download new fonts. Elementor itself supports the following font formats:

  • WOFF
  • WOFF2
  • TTF
  • SVG
  • EOT

Step two: Upload your font

Once you are done creating your new font, login to your WordPress dashboard and go to Elementor -> Custom Fonts.

On the Custom Fonts page, click the Add New button.

Give your new font a name and click the ADD FONT VARIATION button to select the font file from your computer. Click the UPLOAD button on the font format option to select a font from your computer.

Some fonts use different files for different styles (i.e bold, italic, and regular). If your font uses different files as well, make sure to upload all of the files. You can repeat the steps above (starting from clicking the ADD FONT VARIATION button) to upload other font files. Click the Publish button on the upper-right corner to make your new font available on the typography settings in Elementor.

Elementor places the custom fonts on the top section on the typography control.

How to Integrate Elementor with MailerLite

Elementor supports integration with several email marketing tools. One of which is MailerLite. By integrating Elementor with MailerLite, you will be able to provide an email subscription form on your website and send the email subscribers to your MailerLite account.

Just like other tools, you need to connect your MailerLite account with Elementor using an API to integrate the two. Follow the steps below to integrate Elementor with MailerLite.

How to integrate Elementor with MailerLite

First off, visit the MailerLite website and login with your account. On the MailerLite dashboard, click your profile icon on the top-right corner and select Integrations.

On the Integrations page, click the Use button on the Developer API option.

On the next page, copy the provided API key.

Once the API key is copied, login to your WordPress dashboard and go to Elementor -> Settings.

Click the Integrations tab and scroll down to the MailerLite section. Paste the API key you have copied and click the Validate API Key button.

You will see a green checklist icon if the validation process successful. Don’t forget to click the Save Changes button to save the new change.

How to connect an Elementor form with MailerLite

After you have successfully integrated your MailerLite account with Elementor, you can now connect an Elementor form with your MailChimp account. Be it an email subscription form or other sorts of forms. To add a new form, you can drag the Form widget from the left panel to the canvas/editor.

Customize the form according to the purpose of the form. Once done, click Action After Submit and add MailerLite.

A new option called MailerLite will appear. Click this option. On the API Key option, leave it default. You can select Custom if you want to run a certain campaign with MailerLite. Make sure to create a new API first if you want to use a custom API Key.

Select one of the existing groups on your MailerLite account. For better subscriber management, you can create a new group for your new form. This way, you can easily identify the subscribers subscribed via your new form.

On the Email Field Mapping section, you can select the parameters according to the fields on your form. For instance, if your form consists of only two fields, say email and name, then you can select the Email and Name parameters.

The parameters (field mapping) you chose will be displayed when you click an email address of a subscriber on the MailerLite dashboard to see its detail information.

Done!

You can click the PUBLISH button once you are done editing the page. Try to enter some entries to your form to check out if everything has gone well.

How to Create a WordPress Theme without Coding (A Complete Guide)

Before the page builder era, it’s only a dream for a WordPress user without programming skills to create a theme. To create a WordPress theme, you have to at least master PHP, HTML, and CSS. If you want to create a complex WordPress theme (like the ones sold on ThemeForest), it’s also a prerequisite to master JavaScript.

That was then.

Today, you can create a WordPress theme even if you have no coding knowledge at all. Some WordPress page builder plugins come with a theme builder feature to allow you to create a WordPress theme without writing any single line of code. You can create a WordPress theme using a drag-and-drop visual editor.

Before going further, there is something you need to know first. A WordPress theme typically consists of the following parts:

  • Header
  • Footer
  • Single post/blog post
  • Page
  • Archive pages (category pages, tag pages, authors’ archive pages, search results page)

A theme builder allows you to create custom templates — in a visual way — to replace the default template files of your theme.

How a Theme Builder Works

As mentioned above, a theme builder works by replacing the default template files of your active theme. For instance, if you create a custom header template with a theme builder, the new header template will replace the default header of your currently active theme. So are with the footer, single post template, 404 page, archive pages, and so on.

What is template file, by the way?

In case you didn’t know. A WordPress theme is made up of template files written in PHP and the supporting languages (JavaScript, HTML, CSS). Each theme developer may use different names for the template files, but it most cases, the naming is tailored with what a template is used for. For instance:

  • footer.php for the footer
  • header.php for the header
  • single.php for blog post
  • page.php for page
  • archive.php for archive pages

Each template above controls the layout of your site parts. For instance, the footer.php file controls the layout of the footer, the header.php file controls the header of your site, and so on.


Best Theme Builder Plugins for WordPress

There are a bunch of theme builder plugins for WordPress out there, but we strongly recommend the following plugins as they come with comprehensive features.

Elementor Pro

Elementor is the most popular page builder plugin for WordPress. Its pro version comes with a theme builder feature which you can use to create custom templates for your theme parts as follows:

  • Header
  • Footer
  • Single post
  • Single page
  • Archive pages
  • 404 page

If you use WooCommerce to create an e-commerce site, Elementor Theme Builder also allows you to create custom pages of WooCommerce such as the single product page, product archive pages, checkout page, cart page, and so on.

Furthermore, you can also use Elementor Theme Builder to create a custom template for a custom post type. On your custom template, you can add custom fields and default fields of WordPress.

Divi Builder

Divi Builder is another popular page builder that comes with a theme builder feature. It is available in two versions: as an integral part of the Divi theme and as a standalone plugin which you can on WordPress themes other than Divi. The capability of Divi Theme Builder is identical to Elementor. It also allows you to create custom templates for the following site theme parts:

  • Header
  • Footer
  • Single post
  • Single page
  • Archive pages
  • 404 page

Divi Theme Builder also allows you to create custom pages for WooCommerce. Furthermore, you can also use it to create a custom template for a custom post type and add custom fields to your custom templates.

There are two advantages of Divi over Elementor: Advanced display condition and the ability to control the design of the elements on the single post template such as blockquote, list, headings, and body.


How to Create a WordPress Theme without Coding with Elementor

In this example, we will show you how to create a custom theme using Elementor. You need to use the pro version to get started. You can get the pro version of Elementor on its official website.

— Create the Header Template

  • First off, login to WordPress dashboard and go to Templates -> Theme Builder.
  • On the Theme Builder page, hover your cursor over the Header label on the left side and click the plus icon to create a new header template.
  • 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 template library 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 a widget, simply drag the widget you want from the left panel to the canvas area. The first widget we want to add in this example is Icon List. We will use this widget to display the phone number and email address.

  • You can edit the widget you have just added from the left 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 a widget into editing mode, you can click the widget handle). You can also click the widget on the Navigator.

  • Add another widget on the second column. In this example, we add the Social Icons widget.

  • Again, you can edit this widget via the left 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 widget from the left panel to the canvas area. You can find this widget (Site Logo) on the SITE section. Elementor will automatically load 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 widget (Nav Menu) to the second column. You can find this widget on the SITE section as well.

  • Again, you can also play around with the left panel to customize your menu. You can set things like the text color, hover color, hover width and so on. Elementor itself will automatically load 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. You can find the Sticky​ option on the ​Motion Effects option.

  • Repeat the steps above on the second section (the main header). If you want, you can also add other widgets like a 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 by clicking the eye icon.

  • You will be asked to add a display 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.

— Create the Footer Template

Same as the header, Elementor also provides ready-to-use footer templates to save you time. In this example, we are going to create the footer from scratch. The footer we going to create consists of a single section. 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, hover your cursor over the Footer label on the left side and click the plus icon.
  • Since we want to create the footer from scratch, close the template library to open the Elementor editor.

  • Click the plus button on the canvas area to add a new section. Select the two-column structure option.

  • Drag the Social Icons widget from the left panel to one of the columns on the editor. Once added, you can play around with the left panel to customize the icons.

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

  • In this example, we change the layout to Inline. This will turn the icon list to the horizontal mode.

  • Replace the default text on the Text field with the navigation label you want (like “about”, “contact” “terms of use”, and so on) and add the link on the Link field. You can also remove the icon if you want. We don’t use icon in this example.

  • Play around with the left panel to customize the Icon List widget. 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.

— Create the Single Post Template

Elementor also allows you to create a custom template of single post. In this example, we are going to create a single post template that consists of four sections.

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

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

  • On the WordPress dashboard, go to Templates -> Theme Builder.
  • On the Theme Builder page, hover your cursor over the Single Post label on the left side and click the plus icon.
  • A popup window will appear, offering some of the ready-to-use templates you can choose from. Since we want to create the single post template from scratch, simply close this popup.

## 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 left 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 widget 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. In this example, we set the left margin to 30.

  • Drag the Post Info widget to the editor.

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

## 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 widget 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).

  • You can go to the Style tab to customize the button. Just play around to get the buttons you want.
  • Drag the Post Content widget 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).

  • You can go to the Style tab to set the typography style (like font style, font color, and font size).
  • Drag the Author Box widget 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).

  • Again, you can go to the Style tab to customize this widget. You can set things like image size, typography, and so on. Just play around.
  • Drag the Sidebar widget to the second column and place it beneath the Author Box.

  • Return to the left 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).

  • 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.

  • Still 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 widget 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 widget 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 widget 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 widget 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 widget 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 widget 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 widget 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 widget 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 template will be applied to all posts of your website. If you want it to be applied to a certain post or category, you can set the display condition by clicking the dropdown menu. Once done, click the SAVE & CLOSE.

— Create a Template for Archive Pages

In WordPress, an archive page refers to a page that displays a list of posts. Category pages (yoursite.com/category/category_name), tag pages (yoursite.com/tag/tag_name), and authors’ archive page (yoursite.com/author/author_name) are example of the archive pages. Elementor Theme Builder allows you to create custom templates for these archive pages.

  • On your WordPress dashboard, go to Templates -> Theme Builder
  • On the Theme Builder page, hover your cursor over the Archive label on the left side and click the plus icon
  • Select a premade template on the appearing library window if you want to create the custom template from a premade template. If you want to create the custom template from scratch, you can simply close the window. In this example, we will show you how to create the custom template from scratch.
  • Add a section and drag the Archive Title widget to the canvas area.
  • You can go to the Style tab to style up the archive title such as setting the font size, text color, and so on.
  • Once done customizing the archive title, add the Archive Posts widget and place it beneath the Archive Title widget.
  • To change the archive layout, you can open the Layout block under the Content tab on the settings panel. To set the pagination, you can open the open the Pagination block on the Content tab.
  • To style up the archive, you can go to the Style tab on the settings panel. There are five setting blocks you can open here as below. You can play around on each block to style up the archive.
  • Once you are done styling up the archive, you can click the PUBLISH button on the bottom side on the settings panel. On the appearing panel, you will be asked to add the display condition. Simply click the ADD CONDITION button to add one.
  • Select the archive type want to assign the template to. If you want to assign it to category pages, for instance, you can select the Categories option and then select the category you want. Click the SAVE & CLOSE button to apply the condition.

The Bottom Line

Theme is a required component of WordPress. It controls the layout and design of a WordPress site. Since WordPress is written in PHP, you should have PHP knowledge as well to create theme. Also, you should also master other supporting languages such as JavaScript, HTML, and CSS.

A WordPress theme is made up of template files written in PHP. Each template has a specific role to control the layout of a particular site part. For instance, the header.php is a template file that controls the header of the website.

Today, the prerequisite of having PHP knowledge is no longer needed thanks to theme builders. A theme builder plugin allows you to create custom templates to replace the default template files of your theme in a visual way. In other words, you can customize every single part of your website without coding. You can apply any design style you want. Elementor Pro and Divi Builder (read: Elementor vs Divi) are two of the most popular page builder plugins for WordPress. They allow you to create custom templates for the following theme parts:

  • Header
  • Footer
  • Single Post
  • Single Page
  • Archive Pages
  • 404 Page
  • Custom Post Type

Want to create a WooCommerce-based e-commerce site with your own design? Both Elementor Pro and Divi Builder also allow you to customize every single page of WooCommerce. From the single product page, product archive pages, checkout page, cart page, and so on.

How to Create a Rounded Image in Elementor

If you ever noticed, some websites use rounded images on their team page or about page. Beneath the rounded image, you usually see the social icons that link to the social media accounts of each team member.

In Elementor, you can also create a rounded image like the ones on the screenshot above. However, Elementor offers no specific image setting to turn a rectangle/square image into a rounded one. You need a little trick to create a rounded image in Elementor. When adding an image in Elementor, you can set the values of the border radius. To have a circle-shaped image, you can set the values of the border to a certain number, according to the dimension of your image.

Tips: To get a perfectly circle-shaped image, you can use a square image instead of rectangle.

Let’s get started.

First off, add an image by dragging the Image widget to the canvas/editor and select an image from your computer.

Once the image is added, go to the Style tab to customize it. As mentioned, to get a circle-shaped image, you can set the values of the border radius. The values are vary depending on the dimension of your image. For example, for an 800×800 image, you can set the values to 260 (all corners: top, right, bottom, left).

In addition to border radius, there are several other settings you can apply to your image. Elementor also allows you to set the brightness, contrast, saturation, and hue of your image. You can find those settings by clicking the CSS Filters option. Just play around with the left panel to figure out what kind of things you can do with your image.

How to Integrate Elementor with MailChimp

One of the benefits of being an Elementor Pro user is that you can integrate your Elementor with popular third-party marketing tools, including MailChimp. By integrating Elementor with MailChimp, you will be able to install an email subscription form on your website on any spot. Be it on a single post, sidebar, a landing page, homepage, and so on.

MailChimp itself is a popular email marketing tool. It allows you to collect email subscribers and send a certain campaign with a more personal touch compared to social media. No additional plugin is required to integrate Elementor with MailChimp. You just need to create an API key to get started.

How to integrate Elementor with MailChimp

As mentioned above, you need to create a MailChimp API key in order to be able to integrate your MailChimp account with Elementor. To do so, visit the MailChimp website and login with your account. On the MailChimp dashboard, go to your profile by clicking your profile icon on the top bar and select Profile.

On your profile page, select Extras -> API Keys.

To create a new API key, click the Create A Key button.

Copy the API key. If you want, you can also add a label to your API key to make it easy for you to identify it in case you want to add more API keys in the future.

Login to your WordPress dashboard and go to Elementor -> Settings.

On the Elementor settings page, click the Integrations tab. Scroll down to the MailChimp section and paste the API key you have just created above. Click the Validate API Key button. Don’t forget to click the Save Changes button at the bottom to apply the new change.

How to connect an Elementor form with MailChimp

Once you are done integrating your MailChimp account with Elementor, you can now install an email subscription form on your website and connect the form with your MailChimp account. To do so, add a new form by dragging the Form widget from the left panel.

Customize your form and tailor the content according to your needs. Once you are done, open the Actions After Submit option under the Content tab and add MailChimp.

You will see a new option called MailChimp under the Content tab. Open this option to make the settings. On the API Key option, leave it to default. On the Audience section, select an existing audience on your MailChimp account. You can also add an existing group if you have one. On the Field Mapping option, set the values according to your needs.

You can now publish your page once it is ready. To check if everything went well, try to fill in the form you have just created and login to MailChimp. On the MailChimp dashboard, select the audience according to your form setting and view the contacts. Check the source of your contacts. If you find a contact from your API, this means that everything has gone well.

Pin It on Pinterest

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.