PRE CLASS BASICS – View these videos prior to our first class…..but don’t do anything except for Adding Divi . This will be good practice and the video should be a big help.
During our first class we will be creating global settings that affect your website as a whole.
For example…….selecting a font and font size. There are lots of settings. These are onetime
settings………..like set it and forget it. We’ll be doing this in Theme Options, Theme Customizer,
SET GLOBAL PARAMETERS – April 25th
Well…….we did get off to a somewhat rocky start………..what with internet access difficulties, but we persevered and began setting global settings. They are in 3 parts in the Dashboard. 1) Divi Options, 2) Divi Customization, and 3) WordPress Settings.
Next week we continue with the Divi global settings and Settings of WordPress itself.
Already some of you have found a need to secure your site during development. Easy to do. First follow this link to the WordPressClass.net blog and read the article on WEB ACCESS. The answer is there. Click here…….WEB ACCESS
Now for next weeks assignment…………your Home Page.
First watch the video on using the image module………….Click here…….IMAGE MODULE
Second watch the video on using the text module………… Click here………..TEXT MODULE
Third watch the video on using the full width header module……….Click here……..FULL WIDTH HEADER MODULE
Fourth watch the video on using the blog module……..Click here………..BLOG MODULE
Now go find yourself some pictures on Google Images. Find a couple that are wider than they are tall. Then find 4 that are taller than they are wide.
Last make up some text. One or two paragraphs. Or…..copy some non relevant text from somewhere so you have some text to work with.
Together at class we will begin to create a home page and a blog page. We may/may not get through it all. If not we’ll carry over to the next week. And yes…….we will be out at 8PM from now on. Have fun.
START CREATING A PAGE – May 2nd
Many have the global parameters set and have started creating their first page. Continue working on this page and we’ll review them next Thursday. Some may need to find wider pictures for their page to fill it up. Some may need to watch the end of the Image Module video to get the 4 pictures to butt up against each other.
Have FUN…………….it’s supposed to be fun.
CONTINUE CREATING A HOME PAGE – May 9th
Because of absences we’re at different levels of Global Settings. I will try to meet separately with those not quite up to speed with those settings. In the mean time let’s continue working on that single home page (regardless of what you called it). And let’s try to add a either a Blog section on the home page or create a Blog page. I don’t care which.
For a Blog that means you should write 3 posts. Don’t forget to name the posts and give them a category. And your Blog should be in Grid Format. I’m going to add new Sections to the bottom of my Home Page so you can see what the new Sections look like.
See you on the sixteenth.
CONTINUE CREATING A HOME PAGE – May 16th
By now your home page should be growing. Here’s a way you can visually help your visitors so your page doesn’t look like a run on design.
Alternate background color settings. Hover your cursor over the Settings Option (3 parallel lines) in the Blue Section Area. The word Settings will then appear. Click on it to open up to the Section Settings feature.
Drag down until you see the Background offering. Click on the paint bucket. Move your cursor to the big area and a “+” sign will appear. Click the + sign and the color pallet will appear. Now you can select a background color. Make sure it is a light color and in keeping with your site’s coloring. If your site’s coloring is white most colors should be ok……just light so text can be read easily.
Now before you Save and Exit do one last thing. Inside the background color area are 2 symbols. The right symbol allows you to delete your color selection. Do NOT click that one. The left symbol allows you to see the HTML code for the color you selected. It is proceeded by a “#”. Write down the code, # and 6 characters.
Each of your home page sections will be an alternating color. White first……then your color choice, then white again. On the color sections click on the paint bucket and the + sign in the background area. A dialogue box will open so you can type in the HTML code for your color. Then click the green check mark and you will have set the background color code. That way you always use the same background color.
CONTINUE CREATING A HOME PAGE – May 23rd
Although it’s becoming somewhat challenging with absences we’re still moving forward in the right direction. Tonight is a continuation night so use the time to get yourself brought up to date.
You may notice that on my home page there are dots running down the right hand side of the page. This is what’s called Dot Navigation. It allows visitors to click on a particulate Dot and go right to that Section. There is a Dot for each Section. Here’s how you set the Dot Navigation.
When in the Dashboard and on the page you want to deploy Dot Navigation…….look to the right side of the screen just below Update. You will see Divi Page Settings. If the small triangle is pointed down click on it so it is pointed up. This will reveal Dot Navigation. It is set to off. Toggle it to the ON setting. Click Update. You now have Dot Navigation for that page. If you think a Section is too big just split it into multiple Sections.
CONTINUE CREATING A HOME PAGE – May 30th
Tonight was all about pictures. We had half a class so here’s what the other half needs to do to catch up. The first thing is to use Google Images and find 20 pictures all about the same size, say 250 x 250 or something similar. I don’t care about the subject matter. Mix it up if you want. The content doesn’t matter. The process we do after finding the pictures is what matters. Now I want you to load those 20 pictures to your Media Library. Click on Media in your Dashboard and then ADD. You can add them separately or all at once……your choice. Once saved to your Library It’s time to watch the Gallery Module video. This video will show you 2 ways you can display your photos…first is in a Grid format and the second is in a slider format.
Here’s the URL of the video. Just click the blue link. GALLERY MODULE
The video is devoted to creating a Grid Format. So go ahead and add a New Section at the bottom of you page and start the Gallery process.
In the Content area under Images set your Images Number to 12. That way you will end up with 3 rows of photos plus Pagination for the other 2 rows. At the end you will make the grid Full Width with a Gutter Width of 1. If you have difficulty with this step…….call me as the latest Divi Version is slightly different from the video which hasn’t caught up to the latest Divi Version. OK, now you should have a full width gallery grid with 3 rows of photos and Pagination beneath the photos.
Now it’s time to add a new Section at the bottom of your page to make the Slider Gallery Format. Use the same photos. Do he CONTENT area first. Only this time in the Design area of the row under LAYOUT choose SLIDER instead of GRID. When done you will have a Section with full photo Images in Slider format. You can toggle through manually or you could set a time for automatic sliding. The video doesn’t show you how to set it so pay attention to the below instructions to set the slider to Automatic.
GALLERY MODULE SETTINGS
LAYOUT = Slider
Animation Duration = I recommend 1000ms
Animation Delay = I recommend 550ms
Automatic Animation = ON
Automatic Animation Speed = I recommend 7000
Once its working you can play with the above settings to fine tune the animation to your liking.
CONTINUE CREATING A HOME PAGE – June 6th
In this weeks class we will be creating a new Section with the Divi Slider Module. This slider is different in that it incorporates Slides with pictures and text. Should be fun. Many of you are in Israel this week or at a wedding in Colorado. We’ll have a small class but we are moving on. Those of you not able to attend can stay up with us by watching this slider video and following the instructions here after this week’s class.
Now that I’ve watched the video I must admit this one is a easier than the Gallery Module we did last week. First thing you need to do is venture on over to Google Images and find one or two pictures. Make sure they have like characteristics, say dark so you can use light text or light so you can use dark text. It will just make things easier right now. Now load the pic(s) up to your Media Library in your Dashboard.
Step two is to add a new Standard Section to the bottom of your Home Page. Pick the single long and narrow field. Now select Slider as the module.
Step three is to add a Slide. Then follow the Content instructions. Here you will set your text in the slide and button. Also, in the background area you will select the background picture from the Media Library in your Dashboard. Image is the 3rd option.
Then follow the Design instructions. If I remember right you need to set the text color to light or Dark in the TEXT section. Last, if you want Animation it’s at the bottom of the Design Area. Select the Animation style, speed, and turn on Automatic Animation.
As always……….don’t forget to SAVE as you create each Slide.
I have created a 4 Slide Slider at the bottom of the WordPressClass.net Welcome page if you need an example. I did link the slides to other pages, but in is not necessary for you to do that unless you want to.
Time for a WALK-A-BOUT – July 1st
If you are all caught up I want you to explore Divi’s modules looking for modules you might incorporate into your website.
Try viewing some of the module videos within Divi. You’ll know pretty soon if this is a module to try right now.