Build WordPress & Elementor Site in 7 Days: Beginner’s Guide

Installing WordPress on Hostinger - Step by Step

In this section, you’ll learn how to install WordPress on Hostinger quickly and effortlessly. Hostinger’s easy installation process makes it an ideal choice for anyone wanting to set up their website without dealing with complex technical configurations.

? What You’ll Learn

• How to set up your hosting account on Hostinger.

• How to use the one-click WordPress installer to launch your site fast.

• Basic WordPress settings to customize your website right from the start.

? Why Choose Hostinger?
Hostinger is one of the most popular hosting providers, offering intuitive tools and fast servers, making it perfect for both beginners and advanced WordPress users alike.

By the end of this lesson, you’ll have a fully functioning WordPress installation and be ready to start building your website!

How to Use WordPress: Overview of Default Tools, Installing LiteSpeed Cache, and Adding Posts

In this section, we’ll guide you through the WordPress dashboard and explain all the default tools and features available in WordPress. Each feature will be described in detail so you can understand its purpose and function. We’ll provide step-by-step instructions so you can follow along independently without relying solely on the video.

? What You’ll Learn

• Navigating the Dashboard: We’ll introduce you to the main WordPress Dashboard, where you’ll find the key sections:

  • Posts: This is where you manage all blog posts. You’ll learn how to add new posts, edit existing ones, and assign categories and tags.

  • Media: This is the library where all your media files, such as images and videos, are stored and managed. You can easily add them to posts and pages.

  • Pages: Here, you’ll create and edit standalone pages, like "About Me" or "Contact."

  • Comments: Manage user comments on your site, including approving, rejecting, or responding to them.

  • Appearance: Customize the look of your site by changing themes, modifying widgets, and organizing your menus.

  • Plugins: Extend WordPress functionality by installing and configuring plugins.

  • Users: Manage site users, their roles, and permissions.

  • Settings: General site settings, including title, language, and writing and reading settings.

• Adding New Posts: We’ll show you how to create your first blog post, step by step, from adding a title and content to uploading images and assigning categories and tags. You’ll also learn how to edit published posts and update them as needed.

• Categories and Tags: We’ll explain the difference between categories and tags and show you how to use them to organize your content, making it easier for visitors to find topics of interest.

• Installing LiteSpeed Cache Plugin: You’ll learn the benefits of using LiteSpeed Cache, one of the best plugins for optimizing WordPress. This plugin not only speeds up page loading but also reduces server load, making your site faster and smoother. We’ll walk you through the installation process and cover the essential settings, such as:

  • Image Optimization – Automatically compress images on your site, significantly improving load times.

  • HTML, CSS, and JavaScript Minification – Reduce file sizes to make your site load faster.

  • Caching Settings – Enable page and element caching to improve performance and reduce loading times.

? Why Read and Understand This?

Each step and feature has been explained so that you can perform them independently using this guide as a reference. By following these instructions, you’ll confidently navigate WordPress, manage your content, and ensure your site runs smoothly. It’s the perfect way to learn WordPress basics both in theory and practice!

Installing Elementor: Basics, Pro Version, and Menu Overview

In this section, you'll learn how to install Elementor – one of the most popular page builders for WordPress. Elementor is a drag-and-drop visual editor that allows you to build websites without any coding knowledge. We’ll start by installing the free version of Elementor, but we’ll also explore the benefits of Elementor Pro.

Free Version vs. Elementor Pro

• Elementor (Free Version): The free version of Elementor provides essential features that are enough to create a basic website. It includes core widgets and tools to help you design and build your site.

• Elementor Pro: The Pro version offers advanced features, such as additional widgets, the ability to design custom headers and footers, dynamic content options, and integrations with popular marketing tools. You can purchase Elementor Pro directly from the developers, or you can explore GPL Pro options.

• Elementor Pro GPL: This is an unofficial version of Elementor Pro, available under the GPL license. It can be found from third-party providers at a lower cost, though it may not include full technical support and regular updates from Elementor.

Elementor Menu Overview

Once you install Elementor, a new "Elementor" section will appear in the WordPress menu. Here’s an explanation of each option:

• Home: Elementor’s homepage, where you can find general information and updates about the plugin.

• Settings: General settings for Elementor. Here, you can configure basic options such as post type support, global styles, and performance settings.

• Submissions: A record of all forms submitted via Elementor. Useful if you use the form widget to keep track of submissions easily.

• Custom Fonts: Add custom fonts that aren’t included in Elementor’s default font library, giving you full control over your typography.

• Custom Icons: Add custom icons to use on your site. You can import icons from outside Elementor’s default icon library.

• Custom Code: A section for adding custom code (CSS, JavaScript) directly to your site. This is useful for adding tracking codes, such as Google Analytics, or for additional styling.

• Role Manager: Controls which user roles can access Elementor’s features. Ideal for multi-user sites to prevent accidental changes.

• Element Manager: Manage available widgets and elements. You can disable the ones you don’t need to help improve site performance.

• Tools: Diagnostic and maintenance tools for Elementor. Options include regenerating CSS, syncing libraries, and restoring default settings.

• System Info: Information about your server and site environment, which can be helpful for troubleshooting or when contacting support.

• Get Help: Quick access to Elementor’s documentation and support. This includes articles and tutorials to help you learn and troubleshoot.

• Add-ons: A list of recommended add-ons you can install to extend Elementor’s functionality.

After this lesson, you’ll understand how to use each of Elementor’s features to customize your website. Choosing between the free and Pro versions depends on your goals and budget – both allow you to create beautiful, functional websites, but Elementor Pro offers more customization options and advanced tools.

Hello Elementor Theme: Lightweight, Fast, and Built for Elementor

In this section, you’ll learn about the Hello Elementor theme – one of the most popular themes designed specifically for use with the Elementor page builder. Hello Elementor is an extremely lightweight, minimalist theme, making it an ideal choice for Elementor users who want complete control over page design without any unnecessary features that could slow down their website.

Why Choose Hello Elementor?

• Lightweight and Fast: Hello Elementor is one of the fastest WordPress themes available. It’s built with maximum performance in mind, making it load faster than most other themes. This makes it a great choice for anyone looking to have a fast, SEO-friendly website.

• Minimalist Design: Hello Elementor comes with no extra styling or settings, providing a "blank canvas" for your designs. All visual and structural elements of the site are created through the Elementor editor, allowing for full customization.

• Seamless Integration with Elementor Pro: Hello Elementor is designed for full integration with Elementor Pro, enabling you to easily create custom headers, footers, archive pages, and 404 pages without additional plugins or coding.

Installing and Setting Up the Hello Elementor Theme

In this lesson, we’ll guide you through the installation and basic setup of the Hello Elementor theme. Step by step, you’ll learn how to install it and configure Elementor to create customized headers, footers, and pages.

Creating Custom Headers and Footers

With Hello Elementor and Elementor Pro, you gain complete control over the look and feel of your site’s header and footer. We’ll show you how to design a unique header and footer that match the style and branding of your website.

Optimizing for SEO and Performance

Hello Elementor is an excellent choice for websites that need to be search-engine-friendly and optimized for speed. In this section, you’ll learn the best settings and practices to make your site as SEO- and performance-optimized as possible.

? Why Use Hello Elementor?

Hello Elementor provides complete design flexibility without the extra elements that could slow down your site. It’s the ideal solution for those who want to build a site that matches their vision, with the confidence that it will be fast, lightweight, and perfectly integrated with Elementor. This theme gives you a solid foundation for creating modern, responsive, and professional websites.

Global Color and Font Settings for Your Site

In this section, we’ll cover the global color and font settings used throughout your site to maintain a consistent design and branding. Here’s the exact configuration for both color and typography.

Global Color Settings

These are the main colors we’ve defined for different elements across the website:

• Primary Color: #0A0118 (Dark purple) – used for main elements that require strong emphasis.

• Secondary Color: #8B96B0 (Grayish purple) – used for secondary elements to complement the primary color.

• Text Color: #282020 (Dark gray) – used for body text, ensuring good readability.

• Accent Color: #B47CFD (Vibrant purple) – used for highlights, buttons, or interactive elements.

Custom Colors:

• Button: #B47CFD (Vibrant purple) – color for standard buttons.

• Button Hover: #FF7FC2 (Bright pink) – hover effect color for buttons to make them stand out.

Global Font Settings

To create a clean, modern, and visually engaging typography style, we’ve chosen the following fonts:

• Primary Font:

  • Font Family: Rubik

  • Size: 37px

  • Weight: 700 (Bold)

  • Text Transform: Capitalize

  • Letter Spacing: 1.2px

  • Word Spacing: 9px

  • Usage: Primarily for main headings and prominent text sections.

• Secondary Font:

  • Font Family: Poppins

  • Size: 22px

  • Weight: 500 (Medium)

  • Usage: Used for subheadings and secondary titles.

• Text Font:

  • Font Family: Poppins

  • Size: Default size from Elementor (usually 14px-16px depending on Elementor settings)

  • Weight: 400 (Regular)

  • Usage: Standard body text throughout the site.

• Accent Font:

  • Font Family: Poppins

  • Weight: 700 (Bold)

  • Size: Default Elementor size for accent text (often used for emphasis within body text)

  • Usage: Used for emphasis within paragraphs or to highlight key information.

Site Settings in Elementor

The Site Settings panel in Elementor allows you to configure global settings for your entire website, ensuring a cohesive look and style across all pages. Here’s an overview of each option available in this section.

Global Fonts

In this section, you can set global fonts that apply to headings, body text, and other elements across your site. This allows you to apply typography changes quickly without editing each individual element. Examples include Primary, Secondary, Text, and Accent fonts, as we discussed earlier.

Theme Style

Typography

Here, you can customize global typography settings for all headings, paragraphs, and text on the site. You can select fonts, font sizes, font weights, letter spacing, line heights, and text alignment, ensuring a consistent text style throughout your site.

Buttons

The Buttons settings allow you to style all buttons on your site. You can change button colors, shapes, sizes, margins, borders, and hover effects, so all buttons across your site have a unified look.

Images

This section lets you globally style images. You can set image borders, rounded corners, shadows, and adjust transparency or color filters to ensure that images match your overall design aesthetic.

Form Fields

Customize the appearance of all form fields on the site. Options include background colors, text colors, borders, and spacing between form fields, allowing you to ensure that your forms match the rest of your design.

Hello Theme Header

If you’re using the Hello Elementor theme, this section allows you to set global header (top menu) styling. You can customize background colors, text colors, spacing, and other header styles for consistency across all pages.

Hello Theme Footer

Similar to the header, this section lets you style the site’s footer when using the Hello Elementor theme. You can configure colors, margins, and other elements that will be applied site-wide.

Settings

Site Identity

Site Identity settings include your site’s logo, site icon (favicon), site name, and tagline. These elements appear in browser tabs, bookmarks, and when your site is shared on social media.

Background

This option allows you to set a global background for the entire site. You can choose a color, image, or gradient to create a cohesive visual effect across all pages.

Layout

The Layout section lets you set general layout rules, including content width, margins, and the width of the header and footer. This helps you adjust the overall appearance of your site’s layout to suit your design.

Lightbox

Lightbox enables images and media to open in a popup overlay when clicked. Here, you can enable or disable the lightbox feature for images and configure options such as colors, transition effects, and background styles.

Page Transitions

This option allows you to add page transition effects when navigating between pages. You can choose a smooth transition effect, such as fade or slide, to add a modern and polished feel to your site.

Custom CSS

The Custom CSS section allows you to add your own CSS styles that apply globally across the site. This is useful for advanced users who want more control over the appearance of elements.

Additional Settings

Additional settings include options such as auto-saving, accessibility settings, integrations with marketing tools, and advanced options related to site performance.

Learn how to create a custom header for your website. Using Elementor, we’ll design a header that includes your logo, navigation menu, and optional elements like social media icons. The header is the first thing visitors see, so making it visually appealing and functional is crucial.

You’ll learn how to create a footer, which typically includes important information like contact details, privacy policy links, and additional navigation links. The footer appears on every page, ensuring consistency and easy access to essential information.

We’ll create the main banner for your homepage, which usually includes an introductory message, a main slogan, and Call-to-Action (CTA) buttons that direct users to other parts of the site.

In this lesson, we’ll design a "Why Choose Us?" section to highlight the key benefits and unique qualities of your business or project. This section helps build trust and encourages visitors to engage with your brand.

Learn how to create an "About Us" section to introduce your business, team, or mission. The "What We Do" part can include a list of services or products. A well-designed About Us section helps build a connection with visitors.

We’ll create a "Team Members" section where you can showcase the people behind your business or project. Adding photos, descriptions, and job titles for each team member helps build credibility and trust with your audience.

This lesson teaches you how to add progress bars, which can illustrate key skills, achievements, or percentages, such as customer satisfaction levels. It’s a visual way to showcase your company’s strengths.

We’ll build a "Portfolio" section where you can showcase past projects, product images, or case studies. The portfolio section demonstrates your experience and the quality of your work to potential clients or customers.

In this lesson, we’ll design a "Call to Action" (CTA) section that encourages visitors to take a specific action, like signing up for a newsletter, contacting your business, or making a purchase. The CTA helps guide users to the most important actions on your site.

Finally, we’ll go over how to make final adjustments and refinements to your homepage. We’ll show you how to review and polish the appearance and functionality of each section so that everything looks cohesive and professional.

In this lecture, we’ll cover the basics of templates in Elementor. You’ll learn what templates are, the types of templates available (such as page templates, section templates, and widget templates), and how to use them effectively in your website design. We’ll also discuss the benefits of templates, including:

• Consistency: Using templates ensures that your design remains consistent across all pages of your website.

• Efficiency: Templates allow you to save time by reusing elements instead of designing from scratch every time.

• Easy Updates: When you update a template, those changes can be applied across multiple pages, making it easy to keep your site up-to-date.

Here, we’ll show you how to export and import templates in Elementor. This feature is extremely useful if you want to use the same design across multiple websites or share templates with other team members. You’ll learn how to:

• Export Templates: Save your custom templates as files that can be downloaded and stored locally.

• Import Templates: Upload existing templates to use on your current website.

• Sharing Templates: Easily share your templates with collaborators or clients, allowing for a streamlined design process.

In this lecture, we’ll create a test template together to understand the complete process from start to finish. You’ll learn how to:

• Create a New Template: Choose a section or page template and design it from scratch using Elementor’s drag-and-drop editor.

• Save and Name Your Template: Save your custom design as a reusable template and give it a recognizable name for easy access.

• Apply the Template: Use your newly created template on different pages or sections of your website. We’ll also explore how to make adjustments to templates after they’re applied and update them for a seamless design experience.

Learn how to create a custom 404 error page that keeps visitors engaged even when they land on a broken or non-existent link. We’ll guide you through designing a 404 page that includes friendly messaging, links to important pages, and a search bar to help users find what they’re looking for.

We’ll build an “About Us” page that introduces your business, mission, and team members to your audience. The About Us page is a key component in building trust and establishing a connection with your visitors, so we’ll explore how to make it both informative and visually engaging.

In this lesson, you’ll create a “Contact” page, which includes essential contact information, a contact form, and possibly a map of your location if relevant. We’ll discuss how to make it easy for visitors to reach out to you, enhancing your communication and customer service.

Here, we’ll design a “Portfolio” page to showcase your work, past projects, or case studies. The portfolio page demonstrates your experience and expertise, allowing potential clients or customers to see the quality of your work. We’ll cover how to display images, descriptions, and testimonials in an attractive layout.