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

Now that you have some familiarity with Wordpress we can begin to make more polished content. In this lab we will create the landing page (homepage) using the Elementor plugin we previously installed.

Click on the > to start

You may use your own images or the ones included in the zip folder below
CMS Site (homepage) Lab Materials (

Homepage Creation
Homepage Creation
CMS Site (homepage) Lab
PlayPlay
Homepage Creation Steps
Instructions
  1. The first thing we need to do is create the actual homepage page.
  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. Press Add New at the top of the page to create a new page.
  7. You will be brought to the built-in Wordpress Gutenberg page builder. Enter "Homepage" in the Add title field and press Publish (twice).
  8. Press the Wordpress icon to navigate back to the Dashboard. Select Settings>Reading in the left menu.
  9. Under Your homepage displays toggle-select A static page (select below). In the drop-down Homepage: choose the page you just created, Homepage.
  10. Now the page you created will be the landing page for the site.
Elementor Page Settings
Elementor Page Settings
CMS Site (homepage) Lab
PlayPlay
Elementor Page Settings
Instructions
  1. Now let's get to the business of actually building the homepage. We will leverage the Elementor plugin we downloaded in the previous lab to build the page.
  2. In the Dashboard navigate to Pages.
  3. Select the Homepage.
  4. Select Edit with Elementor at the top of the page. You will be brought to the font-end of the page with the Elementor page builder enabled.
  5. Press the Settings button at the most bottom-left of the page. The Page Settings panel will appear.
  6. Turn on Hide Title (yes). Select Elementor Full Width from the Drop-down menu under Page Layout.
  7. Press Update.
  8. These settings have removed the Homepage title (obviously don't want that on the landing page) and made the layout a full-width so the sidebar is no longer visible.
Elementor Site Settings
Elementor Site Settings
CMS Site (homepage) Lab
PlayPlay
Elementor Site Settings
Instructions
  1. The specific page settings are applied. Let's apply settings for Elementor for the entire site.
  2. Press the menu button. Select Site Settings. Here you will find the setting you may use for the entire site.
  3. Select Global Colors. Choose a green, white, light black, and yellow for the colors. Press Update.
  4. Explore the Global Fonts and make any changes you would like. You may make changes to the other options as well.
  5. Select Site Identity.
  6. Change the Site Name to "Cecil College".
  7. Change the Site Description to "Own your future".
  8. Choose Image, Cecil logo (here), for the Site Logo and Site Favicon.
  9. Press Update. Press
Elementor Section
Elementor Section
CMS Site (homepage) Lab
PlayPlay
Call to Action
Instructions
  1. Finally we can actually start making the page. Elementor works like most responsive frameworks. It uses rows, columns, and elements. We will build out rows with columns then place out elements inside. Each element has settings that you can customize them with.
  2. Press the (Add New Section) button. Choose the one column option.
  3. The left panel will change to Edit Section where you can adjust the row. If you accidental click off of the section simply right-click on it and select Edit Section to bring the panel back up.
  4. Change the Content Width to Full Width (extends the content to the width of the row).
  5. Toggle on Stretch Section to YES (pushes the row to the edges of the page).
  6. Change Height to Min Height, then choose 250px (this will force the height of the section to be larger).
  7. Select the Style tab at the top of the Edit Section panel.
  8. Under Background, select Normal, then the Slideshow button (most right button).
  9. Press the add image button and upload two Cecil landscape images.
  10. Feel free to explore the different options and make any changes you'd like.
  11. When you are happy with your choices press Update to save your changes.
Elementor Elements
Elementor Elements
CMS Site (homepage) Lab
PlayPlay
Call to Action
Instructions
  1. We have customized a section to have a background image that is a sort of slideshow. Now let's apply elements on to it.
  2. First press Elements button to return to the Elements panel.
  3. In the Elements panel click and drag the Heading element onto the inside the section. This will create a heading element.
  4. Inside the Edit Heading panel change the Title to "Welcome to Cecil College".
  5. Change the Alignment to center.
  6. Select the Style tab.
  7. Adjust the settings to make the text easier to see. Try changes to Text Shadow.
  8. Press Update when you are done and then to return to the Elements panel.
  9. Click and drag the Button element under the heading you made inside the section. This will create a button element.
  10. Change the Alignment to center.
  11. Select the Style tab.
  12. Adjust the settings to make the button text easier to see. Try changes to Text Color.
  13. Press Update when you are done and then to return to the Elements panel.
  14. You have completed your first section and elements.
More Elementor Sections and Elements
More Elementor Sections and Elements
CMS Site (homepage) Lab
PlayPlay
Finished Homepage
Instructions
  1. We have a single section completed but the page needs more sections and elements. Let's complete the rest. It is the same process as the previous slides.
  2. Press the (Add New Section) button to add another section and choose three columns.
  3. The default section settings are fine. Press the to return the Elements panel. Click and drag the Image Box into each column.
  4. Select each Image Box element you created and apply images, text, and adjust the settings.
  5. Add another section, . Select two columns with the left column being half the size of the right.
  6. Stretch Section should be set to YES.
  7. Select the Style tab. Under Background select Normal. Background Type should be Classic (first button). Color should be Default>Primary.
  8. Press Update then to return to the Elements panel.
  9. Click and drag the Testimonial element from the Elements panel into the first column. Apply images, text, and general settings.
  10. Click and drag a Heading and a Text Editor element from the Elements panel into the second column. Apply text and general settings.
  11. Add another section, . Select one column.
  12. Click and drag a Heading into the column. Click and drag the Basic Gallery under the heading you just created. Apply images, text, and general settings to the elements.
  13. Feel free to explore the options on the page.
  14. Once you are happy with your page press Update. Your homepage is complete!
  15. Press the settings button then the View Page to exit the Elmentor page builder and view your results.
Final Review and Submission
Final Review and Submission
CMS Site (homepage) 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 12, then the Class 12: CMS Site (homepage) Lab folder, then the assignment with the same name. Finally, Attach the zipped file.
Lab Synopsis
Lab Synopsis
PlayPlay
Reflection

I am sure you can see how quickly and easily you can create webpages in Wordpress and a robust page builder such as Elementor. This is one of the reasons this has become such a popular solution to web design. It is more about making design choices and less about technical knowledge. You will find however that knowing HTML, CSS, and how the internet generally works will make you a power user.

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

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