Creating Your Custom Website with WordPress: A Beginner's Guide

2025-02-27

1. Introduction to Website Creation with WordPress

Welcome to this comprehensive guide on building your own website using WordPress, even without any coding experience. This course is designed for beginners and will walk you through every step of the process, utilizing the latest WordPress technologies. This is an updated version of a popular WordPress course that has helped millions of people create their websites.

In this chapter, we will cover the essential steps, starting from setting up your website’s foundation to customizing its design and content. Whether you need a website for a local business, a personal blog, or any other purpose, WordPress offers the flexibility and ease of use to bring your vision to life.

2. Initial Setup: Domain Name, Hosting, and WordPress

Before diving into customization, it’s crucial to understand the foundational elements of a website. These include a domain name, hosting, and WordPress itself.

2.1 Understanding Domain Names

A domain name is the address people type into their web browser to access your website. It’s your website’s unique identifier on the internet.

Domain Name: A domain name is the unique web address that users type into a browser to find a specific website. It acts as a human-readable alias for the website’s IP address.

Examples of domain names include youtube.com, freecodecamp.org, and wordpress.org. Choosing a relevant and memorable domain name is a crucial first step in establishing your online presence.

2.2 Understanding Hosting

Hosting refers to the service that stores your website’s files and data, making them accessible to visitors worldwide. When someone enters your domain name, their browser requests these files from a server, and the hosting provider ensures these files are readily available.

Hosting: Web hosting is a service that allows individuals and organizations to make their website accessible via the World Wide Web. A hosting provider maintains servers where website files are stored and served to users upon request.

The company providing this server space and service is called a hosting provider. Selecting a reliable hosting provider is vital for website performance and accessibility.

2.3 Introducing WordPress: A Content Management System (CMS)

WordPress is a powerful and user-friendly Content Management System (CMS). It simplifies website creation by allowing you to build and manage your site graphically, without needing to write code like HTML, CSS, or JavaScript.

Content Management System (CMS): A CMS is a software application that enables users to create, manage, and modify content on a website without requiring specialized technical knowledge. It typically includes features for content creation, organization, and publishing.

WordPress is the world’s most popular CMS, powering over 40% of all websites. Best of all, WordPress software itself is free to use, making it an accessible option for everyone.

3. Customizing WordPress for Your Needs

Once WordPress is installed, the real fun begins – customization! You can tailor your website to suit various purposes:

Local Business Website: Showcase services, locations, contact information, and customer testimonials.
Blog: Share your thoughts, expertise, or creative content regularly with an audience.
Portfolio: Display your work, projects, and skills to potential clients or employers.
E-commerce Store: Sell products or services online, manage inventory, and process payments (requires additional plugins and setup, not covered in detail in this introductory chapter).
Community Forum: Create a platform for discussions, user interaction, and shared interests (requires specific plugins and configurations).

WordPress’s flexibility allows you to adapt its design and functionality to match your specific use case.

Use Case: In technology and design, a use case describes a specific scenario or purpose for which a product or system is used. It outlines how a user interacts with the system to achieve a particular goal.

4. Updating Your Website’s Design and Appearance

WordPress offers extensive design customization options. You have control over:

Visual Look: Choose from thousands of themes to define the overall style and layout of your site.
Imagery: Easily upload and integrate your own images to enhance visual appeal and branding.
Color Palette: Select colors that align with your brand identity and create the desired mood for your website.

This course will guide you through these design aspects, enabling you to create a website that truly reflects your vision.

5. Getting Your Domain and Hosting with Hostinger

Acquiring a domain name and hosting are the initial steps that involve a financial investment, although they are relatively inexpensive.

Domain Name Cost: Typically ranges from $10 to $20 per year.
Hosting Cost: For a simple website, hosting often starts around $5 per month.

This course recommends and utilizes Hostinger for domain and hosting services.

Hostinger: Hostinger is a web hosting provider that offers various hosting solutions, including shared hosting, VPS hosting, and cloud hosting. It’s known for its affordable plans and user-friendly interface.

Hostinger is sponsoring this course, and based on personal experience, it is recognized as a reliable hosting provider.

5.1 Choosing a Hostinger Plan

To begin, navigate to hostinger.com. Hostinger offers various plans; for this course, we will select the Premium plan, which is a cost-effective option suitable for beginners.

Premium Plan: In the context of services, a premium plan usually refers to a mid-tier service package that offers a balance of features and affordability, often sitting between basic and business-level plans.

The Premium plan, like most Hostinger plans, includes a free domain name. It also provides 100GB SSD storage, which is sufficient for most beginner websites. More advanced plans offer increased storage and additional features, but the Premium plan is ideal for our current needs.

SSD Storage: Solid State Drive (SSD) storage is a type of data storage that uses flash memory to store data. SSDs are faster and more reliable than traditional Hard Disk Drives (HDDs), leading to quicker website loading times.

5.2 Selecting the Period and Purchasing Hosting

Choose the billing period for your hosting plan. Longer periods, such as 12 or 24 months, often come with significant discounts, reducing the monthly cost. Select the period that best suits your budget and commitment and proceed to continue with the purchase.

5.3 Creating a Hostinger Account and Website

After purchasing your plan, Hostinger will typically guide you through the process of creating your first website. If not, access your Hostinger dashboard and initiate the website creation process.

Choose to create a website and specify that it will be a WordPress site. Remember your WordPress administrator email and password, as these will be needed to manage your website later. For the initial setup, select “Create a blank site.”

5.4 Choosing a Domain Name

As part of the setup, you will be prompted to choose a domain name. With the Premium plan, you receive a free domain. For this demonstration, we will use the example domain isitmondaytoday.com. Your domain name should be relevant to your website’s purpose.

It’s important to note that domain names are unique, and you may need to try a few variations before finding one that is available.

5.5 Selecting a Data Center

You will need to select a Data Center for your website.

Data Center: A data center is a dedicated facility used to house computer systems and associated components, such as telecommunications and storage systems. In web hosting, data centers are where servers that host websites are physically located.

The data center’s location can impact website loading speed, especially for visitors geographically closer to it. Ideally, choose a data center closest to your target audience. However, websites are globally accessible regardless of the data center location. For this example, we will choose a data center in Michigan, as it is geographically relevant.

5.6 WordPress Installation

After selecting the data center, Hostinger will automatically install WordPress on your hosting account. The installation process may vary slightly depending on the hosting provider, but once WordPress is installed, the steps for setting up and building your website are generally consistent across providers.

6. Navigating the WordPress and Hostinger Dashboards

Upon successful WordPress installation, you will be directed to the WordPress dashboard, the administrative control panel for your website.

WordPress Dashboard: The WordPress dashboard is the administrative interface of a WordPress website. It provides access to various website management tools, including content creation, design customization, plugin and theme management, and settings configuration.

You may also encounter a Hostinger-specific onboarding section within the WordPress dashboard, which is unique to Hostinger hosting. This might include features like an AI content creator, which can assist in generating website content.

AI Content Creator: An AI content creator is a tool that uses artificial intelligence to generate text, images, or other forms of content. In the context of web hosting, it can help users quickly create initial content for their websites.

6.1 Connecting Your Domain

Initially, your website might be accessible through a temporary domain provided by Hostinger (e.g., preview-domain.com). To use your chosen domain name (isitmondaytoday.com), you need to connect it within the Hostinger HPanel.

HPanel: HPanel is Hostinger’s proprietary web hosting control panel. It provides a user-friendly interface for managing hosting services, domains, email accounts, and other aspects of your website hosting environment.

Access the HPanel through the provided link or by navigating to the Hostinger homepage. In HPanel, locate the domain connection settings and initiate the process to connect your domain. Domain connection may take up to 24 hours to fully propagate across the internet, but often it’s much quicker.

6.2 Exploring the Hostinger HPanel

While the domain is connecting, take a moment to explore the Hostinger HPanel. This is where you manage your hosting account, including email setup, backups, and other hosting-related settings.

7. Setting Up Email on Your Domain

A professional email address using your domain name (e.g., [email protected]) enhances your website’s credibility. Hostinger provides a free email service with its hosting plans.

7.1 Creating a Free Email Account

Within the HPanel, navigate to the “Emails” section and set up your free email service. Choose a username (e.g., bo) and create a password for your email account.

7.2 Verifying Domain Email

Before finalizing email setup, you may need to verify your domain email address. Hostinger will send a verification email to the email address associated with your domain registration (e.g., the freeCodeCamp.org email in this example). Follow the instructions in the verification email to confirm your domain ownership.

7.3 Accessing Webmail and Sending Test Emails

Once verified, you can access your new email account through webmail, a browser-based email client.

Webmail: Webmail is an email service that allows users to access and manage their emails through a web browser, as opposed to a desktop email client.

You can access Hostinger webmail directly through mail.hostinger.com and log in using your newly created email address and password. Send a test email to ensure your email account is working correctly. You can also configure email forwarding to redirect emails to another email address you regularly use, simplifying email management.

8. Accessing the WordPress Admin Dashboard Directly

While you can access the WordPress dashboard through the Hostinger panel, you can also access it directly by typing your domain name followed by /wp-admin in your browser’s address bar (e.g., isitmondaytoday.com/wp-admin).

This direct access method bypasses the Hostinger panel and takes you straight to the WordPress login page (if you are not already logged in). After logging in, you will be at the WordPress dashboard, regardless of your hosting provider.

9. Exploring the WordPress Dashboard and Website Frontend

The WordPress dashboard is your central hub for managing your website. From here, you can:

Create and edit pages and posts
Customize your website’s design
Install plugins and themes
Manage users
Adjust settings

To view your website as visitors see it, click on your website’s name in the top left corner of the WordPress dashboard. This will open the website frontend, the public-facing part of your site.

Website Frontend: The frontend of a website is the part that users directly interact with. It includes the visual design, content, and interactive elements that are displayed in a web browser.

You will notice a black bar at the top of the frontend when you are logged in as an administrator. This bar is only visible to logged-in administrators and provides quick access to the dashboard and customization options. Regular website visitors will not see this bar.

10. Basic WordPress Settings Configuration

Let’s begin customizing your WordPress website by adjusting some fundamental settings. Navigate to “Settings” in the WordPress dashboard.

10.1 General Settings

In “General Settings,” you can modify:

Site Title: Change the default title to your desired website name (e.g., “Is it Monday Today”).
Tagline: Add a short description or slogan for your website (e.g., “Learn if it is Monday”).
Administrative Email Address: Verify or change the email address associated with website administration.
Date and Time Formats: Customize how dates and times are displayed on your website.
Week Starts On: Set the first day of the week for calendar-related features.

10.2 Permalink Settings

Permalinks are the permanent URLs of your website’s posts and pages.

Permalinks: Permalinks are permanent URLs to your individual web pages, blog posts, and other archives. They are designed to be stable and unchanging, making them ideal for sharing and SEO purposes.

For better SEO (Search Engine Optimization), it is recommended to set your permalinks to “Post name.”

Search Engine Optimization (SEO): SEO is the process of optimizing your website to improve its visibility in search engine results pages (SERPs). Effective SEO can increase organic traffic to your website.

This option makes URLs more readable and includes relevant keywords, which can improve search engine rankings. Avoid the “Plain” setting, which uses post numbers instead of descriptive names.

11. Enhancing Functionality with Plugins and Themes

WordPress’s power and flexibility are largely due to plugins and themes.

Plugins: WordPress plugins are software add-ons that extend the functionality of a WordPress website. They can add new features, integrate with third-party services, and customize various aspects of your site.

Themes: WordPress themes control the visual design and layout of your website. They provide the structure and styling for your site’s frontend, determining how content is presented to visitors.

11.1 Managing Plugins

Plugins are like apps for your website, adding extra features and functionalities. By default, WordPress may come with some pre-installed plugins. You can manage plugins by navigating to “Plugins” in the WordPress dashboard.

It’s good practice to remove unnecessary plugins, especially those you don’t plan to use. For example, you can deactivate and delete the “Hostinger Easy Onboarding” plugin if you prefer to learn the setup process manually.

11.2 Installing Essential Plugins

For this course, we will install three essential plugins:

Elementor Website Builder: A popular drag-and-drop page builder that allows you to create visually appealing pages without coding. Search for “Elementor” in the “Add New Plugin” section, install, and activate it.

Elementor Website Builder: Elementor is a popular WordPress page builder plugin that offers a drag-and-drop interface for creating and customizing website pages visually. It simplifies web design and is widely used by both beginners and professionals.
WPForms: A user-friendly form builder that simplifies creating contact forms and other types of forms. Search for “WPForms,” install, and activate it.

WPForms: WPForms is a WordPress plugin designed to create various types of forms, including contact forms, surveys, and registration forms. It offers a drag-and-drop interface and is known for its ease of use.

11.3 Installing and Activating a Theme

Themes control your website’s design. Navigate to “Appearance” > “Themes” and click “Add New.” Search for the Astra theme.

Astra Theme: Astra is a lightweight and highly customizable WordPress theme known for its speed and compatibility with page builders like Elementor. It offers a wide range of customization options and is a popular choice for various types of websites.

Astra is a fast and lightweight theme that works seamlessly with Elementor. Install and activate the Astra theme.

11.4 Utilizing Starter Templates

Astra offers starter templates, pre-designed website layouts that you can import and customize.

Starter Templates: Starter templates are pre-designed website layouts provided by theme developers. They offer a quick way to set up a website with a professional design, which can then be customized to fit specific needs.

After activating Astra, you will find “Starter Templates” under “Appearance” > “Astra Options.” Install and activate the Starter Templates plugin. When prompted, choose Elementor as your page builder.

Browse through the available templates and select one that aligns with your desired website style. Remember, all templates are fully customizable. For this example, we will choose a nature-themed template as a starting point, but any template can be adapted. You can preview and customize aspects like fonts and color palettes before importing a template.

Once you select a template, you can choose to import the complete website or individual pages. For this course, we will import the complete website to get a fully functional starting point.

12. Customizing Website Design with Elementor

With a template installed, you can begin customizing your website’s content and design using Elementor.

12.1 Customizing the Logo

Let’s start by creating and changing the website logo. We will use Canva, a user-friendly online graphic design tool.

Canva: Canva is a popular online graphic design platform that offers a wide range of templates and tools for creating visual content, including logos, social media graphics, presentations, and more.

Create a Logo in Canva: Go to canva.com and search for logo templates. Create a simple logo relevant to your website’s theme. For our “Is it Monday Today” website, we will create a calendar-themed logo with a large “M” for Monday.
Download Logo Versions: Download two versions of your logo:
- Black Logo: For light backgrounds.
- White Logo: For dark backgrounds. Ensure you download them with a transparent background and at a size of 250x250 pixels.

12.2 Changing the Logo in WordPress

To change the logo on your website:

Access WordPress Customizer: Click the “Customize” button in the WordPress admin bar.
Edit Header: Hover over the existing logo in the header, and an “Edit” icon (pencil icon) should appear. Click on it.
Change Image: In the Customizer sidebar, click “Change Image” to replace the existing logo.
Upload Logos: Drag and drop your black and white logo files into the media library.
Select Logo: Choose the white logo for the main header and click “Choose Image.”
Adjust Logo Size (Optional): Use the logo width settings in the Customizer to adjust the logo’s size as needed.
Publish Changes: Click “Publish” in the Customizer to save your logo changes.

You might notice a second logo in the footer. Repeat the process to update the footer logo, this time using the black logo for better visibility on a potentially lighter footer background.

12.3 Understanding Header and Footer Customization vs. Elementor

It’s important to understand that header and footer elements are typically customized through the WordPress Customizer, while the main page content is edited using Elementor.

WordPress Customizer: The WordPress Customizer is a built-in tool that allows users to customize various aspects of their website’s appearance in a live preview environment. It’s primarily used for site-wide design settings, such as header, footer, colors, and typography.

The Customizer controls site-wide elements like headers, footers, and menus that are consistent across all pages. Elementor, on the other hand, is used to design and modify the content within individual pages.

12.4 Editing Page Content with Elementor

To customize the main content of your pages, you will use the “Edit with Elementor” option.

Navigate to Page: Go to the page you want to edit (e.g., your homepage) on the website frontend.
Click “Edit with Elementor”: Click the “Edit with Elementor” button in the WordPress admin bar. This will open the Elementor editor for that page.

12.5 Customizing Text and Styles in Elementor

In Elementor, you can visually edit text and styles:

Select Text Element: Click on the text element you want to modify.
Edit Text Content: In the Elementor sidebar on the left, under the “Content” tab, you can directly edit the text.
Customize Styles: Go to the “Style” tab to adjust text alignment, typography (font, size, weight), text color, text stroke, text shadow, and more.
Advanced Settings: The “Advanced” tab allows you to control margins, padding, and other layout and positioning properties.

12.6 Changing Background Images in Elementor

To change the background image of a section or container:

Select Section/Container: Click the six dots at the top of the section or container you want to modify. This will select the entire section or container for editing.
Go to Style Tab: In the Elementor sidebar, go to the “Style” tab.
Background Settings: Under “Background,” you will find options to change the background type (classic, gradient, video) and image.
Choose New Image: Click “Choose Image” to select a new background image from your media library or upload a new one.
Adjust Background Options: Explore other background options like position, size, repeat, and overlay to fine-tune the appearance.

12.7 Adding and Modifying Sections and Containers in Elementor

Elementor uses a structure of sections and containers to organize page content.

Sections: Represent broad rows on your page.
Containers: Divide sections into columns or areas to structure content within a section.

You can add, delete, duplicate, and rearrange sections and containers to create your desired layout. To add a new section, click the ”+” icon in Elementor and choose a section structure (e.g., single column, two columns, etc.). To add a container within a section, right-click on an existing container and select “Add New Container” or choose a layout when adding a new element.

12.8 Adding Emojis and Updating the Features Section

For our “Is it Monday Today” website, we will customize the “Features” section. Instead of images, we will use emojis to represent features.

Delete Existing Images: In the “Features” section, click on each image element and press “Delete.”
Replace with Emoji Headings: Click on each heading element within the features section. In the “Content” tab, replace the heading text with relevant emojis (e.g., a calendar emoji 📅).
Adjust Emoji Size: Go to the “Style” tab for each heading (emoji) and increase the “Size” under “Typography” to make the emojis larger. Center-align the emojis.
Update Feature Text: Modify the text descriptions below each emoji heading to list the website’s features (e.g., “100% Accurate Monday Detection”).

12.9 Updating the Quote and About Sections

Similarly, update the “Quote” and “About” sections with relevant text and images. Replace placeholder content with content appropriate for your website.

12.10 Linking Buttons to Pages

Buttons in Elementor can be linked to internal pages or external URLs. To link a button:

Select Button: Click on the button element you want to link.
Go to Content Tab: In the Elementor sidebar, go to the “Content” tab.
Link Field: In the “Link” field, start typing the name of the page you want to link to (e.g., “About”). Elementor will suggest matching pages. Select the correct page, and Elementor will automatically insert the page’s URL.

12.11 Contact Page Setup

The contact page often includes a contact form. The template likely includes a placeholder form. We will customize this form later using WPForms. For now, focus on updating the background image and other visual elements of the contact page using Elementor.

12.12 Adding New Sections and Widgets

Elementor offers a wide range of widgets, which are content elements you can drag and drop onto your pages.

Widgets: In WordPress, widgets are small blocks of content that can be added to various areas of a website, such as sidebars, footers, and now page content areas using page builders like Elementor. They provide pre-built functionalities and content elements.

To add new sections or widgets:

Click ”+” Icon: Click the ”+” icon in Elementor to add a new section.
Choose Structure (Optional): Select a section structure if desired.
Drag Widgets: From the Elementor widget panel on the left, drag and drop widgets (e.g., Heading, Image, Text Editor, Video, Map) into your sections or containers.
Customize Widgets: Customize the content and style of each widget using the Elementor sidebar.

12.13 Text Shadow and Contrast Adjustments

To improve text readability, especially against background images, you can adjust text color and add text shadows. In Elementor, under the “Style” tab for text elements, you can find options for “Text Color” and “Text Shadow.” Experiment with different colors and shadow settings to enhance contrast and readability.

12.14 Publishing and Viewing Changes

After making changes in Elementor, always click the “Publish” or “Update” button at the bottom left of the Elementor sidebar to save your work and make the changes live on your website. To view the live page, click the “Preview Changes” icon (eye icon) next to the “Update” button.

13. Making Your Website Dynamic with HTML and JavaScript

To make your website more interactive and dynamic, you can add custom code. For our “Is it Monday Today” website, we will add a dynamic element that displays whether it is Monday or not.

Elementor provides an HTML widget that allows you to embed custom HTML, CSS, and JavaScript code directly into your pages.

HTML Widget: In Elementor and other page builders, the HTML widget is a tool that allows users to insert custom HTML code directly into a webpage. This is useful for embedding scripts, custom elements, or content that requires HTML markup.

Add HTML Widget: In Elementor, search for “HTML” in the widget panel and drag the HTML widget to the desired location on your page (e.g., below the main heading on the homepage).

13.2 Custom HTML Code for “Is it Monday?” Functionality

Paste the following HTML and JavaScript code into the HTML widget’s code area:

<div id="monday-status"></div>
<script>
  const dayOfWeek = new Date().getDay();
  const messageElement = document.getElementById('monday-status');
  if (dayOfWeek === 1) {
    messageElement.textContent = 'Yes, it is Monday!';
  } else {
    messageElement.textContent = 'No, it is not Monday. Enjoy your ' + getDayName(dayOfWeek) + '.';
  }

  function getDayName(dayIndex) {
    const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    return days[dayIndex];
  }
</script>

This code uses JavaScript to:

Get the current day of the week.
Check if it is Monday (day index 1).
Display “Yes, it is Monday!” if it’s Monday.
Otherwise, display “No, it is not Monday. Enjoy your [Day of the week].“

13.3 Testing and Adjusting the Code

After adding the code, publish your page and view it live. The dynamic message should display based on the current day. You can modify the JavaScript code to change the messages, styling, or logic as needed.

Menus are essential for website navigation. WordPress provides a menu management system accessible through the dashboard.

Navigate to “Appearance” > “Menus” in the WordPress dashboard. This will take you to the menu management interface.

WordPress allows you to create and manage multiple menus. The primary menu, often located in the header, is typically called “Main Menu” or “Primary Menu.” Select your main menu to edit it.

In the menu editor, you can:

Rearrange Menu Items: Drag and drop menu items to change their order in the menu.
Add Pages to Menu: In the “Pages” section on the left, select pages you want to add to the menu and click “Add to Menu.”
Remove Menu Items: Expand a menu item and click “Remove” to delete it from the menu.
Create Submenus: Drag a menu item slightly to the right under another menu item to create a submenu (dropdown menu).

14.4 Creating a New Page (Monday Memes)

Let’s create a new page called “Monday Memes” to showcase Monday-related memes.

Go to Pages > Add New: In the WordPress dashboard, navigate to “Pages” > “Add New.”
Title Page: Enter “Monday Memes” as the page title.
Rename Permalink (Optional): WordPress automatically creates a permalink based on the title. You can edit the permalink if needed (usually not necessary).
Publish Page: Click “Publish” to save the page.

14.5 Adding Content to the Monday Memes Page with Elementor

To design the “Monday Memes” page:

Edit with Elementor: Click “Edit with Elementor” on the “Monday Memes” page.
Add Heading: Drag a “Heading” widget to the page and enter “Monday Memes” as the heading text.
Add Flexbox Container: Add a new section and choose a “Flexbox” container layout for better responsiveness. Select a four-column layout.
Add Image Widgets: Drag “Image” widgets into each of the four columns in the flexbox container.
Upload Meme Images: Upload Monday meme images to your media library and select one for each image widget.
Add Alt Text: For each image widget, add descriptive alt text in the “Content” tab.

Alt Text (Alternative Text): Alt text is a short text description of an image that is embedded in the HTML code of a webpage. It serves several purposes, including providing accessibility for visually impaired users and displaying text if an image fails to load.
Publish Page: Click “Publish” to save your “Monday Memes” page.

To include the “Monday Memes” page in your website’s navigation menu:

Go to Appearance > Menus: Navigate to “Appearance” > “Menus” in the WordPress dashboard.
Add Monday Memes Page: In the “Pages” section, find the “Monday Memes” page (you may need to click “View All”). Select the “Monday Memes” page and click “Add to Menu.” It will be added to the bottom of your menu.
Rearrange Menu Item: Drag the “Monday Memes” menu item to the desired position in your menu (e.g., below “Home”).
Save Menu: Click “Save Menu” to update your menu.

14.7 Fixing the Logo on the Monday Memes Page

If you notice the logo is not displaying correctly on the “Monday Memes” page (e.g., using the wrong logo version), you can adjust it in the Customizer:

Go to Customize: Click “Customize” in the WordPress admin bar.
Header Settings: Navigate to the header settings in the Customizer (usually under “Header Builder” or “Header”).
Change Logo: Find the logo settings and ensure you have selected the appropriate logo version (e.g., dark logo for a light background header).
Publish Changes: Click “Publish” to save your logo changes.

14.8 Fixing the Site Title

If the site title reverted to the template’s default title (e.g., “Love Nature”), correct it in the general settings:

Go to Settings > General: Navigate to “Settings” > “General” in the WordPress dashboard.
Update Site Title: Change the “Site Title” field back to your desired website name (e.g., “Is it Monday Today”).
Save Changes: Click “Save Changes” at the bottom of the page.

15. Finalizing the About and Contact Pages

Let’s complete the customization of the “About” and “Contact” pages.

15.1 About Page Customization

Navigate to About Page: Go to your “About” page on the website frontend.
Edit with Elementor: Click “Edit with Elementor.”
Customize Sections: Update the background image, text content, headings, images, and any other elements on the “About” page to reflect your website’s purpose and information.

15.2 Contact Page Customization

Navigate to Contact Page: Go to your “Contact” page on the website frontend.
Edit with Elementor: Click “Edit with Elementor.”
Customize Sections: Update the background image, contact information (email, social media links), and remove any unnecessary sections (e.g., phone number, location if not needed).

15.3 Form Customization with WPForms

The contact form on the “Contact” page is managed by WPForms. To customize it:

Go to WPForms > All Forms: In the WordPress dashboard, navigate to “WPForms” > “All Forms.”
Edit Contact Form: Find your contact form (usually named “Contact Form”) and click “Edit.”
Add Dropdown Field: In the form builder, drag a “Dropdown” field from the left panel to your form.
Customize Dropdown Choices: Click on the dropdown field to edit its options. Enter relevant choices for your dropdown menu (e.g., “Monday Verification,” “Monday Meme Submission,” “Monday Support Group,” “Other Day Related Confusion”).
Hide Label (Optional): In the dropdown field settings, under “Advanced,” you can choose to “Hide Label” if you don’t want the “Dropdown” label to appear on the form.
Save Form: Click “Save” in the WPForms editor to save your form changes.

15.4 Testing the Contact Form Email

After customizing the form, test it to ensure it works correctly:

Go to Contact Page: Visit your “Contact” page on the website frontend.
Fill Out Form: Fill out the contact form with test data and submit it.
Check Email: Check the email inbox associated with your website’s admin email address (or the email address specified in WPForms notification settings). Also, check your spam folder, as initial emails from new forms might sometimes be filtered as spam.

The website footer, usually located at the bottom of every page, can be customized through the WordPress Customizer.

Go to Customize: Click “Customize” in the WordPress admin bar.
Footer Settings: Navigate to the footer settings in the Customizer (usually under “Footer Builder” or “Footer”).
Edit Footer Elements: You can typically edit footer elements like the footer menu, copyright text, and add widgets or HTML.

To add social media icons to your footer:

Add Social Element: In the footer settings of the Customizer, look for an option to add social icons or a social menu (this may vary depending on your theme).
Configure Social Links: Add links to your social media profiles (e.g., Twitter/X, YouTube) and choose appropriate icons.
Publish Changes: Click “Publish” to save your footer customizations.

17. Ensuring Website Responsiveness and Mobile Optimization

Website responsiveness means your website adapts and displays correctly across different devices and screen sizes (desktops, tablets, mobile phones).

Website Responsiveness: Responsive web design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes. A responsive website adapts its layout and content to fit the screen of the device it is being viewed on.

17.1 Device Preview in Elementor

Elementor provides device preview modes to check responsiveness:

Enter Elementor Editor: Edit any page with Elementor.
Device Mode Icons: In the bottom toolbar of the Elementor editor, you will see device mode icons for Desktop, Tablet, and Mobile (phone).
Preview in Different Modes: Click on each device icon to preview how your page looks on different screen sizes.

17.2 Mobile-Specific Image Selection

For optimal mobile viewing, you can choose different background images for mobile devices:

Select Section/Container: In Elementor mobile preview mode, select the section or container with the background image you want to change for mobile.
Go to Style Tab: In the Elementor sidebar, go to the “Style” tab.
Device-Specific Background Image: Under “Background,” you might see device icons next to the image selection option. Click the mobile icon and choose a different image specifically for mobile view.

Header menus often transform into a “hamburger menu” (three horizontal lines icon) on smaller screens for better mobile navigation. You can customize the appearance of the hamburger menu in the Customizer:

Go to Customize: Click “Customize” in the WordPress admin bar.
Header Settings: Navigate to header settings in the Customizer.
Mobile Menu Style: Look for mobile menu style or toggle button style options. You can often choose different styles for the hamburger menu icon.
Publish Changes: Click “Publish” to save your header menu responsiveness settings.

18. Adding a Blog to Your Website

WordPress was originally designed as a blogging platform, and adding a blog to your website is straightforward.

18.1 Creating a Blog Page

First, create a dedicated page to display your blog posts:

Go to Pages > Add New: In the WordPress dashboard, navigate to “Pages” > “Add New.”
Title Page: Enter “Blog” or “Monday Blog” as the page title.
Publish Page: Click “Publish” to save the page. This page will serve as the index page for your blog posts.

18.2 Setting the Blog Page in Reading Settings

Tell WordPress which page should be used as your blog index:

Go to Settings > Reading: Navigate to “Settings” > “Reading” in the WordPress dashboard.
Posts Page Setting: In the “Your homepage displays” section, find the “Posts page” dropdown. Select the “Blog” page you just created (e.g., “Monday Blog”).
Save Changes: Click “Save Changes” at the bottom of the page.

18.3 Exploring Blog Posts

WordPress uses “Posts” for blog content. Navigate to “Posts” in the WordPress dashboard to manage your blog posts. You will likely see a default “Hello World” post.

18.4 Creating Blog Posts Manually or with AI Content Creator

You can create blog posts in two ways:

Manually: Go to “Posts” > “Add New” and write your blog post using the WordPress editor (block editor or Elementor, if you prefer).
AI Content Creator (Hostinger Specific): If you are using Hostinger, you can utilize the AI content creator tool in the Hostinger panel to generate blog post drafts based on topics and keywords.

18.5 Editing Blog Posts

You can edit blog posts using the WordPress block editor or, for more visual control, use “Edit with Elementor” on individual posts.

Include your blog page in your website’s navigation menu:

Go to Appearance > Menus: Navigate to “Appearance” > “Menus.”
Add Blog Page: In the “Pages” section, find your “Blog” page and click “Add to Menu.”
Rearrange Menu Item: Position the “Blog” menu item in your desired location.
Save Menu: Click “Save Menu.”

18.7 Customizing Blog Post List Appearance

You can customize how your blog post list (index page) looks in the Customizer:

Go to Customize: Click “Customize.”
Blog Settings: Look for “Blog” or “Blog Posts” settings in the Customizer.
Blog Archive/Post List Settings: You can often customize the layout (grid, list), content display (full text or excerpt), display of featured images, post meta (date, author, comments), and more.
Publish Changes: Click “Publish” to save your blog list appearance settings.

19.1 Deleting Test Blog Posts

Once you are satisfied with your blog setup, you can delete any default or test blog posts:

Go to Posts > All Posts: Navigate to “Posts” > “All Posts.”
Trash Posts: Hover over the test post title and click “Trash.” You can also select multiple posts and use the bulk actions dropdown to move them to trash.

Review your website footer across different screen sizes to ensure alignment and readability. If elements are misaligned, you may need to adjust footer content or layout in the Customizer.

For longer menu items, especially on smaller screens, you might need to shorten the text labels displayed in the menu without changing the actual page titles.

Go to Appearance > Menus: Navigate to “Appearance” > “Menus.”
Edit Navigation Label: Expand the menu item you want to adjust (e.g., “Monday Memes”).
Change Navigation Label: In the “Navigation Label” field, enter a shorter label (e.g., “Memes”). The page title remains “Monday Memes,” but the menu will display “Memes.”
Save Menu: Click “Save Menu.”

20. Conclusion

Congratulations! You have now learned the fundamental steps to create your own custom website using WordPress without coding. This chapter has covered everything from setting up your domain and hosting to customizing your website’s design, adding dynamic content, and creating a blog.

Remember to continue experimenting with WordPress’s features, plugins, and themes to further enhance your website and tailor it perfectly to your needs. With practice and exploration, you can build a unique and effective online presence. Thank you for learning, and enjoy building your website!