fbpx

Testowy

Search

How to Start a Blog with Elementor — The Complete Guide

In this step-by-step guide, we show you how to set up WordPress, learn the ropes with the editing interface, and craft beautiful blog posts and pages with Elementor.

It can be hard to stand out when you’re using WordPress. While the CMS has great support for blogging and development, its design features often fall flat. You can usually spot a basic site made with WordPress in a second, and theme customization options are often not enough to create a unique look. With thousands of blogs vying for attention, how can you beat the competition?

If you’re facing this problem as you prepare to start a blog on WordPress, you’re in luck. Elementor was made to solve this exact issue, offering WordPress users powerful page building components that give you finer control over your site’s design. If you don’t believe me, it literally will not cost you anything to try it.

No longer will you have to use the same boring layout on every page. Elementor allows you to create sites that can rival those made by professional web designers.

Ready to start a blog with Elementor? Let me be the first to show you how to set up WordPress, learn the ropes with the editing interface, and craft beautiful blog posts and pages, the kind your users will adore.

Step 1: Set Up WordPress

Before you can install Elementor and start designing your first site, you’ll need to get WordPress up and running.

To begin, you’re going to need to purchase web hosting to get your site online. There are hundreds of hosts out there, many better and more cost-efficient than others. If you want to know how to pick the right web host for you, we have an article that explains it all.

While there are free web hosts out there, they’re almost always slow to load, which leads to people leaving your website out of frustration. It’s best to choose a paid host that’s fast and reliable.

Shared, VPS, or cloud hosting is usually what you’re after. Shared hosting is cheap, comes with moderate speed, and puts you on a server with other websites, while VPS hosting gives you a private virtual server that’s less congested by web traffic, though it’s often more expensive. Cloud hosting has scalable resources so you can add more as your site grows, though it’s somewhat pricey as well.

Some hosts come with WordPress pre-installed with specialized “WordPress hosting,” but even if you just purchase normal shared or VPS packages, the host will usually help you get WordPress installed onto your server. Just look for “managed hosting” and ask first if they support WordPress.

If you end up having to install WordPress manually, you’ll find that its documentation can help you through the process.

You’ll also need to purchase a domain. Some hosts will give you a free domain for a year when you register with them, so you might not need to worry about this step. If you do have to register your own, make sure you choose wisely.

With WordPress set up on your host, and a domain chosen, you’re ready to dive into the interface.

Pick a Compatible Theme

If you’re new to WordPress, feel free to log in and explore your dashboard. Familiarize yourself with all the settings and try creating a page or post.

Next up, you’ll need to choose a theme that’s compatible with Elementor. Almost every theme works fine with it, so if you have one in mind already, go ahead and try it out. We also have a list of compatible themes, both free and premium ones. This is a good place to start.

Specialized Elementor themes often come with additional integrations, like built-in templates or other features. Besides the list above, check out the Elementor themes on ThemeForest.

Finally, you may also want to have a look at our own Hello theme, which was built as a blank slate for using with Elementor, to make all of your website dreams come true. It is also insanely fast.

Download and Activate Elementor

Once you’ve obtained a compatible theme, you can finally install Elementor. It’s possible to start with the free version and move to Elementor Pro if you wish. Some parts of this tutorial (like creating themes from scratch for blog posts, or editing the header/footer) only work with the premium version.

Even if you choose to upgrade, you’ll still need to download the free version of Elementor first. To do this, log into your WordPress backend and click Plugins > Add New. Type “Elementor” into the search bar, download, and activate it.

To get Elementor Pro, just purchase a license from the Elementor website, and download it from My Account. To install Elementor Pro, go back to Plugins > Add New and click Upload Plugin, and upload that zip file. Once it has uploaded, activate it, and on the WordPress dashboard go to Elementor > License to validate your key.

Now you should see the Elementor tab in your backend. With everything set up, let’s get familiar with the interface.

Step 2: Familiarizing Yourself with Elementor

There are a few ways to access the Elementor editor. You can create a post or page by going to Pages > Add Newor Posts > Add New. Whether you’re using Gutenberg or the Classic editor, you should see a button that says Edit with Elementor.

When you click it, you’ll be instantly dropped onto your new page within the Elementor interface. On the right, you’ll see your editing area, likely empty, except for a box prompting you to add a section. On the left side is your widget area, where you can find interesting addons like columns or a portfolio.

Elementor’s editor works on a grid system made up of a series of sections and columns that you can drag and drop to adjust. Just click the pink plus symbol to add a new section, then select your column structure, and drop a widget into the columns! You can then drag the section or column handle to move them around, and drag a column’s side to change its width.

If you want to edit a section, column, or widget, just click it. You can save time by right-clicking to duplicate or copy and paste sections you’ve already built.

There are also templates to consider. These are premade page themes and individual blocks you can use to customize your site without having to do all the work yourself. Just click the folder next to the plus within a section to select a template.

You can even save your favorites or upload third-party ones made by other users.

Finally, if you want to edit global settings for your site (such as determining a default color or font), just click the accordion menu in the top left of the Elementor sidebar.

When you’re finished designing, click Publish at the bottom of the sidebar to save.

Elementor Widgets

Designing layouts is fun, but where Elementor really shines is in its widgets. These range from simple video embeds and dividers to advanced features like carousels and tables of content. All you need to do to add any widget to your page is to drop it into an existing column.

Once you’ve done that, click on the widget and its settings will appear in the editor panel on the left. This will let you change its content, like uploading a new image, adding text, customizing animation, stylizing, or changing text color and font design.

There are dozens of widget options available. The free kit will grant you access to the basics: headings, image, and video insertion, sidebar customization, shortcodes — everything you need to create a good simple website. There are also some extra goodies like social media icons, progress bars, Google Maps, and a basic gallery and an image carousel. Overall, a great set of tools that will suit most users.

Upgrading to Elementor Pro will earn you the ability to add forms, a user login, design menus, add Facebook embeds, and various other animated and dynamic elements. There are also the WooCommerce widgets to use if your blog has a store attached to it. The Theme Builder makes it possible to customize dynamic content such as blog posts, search forms, and sitemaps. These are just some of the advanced features in the Pro version that can make your site a lot more interesting.

There’s a lot more to explore in Elementor, and it will take no time at all to learn how to add sections, columns, and widgets. After that, you’ll be able to put your skills to use and build your first website.

Step 3: Create Pages with Elementor

Once you’ve gotten the hang of the editor, it’s time for the fun part: creating your own blog with Elementor! From static pages to menus and blog posts, we’ll help you figure it all out. By the time you’re done, you’ll have a fully functional web presence.

Keep in mind that unless you’re using the premium version of Elementor, you’ll only be able to create static pages like your homepage and about page. To design things like a menu bar, footer, or create dynamic pages, you’ll need Elementor Pro.

You should also familiarize yourself with templates unless you want to create your site entirely from scratch. Templates can reduce an hours-long process into a few minutes by giving you a basis to work upon.

Thanks to Elementor’s customizability, you don’t need to worry about looking too similar to other sites when you rely on a template. The vast number of options in the editor panel enables you to add your personal touch, to easily modify and customize each element using nothing but a couple of clicks.

Elementor comes with an extensive template library, publishing new ones every month on the Elementor blog. You can also download them from other sites, or using plugins, like Envato Elements or the Astra theme

Customize Core Pages

First, start with creating and customizing your core pages: these are the most important stops on your site, and the ones that are static and rarely change.

The most essential pages on your blog are the homepageabout, and the contact page. You might also include one for your newsletter, and if you offer services or products, a few pages for promoting them, testimonials, and a landing page. Most blogs will begin with 2-5 static pages, however, having a homepage and an about page is the bare minimum to start with.

It can take some time to complete all of these assets, depending on how many pages you intend to include, but this is generally the easiest place to begin. Just create a new page under Pages > Add New like before, then click Edit in Elementor, and use the skills we learned above to design it.

For your homepage, you could try the Copywriter template, and Personal or CV for your about page. The Modern contact page is also suitable for a blog. Don’t be afraid to branch out and try a template that doesn’t quite fit your theme. With enough tweaking, you can make it yours. Experiment with layouts and widgets and see what you can create.

The online JavaScript compressor will help you optimize your scripts for a better page loading speed.

You’ll need to activate an extra setting for your homepage to work. In your WordPress dashboard, go to Settings > Reading, switch to A static page, and click the Homepage dropdown to switch it to the page you designed for this purpose, and save the changes at the bottom. This effectively sets the page as your site’s default homepage. You can add all the other pages to your navigation menu later.

Create a Blog Post Template

Next step: Sprucing up your blog posts.

Before Elementor released its Theme Builder, web builders had to either rely on the appearance of a theme’s default single post design or copy/paste an individual design for every single post, which wasn’t practical or viable. With Theme Builder, it’s easy to create a template that can then be applied automatically to every post that you publish.

Go ahead and create a blog post under Posts > Add New. You can fill it with some placeholder text like lorem ipsum, but you’ll need it to design your template.

Next, in your admin area, go to Templates > ThemeBuilder and click Add New. Then choose Single and Page from the dropdown and then click on Create Template.

You can start with one of the predesigned blocks, or you can create it totally from scratch. Once you close the template library window, you will find yourself facing Elementor’s editing interface. Click Settings at the bottom of the left toolbar, then under Preview > Settings (the little eye symbol at the bottom), set Preview Dynamic Content to Post, and select the one you made earlier.

When you hit Apply & Preview, Elementor will automatically input the content included in the post, giving you a basis to work with rather than an empty page. When designing your blog post template, remember that blog areas look best when they’re free of distractions and help the visitor focus on the content. Some of the widgets you should use are Post Title and Post Content, and possibly Featured ImageAuthor Box, Post Comments, and Post Navigation. Avoid attention-grabbing widgets like Video and Flip Box as they can be distracting.

When you’re finished, click Publish to save your work. In the popup that appears, hit Add Condition and set it to Include > Posts > All to have it replace all of your blog posts’ styling. You could also set it only for a specific category, or exclude it from certain categories of posts.

Design Your Blog Post Archives

Even on otherwise amazingly designed websites, WordPress archive pages tend to be fairly bland. Though underestimated, the archive is often one of the most important pages on your site, and it can make a huge impression on your visitors. Therefore, don’t leave a hole in your design; ensure that your archive page is just as carefully crafted as the rest of your site.

Much like blog post templates, designing archive pages was nowhere near as intuitive as it is now that Elementor’s Theme Builder is available. Now you can create beautiful templates for your archive pages too.

The process is similar to creating a single post template. Just go to Elementor > Templates > Theme Builder and click Add New like before. Instead of choosing Post in the dropdown, select Archive.

Now that you’re in the editor, you can again click Settings in the toolbar and set Preview Dynamic Content to an existing archive page. After that, it’s up to you to design your archives. Remember that the focus here is on the content, so keep superfluous widgets to a minimum. Besides the list of posts, the archives page should probably be free of interactive elements.

When you’re finished, click Publish and set the display condition to All Archives.

Make Your Header, Footer, and Menu

Lastly, let’s create beautiful navigation elements to go with all the pages you’ve created so far. All of which are totally customizable.

Start with the header and footer, by going to Elementor > Templates > Theme Builder and click Add New, just like when creating any other dynamic theme content. Choose Header or Footer from the dropdown, and select a template if you wish.

Now you can add widgets like forms or Google Maps. You can even go into Settings and make the header sticky. Like before, you can customize these elements using the bounty of options in the Elementor interface. You can use the conditions, as we saw earlier, and display unique headers and footers on different pages or pages that belong to certain categories.

Next up is the Nav Menu. It’s time to finally make all those pages you created accessible from anywhere on your site. You’ll first need to go Appearance > Menus and create a menu if there isn’t one already. Now add the pages you want by ticking the checkboxes and clicking Add to Menu, then be sure to click Save Menu.

When you have a basic menu set up, go back to Elementor > Templates and click to edit the header you made earlier. Just drag and drop the Nav Menu widget where you want it. Click it, and the widget’s settings will appear in the editor panel, allowing you to change it to horizontal, vertical, or accordion layout. You can also edit the animations, colors, and spacing.

Once you’ve finished building all of your pages, created a template for your blog post and archives, and made custom menus, your design is complete! Now your site is just about ready to go live. Let’s write some blog posts.

Step 4: Start a Successful Blog

A lot goes into creating a successful blog, and there’s no quick way to build up a fanbase. But with the right tools at your disposal, you’ll have a much better shot. Here are some of the resources to help you get started.

  • Google Analytics – Analytics software is a must-have if you want to know more about your visitors and improve user retention. Learn how to implement it here
  • Trello – Trello allows you to create schedule boards to organize your projects, and hold yourself accountable by adding a due date to write each post. It’s also great for writing teams.
  • MailChimp – Create a newsletter to keep your visitors coming back. MailChimp is free for up to 2000 subscribers. We also have an article on it. 
  • Grammarly – This invaluable writing tool corrects grammar issues, helps you master your writing tone, and even has a built-in dictionary and thesaurus.
  • Unsplash – Your posts are going to need images. At Unsplash, you’ll find free, high-quality photography.

And of course, more WordPress plugins are being added every day. Check out the most popular plugins and download a few that suit your blog. It can make a big difference.

Help Your Blog Stand Out with Elementor

As powerful as WordPress is, its default design options leave a lot to be desired. Without any plugins or highly customizable (and often expensive) themes, it’s very difficult to create a website that looks unique and interesting.

Elementor gives you a lot more control over how your site looks, allowing you to adjust elements with pixel-perfect precision and spice up your blog with small widgets. It can breathe life into a stale WordPress theme, helping you to stand out and attract more attention.

With the ability to carefully design new pages as well as craft global templates for blog posts and categories, Elementor is equipped to handle all of your needs, as you design your new website. Don’t settle for cookie-cutter templates anymore. Learn to master this invaluable tool to create a more beautiful blog that has your own unique touch.

What’s your favorite Elementor feature for building blogs? Let us know in the comments section below!

Leave a Comment

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *