Now let’s work on the TownSite’s appearance from the visitor’s side, known as the Frontend.

To view the TownSite, hover over the house icon on the admin bar, and click Visit Site.

The Homepage of the TownSite will be shown. To edit it, click Enable Visual Builder on the admin bar.

Note: The formatting of the Homepage may appear incorrect. We will fix this in a later step.

The Visual Builder will appear. You may now edit any portion of the page simply by clicking on it.

TownSites uses Divi as its Visual Builder. For a quick rundown of how the Divi Visual Builder works, click here.

A Page built using Divi has three main elements:

• Sections (outlined in blue)
• Rows (outlined in green)
• Modules (outlined in gray)

Sections and Rows are used to lay out our content, while Modules contain the content itself. To edit a Module, click on it and then click the white icon in the gray box.

Let’s start by replacing the default profile picture with the user’s headshot. Click on the default profile picture, then click Module Settings.

Notice that this module is outlined in green, not gray. That indicates that there are other modules like this on the site, and they will be updated as well upon saving.

The Module Settings box appears. This particular module is known as a Blurb (an image followed by a block of text). To edit the image, scroll down and click Image & Icon, then click the button on the image.

The Image Upload screen will appear.

Now we need to prepare the headshot. Go back to the Onboarding Form Submission and view the headshot the customer supplied. It will open in Dropbox. (If you can’t view the files, visit Logging In for information on how to get Dropbox access.)

Next, take a screenshot of the image; a square-shaped one that contains just the Customer’s head and shoulders, like the one pictured here.

To take a screenshot on Windows, press Win+Shift+S. On a Mac, press Cmd+Shift+3.

Save the screenshot to your computer.

Back at the TownSite’s Image Upload screen, click Select Files and upload the screenshot you saved.

Once it has uploaded, click the Upload an Image button on the bottom right.

Your headshot should now show in place of the default image. Click the green Save Changes button to finish.

If you see a default profile picture on the Homepage header banner, please repeat the steps above to add the Customer’s headshot there, too.

Next we will need to change the background of the header banner. Click on the header section of the homepage, then click on the Section Settings button in the blue box.

The Section Settings box appears—you are now editing the header section of the page. To change the background, click Background, then Background Image. Then click the white icon to change the image.

Now go back to the Onboarding Form Submission. The Customer should have uploaded at least one image in the Community section of the form. Download the image from Dropbox and upload it to the TownSite in the same manner as the headshot.

Your new header image should now have replaced the default one. Use the other background settings (Background Image Position, Background Image Vertical Offset, etc.) to make it look nice in the header. Once finished, click the green Save Changes button.

The Customer may have indicated that they would like other customizations added to their TownSite. Now is a good time to add them. It’s also a good excuse to get accustomed to using the Visual Builder, if you aren’t already.

In this Example, Julie has indicated that she would like a Script font used for the title instead of the default block font. To achieve this, we simply click on the title, then click the icon to open the Module Settings. From there, click the Design tab and choose Heading Text to change the heading font.

Once you’re all done, click the purple icon at the bottom center of the window to bring up the main menu. Click the Save button at the bottom right to save your changes. Then click Exit Visual Builder to return to the TownSite Dashboard.