Objective

To learn basic Express CMS skills by recreating the website redesign The Cactus and Succulent Society of America.

Discussion

As a web designer, you may be asked to create a website for a non-profit organization at a reduced (or pro bono) rate. If the designer accepts the project, it's important to find a web development solution that both parties can live with. The client requires a site that's inexpensive to host and easy to update. The web designer must find the most cost and time efficient development tools available. Wordpress is often the web development app of choice in these situations.

We will be using the Elegant Themes' web builder Divi, which features the Divi Builder, contemporary responsive design, and a powerful customizer. To streamline the design process, we will be using a pre-made Divi layout pack.

This exercise introduces intermediate–advanced Wordpress skills, including block building techniques and animation.

Note: This exercise was designed to showcase a number of modules and features available in the Divi Theme. Therefore, there's an abundance of images, animations, and other "extras" that might not be relevant or necessary when developing a real-world non-profit website.

Procedure

Preparing for the exercise

1. download starter files (location=Netshare/Digishare-Students/faa999/gds171)
2. open the Word Online content list doc
3. log into your Campus Press WP account using your ParklandOne credentials wp.parkland.edu
4. My Sites > Jane's Exercise 4 > Dashboard
5. settings > reading > site visibility "discourage search engines from indexing this site" > save changes

Installing the theme

1. appearance > themes > Divi

Adding media

1. media > add new: upload photos
2. change titles, add alt text

Add pages

1. pages > all pages > sample page: title= "CSSA," slug "cssa," publish
2. add new: title= "Membership," publish
3. add new: title= "Contact", publish

Customizing theme options

1. Divi > theme options
2. favicon = favicon.png
   
3. color pickers default palette =
   #000000
   #ffffff
   #6fbf00
   #93cc00
   #f7f7f7
   #685e57
   
4. show google+ icon = no
   
5. show RSS icon = no
   
6. back to top button = yes
   
7. smooth scrolling = yes

Divi customizer settings

1. Divi > theme customizer > general setting
2. add site title, remove tagline
3. typography
   -16/1.8em
   - h1 = 32pt
   - header font style = bold, caps
   - h1 and body = raleway
   - body link color = #6fbf00
   
4. header and navigation > primary menu bar
   - make full width
   - hide logo
   - font = raleway
   - active link = green
   - dropdown line color = green
5. header and navigation > header elements >
   search = no
6. static front page; set static page to CSSA
7. menu; add new menu "top," add pages

Landing Page
Installing layout pack on landing page

1. pages > all pages > "cssa;" delete content, update, edit with divi, enable visual builder
2. install premade layout (accessed through the purple widget at the bottom of the page) > "Farmers Market" > "Landing" > use this template (install can take a few minutes)

Removing sections on landing page

1. remove unneeded sections, rows and modules (use sample as reference)

Replacing images and video on landing page

1. replace header images and animated block images
2. remove bg image and gradient from quote 'section,' add photo into 'module', bg image position = top center, add gradient and adjust settings, "place gradient above bg" = yes
3. replace "special events" photos (note pixel width)
4. replace video, generate overlay from video
5. replace footer image, adjust gradient
6. save

Replace text

1. using the content sheet as a reference, replace text with the following font specs:
   - font = raleway
   - h2 = semi-bold
   - p = semi-bold (assign 'raleway' to access font weight)
   - button text color = dk green
   - button text hover color = lt green
   - button font = raleway
   - counter = 'sample' colors from photos
   - counter % = no
   - quote = adjust line height, font, font size, line spacing
   

Styling buttons

1. change type and button style in header, use content sheet for text
   - button color = dk green
   - button size = 22px
   - border width= 0px
   - border radius = 6px
   - font = raleway
   - font weight = semi-bold
   - button hover bg color = light green
   - show button icon = no
   - hover button border radius = 6px
2. copy module style and paste for footer button
   
3. style 'newsletter button' (will not accept paste option)

Add full width image

1. add full width header section between "who are we" and "yearbook"
2. add full width image module , img = teddybear.jpg
3. section settings (purple options) > design > dividers > top and bottom
   dividers > bottom
   - divider style = "v two step zig-zag"
   - color = white
   - divider height = 42px
   
4. design > animation
   - animation style = fade
   - duration = 1100ms
   - delay = 200ms

Add dividers

1. top header section settings > design > dividers > bottom
   - divider style = "two step zig-zag"
   - color = white
   - divider height = 66px
   
2. add top and bottom dividers to quote section
3. add top divider to footer section
   Hint: change footer divider color to off-white

Add animated divider

1. video section settings > background, remove gradient, change bg color to white
2. add a blank regular section between the video and newsletter section (no rows or modules)
3. add a bottom divider, 66px (no color)
   
4. design > animate
   - style = slide
   - direction = up
   - duration = up
   - intensity = 15%
   - starting opacity = 100%
5. save

Membership Page
Installing layout pack on membership page

1. pages > all pages > "cssa;" delete content, update, edit with divi, enable visual builder
2. Install premade layout (accessed through the purple widget at the bottom of the page) > "Farmers Market" > "About" > use this template (install can take a few minutes)
3. remove video, newsletter, and "our program" sections

Replacing header image on Membership page

1. replace header image, adjust gradient, add divider

Formatting "benefits" and "your membership supports" section

1. change "member benefit" section to 1/3-2/3 column, replace image
2. add bulleted list (see content doc), make type semi-bold
3. duplicate "member benefits" section, replace image and text
4. add animations, slide left and right

Formating toggle membership

1. restack "our mission" between "benefits" and "your membership supports" hint: zoom out to see "back end," add a new section and move row if needed
2. remove row from "our mission," add new 3 column row
3. section bg = off-white
4. add toggle module, add text (see content doc)
   - text size = 20px
   - border width = 3px
   - border color = lt green
   - body text = semi-bold
5. add "paypal button"
   - button text color= white
   -button text weight = bold
   - button bg color = dk green
   - border width = 0
   - border radius = 6px
   - show icon = no
   -button hover color = lt green
   - button hover radius = 6px
6. add bottom and to dividers

Updating footer

1. replace footer image, text and button (use content doc as reference)

Contact page
Installing layout pack on membership page

1. pages > all pages > "content;" delete content, update, edit with divi, enable visual builder
2. install premade layout (accessed through the purple widget at the bottom of the page) > "Farmers Market" > "Contact" > use this template (install can take a few minutes)
3. using what you learned from the exercise, create the 'Contact' page using the content doc and sample website as a reference

Fine tune padding and animations

1. using the sample as a reference, fine tune section padding and animations

Grading

1. link this exercise to your process page