Effortless One-Page Websites: WP Astra and Elementor Smooth Scrolling Guide

Preface

Are you ready to create a stunning one-page website that captivates your audience? This guide will walk you through the process of building a seamless, engaging one-page website using the powerful combination of WP Astra and Elementor. Perfect for showcasing your portfolio, promoting a single product, or creating a simple online presence, one-page websites offer a streamlined user experience. This tutorial is tailored for beginners and experienced users alike, providing clear, step-by-step instructions to help you achieve a professional result. Let’s dive in and unleash your creativity!

Why Choose WP Astra and Elementor?

Info: WP Astra is a lightweight, highly customizable WordPress theme known for its speed and SEO optimization. Elementor, on the other hand, is a drag-and-drop page builder plugin that simplifies web design, allowing you to create visually appealing layouts without any coding knowledge.

Combining these two tools gives you the flexibility to design a beautiful and functional one-page website with ease. WP Astra provides the structural foundation and customization options, while Elementor empowers you to build visually stunning sections and elements.

Benefits of a One-Page Website

• Simplicity: Easy to navigate and understand.
• Engagement: Keeps visitors focused on your core message.
• Mobile-Friendly: Often provides a better experience on mobile devices.
• SEO Advantages: Can improve search engine rankings by focusing on specific keywords. Check out this article on how to optimize your website for SEO.

Step 1: Install and Set Up WP Astra

1. Install WP Astra:

   • Go to your WordPress dashboard.
   • Navigate to Appearance > Themes > Add New.
   • Search for “WP Astra” and click Install.
   • Activate the theme.

2. Customize WP Astra:

   • Go to Appearance > Customize.
   • Explore the various customization options, such as Layout, Header, Footer, and Colors.
   • Adjust the settings to match your brand and vision. Remember this comprehensive guide by Astra.

Step 2: Install and Activate Elementor

1. Install Elementor:

   • Go to Plugins > Add New.
   • Search for “Elementor” and click Install Now.
   • Activate the plugin.

   Hint: You can also install Elementor Pro for additional features and templates.

Step 3: Create a New Page

1. Go to Pages > Add New.
2. Give your page a title (e.g., “Home” or “Landing Page”).
3. Click the Edit with Elementor button.

Step 4: Design Your One-Page Layout with Elementor

Adding Sections

1. Add a New Section:

   • Click the + icon to add a new section.
   • Choose a structure that suits your content (e.g., single column, two columns, etc.).

2. Customize the Section:

   • Click the Edit Section icon (six dots).
   • Go to the Style tab to set background colors, images, or gradients.
   • Adjust padding and margins under the Layout tab to create spacing.

Adding Content

1. Drag and Drop Widgets:

   • Use the Elementor widget panel to drag and drop elements like headings, text, images, buttons, and more.

2. Customize Widgets:

   • Click on a widget to edit its content, style, and advanced settings.
   • Use the Content tab to add text, images, and other media.
   • Use the Style tab to customize fonts, colors, and spacing.

Creating Smooth Scrolling

This is where the magic happens. We’ll create smooth scrolling links to different sections of your one-page website.

1. Add an ID to Each Section:

   • Click the Edit Section icon for the section you want to link to.
   • Go to the Advanced tab.
   • In the CSS ID field, enter a unique ID (e.g., “about”, “services”, “contact”).
   • Make sure the CSS ID contains only lowercase letters, numbers, and hyphens, and starts with a letter.

2. Create Menu Links:

   • Go to Appearance > Menus.
   • Create a new menu or edit an existing one.
   • Add Custom Links to the menu.
   • For each link, enter #section-id in the URL field (replace section-id with the actual ID you assigned to the section).
   • Set the Link Text to the name you want to display in the menu (e.g., “About”, “Services”, “Contact”).

3. Enable Smooth Scrolling with Code:

   • The easiest way to implement smooth scrolling is by adding a small snippet of JavaScript code to your theme.
   • You can add this code using a plugin like “Code Snippets” or directly to your theme’s functions.php file. Be careful when editing functions.php; it’s always a good idea to back up your site first. Here’s an article on where to find functions.php
   • Here’s the code:

   jQuery(document).ready(function($) {
     $(‘a[href*=\#]’).on(‘click’, function(event){
       event.preventDefault();
       var target = $(this).attr(‘href’);
       $(‘html, body’).animate({
         scrollTop: $(target).offset().top
       }, 1000);
     });
   });
   

   • Alternatively, you can add the code to a custom JavaScript file and enqueue it in your theme.

   • If you prefer a plugin, you can use a plugin like “Page scroll to id”.

   Info: Using a child theme is recommended to avoid losing customizations when updating your theme.

   Info: The enqueue function is a best practice, that helps to properly load Javascript and CSS files into your WordPress page.

Example Section Structure

For example, let’s create an “About” section:

1. Add a new section with a single column.
2. Add a Heading widget with the text “About Us”.
3. Add a Text Editor widget with some information about your company or yourself.
4. Click the Edit Section icon.
5. Go to the Advanced tab.
6. Enter about in the CSS ID field.

Now, create a custom menu link with the URL #about that points to this section.

Step 5: Optimize for Mobile

Elementor makes it easy to create responsive designs that look great on any device.

1. Responsive Mode:

   • Click the Responsive Mode icon at the bottom of the Elementor panel.
   • Preview your design on desktop, tablet, and mobile.

2. Adjust Settings:

   • Modify font sizes, spacing, and other settings for each device.
   • Hide or show elements based on the device.

Step 6: Add a Sticky Header (Optional)

A sticky header can improve navigation and user experience. While Astra Pro offers a built-in sticky header option, you can also achieve this with custom CSS. You might find this article on how to create a sticky navigation bar with CSS only very helpful.

Here’s a basic example:

.site-header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1000; /* Ensure it stays on top */
}

Step 7: SEO Optimization

Optimize your one-page website for search engines to attract more visitors.

1. Keywords:

   • Use relevant keywords in your headings, content, and image alt tags.

2. Yoast SEO Plugin:

   • Install and activate the Yoast SEO plugin. This article on Yoast SEO gives insights to this plugin.
   • Set a focus keyword for your page.
   • Write a compelling meta description.
   • Optimize your page title.

Step 8: Test and Refine

1. Test Links:

   • Make sure all your smooth scrolling links work correctly.

2. Cross-Browser Compatibility:

   • Test your website on different browsers (Chrome, Firefox, Safari, etc.).

3. Gather Feedback:

   • Ask friends or colleagues to review your website and provide feedback.

Conclusion

Congratulations! You’ve learned how to build a one-page website with smooth scrolling using WP Astra and Elementor. By following these steps, you can create a professional and engaging online presence that effectively showcases your content. Remember to continuously test and refine your website to provide the best possible user experience. Good luck, and happy website building!