Select Page
Lab Introduction
CMS Site (subpages) Lab
PlayPlay
Introduction

Quite a bit has been completed on the site. The necessary software has been installed. The general settings have been applied. The last thing we did was complete the homepage. In this lab we will create two subpages and complete the site.

Click on the > to start

You may use your lab from last the last lab as the starting point.

Subpage Creation
Subpage Creation
CMS Site (subpages) Lab
PlayPlay
Clone the Homepage
Instructions
  1. You have a homepage but no subpages. Much like when we hard-code sites we will duplicate the homepage to make the subpages so we don't have to start from scratch.
  2. Open Local.
  3. Click on your site name. Press START SITE on the top right to make the site "live".
  4. Press on Admin. The browser will open to the admin login page. Log in (should be vcp and vcp).
  5. Click on Pages in the Dashboard.
  6. In the pages section, hover over the Homepage. Press Clone from the menu that appears below it. This will create a duplicate of the Homepage (this option is available because we installed the Yoast Duplicate Post plugin).
  7. Hover over one the duplicate page and select Quick Edit. Enter "Contact Us" in the Title field. Change the Status from Draft to Published. Once completed press Update.
  8. We have now created one subpages but it will need to be formatted so it is not the same as the homepage.
  9. Hover over the default pages Wordpress created (Privacy Policy and Sample Page) and select Trash to remove them.
Contact Us Page
Contact Us Page
CMS Site (subpages) Lab
PlayPlay
Finished Contact Us Page
Instructions
  1. Let's design the first subpage, Contact us.
  2. In the Page section hover over Contact Us page. Select Edit with Divi from the menu that appears below it. You will be brought to the font-end of the page with the Elementor page builder enabled.
  3. Press the Settings button at the most bottom-left of the page. The Page Settings panel will appear. Turn off Hide Title (no). Press Update. This will put the page title back on the page.
  4. Right-click over the text and button in the first section and select Delete to remove those elements in the section.
  5. Right-click over the section and select Edit Section. Edit Section will appear in the left panel. Change the Content Width to Boxed. Press Update.
  6. Right-click over the section and select + Add New Column.
  7. Press the left column Edit Column button. Change the Column Width (%) to "67". This will make the column 2/3 and 1/3.
  8. Press the Elements button to return to the Elements panel. Press Update.
  9. In the Elements panel click and drag the Google Maps element onto the inside the first column of the section. Enter "1 Seahawk Dr, North East, MD 21901" in the Location text field. Adjust the Height to "500". Press Update to update and then the Elements button to return to the Elements panel.
  10. Click and drag the Heading element onto the inside the second column of the section. Adjust it's settings and enter "Visit Us" in the Title field. Press Update and .
  11. Click and drag the Text Editor element below the last element. Adjust it's settings and enter "1 Seahawk Dr, North East, MD 21901" in the Title field. Press Update and .
  12. Click and drag the Divider element below the last element. Adjust it's settings then Press Update and .
  13. Click and drag the Heading element below the last element. Adjust it's settings and enter "Follow Us" in the Title field. Press Update and .
  14. Click and drag the Social Icons element below the last element. Adjust it's settings then press Update and .
  15. We must remove the remaining sections. Hover over each section and press the in the that pops up above the section to delete them.
  16. Make any changes that you want then press Update button.
  17. Press then EXIT TO DASHBOARD to return to the Dashboard.
Student Life Page
Student Life Page
CMS Site (subpages) Lab
PlayPlay
Finished Student Life Page
Instructions
  1. Let's design the second subpage, Student Life.
  2. In the pages section, hover over the Contact Us page. Press Clone from the menu that appears below it. This will create a duplicate.
  3. Hover over one the duplicate page and select Quick Edit. Enter "Student Life" in the Title field. Change the Status from Draft to Published. Once completed press Update.
  4. Hover over the Student Life page again. Select Edit with Divi from the menu that appears below it. You will be brought to the font-end of the page with the Elementor page builder enabled.
  5. Right-click over the elements in the section and select Delete to remove them.
  6. Right-click over the left column Edit Column button and select Delete.
  7. In the Elements panel click and drag the Video element onto the . Adjust the settings. Press Update to update and then the Elements button to return to the Elements panel.
  8. Click and drag the Heading element below the last element. Adjust its settings and enter "Student Experience" in the Title field. Press Update and .
  9. Click and drag the Inner Section element below the last element.
  10. Right-click over an Edit Column button and select Add Column. Do this twice, resulting in four total columns.
  11. Click and drag the Testimonial element into each column. Adjust its settings then Press Update and .
  12. Click and drag the Star Rating element under each testimonial element. Adjust their settings then Press Update and .
  13. Make any changes that you want to the page then press the Update button.
  14. Press then EXIT TO DASHBOARD to return to the Dashboard.
Menu
Menu
CMS Site (subpages) Lab
PlayPlay
Menu Creation
Instructions
  1. Now that there are multiple real pages we can create and apply a proper menu.
  2. In the Dashboard navigate to Appearance>Menus.
  3. Enter "Main Menu" in the Menu Name field and toggle on Primary Menu. Press Create Menu.
  4. In the left panel Add menu items under the Pages section select the View All tab. Toggle on Select All and click on Add to Menu.
  5. Make any adjustments you would like and press Save Menu.
  6. Depending on the theme you have installed there may be more options in the menu area or in customize. In our case this is good enough.
Theme Editor
Theme Editor
CMS Site (subpages) Lab
PlayPlay
Theme Editor
Instructions
  1. Your site is more or less complete. It could definitely use some polish but it is good enough for instructional purposes. The theme and plugins we installed allow us to control the look of the site. Some are more robust than others. If the theme/plugins installed do not include options you desire you can apply style manually. Let's explore changing the theme CSS directly.
  2. In the Dashboard navigate to Appearance>Theme Editor.
  3. Under Theme Files select Stylesheet (should be by default).
  4. Scroll to the bottom of the page. Here you can apply your own CSS to the theme stylesheet.
  5. Try adding:
       background-color: #e9e9e9;
  6. Press Update File.
  7. In the upper-left of the Dashboard press the site name to preview your site. You should see that the background color has now changed.
  8. Warning! Although this method does work it is not the preferred way of applying CSS. Every time your theme gets updated you will lose any CSS rules you have written.
Additional CSS
Additional CSS
CMS Site (subpages) Lab
PlayPlay
Customize
Instructions
  1. Besides adding CSS rules to the theme stylesheet you can apply CSS through the customizer.
  2. If you are logged in as Admin you can access Customize from the front-end. In the black admin bar at the top of the page select Customize. If you are in the Dashboard you can navigate to Appearance>Customize.
  3. In Customize navigate to Additional CSS. Here you can add CSS rules and see them applied instantly.
  4. It can be difficult to target elements. One way to do this is to use the browser tools. Find the element you wish to target (let's try the theme name at the bottom of the page). Right-click over the element and select Inspect or Inspect Element from the popup. This will open the inspector panel with the html highlighted.
  5. Right-click on the element in the inspector panel and select Copy>Copy selector or Copy>CSS Selector.
  6. In the Additional CSS panel, right-click in the text-field and paste. You have your selector!
  7. Next, write the CSS rule like you would any other. For example:
       .footer-credits {
          display: none;
  8. You will see your CSS applied. You may do this to as many elements as you like.
Final Review and Submission
Final Review and Submission
CMS Site (subpage) Lab
PlayPlay
Local Export
Instructions
  1. You should explore and add anything you would like in the site. The best way to learn is just to play around with it. When you are happy you are ready to export it.
  2. In Local right-click on the site name in the list on the left. In the popup choose Export. Don't enter anything in the window. Press Export. In the popup choose where you want to export and export.
  3. Now, log into Blackboard (Here) and click on this course. Inside the course, select Class 13, then the Class 13: CMS Site (subpage) Lab folder, then the assignment with the same name. Finally, Attach the zipped file.
Lab Synopsis
Lab Synopsis
PlayPlay
Reflection

You have officially completed the Wordpress lab series! You can see what is possible with CMS and how user friendly it is. Next up is the Final Project. It may be whatever you like using the same general process we covered in these labs.

If you run into any issues please do not hesitate to contact me:

  1. jcone@cecil.edu
  2. (240) 466-1996