Build WordPress & Elementor Site in 7 Days: Beginner’s Guide
- Description
- Curriculum
- FAQ
- Reviews
Create Your First Website Completely from Scratch | Wordpress + Elementor
In this hands-on course, you’ll learn all the essentials to create a professional website from scratch using WordPress and Elementor, even if you have no prior coding experience. We’ll start with the basics, guiding you through setting up a domain and hosting, and installing WordPress. Each step is clearly explained to ensure you’re fully equipped to get your website online.
As you move through the course, you’ll dive deep into Elementor, mastering its powerful design tools to create custom, responsive pages that stand out. You’ll learn to design layouts, add multimedia, and style your site to match your vision effortlessly, focusing on user-friendly and modern web design principles.
This course is ideal for beginners, freelancers, small business owners, and anyone eager to establish a unique online presence. By the end, you’ll have a fully functional website that looks professional and is easy to manage on your own. You’ll also gain valuable skills for optimizing user experience and accessibility, making your site engaging and inclusive.
Whether you’re starting a business, showcasing a personal project, or expanding your skills, this course empowers you to build a website with ease and confidence. Start creating today!
-
1OrbitBuilder - Who We Are?Video lesson
Build a Career with WordPress and Start Earning Big Money!
? Why Take This Course?
Did you know that the demand for WordPress professionals is skyrocketing, and website developers are among the most sought-after experts in the market? With this course, you’ll not only learn how to create stunning, professional websites but also gain the skills to earn substantial income – whether as a freelancer, agency owner, or online service provider.? What Will You Learn?
How to create websites that clients are willing to pay thousands of dollars for.
SEO optimization techniques that increase website value and visibility.
Designing various types of websites, such as portfolios, blogs, e-commerce stores, and more, that generate continuous revenue.
Automating workflows and using plugins to complete projects faster and boost your profits.
? How Can This Boost Your Income?
Custom-built websites can cost anywhere from $1,000 to $10,000 or more – you’ll learn how to create them from scratch.
Freelancers with WordPress expertise can earn consistent monthly income by taking on clients worldwide.
Building your own website could be the start of a lucrative online business, like an e-commerce store or a blog generating passive income from ads.
? Who Is This Course For?
Aspiring professionals who want to start a career in IT without coding experience.
Freelancers aiming to increase their earnings by offering high-demand services.
Entrepreneurs dreaming of creating websites that generate long-term revenue.
? Why Invest in Yourself?
This course isn’t just about acquiring knowledge – it’s your chance to build a career and achieve financial independence. Invest in your skills today and start earning big tomorrow! ? -
2Why Take This Course?Text lesson
-
3Wordpress InstalationVideo lesson
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!
-
4How to Use Wordpress?Video lesson
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!
-
5Setting Up and Using WordPressText lesson
-
6Installing Elementor Builder PluginVideo lesson
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.
-
7Installing Hello Elementor ThemeVideo lesson
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.
-
8Setting Up Hello Elementor and Using Elementor Page BuilderText lesson
-
9Colors & FontsVideo lesson
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.
-
10Global SettingsVideo lesson
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.
-
11Colors, Fonts, Global SettingText lesson
-
12Creating a HeaderVideo lesson
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.
-
13Creating a FooterVideo lesson
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.
-
14Creating a Main Page - Main BannerVideo lesson
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.
-
15Creating a Main Page - Why to Choose Us?Video lesson
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.
-
16Creating a Main Page - About Us & What We DoVideo lesson
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.
-
17Creating a Main Page - Team MembersVideo lesson
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.
-
18Creating a Main Page - Progress BarsVideo lesson
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.
-
19Creating a Main Page - PortfolioVideo lesson
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.
-
20Creating a Main Page - Call to ActionVideo lesson
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.
-
21Creating a Main Page - Making an Adjustments to the Main PageVideo lesson
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.
-
22Templates - What they are and how to use them?Video lesson
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.
-
23Templates - Exporting & ImportingVideo lesson
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.
-
24Templates - Creating a test templateVideo lesson
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.

External Links May Contain Affiliate Links read more