As I told you in a previous tutorial, WordPress offers a new default theme. This theme, designed for corporate websites, marks a remarkable departure from the default WordPress themes that in the past were designed for blogging and reflects WordPress' most significant transition from a blogging platform to a versatile platform.

If you are planning to give Twenty Seventeen a try, you will quickly understand something: This default WordPress theme is different from its predecessors. The previous default themes imposed a minimum configuration which resulted in only a functional blog. Well that's not the case with Twenty Seventeen.

Of course, you can use it as a blog theme, but I remind you that this is not what it was designed specifically for. It was actually designed to create corporate websites using a home page with sections, which you can easily distinguish by watching its demo.

See also How to install a plugin in WordPress

The result of this shift in focus is that setting up Twenty Seventeen takes a bit longer than the previous default WordPress themes.

In this tutorial, we'll explore Twenty Seventeen, see what it has to offer, and I'll walk you through setting up this WordPress theme so that you can easily create a homepage for your website. business.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

Twenty Seventeen Overview

Presentation twenty seventeen

The use of a landing page - Landing Page - to serve as a home page for corporate websites has become trendy. With Twenty Seventeen, it's easy to create a landing page for a business website.

To get an idea of ​​its possibilities, take a look at the official demo of the WordPress theme Twenty Seventeen. Right off the bat, you'll notice the video header. Scroll down a bit and the sectional design of the page will appear. Each section is separated by a striking parallax background image that occupies the entire width and height of the window.

Navigation is simple with a sticky top navigation bar, and a single font, " Libre Franklin Which is used throughout the theme.

We advise you to consult How to Add a Custom Navigation Menu to WordPress

When properly set up, Twenty Seventeen displays a professional look modern, built on readable font selections and a strong use of striking visuals balanced by the use of generous whitespace.

How do I create a home page with Twenty Seventeen?

Going in the same direction as Matt Mullenweg, when he spoke of the importance of the Customizer, so it is not surprising that most of the tasks performed on " Twenty Seventeen Are in the Customizer.

Wordpress 47 customization

Besides the standard functions such as menu and configuration, with the Customizer widgets you can define a header image or video, use different color schemes, and affect the content of sections of your page.

See also How to customize the CSS of your WordPress website

WordPress 4.7 also introduces a new feature called "visible editing shortcut": they appear as blue icons like in the previous image. Clicking on one of these shortcuts will open the field which will allow you to modify the section in the Customizer. 

This makes it quite easy to change the features of Twenty Seventeen like the header image, tagline and title and the content that appears in each section of a page. You just have to find the content you want to edit, then you click on the "visible editing shortcut" and customize the content in question.

Go further by discovering How to add infinite scrolling to a WordPress blog

WordPress also comes with a new Customizer feature called " Additional CSS ". We have already talked about this feature before. This is a feature specific to WordPress and not to " Twenty Seventeen ».

To show you how to set up Twenty Seventeen I will install the theme as if I were to use it for my personal website.

Step One: Create a page for each section

Create a page for each section

The first thing you need to do is create a few pages:

  • Create a page that will be your static home page.
  • Create a page that will display blog posts.

How to put your WordPress website in Maintenance mode ? click on this link

Create up to four additional pages to contain the content that will be displayed in the sections of the home page. Create three additional new pages if you plan to use your blog or as one of the sections of the home page.

Consult How to make columns on WordPress without plugins

In the case of my example, I created a home page, a blog page, an about page, a services page, and the contact page.

Step 2: Add an image to the front page

In order to get the parallax effect on the images, you need to add a large front page image for each page, which will be part of the sections of the first page. You probably won't want to add a featured image to the home page you created in the previous step, but you can add a featured image to all of the other pages.

Featured image wordpress

The demo of « Twenty Seventeen Uses images whose dimensions are 2000 pixels wide by 1200 pixels high. Images that approach these sizes are recommended. You understand that you should not use small images.

Discover 5 WordPress Page Builder Plugins -page Builder

You will find a lot of free images in " StockSnap And most have good dimensions.

Step 3: Assign home pages and blog page

Static wordpress home page

Now it's time to start customizing. Launch the Customizer, then go to "  Appearance> Customize On the dashboard.

Select the option static homepage And make the following adjustments:

  • Set what the home page displays, select the radio button for a static page.
  • From the home page menu, select the home page of the website.
  • On the Items Page menu, select the page that will display the articles.

Do not forget to save your changes.

Step 4: Assign the other pages to the sections of the home page

Twenty seventeen theme section

You can now assign the different pages you have previously created to the sections in the " Theme Options ". Use the drop-down menus to assign each page to each section according to the relevance you assign to them.

Step 5: Create your main navigation menu

You can create your navigation menu directly from the Customizer interface or from your dashboard. In both cases, the creation of the menus in WordPress has not changed.

Step 6: Add a video header

Twenty seventeen header video

Next, we'll replace the header image with a video. Go to the corresponding section on Customizer by clicking on the appropriate "visible editing shortcut" or locate " Media header ».

Download or select the video you want to use. Alternatively, you can also provide the URL of a YouTube video to display in the header if you wish.

Again, make sure, for quality needs, to choose a video with large dimensions.

twenty seventeen demonstration

At this point, everything should work normally. We will offer you later more tutorials on the customization of this new WordPress theme.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. WordPress Restaurant Table Booking

Restaurant Table Booking Manager is a plugin that allows you to manage the reservation of your restaurant's tables online.

Wordpress restaurant table booking

It gives the opportunity with your loyal customers to book a table directly from your WordPress blog. It offers availability management tools, which will prevent you from making mistakes.

You can also use the automatically generated calendar to better track the different bookings.

Download | Demo | Web hosting

2. ShareBang

ShareBang is a revolutionary social sharing WordPress plugin. It offers a complete and elegant experience that will help you increase traffic and improve sales and visibility of your products, pages and blog.

Sharebang ultimate social share buttons for wordpress 1

It supports + 42 from leading social networks, including mobile apps, such as WhatsApp, Facebook, Telegram, Skype, Line, Viber and more. It comes with more than 21 positions dedicated to social sharing buttons, a fully customizable layout, automatic and regular updates, integration with Mailchimp, Mailster and more ...

All of the above features and much more are extremely easy to use lastly to help you gain more subscribers and generate more traffic. Simply join the next generation of social share button plugins.

Download | Demo | Web hosting

3. Octabook

Octabook is a very easy to use WordPress plugin and instant appointment booking tool for almost all types of services and service providers who want to offer online booking from a website.Octabook

It offers several features that include: support for multiple localization, service configuration, dynamic pricing, notifications, support customizable fields for forms, customization of appearance, Google Calendar support, the intuitive dashboard, data export in csv format, and much more.

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

So ! That's it for this tutorial. We hope it will help you create an online store private. Do not hesitate to share with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

If you have suggestions or remarks, leave them in our section Comments.

...