This is the third video in a series.
In the previous two videos we made widget areas and a web page template.
In this video we’re going to add some CSS styling, giving our web page template full width backgrounds.
We will use CSS and HTML provided by Eric Hamm, the man behind Dynamik Website Builder.
I want to keep this video as short and easy to follow as possible. So all we’ll be doing is putting the three rows of widget areas that we made in the previous two videos, into html divs and classes.
Making our page template full width and stripy
If you’ve followed along with the two previous videos, all you need to do is some simple copying and pasting.
These are the steps we go through in the video…
Step 1
Paste the CSS into the CSS tab
Step 2
In the two previous videos we made shortcode widget areas. Then we added those widget areas to our template. We now need to wrap those shortcode widget areas in the html divs and classes provided below. If you’ve followed along with the first two videos, you should be able to simply copy and paste the code below into your template. If not, watch the video to see exactly what code to copy and where to paste it.
Step 3
- Make a label called fluid-page
- Assign the fluid-page label to the page we’re using.
- The page we’re using now has the fluid-page label tickbox selected. And in Page Attributes, our page template is selected
You should now have a web page template with alternate rows of light and dark background colours. You can add to this code to make as many rows as you like in your page template.
You can also add background images to the rows and style the widget areas.
The template we made in the last three video tutorials is based on this tutorial and video by Eric Hamm.
Practice makes perfect, so don’t be disheartened if you don’t get it right first time. This is complicated stuff for a newbie. But if you keep trying you’ll get there :-)
