Now we have our sidebar widgets in place, let's add the footer widgets. We'll need to set up a custom menu first, so that we can display it using the Custom Menu widget for the Navigate: footer area from our mockup.
- Now switch to the Menus screen, by going to Appearance | Menus. Add a new menu using the same method we used previously to create our navigation menu, starting by clicking on the + tab next to the tab for our existing menu. We'll call this menu Footer Links.
- Add the relevant pages to the new menu and save it. You'll see from the following screenshot that we've added some more static pages to the site for use in this menu:
- Save the menu and switch to the Widgets page by going to Appearance | Widgets.
- First, set up the text widget. Drag the Text widget over to the Left Footer widget area.
- In the text box, copy the HTML you saved earlier form the old footer:
<h3>Socialize</h3> <ul class="grid4up"> <li><a href="#" class="soc facebook">facebook</a></li> <li><a href="#" class="soc twitter">twitter</a></li> <li><a href="#" class="soc rss">rss</a></li> <li><a href="#" class="soc google">gmail</a></li> </ul> <div class="push"></div> <h3>About us</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> - Drag the Custom Menu widget to the Right Footer widget area.
- In the drop-down menu, select the menu you've just added. In our case, the Footer Links menu, as shown in the following screenshot:
- Save the widget.
We added five new widgets to our widget areas, to display the content we need. We also set up a new menu and copied some HTML that was used in our mockup for a text widget.
So, how do our widgets look? Switch to your browser and refresh the screen to check.
The footers look exactly as they should—no tweaks necessary. Well done!
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.