While WordPress is the world’s most popular framework for creatingwebsites, Divi has been the most popular WordPress “premium” (ie:non-free) theme in recent years. In our 2nd Project Website, you’ll get hands-on experience with both WordPress and Divi as you reproduce a one-page website for a fictitious San Diego web design and development agency.

In this simple Phase 1 step, youwill simply register a new WordPress website and make 3 Posts to createa basic starter site like that shown in the video below, which alsoprovides an overview of the Phase 2 steps.

Once your website looks like that shown in the video, click the”Submit Assignment” button above to submit the URL for your home pageand you’re done. Added instructions are below the video.

Spring 2020

2nd Project Website: Phase 1

• DueMay 19 by11:59pm
• Points30
• Submittinga website url

WhileWordPress is the world’s most popular framework for creating websites,Divi has been the most popular WordPress “premium” (ie: non-free) themein recent years. In our 2nd Project Website, you’ll get hands-on experience with both WordPress and Divi as you reproduce a one-page website for a fictitious San Diego web design and development agency.

In this simple Phase 1 step, youwill simply register a new WordPress website and make 3 Posts to createa basic starter site like that shown in the video below, which alsoprovides an overview of the Phase 2 steps.

Once your website looks like that shown in the video, click the”Submit Assignment” button above to submit the URL for your home pageand you’re done. Added instructions are below the video.

Registering Your New Website

Once you register your site and log in, you’ll see a purple box near the top of the screen with a link to the Divi Documentation website.Click that link to begin learning how the Divi system works and pleasebookmark that site. It has a ton of video tutorials and reference links.Also, the Phase 2 page to be published soon will have a 1:30hr how-tovideo.

Here are the steps to register your WordPress site:

1) Visit https://webdev.one-small-planet.us/wp-signup.php (Links to an external site.)

2) Enter a Username (lowercase letters and numbers only, no spaces)and email address. Then, click “Gimme a site!” On the next page, enter a”Site name.” You can re-use your Username or pick anything else, but nospaces or extra characters. For “Site title” put “2nd Project Website”or “CSIS 132 WordPress” or something like that then click “Signup.” PS:You can select or deselect the box about search engine listings. Itwon’t matter since your website will be erased at the end of class.

3) You will next see a screen saying “Congratulations! Your newsite…is almost ready,” saying an email has been sent with anactivation link.

4) Within 3-4 minutes, check your email (including your “spamfolder,” if you don’t see the message) then click the link in theconfirmation email you get. That will take you to a page that says “Youraccount is now active.” The screen will have an auto-generated password you need to highlight and copy as you will need it on the next screen which you can get to by clicking “Log in” . When you log in successfully save your password in your browser and bookmark the login page. PS: If you lose your password, you can create a new one by clicking the “Lost your password?” link on the login page (Links to an external site.)which, again, you should bookmark.

5) When you log in for the first time, you should see a screen likethe one below. Notice the block in purple toward the top with links toDivi Documentation and tutorials. Click the link and bookmark that page. It’s the master resource for learning how to use Divi’s Visual Builder and Page Builder systems and theme options.

Creating 3 WordPress Posts

Logged in to your new WordPress site, you can now create three “Posts,” each just containing the dummy Latin text below. Finding Posts -> Add Newon the WordPress “Dashboard” is easy. Just highlight icons on theleft-hand side of the screen and tooltip cues pop up. The Posts iconlooks like a thumb tack and has an “Add new” option.

1) After clicking “Add New,” you will see a screen with a popup aboutthe new WordPress “block editor.” You can click its “X” to make it goaway. In the middle of the page, you’ll see a toggle with an option tobuild your post using the “Divi Builder” or the “Default Editor.” Click”Default Editor” and you’ll see a popup about “adding blocks” byclicking a “+” symbol.

2) You should automatically next see “Add Title” show up near the topof your page. The title for this 1st Post will be “Completely CustomWebsites”. The title of your 2nd Post, which you’ll make next, will be”Travel Biz Websites.” The title of your 3rd Post will be “Real EstateWebsites”. Look for “Enter title here” near the top of the page. Putyour cursor in the “Add Title” area and just type your first Post title.

3) Below your new Post Title, you should see “Start writing ortype…” Copy-paste the dummy Latin text below these instructions intothat main part of the screen. This will be your Post text. Do not clickthe purple “Use The Divi Builder” button near the top of the screen. Wewill get into that functionality in Phase 2.

4) You now need to add the “Featured Image” for your Post. InWordPress, “Featured Images” are the main images that display for anyPost (which is usually an article, real estate listing, etc) both inthumbnail and larger sizes. The 3 “Featured Images” you need are in this ZIP file,one for each of your 3 Posts. You should be able to tell which imagematches each Post. In the new WordPress “Gutenberg block editor,”released in January of 2019 and implemented on our class WordPresssetup, the way you set the Featured Image for a Post is by clicking”Document” in the righthand column of the Edit Post screen, then clickthe “Featured Image” dropdown and click its “Set Featured Image” button.That will allow you to select the correct image on your computer – fromthose in the ZIP file above – to upload and associate with theappropriate Post.

5) Now that you’ve added a Title, text and a Featured Image, you have the minimum basics for your Post. Click the blue Publish button toward the right side of the screen otherwise it will not be saved or published!After clicking “Publish” you may see a reminder your Post will bepublished “immediately” and it will suggest adding “Tags.” WordPress”Categories” and “Tags” are important ways to classify Posts. However,for this exercise, we’re not bothering with them. So, just click”Publish” again. PS: The Publish button will become Update for subsequent edits.

6) Now that your 1st Post is “published” you will see a “View Post”button in the righthand column which you can click if you’d like.Regardless, your next step should be to highlight the “Posts” icon inthe lefthand menu and click “All Posts.” You will see both the”Completely Custom Websites” Post you just added and a “Hello World!”Post which WordPress automatically creates as an initial dummy Post. Putyour cursor over the “Hello World!” Post and options below it willlight up. Select “Trash” to send the “Hello World!” Post to the trashbin.

7) Now, add your next 2 Posts using the same steps as for your 1stPost. Again, their Titles will be “Travel Biz Websites” and “Real EstateWebsites” with the appropriate Featured Image set for each and the sameLatin dummy text.

8) Once you’ve created all 3 Posts, visit your site’s Home page byclicking the “Visit Site” link circled below. The address will be https://one-small-planet.us/WebDev/ (Links to an external site.)followed by whatever you chose as your “Site name.” To return toediting your site, highlight “My Sites” near the upper lefthand cornerof the screen then click “Dashboard” from the dropdown. You can thenclick “All Posts” and, highlighting any given Post, select “Edit” or”Quick Edit.” If you edit a post, remember to click the Update button before leaving the page so your changes are saved.

Once you’re done and have a site with 3 Posts that show on its homepage similar to what’s shown in the video above click the “SubmitAssignment” button above to submit the URL for your site’s Home page.

PS: You can experimentwith Divi beyond class assignments by creating Pages (“Add” from “Page”menu) and building anything you want, beyond 2nd Project Website tasks.The only caveat is that, while you can “export” Divi pages, you can onlyreuse them if you buy the Divi theme and have WordPress hosting.

Phase 1 -> Phase 2 Notes

You can submit your Phase 1 step and immediately start working on Phase 2 without affecting your Phase 1 work and grade.

The Phase 2 video – which all of you should watch to avoidfrustration and get this assignment done much faster than otherwise -shows how to change the home page of your site from its default “Yourlatest posts” setting to instead display the “Sample Page” of your siteor a new Page – now named “Home” – where you will build your 1-pagePhase 2 website using either the Divi “Classic Builder” or “VisualBuilder.”

To start into Phase 2 without affecting your Phase 1 results andgrade, just wait until your Phase 1 has been graded before switching thehome page of your site from “Your latest posts” to your new “Home”Page. Watch the Phase 2 video for related instructions.

---

Latin dummy text to copy-paste into each Post –

Lorem ipsum dolor sit amet, ei graeceneglegentur pro. Mucius labore gubergren pri an, et tota legendosmediocrem sit. Corpora sapientem ea has, no dicunt percipitur vis, vimeu soleat phaedrum splendide. Ex pertinacia posidonium mel, eum rebumornatus epicuri id, fierent prodesset ex his. In usu clita essentblandit, malorum molestiae ius id.

In utamur perfecto necessitatibus eam.Sanctus menandri sit ut, eu pro porro nihil comprehensam. Quas laboramushas eu, wisi labore accusata duo ad. Usu id altera scaevola, usu nibhconceptam id. Posse timeam forensibus mei ei, an his eius meliusinsolens, aeque reprehendunt at nam.

His lorem etiam no, ius ut brute insolensconsequat, aperiri eleifend te ius. Vis no epicuri legendos, cum idprobo vulputate. Eum mucius feugiat an. Omittam detraxit ea eos, meaanimal nusquam eleifend te. Te nam nisl minim ignota.

Est ne debitis partiendo, pro ei casemutat possit. Ponderum comprehensam ut per, no sensibus oportere sit.Eam cu debet quidam, sit noster accusata facilisis an. No sea dicantprimis epicuri. Ei commodo scripserit dissentiunt nec, eu choro posteaaperiri mel. Qui ex dicta gubergren, delicata gloriatur qui no, sit eavide omnium.

Te has error commodo expetendis, eu promodo graeco timeam. An nam stet ornatus sensibus. Tale fuissetscripserit eum ea, ei postulant contentiones vix, cu vel aperiridetraxit disputando. Dicant graeci ex usu, mei ut sale tincidunt.

Cu nec nonumy audiam atomorum, no meaoblique iracundia voluptaria, ut sit aliquid minimum signiferumque.Solum scripta fuisset ne duo, an usu partem periculis. Vis in populooportere, agam efficiendi delicatissimi cu mea. Vim in salutatuspercipitur necessitatibus, populo aperiam complectitur te cum. Menandrilobortis eu mel, no posse iracundia cum.

Putant complectitur ex eum, quasdissentias ex est. Fierent adolescens cu eam. Ex pro latine tritanifacilisis, sed audiam persius ut. Nec debet argumentum interesset id,qui ne doctus cetero. Ea ludus vituperatoribus duo. Disputationimediocritatem has ei.

The video below is over an hour long and steps through everything you need to do to complete “Phase 2” of your 2nd Project Website.Please watch it. The hour that takes will save you far more than thatamount of time figuring out how to complete the assignment, unless youhave prior Divi experience, as it walks through every step in detail.

You can proceed without watching the video if you want – Divi isrelatively intuitive and there are lots of tutorials and referencesbelow – but since all questions about how to do Phase 2 are covered indetail by the video, if you send me any Phase 2 questions, I’ll almostcertainly ask you to watch the video.

Once you have your one-page website looking as it should, just press the Submit Assignment button above, paste the URL of your page website and you’re done!

The quickest way to see what you’ll be replicating is to check out the demo site (Links to an external site.),also shown in the video below. Your site should closely resemble thesite that you’ll see via the link above. Below the video are sectionswith links to Divi tutorials, information about exporting your Divi pageand more.

Video segments

start-6:20 min – Basic intro
6:20-8:20 min – “Phase 1” review
8:20-end – “Phase 2” steps

Spring 2020

2nd Project Website: Phase 2

• DueThursday by11:59pm
• Points60
• Submittinga website url
• Availableuntil May 29 at 11:59pm

The video below is over an hour long and steps through everything you need to do to complete “Phase 2” of your 2nd Project Website.Please watch it. The hour that takes will save you far more than thatamount of time figuring out how to complete the assignment, unless youhave prior Divi experience, as it walks through every step in detail.

You can proceed without watching the video if you want – Divi isrelatively intuitive and there are lots of tutorials and referencesbelow – but since all questions about how to do Phase 2 are covered indetail by the video, if you send me any Phase 2 questions, I’ll almostcertainly ask you to watch the video.

Once you have your one-page website looking as it should, just press the Submit Assignment button above, paste the URL of your page website and you’re done!

The quickest way to see what you’ll be replicating is to check out the demo site (Links to an external site.),also shown in the video below. Your site should closely resemble thesite that you’ll see via the link above. Below the video are sectionswith links to Divi tutorials, information about exporting your Divi pageand more.

Video segments

start-6:20 min – Basic intro
6:20-8:20 min – “Phase 1” review
8:20-end – “Phase 2” steps

The Divi Theme

Once you have activated Divi for your site – you change themes inWordPress via the menu that appears to the right – you’ll see manyDivi-related options and capabilities that extend core WordPressfunctionality.

When editing Pages or Posts, the Divi specific options becomeavailable after clicking the purple “Enable the Divi Builder” button(shown below). That provides powerful drag-and-drop functionality tocreate, move and modify Sections, Rows, Columns and Modules (using either the “Classic” or “Visual” builder).

Once you’ve begun using Divi to edit any Page or Post, do not click the green “Use Default Editor” button at the top of the screen, as that would cause you to lose all Divi-specific settings.

When you begin using Divi, you will likely automatically be working with its Visual Builder interface. Most developers regularly building sites with Divi prefer to use both the Classic Builder and the Visual Builder versus using only one or the other. The Classic Builder is helpful for making major changes to your page – rearranging Section and Module elements – while the Visual Builder is generally better for fine-tuning appearance and functionality.

To enable both modes, do this –

Click Divi -> Theme Options then look for and click the Builder tab. Just below it are Post Type Integration and Advanced tabs. Click the Advanced tab then enable Enable The Latest Divi Builder Experience and Enable Classic Editor. Then, scroll to the bottom of the screen and click “Save Changes.”

To get the Google Map to load on your page, you will need to enter a Google API key. For that –

Click Divi -> Theme Options. Scroll down the page to the Google API Key field, then copy-paste this key – AIzaSyAzlLXuX5_82_G0-bYA-bjxhZe_6Rr95X0 – then, scroll to the bottom of the screen and click “Save Changes.”

Learning Divi

The best resource for learning Divi is its official Divi docs website (Links to an external site.), which has a huge collectionof tutorials. Click that link or the image below to get started. What’sgreat about this resource is that there is a video at the top of eachpage for every topic, followed by written explanations.

Two important aspects of learning the Divi environment –

1. The Divi Builder (Links to an external site.) (which has both a “Classic” and a “Visual Builder” mode). Video and text on this page (Links to an external site.) introduce the Divi Visual Builder and its global copy-paste functionality.
2. The Divi Modules collection (Links to an external site.) (the link is to just the 1st of 5 pages, each with with Module tutorials).

The Divi tutorials website has six main categories;

1. Divi Modules
2. Learning the Basics
3. Using the Builder
4. The Divi Library
5. Customizing Divi
6. Other Features

Each link leads to a page filled with tutorials!

The Divi theme framework is very “design centered”and thus Divi appeals hugely to the very active international WordPressUX “front-end design” community. However, serious functional andback-end customization abilities are also present in addition toopen-ended look-and-feel customization, a key reason Divi is the topWordPress theme framework used by professional web agencies in the US!

Besides having all source code and the ability to create a “childtheme,” Divi has Code Modules and an “Advanced” tab for each Module. The”Advanced” Module tabs allow the injection of custom CSS code and theinvocation of PHP hooks (ie: function calls).

Elegant Themes maintains a way active blog (Links to an external site.),which I consider to be the best and most dynamic in the whole WordPressworld! Posts in recent years have offered a rich variety of articlesand videos covering a broad range of WordPress and Divi topics plusinternet business and marketing issues.

Globally, the WordPress world is dynamic and entrepreneurial.While the major DIY platforms – like Wix, Weebly, SquareSpace – alsohave “themes,” Divi’s structure is so robust that it supports what thetheme vendor calls “layout packs” involving pre-built websites forparticular niches. You simply replace their content and tweak styling toquickly create a similar but unique website. Here’s an example (Links to an external site.).

Evaluation Criteria

1) All sections and elements on the demo site exist on your site in the same order with the same basic look-and-feel.

2) The functionality of your site is thesame, incl. clickable Posts within a Divi Blog Module, animated graphicsand a functional Contact form.

Your goal is to replicate the demo site as closely as possibleincluding colors, gradients, fonts, spacing, image animations andfunctionality. Any significant deviations – like a slider that doesn’tauto-animate or a Contact form missing fields or functionality – willcause deductions.

The Divi Gallery

Most of you will find this project funand interesting. Again, Divi is the most popular theme in the WordPressworld among professional agencies using WordPress for serious projects.Once you complete your project, you can experiment further with Divi bycreating one or more “experimental” Pages, if you’d like. Click thegraphic below for a tour of Divi’s amazing functionality.

Divi Backup & Export-Import functionality

If you were to accidentally delete the Page where you’re buildingyour website – not easy to do but possible – it should go to the “Trash”bin, from where it can be restored. However, if you want addedinsurance about not losing work, you can use the Divi “Portability”option (see below) to export your Page as a JSON file. The same”Portability” option will import these JSON files and thus restore aPage (or Post).

If you buy the Divi theme at any point (annual membership about $90)you can export any Page created on one site and import it to another(but that site also must be running Divi). One great thing about thisfunctionality is that, unlike the standard WordPress export-import, theDivi JSON files contains all embedded images and icons along with pagestyling, text and links.

Website Images & Fonts

You could simply right-click each image on the demo site (Links to an external site.)to download it and save it to your computer, but that would be tediousand two “background graphic” images would not be easily downloadable. Toget all the graphics images you need for the Phase 2 step, just click here and unzip.

Divi has a humongous font selection – probably incl. all Google Fonts- so picking fonts can be tedious. As an aid to picking fonts similarto those on the demo site, this PDFhas Divi fonts as of two years ago, most of which are current. Whenusing any Text Module, you can set fonts via the “Design” tab, but it’sbest to first set site-wide default fonts – your primary BODY->P font- because that minimizes the need to individually set them within TextModules. You can do that by “Divi -> Theme Customizer -> GeneralSettings -> Typography -> Body Font.”

This said, Divi now has a slick way to make the customized main (P) font and any customized H1, H2, etc. fonts the default forall its Text Modules. After customizing fonts in a given Text Module,you just click its icon with three vertical dots then click “Make StylesDefault,” as shown in the screenshot below.

While you don’t need any added graphics for this 2nd Project Website,for future projects, you might appreciate the following links. Siteslike Shutterstock.com sell images for web use, but several major sitesalso now offer royalty-free photos and other images under GPL licenses.Here are examples.

Unsplash.com (Links to an external site.)

Pixabay.com (Links to an external site.)

Stocksnap.io