Title: Use WordPress to create a one-page site Published: 23 July 2024 Last modified: 12 November 2024 --- [Home](https://learn.wordpress.org)[Courses](https://learn.wordpress.org/courses/) [Advanced WordPress User](https://learn.wordpress.org/course/advanced-wordpress-user/) Use WordPress to create a one-page site [ Exit Course ](https://learn.wordpress.org/course/advanced-wordpress-user/) 1. a. [ Unlocking advanced SEO techniques: Part 1 ](https://learn.wordpress.org/lesson/unlocking-advanced-seo-techniques-part-1-2/) [Preview](https://learn.wordpress.org/lesson/unlocking-advanced-seo-techniques-part-1-2/) b. [ Unlocking advanced SEO techniques: Part 2 ](https://learn.wordpress.org/lesson/unlocking-advanced-seo-techniques-part-2-2/) [Preview](https://learn.wordpress.org/lesson/unlocking-advanced-seo-techniques-part-2-2/) 2. 2 lessons 3. a. [ Adding custom user roles using a WordPress plugin ](https://learn.wordpress.org/lesson/adding-custom-user-roles-using-a-wordpress-plugin/) [Preview](https://learn.wordpress.org/lesson/adding-custom-user-roles-using-a-wordpress-plugin/) 4. 1 lesson, 1 quiz 5. a. [ Creating custom post types and taxonomies ](https://learn.wordpress.org/lesson/creating-custom-post-types-and-taxonomies/) [Preview](https://learn.wordpress.org/lesson/creating-custom-post-types-and-taxonomies/) b. [ WordPress taxonomies ](https://learn.wordpress.org/lesson/wordpress-taxonomies-2/) [Preview](https://learn.wordpress.org/lesson/wordpress-taxonomies-2/) 6. 2 lessons, 1 quiz 7. a. [ Understand where your files live ](https://learn.wordpress.org/lesson/understand-where-your-files-live/) [Preview](https://learn.wordpress.org/lesson/understand-where-your-files-live/) b. [ Introduction to phpMyAdmin ](https://learn.wordpress.org/lesson/introduction-to-phpmyadmin/) [Preview](https://learn.wordpress.org/lesson/introduction-to-phpmyadmin/) 8. 2 lessons 9. a. [ Using caching to improve website performance – W3 Total Cache plugin ](https://learn.wordpress.org/lesson/using-caching-to-improve-website-performance-w3-total-cache-plugin/) [Preview](https://learn.wordpress.org/lesson/using-caching-to-improve-website-performance-w3-total-cache-plugin/) b. [ Using a CDN to enhance performance ](https://learn.wordpress.org/lesson/using-a-cdn-to-enhance-performance/) [Preview](https://learn.wordpress.org/lesson/using-a-cdn-to-enhance-performance/) 10. 2 lessons, 2 quizzes 11. a. [ Why would a WordPress user need to run a local site? ](https://learn.wordpress.org/lesson/why-would-a-wordpress-user-need-to-run-a-local-site/) [Preview](https://learn.wordpress.org/lesson/why-would-a-wordpress-user-need-to-run-a-local-site/) b. [ How to start using WordPress Playground ](https://learn.wordpress.org/lesson/how-to-start-using-wordpress-playground/) [Preview](https://learn.wordpress.org/lesson/how-to-start-using-wordpress-playground/) 12. 2 lessons, 1 quiz 13. a. [ The building blocks of WordPress templates ](https://learn.wordpress.org/lesson/the-building-blocks-of-wordpress-templates/) [Preview](https://learn.wordpress.org/lesson/the-building-blocks-of-wordpress-templates/) b. [ How Styles are generated ](https://learn.wordpress.org/lesson/how-styles-are-generated/) [Preview](https://learn.wordpress.org/lesson/how-styles-are-generated/) 14. 2 lessons, 2 quizzes 15. a. [ Troubleshooting your site: Plugin and theme conflicts ](https://learn.wordpress.org/lesson/troubleshooting-your-site-plugin-and-theme-conflicts/) [Preview](https://learn.wordpress.org/lesson/troubleshooting-your-site-plugin-and-theme-conflicts/) 16. 1 lesson 17. a. [ Use WordPress to create a one-page site ](https://learn.wordpress.org/lesson/use-wordpress-to-create-a-one-page-site/) [Preview](https://learn.wordpress.org/lesson/use-wordpress-to-create-a-one-page-site/) b. [ Making the most of the Font Library ](https://learn.wordpress.org/lesson/making-the-most-of-the-font-library/) [Preview](https://learn.wordpress.org/lesson/making-the-most-of-the-font-library/) c. [ How to build a responsive WordPress website ](https://learn.wordpress.org/lesson/how-to-build-a-responsive-wordpress-website/) [Preview](https://learn.wordpress.org/lesson/how-to-build-a-responsive-wordpress-website/) d. [ Use the Create Block Theme plugin for exports, and theme variations ](https://learn.wordpress.org/lesson/use-the-create-block-theme-plugin-for-exports-and-theme-variations/) [Preview](https://learn.wordpress.org/lesson/use-the-create-block-theme-plugin-for-exports-and-theme-variations/) 18. 4 lessons, 3 quizzes 19. a. [ What is WordPress Multisite? ](https://learn.wordpress.org/lesson/what-is-wordpress-multisite/) [Preview](https://learn.wordpress.org/lesson/what-is-wordpress-multisite/) b. [ Managing a WordPress Multisite network ](https://learn.wordpress.org/lesson/managing-a-wordpress-multisite-network-2/) [Preview](https://learn.wordpress.org/lesson/managing-a-wordpress-multisite-network-2/) 20. 2 lessons, 1 quiz ### Web design and customization # Use WordPress to create a one-page site ## Smooth scrolling code snippet ```wp-block-code @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } ``` ## Transcript ### Introduction In this lesson we will learn to create a one-page site. We will explore how to create a front page template, create a fixed header, add links and anchors, and implement smooth scrolling. ### Example site Here is the example website I created with my sticky header and when I click on the menu item, it takes me directly to that section on the page. I achieved this by creating in-page links and anchors. As I am creating a one-page website, I have not created any pages, as I am going to add a front page template and build my entire site on the front page template. To do that, let’s make our way to the Site Editor. Select templates and then click on Add new template. Then we can go ahead and add the front page template. Then, I added all the content of my page. As you can see, I’ve added my header with my site logo and Navigation block, a cover section, an about section, a section to display my work as this is a portfolio website for an architect, and then a contact section. I’ve used a forms plugin to add this contact form to my site. And right at the bottom we have our footer. ### Links Let’s start with our header and add links. The first link we will add to our navigation menu is called ‘About.’ In the sidebar settings, below Text is the name of the link, and below Link we write #about, or the name of the link. Then, we do exactly the same for the other two sections. So the second link is called ‘My work’, and then we change the link to #mywork. And then we proceed to the contact navigation item and add #contact below Link. Then, we can go ahead and hit Save. ### Anchors Next we need to add HTML anchors for each section on our page. So to do that select the section in your List View and then make your way to ‘Advanced’ at the bottom of your sidebar settings. Below HTML anchor you add the name of the relevant link. Below the ‘About’ link we added #about, so in this case the HTML anchor would be called ‘about’. When you add your anchor, remember it should be in lowercase and without spaces. Please note that anchors are specific points on your webpage that you can link to directly. Think of them as bookmarks within your page. When you click on a link with an anchor, it takes you straight to that section of the page. Next, we can select the ‘My work’ section and add the HTML anchor. We will type ‘ mywork’ in lowercase without any spaces. Lastly, we can do the same for the contact section. And then click Save. You will notice in the List View, next to each section, that the anchor has been added. On the front end, we can now see our navigation menu is in place, and when we click on a link or a navigation item, it will take us directly to that section. But we still have to make our header sticky. ### Sticky header Let’s return to the front page template. To make our header sticky, we need to wrap our header in a Group block. Once we wrap it in a Group block, we can go to our sidebar settings and below position. We can click on default and then select ‘Sticky.’ Next, I will change the background color of my Group block to the same as my site. Once we hit Save, we can view our site on the front end, and we will see that our header is sticky. And that our anchors are also in place. ### Smooth scrolling The last thing we want to talk about is smooth scrolling. I added some CSS to establish smooth scrolling when moving from one section to the next. In this lesson, we don’t have time to go into depth regarding CSS, but I will show you how you can grab this code snippet to add smooth scrolling to your site. In short, CSS stands for cascading style sheets and determines the appearance of your site by applying rules to the HTML content. To add additional CSS to your site, click on the Styles icon at the top right and then on the three vertical dots. And then click on Additional CSS. As we can see, I have already added a short code snippet to add smooth scrolling to my site. And I will also add it below the video for you to copy and paste. For accessibility, I wrapped this functionality in a preferred reduced motion media query. This respects the user’s preferences and only kicks in when they haven’t explicitly disabled the option on their device. Let’s remove the CSS to see how it impacts our site. When removed, we can return to the front end of our website. And when we click on a link, it takes us directly there with no more smooth scrolling. But we can quickly change that by re-adding the CSS code snippet. ### Conclusion I trust you feel more confident now adding a front page template, a sticky header, labels, anchors, and some CSS code to establish smooth scrolling. ## Practical Use WordPress Playground to create your own one-page site: 1. **Create a front page template:** 2. * Go to the WordPress Site Editor. * Select Templates, then click Add New Template. * Choose Front Page Template to start building your site’s front page. 3. **Add sections to your page:** 4. * Use blocks to create the following sections: - Header - Hero image - About section - Display your work - Contact area - Footer 5. **Add navigation links:** 6. * In your header’s Navigation block, add three links: - “About” – Set the link to `#about`. - “My Work” – Set the link to `#mywork`. - “Contact” – Set the link to `#contact`. * Save your changes. 7. **Add HTML anchors:** 8. * For each section on your page (About, My Work, Contact): - Select the section in **List View**. - In the **Sidebar Settings**, scroll down to the **Advanced** section and find the **HTML Anchor** option. - Enter the corresponding anchor for each section: * For About, type `about`. * For My Work, type `mywork`. * For Contact, type `contact`. * Save your changes. 9. **Make the header sticky:** 10. * Wrap your Header block in a Group block. * In the Sidebar Settings, go to Position, select Sticky to keep the header fixed while scrolling. * Change the background color of the Group block to match the overall design. * Save your changes. 11. **Add smooth scrolling:** 12. * Click the Styles icon in the top right. * Select Additional CSS. * Paste the CSS code snippet at the top of this page to enable smooth scrolling: 13. **Test Your Website:** 14. * Preview the front end of your site. * Click each navigation link (About, My Work, Contact) and ensure it scrolls smoothly to the corresponding section. * Check that the sticky header remains visible as you scroll. * Add a Spacer block or padding if sections don’t appear as you want. This is a preview lesson Register or sign in to take this lesson. [ Take course ](https://learn.wordpress.org/course/advanced-wordpress-user/) [ Sign in ](https://login.wordpress.org/?redirect_to=https%3A%2F%2Flearn.wordpress.org%2Flesson%2Fuse-wordpress-to-create-a-one-page-site%2F&locale=en_US) ## Suggestions Found a typo, grammar error or outdated screenshot? [Contact us](https://learn.wordpress.org/report-content-feedback/).