Build a Blog in Elementor [PRO]

Hi Everyone, I’m Aviva, a designer and educator at Elementor. I’d like to welcome you to this course, How to Build a Blog in Elementor.

In this course, we’ll create a full blog website, with no previous WordPress or web design experience necessary.

This course with cover:

1. Blogging basics and the WordPress structure
2. The WordPress Dashboard and settings
3. Selecting and installing a template Kit on your Elementor website
4. Using the Elementor Editor to customize and style your website
5. Managing and styling your website’s parts using the Theme Builder
6. Adding posts
7. Styling posts
8. Adding and Managing Archive Pages
9. Confronting the Page Not Found Error
10. Creating a Link Page for Social Media
11. Managing multiple authors on your blog
12. Useful tips
13. And last but not least, we’ll conclude the course and review our results

We’ve created this course especially for bloggers, to teach you how to use Elementor to create and manage a full, beautifully designed blogging website.

Together, we’ll create a website and blog called Xander Travels, authored by blogger Xander Banks , a former accountant turned digital nomad, who began photographing and writing about his lifestyle after leaving his 9-5 job to travel. He focuses on combining travel while making a living, and writes to inspire others to follow their passion.

And while this blog focuses on photography and travel, you can use the knowledge and techniques you’ll learn here for any type of blog. Follow along, and apply your own style, content, and images, to fit your website.

All you’ll need to get started is:
A WordPress website,
Both the core and Pro versions of the Elementor Website Builder plugin,
and the Elementor Hello theme installed on your WordPress website.

I also suggest using a clean installation of WordPress.

If you don’t yet have a WordPress website, Elementor or Hello installed, see the links in the description to get set up for this course.
We’ll design this blogging website, complete with Home, About, and Contact pages, styled blog posts, a 404 page, and even a “link in bio” landing page. We’ll also customize our site’s header with a popup navigation menu. And we’ll learn lots of other tips and tricks along the way, including blogging best practices and ways to streamline your workflow
As you move through the course, feel free to skip any over topics you may already be comfortable with.
Be sure to bookmark the course, so you can come back to it at any time. Keep watching, to get started with our first lesson, where we‘ll learn all about the basics of a blog and its structure. See you there!

Hey there! It’s Aviva from Elementor. Welcome to How to Build a Blog in Elementor.

In our first lesson, we’ll go over the basics of WordPress and get to know the structure of a blog.

This knowledge is essential for any blogger, since we’ll encounter these elements repeatedly in the future, and having a strong understanding of this process will help us work efficiently and avoid common mistakes.

But what exactly is a blog, anyway? Well, a blog is a type of website that is similar to a diary or journal. It organizes content in the form of categories and tags, and presents them in reverse chronological order… which means it shows you the latest entry first.

People use blogs to share their opinions and thoughts, but a blog can also be used to strengthen your brand across the web. With the right content and SEO best practices, a professional blog can be a powerful marketing tool – and generally at minimal cost.

WordPress is a content management system that was created in 2003 by bloggers – to create, maintain and market, well, blogs. It allows you to organize your content into pages and articles, manage your media, and so much more.

WordPress is the world’s most popular blogging platform, and with good reason: It caters to anyone who wants to create content, whether you’re a novice creator or a skillful developer, creating the perfect environment for both solo projects and team collaborations.

Now that we understand how we can use a blog to our advantage and what WordPress is, let’s take a look at how it’s structured so we can work effectively.
Every WordPress website starts with a Theme.

A theme contains a set of pre-made layouts that affect how your website looks and feels. You can think of a theme as mold, similar to a cookie cutter. The WordPress theme repository offers hundreds of unique and interesting themes, with each of them allowing for varied styling and customization options

Elementor is compatible with most modern themes, and some work better than others, but as you’ll see in the next few lessons, we’re not going to rely on our theme for our site design.

Every blog has posts and pages and the difference between them can be subtle, but understanding this difference is vital to the management of your blog.
Let’s start with a blog’s bread and butter: its Posts.

A post is an article on your website, written much like print media, such as newspapers or magazines, and is usually presented on your site in reverse chronological order.

Posts are particularly helpful because you can use them to increase engagement, by allowing visitors to comment on them, an option that is not available on regular pages. Many visitors will find and enter your website by clicking a post link via search engines and social media, rather than through the home page.

Unlike posts, WordPress Pages are static, pages on your site that don’t change very often. These can be used to set up a website’s structural pages, such as the Home page, About Me, Contact information, and more.

Every post we create is assigned a specific Category, with the default category named “Uncategorized”. We can create new categories and rename them.

Categories are hierarchical, and you can create sub-categories. For example, if you have a blog about food, you can create a category for every type of meal, with sub-categories for types of food, like pasta, meat, and chicken. And, we can add any category to our menu to facilitate easy navigation for our visitors.

You can also add Tags to posts, which help showcase related posts together. Unlike categories, which are meant to group posts in a broad subject, tags are meant to describe specific keywords or details within your posts.

Going back to our food blog analogy, we can have categories for every type of recipe, with subcategories used for the type of ingredient.

And we can use tags for specific topics in our recipes, like using the tag “Vegan” for every plant-based recipe or “nut-free” for people who have a nut allergy, and are looking for safe recipes to follow.

For every one of these groupings, like a category or a tag, WordPress uses an Archive. An Archive is different from a Page or Post as it displays the content dynamically, which means every new post is automatically pulled in, and sorted by date, from last to first. This is especially helpful since there’s no need to edit this page directly.

Now that we understand the basics of a WordPress blog and website, it’s time to start working on our blog.

In the next lesson, We’ll learn to navigate the WordPress dashboard, and configure the settings that will be the first building blocks of our site. So be sure to keep watching. See you there!

Hey there! It’s Aviva from Elementor.

Welcome back to How to Build a Blog in Elementor.
In the previous lesson, we went over the basics of WordPress and discussed the structure of our blog.

And in this lesson, we’ll learn about the WordPress dashboard, and set up the essential settings for our website. So let’s jump right in and get started!

We’ll begin in the WordPress dashboard, where we have a birds eye view of our site. This screen displays vital information about our website and allows us to know exactly what’s going on in our site.

​This screen can be accessed by clicking on Dashboard on the left side of the screen, or, when previewing our site, by hovering the site’s name and choosing Dashboard.

Now let’s get familiar with the dashboard layout. On the left, we’ll have our WordPress menu, where we can access our posts, and media files that we’ve uploaded to our site, such as images or PDFs. We can also view and edit our site pages, and more. We’ll go over these options in more detail in our next few lessons.

WordPress allows us to install plugins, which are kind of like apps we can add to WordPress to expand its functionality. Just like the extra Elementor options we see here, most plugins we install will add new options to this menu.

If we find this menu distracting, or just want a cleaner layout, we can collapse the menu by clicking here. Click it again to expand it.

At the top of the screen, we’ll find the Toolbar, also known as the Admin bar, which is present on every page we view. This can be quite useful because it provides quick access to options that are used most often, like creating a new page or editing a specific template on the page.

In case we want to hide this toolbar from view, we can do so, by going to Users, and then find, and click on the user we’re currently logged in as. Then we’ll just uncheck Show Toolbar when viewing the site.

Now that we know where everything is located, it’s time to set up our site’s General Settings. So In the Menu, go to Settings. We’ll change the name of our site, and give it a tagline, which is a short description of our site. Great.

The admin email is used for sending critical notifications about our site, such as backup updates, spam alerts, and more.

Below, we can change the WordPress dashboard language, if applicable.
Next, we’ll set up the timezone, which will be used to show changes on our site. We can choose either a specific city or UTC, Coordinated Universal Time.
And lastly, we have the option to change the date and time format to what we’re most comfortable with. If our work week starts on a different day than the default of Monday, we can update that here.
Once we’re done, we’ll click Save Changes. Great.

Now we’ll head over to Settings, Reading.
As mentioned before, WordPress was created first and foremost for building and managing blogs. So by default the website’s homepage is set to our latest posts. We can change this setting by choosing “Static page” and then selecting the right page from the dropdown.

Note: If you have not yet created a designated Home Page, you can also select the default Sample Page that comes in the WordPress installation to temporarily be displayed until you’ve created a homepage.
Soon we’ll see how this option can be set automatically, but since we don’t have a homepage yet, we’ll leave this option for now.

Below we’ll find options to manage our posts display, from how many posts are displayed on a page, to showing full text or just an excerpt from the article.

When working on a brand new site, like in our case case, it’s recommended to click this checkbox to Discourage search engines from indexing this site. We’ll come back later, when our site’s ready, and uncheck this box to make sure our new site is indexed with the right content.

Click on Save Changes, and let’s continue to our next order of business, the Discussion Tab.
Here, we can set up the discussion guidelines for our blog.

We’ll uncheck the first checkbox, Attempt to notify any blogs linked to from the post, which is an outdated setting from before modern SEO best practices, and these days may be considered SPAM.
Next, we’ll deselect the second checkbox, Allow link notifications from other blogs (pingbacks and trackbacks) on new posts, which can promote spam content on our site.
We also have the option to decide whether or not to allow users to comment on our posts. This is generally recommended because it encourages engagement and helps search engines recognize this is a page that is updated regularly.

If we do want other people commenting on our site, we can find other comment settings below, such as who can comment, how comments get approved, what guest comments look like, and more.

Once we’re done setting up our comments, we’ll click Save Changes.
Next we’ll take a look at Permalinks. The permalink settings affect the structure of our pages’ URLs. By default, our site links are set to plain, which displays them in a way that doesn’t describe the page’s content, and is also considered bad practice for SEO. Change it to Post Name and click Save Changes.

And with that, our site’s basic settings are all set. For more in-depth information about WordPress, we recommend taking a look at the full WordPress course, linked in the description.

In the next lesson, We’ll learn all about Elementor Kits; what they are and how we can use them to create our blog website in no-time!

See you there!

Hey there! It’s Aviva from Elementor. Welcome back to How to Build a Blog in Elementor. In the previous lesson, we learned about the WordPress dashboard, and defined the essential settings for our website.

In this lesson, we’ll go over Elementor’s kit library, an exciting feature, which provides us with dozens of professionally designed full website template kits. We’ll then choose one to apply to our website, and customize it to make it all our own.

If you’re already familiar with the Elementor Kits feature, or you’ve opted to create your own design layout from scratch, feel free to skip ahead to the next video. But If you want to learn how to use Elementor Kits to your advantage, and create a beautiful working website – and quickly – stick around for this lesson!

A Template Kit is a full set of ready-made designs, which we can apply to our site. It includes all the pages, parts, settings and placeholder content that we’d expect in a fully functional website.

In the past, we would have imported individual templates one by one, but with Kits, we’re now able to import multiple website layouts in one shot. Each layout adheres to the same design guidelines, making the entire process of creating a website simpler and faster, and ensuring consistency across our site.

Now let’s navigate to the Kit Library, where we’ll find a diverse collection of professional designs to choose from, by going to Templates > Kit Library. Wow!

We can refresh the kit feed to see all the latest kits, view more information about these kits, and close the kit library to return to the WordPress dashboard.

On the left side, are helpful filtering options to find the best suited kit for our project. We can use these checkboxes to search by categories and tags.
or use the search bar by typing in specific keywords.

Some kits will show a Pro or Expert tag, meaning they’re only available for Elementor subscribers on the Pro or Expert tiers, respectively. These exclusive Kits offer a variety of templates that incorporate widgets and features that are not available in the free version.

Once we find one of interest, we can click on it to view it in demo mode.
Up here, we can click to preview the design on different devices.

Click Overview to see the other templates available in this kit. As we can see, the kit templates are divided into Pages, Site parts, and popups.

This travel blog kit looks perfect for Xander. Once we’re satisfied with the kit we’ve selected, we’ll click “Apply Kit.”

Before the kit is actually imported onto our site, though, we’ll be prompted to choose which templates and content to apply to our site. So if, for example, we only want the templates to be imported, but without additional content, we can uncheck the relevant options.

With our options set, we’ll click Next. Once the Kit import has been completed, we’ll see a confirmation screen, with a list of all the imported content. Perfect!

Next we’ll return to the WordPress dashboard, where we’ll configure some more important settings for our site, and view the content we’ve imported.

While importing a kit is a great way to get started quickly with a new site, there are a few aspects of the site we need to set up manually.

The first is our Navigation Menu. To set it up, we’ll go to Appearance > Menus. The first thing we’ll do is create our site’s Menu, by giving it a name, and clicking Create Menu.

WordPress offers a variety of content types we can link to, such as Pages, Categories, and even individual Posts. We can also link to a specific page or section, or we can use a custom link.

For Xander’s website, the menu should display links to the Home, About and Contact pages, as well as to the Articles Archive.

Start by expanding the pages tab, where we’ll find pages that were imported along with the Kit. Click View All to list all the pages on our site, and then the “Select All” checkbox and add them to our menu.

Our next step is to add the Articles page. To do this, expand the Categories tab and choose “Uncategorized.” This will link to an archive of every article that is not associated with any other category. We’ll learn how to change the Category name in a later lesson.

Now let’s make a few changes to this menu. Click and drag any item in the menu to change its order of appearance. We can also expand items to change the text that will appear on our site menu.

Now that we’re done with our menu, let’s save our changes, and take a look at everything that was added when we imported our new website kit.

Starting with the Pages area, we can see that several new pages have been added. We can create new pages if we’d like by clicking here, or make quick edits, such as to the page’s title and URL by hovering our cursor over the page name and clicking “Quick Edit”. We’ll also need to update the Slug. No, not those slimy creatures, but rather, the last part of the page’s URL. Click update to save changes.

We’ll repeat this for each of our Pages.

Next we’ll check for and remove any unneeded pages, in order to keep our site organized and lightweight. We’ll delete the default Sample page. We can make changes to several pages at once by selecting them, and choosing any bulk edit option from the dropdown.

Edit Pages by clicking Edit, or simply click on a page title, which gives us more editing options, including the page’s thumbnail image, called “Featured Image” here, view page revisions, and more. Modify content using the Elementor Editor by clicking “Edit with Elementor”. We’ll cover this in detail, in the next lesson.

Back in the WordPress dashboard now, let’s take a look at the Posts. These sample Posts have been automatically generated in order to help get us started . They’ll be useful in previewing the Archives, Single Post, and other Kit layouts, so we’ll keep them for now. Once we’ve started adding our own content, these posts may be deleted.

Now let’s preview all the imported Site Parts. We’ll navigate our way to Templates > Theme Builder. We may encounter this legacy layout, which we can bypass to get to the new Theme Builder. In our next few lessons, we’ll get familiar with the new Theme Builder, and learn how to edit individual templates and pages.
Speaking of pages, recall from the previous lesson, that the home page settings are imported together with a Kit.

We can confirm this by going to Settings > Reading, and as we can see, our site’s designated homepage is set to the Home page we’ve imported along with our kit.

And that’s it! We’ve now installed our kit and updated our website’s main settings. In our next lesson, we’ll customize our website design and give our site its unique identity using the Elementor Editor. So continue watching!

Hey there! It’s Aviva from Elementor. Welcome back to How to Build a Blog With Elementor.

In the previous lesson, we got introduced to the Elementor Kit Library, learned how to import a kit to our site, and set the essential navigation Menu options.

In this lesson, we’ll cover
• The basics of Elementor layout
• How to add elements, such as text content, images, and buttons, using the Elementor Editor
• And customize our newly imported kit to fit our style

Ready? Let’s jump in and get started! I’ve gone ahead and created a blank page, to demonstrate how the Elementor Editor works. There’s no need for you to create this page for your blog. However, if you’d like to follow along and work together to practice working with Elementor before we begin customizing our actual blog, please feel free to do so.

As mentioned in earlier lessons, every WordPress site needs to have a theme, and in our case, we’re using the Elementor Hello theme. By default, any page or post inherits the theme’s header, footer and title. In some kits, you may face an overlapping header. But don’t worry, we’ll take care of that in a moment.

There are two main areas when building a page with Elementor:
The content area, located on the right side of the screen, where you can add and edit elements that form the layout and design of your page, and the Left Panel, which offers a wide variety of useful elements and options.
Let’s begin with the content area.

There are two ways we can start. We can either design our pages from scratch, or use a template from the Library.

Let’s begin with the library. This Library is separate from the Kit Library and differs in that it’s used to add individual templates to a web page, and not to import a full website. Here we can preview templates we’ve saved, view complete page templates, or even Blocks, which are used to make up small parts of pages, and insert them into your page.

Filter the blocks by choosing a category, or use the search bar on the right.
We can also add blocks and templates to our favorites, for easy access.

I’ll go ahead and insert this block, so we can get to know the Elementor editing structure. Great!

Every page built with Elementor can be drilled down to three main components: Sections, Columns, and Widgets.

Sections are the largest and can be identified by their blue border, like we see here.

Every Section contains one or more Columns, which we can identify by the black dashed border. These columns house widgets, such as the texts and buttons we see here. We control the Sections, Columns, and Widgets with their handles.

To make changes to a Section, Column, or Widget, simply Right Click its handle, where we can edit, duplicate, delete, and more.

We can move sections, columns and widgets around by simply dragging and dropping them. The blue line indicates where they’ll be positioned when we let go.

Another way to add sections is by clicking the plus icon over here, then choose one of these pre-set structures, which we can tweak to our liking as we go, or simply delete them.

Sections, Columns and Widgets have 3 tabs in the panel on the left. Sections and Columns have: Layout, Style and Advanced tabs.

Whereas Widgets have Content, Style and Advanced tabs. Soon we’ll see how these settings can be used to design our pages.

Note that every time we click on an element, it changes the Panel Header title here, to indicate which type of element we’re editing.

When we first open a page, we’ll see the widgets Panel. Widgets are used to add and design elements on your page, like headings, text editors, images, videos, and more. We can access them at any time by clicking the nine squares icon in the Panel Header.

At the bottom of the panel, we’ll find helpful settings and options for pages built with Elementor. First, are thePage Settings, where we can edit the page name, upload a featured image, hide the title, and change the page layout.

Next, we can launch the navigator by clicking here, or use the keyboard shortcut Command or Control I, to quickly navigate anywhere on the page. Currently, it’s empty because we haven’t added any content yet. We’ll use it later, when we edit our website.

Click here to see your edit history, and view recent changes or revert back to previous revisions.

No website is truly complete without being adjusted for mobile devices. We can enter responsive mode by clicking here, and switch between different devices at the top of our screen, to adjust our design. Alternatively, use the keyboard shortcut CMD or Ctrl+Shift+M to quickly switch between devices.

Once we’re ready to preview our design, we can click this icon which will open the page in a new tab. Of course, before we do so, we’ll need to either Save our changes as a Draft, or Publish the page when it’s ready to go live.

Back in the Panel Header, Open the menu by clicking this icon, where several more settings and navigation options are available.

Site Settings, as it sounds, allows us to globally define our site’s settings—all from one place. We’ll get back to them shortly.

Theme Builder, allows you to manage all your Site Parts from one location. We’ll learn about the Theme Builder in more detail in our next lesson.

User Preferences, allows us to customize the Elementor workspace, such as switching to dark mode, altering the width of the panel, and more.

Below is the Finder, which we can also launch by using the shortcut Command or Control E, and access different parts across our site quickly.

And last, Click ‘view page’ to see your live website or ‘exit to dashboard’ to go back to WordPress dashboard.

Okay, let’s use what we’ve just learned, and edit the pages of our website, starting with our home page. We’ll use the Finder to quickly access any page edited with Elementor.

Remember Xander? This is his blog, so we need to make a few changes to this page, and other site parts like it, to turn this kit into Xander’s website.

We’ll start with the first section, usually referred to as the “hero” section.

I’ve already prepared all the content I’ll be using on this page, so changing it is a simple matter of copy and paste. Click the text editor widget and change the text, along with the title above it.
The image here is compelling, but it’s definitely not Xander. Click the image widget; then choose an image to change it. You can use images from your media library, upload your own, or find a link to these images in the lesson description. Fantastic.

Now, we still have this button in orange, which doesn’t quite match Xander’s style. This is from the Kit’s branding, taking its settings from Global Styling. We’ll have dozens, if not hundreds of elements using this color throughout our site, so instead of changing them one by one, we’ll see how to change them all from one place, shortly.

Meanwhile, let’s move on to the next section, and change the content here, as well. We’ll change the text and images as we did in the last section. Don’t forget to edit the button text, too. For the button’s link, rather than adding the page’s URL, we’ll use Dynamic Tags. This will ensure that the link will always work, even if we change the URL in the future.

Click the Dynamic Tags icon and choose “Internal URL”. Then hit the wrench icon and from the Type dropdown, choose Content. Next we’ll search and choose the relevant page on our site, which in this case, is the About page.

In our next section, we only need to change this title, and the button below. We don’t even need to touch the Posts widget, since posts are dynamically pulled from our Posts Archive. It currently consists of the default posts imported with the Kit. We’ll update this button’s link as well, but instead of choosing a content page, we’ll choose a specific category. To do this, choose “internal URL” again, and in the dropdown, select “Taxonomy”. Then search for “Uncategorized”. This will send the user to an archive page with posts that were not given a specific category. Since we only have one category, “Uncategorized”, it will show all the articles Xander has available on his site.

Continuing on to our next section, this kit displays more posts from a different category, called “Tips”. Since Xander currently uses only one category for his articles, we won’t need to show this Post Category.

However, we can use existing parts in any kit to our advantage and change their context to display more relevant content, like promoting Xander’s digital products, for example.

First, we’ll change the title. Delete these sections, as well these Posts widgets. From the Widgets Panel, search for the Call to Action widget, and place it inside the left column. Change the image, title, and button text. Delete the description.

We’ll set this button when clicked, to download a PDF file that Xander created, when clicked. Once again, we’ll use the Dynamic Tags, and “internal URL” options to set the link. From the dropdown, choose “Media”. Then search for the appropriate file name.

Now let’s tweek the height, and match this button’s style to the rest of the Kit. Head over to the Style tab and expand the Button options. We’ll adjust the button size, and change the border width. We’ll also adjust the border radius to sharpen the corners, and match the other buttons above.
Next we’ll update the button hover state, which is how the button displays on mouseover. Click the Hover tab, and change its styling, to match the same hover effect we see here.

For the text color, click the global icon and choose the existing white color.
For the background color, and choose Accent. Now that we’re done with the first product, we’ll simply copy and paste the widget, and change its content.

Unlike the free checklist, Xander will offer this product for sale. So we’ll link this button to an internal product page, or an external purchase page. There are several websites offering this service, such as Payhip and Gumroad. We recommend doing your own research and selecting the one that best suits your needs.

Alternatively, we can use the PayPal button widget for a swift checkout using our existing PayPal account.

To make sure there’s enough space between this section and the next, we’ll click the right column, go to Advanced, and change the bottom padding to 30%. Padding is used to add space within an element, and should not be confused with Margin, which adds space outside of an element. For example, if we added margin to the section ,instead, this would create space between the bottom of the section and this line here, which is applied to the column’s style.

Now it’s time to personalize Xander’s website, to make it completely his.

Click the hamburger menu, and go to Site Settings. You’ll notice the panel color turns blue, indicating we’re editing settings that affect our whole website, and not just the open Page or Post.

We can personalize our Site Identity here. We’ll see the site title and site description, which we already added in an earlier lesson from the WordPress dashboard.

Since that’s already taken care of, we can go ahead and upload our logo. We can choose from many different image file types, but for beginners, we recommend starting with a JPG or PNG file. Last, we’ll add the favicon, which is the small icon we see in the browser tab. Ideally it should be a minimalistic graphic without too much detail, since it displays at a very small size. Click Update to save, and refresh the page, in order to preview the changes we’ve made.
Next, we’ll tailor our website’s style with unique fonts and colors.

Xander’s site should encompass what it means to be a digital nomad, packing light (since he’s always on the move) and professional, since every digital nomad works remotely. Keeping the design minimalistic and clean is key to keeping the style consistent with Xander’s brand.

So let’s go ahead and update our site’s styling.
Rather than change each color and font one by one, which can take forever, we can change them all from one place.
Go back to Site Settings, and let’s update our site’s styling.

At the top, we have Global Colors and Global fonts.
We’ll begin with the global colors, where we can view the main colors used throughout the website. Note that changing any color here will affect any element that uses this Global color.

Often web creators use a brand or style guide to help facilitate their design process and maintain consistency across their website. However, when we’re just getting started and don’t yet have these guidelines in place, here’s a tip on how we can choose colors for our site.
Take a look at your logo, and choose one or two colors from it. With Xander’s logo, we can see that we have this bright green. We can now choose that color, and set it as the focal color on our site.

For this website, we’ll just change the Secondary color, which is orange, to Xander’s green, by pasting in its color code, and leave the rest as it is.

If we need to make any changes in the future, we can come back to this panel at any time and tweak our colors.

Feel free to pause the video to make your own changes, and come back when you’re done.
Next, we’ll talk about Global Fonts, where you can control the different type styles that repeat throughout the website.

But how can we know which style controls which text in the actual website?
I’ll share a little tip. Go back to edit the home page, by clicking the X in the corner of the panel.

We’ll click the first heading we see, go to Style, and hover over the global icon.
A tooltip with the style’s name will show up. “Hero Main Title” is ours.

Head back to: Menu > Site settings > Global Fonts, and search for that name.
Now we can amend that Global Font style, using the heading as a reference.

Feel free to change the default kit’s font, which is Poppins in this case, to any font you love from the list. If you know the name of the font, just start typing its name here. We’ll use ‘Krona One’ for Xander’s site.

There are many more Typography options like size, weight, and more. When it comes to our brand online, consistency is key!
Also, be sure to pick a font that suits digital viewing, and is especially readable on small devices.

Great! Now that we’ve learned how to use Elementor to customize different parts of our site, we can use that newfound knowledge to update the content on the About and Contact pages. And with kits, it’s going to be much faster!

I already have all of Xander’s content prepared, making this process a simple matter of copy and paste. Now would be a great opportunity to upload all of Xander’s images that we’ll use throughout the site. If you’re following along with Xander’s site, you’ll find the content under Course Assets in the video description. If you’re creating your own website, this is a great time to go ahead and update your own site accordingly.
In our next lesson, we’ll get familiar with the Theme Builder, which allows us to edit and manage all of our site parts, such as header, footer, page templates, and more – all from one place!

See you there!

Hey there! It’s Aviva from Elementor. Welcome back to How to Build a Blog in Elementor.

In the last lesson, we got acquainted with the Elementor Editor and learned how to customize our site using Global Styles.

In this lesson, we’ll get familiar with Elementor Theme Builder, a single place to manage all your site parts in a visual and intuitive way.

Access the theme builder from any page edited with Elementor, by clicking the menu icon and choosing Theme Builder.

The theme builder displays all the parts of our site, and allows us to edit the header, footer, post templates, page templates, and more. The green dot next to a template’s name indicates this template is active, and accessible to visitors. With a preview for each site part, it gives us a birds-eye view of our entire site. Since we’ve used a Kit for our website, all these templates have already been imported together with it. Cool!

The panel on the left, gives us a quick overview of the various types of site parts.
Clicking on a specific template, will show us a larger preview with additional information.

For example, let’s take a look at the Archive templates.
We can edit a template by clicking here, which will take us directly into the Elementor Editor.

Some kits include several options for the same site parts, giving us the freedom to style our site however we see fit. Our kit contains several archive templates, which we can use to display different types of archives, such as one Archive template for a Category, and another for a Tag.

Since Xander plans to publish all his articles under one category, we’ll go ahead and delete any unneeded templates. Click here to delete this template. Great!

To add a new template for a specific site part, click the plus icon here, which will take us directly to the Editor.

Alternatively, we can click the Plus icon in the top right corner, which will prompt us to choose a site part template.
Clicking the “i” icon brings up more specific information on that part, including a dedicated video and a help article.

Using what we’ve learned, we’ll go ahead and make some adjustments on the different parts of our site, starting with the header.

Let’s take a look at what needs to be changed here. Xander’s logo appears a bit small, so we’ll need to change its size. We’ll also need to connect the menu popup.

Let’s start with the logo. Click the logo widget, to edit it. We can see from the icon here that it’s dynamic, and displays the image we set earlier as our Site Logo.

Head over to Style, where we’ll change the logo’s width. Next, we’ll switch to Responsive View to make sure the logo looks good on different devices.

We’ll begin with Tablet view. If we don’t enter a value for a responsive setting, it will acquire the value we entered in the bigger device view.
This is because in most cases, responsive edits in Elementor are inherited from the larger viewport, or screen size, down to the smaller viewport.

So, as we can see here, Tablet view has inherited the Desktop view’s value, which is displayed grey.

Next, we’ll switch to mobile view. Use the responsive bar at the top to navigate easily between devices, or use the keyboard shortcut, Command or Control +Shift+M.

This value is different from the Desktop and inherited Tablet width because it has already been pre-set manually by the Kit’s creator. We’ll change the value for the width, but as we can see, there isn’t too much of a difference here. This is because the logo size is limited by the column width, which has also been pre-set in the Kit. so let’s adjust the column, by clicking it, and increase the column width value.

Now that we changed the size of this column, the logo has room to expand to its full width, but the remaining column gets pushed lower down in order to display its given width. Fix this by clicking the remaining column and update its width.

Next we’ll edit the menu. Click the menu icon. You’ll notice this icon also uses a dynamic link, this time linking to an existing popup. Let’s make sure it’s connected to the right popup by clicking the wrench icon, and under Popup, type in ”Menu,” and choose the correct popup. Click the wrench icon again to close it.

Click Update to save our changes. Now that the header is done, let’s take a look at the menu popup template, and see if it requires any changes.

Use the Finder to easily access it, without exiting the Elementor Editor. As we can see, this template also uses the logo widget. On the right, we’ll find the nav menu widget, which is pulling in its links from the menu we created earlier in the course.

This menu looks GREAT, so let’s continue to the site’s footer. We’ll use the Finder again, this time to navigate to the “footer”. Scroll down a bit, and let’s take a look at what we need to change here.

We’ll need to update the heading…and text editor widgets with Xander’s copy, as well as change this image. We’ll also take a look at connecting the form widget to email marketing services. Then at the bottom, we’ll update the credit line in the Heading widget, and add in our social media links.

So we’ll start by selecting the heading, and changing the Title … and the text editor widget content. Next we’ll choose another photo. As you can see, we don’t have an image widget here, so let’s see how this image is being displayed. Select it, and we can see it’s in a Column. We’ll click on the Style options, and we can see from here that the column is using an image as its background, so all we’ll need to do is click the image and select a different photo. Great!

Next, we’ll select the Form widget. Under Actions after submit, we have options to link this form to different newsletter services, such as Mailchimp, or MailerLite. To find out more about integrating your email marketing service into Elementor forms, check out the link in the description.

Select the heading widget to update the Credit line. Like links, the title field can also use dynamic tags. It’s set to display the current date, and by clicking the wrench icon, we can see it shows the current year, represented by the letter Y. Cool.

We’ll expand the Advanced section, and change the text that appears after the copyright symbol. And last, but definitely not least, let’s not forget to add our social media links before we update!

And that’s it! Now you know how to use Elementor’s one of a kind Theme Builder, to design and manage all of your site parts in one place. Before we continue, feel free to spend some time exploring the Theme Builder and templates included in the Kit. Then go ahead and remove any inactive templates, indicated by the grey status dot.
In our next lesson, we’ll cover the essence of our blog: creating and managing new posts! So click to keep watching. See you there!

Hey there! It’s Aviva from Elementor. Welcome back to How to Build a Blog in Elementor.

In the last lesson, we got familiar with the Theme Builder, and learned how to use it to customize different parts of our site.

In this lesson, we’ll learn two different ways to create blog posts: first, by using the WordPress Gutenberg Editor, and second, with the Elementor Editor. We’ll also cover essential blogging best practices.

So let’s begin with creating blog posts. The WordPress Gutenberg Editor provides us with a more automated method of creating posts, and presents an optimal solution for entering and editing multiple blog posts in a row while the Elementor Editor provides us with a highly customizable way to style our posts’ layout.

We’ll go over both methods and understand which situations call for using each one, depending on our goals and needs. So grab a snack, sit back, and let’s get started.

We’ll begin by creating a new post using the default Gutenberg editor.

From the WordPress dashboard, go to Posts. Notice that the Posts area, unlike Pages, shows the different taxonomies we have available for posts: Categories and Tags.

These posts were imported along with the Kit we selected, which we can use as placeholder posts to preview our layouts while we design them. This screen gives us an overview of all our existing posts, along with essential information, such as the post’s author, its categories, tags, number of comments and date published or last saved.

Here we can see which posts have been edited with Elementor. We’ll see how to Edit Posts in Elementor later in the lesson, but for now, let’s create a new post by clicking here.

Welcome to the Gutenberg Editor! Also known as the WordPress Block Editor, it is divided into three main sections; The Top Bar, the Block Editor Content area on the left, and the Settings Sidebar on the right.

At the top, we’ll find a number of options, such as returning to the WordPress dashboard, and block editing options. Clicking the Details icon will give us more information, such as the number of words in our article, and how many Headings we’re using. We can also edit the page with Elementor, and set the Publish and Preview options we need. Clicking this gear icon will either display or hide the settings sidebar. And lastly, we have more interface and WordPress options available by clicking these three dots.

Ok, let’s get this post going! First thing’s first, we’ll give our Blog Post a title. Next we’ll add content. The content we add to this post is defined by blocks; to add text, we’ll start with a simple paragraph block.

Selecting a block indicates a block type, along with different formatting options. Change the block type quickly, by clicking the block icon and choosing a different block type, or create a new paragraph block by hitting Enter on your keyboard.

Click this icon to add a new block. Use one of the basic blocks offered here, or search for the block you need. Click here to expand the menu, which offers a variety of different blocks to use in your article.

You can also type forward slash, and the name of the block you need, without leaving the work area, to stay focused on your content.

In addition, whenever we add or select an existing block, this sidebar changes to show us the block description, along with its settings. For example, this heading block allows for changing the text’s size and color, while adding an image block, will give different style, and dimension options.

Now that we understand the basics of blocks, let’s see how we can set, change, and update individual post settings from here.

In the sidebar, click the Post tab to display the post’s settings. Let’s go over them one by one.

First, control the post’s visibility here. Set the post as Public to allow everyone access, make it Private, so that only site Admins and Editors will be able to see it, or protect it with a Password. When we’re done, we can either publish our post immediately, or set it to be published later. This is a great feature for batch writing and scheduling blog posts.

To make this post more prominent, we can stick it to the top of the blog, so it will always show up as the first article.

Next, we’ll move to the Permalink tab, where we can set the post’s link. We’ll need to first Publish or Save the post as a Draft in order to edit it. Let’s keep its URL short and sweet, and on topic. Note that any spaces used in this field will turn into a hyphen.

Great. Let’s move onto adding the right category to the post. Recall that all posts are automatically added to the “uncategorized” category. Since Xander has only one category, we don’t need to change it. But, should we ever have multiple topics within our blog, adding new categories and naming them properly will help keep our blog organized.

To add categories, click “Add New Category” and give it a proper name. Remember, categories are hierarchical, so we can set parent categories for any category we create.

To see and manage all our categories, we’ll go back to the WordPress dashboard, and under Posts, go to Categories. Here we can add a new category, set its URL, define a parent category, and give it a description, if desired. This screen is especially helpful since it gives us an overview of how many posts we have under each category. To edit or delete a category, we can simply hover over and choose the action we need.

Again, Xander has only one category, so adding new categories isn’t needed at this time. However, it’s recommended to use descriptive names for our taxonomies, such as this uncategorized category.

Back in our first post, along with categories, we can add different tags. To add new tags, type in your desired keywords, separating them by either a comma or by pressing Enter.

Note that we can add and manage new Tags, in the same way we do with Categories.

Once we’re done with our categories and tags, we’ll set a featured image for our post. This image will show up as our post’s thumbnail on our blog and in social media posts.

Below, we can add an excerpt for our post, which can also be useful for social media posts and article layout, as we’ll see later in this lesson.
Knowing how to add a new post to our blog is a great start – but in order for our articles to make an impact around the web, we need to make our posts accessible and easy to find.

A Post that is easy to navigate and read, and that uses relevant keywords will rank higher in search engines, helping us reach more people.

This may sound like tons of work, but actually, we can accomplish this with just a bit of planning.

We’ll start by setting up a simple hierarchy to our text, separating our article’s text copy into a heading, paragraphs and subheadings.

First, every web-page has a title. This is our H1 heading, and there should be only H1 heading on every page.

As we continue to write, we can divide our article or page into sections and give each one a subheading, which is where H2 headings come into play.

We can use up to six different headings, with each one used as a sub-heading for the one that came before it.
Back in WordPress, I’ve already added this post by Xander, so we can see hierarchy in action. This article has been structured, through the use of multiple paragraphs and subheadings.

However, if we look closely, we’ll notice that what appear to be subheadings are actually paragraph blocks. Let’s change each one, by selecting it, and switching from Paragraph to Heading. You’ll notice that every new heading is assigned H2 by default, but that can be changed here.

Once all our text is added, we can make the post more engaging by adding an image block, or even a video.

As with text, it’s good practice to label our images properly, starting with the file name, and adding a title and alt text to the image. Alt text, short for Alternative text, is used to add a short descriptive text label for images we add to our site. It will display whenever the image cannot be loaded properly, or when accessed from screen-reader, which makes our site both accessible and optimized for search engines.

Once the article is complete, we can Publish…and Preview it.

You’ll notice this post, which was imported with our Kit, already has a basic structure. This is because the Kit contains a single post template, which has been used for all of the articles brought in with the Kit. The text typography however, doesn’t match our design, since it takes its style from the Hello theme. We’ll see how we can customize this in the next lesson.

Now that we’ve seen how to add and style Posts in Gutenberg, we’ll see how to do this in Elementor. As we’ve seen, the styling options in Gutenberg are somewhat limited, compared to Elementor. Something to keep in mind when using Elementor to Edit Posts, however, is that while we can create customizable and unique designs using Elementor, it may not be as efficient of a method as Gutenberg, when used on a large scale, such as for blogs where we’ll be adding or editing a large number of posts at once.
Let’s go back to the WordPress Dashboard, and see how we can create a customized post using the Elementor Editor.

Before we begin, as we learned before, it’s important to structure the article properly, with the corresponding headings and subheadings.

We’ll give the post a title, and use the first paragraph for the excerpt. We’ll see how this comes in handy, in the next lesson. Once our article is ready, click Edit with Elementor. To begin building our post, scroll down to find the content area, and start adding in the widgets we need, like the Text Editor widget and the Heading widget. Just like in the Gutenberg block editor, every heading widget is assigned the H2 tag by default, and should be changed as needed.

We’ll keep adding widgets with our post’s content. And let’s not forget that we can duplicate widgets for a faster workflow.

Once we’re finished with that, we can enhance this article by using widgets like the Slides or Gallery. You may have noticed that the Headings come pre-styled in the Elementor Editor. This is because both the Headings and the Text editor are pulling in the Global Styles we set in an earlier lesson.
And with that, we covered everything we need to know to add and edit new posts to our blog.

So go ahead and add any remaining posts, using the method that best suits your blog’s needs.
In our next lesson, we’ll see how we can style posts created with the Gutenberg editor, as well as how we can customize the post template to our liking.

So be sure to keep watching!

Hey there! It’s Aviva from Elementor. Welcome back to How to Build a Blog in Elementor.

In the last lesson, we learned the different ways of adding new posts to our blog, and went over article structure and blogging best practices.

In this lesson, we’ll see how we can customize the single post template of our kit, and go over style options for posts written with the default Gutenberg editor.

So grab a cup of coffee (or tea) ready, and let’s get started.
We’ll begin with a preview of the post we created in our last lesson, using the Gutenberg Editor. As we can see, this article’s text style doesn’t match the fonts and colors we’ve set in the Global Styles, but we’ll see how to correct it in a moment.

Let’s start customizing the post template. Use the Finder to access the Theme builder, choose Single Post, and click “Edit”. In order to see which changes need to be applied, we can select a specific post to preview..

Click the gear icon, and under Preview Settings, go to the second dropdown and search for our post. Hit the button to update the preview. Perfect.

Before we make any changes, let’s explore this post, and see what we’ve got here. First, we have this article image. If we click this widget, we’ll notice it’s taken from the featured image field. By clicking the gear icon, we can set a fallback image, in the event the image does not load properly.

Continuing to the right column, we have this post info widget, showing the date this post was published. This widget allows us to add useful information for our visitors, such as terms, usually used to add tags or categories, provide the number of comments made on this article, and more.

By clicking the headline, we can see it’s actually a post title widget, which automatically takes information from the article we’ve created in WordPress. This is one of many post-related widgets, designed to streamline the single-post creating process.

Scrolling down, we can see our post’s content. However, we can’t actually edit it from here. This is because this widget, Post Content, dynamically takes its content from the article we created in the previous lesson. But we can keep editing this template, starting with the sidebar, here. Let’s change it a bit to fit Xander’s brand.

First we’ll change the text, and adjust the style. We can also integrate and connect our email marketing platform to our form. We’ll leave links in the description.

Next, we’ll change the image.

Scrolling further down, we’ll find this widget, which helps direct our readers to either an older or a newer post. Since we’re viewing the newest article on Xander’s blog, we only see this older stories button.

We also have these share buttons, which are integral for reaching a wider audience. We can choose from and set the different platforms available for sharing, as well as changing the button style, like using icons instead of text. We can also hide the label and use only an icon, which will fit Xander’s style better. Great!

Next up, we have the post comments widget, which, as its name implies, allows our readers to reply to our article. Like the Post Content widget, this widget inherits its style from our site’s theme. We’ll see how to customize this in a moment.

And lastly, we have the Posts widget, which displays more articles. Use the layout settings to choose how our posts will be displayed, and the Query settings to control which posts to display, and in what order.
we can control the posts pagination settings in the pagination tab.

Now let’s see how to style the typography within the post content and the Replies widgets. Global fonts can be applied directly only to content created in the Elementor editor. Recall that we created this post outside Elementor in the Gutenberg editor, …so we’ll use Theme Style to adjust how our post looks.

Click the hamburger menu, and head over to Site Settings. Remember, this blue header indicates we’re editing settings that will be applied throughout our site.

Under Theme Style, click Typography. In the last lesson, we mentioned the importance of content hierarchy, using different headings. This screen allows us to style each individual heading, as well as the text and different links throughout our site.

Let’s begin by adjusting the Body style, using our Global Colors, and Fonts.
We can also control the Space between paragraphs, as seen here.
Next, we’ll set the links’ color. Change it by setting a color for the links, as well as for the hover effect, if needed.

Since H1 is set by our design, there’s no need to adjust this style, so we’ll skip directly to H2. We’ll set the color… and the typography. We’ll do the same for H3. We’ll leave the rest of the headings as is for now. If we ever need to adjust them in the future, we can always come back here.

Scrolling back down, we can see this “Post a comment” button is still styled using the default Theme colors. To change this, go back to Site Settings, go to Buttons, and adjust the button’s style as needed.

We can also style other elements, such as Images and Form Fields. I’ll take a moment now to style the Forms Fields. Feel free to go ahead and update your own styles as well.

Once everything is ready, we’ll hit the Update button to save our changes, and click this icon to close the site settings panel, and go back to editing our page.

Great! We’ve adjusted this template and its style to match Xander’s brand, but we’re really just getting started! . When we create a blog, we want to ensure our posts are easy to read and credible. There are several widgets that help us do that, and we’ll start with the Table of Contents.

Elementor’s Table of Contents widget helps you organize your page content based on the levels of hierarchy of your heading tags and makes it easier for your site visitors to navigate your WordPress website.

However, this widget generates its headings automatically, which means sometimes it might generate irrelevant headings, as we see here.

To filter out unnecessary headings, let’s make sure this widget only pulls content from the article itself. To achieve this, click the post content widget, go to Advanced, and in CSS ID, type in ​​”my-content”.

Back in the Table of Contents, type in the pound sign (#), or hashtag, and “my-content”. This lets Elementor know we want to pull only the headings within an element that have the my-content ID.

Now all that’s left to do is to style the widget to our liking.
We can also use the excerpt widget, and place it right above the Table of Contents, so our visitors will start with a more concise initial view.

This way, Xander’s readers have a short intro and this handy table of contents that offers easy navigation throughout the post.

Next, to add credibility to our posts, we’ll let visitors know whose article they’re reading.

Scroll to the bottom of the article, and in widgets, search for and drag in the Author Box widget. This Widget pulls the article author’s profile information. Xander is currently the only author in his blog, but a common strategy bloggers use to increase their audience reach, is to include guest authors on their blogs. Adding a short bio will strengthen the author’s credibility.

To edit this information, we’ll go back to the WP dashboard, but before we do, we’ll click update to save all the changes. Then, using the Finder, we’ll go to users, and click the user whose details you want to change. Here we can set a user’s role, like Contributor for a guest author, who we don’t want to give publishing permission like an Author has. We can also add a user’s first and last name, and set how this user’s name will be displayed throughout our site.
Lastly, we’ll add Xander’s bio, and change his profile picture.

When it comes to an author’s bio, it’s recommended to keep it concise, but don’t forget to remind your readers why they should listen to you.
The profile image, however, is controlled by Gravatar. If you don’t already have a Gravatar account, click this link, sign up using the same email you use as your WordPress login, and set a new image. Note that this image will follow you in every WordPress site you comment on, or any system that might be using Gravatar as well.

Now that we’re done, make sure to save your changes, and using the Finder, we can quickly go back to editing the Single Post template via the theme builder.

Back in the Single post template, we can see that the information we’ve just added was automatically updated. Cool. But let’s make a few changes to make sure it matches the site’s style.

Click the author box, and go to the Style tab. Adjust the image size. And change the text’s color.

This already looks much better, but we can add a small change to make the author box pop a bit more, and separate it from the article content.

Go to Advanced, and add a small gap using padding. Next, add a border and adjust its width. Perfect!

And let’s make sure not to forget to adjust any change we’ve made to mobile devices, by using Responsive mode!
And that’s it! We now have a fully customized article Post on our page!

In the next lesson, we’ll see how to make small adjustments to our Archive template, and even create Category or Tag specific archive templates. So be sure to keep watching. See you there!

Hey there! It’s Aviva from Elementor. Welcome back to our course, How to Build a Blog in Elementor.

In our last lesson, we learned how to customize the single post template and reviewed style options for posts written with the default Gutenberg editor.

In this lesson, we’ll learn how to edit our archive pages, using Elementor’s Theme builder.

Archive pages are used to organize a list of posts under a specific category or tag.

An Archive displays the content dynamically, which means every new post is automatically pulled in, and sorted by date, from last to first. This is especially helpful since there’s no need to edit this page manually, whenever we add new content to our site.

But an archive isn’t only used to show posts in the same category or tag. It can show posts with the same qualities, such as an archive of posts written by the same author, an archive of posts written in the last month, or even an archive of search results, showing posts containing the same keyword or keywords, we search for.

Okay, so let’s see how we can work with Archive pages using Elementor. We’ll Use the Finder to navigate to the Theme Builder, and locate the archive we wish to change. Click edit to open the archive in Elementor.

When we first open an archive, or any other page template for that matter, it’s important to set the relevant view for our editing. Click the gear icon to open the page settings, where we can see basic settings for this template.

Expand the Preview settings, and set the right preview for this design. We can see here that this page shows the recent posts in the same topic of the archive, whether it’s a category, or tag.

Now let’s explore this template.

Starting from left to right, we can see this image is static, meaning that every archive we open will display this same image. Let’s change this to one of Xander’s photos we have in our media files.

Next, we have this heading, highlighted in green. Clicking on it, we can see it displays dynamic data, in this case – the archive category, Xander’s Adventures. Going into post terms settings, there’s text here before the data, so every archive will display the word “All” and then the name of the category, so in the future we need to take this into account when we add new categories.

Now this title, like the image, is static. So let’s change it. Much better.

Scrolling down a bit, we get to the main focal point – the archive’s posts.

Instead of using the usual one posts widget setup, this kit uses two posts widgets. This gives us more design and layout possibilities.
Clicking the widget on the left, we see this posts widget only shows up to 4 posts per page. This limits the amount of posts that will be displayed on Xander’s blog, regardless of how many articles are published.

Let’s increase it to 8. We’ll do the same in the second “posts widget”.

This page is pretty much done, but before we update, we’ll click the arrow next to it, and go to Display Conditions.

Here we can set when and where this template will be displayed. Right now it is set to display on every archive page we have on our site, but we can also make it more specific, like displaying only for categories, or a specific tag.

I’ll set it back to how it was before, and click save and close to finish.
And that’s it! We now know how to edit and style our archive pages using Elementor.

In the next lesson, we’ll work on one of the most crucial parts of any site that often gets overlooked – the 404 error page – Rather than the standard grey default error page, we’ll customize our kit’s 404 template into an opportunity to regain our visitors’ attention, so stay tuned!

See you there!

Hey there, it’s Aviva from Elementor. Welcome back to How to Build a Blog in Elementor.

In the previous lesson, we learned how to use and modify Archive Pages, and in this lesson, we’ll learn how to edit and enable the Page Not Found Error, commonly known as a 404 Page.

The 404 page is displayed when a visitor reaches a page that doesn’t exist. A visitor may reach this page in a variety of ways, such as by typing in an incorrect URL, clicking an outdated link, or if the page slug or site permalink structure has changed.

However they’ve been taken there, the 404 Page lets our visitors know that they have reached this page in error, and can offer helpful suggestions on how to proceed.

So let’s see how we can set up an effective 404 page. Our Kit already comes installed with a 404 Page template, so we’ll start by opening it, and reviewing any necessary changes.

We’ll go to Theme Builder, and on the 404 Page template, click Edit. Ok, let’s take a look. This template comes with a great structure, including an image, two headings, a text editor widget, and button. But there are a few things we can tweak, to give our visitors a hand, and not leave them stranded on this page.

The first thing we’ll do is update this image to one of Xanders. Then we’ll change the second heading to something a little more friendly and encouraging, and, we’ll update the text copy to guide our visitors in their next step.

Lastly, we’ll confirm that our 404 Page is enabled on our site. Click to view the Display Conditions, and we can see that our template is already set to be recognized as our site’s 404 Page. Perfect. Now we’ll Save and Close, and Preview our page.

Some other ideas to add value to our 404 page are to promote a product or support a cause, link to cornerstone articles, popular posts on social media, and other Calls to Actions.

And that’s it. Our 404 Page is all set for anyone who stumbles upon it, and ready to guide them back home. In the next lesson, we’ll create a landing page to showcase our most important links, to link to from our social media profiles.

Click to continue watching and see how.

Hey there! It’s Aviva from Elementor. Welcome back to How to Build a Blog in Elementor.

In the previous lesson, we learned how to edit and enable a 404 Page, and in this lesson, we’ll create a special landing page to showcase the most important links on our site. Also known commonly as the “link in bio” page, this page’s link can be used on social media profiles, where you may be limited to one link, such as on Instagram.

We’ll begin by creating a new page, and naming it Links. Then we’ll click Edit with Elementor.

First off, let’s hide the header and footer, and start with a blank page. To do this, we’ll go to Page Settings, and change the Page Layout to Elementor Canvas. Perfect.

Next we’ll create a new Section, with one column. We’ll set the width to 500, and change the Height to Fit to screen.

Then we’ll select the Column, and set the Widgets space to 0 to remove the default space between widgets.

Great, now that we have our page structure, we can begin adding content. First we’ll drag in an image widget…and select…and insert our image.
Next we’ll add a link to it to take visitors to the website homepage. Click Custom URL > Dynamic Tags, and select Site URL.

Next, we’ll round the image, by going to Advanced > Mask, and toggle it on. The default shape is a circle, so we’re all set. Score!

Next we’ll drag in a button widget. We’ll add our social media handle as the Text, and enter our social link. Then we’ll align the text to the center.

In Style, change the typography to Text, and add a Border Radius to round the corners. In Advanced we’ll unlink and add some padding to the top and bottom of the button.

We’ll drag in another Button widget, and enter our text. Then we’ll add the link to the checklist. Set the Alignment to Justified. Then, in Style, set the text color to Primary, and button Color to Full Transparency.

Next we’ll set the button Hover State. We’ll change Text Color to White, and the button Color to Accent. Nice.

Now we’ll add a border around our button. Change the type to Solid, and the width to 1. We’ll set the color to Accent. Then we’ll set the border radius to zero to sharpen the button corners.

Now we’ll add some padding. Click the link icon to unlink the padding, then update the padding values to increase the spacing around the button text. Moving over to the Advanced Tab, let’s unlink the Margin values and add a margin to the bottom, which will add some space between the buttons, as we add more of them to the page.

And adding more buttons will be a breeze. All we need to do is right click and select Duplicate. Repeat two more times. Nice! How fast was that!?

Now we’ll select each of our duplicated buttons, and update its text and link. And for the last button, click Advanced, and unlink…and remove the margin to set the button back to its defaults. Perfect.

The desktop view is all set. Let’s check responsive view. We’ll use the shortcut Control or Command Shift M to switch to mobile view, and select Tablet from the top bar. It looks perfect, so let’s switch to Mobile now by selecting it from the top bar.

The elements are cutting quite close to the edge here, so let’s add some space around them. Select the column, and in Advanced, unlink the padding. Now add some padding, and voila, our page has been optimized for mobile.

Ok, let’s Publish, and Preview. Great! Now all that’s left to do is Log in to Instagram, Edit Profile, and update our Website URL. Now any time a follower clicks this URL, they’ll go straight to the links page.

(So now there’s no need to update our link in bio every time we post on Instagram or create a third party link in bio page and deflect followers from visiting our website.) Pretty handy!

In our next lesson, we’ll learn how to manage multiple authors on our website, so be sure to keep watching.

Hey there! It’s Aviva from Elementor. Welcome back to How to Build a Blog in Elementor.

In the previous lesson, we created the link in bio, and In this lesson, we’ll cover the Role Manager settings.

There are times we may find ourselves managing a blog or a magazine, with multiple authors, editors, and contributors. To keep our design safe , we’ll need to manage and limit what users can do i n the Elementor Editor.

Let’s see how to use this feature. From the WordPress Dashboard, go to Elementor and choose Role manager.

Here, we manage users’ access in the Elementor Editor, based on their role assigned in WordPress. Notice we have two checkboxes to choose from, for each role.

First, we can block access to the Elementor Editor by checking the “No Access to editor” checkbox. This will hide the Edit with Elementor button, blocking the user from creating new posts in Elementor. It will also block the user from accessing the pages built with Elementor altogether.

Now let’s take a look at the second checkbox. We learned in previous lessons how to create new blog posts using Elementor. So let’s say for this example, we have multiple Authors on our blog who can create and edit new posts. We can limit their access to the editor by checking the “Access to edit content only” checkbox.

This will allow Authors to edit page content with Elementor, but without access to the Style tab. Notice it’s also impossible to drag in new widgets, move elements, edit, delete, or affect the design in any way.

And that’s all there is to managing multiple users on your site. Now there’s no need to worry someone might accidentally delete or straight up ruin our designs.
In our next lesson, we’ll learn important tips for managing a blog from a marketing perspective, as well as gain some insight into strategies we can use to make our blog profitable.

See you there!

Hey there, it’s Aviva from Elementor. Welcome back to How To Build a Blog in Elementor.

In our previous lesson, we learned how to manage multiple authors on a website, and in this lesson, we’ll learn important tips for managing a blog from a marketing perspective, as well as gain insight into strategies we can use to make our blog profitable.

From Freelancers and small businesses to agencies and big brands – a blog is a powerful way to market your expertise, expand your audience reach, and increase sales.

But for the blog to be an effective marketing tool, it needs to be properly set up, and with a few minor adjustments we can use it to generate income. To make our blog profitable, we first need to make our blog easy to find and easy to read.

The best way to achieve this is to use a third party plugin for Search Engine Optimization, such as RankMath or YoastSEO. We’ll use RankMath for this lesson. This plugin offers a variety of helpful tools; not only can we use it to control the SEO aspect of the website, we also get valuable information that helps us write better articles, including receiving tips with relevant keywords, which increases the ranking of our site.

We’ll begin by installing the RankMath plugin. Use the Finder to quickly navigate to the Plugins screen, click Add New and search for the RankMath plugin. We’ll click Install Now, and after activating it, we’ll be redirected to this screen, offering to connect using a free account. We’ll choose Advanced, and click Start Wizard.

The first thing we can do here is set the site’s type. In Xander’s case, it’s already set to a personal blog.

Next, we can add our site’s logo that will be displayed in Google search results. And in case we share a page or a post from our site that doesn’t have a featured image, we can set a default image for shared content on social media.

Continuing on, we can connect our site to Google Services, such as Google search console and Google analytics. This allows us to verify our site ownership in Google Search console, track page and keyword rankings, set up Google analytics and submit site maps to the Google Search Console

In the next screen, we have the option to choose our sitemap configuration.
We’ll leave these settings as is.

In our next step, we have the option to set up some SEO tweaks, such as automate SEO tasks, redirect attachment pages, and more. We’ll leave this screen as is as well and continue to the last screen.

From here, we can return to the WordPress dashboard, but before we do, let’s activate some important settings to avoid errors in our site.
Remember in Lesson 09 we talked about 404 pages? As we mentioned in earlier lessons, they may be reached due to a mistyped URL or if a page’s slug has been changed..

In order to minimize the frequency of our visitors reaching 404 pages, we can monitor which 404 errors visitors encounter in our site, and how often. Then, in the event they come across it often, we can redirect them to a different page.

Both people and search engines aren’t fond of error pages, so this can help us enhance user experience and make the site more SEO friendly.

Back in RankMath setup, click Setup Advanced Option and skip ahead to 404 + Redirection. Here, we’ll activate 404 Monitor, which will let us know if visitors or search engines bump into any 404 error pages while browsing our site.

Then, we’ll toggle Redirections On, which will activate the option to create temporary or permanent redirections in our site. That way, if there’s a specific page users see often, or if we changed a page’s slug for any reason, we can simply add a redirect to prevent both human visitors and search engines from visiting the 404 page unnecessarily.

Click Save and continue, and go back to the WordPress dashboard.
This will take us to RankMath SEO settings. To see if there are any 404 errors in our site, we can go to 404 Monitor under Rank Math.

It keeps a log of broken URLs that lead to 404 pages. If you find a URL that repeats a lot of times, simply add a redirect to a more relevant place and keep your visitors happy!
Speaking of logs, let’s talk about the RSS feed.

RSS, or Really Simple Syndication is basically a feed of our site’s content that makes sharing the site’s content very simple.

Many websites from news channels to podcasts, use the RSS feed to share their content, which can then be read by RSS readers, such as Feedly or Google News. This allows users to consume content from different sources, all from the same place, by subscribing to their favorite feeds.

We can also use a third party service to create automations based on our RSS feed activity, such as to send our subscribers a newsletter every time we publish a blog post.
Back in WordPress, we can use RankMath to set up the content that will appear before and after each of our posts, using dynamic variables. Begin with setting up the blog’s title by using the blog-link variable, followed by the featured image and post link variables.

Then, add the content that will follow our post’s content, but this time we can use a bit of text mixed up with the variables, making a dynamic phrase like “The post whichever post we’re reading, was written by Xander Banks and first appeared on Xander Travels.

Let’s save our changes…
This is great, but RankMath and other SEO plugins offer many more additional options.

Entering any page or post edited with Elementor, we’ll see a new tab has been added to our panel, for SEO settings. This gives us a preview of how our page will look in search results, and we can use these tips to make crucial adjustments to our posts and enhance the overall user experience.

We can find these options in the WordPress editor when writing posts as well. If you don’t see this menu open, you can access it by clicking here.
We can also use RankMath to add a Breadcrumbs widget to our posts.

No, I’m not talking about the famous German fairytale, Hansel and Gretel, although it is the origin of this element’s name.

A “Breadcrumb” is an element that reveals the user’s current location in a site, and allows them to quickly navigate between different pages.

You have probably seen those on many websites, where you see the name of the website, followed by the name of the category, and finally the name of the post. It helps our visitors understand where they are on the website, and also increases your SEO score.

Before we can add breadcrumbs to our posts, we’ll first need to activate this feature in Rank Math. Under Rank Math, go to General Settings, and then Breadcrumbs. Toggling it ON, We’ll see all these options become available.

First, we’ll set the separator characters. Since Xander uses many Emojis in his site, we’ll use this pointing Emoji to fit his brand.

We can choose to either show, or hide the Homepage link.
We’ll leave this as it is, and give the homepage a label. Another option is to add a prefix to the breadcrumb, such as “You’re here”. Furthermore, this allows us to rename the titles for Archives, Search results, and 404 labels.

Below, we can choose to hide or show the post title and category.
When we’re done, Save Changes, copy the RankMath shortcode, and go to the Single post template.

Then, from the Widgets panel, search for, and drag the Shortcode widget into your template. Now simply paste the code we copied earlier, and click apply. Fonts and links are already set! Yay!

So we’ve seen how we can improve our site to make it more accessible both for our users, and for search engines. Now how about we give ourselves an upgrade?

While we’re here, let’s see how we can use more of the space in this article to promote some of Xander’s products, and perhaps increase his income by adding third-party ads to the site.
Let’s begin with promoting Xander’s products using the sidebar, which is an excellent place for this purpose.

Xander has an Ebook he’s selling, which is already promoted on his homepage, so rather than create this whole Call To Action element from scratch, we’ll simply copy it.

Use the Finder to access the homepage, locate the widget we need, and copy it. Back in the single post template, scroll down a bit, and paste the widget right under the newsletter box. Perfect!

Now, we can also use the extra space in the sidebar or at the bottom to show third-party ads on our site, providing Xander with a commission for each ad a user clicks. That usually looks something like this.

To add banners to our template, we’ll first need to sign up for a specific service. The most common platform for this is Adsense. Then we’ll use the HTML widget, with the corresponding HTML snippet pasted in.

The last step in setting up our website is to make our site searchable. We’ll go into Settings, and uncheck the checkbox for discouraging search engines from indexing our site.

Great, you now have everything you need to set up, build, and run a blog In our next and final lesson, we’ll recap what we’ve learned in this course, as well discuss next steps for creating the best website possible, so be sure to keep watching!

See you there!

Congratulations! You’ve now completed building your website and blog in Elementor. Great job! So let’s recap what we’ve learned, and take a tour of the site.

We started off with an overview on Blogging basics and WordPress structure and settings.

We then selected and imported an impressive blog kit from the Elementor Kit Library.

With that done, we went on to customize our Kit with content, fonts, and colors.

From there, we moved on to the Theme Builder to update our Site Parts.

After that, we learned how to create and style our posts in not one, but two different ways!

We also covered other Blog must-haves, such as the Archive and 404 Pages, a social media link page, how to manage your blog, and lots of other tips and best practices along the way.

Now you have the knowledge and experience needed to create and manage a professional blog from start to finish, without using a single line of code! Impressive!
So, what comes next? Well, that’s entirely up to you. With your blog site complete, you can now focus purely on managing your blog.

But if you’d also like to further advance your skills, you’ll find links in the description to some of our many learning resources, including the Landing Pages Builder tutorial and a full course on using WooCommerce to sell your products online. To expand your Elementor knowledge even further, and learn how to grow your business online, check out the Elementor Academy at elementor.com/academy!

We hope you enjoyed this course and feel confident in using Elementor to create and manage a blog.

Till next time. See you soon and thanks for watching!

Hey there, it’s Aviva from Elementor.

In this video, we’ll cover two different ways to create an invisible Progress Tracker that appears when our reader scrolls through a post, enhancing the user experience and making our posts more engaging.

And we’ll add it to our single post template in Elementor, so that it appears on every blog post.

This Tips and Tricks video is a bonus lesson in our How To Build a Blog in Elementor course. We encourage you to check it out if you haven’t already, but you can still follow along even if you haven’t yet watched the course.

The tutorial does require basic familiarity with the Progress Tracker widget and Single Post Template feature, so if you’re not yet familiar with these, we recommend you first watch our dedicated tutorials.

See the links to the course and tutorials in the description.

Okay, let’s get started!
Back on Xander Banks’ blog, we’ll work in the Single post template. Or, feel free to use your own Single Post template, if you prefer. Let’s start off by designing a minimalistic progress tracker for our post.

First, add a new section with a single column above the post section .. Set the section’s content width to Full and Columns Gap to No Gap.

Next, drag in the Progress tracker widget from the widgets menu. Ultimately, we’ll set the progress tracker to be relative to the Post Content, but to best preview our changes to the progress tracker widget, we’ll set that after styling it.

Head over to the Style tab. Now we’ll adjust the design a bit, to match this widget to Xander’s blog style. Set the progress color using a global color, and do the same for the background color of the tracker. Perfect!

This widget is a bit too large to fit Xander’s minimalistic style, though. Let’s adjust its height and set it to 10 pixels. Much better!

Now, this tracker is pretty sleek but we can give it even more personality by using Motion effects to make it stick to the top! In the Advanced tab, expand the motion effects options and make sure the widget sticks to the top.

Now that the progress tracker is all set, let’s go back to the Content tab, and set the progress relative to the post’s content. Then we’ll Update… and hide the Editor to see in action.

The progress tracker starts out invisible, but once we scroll down in the article, it sticks to the top and tracks our reading progress.

Not too shabby if I do say so myself. but let’s kick it up another notch.

For our second example we’ll add another section above the progress tracker, but instead of starting from scratch, we’ll click the folder icon to import a header template from the My templates tab. Feel free to use your own header, or check out how to create this one in Lesson 05 of our Blog course.

Great. Adjust the height a little bit… and add another column in the middle. Set the widgets space to zero and resize the columns width on the left, and right columns.

Now copy the progress tracker we already created, and paste it into the column we just added. Let’s make some adjustments to its style, like background color and height. Next, we’ll add the Post Title to appear within the progress tracker. To achieve this, first we’ll drag in the post title widget, then change its HTML tag, so it doesn’t appear as a heading. Then, in style, update the typography.

Next, go to Advanced and add some margin. Use a negative margin on the bottom, to move the widget down into the Progress Tracker. If your widget is hidden by other widgets, change its Z-index to stack it above.

Perfect!

Now let’s make some adjustments to the entire section, to make sure it appears only when we need it. Click the section and head over to Motion Effects under Advanced. Then set it to be sticky to the top of the page, but only on Desktop. We can set this by clicking the x icon next to Tablet and Mobile.

Add some cool entrance effects by activating Scrolling Effects!

We’ll use a simple transparency effect, and again, apply it only to desktop. Since this effect only applies on desktop, we’ll go to Responsive to hide the whole section on tablet and on mobile.

Now every time we scroll down, the section will fade and stay at the top of the page. Speaking of transparency, this section’s background is transparent which makes the logo and hamburger menu difficult to see, so let’s give it a solid background.

All we have left to do is set the second progress tracker to appear only on tablet and mobile. Click the progress tracker section. Under motion effects, make sure it’s sticky to top, both for tablet and mobile devices. And last but not least, under Responsive, hide it from Desktop.

And with that, our new progress tracker is complete.
Let’s see it in action!

Looks good on Desktop… looks good on Tablet.
And, of course, looks good on Mobile!
And there you have it!

Use a minimalistic progress tracker by adding a new section and making it sticky to the top of the page.

Or spice things up by using an existing header template, and combining it together with the progress tracker.

Now you can create more engaging post designs using the Progress Tracker!

We hope you’ve enjoyed this video. How will you use these tips on your blog? Let us know in the comments below!

For more Elementor Tips & Tricks, check out our channel or visit the Elementor Academy. See you next time and thanks for watching!