In this video I'll show you how I went about following the affinity themes instructions at Wordpress
dot com to set up the home page panels and navigation.
Hopefully you were successful at setting it all up at your own local development environment website.
Regardless here's the steps I took this lesson reveals how I changed the home page of our affinity themed
site from a blog style list of posts to a scrolling home page with fixed background images.
Remember before you can navigate to your local host your URL you have to activate map and make sure
that the Apache server and the my SQL server is running.
When I navigate to the Wordpress dashboard I can see that I've got a few updates ready for me.
Let's look at the updates page under dashboard and I'll see what I have going on.
The child theme configurator that WP tiles plug in.
That's one update that I can do great and I know that there's one more so if I return to the Wordpress
updates page I can see that it's actually the affinity theme.
Now if you remember and you still have the same setup.
We probably have one of the two child themes that we set up in previous lessons activated.
So I still have the affinity child too which was the one formed by that plug in called Child configurator
and affinity child one is still here but it's the affinity theme it has an update available.
That's fine because any of the changes that we made to the functions that ph profile were done inside
of the child theme not inside of the parent theme affinity.
It looks like a small update.
One point 0.2 but I'll go ahead and select that and update themes great affinity updated successfully.
Let's go back to our site that I have open in another tab and refresh.
I just make sure that everything is working well.
Nice looks good.
Now this has the recent blog posts as the home page which were going to be changing and if we scroll
to the bottom we can see that our change inside of the child theme which was to make this dividing line
white instead of gray is still there.
If we go back into appearance and look at the Editor we can see that our child theme which was not updated
has a style sheet and just a theme functions functions that BHP file and in the style sheet is where
we had the change widget title bottom border color when we changed that title to the color white instead
of gray.
One last change that I made before we get to editing our home page panels is.
I went in under appearance header and you can change this in the customize or which is going to open
now and I changed the header image to instead of having it use these randomized images that are inside
the theme I just chose one of the images inside the theme.
My favorite one so it always showed that at the top of all the header image pages.
I'm not really changing it so I can close out that.
And yes I can leave the page.
I'm actually making a change here and let's get to changing our home page.
From reading the instructions I know that it has to do with pages that we use for those front panels.
If I open the affinity theme page instead of Wordpress dot com you can see that the key information
is here.
Setting up your front page and it talks about creating a page and then choosing it in the customize
or to a static page.
Then you can also have a blog page that can display a list of the latest posts as you scroll down.
You probably saw it gave you some specific instructions about adding panels by creating or editing a
page and then identifying that page inside of the customize or under theme options.
So that's what I'm going to do right now.
I'll go back here in looking at my pages.
I know that I have one called front page that was brought in as a part of that import that we made for
testing themes from WordPress dot org.
It's got just a little bit of content and a page title and so I'll go into the appearance customize
or right at the bottom of the customize or is a panel called theme options and you can see I have a
general tab and then 5 different panels used for the special home page.
If I open general my only selection is the image opacity so that if I use different images say I wanted
it to be more like 30 percent.
I could darken it and have that white copy should show up really well if I have a lot of light images.
For now I'll leave it at 70 percent and see how that looks.
The second one is do I want the scrolling feature.
I want the home page to scroll behind or do I want it not to.
It doesn't show it in the customize or it said in the instructions here.
Due to performance but I'm going to allow those images to be scrolled in front of in the background
so I'm leaving that checked.
Now if I choose Panel 1 and Open panel content I can see that I can find my front page now looking at
my results you can see that nothing has happened and Oops I should have followed the instructions and
set up my front page first.
So inside the customize or I can go back into it's the static front page then instead of latest posts
I need to define a static page for front page as well as for a Post's page called blague.
Now if I save and publish that I can look at it inside the custom Mizer I can really see what it looks
like when I refresh the page inside of my second tab
when that refreshes you can see that I have the front page content inside of the white panel down below.
Now why do I have two versions of the front page content here.
I didn't need to activate that front page inside of the customize or as one of the panels because it's
already used as the first part of the front page.
I want to use a second page and let's just use the About page that we have inside of the system for
that panel 1.
So if you look at the demo site as you scroll down you can see they have their front page content and
then the next one has a background image which is the featured image and the content inside of the page
is in the white area.
So if you follow instructions here you know that it says in order to have a background image you need
to assign a featured image to the page.
Obviously I don't have a featured image in the About page so if I just save and publish this inside
the customize or I'll go back and open my pages.
Open this about page and assign a nice big background image as the featured image.
So let's go back to all pages.
If I open about I'll just go down to the featured image area on the right hand side and click Set featured
image and grab something from the media library.
What's that big image that I like.
How big is this on a 6500 pixel image.
Now I can set the featured image and it'll appear as the background image on my panel one which is using
the About page.
Let's go back to the site and refresh the home page and we'll see if that about page has loaded its
background image.
All right I'm scrolling down front page.
There's a beautiful background image and then the content of that about page is down below grade.
I'll go through and activate some more pages as a part of the panel structure here.
And you can also see that our diamonds are starting to appear as automatic navigation inside of this
theme.
OK so how did you get on with that.
I chose some different pages and created some different pages.
Adding a featured image to each one.
And now I've got a nice long page here.
If I open up one of the panels
it'll show me which one is which.
Panel 1 and it shows the content with the dotted line around what the content is panel to now the page
that I chose for panel two was a page I had in there I had to create the name sample page.
It was already created from our previous lessons but it had an image and it had a black quote here inside
of the content.
We'll be able to see what that looks like in the site or the rest of em or down here.
Let's go ahead and refresh the homepage and take a look at the site.
Now I've got all these navigation buttons over here.
I can use them.
To go down to the next section.
Nice about there was my sample page so I scroll down.
I do have an image and it looks nice.
Right.
This one's on another page.
Looks great with those large images.
Here's yet another page.
You can tell that with the taller images they show the whole image.
And if you had a smaller one that was say not quite as tall as this one.
It shows a little bit less of the image.
You could choose in your design process to make an image that's wide like 6500 or 2000 pixels but maybe
only 800 pixels tall and depending on what kind of look you are on the home page
rate.
And I was just pasting some Lorem some text inside of each page.
I open up my wordpress dashboard and close the customize or you'll see this is the last page that I
had created and there's my featured image and got a nice looking home page.
Now when we go back to here you could see that the navigation has populated itself.
I go back to the top and it goes to the very top of the page.
And we got a really nice functional scrolling home page.
I hope you did well with that challenge by following the theme instructions and creating your own scrolling
home page inside your local development environment.
In the next video we'll go back to the cafe pro theme inside your students sandbox and arrange the home
page widgets to take advantage of the modular layout configurations that the theme gives us.