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
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.
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
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.
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
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
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
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.
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.
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.
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.
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.
- How to display news on WordPress in a vertical slider
- How to display recent articles in a specific category
- How to rename images on a WordPress blog
- How to fix connectivity error on WordPress
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.
...
I can't change the photo of the cafe on the main page. Could you help? Grateful. 🙂
Hello. I cannot make a mobile version. On smartphone only, I see the computer version.
Greetings ...
Please advise Thierry,
What popular publishing widgets are suitable for this theme?
Hello,
All WordPress plugins and Widgets in principle.
Hello,
New user of WordPress, I seek to modify the images of this theme.
I did very well for the header image but for the others I can't find the functionality.
Is there a particular plug in?
I thank you in advance for your answer
Hi,
Have you looked in the options? Have you tried to edit the images in any of the articles?
Bonjour.
- Can we have a lower reception image?
- Can we insert a logo on this home page?
Thank you
Hello
1. Yes but you need CSS in this case.
2. I never really tried, sorry.
Hello,
I would like to insert 2 buttons with links above the image in the header. How can I do ?
Hello,
You have to have some notions of CSS.
Hello and thank you for this tutorial that allows to do well round this theme wp.
Same request as boobi, I would like the photos highlighted for the parallax effect not to appear in static pages, such as the contact page.
Should we intervene on the theme or is it already planned?
Thank you!
Same question, how to avoid that the photos of the parallax effect are also displayed in the static page example contact page?
Goods.
Hello you can optionally add a CSS code that hides this in customize.
Hello I want to remove the header photo of the individual pages my steps on the article page a way without going through the css? THANKS 🙂
Hello and thank you for your tuto very well explained.
I would like to go further. Let me explain.
I created a child theme at Th2017. I created a new page containing "TITLE" and "TEXT" and a featured image.
This page linked by the menu normally appears when clicking on the menu. Then added the page to the Theme Options.
In addition, in the home page, I have the image then the text “TEXT” in the horizontal sliding banner.
Up to the no worries.
I create in my child theme, a page template from page.php to page_modele.php. I modify this file with “Template Name: Page Modele” and add echo “COUCOU”;.
I create the “TITLE2” page with the “Model Page” page template with image, then I link it to the menu and I add it to the Theme Options.
This page normally appears with "COUCOU" when clicking on the menu.
BUT, IN THE HOME PAGE, I have the image BUT PLUS THE "CUCKOO" TEXT.
Can you help me so that COUCOU appears in the home page.
Note: COUCOU will be a variable coming from a plugin.
Thanks for your help
Sincerely
Hello,
My request concerns the menu of social networking links.
During the first customization of the 2017 theme, not having a Facebook account, I deleted the FB functionality from the menu, leaving only the Email link. I have now created the company's Facebook page but I cannot reactivate this link. I removed the menu of social media links thinking that maybe it would be brought back to the original version. But nothing to do, I do not see how to create it.
Can you help me ?
Thank you
Hi,
Please post this comment in an article related to social networks.
Good evening, the process seems rather simple to me. Maybe with screenshots, we can help you more?
Thank you for the translation of the tutorial. I am stuck on step 4, without explaining it to myself I do not have a menu with options, so it is impossible to organize the different levels of the static page. An idea ?
Good morning Marc,
Can you rephrase?
Hello,
On this new wordpress template, the text does not occupy the entire page, how to change that?
In any case on the home page type "one page"
Thank you
Maud
Hello,
To change the home page you need to know a bit of CSS
I agree with 😉
Hello,
I use the "Twenty Seventeen" theme for my pro site.
I would like to make an identical version with the French text.
Can the "Polylang" plugin be suitable?
Or are there more suitable plugins for this theme?
Thank you
So, the theme has its channels and your blog has the scenes. If you plan to translate the theme. I invite you to use PoEdit. otherwise to translate your blog, PolyLang will do.
THANK YOU !!!!!
Is that the translation of the document that appeared at wpmudev?
Good evening, yes it is.
How to turn dand the footer Proposed by WordPress with twenty seventeen .. Thank you.
CSS must be used.
The new TwentySeventeen theme looks stylish, innovative and attractive.
But for the background color it's only white or gray ??? I tried to change including in the style.css file but it has no effect: ??
For a blog with a professional look, the ideal would be to opt for a paid WordPress theme.
Hello
I installed Twenty seventeen on my WordPress blog
1 I no longer have a comment window at the end of the article
2 how internet users subscribe to the blog
cdlt
Hello Bernard,
Please check your settings or try to activate another theme to see if the problem repeats.