Objective

To learn basic Express CMS skills by recreating the fictitious website La Brújula.

Discussion

Wordpress is a good choice for resturant websites. Resturaunt owners often rely on staff who lack web development experience to continually update the menu and post season events. Once the website has been created by a professional designer, resturant staff can be trained within a couple hours on how to update wp content on thier own.

We will be using the WP theme Auberge, which features an updated customizer, contemporary responsive design, and a powerful menu feature (unfortunately it is unavailable in CampusPress).

To increase WP fuctionality, we will be activating the powerful block builder plugin Divi Builder.

This exercise introduces intermediate Wordpress skills including custom CSS and advanced plug ins.

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 3 > Dashboard
5. settings > reading > site visibility "discourage search engines from indexing this site" > save changes

Installing the theme

1. appearance > themes > Auberge

Adding content

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

Add pages

1. pages > all pages > sample page: title= "La Brújula," slug "brujula," template= full width, publish
2. add new: title= "Menu," featured image= cheers.jpg, template= full width, publish
3. add new: title= "Reservations", featured image=" tables.jpg," template= full width, publish
4. add new: title= "Hours and Locations", featured image= "entrance.jpg," template= full width, publish
5. add new: title= "About," featured image= "soto.jpg," template= full width, publish

Customizing site appearance

1. appearance > customize > static front page > static page= yes, front page= "La Brújula"
2. menus > add a menu, title=top; top menu= yes, add items= add all pages, re-order if needed
3. header media > new header= "tapas.jpg"
4. site identity > site title= "La Brújula," site icon= icon.png
5. theme options > colors > experiment with colors
6. customize > widgets > footer widgets > add a widget: text; add "hours," happy hour," and "location" in separate widgets

Adding social media icons

1. appearance > customize > menu > add menu > title: social, social links menu= yes
2. add custom link= facebook url (insert fb url of your choice), link text= facebook (wp auto recognizes social media url's and inserts the corresponding icon)
3. repeat for instagram

Installing Divi Builder plug-in

1. plug ins > appearance: "divi builder;" activate

Adding Divi blocks on "About" and "Reservations" pages (back-end)

1. pages > all pages > "about" > edit > "use divi" button
2. insert column(s)= one column
3. insert module(s)= text; add "about" copy from text doc
4. style copy (make Abigaíl Soto h6)
5. update
6. repeat for "reservations" page

Adding Divi blocks on "La Brújula" page" (front-end)

1. pages > all pages > "La Brújula" > edit > view page > enable visual builder (top menu)
2. add new section (blue + button) > regular, one column, insert text module
3. add copy "Spanish Paella...," style copy (h4)
4. insert row under "Spanish Paella..." (green + button), one column, insert text module, add remaining copy
5. add new section (under copy) > regular, one column, insert gallery module
6. gallery settings: update gallery= add images, layout= grid, number of images= 12, show title and caption= no, show pagination= no, disable on= phone
7. row settings (general): make this row full width= yes, use custom gutter width= yes, gutter width= 0
8. exit visual builder > save & exit

Adding Divi blocks on "Menu" page" (front-end)

1. add section, add one column row, insert text module, add copy "Tapas de verduras," style type (h3)
   
2. add new row, three columns, insert text modules, add copy, style copy (item title h6)
   hint: if paragraph is styled with unwanted headings, edit in text (html) mode
3. row settings > use customer gutter width= yes, gutter width= 3
4. visually balance padding between rows
5. copy section, add remaining menu items, delete unneeded modules
6. visually balance padding between sections
7. repeat for remaining menu items
8. exit visual builder > save & exit

Adding "Hours and Locations" page (front end)

1. add copy using the Divi Visual Builder (front end), style copy
2. add row, add map module
3. map settings–general: map center address= downtown champaign, IL
4. map settings–design: use grayscale filter= yes, amount: 20%
5. map settings–css: main element= filter: invert(100%) contrast(80%) brightness(190%)
6. exit visual builder > save & exit

Fine tune type

1. Using the sample as a reference, edit the topography for each page if needed

Grading

1. link this exercise to your process page