setting up Wordpress Twenty Seventeen Front Page sections

[unleash_it]

hello dear all - good day dear experts and friends on Apachefriends,


i am currently working on the setting up Wordpress Twenty Seventeen Front Page sections for a scrolling-effect working also on mobile
on my freshly installed wordpress-site i am using the great theme Twenty-Seventeen. I like the parallax-effect with the scrolling feature on the Front Page Sections, just like in this demo:

see the demo-page: https://2017.wordpress.net/

theme as if I were going to use it for my personal website. Let’s get right to it. To demonstrate how to set up Twenty Seventeen I’m going to setup the theme as if I were going to use it for my personal website. Let’s get right to it. i follow the How-To of the ideas that are shared here: https://premium.wpmudev.org/blog/twenty ... ess-theme/

Step 1: Create a Page for Each Homepage Section -Creating pages for the Twenty Seventeen WordPress themes.
-Create the pages that you want to display in the front page sections.
-The first thing you need to do is to create a few pages:
-Create a page to serve as your static homepage.
-Create a page to serve as your blog or posts page.
-Create up to four additional pages to contain the content that will be displayed in your homepage sections — make it three additional pages if you plan to use your blog or posts page as one of the homepage sections. In the case of my example website, I created a home page, blog page, about page, services page, and contact page.

Step 2: Add a Featured Image to Each Page
In order to achieve the parallax image effect, you need to add a large featured image to each page that will be part of your front page sections. Set a featured image for every page. The Twenty Seventeen demo uses images that are 2000 pixels wide by 1200 pixels tall.

Step 3: Assign a Static Front Page and a Posts Page: Now it’s time to start customizing. Launch the Customizer — go to Appearance > Customize in the admin area or click Customize on the admin bar while viewing the site front end. Select the Static Front Page menu item and make the following setting adjustments:
Beneath Front page displays, select the radio button for A static page.
From the Front page dropdown menu, select your site home page.
From the Posts page dropdown menu, select your posts or blog page.
finally we have to hit Save & Publish, and then move on to the next step.

Step 4: Assign Pages to Each Front Page Section
To assign the various pages you created previously to the front page sections select the Theme Options menu item from the Customizer. Next, use the drop-down menus to assign each page to the relevant front page section to set the page where it should appear.

Step 5: Create Your Primary Navigation Menu
You can create your navigation menu either by selecting the Menus option from the Customizer menu or by going to Appearance > Menus in the admin area. In either case, creating WordPress menus hasn’t changed in WordPress 4.7, so create a menu just as you have done in the past and assign it to the Top Menu location.

Step 6: Add a Video Header
Next, let’s replace that ho-hum header image with a video. Go to the relevant section of the Customizer by clicking on the appropriate visible edit shortcut ....

cf. i follow the How-To of the ideas that are shared here: https://premium.wpmudev.org/blog/twenty ... ess-theme/


Now I am trying to get that scrolling feature to work on mobile, however when I look at the CSS I found this

Code: Select all

.background-fixed .panel-image {
   
   background-attachment: fixed;
}


afaik - the background-attachment does not work very well on mobile devices.
i am trying out to find some workarounds:

i guess that i have to write css in the style.css file. and it seems mandantory to set background image fixed not a scroll.

Code: Select all

.panel-image {
   background-attachment: fixed;


i think to select only for one class ".panel-image" using media-query like this:

Code: Select all

@media screen and (max-width: 768px) {
  .panel-image {
    background-attachment: fixed;
  }
}


To make background scroll running well - i guess that i have to set the background attachment property to fixed

Code: Select all

.background-fixed .panel-image {
   background-attachment: fixed;
 }
 

To make it work on mobile we have to place above CSS in media query or copy paste the below code in to style.css

Code: Select all

@media screen and (max-width: 768px){
.background-fixed .panel-image {
   background-attachment: fixed;
 }
}
 

i am trying out to find out the best solution - and i look what works best.
i come back here and report all the findings.