How to customize the one page Genesis child theme Altitude Pro. #2

paaljoachim · 2022-05-26T20:56:21Z

Transferring the tutorial: https://www.easywebdesigntutorials.com/customizing-altitude-pro-genesis-child-theme/ to this issue, as the tutorial will soon totally change.

Btw You can download my custom theme at: github.com/paaljoachim/3-Custom-Altitude-Pro-Genesis
(It also includes featured image behind the title. From this tutorial: Genesis adding a full width image behind the title )
---> #1

— Updated January 2018 based on Altitude Pro 1.1.3—

— PART 1 —

NB!
Make a duplicate/copy of Altitude Pro theme before modifying it.
I renamed the theme folder to altitude-pro-backup and then opened the style.css and renamed: Theme Name: Altitude Pro backup. Check the themes section and notice you now have a backup of Altitude Pro theme.

NB2! Sometimes Chrome can be really slow and refreshing a site. So even after changing the CSS it might show the old CSS. To help improve on seeing the new adjustments open Inspect (right click and select Inspect). Hold down the mouse button over the refresh and select “Empty Cache and Hard Reload”. This will hopefully make the new changes visible.

Update: I have a fix so that one can quicker see the CSS updates. It will force the cache to refresh. Add the following into the child theme functions file:

// Version CSS file in a theme
wp_enqueue_style( 'theme-styles', get_stylesheet_directory_uri() . 
'/style.css', array(), filemtime( get_stylesheet_directory() . '/style.css' ) );

– Part 1 –

Add static pages. Add a home and blog page.

WordPress backend:
Why? Because we want do not want the blog on the front page (well I do not want to that is).
Change to static pages through Settings -> Reading.
Select the Front and Posts pages.

Add widgets to the Front Page widget sections so all the sections become visible.

WordPress backend:
Go to Appearance -> Widgets add a widget to each Front Page widget area. To see all 7 widget sections on the front page there needs to be a widget in each. I added a text widget where I wrote Front page 2 then a Front page 3 etc all the way up to 7. Check the site. You should now be able to see all the 7 sections. There should be an image in Front Page 1, 3, 5 and 7. Front page 2, 4 and 6 should contain a solid color.

Altitude Pro Widget sections – I used the Black Studio Visual Editor widget plugin and added a widget to each section.

Adding background images to all the Featured Sections

One can add an image for featured section 1,3,5 and 7. I will change this so one can add images for all 7 sections. 1,2,3,4,5,6 and 7. So we have the option to insert an image in any of the sections.

Inside the theme folder -> lib ->
customize.php

Look for where it says:
$images = apply_filters( ‘altitude_images’, array( ‘1’, ‘3’, ‘5’, ‘7’ ) );
(Just below the commented area in the top. It might be line 23.)

Then change it to:
$images = apply_filters( ‘altitude_images’, array( ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’ ) );

output.php
Look for where it says:
$opts = apply_filters( ‘altitude_images’, array( ‘1’, ‘3’, ‘5’, ‘7’ ) );
(Just below the commented area in the top. It might be line 27.)

Then change it to:
$opts = apply_filters( ‘altitude_images’, array( ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’ ) );

Inside the theme root folder ->front-page.php

Look for where it says: // Add markup for front page widgets. (Scroll down the page.)
Inside this area it says front-page-1, front-page-2 etc.

Notice that front-page-1 has:

and notice that front-page-2 has:

We want to change all the solid sections to become image sections.
This means copy:

and replace:

inside front-page-2, 4, 6

This is what front-page-2, 4 and 6 look like after the adjustment:

genesis_widget_area( 'front-page-2', array( 
    'before' => '<div id="front-page-2" class="front-page-2" tabindex="-1"><div class="image-section">
    <div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-2' ) . '">
    <div class="wrap">', 'after'  => '</div></div></div></div>', 
) );

genesis_widget_area( 'front-page-4', array( 
 'before' => '<div id="front-page-4" class="front-page-4" tabindex="-1"><div class="image-section">
 <div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-4' ) . '">
 <div class="wrap">', 'after'  => '</div></div></div></div>', 
) );

genesis_widget_area( 'front-page-6', array( 
  'before' => '<div id="front-page-6" class="front-page-6" tabindex="-1"><div class="image-section">
  <div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-6' ) . '">
  <div class="wrap">', 'after'  => '</div></div></div></div>', 
) );

Go back to the customizer. All 7 sections should now be in place.

There will be broken images on the newly added sections.
(Remove the broken images by clicking Remove or Change Image).
To add a new image click Change Image and replace the broken icon with an image you choose.

A tip!
There are some options if you want to add a color to a front page section.

Create a color jpg image and add it like any other images to the customizer featured image section.
Adding CSS. Remove the images from the Featured Sections you want to add a color to and then add CSS code to a front-page section. Inside the altitude-pro folder is style.css. Open it.

An example. In the customizer I removed the Featured Section 3 image.

In style.css.
I searched for front-page-3. I found 4-5 mentions of front-page-3:

.front-page-1,
.front-page-3,
.front-page-5,
.front-page-7 { 
  background-attachment: fixed; 
  background-color: #fff; 
  background-position: 50% 0; 
  background-repeat: no-repeat; 
  -webkit-background-size: cover; 
  -moz-background-size:    cover; 
  background-size:         cover;
}

I commented out .front-page-3, like so: /* .front-page-3, */ This means that front-page-3 will not pick up the CSS that is added here.
(One can instead remove .front-page-3. I chose to comment it so that I know where it is originally used.)

.front-page-1,
/* .front-page-3, */
.front-page-5,
.front-page-7 {

Just below I added the following CSS:

.front-page-3 {
 background-color: orange; 
}

If you do not see the color try adding an background-color: orange !important;

The color looks dirty because there is a default dark gradient between the sections.

I opened Inspect element in Chrome (right click any area and select Inspect). The two sections seen on the bottom are: (left) the HTML and (right) the CSS. I use Inspect a lot to look at the html and CSS. The CSS can be adjusted by clicking into the tags and adjusting/adding new ones. It is temporary, and a good way to directly see modifications.

NB! We need to add in the new CSS front-page sections

To any place it mentions the front-page-1, 3, 5 and 7 we also need to add in 2, 4 and 6.

Adjust the following CSS:

.front-page-1,
.front-page-2, /* Added */
.front-page-3,
.front-page-4, /* Added */ 
.front-page-5,
.front-page-6, /* Added */
.front-page-7 {
     background-attachment: fixed;
     background-color: #fff; 
     background-position: 50% 0; 
     background-repeat: no-repeat; 
     -webkit-background-size: cover; 
     -moz-background-size:    cover; 
     background-size:         cover;
}

Adjusting the grey/black gradient used as a transition between front page sections.
Inside style.css.

To change the white-grey-black gradient open your style.css and search or scroll to Front Page.

/* Front Page
——————————————— */

The following section contains the gradients I want to change.

.image-section { 
background: -moz-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, 
rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), 
color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9))); 
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,
rgba(0,0,0,0.9) 100%); 
background: -o-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,
rgba(0,0,0,0.9) 100%); 
background: -ms-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,
rgba(0,0,0,0.9) 100%); 
background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,
rgba(0,0,0,0.9) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', 
endColorstr='#e6000000',GradientType=0 ); 
display: table; 
overflow: hidden; 
table-layout: fixed; 
width: 100%;
}

I commented out the dark gradient background and filter code but left display, overflow, table-layout and width in place. Like so:

.image-section {
 /* 
   background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, 
rgba(0,0,0,0.9) 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), 
color-stop(30%,rgba(0,0,0,0.5)), 
color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9)));
   background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,
rgba(0,0,0,0.9) 100%);
   background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,
rgba(0,0,0,0.9) 100%);
   background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,
rgba(0,0,0,0.9) 100%);
   background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,
rgba(0,0,0,0.9) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', 
endColorstr='#e6000000',GradientType=0 ); 
 */
   display: table;
   overflow: hidden;
   table-layout: fixed;
   width: 100%; 
}

The background color and filter are now commented out with /* code /.
Any CSS code you place within a / code */ is hidden and not used.

As I commented out the default gradient it now looks nice and clean.

I wanted to experiment with other CSS gradients so I went online to: https://www.colorzilla.com/gradient-editor/

I made a new gradient and replaced the existing black gradient with the new.

I made a an orange -> light orange -> zero opacity.
Here is the code:

/* Permalink - use to edit and share this gradient: 
https://colorzilla.com/gradient-editor/#f76631+0,d65822+36,e09d62+73,e5dcce+100&0.35+0,0.02+27,0+100 */
background: -moz-linear-gradient(top, rgba(247,102,49,0.35) 0%, rgba(222,92,38,0.02) 27%, 
rgba(214,88,34,0.02) 36%, rgba(224,157,98,0.01) 73%, rgba(229,220,206,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(247,102,49,0.35) 0%,rgba(222,92,38,0.02) 27%,
rgba(214,88,34,0.02) 36%,rgba(224,157,98,0.01) 73%,rgba(229,220,206,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(247,102,49,0.35) 0%,rgba(222,92,38,0.02) 27%,
rgba(214,88,34,0.02) 36%,rgba(224,157,98,0.01) 73%,rgba(229,220,206,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, 
Opera12+, Safari7+ */
filter: 
progid:DXImageTransform.Microsoft.gradient( startColorstr='#59f76631', endColorstr='#00e5dcce',GradientType=0 ); 
/* IE6-9 */

Replace the existing gradient information with the one you make. Be sure to leave display, overflow, table-layout and width in place.
Btw! If you use the same gradient tool that I did be sure and click the top arrows and change the opacity so you can see the image through the gradient. (Play with it and have fun..:) I decided not go to with any gradient. Here is an example of having a bit of orange in the sky in the first image.

Altitude Pro top orange gradient

The text was updated successfully, but these errors were encountered:

paaljoachim · 2022-05-26T21:02:41Z

Continuing--->

Changing the transparent site-header to another color.

Inside style.css.
Before one begins to scroll the front page the site header is transparent.
By commenting out the transparent site header the default black shows through.

.featured-section .site-header {
  /* background-color: transparent; */ 
}

The existing .site-header CSS code looks like this:

.site-header {
 background-color: #000;
 left: 0;
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 999;
}

I adjusted the background color and added a box shadow.

.site-header {
 background-color:#00B2EE; /* light blue */
 left: 0;
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 999;
 box-shadow: 0px 1px 3px #ccc; /* I added a light grey box shadow along the bottom of the header. */
 height: 7%; /* I made the site header smaller. I used % because it will also affect the responsive 
design om smaller devices. */
 min-height: 48px;
}

I turned the background black color into a light blue hex code color.

Adding opacity to the site header (see through header)

I have two options to create a see through light blue site header:

Add opacity: 0.7 or another .number under 1.0.
Use rgba(0,178,238, .8). The code would then be: background-color: rgba(0,178,238, .8);
Here is a hex/color to RGBA converter: https://hex2rgba.devoth.com/ (So you can easily create an transparent color background.)

NB! If your having a problem that the images do not go all the way to the top. To move the images a little higher up one needs to comment out some code. In the Front Page section of the style.css file.

/* Front Page
--------------------------------------------- */

.front-page-2,
.front-page-3,
.front-page-4,
.front-page-5,
.front-page-6,
.front-page-7 {

/* border-top: 54px solid transparent; */
 margin-top: -54px; 
-webkit-background-clip: padding-box;
 -moz-background-clip: padding;
 background-clip: padding-box;
 position: relative;
 z-index: 9;
}

Comment out (or remove) the border-top to get the background images to start at the top of each section.
The background images will now look nicer behind the site-header.

Site header during scroll

I need to make changes to the site header during scroll. Inside the Site Header section.
Some options on how you can write the code.

.site-header.dark {
background-color: #00B2EE; 
opacity: 0.7;
}

I changed the background color to the same light blue I used above and added an opacity of 0.7.
Another option is to add the opacity through the rgba color.

.site-header.dark {
background-color: rgba(0,178,238, .7);
}

A tip!
The global.js file inside the js folder holds the jQuery function to where the site header dark info resides. If you want to change the word dark to something else you would need to do this here and for all mentions of the word dark in the style.css file. (There is really no need to do this. I am just adding the information so you know about it.)

Additional adjustments made to the site header.

Inside style.css.
To remove the white border bottom line in the site header. Comment out the code like so (or just remove the code):

.featured-section .site-header > .wrap {
 /* border-bottom: 1px solid #fff; */
 }

The header height changes on scroll. I adjusted the following title-area CSS so the padding became the same as the scrolling header.
Original:

.title-area { 
   float: left; 
   padding: 25px 0; 
   width: 360px;
}

Adjusted to:

.title-area {
  float: left;
  padding: 15px 0; 
  width: 250px;    
}

I changed the width of the title area from 360px to 250px because it takes too much space away from the menu on the right we will soon create.
Adjust it to a size that fits your title. On various screen resolutions the menu might be to the right of the title or below it. I want to keep the menu to the right as long as possible before it is moved below the title on smaller resolutions.

/* No change here. */
.site-header.dark .title-area {
 padding: 15px 0; 
}

Adding a fixed footer

If you have a page or post with very little content the footer might not stay at the bottom but move further up. To tell it to stick to the bottom one option is to use the following CSS that you can add to your style.css.

/* Sticky Footer */

.site-container {
 display: -ms-flexbox;
 display:-webkit-flex;
 display:-webkit-box;
 display:flex;
 -ms-flex-direction:column;
 -webkit-flex-direction:column;
 -webkit-box-orient:vertical;
 -webkit-box-direction:normal;
 flex-direction:column;
 min-height:100vh; /* vertical height - Adjust this as you need to. */
}

.site-inner {
 -ms-flex:1;
 -webkit-flex:1;
 -webkit-box-flex:1;
 flex:1;
 width: 100%;
 /* padding: 20px 0; */
 word-wrap: break-word;
}

I found the code here: wpbeaches.com/adding-sticky-footer-genesis-theme-flexbox/

paaljoachim · 2022-05-26T21:09:59Z

— PART 2 —

Creating the top primary menu.
WordPress backend -> Appearance Menus
OR go to the customizer and create the menu there.

Create a new menu. Below in Menu settings. In Display location select Header Menu.

Then click Custom Links to add a custom link.
The URL need to be: #front-page-1, #front-page-2, #front-page-3, #front-page-4, #front-page-5, #front-page-6 and #front-page-7 one for each widget section.

Give each link a name by doing so inside the Link Text box. For this example I am calling them Front page and then a number. Add the various custom links to the menu.

Add custom menu links to Altitude Pro

NB!# = anchor. An anchor is often used to link to a section on the same page.
If your linking from another page (not the main page) you will need to add the absolute link: https://www.domainname.com/#front-page-2 so that it goes to the section on the main page.

Frontend: The menu should now show up here beside the title.

Adjusting the menu.

Inside style.css.
The menu jumps on scroll. This is a tricky one to discover. It has to do with the display: block code inside the nav menu.
The 4th code section under

/*
Site Navigation
------------------------------------------ */
 
.genesis-nav-menu a {
   color: #fff;
   display: box;    /* Originally block. I changed it to box. */
   font-size: 14px;
   font-weight: 200;
   letter-spacing: 1px;
   padding: 30px 15px;   
   text-transform: uppercase;
   font-weight: bold; /* Added. I also added a bold to font weight so the menu links can stand out more. */
 }

The menu moved further up getting too close to the top. I adjusted by adding a margin top.

/* Primary Navigation
--------------------------------------------- */

.nav-primary {
   text-align: center;
   margin-top: 15px;      /* Added - Space above the menu. */
 }

On hover/mouseover – Adjusting the bottom white border line and the link color.

We are still in the Site Navigation area a little further up from the .nav-primary code.

.front-page .genesis-nav-menu li.current-menu-item > a:hover,
 .genesis-nav-menu li.current-menu-item > a,
 .genesis-nav-menu > li > a:hover {
 border-color: #1167b8;        /* Originally #fff . Changed to a light blue.*/
 color: #d6d4d4;               /* Added - the link color changes on hover. */
 }

A tip! To remove the bottom border color replace the hex color with none. Like so: border-color: none;

Adjusting the menu links placement in relation to each other and the bottom border line placement.
Original:

.genesis-nav-menu > .menu-item > a {
 text-transform: uppercase;
}

Adjusted:

.genesis-nav-menu > .menu-item > a {
 text-transform: uppercase;
 padding: 15px;    
}

I added a padding 15px to adjust the distance between the menu links and the bottom border line.

A tip! Another option to only effect the border line placement is to add a padding-bottom: 8px;
instead of the padding code that I added.

Adjusting the menu padding on scroll.

A few code blocks up is the following code.

.site-header.dark .genesis-nav-menu a {
 padding: 20px 15px;
}

We need to use the same padding as we did further above:

.site-header.dark .genesis-nav-menu a {
  padding: 15px;   /* with adjusted padding. */
}

Adjusting the Media queries – responsive design
Since we have made adjustments to the theme we also need to go through the media queries and adjust.
Go to where it says: @media only screen and (max-width: 1023px) {

Original:
@media only screen and (max-width: 1023px) {

Adjust to:
@media only screen and (max-width: 880px) {

Next look for the following code a little further down:

.front-page .site-header {
 background-color: #000;
 }

I want to change the background color. I also added some height.

.front-page .site-header {
 background-color: #00B2EE;
 }

Background color is changed to the same light blue I have earlier added to the site header.

Go to: @media only screen and (max-width: 800px) {
Original:

.menu-toggle,
.sub-menu-toggle { 
   border-width: 0; 
   background: #000; 
   color: #fff; 
   display: block; 
   margin: 0 auto; 
   overflow: hidden; 
   text-align: center; 
   visibility: visible; }

.menu-toggle:focus, 
.menu-toggle:hover, 
.sub-menu-toggle:focus, 
.sub-menu-toggle:hover { 
   background-color: transparent; 
   color: #22a1c4; 
   border-width: 0; 
}

Adjusted to:

.menu-toggle,
.menu-toggle,
.sub-menu-toggle { 
   border-width: 0; 
   background: #00B2EE;    /* Adjusted from #000 */ 
   color: #fff; 
   display: block; 
   margin: 0 auto; 
   overflow: hidden; 
   text-align: center; 
   visibility: visible; 
}

.menu-toggle:focus, 
.menu-toggle:hover, 
.sub-menu-toggle:focus, 
.sub-menu-toggle:hover { 
   background-color: #00B2EE;    /* Adjusted from transparent */ 
   color: #ccc;                  /* Adjusted from #22a1c4 */ 
   border-width: 0; 
}

NB! Media queries is something you will need to experiment with to get right for your unique site.

paaljoachim · 2022-05-26T21:11:51Z

Creating parallax effects when scrolling the front page.

I am using two files. One to create the main animation effects and a CSS file to styling the animations.

“Waypoints is the easiest way to trigger a function when you scroll to an element.”
“Animate.css a cross-browser library of CSS animations.”

Download waypoints: https://imakewebthings.com/waypoints/
and download animate.css: https://github.com/daneden/animate.css

Copy/move the lib/jquery.waypoints.min.js file to the child theme js folder.
Copy/move the animate.css file to the child theme root folder. (Or to a CSS folder etc.)

Create waypoints-init.js file inside the js folder of your child theme.

Inside waypoints-init.js file I added the following code. It gives an idea of how it works. Experiment with it.

// Resources:
// https://github.com/daneden/animate.css
// https://spin.atomicobject.com/2015/05/31/scroll-anmiation-css-waypoints/

jQuery(function($) {
 $('#front-page-1').waypoint(function(direction) {
 if (direction == 'down') {
 $('#front-page-1 h1').toggleClass( 'animated fadeInUp' );
 $('#front-page-1 img').addClass('animated fadeInLeft');
 $('#front-page-1 p').toggleClass('animated fadeInUp');
 } 
 if (direction == 'up') {
 $('#front-page-1 h1').toggleClass( 'animated fadeOut' );
 } 
 },
 { 
 offset: '80%',
 });

$('#front-page-2 img').css('opacity', 0);
$('#front-page-2 h1').css('opacity', 0);

$('#front-page-2').waypoint(function() {
 $('#front-page-2 h1').toggleClass( 'animated fadeInUp' );
 $('#front-page-2 img').toggleClass('animated fadeIn');
 },
 {
 offset: '40%',
 }); 

 // hide our element on page load --- WORKS!!
 $('#front-page-3 h1').css('opacity', 0);
 
 $('#front-page-3').waypoint(function() {
 $('#front-page-3 h1').toggleClass( 'animated fadeInLeftBig' );
 $('#front-page-3 img').toggleClass('animated fadeIn');
 },
 {
 offset: '40%',
 }); 
 
$('#front-page-4').waypoint(function() {
 $('#front-page-4 p').toggleClass( 'animated fadeInLeftBig' );
 $('#front-page-4 img').toggleClass( 'animated fadeIn' );
 },
 {
 offset: '80%',
 });
 

$('#front-page-7').waypoint(function() {
 $('#front-page-7 p').addClass( 'animated fadeInUpBig' );
 },
 {
 offset: '60%',
 });

});

Inside the functions.php file in the Enqueue scripts and styles section:

// I added the following code before the last } of the // Enqueue scripts and styles area
 //* Enqueue Parallax on non handhelds i.e., desktops, laptops etc. and not on tablets and mobiles
 // Source: https://daneden.github.io/animate.css/
 wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/animate.css' );
 wp_enqueue_script( 'waypoints', get_stylesheet_directory_uri() . '/js/jquery.waypoints.min.js', 
array( 'jquery' ), '1.0.0' );
 wp_enqueue_script( 'waypoints-init', get_stylesheet_directory_uri() .'/js/waypoints-init.js' , 
array( 'jquery', 'waypoints' ), '1.0.0' ); 
}

I added the animate.css to my child theme root folder. So it points directly to animate.css.
I added the file query.waypoints.min.js to the js folder.
I made the file waypoints-init.js and added it to the js folder.

NB!
To get the animation to work you will need to add text and images to the sections I mentioned. To do so I will suggest installing Black Studio TinyMCE widget and add headings and images to it to see the animation. Experiment with it and also check out my article on parallax scrolling animations for some additional tips.

paaljoachim · 2022-05-26T21:19:37Z

Creating an inner page similar to the main parallax page.

Inside functions.php

Duplicate the section that says //* Register widget areas and all the code belonging to that section. Paste it just below the front-page widget areas. Then rename all mentions of the word front page. Or just copy the following code and paste it below the pre existing front page widget areas.

//* Register inner widget areas
genesis_register_sidebar( array(
 'id' => 'inner-page-1',
 'name' => __( 'Inner Page 1', 'altitude' ),
 'description' => __( 'This is the inner page 1 section.', 'altitude' ),
) );
genesis_register_sidebar( array(
 'id' => 'inner-page-2',
 'name' => __( 'Inner Page 2', 'altitude' ),
 'description' => __( 'This is the inner page 2 section.', 'altitude' ),
) );
genesis_register_sidebar( array(
 'id' => 'inner-page-3',
 'name' => __( 'Inner Page 3', 'altitude' ),
 'description' => __( 'This is the inner page 3 section.', 'altitude' ),
) );
genesis_register_sidebar( array(
 'id' => 'inner-page-4',
 'name' => __( 'Inner Page 4', 'altitude' ),
 'description' => __( 'This is the inner page 4 section.', 'altitude' ),
) );
genesis_register_sidebar( array(
 'id' => 'inner-page-5',
 'name' => __( 'Inner Page 5', 'altitude' ),
 'description' => __( 'This is the inner page 5 section.', 'altitude' ),
) );
genesis_register_sidebar( array(
 'id' => 'inner-page-6',
 'name' => __( 'Inner Page 6', 'altitude' ),
 'description' => __( 'This is the inner page 6 section.', 'altitude' ),
) );
genesis_register_sidebar( array(
 'id' => 'inner-page-7',
 'name' => __( 'Inner Page 7', 'altitude' ),
 'description' => __( 'This is the inner page 7 section.', 'altitude' ),
) );

Duplicate front-page.php. Then rename it. I renamed mine to template_inner-page.php.

Inside template_inner-page.php I renamed all mentions of the word front to become inner.
I then adjusted the top area and added the Template Name of Inner Page.

<?php
/**
 * This file adds the Inner Page to the Altitude Pro Theme.
 *
 * Template Name: Inner Page
 */

NB! Be sure to rename all mentions of the word front to inner.

lib/Customize.php
I got it working with the help from a tutorial at Sridhar Katakam site. Sridhar runs a Genesis Membership site.
I will duplicate the code in the customizer that creates the Front Page Background Images.
Here is the adjusted code:
global $wp_customize;

Control inside -> Setting. Setting inside -> Section.

Duplicate:

// Front Page Background Images filter
 $images = apply_filters( 'altitude_images', array( '1', '2', '3', '4', '5', '6', '7' ) );