wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog WordPress themes Twenty Seventeen One Page Parallax Scrolling Website Style
Twenty Seventeen One Page Parallax

WordPress themes

Twenty Seventeen One Page Parallax Scrolling Website Style

Last updated on May 18, 2017
Posted on February 25, 2017

Twenty Seventeen one page parallax scrolling website style, is it possible to achieve this? Yes, it is possible. I will show you how to have Twenty Seventeen with Parallax style with two methods, using a plugin, and manual method.

Before we start it, it is important to know, that a lot of people seem to discuss about the “SEO” (Search Engine Optimizations) effect of one page website. This includes the website that uses Twenty Seventeen one page style that we will achieve in this post. So I recommend you doing research about “Parallax one page SEO” in your preferred search engine first without the quotes, before you follow this tutorial. I try to minimize the effect with my tutorial, but if you have different opinion than I do, please leave a comment below.  Or comment in my video on my social media profile, I will be happy to hear your opinion.

After you are sure that you want to have a website that uses Twenty Seventeen parallax style, then we can continue to achieve our goal with a plugin and manually.  In the WordPress Twenty Seventeen demo website (shown in below video) where we will work with, I do not have any sections assigned yet.  Also have no menu setup for the Top Menu location. But, I have already existing menus, and pages, as well as its contents, they are just not yet assigned to Twenty Seventeen. So make sure, before you actually follow this tutorial, you have your pages, with its contents already setup.

Let’s continue..

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

Twenty Seventeen One Page Parallax Scrolling with Page scroll to id Plugin

I chose this method, because it is quick, easy and it works. Don’t forget to click “Save” buttons and clean your cache plugin if you use any cache plugins in each steps below to see the changes.

1. Set your website to have “static front page”. To do this, you can go to your Customizer – Static Front Page – check A static page. Here, I use my “Welcome” page as my Front Page, and my “Blog” as my Posts Page. You can also change this in your website reading settings, as I posted a tutorial years ago but still works in this page. For the static page setting, I also posted a tutorial on changing your home page post.

Static Front Page option
Customizer – Static Page – A static page

2. Set your sections, in the Customizer – Theme Options – assign your pages to section 1, 2, 3, 4. I set my pages as shows in the screenshot below.

Theme options where you can find sections
Theme options – Sections

3.  Optional, if you want to put featured images, then you can add “featured images” to all of your pages that you assigned theme to Twenty Seventeen’s Theme options except the front page, which is in my case “Welcome” page that I assigned in step 1 above.

4. Install, and activate the Twenty Seventeen one page parallax plugin which is called Page scroll to id plugin.

5. Now, we will create a new menu that we will assign to our top navigation bar. I prefer to create a new menu, to separate this menu from other menus, because this menu will have ids that other menu links don’t have.

Twenty Seventeen Auto Scrolling Menu Creation

I named my menu to be, “Dynamic menu”. Then add items, which are “Custom Links” to this menu. These are my menus as example. I use the panel ids to target the scrolling. Also, I add “nofollow” attribute to these menu links. My reason is because this URL has also another URL that has the same content.

Twenty Seventeen One Page Parallax menu setting
Choose your pages – nofollow them
Assign nofollow attribute
Assign nofollow attribute

Change yourdomain.tld to your domain name, mine is wpvidZ.com

Home -http://yourdomain.tld/#masthead (this target the header part of Twenty Seventeen theme)

About – http://yourdomain.tld/#panel1

Blog – http://yourdomain.tld/#panel2

Terms of Use – http://yourdomain.tld/#panel3

Contact -http://yourdomain.tld/#panel4

6. If you do not use featured image, you can skip this step, but if you use featured images for your sections pages, then navigate to your “Page scroll to id” plugin setting in your dashboard, add “-400 in the “Offset” field. For your personal preference, you can adjust this number accordingly to your liking.

Scroll to id plugin option
Type -400 on the Offset

Twenty Seventeen Parallax Auto Scrolling Homepage is Done, What is Next?

If you want, and I think it will be better for your site for your visitors and Search Engines, because both your visitors and SE bots like well-structured website. So you may want to add your important pages links to your homepage.

To do this, we need to create a custom menu to your widget area, in Twenty Seventeen the widget area is on the footer or sidebar for your post pages.

Twenty Seventeen does not have sidebar on a static page, but on a post or “Blog posts” page, you can have a sidebar.

1. Go to your Customizer – Menus.

2. Create a new menu. I called mine as “My pages”, then I added my pages that I think they are important pages.

Important pages are pages that are useful for your visitors to know about you and your website.
Add your important pages
Add your important pages

3. Go back to your Customizer – Widgets. You should see “Sidebar”, “Footer 1”, and “Footer 2” right here.

4. Because I want to add my menu to be in all pages of my website, so I will add my new menu to the “Footer 1“. So choose “Footer 1” (you can use Footer 2 or even sidebar, but as mentioned earlier, sidebar won’t appear in a static page).

Adding Custom Menu in your widgetized footer
Customizer – Widgets – Footer 1 – Custom Menu

5. Add a widget – Custom menu – scroll down in the Custom Menu, write the title of this widget, I typed, “Pages” and then in the drop down menu, I chose my custom menu, in my case was called, “My pages”. Re-order them if you like. Click “Save & Publish” button.

The Manual Method

The method that I wrote above is to achieve this Twenty Seventeen one page scrolling homepage with a plugin help. You can also do this manually. With above method, you can do without a child theme, but this manual method, you will need to create Twenty Seventeen child theme first. Click here to follow the step by step tutorial.

Twenty Nineteen Theme Full Tutorial – Creating a Website

Once you have the child theme, we can continue. Say, we don’t have the “Page scroll to id” plugin installed, if you have, then you need to deactivate or delete it first.

1. Access your child theme files on your server, you can use FTP client or cPanel.

2. Inside the child theme folder, create a folder, called, “js”.

3. Inside the “js” folder, create a new file, called, “scroll_parallax_twentyseventeen.js”. Then add this following code to this file. Thanks to CSS tricks for the snippet.

jQuery(document).ready(function($){

	//Smoothy scroll to panel
$('a[href*="#"]:not([href="#"])').click(function() {
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
      $('html, body').animate({
        scrollTop: target.offset().top+400
      }, 1000);
      return false;
    }
  }
});
});

Save your file.

4. Then, in your functions.php, add this following code;

function my_smooth_parallax_child() {
	if (!is_admin()) {
	if (is_front_page()) {
	wp_enqueue_script( 'my_twentyseventeen_autoscrolling', get_stylesheet_directory_uri() . '/js/scroll_parallax_twentyseventeen.js', '', '1.0', true );
	}
	}
}

add_action('wp_enqueue_scripts', 'my_smooth_parallax_child');

Save.

5. Now, test your site, it should work. Because I use featured images, I add +400 to the .top line of code. Skip this if you don’t use featured images on your section.

You can also try to test your site in Chrome’s incognito browser window to test it on cache-less browser. Before you go, you can also check out my other tutorial on Twenty Seventeen, like changing the copyright code.
That’s all, by now, you can have Twenty Seventeen one page Parallax website style.

one page parallax plugin scrolling theme twenty seventeen

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Twenty Seventeen Footer “Proudly Powered By WordPress” Text
→ Twenty Nineteen Theme Full Tutorial – Creating a Website

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • Twenty Nineteen theme tutorialTwenty Nineteen Theme Full Tutorial - Creating a Website
  • Twenty Seventeen Proudly Powered By WordPress codeTwenty Seventeen Footer "Proudly Powered By WordPress" Text
  • Where your child theme folder should be located inside themesHow To Create WordPress Child Theme Manually or With Plugin
  • How to Remove Twenty Fourteen Author Name or Link
  • How I add thumbnails with Twenty Twelve theme
  • Change Default Green Color WP 2014 Theme
  • Showing Twenty Fourteen Thumbnail in A Smaller Size
  • How To Style WordPress Caption in WP Twenty Fourteen Child
  • Proudly Powered By WordPress Twenty Fourteen
  • Setting Autoplay Twenty Fourteen Slider

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept