Elementor Mastery - Build Amazing Websites With Elementor - Master How To Use The Elementor Plugin To Build Amazing Pages and Implement Great Design On Your WordPress Website.

Contents Guide
~ Introduction
Section 1: Introduction to Web Hosting & Domains
Chapter 1: Elementor Cloud Hosting
Chapter 2: Introduction to Domains & Web Hosting
Chapter 3: Buying Hosting & Domain Names
Chapter 4: Try Siteground or Cloudways Hosting
Chapter 5: Installing WordPress Quickly
Chapter 6: Installing WordPress Locally with Local by Flywheel
Section 2: Project #1 - Build a Travel Blog with Elementor
Chapter 7: Project Intro - What We Shall Build & Website Preview
Chapter 8: Project Setup
Chapter 9: Installing Elementor & General Settings
Chapter 10: Elementor Overview
Chapter 11: How to Create Blog Posts with Elementor AI
Chapter 12: Containers, Margins & Paddings
Chapter 13: Setting up the Global Site Values
Chapter 14: Creating the Global Header
Chapter 15: Building our Global Footer
Chapter 16: Adding the Homepage Banner
Chapter 17: Alternative Homepage Banner with Video
Chapter 18: Building the Homepage - Part 1
Chapter 19: Building the Homepage - Part 2
Chapter 20: Adding the Image Carousel
Chapter 21: Adding the Blog Section
Chapter 22: Adding an Alternative Blog Section
Chapter 23: Adding Our Call to Action
Chapter 24: Adding the Testimonials Section
Chapter 25: Home Page Review
Chapter 26: Creating the Blog Page
Chapter 27: Building the Contact Page
Chapter 28: Working with Pre-Built Templates
Chapter 29: Introduction to Responsive Design
Chapter 30: Designing the Responsive Header
Chapter 31: Designing the Responsive Footer
Chapter 32: Making the Home Page Responsive
Chapter 33: Making Other Pages Responsive
Chapter 34: Elementor Free Version Review
Chapter 35: Connecting your Site to Elementor Pro
Chapter 36: Recreating the Header with Elementor Pro
Chapter 37: Recreating the Footer with Elementor Pro
Chapter 38: Recreating the Blog Page with Elementor Pro
Chapter 39: Building the Single Post Template
Chapter 40: Building the Contact Page with Elementor Pro
Chapter 41: How to Create Popups
Chapter 42: Working with Template Kits and Landing Pages
Chapter 43: Elementor Pro Tips
Section 3: Project #2 - Build a Business Website with Elementor
Chapter 44: Project Intro - What We Shall Build & Website Preview
Chapter
Chapter 45: Project Setup
Chapter 46: Elementor General Settings
Chapter 47: Setting up the Website
Chapter 48: Setting up the Global Fonts & Colors
Chapter 49: Building the Global Header Template
Chapter 50: Building the Global Footer Template
Chapter 51: Building the Contact Us Page
Chapter 52: Building the Blog Page
Chapter 53: Building the Single Posts Template
Chapter 54: Adding the Homepage Banner
Chapter 55: Adding the About Us Section
Chapter 56: Adding the Services Section
Chapter 57: Adding the Blog Section
Chapter 58: Adding the Clients Section
Chapter 59: Adding the Testimonials Section
Chapter 60: Adding the Contact Us Section
Chapter 61: Services Page, Templates & Global Widgets
Chapter 62: Mobile Responsiveness
Chapter 63: Elementor Cloud Backend
Chapter 64: Elementor Animations
Chapter 65: Final Touches & Wrap Up
~ Conclusion
Introduction
Assets, Resources, and Materials:
- WordPress: ( https://wordpress.org/ ) - The world's most popular
CMS platform that allows you to build and maintain websites.
- Elementor Plugin: ( https://elementor.com/ ) - A WordPress page
builder plugin which will be the main focus of this book. It will help you
design intricate web pages without the need to write any code.
Welcome to Elementor Mastery

The digital world is evolving at a rapid pace. With more than a third of
the world’s population online, having a website is no longer a luxury—
it’s a necessity. But not everyone has the technical expertise to build a
site, and hiring professionals can be costly. This is where WordPress
and its myriad of plugins come to the rescue, particularly one called
Elementor.
Why Elementor?
With over a million downloads, Elementor stands tall as one of the
premier plugins for WordPress users. It revolutionizes the web
designing process by making it incredibly intuitive and, most
importantly, code-free. This book, "Elementor Mastery: Build Amazing
Websites With Elementor", is your companion guide into this
fascinating world, aiming to turn even a novice into a competent web
designer by its conclusion.
Why WordPress?
Before diving into Elementor, it's worth noting why WordPress is the
chosen platform. WordPress powers more than 30% of the web. It’s
flexible, highly customizable, and considered by many to be a content
management system (CMS) powerhouse. Its open-source nature
means it’s continually updated, ensuring it remains secure and on the
cutting edge.
Our Journey Ahead

Throughout this book, our journey will be divided into three primary
sections. We begin with understanding the backbone of any website—
the domain and web hosting. Then, we dive into building two distinct
websites: a travel blog using the free version of Elementor, and a
business website, bringing in the advanced features of Elementor Pro.
You will not only learn about the individual widgets and tools available
in Elementor but will also get a holistic view of website design. By the
end of our journey, you'll be able to create web pages that are not only
aesthetically pleasing but also responsive and user-friendly.
No Prior Experience Needed

If you're feeling a tad overwhelmed, fret not! This book is designed for
individuals of all skill levels. Whether you're a complete beginner with
no idea about web design or someone with basic knowledge looking
to refine their skills, there's something here for everyone. We'll take it
step by step, ensuring concepts are explained and understood before
moving on.
Join the Elementor Community

Remember, by choosing to learn Elementor, you're not just getting a
tool; you're becoming part of a thriving community. Elementor has a
vast online community, comprising of professional web designers,
beginners, and everyone in between. This means that help is always
available, be it in the form of forums, tutorials, or direct assistance.
Conclusion
As we embark on this enlightening journey, always remember that
web design is as much an art as it is a skill. There's room for creativity,
innovation, and personal touch. With the power of Elementor at your
fingertips, the only limitation will be your imagination.
So, let’s dive in and start our mastery over Elementor!
Section 1:
Introduction to Web Hosting &
Domains
Elementor Cloud Hosting
Assets, Resources, and Materials Used in this Chapter:
- Elementor Cloud Hosting (Acquire from Elementor’s official website.
This is a hosting solution provided by Elementor for a seamless
experience).
- Elementor Plugin (Free or Pro version can be obtained from the
WordPress repository or Elementor’s official website).
- WordPress Installation (To illustrate the integration process between
Elementor Cloud and a standard WordPress installation).
1.1 Introduction to Elementor Cloud Hosting

Before diving into the world of designing with Elementor, it's essential
to understand where your website will "live" on the internet. This
residence is provided by web hosts. And who better to provide hosting
for an Elementor-based website than Elementor itself? Enter
Elementor Cloud Hosting.
Elementor Cloud Hosting is a fully managed WordPress hosting
solution, designed to give users an all-in-one package. Think of it as
Elementor providing you not just with the tools to design your website,
but also the space to host it.
1.2 Why Choose Elementor Cloud Hosting?

While there are countless hosting providers out there, here are some
reasons to consider Elementor Cloud:
- Optimized for Elementor: Naturally, Elementor's hosting is optimized
for the best performance with the Elementor plugin.
- All-in-One Solution: No need to juggle between different providers.
Get your domain, hosting, and Elementor all in one place.
- Ease of Use: Designed for beginners with a straightforward
dashboard and automatic updates.
- Security: Elementor ensures top-notch security for your website with
regular backups.
1.3 Setting Up Elementor Cloud Hosting

1. Sign Up & Purchase: Start by signing up on Elementor's official
website. Navigate to their hosting section, choose a plan that suits
your needs, and make a purchase.
2. Connect or Get a Domain: If you already own a domain, you can
connect it to Elementor Cloud. Otherwise, you can purchase one
directly through Elementor.
3. Install WordPress: The beauty of Elementor Cloud is that
WordPress comes pre-installed. No more manual installations or
technical setups!
4. Install Elementor: Navigate to your WordPress dashboard, go to
Plugins, search for Elementor, and install it. If you have Elementor
Pro, you can upload and activate the pro version.
1.4 Integrating Elementor Cloud with WordPress

With WordPress and Elementor installed, you're all set to begin
designing. However, remember:
- Always ensure that both WordPress and Elementor are updated to
their latest versions for optimal performance.
- Elementor Cloud Hosting will automatically take backups, but it's a
good habit to manually backup your website regularly.
1.5 Transitioning from another host

If you're moving from another host to Elementor Cloud, the transition
is relatively straightforward. Elementor provides tools and resources to
migrate your existing site seamlessly.
1.6 Conclusion
Choosing the right hosting for your website is crucial. With Elementor
Cloud Hosting, you not only get a host that's optimized for your
Elementor website but also a seamless design-to-deployment
experience. In the next chapter, we'll delve deeper into domains and
their significance in your web development journey.
Introduction to Domains & Web

Hosting
Required Assets & Materials for This Chapter:
1. Domain Registration Platform (Examples: GoDaddy, Namecheap) –
Platforms where you can register and purchase domain names.
2. Web Hosting Provider (Examples: Bluehost, SiteGround,
HostGator) – Companies that provide the technologies and services
needed for the website to be viewed on the Internet.
3. Domain & Hosting Glossary (Available on most hosting and domain
websites) – A reference guide to understand technical terms.
2.1 What is a Domain?

A domain, in the simplest terms, is the address or the URL where
Internet users can access your website. Think of it as your home
address, but in the virtual world. Just like every home address is
unique, every domain is unique. For instance, “www.example.com” is
a domain name.
2.1.1 Components of a Domain Name
A domain name has two main parts: the subdomain and the top-level
domain (TLD). Using “www.example.com” as our reference:
- Subdomain: The "www" portion, though this can often be changed or
even omitted.
- Top-level domain (TLD): The ".com" part. There are many TLDs
available, such as .org, .net, .edu, and even extensions like .app,
.blog, or .guru.
2.2 What is Web Hosting?

Web hosting is the service that allows you to post a website or web
page onto the Internet. If the domain is the address of your house,
then web hosting is the actual house itself, where you store your
website's files, databases, and media.
2.2.1 Types of Web Hosting
- Shared Hosting: Multiple websites are hosted on a single server. It's
cost-effective but may suffer performance issues if one site gets a lot
of traffic.
- Dedicated Hosting: You have the entire server to yourself, ideal for
large businesses and high-traffic websites.
- VPS (Virtual Private Server) Hosting: A middle-ground between
shared and dedicated hosting. Here, one server is divided into virtual
servers, and each website is hosted on its own virtual server.
- Cloud Hosting: Instead of a single server, your website is hosted on
a network of servers. This offers high flexibility and scalability.
2.3 The Relationship Between Domain & Hosting

While domains and hosting are often sold by the same service
providers, they are two different services. Buying a domain does not
automatically mean you have hosting, and vice-versa. Think of it this
way: if you purchase a plot of land (domain), you still need to build a
house (web hosting) on it to live in or store your belongings.
2.4 Why Do You Need Both?
Without a domain, users would have to enter long strings of numbers
(IP addresses) to visit your website. A domain gives your website a
friendly, easy-to-recall address.
Without web hosting, there are no files to serve up when someone
types in your domain name. It's the physical space where your website
lives.
2.5 How to Choose a Domain and Hosting

When choosing a domain:
- Make it memorable: Short, catchy, and easy to type.
- Relevant: Your domain should reflect your brand or the content you'll
be offering.
- Avoid special characters: Hyphens and numbers can be
misinterpreted when spoken aloud.
For hosting:
- Understand your needs: If you expect high traffic or need a lot of
storage, shared hosting might not be ideal.
- Research the provider: Look at reviews, uptime guarantees, and
customer support.
- Consider growth: As your site grows, you want a host that can grow
with you.
2.6 Conclusion
The world of domains and hosting can be confusing for beginners, but
they're the foundational elements of any website. Think of your
domain as your online address and your hosting as the home where
your website's files live. Both are essential for anyone looking to
establish a presence online. As you delve deeper into website building
with Elementor, understanding these basics will prove invaluable.
In the next chapter, we will explore the process of buying hosting and
domain names, ensuring that you make informed decisions for your
web projects.
Buying Hosting & Domain Names

Assets, Resources, and Materials for this Chapter:
1. Domain Registrar (e.g., GoDaddy, Namecheap): Websites that
allow users to purchase and manage domain names.
2. Web Hosting Providers (e.g., Bluehost, SiteGround, HostGator):
Companies that provide the infrastructure to host websites.
3. Domain Name System (DNS): A system that connects domain
names to IP addresses. Most registrars offer DNS services.
4. Website Uptime Checker (e.g., UptimeRobot): Tools to monitor the
uptime of your website.
Introduction
The cornerstone of every website lies in two foundational elements: a
domain name and web hosting. In simpler terms, if the website were a
house, the domain name would be its address, and web hosting would
be the land on which the house is built. In this chapter, we'll delve
deep into understanding the significance of both and guide you on
how to make informed decisions while purchasing them.
1. What is a Domain Name?

A domain name is the web address or URL that users type into their
browser to visit your website. Think of it as a shortcut to your website's
location on the vast internet. Every domain name is unique and
translates to a specific IP address using the Domain Name System
(DNS).
Example: If your website is about travel, a domain like
"mytraveladventures.com" can be both relevant and catchy.
2. Why is the Right Domain Important?
Choosing the right domain is crucial as it:
- Brands your website: It's the first thing visitors see.
- Impacts SEO: Keywords in domains can boost search rankings.
- Defines your identity: Helps in establishing authority in a niche.
3. Purchasing a Domain Name

When buying a domain:
1. Check Availability: Use domain registrars like GoDaddy or
Namecheap to check if your desired domain name is available.
2. Choose a Relevant TLD: TLDs are suffixes like .com, .org, .net.
Choose one that fits your site's purpose. While .com is the most
popular, there are numerous TLDs available tailored for specific
industries or locations.
3. Avoid Numbers and Hyphens: They can be confusing when spoken
out loud.
4. Keep it Short & Memorable: Easy to type and recall.
4. What is Web Hosting?

Web hosting is a service that allows your website to be accessible on
the internet. Hosting companies provide the necessary technologies
and services required for the website to be viewed online. These
companies house your website on special computers called servers.
5. Types of Web Hosting

1. Shared Hosting: Multiple websites share the same server. Ideal for
beginners.
2. VPS Hosting: A middle-ground where you share a server but have
dedicated portions of its resources.
3. Dedicated Hosting: An entire server dedicated to your website.
Suitable for large websites with heavy traffic.
4. Cloud Hosting: Resources are spread across multiple servers,
offering high scalability.
6. Things to Consider When Choosing a Hosting Provider

1. Uptime: Choose providers with a high uptime guarantee (>99.9%).
2. Customer Support: 24/7 support can be invaluable.
3. Pricing: Compare plans across providers. Some offer discounts for
longer commitments.
4. Features: Look for essential features like SSL, backups, and email
accounts.
5. Scalability: Ensure they can handle your site's growth.
7. Purchasing Web Hosting

1. Research Providers: Companies like Bluehost, SiteGround, and
HostGator are renowned for their services.
2. Select a Plan: Based on your website's needs.
3. Register or Transfer Domain: Many hosting providers offer domain
registration as part of the package or a free transfer if you've bought it
elsewhere.
4. Set Up: Once purchased, use the hosting provider's dashboard to
manage and set up your website.
Conclusion
Your domain name and hosting are integral to the success of your
website. By investing time in understanding and choosing the right
providers and services, you set the foundation for your website's long-
term success. Remember, as your website grows, you can always
upgrade your hosting plan or even switch providers to cater to
increased traffic and demands.
Stay tuned for the next chapter where we dive into exploring specific
hosting providers like Siteground and Cloudways to help you make an
informed choice.
Try Siteground or Cloudways

Hosting
Assets, Resources, and Materials for this chapter:
1. SiteGround Website - [ www.siteground.com]
(http://www.siteground.com) (Platform for web hosting services)
Use: To explore and purchase hosting packages.
2. Cloudways Website - [ www.cloudways.com]
(http://www.cloudways.com) (Platform offering cloud-based hosting)
Use: To explore and purchase cloud hosting solutions.
Introduction
When venturing into the world of website development and
WordPress, the choice of hosting is paramount. Your hosting provider
serves as the foundation for your website, impacting its speed,
security, and overall performance. Among the plethora of hosting
options available, SiteGround and Cloudways have emerged as two of
the most reliable and efficient. In this chapter, we'll delve into the
unique features of each, helping you decide which might be the best fit
for your WordPress project.
SiteGround: Overview and Features

What is SiteGround?
Founded in 2004, SiteGround has become one of the most well-
known hosting companies, specifically recommended by
WordPress.org for its superb integration with WordPress sites.
Key Features of SiteGround:
1. Performance and Speed: SiteGround utilizes SSDs (Solid State
Drives) and their own caching system, SuperCacher, ensuring quick
website loading times.
2. Security: Offers daily backups, a web application firewall, and free
Let's Encrypt SSL certificates to ensure your website remains secure.
3. WordPress Integration: One-click WordPress installation, auto-
updates, and a staging environment allow you to test changes before
making them live.
4. Customer Support: Renowned for its outstanding customer support,
available 24/7.
5. Free Website Migration: For users shifting from another hosting
provider.
Cloudways: Overview and Features

What is Cloudways?
Cloudways is a managed cloud hosting platform that offers flexibility
and ease-of-use. Instead of providing hosting through one server type,
it lets you choose from five different cloud providers, including
DigitalOcean, Linode, and AWS.
Key Features of Cloudways:
1. Performance: Uses advanced caching mechanisms like Redis,
Varnish, and Memcached.
2. Security: Provides regular security patching, free SSL certificates,
and a dedicated firewall.
3. Flexibility: Choose from various leading cloud providers, and scale
your server resources without requiring server migration.
4. Pay-as-You-Go System: You only pay for the resources you use,
making it cost-effective.
5. 24/7 Customer Support and Monitoring: Active server monitoring
and efficient customer service.
SiteGround vs. Cloudways: Making Your Choice

1. Ease of Use: SiteGround offers a traditional cPanel, whereas
Cloudways provides its custom control panel. If you're familiar with
cPanel, SiteGround might be more intuitive. Cloudways, however,
offers a more streamlined approach once familiar.
2. Pricing: Cloudways uses a pay-as-you-go system, potentially more
cost-effective for projects with fluctuating traffic. SiteGround offers
fixed prices, which might be more suitable for predictable, steady
websites.
3. Scalability: Cloudways is more scalable, ideal for rapidly growing
sites. SiteGround offers limited resources in its shared hosting plans.
4. Performance and Speed: Both provide impeccable speed, but
Cloudways, with its multiple cloud infrastructures, might edge out for
more demanding sites.
5. Security: Both platforms are secure, offering free SSL and daily
backups. Cloudways has an advantage with its dedicated firewalls and
security patching.
Conclusion
Choosing between SiteGround and Cloudways boils down to your
project's specific needs. For beginners looking for ease of use and
fixed pricing, SiteGround may be ideal. For more advanced users
seeking flexibility, scalability, and cloud-based solutions, Cloudways
might be the way to go.
In the next chapter, we'll discuss the process of installing WordPress,
the foundation upon which you'll build your website using Elementor.
Installing WordPress Quickly

- Web Hosting Account (From providers like SiteGround or
Cloudways. This will serve as the foundation where our website files
and database will be stored.)
- WordPress Installation Package (Available for free download at
[WordPress.org]( https://wordpress.org/ ). This package contains all
the necessary files to run a WordPress site.)
- Internet Connection (To access the web host and WordPress
dashboard once installed.)
- Web Browser (Such as Google Chrome, Firefox, Safari, etc., to
access hosting dashboard and WordPress admin panel.)
Introduction:
Installing WordPress can seem daunting to the uninitiated, but with the
right tools and knowledge, the process becomes swift and
straightforward. This chapter will guide you through the simplest ways
to get WordPress up and running, ensuring you have a functional
website in no time.
1. Installing WordPress via cPanel (One-Click Installers):

Most hosting providers, like SiteGround, offer cPanel (or similar
control panels) with one-click application installers such as
Softaculous. Here’s how to use it:
1. Log into your hosting account and navigate to the cPanel or its
equivalent.
2. Scroll down to the 'Software' or 'Applications' section and find the
WordPress icon.
3. Click on the 'Install' button.
4. Fill in the required fields such as site name, admin username, and
password.
5. Hit the 'Install' button at the bottom, and within a few minutes, your
WordPress site will be live.
2. Manual WordPress Installation:

For those who prefer a hands-on approach or use hosting without
one-click installers, here's the manual method:
1. Download the Latest WordPress Package: Visit [WordPress.org]
(https://wordpress.org/) and download the latest version of
WordPress.
2. Upload WordPress Files: Log into your hosting account. Use an
FTP client (like FileZilla) to upload the extracted WordPress files to
your public_html directory or a sub-directory if you wish to have a
specific URL.
3. Create a MySQL Database: Go back to your hosting cPanel and
find the MySQL Databases option. Create a new database.
Remember the database name, username, and password, as you'll
need them shortly.
4. Run the WordPress Installation: Visit your website where you
uploaded the WordPress files. You'll be greeted by the WordPress
installation screen. Select your language and click 'Continue'.
5. Fill in the database details (database name, username, password)
from the previous step.
6. Follow the on-screen instructions. Once you've filled in all required
fields, WordPress will install, and you can begin building your site.
3. Managed WordPress Hosting:

Providers like Cloudways offer managed WordPress hosting, where
many technical tasks, including WordPress installation, are handled
for you.
1. Sign up for a managed WordPress hosting package.
2. During or after the setup process, you’ll typically be prompted to
install WordPress. Follow the on-screen prompts.
3. Log into your new WordPress site using the provided admin URL,
username, and password.
Best Practices After Installation:

- Secure Your Website: Update usernames and passwords to be
unique and challenging. Implement security plugins like Wordfence or
Sucuri Security.
- Take Regular Backups: Before making significant changes to your
site, always take a backup. You can use plugins like UpdraftPlus or
VaultPress.
- Choose a Reliable Theme: While there are thousands of free themes
available, always ensure you pick a well-coded and regularly updated
theme, be it free or premium.
Conclusion:
With these methods, installing WordPress becomes a task that takes
mere minutes, allowing you to focus more on content and design.
Remember, the key to a successful website doesn't just lie in its
design but also in its foundation, and WordPress provides one of the
most robust foundations out there.
Installing WordPress Locally with

Local by Flywheel
- Local by Flywheel software (Available at: [Local by Flywheel's official
website]( https://localwp.com/ )): This is the primary software that we'll
use to install WordPress locally on your computer. It provides a
simplified environment for setting up, developing, and managing
WordPress sites.
- A computer: Preferably with the latest OS updates, whether it's
Windows, MacOS, or Linux.
- Internet connection: To download the software and any additional
plugins or themes for your WordPress site.
Introduction:
Before diving deep into the world of Elementor and building amazing
websites, it's essential to understand the benefits of working on a local
environment. Installing WordPress locally allows you to test and
develop your website without the need for web hosting or even an
internet connection, once set up. By using Local by Flywheel, you can
effortlessly set up a local WordPress environment, making the process
as seamless as possible.
Step-by-Step Guide to Installing WordPress Locally with Local by
Flywheel:
1. Download and Install Local by Flywheel:
- Go to the official [Local by Flywheel website](https://localwp.com/)
and download the software suitable for your OS (Windows, MacOS, or
Linux).
- Once downloaded, launch the installer and follow the on-screen
instructions.
2. Launch Local by Flywheel:
- After installation, open the application. You'll be greeted with a
user-friendly interface that's ready to set up your local WordPress site.
3. Create a New WordPress Site:
- Click on the "+ Add Local Site" button.
- Name your local site. This name will be used as the site's local
URL (like `yoursitename.local`).
- Choose your preferred environment. For beginners, the preferred
setup might be the latest versions of PHP, Web Server (usually
Apache), and MySQL. However, Local by Flywheel allows you to
configure these settings based on your requirements.
4. Set Up WordPress:
- You'll be prompted to set up your WordPress admin username,
password, and email address. Remember these details as you'll need
them to log into your local WordPress dashboard.
- Once filled, click "Add Site," and Local by Flywheel will start the
setup process. It'll install WordPress, the database, and all necessary
files.
5. Accessing your Local Site:
- After the setup completes, you'll see your site listed on the main
Local by Flywheel dashboard.
- Click on the site's name. You'll be presented with details about the
site. From here, you can:
- Click the "Admin" button to access the WordPress dashboard.
- Click the "View Site" button to view the site as it currently
appears.
6. Manage Site Settings:
With Local by Flywheel, you can:
- Stop/Start your site: This turns off or on the local server hosting
your website.
- Open Site SSH: This gives advanced users SSH access to the
site's server.
- Database: Access the site's database using Adminer, an
integrated database management tool.
Advantages of Using Local by Flywheel:

- Easy Setup: No need for complicated server configurations.
- Safe Testing Environment: Test plugins, themes, or any other
changes without risking a live website.
- Faster Development: Since the site is hosted on your computer,
loading times are much quicker.
- Convenient: Work on your website even without an internet
connection.
Conclusion:
Setting up WordPress locally provides a safe, efficient, and effective
environment for website development. Local by Flywheel streamlines
this process, ensuring that even beginners can get a local website up
and running in minutes. As you advance in your Elementor Mastery
journey, this local setup will prove invaluable for testing, designing,
and refining your web creations.
Note: Readers are always advised to refer to Local by Flywheel's
official documentation and community forums for detailed guides and
troubleshooting.
Section 2:
Project #1 - Build a Travel Blog with
Elementor
Project Intro - What We Shall Build
& Website Preview
Assets and Resources Required:
- Mockup Tool (e.g., Adobe XD or Figma): These are design tools that
help create a visual representation of what the final website will look
like. They can be downloaded from their respective official websites.
(Purpose: To create and preview the design before actual
development.)
- Elementor Free Version: You can download this plugin from the
WordPress repository or directly from the Elementor website.
(Purpose: Page builder to design our travel blog.)
- Travel Stock Images: Websites like Unsplash or Pexels provide high-
quality images for free. Ensure you respect copyright and licensing
agreements. (Purpose: To add visually appealing graphics to our
website.)
- Web Hosting with WordPress Installed: If you've followed the
previous chapters, you should have this set up by now.
Introduction:
Building a travel blog is not just about writing and sharing your travel
stories; it's also about presenting them in a way that's visually
appealing and user-friendly. In this project, we will be using the
Elementor page builder to craft a beautiful and responsive travel blog.
Before diving into the build itself, let's first get a clear idea of what our
final product will look like and the key features it will include.
Website Overview:
Our travel blog will be a multi-page website, consisting of the following
key sections:
1. Homepage: A visually striking landing page that gives visitors an
immediate sense of wanderlust. It will feature a banner showcasing a
travel destination, a section for the latest blog posts, an image
carousel showcasing various travel destinations, and a call-to-action
prompting users to subscribe or explore more.
2. Blog Section: This will list all our blog posts in a grid layout with an
image, title, and a short excerpt for each post. It will also have filters
for users to categorize the blogs based on destinations or themes.
3. Single Blog Post: Detailed layout for individual blog posts. Each
post will have a prominent feature image, the main content, an author
box, and a comments section.
4. Contact Page: A dedicated section for visitors to reach out. It will
include a contact form, Google map integration showcasing our
location, and other contact details.
5. About Us: A section to introduce ourselves, share our journey, and
perhaps include testimonials or reviews from other travelers or
readers.
Website Preview using Mockups:

Before we start building the website, it's a good practice to create a
mockup or a blueprint of what our website will look like. This helps in
visualizing the final look and feel, ensuring that we have all the
required elements and making the building process smoother.
Using our chosen mockup tool, we'll create the design layout for each
of our pages. Here's a brief idea:
1. Homepage Mockup:
- Banner: Large image of a scenic travel destination with a
captivating tagline.
- Latest Blogs: A grid of three or four recent blog posts with images
and titles.
- Image Carousel: Horizontal sliding images showcasing different
travel destinations or highlights from different blog posts.
- Footer: This will include links to other pages, social media icons,
and perhaps a short about us section.
2. Blog Section Mockup:
- Filter Bar: Dropdown or clickable tags to filter blogs.
- Blog Grid: Images on the left, with the title and short excerpt on the
right. Pagination at the bottom.
... And so on for other pages.
Final Thoughts:
This chapter gave you an overview of our project's final look and the
resources we will need. With our blueprint in place, the subsequent
chapters will guide you through the building process step-by-step. By
the end of this project, you will have a professional-looking travel blog
that not only showcases your adventures but also provides an
engaging user experience for your visitors.
In the next chapter, we will dive into the initial setup and begin our
journey in building our dream travel blog with Elementor. Stay tuned!
Project Setup
1. WordPress Installation (Acquired via your hosting provider's
dashboard or manually installed via WordPress.org).
2. Elementor Free Plugin (Available for download from the WordPress
plugins repository. Directly installable from your WordPress
dashboard).
3. Theme (In this guide, we'll be using the Hello Elementor theme,
available for free in the WordPress theme repository).
4. Content Assets:
- Images: For our travel blog, we'll need high-quality travel photos
(Sourced from royalty-free image websites like Unsplash, Pexels, or
Pixabay).
- Text Content: Articles, headlines, taglines, etc. (If you don't have
content at the moment, you can use A.I tools like ChatGpt to generate
catchy Articles and taglines for your website).
5. Basic Knowledge of the WordPress Dashboard (If you're new, don’t
worry! We’ll guide you through it).
Introduction
Setting up our travel blog project involves a series of sequential steps.
The goal of this chapter is to ensure you have the foundational
elements ready for the creation process. This includes installing the
necessary tools, selecting a theme, and gathering essential content
assets.
Step 1: Setting Up Your WordPress Environment
Before diving into Elementor, make sure you have WordPress
installed on your hosting. If you've followed the previous chapters, you
should already have WordPress set up either locally or on your web
hosting.
Step 2: Installing the Elementor Plugin
1. Navigate to your WordPress dashboard.
2. On the left-hand side, hover over Plugins and select Add New.
3. In the search bar, type “Elementor” and locate the Elementor Page
Builder.
4. Click Install Now and then Activate.
Step 3: Selecting a Theme
Although Elementor works with most WordPress themes, we
recommend using the Hello Elementor theme for its clean, lightweight
design—perfect for showcasing your Elementor skills.
1. Navigate to Appearance > Themes > Add New.
2. In the search bar, type “Hello Elementor”.
3. Install and activate the theme.
Step 4: Gathering Your Content
It's crucial to have all your content ready before the design process.
For our travel blog:
1. Images: Collect and organize high-quality travel images. Ensure
you have the rights to use these images.
2. Text Content: Prepare your blog posts, headlines, about page text,
and other textual elements. Even if you don't have final content, use
placeholder text for design purposes.
Step 5: Preliminary Settings
Before we start building our pages, let’s configure some basic
settings:
1. Permalink Settings: Set up SEO-friendly URLs. Navigate to Settings
> Permalinks and select Post name.
2. Reading Settings: Set your homepage to display a static page. This
will be crucial when we build our homepage later. Go to Settings >
Reading and set the homepage to a default page for now.
Step 6: Creating Essential Pages
You'll want some essential pages ready:
1. Homepage: Navigate to Pages > Add New. Title it "Home".
2. Blog Page: Similarly, add a new page and title it "Blog".
3. Contact Page: Add another page titled "Contact Us".
4. About Us: This page can provide background on the blog, the
author, or the traveling journey you're documenting.
These pages will be the backbone of our travel blog, and we will
design them in the upcoming chapters.
Conclusion
With these steps completed, you're now set up and ready to dive into
the world of Elementor. As we proceed through the chapters, we'll
start with designing our travel blog, implementing widgets, and
maximizing the potential of the Elementor plugin. Remember, the
foundation you've set up in this chapter is crucial, and everything we
build henceforth will rely on this groundwork. So take a moment to
review, ensure everything's in place, and gear up for the exciting
design journey ahead!
Installing Elementor & General

Settings
- WordPress Admin Access (Access to the backend/dashboard of your
WordPress site)
- Internet connection (to download Elementor)
- Elementor Plugin (Free version can be obtained from the WordPress
plugin repository)
Introduction:
Elementor, with over a million downloads, has transformed the way
web creators design WordPress websites. With its intuitive drag-and-
drop interface and numerous widgets, it becomes a breeze to create
responsive pages without writing a line of code. In this chapter, we'll
walk you through the steps to install the free version of Elementor and
dive deep into its general settings.
1. Installing Elementor:
Step 1: Access your WordPress Dashboard
- Log into your WordPress website. Once logged in, you will be in your
'Dashboard'.
Step 2: Navigate to the Plugins Section
- On the left-hand sidebar, hover over or click on 'Plugins' and then
click 'Add New'.
Step 3: Search for Elementor
- In the 'Search Plugins' box on the top right, type in 'Elementor'. The
plugin will appear as 'Elementor Website Builder' by 'Elementor.com'.
Step 4: Install and Activate
- Click on the 'Install Now' button. After the installation is complete, the
button will change to say 'Activate'. Click on it to activate the plugin.
2. Accessing Elementor’s General Settings:

Once Elementor is activated, you'll notice a new menu item labeled
'Elementor' on your WordPress dashboard.
Step 1: Navigate to Elementor Settings
- Click on 'Elementor' on the left sidebar, then select 'Settings'.
Step 2: Explore the Tabs
You'll see various tabs including:
- General: Here you can choose post types where Elementor can be
used.
- Style: Set default generic fonts and content width. This is essential
for maintaining consistent design aesthetics.
- Integrations: Allows you to integrate third-party platforms (like
MailChimp or reCAPTCHA). This is useful for those who plan to use
Elementor for lead generation or other purposes that require
integration.
- Advanced: Offers advanced settings such as switching the editor
loader method, enabling CSS print method, and more. For beginners,
it's advisable to keep the default settings unless there's a specific
need.
3. Key General Settings to Consider:

- Post Types: By default, Elementor will be enabled for Pages and
Posts. If you have custom post types (like 'Products' for e-commerce
sites), you can enable Elementor for them here.
- Disable Default Colors: Turn this on if you want to disable
Elementor's default color schemes, giving you the freedom to use your
theme's or custom colors.
- Disable Default Fonts: Just like with colors, if you want to use the
theme's or custom fonts, enable this option.
- Editor Loader: If you face issues with the Elementor editor not
loading, switching the method might help. Only change if necessary.
Conclusion:
By now, you should have successfully installed Elementor on your
WordPress website and familiarized yourself with its general settings.
These foundations are crucial as we dive deeper into designing your
travel blog. Remember, while Elementor offers an abundance of
settings and customizations, start with the basics. As you grow more
comfortable, you can delve deeper into its advanced settings to truly
harness its power.
In the upcoming chapters, we will delve deeper into the myriad of
functionalities offered by Elementor. From understanding its interface
to building complete sections, our travel blog's journey has just begun!
Note: Elementor frequently updates its features and user interface.

Always refer to Elementor's official documentation or community
forums if you encounter any discrepancies.
Elementor Overview
- Elementor Free Plugin: You can acquire this plugin from the
WordPress plugin repository. (Purpose: This is the core plugin that will
allow you to build and customize pages using a drag-and-drop
interface.)
- Official Elementor Documentation: Available on the Elementor
website. (Purpose: A comprehensive guide and reference material to
all the Elementor features.)
- Elementor Community and Support Forums: Found on the Elementor
website and other WordPress-focused forums. (Purpose: To ask
questions, share knowledge, and get troubleshooting help.)
Introduction
Elementor is a game-changer in the world of web design. Gone are
the days when you needed to know coding to design beautiful and
functional websites. With Elementor, all you need is creativity, and you
can craft and customize pages just the way you envision them. In this
chapter, we'll be diving deep into what Elementor is, why it's so
powerful, and a high-level overview of its primary features.
What is Elementor?
Elementor is a live page builder plugin for WordPress, which means
you get to see your changes in real-time. With its drag and drop
interface, you can create advanced layouts without any coding
knowledge. It offers pixel-perfect design, mobile responsive editing,
and instant page loads, making the web designing process a breeze.
Why Choose Elementor?

1. Visual Design: No more back-end edits and hoping your changes
look the way you want. With Elementor, what you see is what you get.
2. Widgets Galore: Whether it's a simple text box, images, or
advanced sliders, Elementor provides a wide range of widgets to suit
all design needs.
3. Mobile Responsive: Easily adjust settings for mobile, tablet, and
desktop views to ensure your site looks great on all devices.
4. Compatibility: Elementor is compatible with most WordPress
themes and plugins, ensuring maximum flexibility.
Primary Features of Elementor

1. Sections, Columns, and Widgets: The basic building blocks.
Sections house columns, and columns house widgets. Understanding
this hierarchy is essential for mastering Elementor.
2. Theme Builder: While not available in the free version, the theme
builder allows you to design your entire website, including headers,
footers, and archive pages.
3. Global Widgets: Create a widget, save it, and use it across multiple
pages. Any changes made to the global widget are reflected
everywhere it's used.
4. Revision History: Made an error? No worries. Jump back to a
previous revision instantly.
5. Hotkeys: Speed up your design process with quick shortcuts for
most-used actions.
6. Right-Click Menu: Right-click on any element to bring up a host of
options, from duplicating and copying to resetting style.
Understanding the Elementor Interface

When you launch Elementor, you'll be greeted by its user-friendly
interface. Here’s a brief overview of the primary areas:
- Editing Area: The central area where you'll see your live page or post
as you build or edit it.
- Elementor Panel: Located to the left, this panel houses all the
widgets you can use. Simply drag a widget from this panel to your
page to add it.
- Settings Menu: Found at the bottom of the Elementor panel, this
menu lets you access global settings, view page history, and more.
In Conclusion
Elementor's power lies not just in its advanced features but also in its
simplicity. As we journey through creating our travel blog, you'll
discover the true potential of Elementor, allowing you to bring your
website visions to life effortlessly.
Containers, Margins & Paddings
- Elementor Page Builder Plugin: (Available in the WordPress
repository, simply go to the 'Plugins' section in your WordPress
dashboard, click on 'Add New' and search for 'Elementor'. Install and
activate.)
- Use/Purpose: To build and design web pages on your WordPress
site.
- Images for Demonstrations: (Unsplash.com - A free stock photo
platform. You can search for images related to 'containers' or 'web
design' to visually understand certain concepts.)
- Use/Purpose: To understand the concept and application of
containers, margins, and paddings.
Introduction
In web design, understanding the structure of a page and how space
is managed is crucial. The effective use of containers, margins, and
paddings can significantly influence the look, feel, and functionality of
a website. As you embark on building a travel blog with Elementor,
you'll find these concepts invaluable.
1. What is a Container?
A container, as the name implies, is a box or 'container' that holds
content or other design elements. It can encapsulate single or multiple
design elements, such as text, images, videos, buttons, etc.
- Purpose of Containers:
- Organizing content.
- Creating a clean layout.
- Ensuring responsiveness across devices.
In Elementor:
You’ll often start by adding a section, which can be thought of as a
primary container. Inside this section, you can further divide your
content using columns, each acting as a sub-container.
2. Understanding Margins
Margins refer to the spaces outside of an element or container. They
push an element or container away from neighboring elements.
- Purpose of Margins:
- Create breathing room between elements.
- Enhance readability and flow.
- Create distinct sections or areas on a page.
In Elementor:
When selecting a widget or section, the 'Advanced' tab in the editing
panel will provide options to adjust the margin. By default, Elementor
uses pixels (px) but you can change to other units such as %, EM, and
VH/VW.
3. Delving into Paddings

While margins manage space outside of an element or container,
paddings handle the space inside. They create a cushion between the
content and the boundary of its container.
- Purpose of Paddings:
- Improve content readability by preventing it from touching the
edges.
- Enhance aesthetic appeal.
- Add emphasis or highlight to specific content areas.
In Elementor:
Like margins, paddings can also be adjusted from the 'Advanced' tab
when an element is selected. Elementor provides a visual control that
allows you to easily adjust padding for all sides or individual sides of
an element.
4. Practical Application in a Travel Blog
When building a travel blog, the presentation is key. Imagine an article
about a recent trip to Paris.
- Containers: You might want to contain each day's adventures in its
container. This creates a visually distinct break between Day 1, Day 2,
and so on.
- Margins: To prevent images or text about the Eiffel Tower from
bumping up against content about the Louvre, you’d use margins to
create space between these sections.
- Paddings: When showcasing a beautiful image of the Eiffel Tower,
you don't want your descriptive text right up against the image edges.
Paddings can help the text breathe and be more readable.
5. Common Mistakes and How to Avoid Them

- Overusing Margins: Too much space between elements can make a
page look disjointed. Find a balance.
- Ignoring Padding: Neglecting padding can make a page look
crowded and difficult to navigate.
- Inconsistency: Ensure consistent use of margins and paddings
across different pages for a unified look.
6. Quick Tips
- Visual Balance: Always preview your changes to ensure visual
coherence.
- Responsiveness: Regularly check how your adjustments appear on
various devices using Elementor’s responsive mode.
- Templates: If you find a design structure you like, save it as a
template for future use.
Conclusion
Understanding and effectively utilizing containers, margins, and
paddings are foundational skills in web design. As you proceed with
building your travel blog using Elementor, always remember that these
elements are tools in your toolkit. They exist to help you present your
content in the most appealing and accessible way possible.
Next Chapter Preview: Setting up the Global Site Values. Dive deep
into setting unified designs across your travel blog, ensuring a
consistent and appealing visual language.
Setting up the Global Site Values

1. Elementor Plugin - (Available from the official WordPress plugin
repository or from the [Elementor website]( https://elementor.com/ ).
Use: The primary page building tool we'll be using to set up global
values.)
2. WordPress Admin Access - (Ensure you have administrative rights
to access and modify website settings. Use: To access the Elementor
settings.)
3. Google Fonts - ([Google Fonts website]( https://fonts.google.com/ ).
Use: A vast collection of free fonts which can be integrated into your
site. We'll use it to globally set our typography.)
4. Color Palette Tool - ([Coolors]( https://coolors.co/ ). Use: A tool to
generate a color scheme for your travel blog, which will aid in setting
global colors.)
5. High-Speed Internet Connection - (Ensure a stable connection.
Use: To ensure seamless editing and previewing in real-time.)
Introduction
Setting up the global site values is a pivotal step in ensuring
consistency across your travel blog. Think of these global values as
the foundational bricks upon which the entire look and feel of your
website will be built. In this chapter, we will dive deep into setting up
global typography, colors, and other vital elements that will give your
travel blog a consistent and professional appearance.
Step 1: Accessing Global Settings in Elementor

- From your WordPress dashboard, hover over 'Templates' and
choose 'Theme Builder.'
- Within the Theme Builder, click on the 'Site Settings' button. This will
take you to the global settings of Elementor.
Step 2: Setting Global Colors

1. Choosing Your Color Palette: Before setting up colors in Elementor,
visit the Coolors website to choose or generate a color palette suitable
for a travel blog. Typically, for travel blogs, vibrant yet relaxing colors
like shades of blue, green, and earthy tones work best.
2. Adding to Elementor: Back in Elementor's Site Settings, click on
'Global Colors.' Here, you can define your primary, secondary, text,
and accent colors. Fill these in using the palette you chose.
Step 3: Setting Global Typography

1. Choosing Your Fonts: Head over to Google Fonts and select a font
that is legible and fits the vibe of a travel blog. A combination of a serif
font for headings and a sans-serif font for body text works well. For
instance, "Playfair Display" for headings and "Open Sans" for body
text can be a good combination.
2. Adding to Elementor: In the Site Settings, click on 'Global Fonts.'
Here, you can set your primary and secondary fonts (typically, primary
for headings and secondary for body text). Also, set the size, weight,
and style for various headers (H1, H2, etc.) and body text.
Step 4: Setting Global Buttons

This ensures that every button on your site – be it a 'Read More' on a
blog post or a 'Contact Us' on a page – looks consistent.
- In the Site Settings, navigate to 'Buttons.'
- Define the typography (use the global font you set), background
color, border-radius, padding, and hover animation. A subtle hover
animation like 'Grow' is often a good choice for travel blogs.
Step 5: Setting Form Fields

If your travel blog has newsletter sign-ups, contact forms, or any other
input fields, this setting will ensure they all look alike.
- Navigate to 'Form Fields' in Site Settings.
- Set the typography, border type, input & text area background color,
and padding. Keeping the input field background slightly grayish can
enhance readability.
Step 6: Testing and Tweaking

Once you've set all the global values:
- Open a few pages and posts of your blog in preview mode.
- Ensure that the colors, typography, buttons, and forms appear as
you've set them globally.
- Tweak any values if required, and always remember to save
changes.
Conclusion
Setting up global site values is an exercise in branding. It ensures that
your travel blog has a consistent look and feel, no matter which page
or post a visitor lands on. By the end of this chapter, you should have
a beautifully consistent design foundation for your travel blog, making
the upcoming design tasks much smoother and faster.
Remember, while global values provide consistency, Elementor's
flexibility allows you to override these on individual elements if
needed, granting you both uniformity and flexibility.
In the next chapter, we'll take this foundation and begin building upon
it, starting with the creation of a global header for your travel blog. See
you there!
Creating the Global Header

- Elementor Free Plugin (Available from the WordPress plugin
repository)
- Images for logo, background, and social icons (Sources: [Unsplash](
https://unsplash.com/ ), [Pexels]( https://www.pexels.com/ ), or any
other free stock image website)
- FontAwesome (Free icons available at [FontAwesome](
https://fontawesome.com/start ); you'll need to register for a free kit)
- Theme Customizer (Native in WordPress)
Introduction:
The global header is one of the most crucial parts of your website. It is
the first thing visitors see and often contains essential navigation
elements, branding, and contact details. In this chapter, we will dive
deep into creating a responsive and visually appealing global header
for our travel blog using Elementor.
1. Preliminary Steps:
Before we dive into Elementor, ensure you've done the following:
- Installed and activated the Elementor plugin.
- Chosen images for your logo, background, and any other visuals you
want in the header.
2. Accessing Elementor:
- Go to your WordPress dashboard.
- Navigate to `Pages` > Àdd New`.
- Click on Èdit with Elementor`.
3. Choosing the Header Template:

In Elementor:
- Click on the folder icon to add a new section.
- Under the `Blocks` tab, choose `Headers`.
Here, you'll find a variety of pre-designed header templates. For our
travel blog, pick one that feels light and airy, providing ample space for
navigation and a prominent spot for your logo.
4. Customizing the Header:

a. Logo Placement:
- Drag and drop an Ìmage` widget where you want your logo.
- Click on the widget and select the logo image from your media
library.
b. Navigation:
- Drag and drop the `Nav Menu` widget next to your logo.
- If you haven’t already set up a menu in WordPress, go to
Àppearance` > `Menus` in your WP dashboard. Once created, you
can select that menu in the `Nav Menu` widget in Elementor.
c. Social Icons:
- Drag and drop the Ìcon List` widget in your desired location in the
header.
- For each social media platform, choose an icon from FontAwesome
and link it to your respective social media page.
d. Styling:
- Customize the color, typography, and spacing to align with the
aesthetics of a travel blog. Typically, travel blogs have lighter colors
and spacious design elements to invoke feelings of freedom and
wanderlust.
5. Making It Global:
To make the header global, which means it will be applied across all
your pages:
- Click on the green Ùpdate` button.
- In the pop-up window, click on the Àdd Conditions` button.
- Choose Èntire Site` and then click `Save & Close`.
Now, every new page or post you create will automatically have this
header.
6. Mobile Responsiveness:
It’s essential that your header looks great on all devices.
- On the Elementor dashboard, click on the `Responsive Mode` at the
bottom.
- Check and tweak the header's appearance for tablet and mobile
views.
7. Preview and Publish:

Before finalizing, always preview your changes:
- Click on the èye` icon to see a live preview.
- Ensure everything is aligned, clickable, and responsive.
Once satisfied, click Ùpdate` to save all changes.
Conclusion:
Creating a global header with Elementor is straightforward and
requires no coding. This header will serve as the face of your travel
blog, guiding your readers seamlessly through your content.
Remember, while aesthetics are vital, usability should always be the
top priority. Always test your header to ensure it provides the best
user experience across all devices.
In the upcoming chapters, we will dive deeper into other global
elements, ensuring that our travel blog not only looks cohesive but
also offers a seamless user experience.
Building our Global Footer

1. Elementor Free Version (Acquire by installing the Elementor plugin
from the WordPress plugins repository. Use: Page building tool for
WordPress.)
2. Images for Social Media Icons (You can get royalty-free icons from
websites like FontAwesome or Flaticon. Use: For visually appealing
social media links in your footer.)
3. Contact Information (Your own business or website information.
Use: For footer details.)
4. Copyright Information (Your own or the current year's information.
Use: To display copyright protection details.)
Introduction:
The footer of your website is like the conclusion of a book. Though
often underrated, it's a vital component, offering users a space to find
critical information, navigate to other parts of your site, or connect with
you via social media. In this chapter, we will craft a compelling global
footer for our travel blog using Elementor's versatile tools.
Step 1: Accessing Elementor's Footer Builder

1. Navigate to your WordPress Dashboard.
2. Hover over 'Templates' in the sidebar and select 'Theme Builder'.
3. In the Theme Builder interface, click on the ‘Footer’ tab and then
select ‘Add New’.
Step 2: Setting Up Your Footer Layout

1. From the pop-up, name your footer template (e.g., "Travel Blog
Global Footer").
2. Click ‘Create Template’.
3. In Elementor's editor, select the '+' icon to add a new section.
4. Choose a structure for your footer. For our travel blog, a three-
column structure might be ideal: one for quick links, another for social
media icons, and a third for contact details.
Step 3: Adding Quick Links

1. In the leftmost column, drag and drop the 'Text Editor' widget.
2. Type in the header, e.g., "Quick Links".
3. Below that, list out essential links like "Home", "Blog", "Contact Us",
etc.
4. Highlight each link, click the 'Link' icon, and input the respective
URL.
Step 4: Inserting Social Media Icons

1. In the middle column, drag and drop the 'Icon List' widget.
2. Click on each list item to select a social media icon from the library.
3. Next to the icon, type the name of the social media platform (e.g.,
"Facebook").
4. Highlight the platform name, click the 'Link' icon, and insert your
social media URL.
5. Adjust the icon's size and color to match your website's aesthetic.
Step 5: Displaying Contact Details

1. In the rightmost column, drag and drop the 'Text Editor' widget.
2. Add details like your email, contact number, and physical address.
3. For enhanced visual appeal, consider using the 'Icon Box' widget
which allows an icon to be displayed next to your contact details.
Step 6: Adding Copyright Information

1. Add a new one-column section below the three columns.
2. Drag and drop the 'Text Editor' widget into this section.
3. Type in your copyright information, e.g., "© 2023 Travel Blog. All
Rights Reserved."
Step 7: Styling the Footer
1. Click on the footer section to select it.
2. Under the 'Style' tab, adjust the background color to give a contrast
to the main website content.
3. Customize text colors, font sizes, and spacing to ensure readability
and aesthetic coherence.
Step 8: Setting the Footer to Global

1. Click on 'Publish'.
2. In the pop-up, click on 'Add Condition' and select 'Entire Site'.
3. Click 'Save & Close'.
Conclusion:
Congratulations! You've just crafted a global footer that will be
consistently displayed across your travel blog. This footer not only
offers essential links and information but also establishes a brand
coherence throughout your site. As you continue your Elementor
journey, remember the importance of such seemingly minor elements,
as they play a significant role in enhancing user experience.
Adding the Homepage Banner
1. High-Quality Images - Source from stock image websites such as
Unsplash or Pexels. These images will serve as the main visual
attraction for your banner.
2. Elementor Page Builder (Free Version) - This will be our main tool
for constructing the homepage banner. Download and install via the
WordPress plugins page.
3. Google Fonts (optional) - These are free fonts that can be
integrated with Elementor to make your banner text more stylish.
(Accessible directly from Elementor's font options)
4. Call-to-Action Button Design (optional) - Source from free design
tools like Canva or use Elementor’s button widget. This button will
prompt your visitors to take some action, such as reading a blog post
or signing up for a newsletter.
Introduction
A homepage banner, often referred to as a hero section, is one of the
first things visitors see when they land on your website. It sets the
tone, introduces the brand, and provides a clear call to action. For our
travel blog, we aim to captivate visitors immediately with stunning
visuals and compelling text.
Step-by-Step Guide to Adding the Homepage Banner

1. Choose the Right Image
Start by selecting a high-quality image that represents the essence
of your travel blog. It could be a breathtaking landscape, a city skyline,
or a candid moment from a trip. Ensure the image is of high resolution
to avoid pixelation.
2. Setting up the Section
- Navigate to your homepage within the Elementor editor.
- Click on the '+' button to add a new section.
- Select the 'Single Column' structure.
- Adjust the height of the section to fit a banner. Under 'Layout', set
the 'Height' option to 'vh' and adjust accordingly (e.g., 80vh for 80% of
the viewport height).
3. Adding the Image
- Click on the section, go to 'Style' and under 'Background', select
'Classic'.
- Upload your chosen image.
- Under 'Position', choose 'Center Center'. Under 'Attachment',
select 'Fixed' for a parallax effect. Adjust the 'Size' to 'Cover' to ensure
the image covers the entire section.
4. Inserting Banner Text
- Drag the 'Heading' widget from the Elementor panel onto the
section.
- Write a captivating headline that embodies the spirit of your travel
adventures. For instance: "Journey Through Untamed Landscapes."
- Under 'Style', adjust the text color, typography, and other stylistic
elements. If you've integrated Google Fonts, you can select from a
broader range of typefaces.
5. Adding a Subheadline
- Below the main headline, drag another 'Heading' widget.
- This can be a smaller text giving more context or a catchy tagline,
e.g., "Discovering the world, one adventure at a time."
- Again, adjust the style to make it visually appealing and
complementary to your main headline.
6. Incorporating a Call-to-Action (CTA)
A CTA prompts visitors to engage further with your content.
- Drag the 'Button' widget below your subheadline.
- Label it appropriately, like "Explore Now" or "Start the Adventure."
- Link it to a relevant page, perhaps a featured blog post or the
about page.
- Style the button to make it stand out but ensure it fits the overall
design.
7. Mobile Responsiveness
Given the increasing number of mobile users, it's crucial your
banner looks good on all devices.
- Click on the 'Responsive Mode' at the bottom of the Elementor
panel.
- Select 'Mobile' and adjust the settings, ensuring the image,
headline, subheadline, and CTA are all visible and well-proportioned.
Conclusion
The homepage banner isn't just a pretty picture; it's a powerful tool for
brand storytelling and user engagement. With Elementor's intuitive
interface, even beginners can craft compelling banners that resonate
with their target audience. In the next chapter, we'll explore alternative
homepage banners incorporating videos for an added dynamic touch.
Alternative Homepage Banner with

Video
- Elementor Free Plugin: (Available in the WordPress Plugin
repository. Purpose: This is the page builder we will be using.)
- Travel-Themed Video Clip: (Sources: [Pexels](
https://www.pexels.com/ ), [Pixabay]( https://pixabay.com/ ), or
[Unsplash]( https://unsplash.com/ ). Purpose: The video will serve as a
dynamic background for our banner.)
- Video Widget: (Built into Elementor. Purpose: To embed and display
the video on our homepage.)
- Internet Connection: (To stream the video from online sources if not
using a locally saved video.)
Introduction:
While a static image can create a powerful impression, nothing
captivates a visitor's attention quite like a moving video. Using a video
banner can help convey the spirit of travel, capturing the essence of
movement, discovery, and adventure. In this chapter, we will replace
our static homepage banner with a dynamic video clip, providing an
engaging alternative for your website visitors.
Step-by-Step Guide to Creating a Video Banner with Elementor:

1. Choosing the Right Video:
Before we begin, it's vital to select a video that represents the
theme and ethos of your travel blog. The video should be high-quality,
preferably in HD or 4K, and ideally between 10-20 seconds.
Remember, the video should complement your content, not overpower
it.
2. Uploading or Linking the Video:
- Local Upload: Navigate to 'Media' in your WordPress dashboard.
Click 'Add New' and drag your video file or click 'Select Files' to
upload.
- Online Source: If using a video from online platforms, ensure you
have the right to use it and copy the video URL.
3. Editing with Elementor:
- Open your homepage in the Elementor editor.
- Click on the section of your current static banner to select it.
- On the left panel, under the 'Style' tab, you'll find the 'Background
Type' options. Choose 'Video'.
4. Inserting the Video:
- If you've uploaded the video to your WordPress media library, click
on 'Insert Media' and select the video.
- For online sources, paste the copied URL into the 'Video Link'
field.
5. Video Settings:
- Start & End Time: Define when your video starts and ends if you
don't want to play the entire clip.
- Playback Speed: Adjust this if you wish to speed up or slow down
your video.
- Loop the Video: Toggle this on to ensure the video replays
continuously.
- Mute: It's typically best to mute background videos to not disrupt
the user experience.
6. Overlay & Blend Mode:
- You can add a color overlay to ensure text or other elements on
top of the video remain visible and legible. Adjust the color and opacity
as needed.
- The 'Blend Mode' can help create visually appealing effects by
combining the video and overlay colors.
7. Responsive Design Considerations:
Videos may not always play on mobile devices due to data-saving
measures or browser limitations. It's essential to:
- Provide a fallback image: This image will display if the video
cannot play.
- Adjust padding and margins: Ensure the banner looks good on all
devices.
8. Publish Changes:
Once satisfied with the look and feel of your video banner, click on
'Update' to save the changes.
Conclusion:
Incorporating a video banner provides an exciting twist to traditional
website design. It not only enhances the visual appeal of your travel
blog but also offers an immersive experience for your visitors. By
following these steps, you've now equipped your website with a
dynamic alternative homepage banner that is sure to captivate and
inspire wanderlust in your audience.
Building the Homepage - Part 1

Resources & Materials:
- Elementor Free Version Plugin: (Available at WordPress Plugin
Repository). This is the primary tool we'll use for designing the
homepage.
- High-Quality Travel Images: (Sites like Unsplash.com or Pexels.com
offer free high-resolution images). These will be used for the banner,
sections, and other elements of our travel blog homepage.
- A Ready WordPress Website: Before proceeding, ensure you have
WordPress installed on your web hosting.
- Sample Blog Posts: For displaying in the blog section of the
homepage. Create 3-5 sample blog posts within your WordPress
dashboard for the purpose of this tutorial.
- Google Fonts: (Access from fonts.google.com). To stylize and
customize text on our homepage.
Introduction:
Building the homepage is arguably the most crucial aspect of your
travel blog. It’s the first impression visitors get of your site and sets the
tone for the rest of their experience. In this chapter, we’ll begin crafting
a compelling homepage using the Elementor plugin, focusing on the
initial sections.
Step 1: Accessing Elementor
1. Log into your WordPress dashboard.
2. Navigate to ‘Pages’ and click ‘Add New’.
3. Title this page "Home".
4. Click on ‘Edit with Elementor’. This will launch the Elementor editor
interface.
Step 2: Setting Up The Main Banner

The main banner is pivotal as it captures the essence of travel and
draws visitors in.
1. Click on the '+' button to add a new section.
2. Choose the 'Single Column' structure.
3. Go to the Style tab and under 'Background', upload a high-quality
travel image.
4. Adjust the size and positioning to your liking.
5. Add a heading widget to the section. Type a catchy title like
“Adventures Await”.
6. Below the heading, add a text editor widget and type a short
description or tagline.
7. Customize the text using Google Fonts to enhance the aesthetics.
Step 3: Introducing the Blog Section

This section showcases the latest or featured travel articles from your
blog.
1. Add a new section by clicking the '+' button.
2. Choose the 'Three Columns' structure for this section.
3. Label this section "Latest Adventures" or a title of your choice using
the heading widget.
4. Drag and drop the 'Post' widget (available in Elementor) to each
column.
5. Set each widget to display a different sample blog post. Customize
the display settings – decide if you want to show the post’s image,
title, excerpt, and more.
6. Adjust the spacing and margin to ensure posts are well-spaced and
visually appealing.
Step 4: Highlighting Popular Destinations

Showcasing popular travel destinations can provide quick navigation
for your readers.
1. Add another section.
2. Choose the 'Three Columns' structure.
3. Drag and drop the 'Image' widget to each column. Upload images of
popular travel destinations.
4. Overlay each image with a button that links to articles or categories
about that particular destination.
Step 5: Personal Touch - Introducing the Blogger

Personal connection can make readers more invested in your content.
1. Add a new section with a 'Two Columns' structure.
2. In one column, drag and drop the 'Image' widget and upload a
friendly photo of yourself or the main blogger.
3. In the second column, introduce yourself using the 'Text Editor'
widget. Share your passion for travel, what readers can expect, and a
brief background.
Conclusion:
Building a compelling homepage is about more than just aesthetics;
it's about guiding your visitor's journey and showcasing what your blog
offers. With Elementor, you have the tools to visually craft this
experience. In the next chapter, we will continue building on this
foundation by adding more sections and refining our homepage
design.
Remember, practice and experimentation are key. Feel free to play
around with the design, test various images, and text until you find
what resonates best with your envisioned brand and audience.
Stay tuned for "Building the Homepage - Part 2" where we delve
deeper into creating a cohesive and engaging user experience for
your travel blog!
Building the Homepage - Part 2

1. Elementor Free Version: You can download this directly from the
WordPress plugin repository. This drag-and-drop builder will be the
primary tool we utilize.
2. Royalty-Free Images: Websites such as Unsplash (
www.unsplash.com ) and Pexels (www.pexels.com) offer free high-
quality images. We will use these for our homepage visuals.
3. Google Fonts: Accessible via the Elementor interface. These fonts
ensure our website looks modern and is readable.
4. Icons: FontAwesome ( www.fontawesome.com ) provides a vast
selection of icons that integrate easily with Elementor.
Objective: By the end of this chapter, you'll have added key sections
to your travel blog's homepage, making it interactive, informative, and
attractive.
1. The About Section:

Start by introducing yourself or the essence of the travel blog. A brief
"About" section gives readers a sense of who's behind the blog,
instilling trust and rapport.
- Drag a new section onto your page.
- Divide this section into two columns: one for text and one for an
image.
- For the text, use a Title Widget for the header, e.g., "About Us" or
"Our Journey," and a Text Box Widget below for a short blurb about
the blog or author.
- Add a personal photo or a representative image on the other column
using the Image Widget.
2. Featured Destinations Section:

Highlight some favorite or recent destinations to entice readers.
- Create a new section and label it "Featured Destinations" using the
Title Widget.
- Use the Image Carousel Widget below the title. Upload images of top
destinations or places you've written about recently.
- For each image, link it to its respective blog post. This provides
readers easy access to content right from the homepage.
3. Latest Blog Posts:

Showcase your most recent posts to keep content fresh and
engaging.
- Drag a new section onto your page and label it using the Title
Widget.
- Use the Posts Widget from Elementor. This widget automatically
pulls the latest posts from your blog.
- Adjust the number of posts displayed as per your preference.
4. Newsletter Signup:
Encourage readers to stay updated with your latest adventures by
subscribing to your newsletter.
- Add a new section for the newsletter signup.
- Use the Title Widget for a catchy headline, e.g., "Stay Updated!" or
"Join Our Adventures!".
- Below the title, drag the Form Widget to create a simple signup form.
You might only need a field for the email and a submit button.
- Ensure you link this form to your email marketing provider, so
subscribers are added to your list.
5. Testimonials:
If you have reviews or testimonials, this is a great place to showcase
them, building trust among new readers.
- Create a new section.
- Use the Title Widget for a heading like "What Readers Are Saying".
- Drag the Testimonials Widget into this section. Input the testimonial
text, the name of the reader, and, if available, their photo.
6. Call to Action (CTA):

End the homepage with a strong CTA, guiding readers on what to do
next. This could be checking out a particular post, signing up, or
following your blog on social media.
- Add a new section.
- Incorporate the Title Widget for a compelling statement, e.g., "Ready
for the Next Adventure?"
- Add a Button Widget below the title. This button could link to your
blog page, a featured post, or any other page you deem essential.
Conclusion:
Your travel blog homepage is now not only visually appealing but also
functional, guiding your readers through a journey of discovering who
you are, what you offer, and how they can engage further with your
content. Remember to preview and test your homepage across
different devices to ensure everything looks perfect. In the next
chapter, we'll delve into adding alternative styles and sections to make
your homepage even more dynamic.
Adding the Image Carousel

Assets and Resources for this Chapter:
1. Images for the Carousel: You can source royalty-free images from
websites like [Unsplash]( https://unsplash.com/ ), [Pexels](
https://www.pexels.com/ ), and [Pixabay]( https://pixabay.com/ ).
Ensure you choose high-quality and relevant images to your travel
blog theme.
2. Elementor Free Plugin: Ensure you have the free version of
Elementor activated. You can download and install it from the
[WordPress plugin repository](
https://wordpress.org/plugins/elementor/ ).
Introduction
An image carousel is a great way to showcase a series of pictures in a
space-efficient manner. It's especially useful for travel blogs, where
vivid imagery can tell a story on its own. In this chapter, we'll delve into
how to add an image carousel to our travel blog using the free version
of Elementor.
Step-by-Step Guide
1. Accessing the Elementor Editor
- Navigate to the page you wish to edit.
- Click on “Edit with Elementor”.
2. Searching for the Image Carousel Widget
- On the left sidebar of the Elementor editor, you'll see a search bar at
the top.
- Type in “Image Carousel” and drag the widget to where you'd like to
place it on your page.
3. Adding Images to the Carousel
- Once you place the widget, a new panel on the left will open.
- Click on the ‘+’ sign to open your WordPress Media Library.
- You can upload new images or select from those you’ve previously
uploaded.
- After selecting your images, click on ‘Insert Media’.
4. Configuring Carousel Settings
- Image Size: You can choose from a variety of pre-set sizes or set a
custom size.
- Slides to Show: Determine how many slides you want to display at
one time.
- Slides to Scroll: Decide how many slides should scroll at once.
- Navigation: Choose to display arrows, dots, both, or none.
- Pause on Hover: If enabled, the carousel will pause when a user
hovers over it.
5. Styling the Carousel
Elementor provides you with a plethora of styling options to match the
look and feel of your blog:
- Image: Adjust the spacing between images and border type.
- Navigation: Customize the arrow and dots in terms of size, color, and
position.
- Caption: If your images have captions, you can customize their
typography and color here.
One of Elementor’s powerful features is the ability to make your
design mobile responsive:
- Click on the responsive mode icon at the bottom left of the panel.
- Switch between desktop, tablet, and mobile views.
- Adjust any settings as necessary to ensure your carousel looks great
on all devices.
7. Preview and Save
- Before finalizing, always preview your changes by clicking on the
"Eye" icon.
- If you’re satisfied with how the carousel looks and functions, click on
the green 'Update' button.
Conclusion
Adding an image carousel can significantly enhance the visual appeal
of your travel blog. With Elementor’s user-friendly interface, you can
easily integrate this feature, ensuring that your readers get a dynamic
visual experience. Remember to always source high-quality images
that resonate with the content of your blog for maximum impact.
Adding the Blog Section

- Elementor Free Plugin (Available at WordPress Plugin Repository or
[Elementor's Official Website]( https://elementor.com/ ))
- Travel-related Blog Posts (For the sake of this tutorial, prepare at
least three blog posts complete with titles, featured images, excerpts,
and full content.)
- Featured Images (These can be sourced from royalty-free image
websites such as [Unsplash]( https://unsplash.com/ ) or [Pexels](
https://www.pexels.com/ ). Ensure to credit images if required.)
- A WordPress theme that supports Elementor (Any standard theme
like Astra, Hello Elementor, or OceanWP will work.)
Introduction:
The blog section is the heart of any travel blog. It's where readers will
spend most of their time, diving into your travel tales, insights, and
experiences. Using Elementor, we can create a visually appealing and
functional blog section with ease, even without delving into code.
Step-by-Step Guide to Adding the Blog Section:

1. Initial Setup:
- Ensure you've already set up WordPress, installed Elementor, and
have your theme activated.
- Prepare your blog posts with their respective featured images.
2. Accessing Elementor Editor:
- From your WordPress dashboard, navigate to Pages > Add New.
Let's title this page "Blog".
- Click on the “Edit with Elementor” button.
3. Adding a New Section for Blog Posts:
- Click on the '+' icon to add a new section.
- Choose the 'Structure' you prefer for your blog layout. For a
standard blog layout, you might select the single column structure.
4. Inserting the Blog Posts Widget:
- From the Elementor sidebar, search for the 'Posts' widget. Drag
and drop the widget into the section you just created.
5. Customizing the Blog Layout:
- With the 'Posts' widget selected, you will see various settings in
the Elementor sidebar.
- Layout: Choose between Grid, List, or Masonry. For a travel
blog, a Grid can be visually appealing as it showcases the featured
images prominently.
- Columns: Decide how many posts to show in a single row.
Typically, 2 or 3 are popular choices.
- Post Count: Decide how many posts in total you want to display
on the blog page.
6. Styling the Blog Section:
- Move to the 'Style' tab in the Elementor sidebar.
- Rows Gap: Adjust the space between rows of blog posts.
- Columns Gap: Adjust the space between individual blog posts.
- Image Size: Adjust the size of the featured image.
- Title Color: Adjust the color of the blog post titles for consistency
with your website's color scheme.
- Typography: Adjust font size, family, and style for the title,
metadata, and excerpt.
7. Adding Pagination:
- Still within the 'Posts' widget settings, scroll down to find the
Pagination option. This allows users to navigate between different
pages of your blog.
- Toggle the 'Pagination' option to 'Yes' and style as needed.
8. Responsiveness:
- Ensure your blog section looks good on all device types. Click on
the 'Responsive Mode' at the bottom of the Elementor sidebar and
switch between desktop, tablet, and mobile views. Adjust any settings
if necessary.
- Click on the 'Eye' icon to preview your blog section. Make any
necessary tweaks.
- Once satisfied, click on the green 'Publish' button to save and
publish your blog page.
10. Linking to the Main Menu:
- Return to your WordPress dashboard.
- Navigate to Appearance > Menus.
- Add the 'Blog' page to your main menu so visitors can easily
access your posts.
Conclusion:
Congratulations! You've successfully added a blog section to your
travel blog using Elementor. This dynamic section will automatically
update with new posts as you continue to share your adventures.
Remember, the key to a successful travel blog is not just a visually
appealing design but also compelling content. So, keep writing and
sharing your unique travel tales with the world!
In the next chapter, we will look at an alternative way to set up a blog

section to provide you with multiple design options. Stay tuned!
Adding an Alternative Blog Section

Assets, Resources, and Materials Required:
1. WordPress Installation – Ensure you have WordPress installed on
your hosting. (Available via your web hosting platform)
2. Elementor Free Version – Ensure it's installed and activated.
(Available via WordPress plugins repository)
3. Travel Blog Images – Images for your blog posts. (Can be sourced
from royalty-free image platforms like Unsplash, Pexels, or Pixabay)
4. Sample Blog Posts – Written content for showcasing. (If you don’t
have any, you can get sample posts from Lipsum or use AI content
generators)
5. Google Fonts – For custom typography. (Integrated within
Elementor)
6. Icon Library – For adding icons to the blog section. (Elementor
comes with FontAwesome, but you can also integrate other libraries)
Introduction:
While the traditional blog section gives our travel blog a professional
look, introducing an alternative style can provide the site with a fresh
appeal, and cater to varied tastes of your audience. In this chapter,
we'll explore creating an alternative blog section using Elementor’s
versatile tools.
Steps to Create an Alternative Blog Section:

1. Starting with a Fresh Section:
- On your WordPress dashboard, navigate to the page where you
wish to add the blog section.
- Click 'Edit with Elementor' to launch the Elementor editor.
- Click on the '+' icon to add a new section.
- Choose the 'Structure' with two columns. This will allow us to
create a side-by-side view of blog posts.
2. Stylizing the Section:
- In the left panel, under 'Layout', adjust the content width to 'Full
Width'.
- Set a minimum height as per your preference. A height of 400px is
a good starting point.
3. Adding the Blog Posts:
- Drag the 'Posts' widget from the left panel to your newly created
section.
- Under the 'Layout' dropdown, select 'Cards' as your style.
- Adjust the number of columns to '2'. This allows for two blog posts
side-by-side.
- Under 'Query', select the number of posts you wish to display. For
this layout, showing '4' posts works well.
4. Customizing the Appearance:
- For the 'Image Size', choose 'Medium Large' to ensure images are
of adequate quality but not too large.
- Activate the 'Show Excerpt' toggle and limit the excerpt length to
about 20-30 words to provide a teaser of the content.
- Adjust the 'Meta Data' as desired. Consider disabling the 'Date' for
a cleaner look, keeping only the author and comments.
5. Enhancing with Typography and Colors:
- Navigate to the 'Style' tab.
- Customize the title typography with a bold and slightly larger font.
Google Fonts like 'Oswald' or 'Raleway' give a modern look.
- For the excerpt, opt for a simpler font like 'Roboto'.
- Choose colors that match your overall website theme. If your
primary theme is teal and white, for instance, make the post titles teal
and the background white.
6. Introducing Interactive Features:
- Add a hover animation to the blog cards. 'Zoom in' or 'Rise' effects
make the cards more engaging.
- Adjust the border radius to around '10px' for slightly rounded
edges, giving a modern aesthetic to your blog cards.
7. Call to Action:
- At the bottom of your blog section, consider adding a 'Read More'
or 'View All Posts' button, leading visitors to your main blog page. Use
the 'Button' widget for this and customize it to match your site’s colors.
8. Final Touches:
- Add a heading to the section like "Latest Adventures" or "Recent
Journeys" using the 'Heading' widget.
- Ensure the entire section is mobile responsive. Under the
'Responsive' mode, check the appearance on tablet and mobile. Make
any necessary adjustments.
9. Save and Preview:
- Once satisfied, click the 'Update' button.
- Preview the page to ensure everything looks as expected.
Conclusion:
Creating an alternative blog section not only adds aesthetic variety but
also ensures that your travel blog remains fresh and engaging for
visitors. With Elementor's intuitive interface, you can easily customize
this layout further, experimenting with different styles, layouts, and
features to create a truly unique design.
Adding Our Call to Action

- Elementor Free Version: (Available for download at the WordPress
plugin repository or from the Elementor website at [elementor.com](
https://elementor.com/ )).
- High-quality Call to Action (CTA) image: (You can acquire royalty-
free images suitable for CTAs from websites like [Unsplash](
https://unsplash.com/ ) or [Pexels]( https://www.pexels.com/ ). Ensure
the image matches the theme and aesthetics of your travel blog).
- Travel-related CTA text ideas: (Brainstorm or use tools like
[AnswerThePublic]( https://answerthepublic.com/ ) to understand what
travel-related queries people are searching for and craft your CTA text
accordingly).
Introduction
In the context of website design, a Call to Action (or CTA) is a prompt
on a website that tells the user to take some specified action. For our
travel blog, a CTA can encourage visitors to subscribe to your
newsletter, check out a featured destination, or read a popular blog
post. It's an essential part of driving user engagement and ensuring
visitors don't just passively scroll through your content. In this chapter,
we will delve into how to effectively add a Call to Action to your travel
blog using Elementor.
1. Understanding the Importance of a CTA for a Travel Blog

Before we dive into the mechanics, let's understand the importance. A
travel blog isn't just about sharing stories; it's about inspiring others to
travel, to explore, or even to take advantage of a travel deal you might
be promoting. Whether you want them to sign up, read more, or follow
you on social media, the CTA serves as that gentle nudge directing
them towards that goal.
2. Design Considerations for Your CTA

- Visual Appeal: The design should be eye-catching. Using a high-
quality image that aligns with the travel theme can make your CTA
stand out.
- Clarity in Messaging: Your CTA text should be concise and clear. For
instance, "Dive into Adventure - Subscribe Now!" is direct and evokes
a sense of action.
- Positioning: Ideally, your CTA should be placed at a strategic point
on your blog where it will grab attention but not disrupt the user
experience. Consider placing it halfway through your content or at the
end of a post.
Step-by-step Guide to Adding a CTA with Elementor

1. Login to your WordPress Dashboard and navigate to the page
where you'd like to add the CTA.
2. Edit with Elementor: Click on the “Edit with Elementor” button.
3. Drag and Drop: On the left sidebar of Elementor, search for the
"Button" widget. Drag and drop it to the area where you'd like the CTA
to appear.
4. Customize Your Button:
- Text: Input your desired CTA text. E.g., "Discover More!"
- Link: Add a link to redirect users when they click on the CTA. This
could be a link to a sign-up page, another blog post, etc.
- Style: Customize the color, typography, and size of the button to
make it stand out, yet blend seamlessly with your blog design.
5. Add an Image: To make your CTA more visually appealing,
consider adding a background image. In the Elementor sidebar, go to
the ‘Advanced’ tab and under ‘Background’, upload your chosen
image.
6. Responsive Design: Ensure your CTA looks good on desktop,
tablet, and mobile. Click on the 'Responsive Mode' at the bottom of the
Elementor sidebar and tweak your design as needed.
7. Publish: Once satisfied, click the "Publish" or "Update" button on the
bottom left to save your changes.
Test and Iterate

After publishing, ask peers or community members to visit your site
and provide feedback on the CTA. Does it grab attention? Is the
messaging clear? Use this feedback for continuous improvement.
Conclusion
An effective Call to Action is pivotal for guiding user behavior on your
travel blog. With Elementor, creating and implementing a visually
appealing and compelling CTA becomes a breeze. Ensure you keep
the CTA relevant to your content, enticing enough to provoke an
action, and always be ready to iterate based on user feedback.
Adding the Testimonials Section

Assets, Resources, and Materials needed for this chapter:
1. Testimonial Images: Obtain high-quality images of the individuals
giving the testimonials. (You can use royalty-free stock photos from
sites like Unsplash or Pexels if you don't have actual images. Ensure
you have the right to use the images for your project.)
2. Testimonial Content: Written testimonials by people who have
visited or utilized your travel blog services. These should be authentic
reviews but for the sake of this tutorial, you can create fictional ones.
3. Elementor: Ensure you have the Elementor plugin installed and
activated.
4. Web Browser: To preview and make edits to your site (e.g., Google
Chrome, Firefox).
Introduction
Adding a testimonials section is crucial for any website, especially for
a travel blog. Testimonials add authenticity to your site, providing real
feedback from individuals who have experienced the services or
content you offer. They can build trust with new visitors and
encourage them to engage more with your blog.
In this chapter, we’ll walk through the steps to create an engaging
testimonials section using Elementor.
Step 1: Navigate to the Page

1. Log into your WordPress dashboard.
2. Go to Pages > All Pages.
3. Find the page where you want to add the testimonials section (e.g.,
Home Page) and click on 'Edit with Elementor'.
Step 2: Add a New Section

1. Click on the '+' button to add a new section.
2. Choose the 'Single Row' structure for simplicity. You can choose a
multi-column structure if you want to display multiple testimonials side
by side.
Step 3: Search for the Testimonial Widget

1. On the Elementor editor's left panel, type 'Testimonial' in the search
bar.
2. You'll see the 'Testimonial' widget. Drag and drop it into the section
you've just created.
Step 4: Customize the Testimonial

1. Content Tab
- Name: Enter the name of the individual providing the testimonial.
- Job: Input the individual’s designation or relation to the travel field
(e.g., "Solo Traveler", "Travel Blogger", etc.).
- Description: Here, paste or type the testimonial content.
- Image: Click on 'Choose Image' and upload the testimonial image
you've prepared.
2. Style Tab
- Text Color: Choose a color that complements your website's
theme and ensures readability.
- Typography: Adjust the font size, family, weight, etc., for the name,
job, and description.
- Image: You can adjust the image size, border type, and more to
make the testimonial image look just right.
Step 5: Add More Testimonials (Optional)

1. If you want to showcase multiple testimonials, right-click on the
testimonial widget you just customized and select 'Duplicate'.
2. Drag the duplicated widget next to the original to create a side-by-
side view.
3. Now, customize the content of the duplicated testimonial widget as
needed.
Step 6: Adjust Section Design

1. Click on the six-dot icon of the section to access section settings.
2. Under the 'Style' tab, you can set the background color or image for
the entire testimonials section.
3. Adjust padding and margins to ensure the testimonials are well-
spaced and visually appealing.
Step 7: Preview and Publish

1. Click on the 'Preview' button to see how the testimonials look on
your page.
2. Make any necessary adjustments.
3. Once satisfied, click 'Update' on the bottom left to save your
changes.
Conclusion
Testimonials can be a powerful tool for building trust and credibility
with your audience. By showcasing real feedback, you provide
reassurance to potential readers or customers about the quality and
authenticity of your content. Remember, always ensure that the
testimonials you add are genuine and represent real opinions about
your blog or service.
Home Page Review
Required Assets and Resources:
1. Elementor Free Version - [Acquire here](
https://wordpress.org/plugins/elementor/ ): This is the primary tool
we've used to design our travel blog's homepage.
2. Travel Blog Home Page Design - Created in Chapter 18 & 19: We'll
be referring to this design throughout our review process.
3. Web Browser (like Chrome or Firefox) - To view the live home page
and test its functionality.
4. Checklist for Web Page Review: Helps to ensure that we've
covered all essential design and functionality aspects.
Introduction:
Now that we've spent considerable effort designing our travel blog's
homepage with Elementor, it's time to review our work. This chapter
will guide you through a systematic review of the home page, ensuring
that every element is in place, functional, and visually appealing.
Step-by-step Home Page Review:

1. Overall Aesthetics:
- Alignment and Spacing: Ensure that all elements on your home page
(text, images, buttons) are aligned correctly. Spacing between these
elements should be uniform and not feel too crowded or too sparse.
2. Element-Specific Review:
- Header: Ensure that the site logo and social media icons are
appropriately sized and positioned. The header should be visually
balanced and must remain fixed at the top as you scroll.
- Homepage Banner: Check both versions - the static image and the
alternative video banner. Both should scale well, and the video should
auto-play smoothly.
- Image Carousel: Make sure images slide smoothly. The navigation
dots or arrows should be functional and clearly visible.
- Blog Section: Ensure that the latest blog posts are displayed with an
attractive image, title, and short excerpt. There should be a clear
button or link to read the full post.
- Call to Action: It should stand out and have a clear message. The
button embedded should navigate to the intended page/section when
clicked.
- Testimonials Section: Ensure that the testimonial quotes, along with
the author's name and image, are displayed clearly. If there's a slider,
it should transition smoothly.
3. Functionality Check:
- Navigation: Click on each link in the header and footer to ensure they
navigate to the correct page or section.
- Responsiveness: Using your browser's developer tools, check how
the homepage looks on various devices - desktops, tablets, and
mobile phones. Elements should adjust and stack appropriately, and
text should remain legible.
4. Loading Speed:
- Use tools like [Google PageSpeed Insights]
(https://developers.google.com/speed/pagespeed/insights/) to check
the loading speed of your homepage. Slow-loading pages can deter
visitors, so ensure optimization if needed.
5. SEO Check:
- Ensure that your home page has meta tags, alt tags for images, and
proper H1, H2 headings for better search engine visibility.
6. User Feedback:
- It's often beneficial to get a second pair of eyes. Ask a friend or
colleague to navigate the home page and provide feedback. They
might notice something you missed or offer valuable input from a
user's perspective.
Conclusion:
A thorough review is a cornerstone of professional web design.
Mistakes or oversights, however small, can impact the user
experience. By meticulously reviewing the home page, you ensure a
seamless and pleasant experience for your visitors, increasing the
chances they'll stay longer and engage more with your travel blog.
Creating the Blog Page

- Elementor Free Version: Available from the WordPress Plugin
Repository.
- Images: Relevant blog post thumbnail images. (Source these from
free stock image sites such as Unsplash, Pexels, or Pixabay. Ensure
they are relevant to the blog content and appropriately sized for web
use.)
- WordPress: Ensure your WordPress installation is up-to-date.
- Elementor Templates: Ready-made blog layout templates available
within Elementor. (Optional, but can speed up design time.)
Introduction:
The heartbeat of every travel blog is its content. With Elementor,
creating a visually appealing and functional blog page becomes a walk
in the park. In this chapter, we will dive deep into creating a blog page
that showcases all your articles in a neat, responsive layout. Let's get
started!
1. Starting with a Blank Page:

Before diving into Elementor, make sure you've created a new page in
WordPress named "Blog". This will serve as the canvas on which we'll
paint our blog layout using Elementor.
Steps:
- Navigate to `Pages` > Àdd New` in the WordPress dashboard.
- Title the page "Blog" and click "Edit with Elementor."
2. Choosing a Layout:
For our travel blog, let's aim for a grid layout with a sidebar. This
layout is not only aesthetically pleasing but also functional, as it
provides space for widgets, categories, and other essential blog tools.
3. Adding a Blog Post Grid:

- Click on the '+' icon in Elementor to add a new section.
- Choose the 'Two Columns' option. The left column will house our
blog post grid, while the right will be reserved for the sidebar.
- On the left panel, search for the "Posts" widget and drag it into the
left column.
4. Configuring the Blog Post Grid:

- Once the "Posts" widget is placed, the left Elementor panel will
automatically show its settings.
- Adjust the 'Number of Posts' to display as per your preference.
- Choose 'Grid' as the layout.
- Set the image size, content length, and other attributes to match your
desired aesthetic.
Tip: Make sure the images for the blog posts are of consistent size for
a uniform look.
5. Creating the Sidebar:

The sidebar is an essential component of a blog page, allowing you to
showcase recent posts, categories, tags, and more.
- In the right column, search for the "Sidebar" widget in Elementor and
drag it in.
- Choose your active sidebar. If you haven't set up one, you need to
do so in the WordPress dashboard under Àppearance` > `Widgets`.
Note: You can customize the sidebar's contents within WordPress by
adding or removing widgets.
6. Adding Essential Blog Widgets:

While the basic blog page is now set, enhancing its functionality with
relevant widgets can be beneficial. Consider adding:
- Search Widget: Helps users find content.
- Recent Posts: Showcases your latest articles.
- Categories: A categorical breakdown of your content.
- Archives: Monthly breakdown of posts.
7. Styling and Design Tweaks:

Elementor's strength lies in its design capabilities. Customize the look
and feel of your blog page:
- Adjust the space between posts.
- Set a custom background, perhaps a subtle travel-themed pattern.
- Style the pagination buttons.
- Customize the look of the sidebar to match the rest of your website.
8. Review and Publish:
Before hitting the publish button:
- Preview the blog page on various devices using Elementor's
responsive mode.
- Ensure all links and buttons are functional.
- Check the page load speed; excessive widgets or large images
might slow it down.
Once satisfied, hit the "Publish" button on the bottom left of Elementor.
Conclusion:
Congratulations! You've just set up a dynamic, visually appealing blog
page using Elementor. This page will automatically update with each
new post you publish, offering a seamless experience for your
readers.
Building the Contact Page

Required Assets and Materials:
1. Elementor Free Plugin (Available in the WordPress Plugin
Repository): This is our primary page-building tool.
2. Contact Form 7 (Available in the WordPress Plugin Repository): A
popular and reliable contact form plugin compatible with Elementor.
3. Google Maps API Key (Acquired from Google Cloud Platform
Console): To embed a map on the contact page.
4. Relevant Images (Sources like Unsplash, Pexels): High-quality,
royalty-free images suitable for a travel blog.
Introduction:
The contact page is an essential part of any website, including a travel
blog. It provides your readers a direct way to get in touch with you,
inquire about collaborations, or even share their own travel
experiences. In this chapter, we'll walk you through the steps to create
an effective contact page using Elementor.
Step-by-Step Guide to Building the Contact Page:

1. Creating a New Page:
- From your WordPress Dashboard, go to Pages > Add New.
- Title the page "Contact" and click on "Edit with Elementor."
2. Setting Up the Page Structure:
- Start with a single section with two columns. The left for the
contact form and the right for contact details and a Google Map.
3. Adding the Contact Form:
- Make sure you have the Contact Form 7 plugin installed and
activated.
- Create a new contact form from your WordPress Dashboard by
navigating to Contact > Add New. Customize your form fields as
desired.
- Once you've set up the form, save it and copy the provided
shortcode.
- Back in Elementor, search for the "Shortcode" widget in the
Elementor widget panel. Drag it to the left column and paste the
copied shortcode.
4. Adding Contact Details:
- In the right column, use the Text Editor widget to add details like
your email address, phone number, and any other relevant contact
information.
- Use the Heading widget to create clear headings like "Email,"
"Phone," etc., above each piece of information.
5. Embedding a Google Map:
- Acquire a Google Maps API Key from the Google Cloud Platform
Console.
- In Elementor, search for the "Google Maps" widget and drag it
below your contact details in the right column.
- In the widget settings, paste your API Key and input your desired
address. Adjust the zoom level and height of the map to fit your
design.
6. Styling the Page:
- Ensure the design and colors align with the overall aesthetics of
your travel blog.
- Consider adding a relevant background image to the section,
perhaps a map-themed background or a travel-themed image.
- Adjust the spacing and padding of elements for better readability
and visual appeal.
7. Additional Elements:
- Consider adding social media icons or links at the bottom,
encouraging users to connect with you on various platforms.
- Add a testimonial or two near the bottom to showcase positive
feedback you've received, increasing trust among new visitors.
8. Test the Contact Form:
- Before publishing, always test the contact form to ensure it's
working correctly and that you receive the messages in your inbox.
9. Publish the Page:
- Once satisfied, click on the "Publish" button.
Conclusion:
Your contact page is not just a way for readers to reach out, but an
extension of your travel blog's brand. Make it inviting, easy to use, and
reflective of your blog's theme. Remember, a well-designed contact
page can be the bridge that connects you to numerous opportunities,
from reader feedback to collaboration offers. Enjoy the journey of
connecting with your audience!
Working with Pre-Built Templates

- Elementor: Ensure you have the free version of the Elementor plugin
installed and activated. (Available from the WordPress plugin
repository.)
- Elementor Library: This is an in-built resource in Elementor where
pre-built templates are stored.
- Images: For demonstration purposes, have a few travel-related
images handy. If you don't have any, consider using stock photo
websites like Unsplash or Pexels to find relevant images.
Introduction
As you venture deeper into the world of Elementor, you'll quickly
discover the power of pre-built templates. These templates, crafted by
expert designers, offer a quick and efficient way to design stunning
pages without starting from scratch. Given that we are working on a
travel blog, utilizing pre-built templates can save tons of time and
ensure a professional look for your site.
Why Use Pre-Built Templates?
1. Speed: Instead of building a page from the ground up, you can
import a template and modify it according to your needs.
2. Design Inspiration: Not sure about the design direction? These
templates can serve as a great starting point.
3. Consistency: Pre-built templates often maintain a consistent design
language, ensuring that different pages of your website have a
uniform look and feel.
Accessing Elementor's Library of Pre-Built Templates

1. Open your WordPress dashboard and navigate to the page where
you want to insert the template.
2. Click on 'Edit with Elementor'.
3. Once the Elementor editor loads, click on the folder icon in the
middle of the screen. This will open Elementor's template library.
4. Here, you'll find a collection of pre-built templates. Browse through
the selection, and when you find one that suits your travel blog, simply
click 'Insert'.
Choosing the Right Template for Your Travel Blog

While Elementor offers a vast collection of templates, not all may be
suitable for a travel blog. Here are some guidelines to help you
choose:
1. Relevance: Look for templates that have imagery and design
elements related to travel. This might include templates with large
image sections, maps, or itinerary layouts.
2. Layout: Choose a template that offers clear content segmentation.
Travel blogs often require areas for blogs, image galleries, trip details,
and perhaps even booking sections.
3. Mobile Responsiveness: Ensure that the template looks good on
mobile devices since many readers will access travel blogs on the go.
Customizing the Pre-Built Templates
After inserting a template:
1. Replace Images: Click on any image to replace it. Use the left pane
to upload your travel images.
2. Edit Text: Click on any text box to edit its content. For a travel blog,
you might want to add exciting trip descriptions, tips, or personal
anecdotes.
3. Modify Design Elements: Every design element in Elementor is
customizable. Adjust colors, fonts, and sizes to match your brand or
personal preference.
4. Remove or Add Sections: If you feel a section is not needed, right-
click and delete it. Similarly, to add new sections, simply drag widgets
from the left pane.
Saving Customized Templates for Future Use

After spending time customizing a template, it's a good idea to save it:
1. Right-click on the section you want to save.
2. Select 'Save as Template'.
3. Give it a name (e.g., "My Custom Travel Blog Homepage").
Now, whenever you want to use this customized template on another
page or even another website, you can simply import it from your
saved templates!
Conclusion
Pre-built templates in Elementor are a game-changer, especially for
those who are new to web design or are pressed for time. For our
travel blog project, these templates can give a head-start, ensuring
that we have a beautiful, responsive, and functional site in much less
time.
Remember, while templates offer a ready-made design, the real magic
happens when you infuse them with your personal touch. Customize
them to resonate with your travel stories, and you'll have a travel blog
that's uniquely yours.
In the next chapter, we'll delve deeper into understanding responsive

design, a crucial aspect to ensure that your travel blog looks great on
all devices.
Introduction to Responsive Design

1. Web Browsers (Google Chrome, Firefox, Safari): These are tools to
view your website and check for responsiveness. You can download
these browsers from their official websites.
2. Browser Developer Tools: Built into modern web browsers like
Google Chrome and Firefox, these tools allow you to inspect and test
your site in various screen sizes.
3. Mobile Devices (Smartphones, Tablets): If available, test your site
on physical devices to understand how users will interact with it.
These devices can be any Android, iOS, or tablet devices.
Introduction:
Responsive design is the approach in web development and design
that ensures a website functions and looks great across all devices,
no matter their screen size or resolution. With the increasing variety of
devices from desktop monitors to phones, tablets, and even
smartwatches, having a website that works fluidly on all platforms is
no longer a luxury—it's a necessity.
Why is Responsive Design Important?

In our digital age, the vast majority of users access websites from a
myriad of devices. According to recent statistics, over 50% of global
web traffic comes from mobile devices. If your website isn't
responsive, you're potentially excluding over half of your audience
from viewing your site as intended.
Search engines, especially Google, prioritize mobile-friendly websites.
This means that if your website isn't responsive, it could rank lower in
search results, potentially decreasing your site's visibility and traffic.
Core Principles of Responsive Design:

1. Fluid Grids: This involves designing layouts with relative units like
percentages, rather than fixed units like pixels. So, if a screen gets
larger or smaller, the elements on the web page adjust in relation.
2. Flexible Images: Images should also resize within the containing
elements. This ensures they don't spill out of their containers or look
too small on larger screens.
3. Media Queries: These are techniques in CSS that allow you to
apply styles based on device characteristics, such as its width, height,
or orientation. With Elementor, much of this is handled automatically,
but it's good to understand the underlying process.
How Does Elementor Assist in Responsive Design?

Elementor is designed with responsiveness in mind. As we build our
travel blog, you'll notice:
- Device Preview: Elementor provides icons to switch between
desktop, tablet, and mobile previews. This allows you to see how your
design appears on different devices right within the editor.
- Responsive Controls: For many widgets and settings, you'll find an
option to set different controls for different devices. This means you
can specify different margins, fonts, or even show/hide certain
elements depending on the device.
Common Responsive Design Issues and How to Address Them with
Elementor:
1. Text Size and Readability: On smaller devices, text can become too
small to read. With Elementor, you can adjust font sizes for different
devices to ensure your content remains legible.
2. Image Resizing: Images might look great on a desktop but could
dominate a mobile screen. Use Elementor's responsive controls to
adjust image sizes or hide/show different images based on the device.
3. Navigation: A full menu might work on desktop but could be
overwhelming on mobile. Elementor allows you to create mobile-
specific menus, ensuring users can navigate your site easily,
regardless of the device they're using.
Conclusion:
As we delve deeper into building our travel blog with Elementor,
always have responsiveness in mind. With the tools Elementor
provides, and the principles we've outlined in this chapter, you're well-
equipped to create a travel blog that looks and functions beautifully on
all devices. Remember, a responsive site not only ensures a better
user experience but also boosts your site's SEO and reach.
In the upcoming chapters, we will discuss practical steps and
techniques to design responsive elements in our travel blog using
Elementor.
Designing the Responsive Header
1. Elementor Free Version (Acquired by installing the Elementor plugin
from the WordPress dashboard).
2. Laptop/Desktop and Mobile Device (For testing responsiveness).
3. Sample Images/Logo (Can be sourced from free stock image
websites like Unsplash or Pexels).
4. Elementor Mobile Editing Tool (Automatically available within
Elementor).
Introduction
As our website development progresses, it becomes imperative to
ensure that our travel blog not only looks great on desktops but also
on tablets and mobile devices. The header, being the first thing
visitors see, needs to be immaculate and responsive. In this chapter,
we'll delve deep into designing a header that adapts seamlessly
across devices.
1. Understanding Responsiveness
Before we begin, it's crucial to understand why responsiveness
matters. A responsive design ensures that website elements adjust
according to the screen size, providing an optimal viewing experience.
With a majority of web users accessing sites via mobile devices, a
non-responsive header can deter potential readers.
2. Accessing Mobile Editing Mode in Elementor

- Open your header template in Elementor.
- On the bottom-left corner, you'll see a desktop icon. Clicking on it
reveals options for tablet and mobile views. Toggle between these to
adjust your design accordingly.
3. Adjusting the Logo for Mobile View

Most logos appear fine on desktop but might need adjustments for
smaller screens.
- Select your logo element.
- Switch to Mobile Editing mode.
- Under the 'Style' tab, adjust the logo's width, and ensure it's center-
aligned for better visual appeal on mobile devices.
4. Streamlining the Navigation Menu

Mobile screens have limited space; hence a full navigation menu
might look cramped.
- Use Elementor's Mobile Drop-down option. This replaces your
regular menu with a hamburger icon on mobile devices.
- Customize the drop-down by changing its toggle button color,
background, or even animations.
5. Adjusting Padding and Margin

Spaces around your header elements might appear excessive on
mobile.
- Select the section or element.
- Under 'Advanced', tweak the padding and margin values for mobile.
Tip: Often, a reduced value between 5-10 pixels works well for mobile
padding.
6. Collapsing Unnecessary Elements

If your header has additional elements like social media icons or
secondary menus, consider collapsing or hiding them on mobile.
- Select the element.
- Under the 'Advanced' tab, expand the 'Responsive' section.
- Toggle the visibility settings to hide the element on mobile or tablet
views.
7. Test Across Devices

Always preview changes on actual devices. Use both Android and iOS
devices if possible to ensure uniformity.
8. Publish and Review

Once satisfied, click 'Update' to save your changes. Visit your website
on different devices to see the responsive header in action.
Conclusion
A well-designed responsive header ensures that your travel blog looks
professional and user-friendly, irrespective of the device. While
Elementor provides intuitive tools for this, regular testing and tweaking
are key. Remember, the goal is to offer an optimal user experience
without compromising on the design aesthetic. As you continue with
the travel blog project, always consider the responsiveness of each
element you design.
In the next chapter, we'll dive into designing a responsive footer to
complement our header, ensuring our website's bookends are as
polished as the content they encapsulate.
Designing the Responsive Footer
- Elementor Free Plugin: Available from the WordPress plugins
repository or [Elementor's official site]( https://elementor.com/ ). It's the
primary tool you'll be using to build the responsive footer.
- Travel Blog Assets Package: This is a hypothetical set of images,
icons, and branding elements relevant to a travel blog. You can
source royalty-free images from websites like [Unsplash](
https://unsplash.com/ ) or [Pexels]( https://www.pexels.com/ ). Make
sure to choose images that align with your travel blog's theme.
- Desktop, Tablet, and Mobile Devices: For testing responsiveness.
Ensure you test on actual devices in addition to using Elementor's
built-in responsiveness testing tools.
- Google Fonts: Available for free from [Google Fonts](
https://fonts.google.com/ ). A repository of web-friendly fonts that can
be used to customize your footer's typography to match your site's
branding.
Introduction:
Designing a responsive footer is crucial as it ensures that users on all
devices get a consistent experience. This chapter will guide you on
how to design a responsive footer for your travel blog using the
Elementor plugin.
1. Setting Up Your Footer:

To begin, navigate to your WordPress dashboard. Click on
`Templates` and then `Theme Builder`. Here, you can select “Footer”
to create a new footer template.
2. Choosing the Right Layout:
For a travel blog, it's recommended to use a 3 or 4-column layout to
showcase essential links, recent posts, a brief about section, and
social media links.
3. Adding Widgets:
Based on the chosen layout:
- First Column: Use the `Text Editor` widget to add a brief about
section for your blog.
- Second Column: Use the `Navigation Menu` widget to showcase
important links like destinations, tips, and resources.
- Third Column: Implement the `Recent Posts` widget to display the
latest blog entries.
- Fourth Column: Utilize the `Social Icons` widget to list all your social
media channels.
4. Styling the Footer:
Choose a color scheme that complements the overall theme of your
travel blog. Ensure your font choices are legible and consistent with
the rest of your site. Remember to make use of the Travel Blog Assets
Package for any branding elements.
5. Making It Responsive:
Elementor provides tools to help you ensure your design is
responsive:
- Responsive Mode: At the bottom of the Elementor interface, you'll
see icons representing desktop, tablet, and mobile devices. Clicking
on these will show you how the footer looks on each device.
- Column Stacking: On smaller screens, columns will naturally stack
on top of each other. Ensure the stacking order makes sense for
mobile users. Adjust this by right-clicking the column > Advanced >
Responsive > Reverse Columns (for mobile or tablet).
- Responsive Visibility: Some footer elements might not be essential
for mobile users. You can choose to hide specific widgets or columns
on certain devices by right-clicking > Advanced > Responsive >
Visibility Options.
- Typography & Spacing: Adjust font sizes and spacing for mobile and
tablet views to ensure legibility and proper spacing.
6. Testing Your Responsive Footer:
After designing, preview your footer on various devices. Adjust any
elements as necessary to ensure they display correctly and provide a
seamless user experience.
7. Save and Publish:
Once satisfied, click on the green `Publish` button on the bottom.
Elementor will then ask where you want to display this footer. Choose
Èntire Site` to ensure the footer displays on all pages.
Conclusion:
A responsive footer not only provides essential information and
navigation options but also ensures that users on all devices have a
consistent and positive experience on your travel blog. With
Elementor, designing such a footer becomes a hassle-free task, even
for those without any coding experience.
Making the Home Page Responsive

Assets and Resources Needed for this Chapter:
- Elementor Page Builder (Free Version) - (Available in the WordPress
plugin repository. Simply go to your WordPress dashboard, click on
'Plugins', then 'Add New', and search for 'Elementor'.)
- A Travel Blog Home Page built using Elementor (You should have
this from previous chapters).
- Web browser with Developer Tools (like Google Chrome or Firefox) -
(To inspect and emulate different device screens).
- A range of devices or screen sizes for testing, if available (phones,
tablets, desktops).
Introduction:
Creating a website that looks great on a desktop is just one part of
modern web design. With the majority of internet users accessing
websites via mobile devices, ensuring your travel blog homepage is
responsive is not just recommended, it's imperative. In this chapter,
we'll dive into making your Elementor-built travel blog homepage
responsive across devices.
1. Understanding Responsiveness:
Before diving in, let's understand what "responsive" means. A
responsive website automatically adjusts and fits itself depending on
the screen size and orientation of the device on which it's viewed. This
ensures a consistent and user-friendly experience across all devices.
2. Elementor's Responsive Mode:

Elementor comes with a built-in responsive mode that allows you to
edit and preview your site as it would appear on desktop, tablet, and
mobile.
- To access it, open your homepage in the Elementor editor.
- At the bottom of the editor panel, you'll see three icons representing
desktop, tablet, and mobile. Click on these to switch between the
modes.
3. Adjusting Column & Widget Stacking on Mobile:

In mobile view, columns usually stack vertically to use space
efficiently. Here's how to adjust it:
- Select the column or widget.
- Go to 'Advanced' > 'Responsive'.
- Toggle 'Reverse Columns' (for tablet/mobile) if you need to change
the order in which they stack.
4. Responsive Font Sizes:

Your desktop font size might not look as good on a smaller device.
Adjust this:
- Click on the text widget.
- Go to 'Style' > 'Typography'.
- Adjust the font size for tablet and mobile views.
5. Adjusting Image Sizes & Position:

Images are crucial for a travel blog, but they might appear too large or
misaligned on mobile.
- Select the image widget.
- Under 'Style', adjust the 'Width' and 'Height'.
- For positioning, go to 'Advanced' > 'Positioning' and adjust the width
or choose custom positioning.
6. Hide or Show Widgets Based on Device:

Sometimes, certain elements (like a large banner or specific
animations) might not make sense on a mobile device. Elementor
allows you to hide them:
- Select the widget you want to hide.
- Go to 'Advanced' > 'Responsive'.
- Toggle the "Hide On Desktop/Mobile/Tablet" options as needed.
7. Adjusting Spacing and Padding:

Space that looks good on a desktop might seem excessive on mobile.
- Click on the section/column/widget.
- Go to 'Advanced' and adjust the 'Margin' and 'Padding' settings for
tablet and mobile.
8. Testing Responsiveness:
Once you've made adjustments:
- Use Elementor's responsive mode to preview changes.
- Use your browser's developer tools to emulate different devices and
screen sizes.
- If possible, test on actual devices for a real-world view.
9. Addressing Menu & Navigation:

Your primary desktop menu might be too extensive for mobile:
- Consider using a "hamburger" style menu for mobile.
- Ensure clickable elements are spaced adequately for touch
navigation.
10. Final Thoughts:

Responsiveness isn't a one-time task. As you add new elements to
your homepage or as browsing devices evolve, you'll need to revisit
and ensure everything still aligns perfectly.
Important Tip: Always design with a mobile-first mindset. Given the

prevalence of mobile browsing, it's often easier to start with mobile
design and then adjust for larger screens rather than the other way
around.
With your Elementor travel blog homepage now responsive, you're

ensuring a smooth browsing experience for all your readers,
regardless of the device they're using. This not only benefits user
experience but can also have positive implications for search engine
rankings.
Making Other Pages Responsive

- Elementor Plugin (Acquire: Install from WordPress Plugins
Repository)
- Travel Blog Demo Content (Acquire: Use placeholder content or
integrate content from royalty-free sources like Pixaby or ChatGpt for
dummy text)
- Mobile and Tablet Devices (or Emulators) for Testing
- Web Browsers: Google Chrome, Mozilla Firefox, Safari, etc.
(Acquire: Install from official websites or app stores)
- Purpose: To visually inspect the design on different devices and
browsers.
Introduction
In our last chapter, we delved into the intricacies of making the home
page responsive. With an ever-growing number of devices with
varying screen sizes and resolutions, ensuring that your website looks
impeccable on all devices is paramount. In this chapter, we’ll embark
on the journey of making the rest of our travel blog pages responsive
using Elementor.
1. The Concept of Responsive Design

Responsive design is a practice where your webpage adjusts and
rearranges its content based on the device it's being viewed on. The
ultimate goal is to ensure a seamless user experience, whether
someone is viewing your blog on a 27-inch desktop monitor or a 5-
inch smartphone screen.
2. Activating Responsive Mode in Elementor

Before you begin:
- Ensure you've opened the page you want to edit in Elementor.
Steps:
1. Click on the responsive mode icon located at the bottom panel of
the Elementor editor.
2. Here, you'll see options for desktop, tablet, and mobile. Choose the
device you'd like to preview your design on.
3. Adjusting Column & Widget Settings

Now, let's address individual columns and widgets.
1. Columns: Click on the column handle > Advanced > Responsive.
You can choose to reverse columns for specific devices or hide a
column altogether on certain devices.
2. Widgets: Click on the widget handle > Advanced > Responsive.
Like with columns, you can hide specific widgets on particular devices.
4. Fine-Tuning for Tablets

With the tablet mode active:
1. Adjust Text Sizes: Some headers might look too big on tablets.
Adjust the typography settings to make them fit better.
2. Image Scaling: Ensure images scale correctly and aren’t too large
or pixelated.
3. Button Sizes: Buttons might need a slight size adjustment for
tablets to maintain clickability and aesthetics.
5. Mobile Optimization
Switch to mobile mode:
1. Stacking Columns: On mobile, columns typically stack vertically.
Ensure content flows logically.
2. Navigation Menu: Adjust the size and layout. It’s essential the
navigation remains user-friendly on smaller devices.
3. Text & Headings: Adjust sizes to ensure readability without too
much zooming.
4. Image Proportions: Ensure images are centered and not cut off.
Adjust the sizes if necessary.
5. Form Fields: Make sure form fields fit the screen width and are
easily clickable.
6. Testing and Tweaks

After making the necessary adjustments:
1. Preview: Use Elementor's built-in device previews to see your
changes.
2. Browser Testing: Different browsers might render your site slightly
differently. Always test on Chrome, Firefox, Safari, and any other
browsers your audience uses.
3. Real-Device Testing: If possible, test on actual devices. Emulators
provide a close approximation, but real-device testing ensures
perfection.
7. Handling Elementor Pro Widgets

If you’ve integrated any advanced widgets available in the Pro version,
remember:
1. Slides & Carousels: Ensure they swipe correctly on touch devices.
2. Popup Modals: Ensure they scale down appropriately for mobile
devices and are easily dismissible.
Conclusion
Responsive design, although seemingly intricate, becomes intuitive
with tools like Elementor. By following the steps outlined in this
chapter, you’ll ensure that every page on your travel blog is not just
beautiful but also functional across all devices. In our next chapter, we
will delve deeper into advanced features of the Elementor Free
version.
Remember: A seamless user experience can be the difference
between a one-time visitor and a loyal reader. Always prioritize your
audience’s viewing experience!
Elementor Free Version Review

- Elementor Free Plugin: Available for download from the WordPress
plugins repository (Purpose: Primary tool for building web pages).
- WordPress website: To see the live changes made using the
Elementor Free version.
- Internet Browser: Google Chrome or Mozilla Firefox (for optimal
performance and compatibility).
Introduction:
Having traversed the wonders of Elementor through the process of
building our travel blog, it's crucial to stop and evaluate what the free
version of Elementor brings to the table. This chapter will provide an
in-depth review of the free version of Elementor, assessing its
features, benefits, limitations, and comparing it briefly with its Pro
counterpart.
1. User-Friendly Interface:
One of the standout features of Elementor's free version is its intuitive
and user-friendly interface. With a simple drag-and-drop functionality,
even those new to web design can quickly grasp the basics and start
building attractive web pages.
2. Widgets:
Elementor Free offers a generous assortment of widgets that cater to
the basic needs of any website builder. These include:
- Text Editor: Easily input and format text.
- Image: Add and style images.
- Video: Embed videos from platforms like YouTube and Vimeo.
- Button: Add interactive buttons for calls to action.
- Divider: Neatly separate different sections of your content.
- Spacer: Adjust the space between elements for aesthetic appeal.
... and many more. While the free version provides an ample
selection, there's a broader array of specialized widgets available in
the Pro version.
3. Responsiveness:
Elementor’s visual design capabilities allow users to create mobile-
responsive pages without requiring any coding knowledge. With visual
controls, you can optimize how your design appears on various screen
sizes.
4. Template Library:
Elementor Free offers a selection of professionally designed
templates. While limited compared to the Pro version, these templates
serve as an excellent starting point for various page designs.
5. Customization:
The power to customize every little detail is where Elementor shines.
From column widths, margins, paddings to color schemes, and
typography - you have control over each element.
6. History Feature:
Mistakes happen, but Elementor has your back. With its history
feature, you can quickly revert to a previous design version, making
the design process far more forgiving.
7. Limitations:
While Elementor Free is robust and versatile, it comes with limitations:
- Restricted set of widgets compared to Pro.
- No access to theme builder functionality.
- Limited template kits.
- No WooCommerce builder for online stores.
8. Compatibility:
Elementor Free is designed to be compatible with most WordPress
themes. However, some specialized themes might not fully support
every feature. It’s advisable to check compatibility before diving deep
into designing.
9. Support:
Elementor offers a robust knowledge base, tutorials, and community
support for free users. While dedicated support is reserved for Pro
users, the community forums and online resources are usually enough
to resolve common issues.
10. Performance:
Elementor, despite being a powerful builder, is optimized for speed.
The free version, when used wisely, does not noticeably slow down
your website. It's always good to keep an eye on page load times as
you design, but typically, Elementor pages perform well.
11. Comparison with Elementor Pro:

While the free version is packed with features, Elementor Pro offers
advanced capabilities:
- More widgets and templates.
- Theme builder to design headers, footers, and more.
- WooCommerce builder for creating online stores.
- Dynamic content and advanced popup builder.
While the free version serves the needs of many, serious web
designers and businesses might consider upgrading for these
advanced features.
Conclusion:
Elementor's free version is a testament to the plugin’s quality and the
developer’s commitment to providing a top-tier product for the
community. It's an excellent tool for beginners and intermediate users
alike, offering a plethora of features to design attractive, functional
websites. As we proceed, we will dive deeper into the Pro version to
uncover its potential. But for now, rest assured that the free version of
Elementor is a formidable tool in the world of web design.
Connecting your Site to Elementor
Pro
- Elementor Pro License: Acquire by purchasing from the Elementor
official website ( www.elementor.com ). This will allow you to use all
the advanced features that are not available in the free version.
- Elementor Free Plugin: Before activating Elementor Pro, you need
the free version installed on your site. You can find this on the
WordPress plugin repository or from your WordPress dashboard.
- WordPress Website: You should already have this set up from
previous chapters.
Introduction
Having established a foundational knowledge of Elementor's free
version, it's time to elevate our travel blog by leveraging the more
powerful and flexible features available with Elementor Pro. In this
chapter, we'll guide you step-by-step through the process of
connecting your WordPress site to Elementor Pro, enabling the
advanced design and functionality tools this premium tool provides.
1. Why Upgrade to Elementor Pro?

Before diving into the connection process, let's briefly understand the
advantages of using Elementor Pro:
- Theme Builder: Allows you to design your entire WordPress site
without any restrictions, including headers, footers, and other dynamic
content.
- Pro Widgets & Templates: Get access to a library of premium
widgets and professionally designed templates to enhance your site.
- Popup Builder: Create attractive popups for email signups, offers,
and more.
- Advanced Form Builder: Design forms that integrate with popular
marketing tools.
The Pro version essentially enables you to transform your website into
a professional-grade platform without requiring any coding.
2. Purchase and Download Elementor Pro

Start by visiting the Elementor website. Browse through the pricing
options and select the package that best suits your needs. After
purchasing, you will receive a ZIP file of the Elementor Pro plugin and
a license key.
3. Installation
Ensure the free version of Elementor is already activated on your
website.
1. On your WordPress dashboard, navigate to Plugins > Add New.
2. Click Upload Plugin and select the ZIP file you received.
3. Click Install Now and activate the plugin once the installation is
complete.
4. License Activation
1. After activating the plugin, you'll notice an Elementor menu item on
your dashboard. Click on Elementor > License.
2. Enter the license key you received upon your purchase.
3. Click Activate and wait for the confirmation message.
5. Elementor Pro Overview

Once activated, you'll find new widgets available in your Elementor
editor. Explore these widgets; you'll recognize they're labeled as
"PRO". This distinction helps differentiate between free and premium
tools.
6. Quick Integration Check

Before diving deep into advanced functionalities, let's quickly ensure
that the Pro features integrate seamlessly into our travel blog project:
1. Headers & Footers: Navigate to an existing page or post. Try
editing the header or footer using the theme builder function.
2. Templates: Check the template library and preview a few Pro
templates. See if they align with your travel blog's aesthetic.
3. Advanced Widgets: Drag and drop a few Pro widgets, such as
slides, price tables, or animated headlines, onto your page to see
them in action.
7. Troubleshooting Tips
Sometimes, even after activating Elementor Pro, you might face
issues like not seeing Pro widgets or getting an invalid license
notification. Here are some solutions:
- Clear Cache: Sometimes your browser or caching plugins can show
a cached version of your dashboard. Clear your browser cache or
disable caching plugins temporarily.
- Deactivate & Reactivate: Deactivate the Elementor Pro plugin and
reactivate it. This often resolves minor glitches.
- License Issues: Ensure the license key is correctly entered. If you
face issues, contact Elementor support with your purchase details.
Conclusion
Connecting your WordPress site to Elementor Pro is a straightforward
process. This chapter equipped you with the knowledge to not only
connect but also to make sure your website takes full advantage of the
Pro features. As we proceed with building our travel blog, you'll find
these Pro functionalities invaluable, enabling a more professional,
cohesive, and user-friendly design and experience.
Recreating the Header with

Elementor Pro
- Elementor Pro Plugin (Acquired by purchasing the pro version from
the official Elementor website)
- Travel-themed logo (You can create one using tools like Canva or
hire a designer from platforms like Fiverr or Upwork)
- High-resolution travel-themed background image (Sources:
Unsplash, Pexels, or Shutterstock)
- Custom icons for the navigation menu (Optional. Can be sourced
from websites like Font Awesome or Iconfinder)
Introduction
Headers are vital components of any website as they are consistently
visible to users, serving both aesthetic and functional purposes.
Elementor Pro provides enhanced capabilities over its free counterpart
for creating and customizing headers. In this chapter, we will delve
deep into how you can recreate and enrich the header for our travel
blog using Elementor Pro.
1. Getting Started:
Before we begin, ensure you have Elementor Pro installed and
activated on your WordPress site. This can be done by purchasing the
pro version from the Elementor website, downloading the plugin, and
then installing it on your WordPress dashboard under ‘Plugins > Add
New’.
2. Launching Elementor Pro Header Builder:

Navigate to your WordPress dashboard and then:
- Go to Templates > Theme Builder.
- Click on ‘Header’ and then on ‘Add New Header’.
3. Designing the Header Layout:

Here's a step-by-step guide:
- Background Setting: Begin by setting the header's background. Click
on the header section, go to 'Style', and select 'Background Type'.
Choose a travel-themed background image that resonates with the
essence of your blog.
- Adding the Logo: Drag and drop the ‘Image’ widget from the left
panel to your header area. Upload your travel-themed logo. Adjust its
size and position as per your preference.
- Creating the Navigation Menu: Use the 'Nav Menu' widget
specifically available in Elementor Pro. This widget offers advanced
styling options, allowing you to customize colors, typography, spacing,
and even add hover animations. For our travel blog, use custom icons
next to menu items like 'Destinations', 'Tips', or 'Stories' to make them
more engaging.
4. Making It Sticky:
A sticky header remains fixed at the top as users scroll down. To
activate this:
- Click on the header section.
- Go to the 'Advanced' tab.
- Scroll down to the 'Scrolling Effect' section.
- Turn on ‘Sticky’ and choose 'Top' so it sticks to the top during
scrolling.
Ensure your header looks great on all devices:
- Click on the bottom-left responsive mode icon in Elementor.
- Switch between desktop, tablet, and mobile views to adjust the
header design accordingly. You might want to adjust logo size, menu
item spacing, or hide certain elements on mobile for a cleaner look.
6. Adding Other Interactive Elements (Optional):

- Search Icon: Consider adding a 'Search' icon in the header for
readers to easily search blog topics. Use the 'Search Form' widget,
style it to your liking, and position it at the desired location in the
header.
- Social Media Icons: Incorporate icons that link to your blog's social
media profiles. Drag the 'Social Icons' widget, choose the platforms,
and input the links.

Always preview your design before publishing. Click on the ‘Eye’ icon
to see how the header looks. Make any final tweaks if necessary.
Once satisfied, click on ‘Publish’.
Remember to set conditions for where you want this header to be
displayed. For a consistent look, you might want it displayed across all
pages of your travel blog.
Conclusion
Recreating a header using Elementor Pro not only offers aesthetic
upgrades but also provides enhanced functionalities that enhance
user experience. As we progress with our travel blog project, you'll see
how such enhancements play a crucial role in attracting and retaining
readers. In the next chapter, we will explore footer creation using
Elementor Pro, ensuring that both the top and bottom of your pages
are equally captivating!
Recreating the Footer with

Elementor Pro
1. Elementor Pro Plugin: (Acquire at [Elementor's Official Website](
https://elementor.com/pro/ )) - The premium version of the Elementor
plugin that offers advanced widgets and features.
2. Images & Icons: (Source from websites like [Unsplash](
https://unsplash.com/ ) for free high-quality images and
[FontAwesome]( https://fontawesome.com/ ) for icons) - To visually
enhance the footer.
3. Contact Form Plugin: (Consider using [WPForms](
https://wpforms.com/ ) or [Contact Form 7]( https://contactform7.com/
)) - To integrate a contact form into the footer.
Introduction
The footer of a website plays an essential role, often housing
important links, contact information, social media icons, and
sometimes even a subscription form. With Elementor Pro, you're
equipped with a range of powerful tools to design and implement a
compelling footer that aligns with the overall theme of your travel blog.
Step 1: Accessing Elementor Pro Footer Builder

1. From your WordPress dashboard, hover over "Templates" and then
select "Theme Builder."
2. Within the "Theme Builder," click on the "Footer" tab, then click
"Add New Footer."
Step 2: Designing the Basic Structure

1. Divide the Footer Layout: Typically, footers have multiple columns
for different types of content. You might opt for a 3 or 4 column layout.
Drag the "Columns" widget onto your canvas and choose the desired
layout.
2. Background: Choose a background color or image that
complements the design of your travel blog. Go to the "Style" tab and
under "Background," pick your choice.
Step 3: Adding Content to Columns

1. Column 1 - Logo and Brief About:
- Drag the "Image" widget and upload your blog's logo.
- Below it, add a "Text Editor" widget and provide a brief
description of your blog.
2. Column 2 - Quick Links:
- Add a "Heading" widget and title it "Quick Links."
- Use the "Icon List" widget to list important links such as Home,
About, Blog, Contact, etc.
3. Column 3 - Latest Posts:
- Add a "Heading" widget and label it "Latest Posts."
- Use the "Posts" widget, available in Elementor Pro, to showcase
the latest articles from your blog.
4. Column 4 - Stay Connected:
- Introduce a "Heading" widget and label it "Stay Connected."
- Incorporate the "Form" widget below the heading to create a
quick subscription form, allowing visitors to sign up for newsletters or
updates.
- Beneath the form, use the "Social Icons" widget to add links to
your social media pages.
Step 4: Styling the Footer

1. Typography: Ensure the fonts and font sizes are consistent with the
rest of your website.
2. Colors: Utilize a color palette that complements the overall design
of your travel blog.
3. Hover Effects: Add subtle hover effects to your links to enhance
interactivity.
Step 5: Adding Global Features

1. Copyright Notice: At the bottom, use the "Text Editor" widget to add
a copyright notice.
2. Back to Top Button: Integrate a button that, when clicked, takes the
visitor back to the top of the page. This can be particularly useful for
long blog posts.
Step 6: Make the Footer Responsive
1. Switch to mobile view (icon at the bottom left) to ensure your footer
looks great on mobile devices.
2. Adjust any widgets, fonts, or columns that may seem out of place.
Step 7: Save and Publish

1. Once satisfied with your footer design, click on the green "Publish"
button.
2. You'll be prompted to set conditions for where the footer should
appear. Select "Entire Site" to make it visible on all pages and posts.
Conclusion
Recreating your footer with Elementor Pro not only provides a
professional touch to your travel blog but also enhances user
experience. Remember, the footer is more than just a design
afterthought. It's an integral part of website navigation, offering quick
access to important sections and promoting user engagement.
Recreating the Blog Page with

Elementor Pro
- Elementor Pro Plugin (Acquire from Elementor's official website by
purchasing the Pro version. Use: The paid version of Elementor page
builder that provides additional widgets and functionality.)
- Travel Blog Images (Acquire from stock photo sites such as
Unsplash.com or Pexels.com. Use: Visual representation for each
blog post.)
- Demo Blog Content (You can either write your own sample blog
posts or use placeholder text from sites like ChatGpt. Use: Content for
our blog page.)
Introduction
In the previous chapters, we dived deep into the functionalities of the
free version of Elementor. Now, let's step up our game and explore
the advanced capabilities of Elementor Pro. One of the primary
advantages of using the Pro version is the ability to design dynamic
content. In this chapter, we'll recreate our blog page using Elementor
Pro, providing a more robust and dynamic presentation for our travel
blog entries.
1. Activating Elementor Pro

Before we start, ensure that you have Elementor Pro installed and
activated on your WordPress website.
2. Creating a New Blog Page

- Navigate to your WordPress dashboard.
- Go to Pages > Add New.
- Title the page "Blog."
3. Setting Up the Elementor Canvas
- Click on "Edit with Elementor."
- On the Elementor editor screen, click on the settings icon on the
bottom-left corner.
- For 'Page Layout,' choose 'Elementor Canvas' to start with a blank
slate.
4. Using the Posts Widget

The power of Elementor Pro comes to the forefront with its dynamic
widgets. For our blog page:
- Search for the “Posts” widget in the Elementor sidebar.
- Drag and drop it into the main canvas area.
5. Customizing the Blog Layout

With the “Posts” widget in place, you'll notice several customization
options in the Elementor sidebar:
- Layout: Choose between grid, masonry, and list. For our travel blog,
a grid layout might be visually appealing.
- Columns: Decide how many blog posts to show per row. Three is a
good number to start with.
- Image Size: Adjust the image size to fit perfectly with your design.
'Medium Large' typically works well for a grid layout.
6. Dynamic Content
Elementor Pro's real power is its ability to display dynamic content.
- For each post, click on the title.
- You'll see a dynamic icon next to the content source. Click on it.
- Choose "Post Title" for the title and "Post Excerpt" for the post
summary.
7. Styling Our Blog Posts
Here's where you get to ensure your blog looks unique:
- Box Shadow: Give each blog post a slight shadow to make them
pop.
- Image Overlay: Choose a subtle gradient or color overlay for images,
which will unify the look of diverse travel photos.
- Meta Data: Decide what meta data (like date, author) you want to
display under each post.
8. Pagination
Don't forget about navigation for your blog:
- Scroll to the 'Pagination' section.
- Choose 'Numbers' for clear navigation between blog pages.
- Style accordingly to match your site's design.
9. Preview and Publish

Always preview your page to see how it looks in real-time:
- Click on the "Eye" icon on the bottom-left of the screen.
- If satisfied, return to the Elementor editor and click "Publish."
Conclusion
With Elementor Pro, recreating and enhancing our blog page has not
only become dynamic but also visually stunning. It provides us with
flexibility, diverse style options, and the ability to integrate dynamic
content seamlessly. As we continue our journey with Elementor Pro,
you'll find that the possibilities are endless.
In the upcoming chapters, we will further explore the dynamic
capabilities of Elementor Pro, ensuring that every aspect of our travel
blog stands out. Remember, a captivating and interactive blog page
will keep your readers engaged and coming back for more!
Building the Single Post Template

1. Elementor Free Version: This can be downloaded directly from the
WordPress plugin repository. (Purpose: To provide the base builder
functionalities.)
2. Elementor Pro: Upgrade from the free version. Available from the
Elementor official website. (Purpose: Provides extended widgets and
functionalities.)
3. Sample Blog Post Content: This is a hypothetical content, including
a post title, some body text, and accompanying images. (Purpose: To
use as a demonstration for building the template.)
4. Royalty-Free Images: Sites like Unsplash, Pexels, and Pixabay
offer free high-quality images. (Purpose: Visual aids and examples for
our blog post.)
Introduction:
The single post template is a crucial aspect of any blog. It dictates the
layout and design for every individual blog post on your website. By
creating an attractive and functional template, you ensure consistency
in the presentation of all your blog posts, making your site look
professional and user-friendly.
Step-by-Step Guide to Building the Single Post Template:

1. Accessing the Elementor Theme Builder:
Begin by logging into your WordPress dashboard. Navigate to
Elementor > Theme Builder. Here, you'll find templates for different
parts of your site. Click on the “Single” tab and then “Add New” to
create a new template for single posts.
2. Choosing a Template Type:
A pop-up will appear asking you to select a template type. Choose
"Post" from the list. Name your template (e.g., "Travel Blog Post
Template") and then click “Create Template.”
3. Basic Structure Set-up:
Just like creating a page with Elementor, you'll begin with a basic
structure. You might choose a two-column layout with a 70-30 split.
The larger section will be for your blog content, and the smaller one
for the sidebar.
4. Adding Post Title:
Drag the "Post Title" widget from the Elementor sidebar to the top of
your main column. This will automatically display the title of any post
that uses this template.
5. Incorporating Featured Image:
Below the title, drag in the "Featured Image" widget. Adjust the size
and alignment as desired. Remember, a well-placed image can
significantly improve reader engagement.
6. Inserting Blog Post Content:
Drag the "Post Content" widget below the featured image. This will
automatically pull in the body content of your blog post.
7. Adding Meta Data:
Above the post title or below it, depending on your preference, add
the "Post Info" widget. This widget displays meta data like the post
author, date, and comments count. Customize the look and decide
which meta data you want to display.
8. Creating the Sidebar:
In the smaller column (your sidebar), you can add various widgets
like "Recent Posts," "Categories," and even custom widgets if you
have any. Remember, the sidebar is an excellent place for call-to-
actions, other related articles, or an email signup form.
9. Styling the Template:
Click on each widget to style it. This includes adjusting typography,
colors, margins, and paddings to ensure a cohesive look and feel. For
example, maybe you want the post titles to be a bold blue, and the
body text a soft grey. Ensure that the style matches the general
aesthetic of your travel blog.
10. Setting Display Conditions:
After designing the template, click "Publish." You'll be asked where
you want your template to be used. Set the condition to “All Posts” so
that every blog post you publish uses this template.
11. Testing the Template:
Create or edit an existing post, view it, and you should see it
displayed with the new template. Adjust any elements if they don't look
right.
Conclusion:
Building a single post template with Elementor is not only
straightforward but also empowers you to have a consistent and
beautiful design for all your blog posts. Always remember to test your
template on various devices to ensure it's responsive and looks great
everywhere. As you continue to post, appreciate the efficiency and
uniformity this template brings to your travel blog.
(Note: Elementor and its features upgrade over time, so always

ensure you're using the latest version and checking the Elementor
documentation or community forums for any updated methods or
practices.)
Building the Contact Page with
Elementor Pro
- Elementor Pro Plugin (To be purchased from the official Elementor
website)
- Contact Form Widget (Available within Elementor Pro)
- Google Maps Widget (Available within Elementor Pro)
- Site Images (You can source relevant images from stock websites
like Unsplash, Pexels, or Pixabay)
- Icon Packs (Optional; can be sourced from free sites like
FontAwesome or Iconfinder)
- Your website's logo (You should have this already. If not, consider
using a free logo maker like Canva)
Introduction:
Contact pages are more than just a form. They're a bridge between
you and your visitors, potential clients, and followers. An engaging and
functional contact page increases trust and encourages visitors to
reach out. In this chapter, we will walk through creating a dynamic and
inviting contact page for your travel blog using Elementor Pro. Let's
begin!
Step 1: Setting up the Page

1. Navigate to your WordPress dashboard, go to `Pages > Add New`.
2. Title your page "Contact Us" or any other appropriate title.
3. On the right side, under ‘Page Attributes’, select ‘Elementor Full
Width’ to ensure you get a full canvas to work with.
Step 2: Adding the Header

Since we have already built a global header in previous chapters,
simply make sure the header is applied to this page.
Step 3: Introduction to Your Contact Page

1. Drag a 'Text Editor' widget onto the canvas.
2. Write a brief introduction, e.g., "We love hearing from our readers! If
you have any travel tips, inquiries, or just want to share a story, get in
touch below."
Step 4: Setting up the Contact Form

1. Search for the 'Form' widget and drag it to where you want your
contact form.
2. Elementor Pro's form widget will display a simple form with ‘Name’,
‘Email’, and ‘Message’ fields by default.
3. Adjust the form fields as required. For a travel blog, you might want
to include fields like 'Destination Recommendation' or 'Travel Inquiry
Type'.
4. Set the Àction After Submit` to ‘Email’ and configure the email
settings so that you'll receive the contact requests to your preferred
email.
Tip: Remember to test your form to ensure it works correctly.
Step 5: Adding Google Maps

This is especially useful if you have a physical office or location:
1. Drag the 'Google Maps' widget below the contact form.
2. Enter your location in the widget settings.
3. Adjust the zoom level and height to fit your design.
Step 6: Additional Contact Information

1. Drag a new section below the Google Maps.
2. Insert the 'Icon List' widget.
3. Populate it with items such as:
- Phone number (with a phone icon)
- Email address (with an email icon)
- Physical address (with a location pin icon)
Tip: Ensure this information is consistent with other mentions on your
website.
Step 7: Styling Your Contact Page

Make sure the design aligns with the overall aesthetics of your travel
blog:
1. Use consistent fonts and colors.
2. For a travel blog, consider using background images that showcase
popular travel destinations or your own travel photos.
3. Hover effects: Add subtle hover effects to the submit button in the
form for better interactivity.
Step 8: Adding the Footer

Just like the header, if you've built a global footer, make sure it's
applied to this page.
Step 9: Review and Publish

1. Click on the ‘Eye’ icon to preview the page.
2. Make sure everything looks good, is aligned, and functional.
3. Once satisfied, hit ‘Publish’.
Conclusion:
And there you have it! A dynamic contact page for your travel blog
using Elementor Pro. Remember, the key to an effective contact page
is to make it inviting and user-friendly. Always encourage your readers
to reach out and ensure you've set things up to receive their
messages.
In the next chapter, we will delve into how to create engaging popups
to capture visitor attention and enhance user interaction. Stay tuned!
How to Create Popups

- Elementor Pro Plugin: To create popups, you need the Pro version of
Elementor. (You can acquire it from the Elementor official website).
- Images: Relevant images or graphics for the popup. (You can get
royalty-free images from sites like Unsplash or Pexels).
- Call-to-action text: This is the message you want to convey with your
popup.
- Button Designs: If you want a specialized button style for your
popup. (Can be created within Elementor or sourced from platforms
like Freepik).
Purpose of Popups:
Popups are versatile elements used for various purposes such as
capturing email addresses, announcing promotions, or guiding users
to another page. For our travel blog, we might use them to encourage
newsletter signups or to highlight special travel deals.
1. Introduction to Popups in Elementor:

Elementor Pro's popup builder allows you to create and integrate
stylish and responsive popups on your WordPress site without
requiring any additional plugins. These popups can be displayed on
different parts of your website based on specific triggers and
conditions you set.
2. Accessing the Popup Builder:

Navigate to your WordPress dashboard. On the left sidebar, hover
over "Templates" and click on "Popups". Click on the "Add New
Popup" button.
3. Designing Your Popup:

After naming your popup, you'll be taken to the Elementor editor,
which should be familiar to you by now.
- a. Choose a Template: Elementor provides several popup design
templates. Choose one that fits the theme of your travel blog or start
from scratch.
- b. Designing from Scratch: Drag and drop the widgets you want. For
a travel blog, consider adding an image widget showcasing an exotic
location, a heading widget for your main message, and a form widget
for users to input their email.
4. Popup Settings:
- a. Layout Settings: Adjust the width, height, and alignment of your
popup. For mobile responsiveness, ensure your popup looks good on
all device types.
- b. Positioning: Position your popup to appear at the center, top,
bottom, or any corner of the screen.
- c. Overlay: This darkens the content behind the popup, ensuring
focus on the popup content. Toggle this on/off based on preference.
- d. Close Button: Customize the design and position of the 'X' button
that closes the popup.
5. Setting Up Triggers:
Determine what causes the popup to appear.
- a. On Click: Show the popup when a specific button or link is clicked.
- b. On Page Load: Show the popup after the page has been loaded
for a certain number of seconds.
- c. On Scroll: Trigger the popup when a user scrolls to a specific point
on the page.
- d. On Exit Intent: Display the popup when the user is about to leave
your site.
6. Adding Conditions:
Decide where on your site the popup will appear.
- For a travel blog, you might want the popup to appear on the
homepage, specific posts about travel deals, or on all pages except
the contact page.
7. Publishing & Integrating the Popup:

Once satisfied with your design, click "Publish". You can then integrate
the popup using a button or link on your travel blog. For example, a
button that says "Special Travel Deals!" could trigger the popup when
clicked.
8. Tracking & Analyzing Popup Performance:

Monitor how your popup performs. How many visitors see it? How
many engage or sign up? This information can guide tweaks and
improvements.
Conclusion:
Popups, when used effectively, can be a powerful tool for driving user
engagement on your travel blog. With Elementor Pro, you have a
robust set of tools at your disposal to design, customize, and optimize
popups for the best user experience. Remember, always keep your
audience in mind and ensure your popups add value to their browsing
experience.
Working with Template Kits and

Landing Pages
1. Elementor Plugin (Free Version): You can install this directly from
the WordPress Plugin repository by navigating to Plugins > Add New,
then searching for “Elementor”.
Use/Purpose: This is the core page builder we will use for the
chapter.
2. Elementor Template Kits: Available within the Elementor plugin and
also on the Elementor marketplace on their official website. Some kits
are free while others come at a cost.
Use/Purpose: Template kits are collections of pre-designed
templates for specific niches or purposes, which can speed up the
design process.
3. WordPress Installation: Ensure you have a live WordPress site or a
local installation.
Use/Purpose: This is where we will be designing and implementing
our templates and landing pages.
Introduction
One of the remarkable benefits of Elementor is its ability to use
template kits and landing pages. These kits are collections of pre-
designed pages that can be imported and customized to fit your
specific needs. Given that our project revolves around building a travel
blog, we'll explore how to integrate travel-specific templates and
design enticing landing pages for our audience.
Step 1: Accessing Elementor’s Template Library

1. Open the WordPress dashboard and navigate to the page or post
where you want to add a template.
2. Click ‘Edit with Elementor’.
3. On the Elementor editor panel, you'll see a folder icon next to the
green ‘UPDATE’ button. Click on this icon to access the template
library.
Step 2: Exploring the Template Kits

1. Once inside the library, you'll see different categories of templates.
2. Click on ‘Kits’ to view the complete template kits available. For our
travel blog, we can look for kits related to travel, blogging, or even
photography.
3. Hover over the desired template and click ‘Insert’ to load the
template into your page.
Step 3: Customizing the Template
1. Now that you have inserted the desired template, it's time to
customize.
2. Replace the demo content with your own. You can change images,
texts, links, and more.
3. Remember to make use of the Elementor design panel on the left
for detailed customization like colors, typography, spacing, and other
settings.
Step 4: Designing a Landing Page

Landing pages are crucial, especially when you're promoting specific
travel packages, giveaways, or newsletters.
1. Choosing a Template: Use the library to find a landing page design.
If you don't find a perfect fit, choose the closest match – we can
customize everything!
2. Header and Footer: Depending on your needs, you might want to
disable the header and footer for a landing page to keep the visitor's
focus. You can usually do this in the ‘Settings’ of Elementor.
3. Call to Action (CTA): Every landing page needs a CTA. Whether it’s
a button urging visitors to subscribe, book a trip, or read a blog post,
ensure it’s prominent.
4. Integration with Tools: If you're collecting emails or booking details,
ensure your form is integrated with tools like MailChimp, ConvertKit, or
your booking system.
Step 5: Mobile Responsiveness

With the increasing number of mobile users, ensure the template and
landing page look good on mobile devices.
1. Use the ‘Responsive Mode’ on Elementor’s bottom panel to switch
between desktop, tablet, and mobile views.
2. Adjust elements as needed for each view. For instance, you might
want to increase the text size or change the spacing for the mobile
view.
Step 6: Saving and Reusing Templates

After putting effort into customizing a template, save it!
1. Click on the green ‘UPDATE’ button.
2. Click on the arrow next to the ‘UPDATE’ button and choose ‘Save
as Template’.
3. Provide a name and save. This template will now be available in
your library for future use.
Conclusion
Elementor’s template kits and the ability to craft landing pages simplify
the website design process, especially for specific niches like travel
blogs. By leveraging these tools, not only will you speed up the design
process, but you'll also ensure a professional and consistent look
across your website. Remember to keep the user experience in mind,
ensuring that every page and template you choose resonates with
your target audience and the goals of your travel blog.
Elementor Pro Tips

1. Elementor Pro Subscription (Available at the official Elementor
website)
2. Official Elementor Pro Documentation (Available online at the
Elementor website. This is a comprehensive guide on all features
provided by Elementor Pro.)
3. A fully updated WordPress installation (Make sure your WordPress
version is compatible with the Elementor Pro version you're using.)
4. A high-quality travel-themed image pack (Can be acquired from
stock photo websites like Unsplash or Pixabay. This will be used to
enhance the aesthetics of our travel blog.)
Introduction:
Elementor Pro isn’t just a tool to drag and drop widgets; it’s a robust
design platform that can transform your design workflow. While we’ve
explored a lot of its features in the previous chapters, there are still
some hidden gems and advanced tips that can make your travel blog
stand out. Let’s dive into them.
1. Custom CSS in Elementor Pro:

One of the advantages of using Elementor Pro is the ability to add
custom CSS directly to a widget, section, or column. This allows for
even more customization.
How to Use:
- Select a widget, column, or section.
- Go to the Advanced Tab.
- Scroll down and you’ll see the “Custom CSS” box. Here, you can add
your own CSS.
This is particularly useful if you want a certain style for a specific
widget that isn’t available in the default options.
2. Motion Effects:
Add a touch of animation to make elements of your travel blog more
engaging. For instance, you could have a subtle zoom-in effect for
travel photos or fade-in effects for blog post entries.
How to Use:
- Click on the widget you want to animate.
- Go to the Advanced Tab > Motion Effects.
- Choose the entrance animation or exit animation you desire.
3. Embed Anywhere With Elementor Shortcodes:

You can embed Elementor templates anywhere on your site using
shortcodes. This is handy for reusing specific design elements or
layouts across multiple pages or posts on your travel blog.
How to Use:
- Save a section, widget, or an entire page as a template.
- Go to Templates > Saved Templates.
- Here, you’ll see a shortcode column. Copy this and paste it
anywhere on your site.
4. Role Manager:
If you have multiple contributors or editors for your travel blog, you can
control their access using the Role Manager feature.
How to Use:
- Go to Elementor > Role Manager.
- Here, you can define who can edit content, who can access the
Elementor editor, and more.
5. Dynamic Content:
With Elementor Pro, you can pull dynamic content from your
WordPress site. This is great for showcasing the latest posts, featured
trips, or popular travel destinations dynamically.
How to Use:
- Drag a widget that supports dynamic content.
- Click on the dynamic icon next to the content area.
- Choose the source of the content. This can be a recent post, meta
content, or any other dynamic source available.
6. Use the Navigator:

Especially when designing complex pages, the Navigator is a
lifesaver. It gives you a tree view of all the elements on the page,
making it easier to select and edit them.
How to Use:
- Right-click on any widget, column, or section.
- Choose ‘Navigator’.
- This will pop up a window showing you a structured view of your
page.
7. Template Library:
Elementor Pro provides a vast library of pre-made templates. These
can be imported and used as a starting point for your travel blog.
How to Use:
- Click on the folder icon in the Elementor Editor.
- Browse the library and insert the desired template.
Remember to customize it to match the theme and feel of your travel
blog!
8. Sticky Scroll:
Make crucial widgets or sections “sticky”, so they stay visible even
when users scroll down. For a travel blog, this could be a “Book Now”
button for tour packages.
How to Use:
- Select the widget or section you want to make sticky.
- Go to Advanced > Motion Effects > Sticky.
- Choose "Top" or "Bottom" based on your preference.
Conclusion:
Elementor Pro provides a myriad of advanced features and
functionalities to enhance the overall design and user experience of
your travel blog. By leveraging these pro tips, you can not only make
your blog visually appealing but also more user-friendly and functional.
Remember, the key is to keep experimenting and finding what works
best for your audience.
Section 3:
Project #2 - Build a Business Website
with Elementor
Project Intro - What We Shall Build
& Website Preview
- Sketch or Wireframe tools: Use tools like Sketch, Adobe XD, or
Balsamiq. (These tools allow you to create a visual layout of your
website before diving into the design with Elementor.)
- Sample business details: For our fictional company "SEO Experts".
You can create a brief profile, or alternatively, find similar profiles
online.
- Browser: Google Chrome, Firefox, Safari, or any other. (For
previewing our wireframe design.)
Introduction:
Before diving into the hands-on building of our business website using
Elementor, it’s vital to understand the structure and layout we're
aiming for. By having a clear picture in mind, we can seamlessly
integrate various sections without any redundancies or confusion. This
chapter will provide a detailed introduction to our second project,
where we will be creating a comprehensive website for a fictional
company named "SEO Experts".
1. The Vision for "SEO Experts" Website:

"SEO Experts" is a business that provides top-notch search engine
optimization services to its clients. Their aim is to help businesses
rank better on search engines, drive more organic traffic, and
consequently, increase sales.
Our objective is to build a website that reflects their proficiency and
expertise in the realm of SEO. We want a clean, professional, and
responsive design that communicates trust, results, and authority.
2. The Blueprint – What our website will contain:

- Homepage: This will be the primary landing page that offers a
snapshot of everything "SEO Experts" provides. It will contain sections
like the banner, about us, services, blog snippets, testimonials, and a
call-to-action for getting in touch.
- About Us Page: A detailed account of the company's history,
mission, vision, and the team.
- Services Page: Comprehensive details on all the SEO services
offered.
- Blog Page: A repository of all the insightful articles written by the
team to provide value and drive organic traffic.
- Contact Us Page: An interactive page with a form for potential clients
to get in touch and a map pointing to the company's location.
3. Previewing the Layout with a Wireframe:

Before creating our website on WordPress using Elementor, it’s
essential to have a wireframe in place. A wireframe is a basic visual
guide that represents the skeletal framework of the website. It doesn't
show every detail but gives us a clear idea of the layout and
placement of different sections.
Steps to Create a Wireframe:
1. Choose a Wireframe Tool: For this demonstration, we will use
"Sketch". You can download a trial version or use any other wireframe
tool you're comfortable with.
2. Start with the Homepage: Create a basic layout with placeholders
for the banner, about us section, services, and so on.
3. Follow with Other Pages: Similarly, create wireframes for the About
Us, Services, Blog, and Contact pages.
4. Review: Once done, ensure all pages are interconnected and
provide a logical flow.
5. Feedback: It's always a good idea to get feedback on the
wireframe. Since our company is fictional, you can ask colleagues or
friends. Their fresh perspective might offer insights you hadn't
considered.
4. Browser Preview:
After you've created your wireframe, preview it in a browser. This
gives you a feel of how the website will look in terms of layout.
Remember, at this stage, we're not concerned with colors, fonts, or
high-fidelity designs – just the structure. Use your browser (like
Google Chrome or Firefox) to see how the wireframe responds to
different window sizes.
Conclusion:
Starting with a clear vision and layout for "SEO Experts" website
ensures that our design and development phases are streamlined.
With a wireframe in hand, we're now ready to delve into Elementor
and begin the exciting journey of bringing our vision to life. In the
upcoming chapters, we will explore each section in detail, starting with
setting up Elementor for our business website project.
Project Setup
Assets & Materials for This Chapter:
- Domain & Hosting account details (Acquired from domain registrars
and hosting providers like SiteGround, Bluehost, etc.)
- WordPress Admin credentials (Set up when you install WordPress
on your hosting)
- Images & logos for "SEO Experts" (Can be sourced from stock
image websites like Unsplash, Pexels or Shutterstock)
- Elementor Pro plugin (Purchased and downloaded from the official
Elementor website)
- Elementor theme (Free themes available on WordPress theme
repository or recommended themes from the Elementor site)
1. Preparing the Domain & Hosting

Before diving into the world of Elementor, it's crucial to have your
domain and hosting ready. Think of this as your website's "real
estate." Your domain is your address, while your hosting is the actual
space where your site will live. Ensure that you've bought a domain
that aligns with your fictional company, "SEO Experts", for instance,
`seoexperts.com`.
Tips: Choose hosting providers that have good speed, uptime, and
compatibility with WordPress. SiteGround and Cloudways, as
mentioned in earlier chapters, are great options.
2. Installing WordPress
With your hosting secured, the next step is to install WordPress. This
CMS (Content Management System) is the foundation on which you'll
be building your Elementor site. Most modern hosting providers offer
"1-click WordPress installs" which make the process hassle-free.
3. Choosing a Theme Compatible with Elementor

Although Elementor works well with most themes, some are more
optimized for it than others. Themes like Astra, Hello Elementor, and
OceanWP are well-suited. For this project, we will use the "Hello
Elementor" theme, which is lightweight and designed to be highly
compatible.
To install the theme:
- Navigate to your WordPress dashboard
- Go to 'Appearance' > 'Themes' > 'Add New'
- Search for "Hello Elementor"
- Install and activate the theme
4. Installing Elementor Pro

Once WordPress and your theme are set up, it's time to install the
Elementor Pro plugin. Remember, for this project, we're using the paid
version to access advanced features.
- Go to the Elementor website and purchase Elementor Pro.
- Download the plugin ZIP file.
- In your WordPress dashboard, navigate to 'Plugins' > 'Add New' >
'Upload Plugin'.
- Choose the ZIP file you downloaded and click 'Install Now'.
- After installation, click 'Activate'.
- You'll be prompted to enter your license key, which can be found in
your Elementor account.
5. Organizing Your Assets

Before building, gather and organize all visual assets for "SEO
Experts." This includes:
- Logos: Ensure you have high-resolution logos available in both
horizontal and vertical formats.
- Images: Source high-quality, relevant images. Remember to keep
them optimized for web to ensure faster loading times.
- Color Palette & Typography: Define a color palette and typography
set for consistency.
6. Initial Elementor Settings

Before diving into building pages:
- Navigate to 'Elementor' > 'Settings' in your WordPress dashboard.
- Under the 'Style' tab, set default colors and fonts that align with your
brand.
- Check the 'Advanced' tab and ensure 'Switch Editor Loader Method'
is set to 'Enable' if facing any loading issues.
In Summary:
Setting up for your project is like laying the foundation for a house.
The stronger and more organized your foundation, the smoother the
rest of the building process will be. With all these in place, you're now
ready to embark on the journey of creating an amazing business
website for "SEO Experts" using Elementor Pro. In the next chapter,
we will delve into Elementor's general settings to tailor it perfectly for
our needs.
Elementor General Settings

1. Elementor Plugin (Pro Version): [Available on the Elementor official
website]( https://elementor.com/pro/ )
Use/Purpose: The primary tool we'll be using to design and
customize our website.
2. WordPress Dashboard Access: Ensure you have administrative
access to your WordPress website.
Use/Purpose: To access Elementor settings and other related
configuration options.
Introduction:
As you embark on the journey to build a business website using
Elementor for the fictional company "SEO Experts," it's crucial to begin
with a solid foundation. Elementor's general settings play a pivotal role
in ensuring that your site's design and functionality align with your
vision. This chapter will guide you through the labyrinth of Elementor's
general settings, demystifying each option and helping you set up for
success.
Accessing Elementor’s General Settings:

1. Dashboard Navigation: From your WordPress dashboard, navigate
to Èlementor > Settings`. This action will take you directly to the
General Settings tab of Elementor.
Key Elementor General Settings Explained:

1. Editor Loader:
- Purpose: Determines how the editor loads on your backend.
- Options: You can choose between 'Enable' or 'Disable'. For faster
performance, especially on slower servers, consider disabling.
2. Improve Elementor:
- Purpose: Allows Elementor to collect non-sensitive diagnostic
data.
- Options: You can opt in or out. While not necessary, opting in can
help Elementor improve its services.
3. Elementor CSS Print Method:
- Purpose: Determines how Elementor's CSS is loaded on your
website.
- Options:
- Internal Embedding (default): CSS is loaded in the HEAD of your
website.
- External File: CSS is loaded as an external file. This is beneficial
for cache plugins but might be slower on some servers.
4. Elementor Tracker:
- Purpose: Sends non-sensitive data about how you use Elementor.
- Options: Opt-in or out based on your preference.
5. Compatibility Mode:
- Purpose: Addresses conflicts with other plugins/themes.
- Options: Enable this if you face issues with Elementor being
blocked by your theme or another plugin.
Style Settings:
1. Default Generic Fonts:
- Purpose: Sets a default font when the chosen font is not available.
- Options: You can specify a generic font like "Sans-serif" or "Arial".
2. Content Width:
- Purpose: Sets the default width of the content area.
- Recommendation: For business websites, a content width of 1140
pixels is a good starting point, but this may vary based on your design
needs.
Integrations Tab:
While not strictly a "general setting," the integrations tab in
Elementor's settings can be crucial for business websites.
1. reCAPTCHA:
- Purpose: Helps prevent spam on your forms.
- Setup: Get your site key and secret key from the Google
reCAPTCHA website and input them here.
2. MailChimp, Drip, ActiveCampaign, and More:
- Purpose: Integrates Elementor with popular email marketing
services.
- Setup: For each platform, you'll typically need to enter an API key
which you can obtain from the respective service's dashboard.
Advanced Settings:
1. Switch Editor Loader Method:
- Purpose: Tackles potential conflicts and issues.
- Options: Turn on if you face issues with the editor loading.
2. Optimized DOM Output:
- Purpose: Reduces the amount of HTML code generated by
Elementor, leading to faster load times.
- Options: It's typically best to keep this option enabled for optimal
performance.
Conclusion:
Elementor's general settings may seem straightforward, but they offer
powerful configuration options that every site builder should
understand. By mastering these settings, you lay a robust foundation
for the rest of your site-building journey with Elementor.
In the upcoming chapters, we will delve deeper into the intricacies of
setting up and designing a business website for "SEO Experts" using
Elementor's plethora of features. Remember, each setting and feature
is a tool in your arsenal; understanding when and how to use them is
the key to your success.
Setting up the Website

- WordPress Installation: Before we start, you must have WordPress
installed on your web host. If you've not yet done this, refer back to
Chapter 5.
- Elementor Pro Plugin: Ensure you have the Pro version of Elementor
installed. If not, purchase and download it from the Elementor official
website. This provides access to advanced widgets and site-building
capabilities.
- Astra Theme: We will be using the Astra theme for this project. You
can find this theme in the WordPress theme repository. It’s lightweight
and highly compatible with Elementor.
- SEO Experts Logo & Branding Materials: Ensure you have branding
materials for the fictional "SEO Experts" company. If not, create a
simple logo using tools like Canva or LogoMakr.
Introduction:
Building a business website, especially for a professional service like
"SEO Experts," requires strategic planning, efficient design, and a
user-friendly interface. This chapter will guide you step-by-step on
setting up the foundational aspects of your website using WordPress
and the Elementor Pro plugin.
Step 1: Installing Astra Theme

1. Dashboard Navigation: From your WordPress dashboard, navigate
to Appearance > Themes.
2. Add New Theme: Click on the Add New button and search for
“Astra” in the search bar.
3. Installation: Click on Install and then Activate.
Why Astra? The Astra theme offers seamless compatibility with
Elementor and comes with pre-built templates. It’s also responsive,
SEO-friendly, and offers fast loading times.
Step 2: Upload and Activate Elementor Pro

1. Plugin Upload: Navigate to Plugins > Add New > Upload Plugin.
2. Choose File: Select the Elementor Pro zip file you downloaded after
purchasing.
3. Activation: After uploading, click Activate.
Step 3: Basic WordPress Settings
1. Site Title & Tagline: Navigate to Settings > General. Fill in your
website title as "SEO Experts" and provide a suitable tagline, such as
“Leading in SEO Excellence.”
2. Timezone & Date Format: Still under the General tab, set your
preferred timezone and date format.
3. Permalinks: Go to Settings > Permalinks and select "Post name."
This structure is SEO-friendly and makes URLs readable.
Step 4: Branding and Logo Setup

1. Customize: Go to Appearance > Customize.
2. Site Identity: Navigate to Site Identity. Here, you can upload the
"SEO Experts" logo and favicon.
Note: Ensure your logo has a transparent background (preferably in
.png format) for better compatibility with various header designs.
Step 5: Creating Essential Pages

Before diving deep into Elementor, set up the primary pages your site
will need.
1. Dashboard Navigation: Go to Pages > Add New.
2. Add Titles: For this project, create the following pages - Home,
About Us, Services, Blog, Testimonials, and Contact Us. Simply type
the title and hit Publish for each page.
Step 6: Setting Up Main Navigation Menu

1. Navigation to Menus: From your dashboard, go to Appearance >
Menus.
2. Create a New Menu: Click on create a new menu. Name it “Main
Menu.”
3. Add Pages: On the left pane, select the pages you’ve created and
add them to the menu.
4. Menu Structure: Drag and drop to rearrange the order. For this
project, set the order as Home, About Us, Services, Blog,
Testimonials, and Contact Us.
5. Set Display Location: Tick the primary menu checkbox to set it as
the main header menu.
Conclusion:
Congratulations! You’ve now set the foundation for your "SEO
Experts" business website. With WordPress properly configured, the
Astra theme installed, and Elementor Pro activated, you're ready to
start designing your website using Elementor's advanced features. In
the coming chapters, we'll dive into the specific design elements,
starting with global fonts and colors in the next chapter.
Note to readers: This chapter provided a high-level setup, ensuring

you have the necessary configurations to proceed. As we dive deeper
into subsequent chapters, we'll be working extensively with Elementor
Pro to bring your website to life. Ensure you have all assets and
resources ready as we journey into the heart of website design with
Elementor.
Setting up the Global Fonts & Colors

1. Elementor Pro: (Acquire by purchasing a license from the official
Elementor website)
2. A WordPress Website: You should already have this set up from
previous chapters.
3. Access to Google Fonts: (Elementor integrates with Google Fonts,
so they're readily available within the plugin)
4. Color Palette Tool (e.g., Coolors.co or Adobe Color): Useful for
generating and refining color schemes. (Access freely online)
Introduction
Consistency in design is crucial for branding and user experience.
Setting global fonts and colors in Elementor allows you to maintain
this consistency across your entire website. By defining these settings,
you'll ensure that every page and post you create will have the same
look and feel, aligning with your brand's identity.
In this chapter, we'll delve into setting up global fonts and colors using
Elementor Pro for our business website project.
Why Global Settings Matter

Before we jump into the process, it's vital to understand the
importance of global settings:
- Branding: Keeping consistent fonts and colors strengthens your
brand identity, making it recognizable and memorable.
- Efficiency: Once set, you won’t need to adjust fonts and colors
individually for every new page or section.
- Flexibility: If you decide to change a color or font in the future,
adjusting the global setting will automatically update every instance on
your site.
Step 1: Accessing the Global Fonts & Colors

1. From your WordPress dashboard, go to Elementor > Theme Style.
2. Here, you'll see two main sections: Global Fonts and Global Colors.
Step 2: Setting Up Global Fonts

Elementor integrates seamlessly with Google Fonts, offering a wide
variety of typefaces suitable for every design:
1. Under Global Fonts, you'll see four default typography settings:
Primary, Secondary, Text, and Accent.
2. Primary: This is typically the font used for headings. Click on the
pencil icon. From the dropdown, browse or search for your desired
font (e.g., "Roboto"). Adjust the weight, transformation, style, and
other settings.
3. Secondary: Often used for sub-headings or emphasized text.
Repeat the process as above.
4. Text: This is your standard body text font. Choose something
readable.
5. Accent: Use sparingly, perhaps for callouts or specific highlights.
6. Once set, click on the 'Update' button.
Step 3: Setting Up Global Colors

Choosing the right colors is essential for conveying the mood and
message of your brand:
1. Under Global Colors, you’ll see four default color slots: Primary,
Secondary, Text, and Accent.
2. Primary Color: Click on the color box. Use the color picker tool or
input a specific hex code. This color often represents the main theme
of your brand.
3. Secondary Color: This should complement the primary color and
can be used for hover effects, buttons, or highlights.
4. Text: Typically a neutral color for readability, like black or dark gray.
5. Accent: A contrasting color to draw attention to specific elements,
like call-to-action buttons.
6. If you're unsure about which colors to use, tools like Coolors.co or
Adobe Color can help you generate a cohesive palette.
7. After finalizing, click on 'Update'.
Step 4: Applying Global Settings to Your Website

Once you've set your global fonts and colors, Elementor will use these
settings as defaults when you create new pages or posts. However, if
you want to apply these settings to existing pages:
1. Open any page with Elementor.
2. Click on any widget.
3. Under Style, you'll see an option to choose "Default" for both fonts
and colors. This will apply your global settings.
Conclusion
Setting up global fonts and colors is a foundational step in web design,
ensuring consistency and branding alignment across your entire site.
With Elementor Pro, this process becomes incredibly streamlined,
allowing for efficient design and easy updates in the future.
Remember, while it's essential to stick to your brand's identity, it's also
crucial to ensure that your website remains user-friendly. Always
prioritize readability and user experience in your design choices.
Building the Global Header

Template
1. Elementor Pro (Required): This is the premium version of the
Elementor page builder which allows you to create global templates.
[Acquire from the official Elementor website](
https://elementor.com/pro/ ).
2. Website Logo: A high-resolution image or vector file of your
business logo. If you don’t have one, consider using free tools like
[Canva]( https://www.canva.com/ ) to design a professional-looking
logo.
3. High-Quality Images: Relevant images to be used in the header,
either sourced from the business or free stock image websites such as
[Unsplash]( https://unsplash.com/ ).
4. Primary and Secondary Fonts: Consistent with your brand's
typography. [Google Fonts]( https://fonts.google.com/ ) offers a variety
of free fonts.
5. Contact Information: Ensure you have your business phone
number, email, and possibly a physical address, if relevant.
6. Social Media Icons: Use built-in Elementor icons or custom icons
from platforms like [FontAwesome]( https://fontawesome.com/ ).
Introduction:
The global header is a vital part of any website. It appears at the top of
every page and serves as a navigation guide for your visitors. By
creating a well-structured global header template with Elementor, you
ensure consistency across your entire website, enhance user
experience, and strengthen brand identity.
Steps to Build the Global Header Template with Elementor Pro:

1. Accessing the Templates Area:
- From your WordPress dashboard, hover over "Templates" and
click on "Theme Builder."
- In the Theme Builder area, click on the “Header” tab and then click
on “Add New”.
2. Naming Your Template:
- A pop-up will appear. From the drop-down menu, select "Header"
and give your template a name, for instance, "Business Global
Header." Click on "Create Template".
3. Choosing a Pre-Made Header (Optional):
- Elementor Pro offers pre-designed headers. You can choose one
as a starting point and customize it or close out of the library to design
from scratch.
4. Designing Your Header:
- Logo Area: Drag a "Site Logo" widget onto the canvas. Upload
your logo and adjust its size using the "Style" tab.
- Navigation Menu: Use the "Nav Menu" widget to add a menu to
your header. Under 'Style', customize fonts, colors, and hover effects
to match your brand.
- Contact Information: Use the "Text Editor" widget to add your
business's contact information.
- Search Bar (Optional): If you have a blog or e-commerce site,
consider adding a "Search Form" widget.
- Call-to-Action Button: Drag the "Button" widget onto your header.
This could be a 'Contact Us' button or any other action you want
visitors to take.
- Social Media Icons: Use the "Social Icons" widget to link to your
business’s social media profiles.
5. Styling Your Header:
- Go to the "Section" settings by clicking the six-dot icon. Under
"Style", you can set background colors, gradients, or images.
- Adjust typography, color, and padding for each widget to ensure
alignment and consistency.
6. Sticky Header (Optional):
- If you want your header to stick to the top while scrolling, go to
"Advanced" under "Section" settings, then "Scrolling Effect" and
activate "Sticky."
- Ensure your header looks good on all devices. Click on the
"Responsive Mode" at the bottom left of the Elementor panel and
select "Tablet" or "Mobile" to adjust settings accordingly.
8. Save and Publish:
- Once you're satisfied with your header, click on the green
"Publish" button.
- A pop-up will appear, prompting you to set conditions for your
header. Choose "Entire Site" to make it a global header. Click "Save &
Close."
Conclusion:
Congratulations! You've successfully built a global header template for
your business website using Elementor Pro. Remember, a well-
designed header can significantly improve user experience and play a
crucial role in website conversions. Always test your header on
different devices to ensure it's fully responsive and functional.
Note: Always ensure that you regularly update the Elementor Pro
plugin and regularly test the functionality of your global header to
ensure that everything is working seamlessly.
Building the Global Footer Template

1. Elementor Pro Plugin: You can acquire this by purchasing it from
the Elementor website ( https://elementor.com/pro/ ). It’s essential for
accessing premium features, including the global template
functionality.
2. High-Resolution Company Logo: This should be sourced from the
company for whom the website is being built. If it's a fictional
company, consider using placeholder images.
3. Contact Details: Phone number, Email, and Physical Address.
4. Business Hours: Specific to the company.
5. Social Media Icons Pack: Free icons can be sourced from websites
like IconFinder ( https://www.iconfinder.com/ ) or FontAwesome (
https://fontawesome.com/ ).
6. Links to Important Pages: Such as 'About Us', 'Services', 'Contact
Us', etc.
7. Newsletter Signup Plugin: Consider using WPForms (
https://wpforms.com/ ) or any other plugin compatible with Elementor.
Introduction:
A footer is an essential part of any website. It not only offers additional
navigation options but also provides crucial information and reinforces
branding. With Elementor Pro, you can design a global footer template
that can be applied to all your web pages, ensuring consistency and
saving design time. In this chapter, we will guide you through building
a professional and functional global footer for the fictional business,
"SEO Experts."
Step-by-step Guide to Building the Global Footer Template:

1. Accessing the Footer Builder:
- From your WordPress dashboard, go to Templates > Theme
Builder.
- Click on the "Footer" tab and then "Add New."
2. Choosing the Structure:
- Select the number of columns you want for your footer. For a
business website, a three or four-column structure often works best.
3. Inserting the Company Logo:
- In the first column, drag and drop the "Image" widget.
- Upload the company logo and adjust the size as needed.
Remember to add ALT text for SEO purposes.
4. Adding Contact Details:
- Use the "Text Editor" widget in the second column.
- Input the phone number, email, and physical address. You can
make the email clickable by highlighting it and clicking on the link icon,
then choosing 'mailto:' followed by the email address.
5. Business Hours & Navigation:
- In the third column, use the "Text Editor" widget to add business
hours.
- Below that, add the "Nav Menu" widget and choose a menu. This
can include links to 'About Us', 'Services', 'Blog', etc.
6. Social Media Links:
- Drag the "Icon List" widget to the fourth column.
- Use the social media icons pack and link each icon to the
corresponding social media page.
7. Newsletter Signup:
- If you wish to have a newsletter signup, add a new section below
the columns.
- Drag the "Form" widget and select your newsletter signup form.
Ensure it integrates with your email marketing tool.
8. Footer Styling:
- Ensure the footer's style aligns with the website's overall design.
Adjust background color, typography, and other design elements.
- For links, consider adding a hover effect.
9. Responsiveness:
- Click on the "Responsive Mode" on the bottom left. Check how the
footer looks on tablet and mobile views.
- Make necessary adjustments to ensure the footer looks great
across all devices.
10. Saving & Implementing the Global Footer:
- Once satisfied, click "Publish."
- Under "Display Conditions," set it to "Entire Site" so that the footer
appears on all pages.
Conclusion:
The global footer is now set and will appear across the entire website.
The benefits of using a global template are evident in its consistency,
time-saving, and uniformity. Remember to periodically update the
footer if there are changes in contact details, branding, or other
relevant information. With Elementor Pro, making these adjustments is
seamless and efficient.
Building the Contact Us Page
Assets, Resources, and Materials Needed:
1. Elementor (Pro Version) - You'll need this to access advanced
widgets and templates. (Acquire it from the official Elementor website)
2. Contact Form Plugin such as WPForms or Contact Form 7
(Available for free in the WordPress plugins repository. Upgrades
available for advanced features.)
3. Google Maps API Key - To embed a live map on your page.
(Acquire this from the Google Cloud Platform Console)
4. Images related to Contact or Business - For aesthetics and to
maintain branding. (Sources include Unsplash, Pexels, or
Shutterstock. Ensure you have the right to use any images.)
Introduction
The Contact Us page is often one of the most visited sections of a
business website. It serves as a direct link between the visitors and
the business, providing an opportunity for visitors to get in touch for
queries, feedback, or potential business proposals.
Step-by-Step Guide to Building the Contact Us Page

1. Setup the Contact Page:
- From your WordPress dashboard, navigate to `Pages > Add
New`.
- Name the page "Contact Us" or a similar title of your choice.
- Click 'Edit with Elementor' to start designing the page.
2. Adding a Header:
- Use a section widget to create a header.
- Add an appropriate title such as "Get in Touch" or "Contact Us".
- Add a sub-heading, if necessary, for better clarity or for a
personal touch, like "We’d love to hear from you."
3. Inserting a Contact Form:
- Drag the "Form" widget from Elementor Pro into your section.
- Customize the form fields as required. Typically, a contact form
will have fields like 'Name', 'Email', 'Subject', and 'Message'.
- Adjust the styles – colors, typography, field widths, button styles,
etc.
- Set the submission actions, usually to 'Email', so you receive an
email whenever someone fills out the contact form.
4. Adding a Google Map:
- Drag the "Google Maps" widget into a new section below the
contact form.
- Enter your Google Maps API Key.
- Input the address of your business. This will set the location on
the map.
- Adjust the zoom level and style as needed.
5. Contact Details Section:
- Add another section below or to the side of your form.
- Use the "Icon Box" or "Image Box" widgets to display your
business's contact details, including phone number, email, and
physical address.
- Make sure these details are easily legible and styled according to
your brand's theme.
6. Design and Aesthetics:
- Insert relevant images or icons that resonate with the theme of
communication or business. This can be backgrounds or standalone
images.
- Adjust the sections' padding and margin to ensure content is
spaced out neatly.
- Ensure that the color scheme remains consistent with the rest of
the website.
- Click on the ‘Responsive Mode’ at the bottom of the Elementor
panel.
- Adjust the layouts, fonts, and images to ensure everything looks
clean and accessible on mobile devices.
8. Final Review and Page Settings:
- Once everything looks good, review the page settings by clicking
the gear icon at the bottom left of the Elementor side panel.
- Adjust the layout, margin, and padding as needed.
- Check the page in different browsers to ensure cross-browser
compatibility.
9. Publish:
- After reviewing, click the green "Publish" button on the bottom of
the panel.
Conclusion
Building an effective Contact Us page is crucial for business websites.
With Elementor, the process becomes simpler, but remember, it's not
just about aesthetics; functionality plays a significant role. Always test
your contact form and map to ensure they work as expected, providing
your visitors with a seamless experience.
Building the Blog Page

- Elementor Pro Plugin: This can be obtained from the Elementor
website (elementor.com). This chapter will make use of the premium
features of Elementor for a more advanced and customized blog page
design.
- Stock Images: Websites like Unsplash (unsplash.com) and Pexels
(pexels.com) offer high-quality free images that can be used to
enhance your blog page's design.
- SEO Experts Logo and Branding: For this project, you might
consider designing a logo for the fictional company “SEO Experts”
using free tools like Canva (canva.com) or seek the help of a
professional designer.
Introduction
The blog page plays a vital role in sharing information, updates, and
insights related to a business. This chapter will guide you through the
process of designing a comprehensive blog page for our fictional
company, "SEO Experts," using the Elementor Pro plugin.
1. Setting Up the Blog Page

Before diving into Elementor:
1. From your WordPress dashboard, navigate to Pages > Add New.
2. Name this page “Blog” and click on "Edit with Elementor".
2. Designing the Blog Page Header

- Drag a Section widget onto the canvas.
- Insert a Background Image (perhaps an SEO-related image from
Unsplash).
- Overlay the image with the SEO Experts Logo and a heading like
“SEO Insights and Updates”.
3. Adding the Blog Post Grid

Elementor Pro offers a unique widget for displaying blog posts:
1. Search for the Posts widget and drag it into a new section below
your header.
2. Here, you have several layout options including Grid, List, and
Masonry. For our design, choose the Grid layout.
3. Adjust the columns number based on your preference. Typically, a
2 or 3 column layout works best for a cleaner look.
4. Customizing the Blog Post Cards

- Image: Activate the Show Image option. Set the image size and
ratio.
- Title: Adjust the typography and color to match the company’s
branding.
- Meta: This includes the date, author, and comments. You can
choose to show or hide any of these.
- Excerpt: Decide on the number of lines of text to be shown as a
preview.
5. Pagination
For easy navigation, especially if you have numerous articles:
1. Activate the Pagination option in the Posts widget settings.
2. Choose between Numbers, Previous/Next, or Numbers +
Previous/Next.
3. Customize the typography and colors to fit the overall design.
6. Sidebar (Optional)
Many blogs include a sidebar with categories, recent posts, or ads:
1. Drag a new Section widget and choose a Two-Column structure.
2. Move your Posts widget into one column.
3. In the other column, use Elementor's widgets like Categories,
Recent Posts, and custom HTML widgets for ads or call-to-actions.
7. Enhancing the Blog Design

- Hover Effects: Add subtle hover animations to your blog post cards
for interactivity.
- Spacing: Ensure there's sufficient space between each blog post
card for readability.
- Call-to-Action: At the end of the blog grid, consider adding a CTA,
encouraging visitors to subscribe to a newsletter or check out the
services page.
It’s crucial your blog page looks good on all devices:
1. Click on the Responsive Mode at the bottom panel of Elementor.
2. Check and adjust the design for both tablet and mobile views,
ensuring all elements align well and the text remains readable.
Conclusion
Your blog page is not just a collection of articles; it's a representation
of the company's expertise and knowledge in the field. By using
Elementor Pro, you have a powerful tool at your disposal to design
and customize your blog page to suit the business's brand and needs.
In the next chapter, we'll delve deeper into creating single post
templates to maintain consistency in your individual blog articles. This
ensures a uniform look throughout and enhances the user experience.
Building the Single Posts Template
- Elementor Pro Plugin (Available from the Elementor website)
- Stock Images (Available from stock photo websites like Unsplash,
Pexels)
- Icon Sets (Available from websites like FontAwesome, Iconfinder)
Purpose: The single post template controls the structure and design of
each individual blog post on your website. This ensures uniformity and
brand consistency every time you publish a new post.
Introduction
When you publish multiple blog posts, having a consistent layout for
each post can significantly improve user experience. With Elementor
Pro, we can design a Single Post Template that will automatically
format each new post according to our specified design. This chapter
walks you through the creation of a single post template suitable for
our fictional "SEO Experts" business website.
Step 1: Accessing the Theme Builder

1. From your WordPress dashboard, navigate to Elementor > Theme
Builder.
2. You'll be presented with various templates (Header, Footer, Single,
Archive, etc.).
3. Click on the "Add New" button, choose "Single", and then select
"Post" from the dropdown list.
Step 2: Choosing a Starting Layout

Elementor Pro provides pre-designed layouts to kickstart your design
process. You can:
1. Choose one of the pre-made layouts.
2. Start from scratch.
For our "SEO Experts" website, we'll start with a clean slate to ensure
brand consistency.
Step 3: Adding The Post Title

1. Drag the Post Title widget and place it at the top.
2. Adjust the typography and color to fit the branding of "SEO
Experts".
3. Align the title to the center for a modern look.
Step 4: Displaying the Featured Image

1. Drag the Featured Image widget below the title.
2. Set a default size (e.g., "Full") and adjust the width to fit the content
area.
Step 5: Adding the Post Content

1. Drag the Post Content widget beneath the Featured Image.
2. Adjust the typography for headers and paragraph text to ensure
readability.
Step 6: Incorporating the Author Box

Personalize each post by giving credit to its author:
1. Drag the Author Box widget below the post content.
2. Customize the box's design—choose a rounded image, add social
media links, and adjust colors.
Step 7: Implementing Navigation

Allow readers to move between posts effortlessly:
1. Drag the Post Navigation widget below the Author Box.
2. Customize the arrows or text to match your site's design.
Step 8: Comments Section

Engage with your audience:
1. Drag the Post Comments widget under the navigation.
2. Customize the appearance, adjusting the typography and button
colors.
Step 9: Additional Elements

Depending on your needs, consider adding:
- Post Info: This widget can display the date, category, and number of
comments.
- Related Posts: Showcase similar articles to keep readers on your
site longer.
Step 10: Responsiveness and Mobile Optimization

Ensure that your single post template looks great on all devices:
1. Switch between desktop, tablet, and mobile views at the bottom of
the Elementor interface.
2. Adjust any elements that don't adapt well to smaller screens.
Step 11: Save and Publish

1. Once satisfied with your single post template, click on the "Publish"
button.
2. Set the conditions. For a single post template, apply it to "All Posts".
Conclusion
Your Single Post Template serves as the backbone for every article
on your "SEO Experts" website. With Elementor Pro, you've created a
consistent, responsive, and professional-looking template that
enhances readability and user engagement. Remember, while the
template ensures a consistent structure, each post's quality and
content will always be paramount.
Adding the Homepage Banner

- Elementor Pro Plugin: Ensure you have the Pro version installed. If
not, you can obtain it from [Elementor's official website](
https://elementor.com/pro/ ). This will grant you access to advanced
widgets that are crucial for creating an impressive homepage banner.
- High-Resolution Banner Image: This is the primary image or visual
that will occupy your homepage banner. Ensure it's relevant to "SEO
Experts," the business we're focusing on. You can source high-quality
images from stock websites like [Unsplash]( https://unsplash.com/ ) or
[Shutterstock]( https://www.shutterstock.com/ ). If you have a
dedicated graphic designer, they can create a customized banner
image tailored to your brand.
- Brand Logo & Tagline (if any): Obtain the high-resolution brand logo
for "SEO Experts" and any tagline or mission statement the company
uses. This will be placed on the banner for branding purposes.
Introduction:
The homepage banner, often termed a "hero section," is one of the
first things visitors see when they land on a website. It sets the tone,
creates the first impression, and provides an opportunity to
communicate your business's primary message immediately. In the
case of our fictional company, "SEO Experts," this section will
communicate their primary offering and professional standing in the
world of SEO.
Step-by-Step Guide to Adding the Homepage Banner:

1. Setting Up the Section:
- Navigate to your WordPress dashboard and open the Elementor
editor for your homepage.
- Click on the '+' icon to add a new section. For the banner, choose
the 'Full Width' option, ensuring it covers the entire width of the page.
2. Background Image:
- Once the section is created, click on the 'Edit Section' (six dots
icon) on the section.
- Under the 'Style' tab, go to 'Background'. Here, you can upload
your chosen high-resolution banner image. Adjust the position to
'Center Center' and size to 'Cover' to ensure the image fills the section
and is centered.
3. Overlay Effect (Optional):
- Still under the 'Style' tab, select 'Background Overlay'.
- You can add a color gradient or another image as an overlay. For
a professional look, a subtle black gradient overlay can add depth and
make the text more legible.
4. Adding Brand Logo & Tagline:
- Drag and drop the 'Image' widget onto the section and upload the
"SEO Experts" logo.
- Below the logo, drag and drop the 'Text Editor' widget to add any
tagline or mission statement the company uses. Adjust the typography
and color to ensure it's legible against the banner image.
5. Adding a Call-to-Action (CTA):
- CTAs guide visitors on what to do next. For "SEO Experts", this
could be "Get a Free SEO Audit" or "Contact Us Today".
- Drag and drop the 'Button' widget below the tagline. Name the
button with your CTA, link it to the appropriate page, and style it to
match the company's branding.
- Once satisfied with how the banner looks on the desktop version,
switch to the 'Mobile' view (bottom-left icon).
- Adjust any elements (like font size, image position) to ensure they
look great on mobile devices as well. Remember, a significant portion
of your audience will likely visit using mobile devices.
- Click on the 'Preview' button (eye icon) to see how the banner
looks.
- If all looks good, hit the 'Update' or 'Publish' button to save your
changes.
Conclusion:
Congratulations, you've now set up an impactful homepage banner for
"SEO Experts". This banner will not only set the tone for the rest of the
site but also efficiently communicate the company's primary message
to visitors. Always remember to periodically update the banner to
reflect any changes in offerings, promotions, or branding.
Adding the About Us Section

Assets and Materials Required:
- Professional company photos (Available from stock photo sites like
Unsplash, Pixabay, or directly from the company's archive)
- Company history or background information
- Quotes or testimonials from key personnel (Gathered via interviews
or company archives)
- Elementor Pro plugin (Purchase from the official Elementor website)
- A pre-existing WordPress site with Elementor installed
1. Introduction:
The 'About Us' section is integral to any business website. It gives
visitors a glimpse into the company's ethos, history, and the people
behind the brand. In this chapter, we'll guide you through creating a
compelling 'About Us' section using Elementor.
2. Planning the 'About Us' Section:

Before diving into Elementor, plan the content you want to display:
- Company history or timeline
- Vision and mission statements
- Key personnel profiles or team introductions
- Awards or recognitions
- A call-to-action (CTA), e.g., "Join our team", "Learn more about our
journey"
3. Starting with the Basic Structure:

Launch the Elementor editor and navigate to the page where you want
to add the 'About Us' section.
- Choose the 'Two Columns' structure as it offers flexibility for design.
4. Adding Company History:

In the left column:
- Drag a 'Heading' widget and title it "Our History" or "Our Journey".
- Below, drag a 'Text Editor' widget and input a brief history or
background of the company.
5. Introducing the Team:

In the right column:
- Drag the 'Image' widget and upload a professional group photo or a
collage of team members.
- Below the image, use the 'Text Editor' widget to introduce key
personnel, founders, or department heads. You can use bold text or
highlights for names and titles.
6. Incorporating Dynamic Visuals:

- Between the two columns, consider using the 'Divider' widget for
visual separation.
- Utilize the 'Image Carousel' widget if you have multiple historical
photos or team images to display.
7. Showcasing Awards and Recognitions:

Below the initial two columns:
- Add a new one-column section.
- Drag the 'Icon List' widget and list any awards, recognitions, or
certifications. Each item can have an accompanying icon representing
the achievement.
8. Adding Personal Touches:

Personal quotes or testimonials can make the 'About Us' section more
relatable.
- Add another one-column section.
- Use the 'Testimonial' widget to add a quote from a company leader
or influential team member. Pair it with their photo for more
authenticity.
9. Finishing with a CTA:

At the end of the 'About Us' section, a CTA can guide visitors to further
engage with the company.
- Use the 'Button' widget to create a CTA. This can lead to a contact
form, career page, or another relevant page.
- Consider adding hover animations (via the 'Advanced' tab) to make
the button more interactive.
10. Responsiveness and Preview:

Ensure the 'About Us' section looks great on all devices.
- Click on the 'Responsive Mode' at the bottom of the Elementor panel.
- Check the layout on desktop, tablet, and mobile views, making
adjustments as needed.
- Preview the page and ensure all elements load correctly and the
design is coherent with the rest of the website.
11. Conclusion:
Your 'About Us' section is the bridge between your company and
potential clients or partners. It humanizes your brand and showcases
its journey, values, and people. With Elementor's intuitive interface
and this guide, creating an engaging 'About Us' section is both
efficient and effective.
In the next chapter, we'll delve into presenting the services your
company offers, ensuring visitors understand the value and expertise
you bring to the table.
Adding the Services Section
- Elementor Pro: Ensure you have the Elementor Pro version installed
and activated. (Available at Elementor's official website)
- High-quality images: For each service your business offers. These
should be consistent in style and size. (Free images can be sourced
from sites like Unsplash, Pixabay, or Pexels)
- Service Descriptions: Well-crafted briefs about each service. (Work
with a content writer or develop in-house)
- Icons (optional): Visual representations of each service. (Available
within Elementor or sourced from sites like FontAwesome or
Iconfinder)
Introduction:
The "Services" section is an integral part of any business website. It
informs your visitors about what you offer, giving them clear insights
into how you can assist them. With Elementor Pro, adding a
captivating services section is straightforward and visually engaging.
1. Starting with a New Section:

- In the Elementor editor, click on the '+' icon to add a new section.
- For the services section, choose a structure with columns depending
on how many services you want to display side-by-side (usually 2 or
3).
2. Adding a Section Title:

- Drag the 'Heading' widget from the Elementor panel and drop it at
the top of your new section.
- Label it as "Our Services" or something similar.
- Adjust the typography and color to match your website's aesthetics.
3. Adding Service Boxes:
For each service:
- Service Image:
- Drag the 'Image' widget into one of the columns.
- Upload a high-quality image that represents the service.
- Adjust the size and alignment as needed.
- Service Title:
- Below the image, drag in a 'Heading' widget.
- Label it with the service's name (e.g., "SEO Audits").
- Customize the typography to stand out but not overshadow the
main section title.
- Service Description:
- Drag the 'Text Editor' widget below the service title.
- Input a brief description of the service. Keep it concise yet
informative, so visitors quickly grasp the service's value.
- Icon (optional):
- If you're using icons, drag the 'Icon' widget above the service title.
- Choose an icon that visually represents the service. This can be in
addition to or in place of the service image, depending on your design
preference.
4. Styling the Service Boxes:

To make the service boxes stand out:
- Set a border, shadow, or different background color for each box.
This can be done in the 'Style' tab when a column is selected.
- Add padding to ensure the content doesn't touch the edges of the
box.
- For a dynamic touch, add hover animations. For instance, the box
can slightly elevate when hovered over, indicating interactivity.
5. Making the Services Section Responsive:
Given the variety of devices users might use:
- Switch to 'Tablet' and 'Mobile' views in the Elementor editor.
- Adjust the column width or stack them vertically, ensuring the
content is easily readable and looks appealing on smaller screens.
6. Additional Enhancements (optional):

- Call-to-Action: At the end of the services section, consider adding a
CTA, guiding visitors to contact you or learn more about each service.
- Testimonials: Intersperse a few client testimonials within the
services. It serves as social proof, assuring potential clients of the
quality of your services.

- Once satisfied, preview the changes to ensure everything appears
as desired.
- If everything looks great, click 'Update' or 'Publish' to save and make
your services section live.
Conclusion:
The "Services" section is more than just a list of offerings. It's an
opportunity to showcase your expertise, draw in potential clients, and
build trust. With Elementor Pro, you have a plethora of tools at your
fingertips to create a captivating services display that not only looks
great but also drives engagement.
Adding the Blog Section
Required Assets and Materials:
- High-quality blog post images (These can be sourced from stock
photo websites like Unsplash, Pexels, or Pixabay)
- Sample blog post content (You can use dummy content or write your
own for the purpose of this tutorial)
- Elementor Pro Plugin (Ensure you have the Pro version installed, as
we'll leverage some advanced features)
Introduction
In today's online ecosystem, a blog serves multiple purposes. Not only
is it a platform to share knowledge, news, and updates, but it's also
essential for SEO and driving organic traffic to your site. In this
chapter, we will walk you through the steps to add a captivating blog
section to the "SEO Experts" business website using Elementor Pro.
1. Preparation
Before diving into the design, ensure you have some blog posts
published on your WordPress website. For this tutorial, let's assume
you have at least three posts ready with titles, content, and featured
images.
2. Create a New Section
Begin by navigating to the page where you want your blog section to
appear. Click 'Edit with Elementor'.
- Click on the '+' button to create a new section.
- Choose the 'Structure' that best fits. For a standard blog grid, a
single column structure works well.
3. Dragging the Posts Widget
- In the Elementor sidebar, type "posts" into the search bar.
- Drag the 'Posts' widget into the section you just created.
4. Configuring the Posts Widget
With the widget in place:
- Content:
- Layout: Choose 'Grid' for a classic look.
- Columns: Decide the number of columns. '3' is a good starting
point.
- Posts Per Page: Define how many posts you want to display. Start
with '3'.
- Query:
- Source: Ensure this is set to 'Posts'.
- Post Type: This should be set to 'Post' by default.
- Style:
- Image: Adjust the size, spacing, and border radius of the featured
images.
- Content: Customize the padding, alignment, and typography of the
post content.
- Title: Modify the title's typography, color, and spacing.
- Meta: Adjust the styling for the post's metadata, such as the author
name and date.
5. Adding Pagination (Optional)
If you have many blog posts and wish to add pagination:
- Go back to Content in the Posts widget.
- Under Pagination, switch it to 'Yes'.
- You can then adjust the style and typography to fit your site's design.
6. Enhancing the Blog Section
For added flair, consider:
- Hover animations: Add subtle animations when a user hovers over a
blog post.
- Read More button: Add a 'Read More' button beneath each post
summary to lead users to the full article.
7. Mobile Optimization
Ensure your blog section looks great on all devices:
- Switch the Elementor's view mode to 'Mobile'.
- Adjust any settings if things look out of place. For instance, consider
reducing the number of columns on mobile view for better readability.
Conclusion
With these steps, you've successfully added a professional-looking
blog section to your business website using Elementor Pro. As you
become more familiar with Elementor, don't hesitate to experiment
with different styles and layouts to make your blog truly unique.
Remember, a blog is more than just a visual element; it's a tool. Keep
it updated with fresh, relevant content to engage your audience and
boost your site's SEO.
Pro Tip: Use Elementor's 'Save as Template' feature to save this blog
layout. This way, if you create a new page or site in the future, you
won't need to design the blog section from scratch. Instead, you can
insert your saved template and adjust as needed.
Adding the Clients Section

Assets & Materials for this Chapter:
- Logo Images of Clients (You can source these from a stock image
website like Shutterstock or directly from the clients themselves if
you're working for a real business. They are important for establishing
trust with your website visitors.)
- Elementor Pro (Ensure that you've purchased and installed the Pro
version to make use of advanced widgets.)
- Testimonials Carousel Widget (Available in Elementor Pro)
Purpose of the Clients Section:
The Clients Section on a business website serves a crucial role in
showcasing the company's credibility and prestige in the industry. By
displaying the logos of well-known clients or partners, you send a
message to potential customers that your business is trusted by
reputable companies.
Step-by-Step Guide: Adding the Clients Section using Elementor

1. Starting the Section:
- Navigate to the page you're editing within Elementor.
- Choose the 'Structured' section, which allows multiple columns. This
way, you can fit multiple client logos side by side.
2. Adding a Title:
- Before displaying client logos, it's a good practice to have a heading.
Drag a 'Heading' widget at the top of the section.
- Title it something like "Trusted By" or "Our Esteemed Clients".
- Adjust typography and alignment to your liking.
3. Uploading Client Logos:
- Click on the 'Image' widget in the Elementor sidebar and drag it into
one of your columns.
- Click on the image box to upload a client logo from your computer or
media library.
- Repeat this process for each client logo you want to display.
Note: Make sure all images are of a consistent size to ensure a neat
appearance.
4. Styling the Logos:
- Click on each image to adjust the style.
- Under the 'Style' tab, you can adjust things like opacity, which can be
useful if you want to create a grayscale look, ensuring logos from
different clients look cohesive next to each other.
- Add a hover animation if desired. This can draw attention and create
an interactive feel.
5. Adding an Image Carousel (Optional):
If you have many clients and want to showcase them in a carousel:
- Delete the structured columns you created.
- Drag the 'Image Carousel' widget from Elementor Pro into the
section.
- Upload all your client logos here. They'll be displayed in a swipeable
carousel format.
- Adjust settings like navigation arrows, dots, and the number of slides
to show at once.
- Click on the 'Responsive Mode' at the bottom of the Elementor
interface.
- Switch to 'Mobile View'.
- Adjust any spacing, sizing, or layout issues to ensure your Clients
Section looks great on all devices.
7. Final Touches:
- Consider adding a background color or gradient to this section to
make it stand out.
- Adjust padding and margin to ensure there's ample space above and
below the section, providing a clean look.
Conclusion:
The Clients Section of your business website provides prospective
customers with an insight into the companies and partners that trust
your services. By displaying these logos prominently, you reinforce
your brand's credibility and reputation in the industry.
Remember to always seek permission before displaying any client's
logo. This is essential for maintaining professional relationships and
avoiding potential legal complications.
Adding the Testimonials Section
1. Images of Testimonials Givers: Acquire high-quality and clear
photos of the individuals giving testimonials. (You can source these
images from sites like Unsplash or Pexels if you don’t have custom
photos. Ensure that the images used are copyright-free and
appropriate for commercial use.)
2. Written Testimonials: Collect detailed and specific testimonials from
your clients or use fictional ones for practice purposes.
3. Elementor Pro: Ensure you have the paid version of Elementor
activated on your WordPress website. (Acquire this directly from
Elementor’s official website.)
Introduction
A testimonials section is crucial for a business website like "SEO
Experts." It offers social proof of the quality of your services and can
significantly influence potential customers. In this chapter, we will walk
you through the process of creating a compelling testimonials section
using Elementor Pro.
Step-by-step Guide to Adding the Testimonials Section:

1. Start with a New Section:
- Navigate to the page where you'd like to add the testimonials.
- Click on the ‘+’ symbol in Elementor to create a new section.
- For the testimonials, choose a full-width section or one that best
fits your design needs.
2. Choose the Testimonials Widget:
- In the Elementor sidebar, search for the 'Testimonials' widget.
- Drag and drop the widget into the section you've just created.
3. Adding Testimonial Content:
- Image: Upload the photo of the individual giving the testimonial.
- Name: Enter the name of the person.
- Job/Position: This is optional but can add credibility. For instance,
“CEO of Tech Innovate.”
- Testimonial Content: Paste or type in the testimonial content.
Ensure it’s concise yet impactful.
4. Designing the Testimonials:
- Image Position: Decide if you want the image above, beside, or
below the testimonial text. Above is conventional and often the most
visually appealing.
- Testimonial Box Design: Customize the design of the testimonial
box. You can add a border, shadow, and even adjust the padding and
margins.
- Typography and Color: Adjust the font style, size, and color to
match your website’s theme. Make sure it’s readable and contrasts
well against the background.
5. Adding Multiple Testimonials:
- If you're planning to display multiple testimonials, consider adding
them in a carousel format. Elementor Pro's 'Testimonial Carousel'
widget is perfect for this.
- Add more items using the “ADD ITEM” button in the widget. Fill in
the details for each testimonial as explained above.
6. Responsive Design Check:
- After setting up your testimonials, click on the responsive mode at
the bottom of the Elementor sidebar. Check how your testimonials
section looks on tablet and mobile devices.
- Make necessary adjustments to ensure the section is visually
appealing and readable across all devices.
7. Publish/Update:
- Once you're satisfied with the testimonials section, click on the
'Update' or 'Publish' button to save your changes.
Conclusion
A well-crafted testimonials section can be the determining factor in
winning a potential client's trust. With Elementor Pro, adding and
customizing this section becomes a straightforward process, requiring
no coding knowledge. As you proceed, remember to ensure
authenticity in the testimonials and maintain a consistent design that
aligns with your overall website theme. In our next chapter, we'll delve
into adding the "Contact Us" section, an essential component for client
interaction and lead generation.
Adding the Contact Us Section

- Elementor (You can get this from the WordPress plugin repository or
Elementor's official website)
- Elementor Pro (To be acquired from Elementor's official website,
offers extended functionality)
- Contact Form 7 Plugin (Available for free from the WordPress plugin
repository, a reliable contact form plugin)
- Google Maps API Key (Acquired from the Google Cloud Console,
used to integrate a location map)
- Relevant images for contact background/section (Can use stock
images from websites like Unsplash or Pexels, or custom images
related to your business)
Introduction
One of the most critical sections for any business website is the
"Contact Us" section. It is the bridge between your business and
potential customers or clients. In this chapter, we'll guide you through
the process of building an effective, visually appealing, and fully
functional "Contact Us" section for your business website using
Elementor.
1. Starting with a Basic Structure

Before diving in, let's set the stage. Create a new section in Elementor
by clicking the '+' icon. Choose the single column structure for a
simple contact form. If you wish to have additional elements side-by-
side, like a contact form and a Google Map, opt for a two-column
structure.
2. Designing the Background

Background sets the mood. Either you can go for a plain color that
aligns with your website's theme, or you can use an image which
gives a professional touch.
- Click on the six dots icon representing your section.
- Under "Style," choose 'Classic' and select a color or upload an
image.
3. Adding the Contact Form

There are multiple ways to integrate a contact form with Elementor.
We recommend using Contact Form 7 for simplicity and compatibility.
Steps to add Contact Form 7:
a. Install and activate the Contact Form 7 plugin from the WordPress
dashboard.
b. Navigate to "Contact" on the dashboard sidebar, and click "Add
New."
c. Design your form. By default, a basic form structure is provided.
d. Once done, save it, and you'll see a shortcode.
e. Back in Elementor, drag and drop the 'Shortcode' widget to your
section.
f. Paste the Contact Form 7 shortcode, and the form will appear.
4. Styling the Contact Form

Elementor provides ample design options:
- Adjust spacing, padding, and margins to ensure your form fits well
within the section.
- Use the 'Style' tab in Elementor to change the form's colors,
typography, and button styles to align with your brand.
5. Adding a Google Map

Including a map provides a visual reference for visitors to locate your
business physically.
a. Acquire your Google Maps API Key from the Google Cloud
Console.
b. In Elementor, search for the 'Google Maps' widget and drag it to
your section.
c. Paste your API Key and provide your business address.
6. Additional Contact Information

On the side or below the contact form, consider adding:
- Business Address: Use the 'Text Editor' widget.
- Phone Number: You can make it clickable for mobile users.
- Email Address: Use 'mailto:' to make it clickable.
- Operating Hours: If applicable.
7. Responsiveness
It's essential to ensure the contact section looks good on all devices.
a. Click on the 'Responsive Mode' at the bottom of Elementor's panel.
b. Adjust settings for tablet and mobile views.
c. Ensure the contact form fields, buttons, and map adjust seamlessly.
Conclusion
Your "Contact Us" section is the gateway for potential clients and
customers to reach out. Using Elementor, we've made the process
smooth and aesthetically pleasing. Always test the form to ensure
messages are being received correctly. With this, your Contact Us
section is not just a form but a bridge to new business opportunities.
Note: Always remember to update and save your progress in

Elementor to prevent any loss of design.
Services Page, Templates & Global

Widgets
- Elementor Pro Plugin: You can purchase and download it from the
official Elementor website. It's necessary for accessing Pro features
like global widgets.
- A WordPress Website: To integrate Elementor and start building.
- Elementor Template Library: Available within the Elementor
interface; provides pre-made templates.
- High-Quality Images: Relevant to the services your business offers.
You can use stock photo platforms like Unsplash or Shutterstock.
- Service Descriptions: Brief texts detailing each service you offer.
- Client Testimonials (optional): Adding testimonials to a service page
can boost credibility.
Introduction:
The Services Page is arguably one of the most essential pages on a
business website. It's where potential clients or customers will go to
understand what you offer. In this chapter, we'll delve into creating an
effective Services Page using Elementor's tools, templates, and the
power of global widgets.
1. Starting With a Template:

Instead of building from scratch, Elementor provides an array of
templates, making the process easier and quicker.
1. Accessing the Template Library: Within your Elementor interface,
click on the folder icon to access the Template Library.
2. Choosing a Template: Search for "Services" in the search bar.
Browse through and choose one that fits your vision for the page.
Click “Insert” to apply it.
2. Customizing the Template:

Now that you have a basic structure:
1. Replace Images: Drag and drop your high-quality service images
into the appropriate sections.
2. Edit Texts: Replace placeholder texts with your service
descriptions. Be concise yet informative.
3. Colors & Typography: Modify these to align with your brand's
identity. Use the global fonts & colors settings for consistency.
3. Incorporating Global Widgets:

Global widgets are a powerful Elementor Pro feature. Once you create
a widget and set it as global, you can use it on multiple pages. Any
changes made to this widget will reflect everywhere it's used.
1. Creating a Global Widget: Drag a widget (e.g., a testimonial or
contact form) onto the page. Right-click on the widget and select
“Save as a Global Widget”. Name it appropriately.
2. Using a Global Widget: Whenever you wish to use this widget on
other pages, simply drag and drop the "Global" widget from the
Elementor sidebar.
Advantage of Global Widgets: Let's say you have a call-to-action
(CTA) you use across multiple pages. If you want to change the CTA
text or link, without global widgets, you'd need to change it on every
page manually. With a global widget, you just edit it once, and the
changes automatically reflect everywhere.
4. Expanding the Services Page:

1. Service Breakdown: For businesses with several services or
detailed service structures, consider creating a dedicated section or
even a page for each service. Use Elementor's linking capabilities to
connect these sections/pages.
2. FAQ Section: Add an FAQ widget to address common questions
related to your services. This can save both you and the client time
and provides immediate value.
3. Client Testimonials: Using the testimonial widget, showcase
feedback from past clients. This adds authenticity and builds trust.
5. Mobile Optimization:
Ensure your Services Page looks impeccable on mobile devices.
1. Responsive Mode: Click on the responsive mode icon in Elementor.
Review how the page looks on tablet and mobile.
2. Adjust As Needed: You might need to adjust font sizes, image
placements, or padding/margins for optimal mobile view.
Conclusion:
The Services Page is not just about listing what you offer but
presenting it in a manner that's engaging, informative, and aligned
with your brand. With Elementor’s versatile features, creating this
pivotal page becomes a seamless experience. Remember, the goal is
to communicate value and encourage the visitor to take the next step,
whether it’s contacting you, making a purchase, or simply exploring
more of what you have to offer.
Mobile Responsiveness
Required Assets, Resources, and Materials:
1. Elementor Pro Plugin - (To be acquired from Elementor's official
website. This paid version offers enhanced responsive design
controls.)
2. Responsive Design Test Tool - Tools like Responsinator (Available
for free online, simply Google "Responsinator" and access the
website. This tool helps test the mobile responsiveness of your
website.)
3. Google Chrome Browser - (Downloadable from Google’s official
site. Its built-in developer tools are useful for checking responsive
design.)
Introduction
In today's digital world, with a myriad of devices and screen sizes
available, it's essential to ensure your website looks and functions
perfectly on all of them. This is where mobile responsiveness comes
into play. It ensures that your website adapts to whatever device or
screen size it's viewed on, providing an optimal user experience.
Given that Elementor is a foremost page builder for WordPress, its
capabilities in crafting mobile-responsive designs are unparalleled.
Let's delve into how to harness these capabilities in building our
business website.
What is Mobile Responsiveness?

Mobile responsiveness ensures that web pages detect the visitor's
screen size and orientation and change the layout accordingly. It's
about ensuring that your images don't look stretched, that text is
readable without zooming, and that buttons and links are click-friendly.
Importance of Mobile Responsiveness

- User Experience: A responsive design ensures users have the best
possible experience on your site, regardless of the device they use.
- SEO Boost: Google gives preference to mobile-friendly sites in
search rankings, especially for searches made on mobile devices.
- Increased Traffic: Over 50% of global web traffic comes from mobile
devices. By not optimizing for mobile, you’re potentially alienating over
half of your audience.
Using Elementor for Mobile Responsiveness

1. Responsive Editing Mode
- Open the Elementor editor.
- At the bottom of the page, notice three icons representing desktop,
tablet, and mobile.
- Click on each to view and customize the site's appearance for that
device.
2. Column Width and Widgets
- For each section, right-click and adjust the column width specific to
mobile or tablet view.
- Widgets too can be customized for responsive views. For example, a
large heading on desktop can be made smaller for mobile.
3. Visibility Options
Elementor allows you to decide which widgets or sections are shown
or hidden on different devices.
- Select the widget or section.
- Go to Advanced > Responsive.
- Choose which devices to hide or show the widget or section on.
4. Responsive Font Size
Instead of a fixed pixel value, use "EM" or "REM" for font sizes. It
helps the text to scale according to the user’s device.
Testing Mobile Responsiveness

After setting up the design, it's crucial to test how it appears on actual
devices:
1. Physical Testing: Use actual mobile devices. This is the most
reliable method.
2. Browser Inspect Tool: With Google Chrome, right-click and select
"Inspect". Toggle between devices to see how the site looks.
3. Use Online Tools: Tools like Responsinator help in giving a general
view of your site's mobile responsiveness.
Conclusion
Mobile responsiveness is no longer an option; it's a necessity. With
Elementor's easy-to-use features, ensuring your business website is
mobile-responsive has never been simpler. As you proceed with
designing your business website, always remember to test on multiple
devices to ensure a seamless user experience.
Next Up: Chapter 63 - Elementor Cloud Backend. We'll delve into how
the Elementor cloud backend can further assist you in website
management.
Elementor Cloud Backend

1. Elementor Pro License (Acquire from Elementor's official website):
This is essential to access the Cloud features and backend of
Elementor.
2. Active Internet Connection: To access and work on the Elementor
Cloud backend.
3. Web Browser: Like Google Chrome, Firefox, etc. for accessing and
navigating the cloud backend.
4. Demo Content: (Optional; can be acquired from stock content
websites or created yourself) for adding to your website as you learn.
Introduction
Elementor Cloud has made significant strides in simplifying the
website development process. By offering hosting solutions integrated
with the Elementor builder, users can streamline their workflow. In this
chapter, we'll dive deep into the Elementor Cloud Backend,
understanding its features, capabilities, and how it can revolutionize
the way you approach website creation.
1. Understanding the Elementor Cloud Backend

At its core, the Elementor Cloud Backend is a dashboard where you
can manage all aspects of your hosted website. Unlike traditional web
hosting dashboards, the Elementor Cloud Backend is user-friendly,
intuitive, and designed specifically for those who use the Elementor
page builder.
2. Accessing the Elementor Cloud Backend

To access the Elementor Cloud Backend:
1. Navigate to the Elementor official website.
2. Sign in to your account (which should have an active Elementor Pro
License).
3. From your account dashboard, choose the 'Cloud Websites' option.
4. Here, you can see a list of all your hosted sites. Click on a site to
access its backend.
3. Key Features of the Elementor Cloud Backend

- Website Overview: This section provides general information about
your website, including its domain, SSL status, and more.
- Analytics: View visitor statistics, page views, and other essential
data.
- Backup & Restore: Regular backups are taken automatically. You
can also initiate manual backups and restore your site to any previous
state.
- Domains: Manage and point your custom domains to your Elementor
Cloud website.
- SSL: Ensure your site is secure with SSL certifications. Activate or
renew them directly from the backend.
- Advanced Tools: Access tools like phpMyAdmin, database access,
and SFTP details.
4. The Advantage of Integrated Hosting
The Elementor Cloud Backend eliminates the need to juggle between
your hosting provider's dashboard and your website. Everything, from
managing the domain to taking backups, is accessible from a single
location, simplifying your workflow and increasing efficiency.
5. Collaborating with Elementor Cloud

With Elementor Cloud, you can add collaborators to your projects.
This is especially useful when working in a team or if you need to give
temporary access to a client or colleague.
6. Website Migrations
If you've built a website elsewhere and wish to migrate it to Elementor
Cloud, the backend dashboard makes it seamless. With just a few
clicks, you can initiate the migration process, and your site will be
transferred without any downtime.
7. Security and Performance Optimizations

Elementor Cloud Backend ensures your website's optimal
performance. With regular updates, CDN integration, and security
protocols, your site will load fast and stay secure against potential
threats.
8. Wrapping Up
The Elementor Cloud Backend isn't just a hosting dashboard; it's a
comprehensive tool tailored for Elementor users. By understanding its
features and capabilities, you can accelerate your web design projects
and manage sites with ease.
Action Steps:
1. Familiarize yourself with the Elementor Cloud Backend by exploring
every option.
2. Migrate a demo site to Elementor Cloud to understand the migration
process.
3. Experiment with adding collaborators and understanding access
levels.
Further Reading:
- Elementor's Official Documentation on Cloud Hosting.
- Community forums discussing Elementor Cloud best practices.
Note: Remember to regularly keep an eye on updates from Elementor.

They are known for frequently adding new features, enhancing
performance, and ensuring user security.
Elementor Animations
- Elementor Pro Plugin (Acquired by purchasing a license from
Elementor's official website. Purpose: The premium version of
Elementor which contains advanced features, including the enhanced
animation capabilities we'll discuss in this chapter).
- High-Quality Images (Acquired from stock photo websites like
Unsplash or Shutterstock. Purpose: To use as visuals for
demonstrating animations).
- Modern Browser (e.g., Google Chrome or Firefox, downloadable for
free. Purpose: To ensure the animations render smoothly and
correctly).
- Sample Web Pages (Previously created in Chapter 44 to 63.
Purpose: To apply animations and see their impact in real-time).
Introduction:
Animations have become an integral part of modern web design. They
enhance user experience, draw attention to specific parts of a page,
and make web interactions more dynamic and engaging. Elementor,
especially in its Pro version, offers a vast array of animation
capabilities, allowing you to create subtle movements or dramatic
effects. In this chapter, we'll dive deep into Elementor's animation
features, exploring how they can amplify your website's design and
user experience.
1. Understanding the Importance of Animations:

Before delving into the technicalities, it's crucial to understand the
'why' behind animations. They can:
- Engage Users: Animated elements can captivate visitors,
encouraging them to stay on your page longer.
- Highlight CTAs: Animations can draw attention to essential calls-to-
action, improving conversion rates.
- Enhance Navigation: Smooth transitions can guide users through
your website, making for a pleasant browsing experience.
However, it's essential to strike a balance. Overdoing animations can
distract and annoy users, so they must be applied thoughtfully.
2. Accessing Elementor's Animation Features:

To start, ensure you're using Elementor Pro. Navigate to the widget or
section where you'd like to add an animation. In the 'Advanced' tab,
you'll find the 'Motion Effects' section.
3. Entrance Animations:
Under the 'Motion Effects' tab, the first set of options relate to
"Entrance Animation."
- Choosing an Animation: Elementor offers a variety of entrance
animations such as Fade In, Slide In, Zoom In, and many more. Select
one that complements your design.
- Setting Duration and Delay: Adjust the animation speed and decide if
you want a delay before the animation starts. This feature is
particularly useful when animating multiple elements sequentially.
4. Hover Animations:
Next, focus on the "Hover" section:
- Selecting a Hover Animation: Options include Grow, Shrink, Pulse,
and more. These animations trigger when a user hovers over an
element.
- Using Hover Transitions: This adjusts how the animation transitions
between its normal state and its hover state.
5. Infinite Loop Animations:

For continuous animations, like a bouncing arrow suggesting users
should scroll, the "Infinite Loop" option is perfect. Choose from options
like Rotate, Pulse, or Float to add a repeating animation to your
elements.
6. Applying to Our "SEO Experts" Website:

Let's now apply what we've learned to our business website project.
- Homepage Banner: Use a 'Fade In' entrance animation for the
banner text, ensuring it grabs immediate attention.
- Services Section: Add a 'Slide In' animation to each service block,
setting a slight delay between each to create a cascading effect.
- Testimonials Section: Implement a 'Zoom In' hover animation on
each testimonial, making them interactive and engaging.
- Contact Us Section: For the CTA button, use the 'Pulse' infinite loop
animation, subtly suggesting users should click.
7. Best Practices:
- Less is More: Avoid making every element on your page animated.
Focus on the key sections and CTAs.
- Test on Various Devices: Ensure animations appear smooth across
devices, especially mobiles, where performance can be a concern.
- Prioritize Performance: Too many animations can slow down your
site. Always prioritize a smooth and fast user experience.
Conclusion:
Animations, when used strategically, can uplift the design and
interactivity of your website. With Elementor Pro, introducing these
sophisticated effects becomes simple and intuitive. Remember always
to prioritize the user experience, and you'll be well on your way to
creating dynamic, engaging web pages for your audience.
Note: Readers are encouraged to experiment with the different

animation options available in Elementor and see what fits best for
their specific design and audience preferences.
~ Final Touches & Wrap Up
- Elementor Pro: (Available for purchase at Elementor's official
website. Purpose: Used for advanced designing and website building
functionalities.)
- Browser Compatibility Checker: Tools such as BrowserStack or
CrossBrowserTesting. (Free trials available on respective websites.
Purpose: To check the design compatibility across different browsers.)
- Page Speed Tester: Google PageSpeed Insights or GTmetrix. (Free
to use. Purpose: To check the website's loading speed.)
- Responsiveness Tester: Mobile-Friendly Test by Google. (Free to
use. Purpose: To ensure your website is optimized for mobile
devices.)
- Proofreading Tool: Grammarly or Hemingway Editor. (Both have free
versions. Purpose: To check and correct any grammatical or
readability issues in your content.)
- Stock Images & Icons: Unsplash or Freepik. (Free resources
available. Purpose: For last-minute visual additions or replacements.)
- Feedback Tool: Userback or BugHerd. (Both have free trials.
Purpose: To gather feedback from test users or team members.)
Introduction:
As we near the end of our business website building journey with
Elementor, it’s time to apply the finishing touches. This chapter will
guide you through the important final steps before launching your
business website. You've come a long way, from setting up the basics
to building individual sections and pages. Now, let's ensure everything
is polished to perfection.
1. Cross-Browser Compatibility Check:

Different browsers might render your website differently. Using tools
like BrowserStack or CrossBrowserTesting, test your website on
various browsers like Chrome, Firefox, Safari, and Edge. Ensure that
your design looks consistent and functions well across all platforms.
2. Mobile Responsiveness Test:
Today, a large portion of web traffic comes from mobile devices. Use
Google's Mobile-Friendly Test to ensure your website looks great on
smartphones and tablets. Adjust any elements that are not optimized
for mobile view using Elementor’s responsive mode.
3. Speed Optimization:
A slow-loading website can deter potential clients or customers. Test
your website's speed using tools like Google PageSpeed Insights or
GTmetrix. If the website loads slowly, consider optimizing images,
minimizing CSS and JavaScript, and using caching solutions.
4. Proofreading & Content Review:
Ensure that all the text on your website is grammatically correct and
free of typos. Tools like Grammarly or Hemingway Editor can help in
spotting mistakes. Also, ensure your content aligns with your
business's tone and message.
5. Visual Inspection:
Go through each page of your website and look for visual
inconsistencies. This includes uneven spacing, mismatched fonts, or
low-quality images. Replace any placeholder images or icons using
high-quality resources from Unsplash or Freepik.
6. Functionality Check:
Test all functionalities. This includes forms, buttons, popups, and links.
Ensure that your contact form sends messages to the intended email,
buttons lead to the correct sections or pages, and that any external
links open in a new tab.
7. SEO Check:
While SEO is a vast topic on its own, ensure at a minimum that your
meta titles and descriptions are set for each page. Use tools like Yoast
SEO to assist you with this.
8. Feedback Gathering:
Before the official launch, share your website with a few trusted
individuals or team members. Tools like Userback or BugHerd can be
invaluable here. They allow users to give feedback directly on the site.
Implement any changes as needed based on this feedback.
Wrap Up:
Building a business website using Elementor is an accomplishment in
itself. You've armed yourself with the skills to design, create, and
optimize a professional online presence for any business. Remember,
the journey doesn't end here. Regularly update your website with fresh
content, keep abreast of design trends, and always be open to
feedback. The digital world evolves rapidly, and by staying updated,
you'll ensure that your website remains relevant and effective.
Congratulations on completing this project and book, and here's to
many more successful websites in your future!

Elementor Mastery - Build Amazing Websites With Elementor - Master How To Use The Elementor Plugin To Build Amazing Pages and Implement Great Design On Your WordPress Website.

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Elementor Mastery - Build Amazing Websites With Elementor - Master How To Use The Elementor Plugin To Build Amazing Pages and Implement Great Design On Your WordPress Website.

Uploaded by

Copyright:

Available Formats

Contents Guide

Welcome to Elementor Mastery

Our Journey Ahead

No Prior Experience Needed

Join the Elementor Community

1.1 Introduction to Elementor Cloud Hosting

1.2 Why Choose Elementor Cloud Hosting?

1.3 Setting Up Elementor Cloud Hosting

1.4 Integrating Elementor Cloud with WordPress

1.5 Transitioning from another host

Introduction to Domains & Web

2.1 What is a Domain?

2.2 What is Web Hosting?

2.3 The Relationship Between Domain & Hosting

2.5 How to Choose a Domain and Hosting

Buying Hosting & Domain Names

1. What is a Domain Name?

3. Purchasing a Domain Name

4. What is Web Hosting?

5. Types of Web Hosting

6. Things to Consider When Choosing a Hosting Provider

7. Purchasing Web Hosting

Try Siteground or Cloudways

SiteGround: Overview and Features

Cloudways: Overview and Features

SiteGround vs. Cloudways: Making Your Choice

Installing WordPress Quickly

1. Installing WordPress via cPanel (One-Click Installers):

2. Manual WordPress Installation:

3. Managed WordPress Hosting:

Best Practices After Installation:

Installing WordPress Locally with

Advantages of Using Local by Flywheel:

Website Preview using Mockups:

Installing Elementor & General

2. Accessing Elementor’s General Settings:

3. Key General Settings to Consider:

Note: Elementor frequently updates its features and user interface.

Why Choose Elementor?

Primary Features of Elementor

Understanding the Elementor Interface

3. Delving into Paddings

5. Common Mistakes and How to Avoid Them

Setting up the Global Site Values

Step 1: Accessing Global Settings in Elementor

Step 2: Setting Global Colors

Step 3: Setting Global Typography

Step 4: Setting Global Buttons

Step 5: Setting Form Fields

Step 6: Testing and Tweaking

Creating the Global Header

3. Choosing the Header Template:

4. Customizing the Header:

7. Preview and Publish:

Building our Global Footer

Step 1: Accessing Elementor's Footer Builder

Step 2: Setting Up Your Footer Layout

Step 3: Adding Quick Links

Step 4: Inserting Social Media Icons

Step 5: Displaying Contact Details

Step 6: Adding Copyright Information

Step 8: Setting the Footer to Global

Step-by-Step Guide to Adding the Homepage Banner