Select Page
Web Design I
Class 12: Landing Page

Topics

    • Landing Page
    • Customize
    • Usability
    • Week 12 CMS Site (homepage) Lab

Don’t skip out on class 12

Slide01
PlayPlay
Slide02
PlayPlay
Slide03
PlayPlay
Slide04
PlayPlay
Slide05
PlayPlay
Slide06

Landing Page

Landing Page:

The landing page is where the user ends up when they click on a hyperlink from another site such as an advertisement. It is a page that works all by itself. This is usually a sites homepage.

Typically:

  • Draws users into your site.
  • Heavy use of imagery.
  • Limited text.

Steps (in WordPress):

  1. Create page. Name it Homepage.
  2. Set homepage in Settings>Reading.
  3. In the Homepage page use a plug-in (Page Builder, Elementor, etc.) to create a unique page.

In your homepage at the bottom right you may need to change the template to one that does not include a side menu (usually full-width).

Customize

Customize

It is possible to make some design choices using the Customize feature in WordPress. Depending on the theme you have chosen this could have a very robust set of options or be very limited. It is however, pretty user friendly compared to other aspects of WordPress. I would suggest going through each option and see what possibilities there are.
Appearance > Customize

Usability

Usability:

Printed Page Goal:
Legibility: The ability of the page to be comprehended by the target audience.
Web Page Goal:
Usability: The experience of the user when interacting with your page.

Five Considerations:

Learning
User understands the content of the site and grasps concepts throughout
Efficiency
Navigation and structure is clear to the user
Memorable
The user is left with an experience that allows them to remember the site
Errors
The goal is to have a few as possible so the experience is not tarnished
Satisfaction
The overall appeal of the site.

Usability First — Why Usability Design Matters to UI/UX Designers

Click on the image above for a good explanation of usability design

Dimensions:

The site should not be smaller than the user’s screen.

You want the design to be no wider than the user’s browser (960px is a good rule).

The page should be simplify the amount of content so it can be viewed on small and large screens.

Content:

  • Header (Masthead/logo)
  • Navigation
  • Links
  • General Content (text/images)
  • Login
  • Forms
  • Comments
  • Legal Information
  • Interactive images/content
  • Video
  • Audio
  • Footer

Navigation

  • Concise: Should be quick and easy to read.
  • Clear: Should be able to decipher where a link leads.
  • Selective: Should only contain links.
  • Context: Should know where you currently are.
  • Interactive: Should be large enough to use and respond to hover, press, visited, etc.
  • Consistent: Primary navigation should remain the same throughout.

Your site should fit the device displayed on

…or you end up with the “Ring”

Week 12 CMS Site (homepage) Lab

CMS Site (homepage) Lab

In this lab you will build on the site you created in the last lab and complete the homepage. First you will adjust the theme and WordPress settings. Then the homepage of the site will be created. The general layout, and content will be applied.

You will be graded on the following:
  • WordPress Setup:
    • WordPress default settings set.
    • Theme settings adjusted.
  • Layout:
    • Sections of content are organized.
    • Strong grid design utilized.
  • Basic Content:
    • Well-written text with no grammar mistakes.
    • Images scaled, and adjusted for the page.
    • Interactive dynamic content included.
  • Aesthetic:
    • Appealing design with professional craftsmanship throughout.
Resources:
Assignment Video Tutorials
You may watch the video tutorials below
Assignment Lab Materials
You may download the lab materials here: wd1_week12_labMaterials

Lab Tutorial Slideshow

This tutorial will guide you through the process of creating a homepage in WordPress

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
 

Wait! Before you go!

Did you remember to?

  • Read through this webpage
  • Watch the videos
  • Submit Week 12 CMS Site (homepage) Lab in Assignments section on Blackboard