How to Building a Stunning Website with Elementor

Building a visually appealing and functional website can often feel like a daunting task, requiring coding and design expertise. But with the help of page builders like Elementor, anyone can easily design and arrange website layouts visually without writing a single line of code. This article will guide you through using Elementor to create engaging website pages, all without the need for technical coding skills.

Understanding the Difference Between Blog Posts and Static Pages

Before we dive into Elementor, it's crucial to understand the difference between blog posts and static pages in WordPress. Blog posts are typically arranged chronologically, with the latest post appearing at the top. Static pages, such as "About Us", "Contact Us", or "Terms and Conditions", don't change frequently and usually reside at the top or bottom of the site menu as part of the website's structure.

Creating a New Page to Showcase Blog Posts

To showcase your already crafted blog posts, we need to create a new page using Elementor. Follow these steps:

1. Create a New Page: Access your WordPress dashboard and create a new page. Choose the same text editor used for writing previous blog posts.

2. Utilize Elementor: Switch to Elementor, a user-friendly interface for visually arranging website layouts through drag-and-drop functionality.

Understanding the Concept of Containers in Elementor

Website page elements are typically organized within containers. Each container serves to arrange various elements within the website. Here are the basic steps involved in using containers in Elementor:

1. Adding Elements to a Container: Click the plus sign in the center of the container to insert elements. For instance, you can add an image, resize it, and duplicate the image.

2. Arranging Elements Within a Container:

   • By default, elements within a container are arranged from top to bottom.

   • You can change the arrangement to left to right.

   • Use the justify content option to arrange element placement (e.g., spread out or centered).

Using Containers to Create Engaging Layouts

Elementor empowers you to create complex layouts with a few clicks:

1. Arranging Two Containers Within a Larger Container: Add one container from the sidebar, then insert two containers inside to create a two-column layout.

2. Utilizing Pre-Made Layouts: Click the plus button on the dotted line and select a pre-made layout to quickly generate a two-column arrangement.

3. Adding Elements Within Containers: As an example, add an image to the right container and text to the left container, adjusting the text element's placement to be horizontally and vertically centered.

Refining Visuals with Advanced Options

Elementor also provides Advanced options for more detailed visual customization:

1. Adjusting Spacing (Padding & Margin):

   • Modify the spacing between text and the container frame for a cleaner look.

   • Change the width of container columns to adjust desired proportions.

2. RWD Adjustments (Responsive Web Design):

   • Modify the layout for different devices like phones and tablets to provide a better user experience.

Adding Blog Posts to Your Created Page

After mastering the basics of Elementor, we can begin adding blog posts to your page:

1. Copying an Image from Another Page: Navigate to an existing page, select the container with a large image, and use ctrl+c to copy it.

2. Editing Content and Images: Return to the empty page and paste the copied container. Edit the text and replace the background image through the style tab.

3. Adding Blog Posts: Prepare another container below, then display blog posts using a free plugin widget like "Unlimited Elements for Elementor."

Customizing Blog Post Layout

You can customize the blog post layout with a few steps:

1. Setting Container Widths:

   • Adjust the main width to 75% and the sidebar to a smaller size, such as 25%.

2. Styling Blog Post Appearance:

   • Define the number of columns to display, button text, and the number of posts per page.

   • Change the image height and title font size according to your preference.

Creating an Informative Sidebar

Sidebars can enrich page content with additional elements like:

1. Adding Recent Posts and Post Category Widgets:

   • Use the "Recent Posts" and "Post Categories" widgets provided by Elementor.

2. Including Vertical Ads:

   • Add affiliate ads in the form of images or animated GIFs, then link them to the ad landing pages.

Designing the Header and Footer with the Astra Theme

While the free version of Elementor has limitations in editing headers and footers, the Astra theme enables some customizations:

1. Editing the Header:

   • Replace the logo, adjust its width, and add menu items to the header.

2. Editing the Footer:

   • Remove all default widgets, create a two-column layout, and add common content like privacy policies and links to social media.

Changing Website Domains and Setting Up DNS

The final step in website development is to replace the temporary domain with your newly purchased domain:

1. Purchase a Domain from Namecheap:

   • Choose a relevant and memorable domain name.

   • Activate domain privacy to protect personal information.

2. Change Domains on Cloudways:

   • Enter your new domain name in domain management.

3. Setting Up DNS:

   • Copy the server's IP address and enter it into Advanced DNS on Namecheap.

   • Add A records and CNAME records, then wait some time for DNS changes to take effect.

Installing an SSL Certificate for Site Security

The final step is to install an SSL Certificate to ensure your site is secure and encrypted:

1. Install the SSL Certificate on Cloudways:

   • Enter your email address and domain name, then click install certificate.

2. Confirm Site Security:

   • Once installation is complete, check your site to ensure the "Not Secure" sign is gone and the site uses HTTPS.

With this step-by-step guide, you can develop an engaging and functional website using Elementor. Good luck, and may this tutorial help you build the website of your dreams!