DESIGNED, SEALED & DELIVERED

DESIGNED, SEALED & DELIVERED

HELLO AND WELCOME You have just been handed your brand new website and it looks wonderful. Now what do you do with it will make it truly yours. We have created this series to help you do just that. In this manual, I am using Firefox for the browser screenshots. Start with the Branding and Building a Website Materials and Worksheets. The topics in this series represent the most frequently asked questions by clients. Hopefully they will make this process easier for you. While working on your website, you may find yourself stumped. Don t worry! Help Resources Available 24/7: Zendesk FAQ (Frequently Asked Questions) o https://thehealthcoachgroupcs.zendesk.com/hc/en-us Video Tutorials in the Dashboard o https://www.wp101.com/tutorials Divi Theme ReadMe Documentation o http://www.elegantthemes.com/gallery/divi/readme.html Wordpress Glossary o https://codex.wordpress.org/glossary Good luck!

CONTENTS Basics... 1 Login... 2 Dashboard... 4 Dashboard: Toolbar... 9 Appearance: Customize... 11 Color Panel... 13 Theme Settings Panel... 15 Font Panel... 17 Schemes Panel... 18 Background Image Panel... 19 Navigation Panel... 20 Static Front Page Panel... 22 Appearance: epanel... 23 Navigation: Pages... 29 Navigation: Categories... 30 Navigation: General Settings... 31 Layout Settings: Single Post Layout... 32 Layout Settings: Single Page Layout... 33 Layout Settings: General Settings... 33 Ad Management: Manage Un-Widgetized Advertisements... 34 SEO: Homepage SEO... 35 SEO: Single Post Page SEO... 36 SEO: Index Page SEO... 39 Integration... 40

Support Docs... 42 Navigation/Menus... 43 Creating a Menu... 43 Add to a Menu... 46 Editing a Menu... 47 Managing Menus... 48 Page Builder... 49 Add a New Page... 50 Adding and Defining a Section... 50 Adding and Defining a Row... 52 Adding and Defining a Module... 53 Image Module Options... 54 Text Module Options... 57 Blurb Module Options... 58 Countdown Timer Module Settings... 61 Expanding/Modifying/Rearranging Your Layout... 62 Pages: Homepage, About, Blog... 63 Homepage... 63 About Page... 72 Blog Page... 72 Products and Members... 74 Products... 74 Members: Add a Member... 76 Member: Add a Member to a Level... 77

BASICS So let s start with some basics and of course some homework. The system that your website lives in is the Wordpress Content Management System (CMS for short). This will make it easier for you to make changes without needed to know anything about website coding or languages. However, you will still need to learn some jargon. Pause now and go through the Branding with Intention and Building a Website Materials. Finish all the worksheets. This will be much easier if you have a clearer vision of what you want to convey. Gather all of your materials, worksheets, data files, text, photos, logos, and graphics. You can also get help with Wordpress Jargon here; it s a glossary of Wordpress terms: https://codex.wordpress.org/glossary To Do: Branding with Intention Creating a Logo Worksheet Building a Website Worksheet Gather materials, worksheets, data files, text, photos, logos, graphics 1

LOGIN Before anything else, let s login to your admin panel also known as the Dashboard. In your Internet browser, type the address of your website into the address bar and add /wp-admin to the end. Replace yoursitehere.thehealthcoachgroup.com with your website s URL. EXAMPLE: http://yoursitehere.thehealthcoachgroup.com/wp-admin Hit Enter on your keyboard. This should take you to the admin login page. 2

To Log In: 1. Type in your username 2. Type in your password 3. Hit Log In 3

DASHBOARD Welcome to your site s Dashboard! This is the administrative panel for your site in other words, the behind-the-scenes area where the magic happens. When your dashboard comes up, there will be this very long list of things in a column on the left. This left column is your main menu of commands and what you can do with your website. There are loads of helpful links here as well. You have the DSD Trainings Videos which has help on Appointments. Again, you have Video Tutorials near the bottom which has videos on tons of stuff like posts vs pages, adding photos and images, adding widgets, creating links, to SEO Google Webmaster Tools. This is an excellent resource. Check them out if you need help on how to do something. 4

If you hover over the Wordpress logo, you can find help and suggestions in the dropdown menu. 5

To start, let s fill in your Profile information. In the upper left-hand corner, you should see Howdy, Your Name. Hover over this and click on Edit My Profile (as shown below). 6

Your Wordpress Profile Page holds a ton of important information. Address o Company: Your name o Address: Your address o City: Your city o State: Your state o Zip: Your zip code o Country: Your country Personal Options o Visual Editor o Admin Color Scheme: This changes the colors of your admin panel, but does not affect your actual website. o Keyboard Shortcuts o Toolbar o Proofreading: Proofread for double negatives, passive voice, redundant phrases and more. You can even tell it to ignore certain phrases or words in proofreading. Name o Username o First Name o Last Name o Nickname Contact Info o Email (required) o Website o Google+ o Twitter username (without @) o Facebook profile URL About Yourself o Biographical Info o New Password: Here is where you can change your password. Specific Info for The Health Coach Group Emailing Sequence Signature Admin Email address Appointments+ o My Name o My email for A+ o My Phone o My Address o My City o My Appointments WordPress SEO settings 7

To Do: 1. Fill in Address information 2. Fill in Name information 3. Fill in email in Contact Info 4. Fill in Specific Info for THCG Emailing Sequence Signature Enter the information you use on THCG website to access areas and buy products 5. Fill in Admin Email address 6. Fill in Appointments+ information if using the Appointments calendar on your site 7. CLICK Update Profile (as shown below) You must always hit the Update button to save your changes! 8

DASHBOARD TOOLBAR When viewing your website s homepage while logged into your Dashboard, a Dashboard toolbar appears at the top of your browser window. This grants you easy access to your Dashboard, as well as a few other things. The Wordpress Logo will be on the left followed by an icon that looks like a speedometer which stands for your Dashboard followed by the name of your Wordpress Account. To access your dashboard quickly, you can click on Dashboard in the dropdown menu that appears when you hover over your Wordpress site s name. 9

The + New is a drop-down menu to quickly add content. These act as shortcuts to the same menu options available in your Dashboard. 10

CUSTOMIZING Let s start customizing! Navigate back to your Dashboard homepage. Click on the blue Customize Your Site button. 11

When you click Customize Your Site it will take you to this screen below. In the left column you have a list of this you can customize, on the right is a preview of your site so you can see what the changes will look like. Along the left side are the Customize Menu options. When you click on each of these, additional options appear for each panel. This includes the following: Colors Theme Settings Fonts o Header Font o Body Font Schemes o Color Schemes Background Image Navigation o Primary Menu o Secondary Menu o Footer Menu Widgets o Footer Area #1 o Footer Area #2 o Footer Area #3 o Footer Area #4 Static Front Page o Front page displays Your latest posts A static page o Front page o Posts page 12

COLOR PANEL 13

The Color Panel includes: Background Color: All of the areas have independent backgrounds. Changing the color here has no affect. Link Color: This will be the color of linked text on your site. This will not change the color of your Navigation Menu links. Main Font Color: This will be the color of the text on your site. Accent Color: This will be the color of various accents on your site. For example, opt-in buttons. Footer Background Color: This will be the color of the footer area at the bottom of your site. Menu Links Color: This will be the color of the page links in your Navigation menu in the upper right-hand corner of your site. Active Menu Links Color: This will be the color of the page link in the Navigation menu when the person is on that page and that page is active. For example, if you re viewing the About page as shown in the image above, the About link appears light blue. Primary Navigation Background: This will be the background color of your main Navigation Menu. Secondary Navigation Background: This will be the background color of your secondary navigation area if you choose to use it. This menu appears above the main Navigation Menu on every page. You can put contact information or social media links here. Play around with the different colors until you re familiar with this panel. Note: You can choose use a pre-installed color palette by changing the color scheme in the Scheme Panel. Be sure to click the blue Save & Publish button if you want to save your changes. 14

THEME SETTINGS PANEL 15

The Theme Settings Panel includes: Boxed Layout: This will put margins on either side of your site as seen in the image above. If you choose this layout, you can choose a background color or image to fill the empty space in the margin. Stretch Background Image: If you have a background image that would need to stretch out the edges of the screen, choose this option. Vertical Navigation: This option adds a vertical Navigation Menu to the side of your website. Show Social Icons in the Header: This puts social media icons in your Secondary Navigation. There are options for Facebook, Twitter, Google+, and RSS Feed. These options can be modified in the epanel (which we will be covering later on). Show Social Icons in the Footer: This puts icons for Facebook, Twitter, Google+, and RSS Feed in your footer. Show Search Icon: This adds a Search icon to the end of your Primary Navigation menu. This allows people to search your site for specific content. Header Style: By default, the logo in your header is aligned to the left and your Primary Navigation menu is aligned to the right. You can change this to centered if you want both your logo and Primary Navigation menu to be centered on the page. Phone Number: This is where you enter your contact phone number. This appears in your Secondary Navigation menu. Email: This is where you enter your contact email. This appears in your Secondary Navigation menu. Primary Navigation Text Color: If you ve chosen a Primary Navigation background that is dark (in the Color Panel), you should choose light text. If you ve chosen a Primary Navigation background that is light (in the Color Panel), you should choose dark text. Secondary Navigation Text Color: If you ve chosen a Secondary Navigation background that is dark (in the Color Panel), you should choose light text. If you ve chosen a Secondary Navigation background that is light (in the Color Panel), you should choose dark text. Make sure to hit the Save & Publish button to save changes! 16

FONT PANEL The Font Panel includes: Header Font: The font you choose here will change main titles as shown in the image above in the red boxes. Body Font: The font you choose here will change the text that is seen on the majority of your site as shown in the purple boxes. Experiment with different fonts, as they can really change the tone of your site. Note: Use more decorative or serif fonts (such as Times New Roman) for headings and sans serifs (such as Arial) for body text for legibility. Make sure to hit the Save & Publish button to save any changes! A serif is a decorative line added to each letter. Sans serif fonts are those without (sans means without ). Hh Hh Times New Roman serif font Arial sans serif font 17

SCHEMES PANEL The Schemes Panel includes: Color Schemes: As noted before in the Color Panel section, if you don t have individual colors picked out, you can use one of the pre-installed color schemes. The default is blue if you have not made any changes. Changing the color scheme generally changes the colors of buttons ( Sign Up here! ) and main titles. Make sure to hit the Save & Publish button to save any changes! 18

BACKGROUND IMAGE PANEL The Background Image Panel includes: Background Image: This will only appear if you ve chosen the Boxed Layout option in the Theme Settings Panel. The image you use will show in the Boxed Layout margins. o If you ve chosen to use a background image, you will need to specify how you want it to behave in the following options: Background Repeat: Background Position: Background Attachment: Make sure you hit the Save & Publish button to save any changes! 19

NAVIGATION PANEL 20

The Navigation Panel includes: Primary Menu: As we ve covered, this is the navigation menu in the upper right-hand corner. Secondary Menu: Again, this is the optional navigation menu that appears at the very top of your website that contains contact information and optional social media links. Footer Menu: This is the menu that appears at the very bottom of the page in the footer. Later on, we will cover how to create menus in the Appearance menu in your Dashboard. Make sure to hit the Save & Publish button to save any changes! 21

STATIC FRONT PAGE PANEL The Static Front Page Panel includes: Front page displays o Your latest posts: Generally, you want to avoid this option. This makes changes your website to show your latest blog posts rather than the static front page that is enabled by default. o A static page: This serves as a home page where viewers can access different parts of your website. Front page: You will want this to be your Home page. Posts page: This is where you can choose which page s posts show if you changed your site to display Your latest posts. Make sure to hit the Save & Publish button to save any changes! 22

APPEARANCE: EPANEL Your website comes with custom Divi Theme Options. This is where you can control things like your logo, some navigation settings, and much more. These options exist in what we call epanel, and it can be accessed in Divi Theme Options under Appearances. The epanel includes: General Settings o Logo: Here is where you upload your logo file to appear in the header of every page of your website. Navigation Layout Settings Ad Management SEO Integration Support Docs There are several areas: General Settings, Navigation, Layout Settings, Ad Management, SEO, Integration, and Support Docs. Under Support Docs is where you will find the Read Divi Documentation, which takes you to the Divi Readme Files and Videos. Please watch as many as you can especially An Overview of the Builder and The Theme Options will Walk you through this Epanel overview step by step as well. 23

Logo: Here is where you upload your logo file to appear in the header of every page of your website. To upload a custom logo: Click Upload Image o If you ve already uploaded your image, select it from your Media Library and then click Set as Logo o If you need to upload your file, click Upload Files and drag the image into the upload box or click Select to find it on your computer After the image uploads, select it so it s highlighted in blue and then click Set as Logo Remember to hit the green Save button at the bottom of the page to save any changes! 24

Favicon: Here is where you upload your favicon image to represent your site in browser tabs and bookmark menus. In the image above, the site s favicon is a green leaf. Remember to hit the green Save button at the bottom of the page to save any changes! Fixed Navigation Bar: By default, the Primary Navigation menu stays at the top of the screen at all times even when you scroll down the page. If you use a custom logo that is taller than the default one, we suggest you disable this option. Grab the first post image: Images are created using custom fields for blog posts. If you would rather use the images that are already in your post for your thumbnail you can enable this option. Once enabled thumbnail images will be generated automatically using the first image in your post. TIP: If you enable this and attach an image you will get duplicate images in your blog post. Blog Style Mode: By default, the theme cuts off you posts on index/home pages automatically to create previews. If you would rather show your posts in full, enable this feature. Shop Page Layout: If you will be using ecommerce integration, you can define which layout you want your shop to use on product and product category pages. You can choose Right Sidebar, Left Sidebar, or Full Width. 25

MailChimp API Key: In order to successfully create and use the Divi Newsletter Module, you will need to enter your MailChimp API key here. You can create an API key here: https://login.mailchimp.com/?referrer=%2faccount%2fapi%2f&wcookie=846d06c63d295caf5614 Aweber Authorization: Authorize your Aweber account here. Regenerate MailChimp Lists: By default, MailChimp lists are cached for one day. If you added a new list, but it doesn t appear within the SignUp module settings, activate this option. Don t forget to disable it once the list has been regenerated. Regenerate Aweber Lists: By default, Aweber lists are cached for once day. If you added a new list, but it doesn t appear within the SignUp module settings, activate this option. Don t forget to disable it once the list has been regenerated. Social Media Icons: Here you can choose to display Social Media icons in your website s Secondary Menu or Footer Menu (if you ve enabled it in the Appearance > Customization > Navigation panel). Once enabled, enter your social media URLs in the appropriate blank as shown below. You will get the URL from the address bar in your browser. Remember to hit the green Save button at the bottom of the page to save any changes! 26

Numbers of posts per page: Define how many posts you would like to be displayed when a user visits a Category Page, an Archive Page, a Search Results Page, or a Tag Page. Date Format: This option allows you to change how your dates are displayed. Use excerpts when defined: This will enable the use of excerpts in posts or pages. Responsive shortcodes: This option enables shortcodes to respond to various screen sizes Google Fonts subsets: This will enable Google Fonts for Non-English languages. Back To Top Button: Enable this option to display Back To Top Button while scrolling. Smooth Scrolling: Enable this option to get the smooth scrolling effect with mouse wheel Custom CSS: 27

This is where you can enter CSS to customize your site. For extensive CSS modifications we recommend that you always use a child theme. Also Remember to Hit Save after any and all changes!!! 28

NAVIGATION Pages Exclude pages from the Navigation Bar: All of your existing pages will appear in this window. If you uncheck a page here it will not display in your navigation. Show dropdown menus: If you would like to remove dropdown menus disable this feature. Display Home link: If you use a static homepage and have created a page called Home to use, this may result in a duplicate link. In this case you should disable this feature to remove the extra link. Sort Pages Links: Choose how page links should be sorted here. Choose one of these options. Order Pages Links by Ascending/Descending: Chose Ascending or Descending Number of dropdown tiers shown: This option allows you to control how many rows your dropdown menus have. Increasing the number allows for additional menu items to be shown. Also Remember to Hit Save after any and all changes!!! 29

Categories Exclude Categories from the Navigation Bar: All of your existing categories will appear in this window. If you uncheck a category here it will not display in your navigation. Show dropdown menus: If you would like to remove dropdown menus disable this feature. Hide Empty Categories: If a category has been made but is not being used, you can choose not to display it in your navigation. Number of Dropdown Tiers Shown: This option allows you to control how many rows your dropdown menus have. Increasing the number allows for additional menu items to be shown. Sort Category Links: Choose how page links should be sorted here. Choose one of these options. Order Category Links by Ascending/Descending: Chose Ascending or Descending Also Remember to Hit Save after any and all changes!!! 30

General Settings Disable top tier dropdown menu links: In some cases users will want to create parent categories or links as placeholders to hold a list of child links or categories. In this case it is not desirable to have the parent links lead anywhere, but instead merely serve an organizational function. Enabling this option will remove the links from all parent pages/categories so that they don't lead anywhere when clicked. Also Remember to Hit Save after any and all changes!!! 31

LAYOUT SETTINGS Single Post Layout Choose which items to display in the postinfo section: Here you can choose which items appear in the post info section on single post pages. This is the area, usually below the post title, which displays basic information about your post. The highlighted items shown below will appear. Show comments on posts: You can disable this option if you want to remove the comments and comment form from single post pages. Place Thumbs on Posts: By default thumbnails are placed at the beginning of your post on single post pages. If you would like to remove this initial thumbnail image to avoid repetition simply disable this option. Remember to Hit Save after any and all changes!!! 32

Single Page Layout Place Thumbs on Pages: By default thumbnails are not placed on pages (they are only used on posts). However, if you want to use thumbnails on posts you can! Just enable this option. Show Comments on Pages: By default comments are not placed on pages, however, if you would like to allow people to comment on your pages simply enable this option. Remember to Hit Save after any and all changes!!! General Settings Post info section: Here you can choose which items appear in the postinfo section on pages. This is the area, usually below the post title, which displays basic information about your post. The highlighted items shown below will appear. Show Thumbs on Index pages: Enable this option to show thumbnails on Index Pages. Remember to Hit Save after any and all changes!!! 33

AD MANAGEMENT Manage Un-widgetized Advertisements Enable Single Post 468x60 banner: Enabling this option will display a 468x60 banner ad on the bottom of your post pages below the single post content. If enabled you must fill in the banner image and destination URL address below. Input 468x60 advertisement banner image: Here you can provide 468x60 banner image URL address. Input 468x60 advertisement destination url: Here you can provide 468x60 banner destination URL address. Input 468x60 adsense code: Place your adsense code here. Remember to Hit Save after any and all changes!!! 34

SEO Homepage SEO Enable custom title: Tthe theme uses a combination of blog name and blog description, to create titles. However if you want to create a custom title then simply enable this option and fill in the custom title field below. Enable meta description: The theme uses your blog description, to fill in the meta description field. If you would like to use a different description then enable this option and fill in the custom description field below. Enable meta keywords: The theme does not add keywords. Most search engines don't use meta keywords to rank your site anymore. If you want to add meta keywords to your header then enable this option and fill in the custom keywords field below. Enable canonical URL's: If you site has more than one address you will want to define a Canonical address. This is the address you want Search Engines to index and reference. Homepage custom title (if enabled): If you have enabled custom titles you can add your custom title here. Homepage meta description (if enabled): If you have enabled meta descriptions you can add your custom description here. 35

Homepage meta keywords (if enabled): If you have enabled meta keywords you can add your custom keywords here. Keywords should be separated by commas. For example: health coach, nutrition, cleanse, detox, If custom titles are disabled, choose autogeneration method: If you are not using custom post titles you can still have control over how your titles are generated. Here you can choose which order you would like your post title and blog name to be displayed, or you can remove the blog name from the title completely. Define a character to separate BlogName and Post title: Here you can change which character separates your blog title and post name when using autogenerated post titles. Common values are or - Remember to Hit Save after any and all changes!!! 36

Single Post Page SEO Enable custom titles: The theme creates post titles based on the title of the post and blog name. If you would like to make your title different you can define a custom title for each post using custom fields. This option must be enabled for custom titles to work. Enable custom description: If you would like to add a meta description to your post you can do so using custom fields. This option must be enabled for descriptions to be displayed on post pages. Enable custom keywords: If you would like to add meta keywords to your post you can do so using custom fields. This option must be enabled for keywords to be displayed on post pages. Enable canonical URL's: If you site has more than one address you will want to define a Canonical address. This is the address you want Search Engines to index and reference. Custom field Name to be used for title: The Value of your custom field should be the custom title you would like to use. Custom field Name to be used for description: The Value of your custom field should be the custom description you would like to use. Custom field Name to be used for keywords: The Value of your custom field should be the meta keywords you would like to use, separated by commas. If custom titles are disabled, choose 37

autogeneration method: Here you can choose which order you would like your post title and blog name to be displayed, or you can remove the blog name from the title completely. You have the following options. Define a character to separate BlogName and Post title: Here you can change which character separates your blog title and post name when using autogenerated post titles. Common values are or - Remember to Hit Save after any and all changes!!! 38

Index Page SEO Enable canonical URL's: If you site has more than one address you will want to define a Canonical address. This is the address you want Search Engines to index and reference. Enable meta descriptions: Check this box if you want to display meta descriptions on category/archive pages. Choose title autogeneration method: Here you can choose how your titles on index pages are generated. You can choose from the following options. Define a character to separate BlogName and Post title: Here you can change which character separates your blog title and index page name when using autogenerated post titles. Common values are or - Remember to Hit Save after any and all changes!!! 39

CODE INTEGRATION Enable header code: Disabling this option will remove the header code below from your blog. Enable body code: Disabling this option will remove the body code below from your blog. Enable single top code: Disabling this option will remove the single top code below from your blog. Enable single bottom code: Disabling this option will remove the single bottom code below from your blog. Add code to the < head > of your blog: Any code you place here will appear in the head section of every page of your blog. This is useful when you need to add javascript or css to all pages. Add code to the < body > (good for tracking codes such as google analytics): Any code you place here will appear in body section of all pages of your blog. This is useful if you need to input a tracking pixel for a state counter such as Google Analytics. Add code to the top of your posts: Any code you place here will be placed at the top of all single posts. This is useful if you are looking to integrating things such as social bookmarking links. 40

Add code to the bottom of your posts, before the comments: Any code you place here will be placed at the top of all single posts. This is useful if you are looking to integrating things such as social bookmarking links. Remember to Hit Save after any and all changes!!! 41

SUPPORT DOCS This is where you will find the link to the Divi Documentation. It will take you to website below. There is a ton of helpful material here. Please take some time and look through it. The address of the page is: http://www.elegantthemes.com/ gallery/divi/readme.html 42

NAVIGATION/MENUS Next let s work on how people get around your site, the navigation. The Divi theme supports 3 Menus. Creating a menu allows you to; change the order of pages in your menu, or remove them, create nested sub-menus of links, sometimes referred to as drop-down menus, create links to category pages allowing you to collect together posts based on that category, and add custom links to other sites, such as a link to your Instagram profile CREATING A MENU To create a menu, go to Appearance > Menus in the Dashboard sidebar. 43

To create a new menu, click the blue create a new menu link. Type in a Menu Name, and click the Create Menu button. 44

After you create your first menu, you will notice that two new options appear: Auto add pages and Theme locations. Auto add pages: If checked, new pages will be the menu automatically when publish them. added to you Theme locations: Allows you to decide where you would like your menu to appear in your theme. You can choose primary, secondary or footer. 45

ADD TO A MENU Pages: Adding pages to your menu is as simple as checking the boxes for the pages you want and then clicking Add to Menu. Use View All to view all of your pages available. If you have a lot of pages, you can choose to view your most recent pages, or search for a page based on its name in the search tab. Adding Product Pages: Adding Product pages to your menu is also as simple as checking the boxes for the pages you want and then clicking Add to Menu. First open the Products Pages Area by clicking.use the View all to view all of your pages available. If you have a lot of pages, you can choose to view your most recent pages, or search for a page based on its name in the search tab. Adding Links: Type in the URL where you want to take someone when they click on it, add Link Text to specify what the tab will say, and then click Add to Menu. Adding Category Pages: Unlike your main blog page, which displays all of the posts on your site, a Category Page will allow you to create a filtered blog feed that displays only the posts from within a specific category. Use View All to see all categories available. If you have a lot of categories, you can choose to view your most used, or search for a category based on its name in the search tab. Check the box of the categories you d like to add, then click Add to Menu. EDITING A MENU You can change the order and placement of 46

menu items by simply dragging and dropping the items to change their order. To create sub-menus or drop-down style menus, drag individual items to the right to nest them under a given parent tab. You can undo this by dragging them to the left. To edit a menu item s settings, click the down arrow to the right of the menu item. Menu Item Settings: Once expanded, you get the following: Navigation Label: Enter your custom link text here. This overrides the default name of the menu item, replacing it with the name you give it instead. Title Attributes: Adds custom hover text and improves usability for impaired visitors using assisted devices. Remove: Lets you delete the item from the menu completely. Cancel: Cancel any changes you have made to it. 47

MANAGING MENUS If you have created more than one menu, you can manage them by clicking on the Manage Locations tab at the top of the Menus page. On the Manage Locations screen, you will see what locations are available for displaying menus in your theme, and can assign a menu to each location by selecting it from the drop-down. You are also given options to Edit (which launches the selected menu in the Edit Menu screen) or Use new menu instead, which will allow you to create a new menu for use in that location. Remember to Save Changes!! Remember to click Save Menu to save changes!! 48

PAGE BUILDER Pages will show you all the pages in your website. You can edit an existing page or create a new page. Once you open a page or start a new page, if it s not already in the Page Builder Click the blue Use Page Builder Button. If you have existing page content, it will all be placed into a full width Text Module by default. To separate out the content into respective modules, you will need to manually place it into individual modules. SO if you have already watched some of the videos included in the Divi Theme Readme, this set up will be very familiar. IF not you may want to stop and go watch and review the Divi Theme ReadMe. Watch the An Overview of the Builder video first. That gives a really good quick overview of how to use this set up. The builder uses three main building blocks: Sections, Rows, and Modules. Using these allows you to create endless page layouts. Sections: The most basic and largest building blocks used in designing layouts with Divi are Sections. These are used to create the top-level areas in your website. There are three types of sections: Regular, Full Width and Specialty. Regular Sections are made up of column rows, Full Width Sections are made up of full width modules and Specialty Sections are a combination of everything. Rows: Rows nest inside of Sections and you can place any number of rows in a section. There are many different Row Layouts to choose from. Once you define a column structure, you can then place modules into that structure. Modules: Modules are the visual elements that make up your website. 49

ADD NEW PAGE When you click Add New, you get the following Add New Page Area. You have three Layout Options. Save Layout: At any time you can save a layout. This option is great for using a layout for another page, section of a page, or even another website. Load Layout: You can also load a layout at any time. When loading a layout you have the option to select from premade Layouts or any layouts that you have saved/imported. Clear Layout: If you a blank slate, just click the Clear Layout button. ADDING AND DEFINING A SECTION Click Add Section to add a Regular section. Regular Sections have Blue Bars and one row by default. Click Add Fullwidth Section to add a Fullwidth Section. Fullwidth Sections have Purple Bars and no rows. 50

Click Add Specialty Section to add a Specialty Section. Specialty Sections have Red Bars. When you click Add Specialty Section you will be given the following Column choices. The Specialty Section above it this combination. Every time you add a section you will need to define its properties. By clicking the settings menu icon at the top of the side panel you will be taken to the Section Module Settings. Section Module Settings: Background Image: If defined, this image will be used as the background for this Section. To remove a background image, simply delete the URL from the settings field. Background Color: If you would like to use a solid color background for your section, use the color picker to define a background color. 51

Background Video: MP4, Webm, Width, Height: You can use a video background but be aware that it gets problematic on mobile devices. Inner Shadow: Here you can select whether or not your section has an inner shadow. This can look great when you have colored backgrounds or background images. Parallax Effect: Enabling this option will fix your background images as the content scrolls. Make sure to save your Changes before you move on!! ADDING AND DEFINING A ROW Click Insert Columns to add and define a row. When you Click Insert Columns your will be give the following column choices. Choose whatever layout best fits your content. The Second Row above is this combination. 52

ADDING AND DEFINING A MODULE Click Insert Module to add and define a module. When you click Insert Module you will be given the following Module Choices. Each Module has its own individual settings. I will cover some of the modules here, others you will need to explore on your own. I will cover Image, Text, Blurb, and Countdown Timer. 53

IMAGE MODULE OPTIONS The first box option you see will be the Image URL option; this is where you choose which image to use. Click Upload an Image. Choose an Image: A blue check mark will be in the upper right corner of the image you pick. In the pane on the right are the Attachment details, here you can edit the image, delete it permanently, add a Title, Caption, Alt Text and Description. If you wish to edit the image the built in editor will open. You can edit the title, permalink, rotate and flip the image here. Scale Image: You can scale the original image. For best results, scaling should be done before you crop, flip, or rotate. Images can only be scaled down, not up. Image Crop: The aspect ratio is the relationship between the width and height. You can preserve the aspect ratio by holding down the shift key while resizing your selection. To crop the image, click on it and drag to make your selection. 54

Once you have made your selection, you can adjust the pixel size. The minimum selection size is the thumbnail size as set in the Media settings. You can also choose whether or not these changes will apply to all sizes of this image, to the thumbnail or all sizes except the thumbnail. When you are done editing your image, Remember to save the changes. Click Update to save the changes. Image ALT Text: Alternate text provides information if the image does not appear properly, or in any situation where a user cannot view the image. It also allows the image to be read and recognized by search engines. Image Title Text: This defines the HTML title text. 55

Lightbox: If enabled, then your image will open full size inside a pop up window. The rest of the screen will be greyed out until the pop up window is closed or the background clicked. Link URL: You can place a URL address into this field, turning your Image into a link. Leaving this field blank will simply leave your image as a static element. URL Opens: You can choose to open the link in the same window or a new tab. Animation: Use this dropdown menu to specify the lazy-loading animation for your image. You can choose for your image to fade in from the right, left, bottom, top or no animation. Admin Label: By default, the label is Image. The Admin Label allows you to change this label for easy identification. You can also enter optional CSS ID and Class, however we recommend you leave these blank unless you have a thorough understanding of CSS coding. Remember to Click Save to enter your choices!!! 56

TEXT MODULE OPTIONS Text Color: With a light background choose dark text, with a dark background choose light text. Text Orientation: This dropdown menu allows you orient you text to the Left, Center or Right. Content: This field is where you can enter the body content of your text. Text content spans the full width of the column that it is in. Admin Label: By default, the label is Text. The Admin Label allows you to change this label for easy identification. You can also enter optional CSS ID and Class, however we recommend you leave these blank unless you have a thorough understanding of CSS coding. Remember to Click Save to enter your choices!!! 57

BLURB MODULE OPTIONS Title: The title of your blurb that will appear in bold below your blurb image. URL: You can place a URL address into this field, turning your Blurb into a link. Leaving this field blank will simply leave your blurb as a static element. URL Opens: Here you can choose whether or not your link opens in a new window. Use Icon: You can choose to either use an Icon/Image with your text. Icon: This presents you with available icons. Click on the icon that you would like to use. Icon Color: This option allows you to customize the color of your Icon. By default, the icons are set to your theme accent color. Circle Icon: This option allows you to place your icon within a colored circle. Circle Color: Here you can pick a color to use for your circle. Show Circle Border: This option allows you to turn on a border for your circle. If selected, an additional option will appear to select your border color. 58

Circle Border Color: Here you can adjust the color of the circle border. Image/Icon Placement: The Image/Icon will appear above the text or to the left. Image/Icon Animation: This controls the direction of the lazyloading animation. Image: If you are using an image instead of an icon, follow the directions in the Image Module to select an image. Blurb Images will always appeared centered within their columns and will span the full width of your column up to 550px. Making blurb images the same height is a good idea if you are placing them side by side. Image Alt Text: Alternate text provides information if the image does not appear properly, or in any other situation where a user cannot view the image. It also allows the image to be read and recognized by search engines. Text Color: With a light background choose dark text, with a dark background choose light text. Text Orientation: This dropdown menu allows you to orient your text Left, Center, or Right. Content: Enter the text content of your blurb here. 59

Admin Label: By default, your blurb label Blurb. The Admin Label you to change this label for identification. is allows easy You can also enter optional CSS ID and Class, however we recommend you leave these blank unless you have a thorough understanding of CSS coding. Remember to Click Save to enter your choices!!! 60

COUNTDOWN TIMER MODULE SETTINGS Countdown Timer Title: This is the title displayed. Countdown To: This is the date the counter is counting down to. Text Color: Choose Dark or Light depending on background. Use Background Color: Yes/No Background Color: Select background color. Admin Label: By default the label is Countdown Timer. The Admin Label allows you to change this label for easy identification. Remember to Click Save to enter your choices!!! 61

EXPANDING/MODIFYING/REARRANGING YOUR LAYOUT We have defined a Section, a Row, and Modules. You can access any of the elements options by clicking its settings menu icon or deleting it by clicking the X icon. To expand your layout you can either choose to add a section to the page, a row to an existing section, or a module to an existing column. Editing your layout is very easy using drag and drop. If you want to move a section above or below another, simple drag and drop it in the desired location. Same goes for rows and modules. You can even move rows to different sections and modules to different columns. The only limitation to this is that you cannot drag Full Width Modules into regular sections and you cannot drag regular modules into Full Width Sections. Once you have finished building your layout, Remember to Click the Update/Publish button in your WordPress Dashboard. 62

PAGES: HOMEPAGE, ABOUT, BLOG HOMEPAGE When you click on Pages it will bring up a menu of all published pages. Let s start with the home page; this is the page that people land on first when they arrive at your site. Click on Home and that will open the page in Page Builder. If it s not in Page Builder already, hit Page Builder. If this set up is not familiar, stop and review the previous materials and go watch An Overview of the Builder video in the Divi Theme Readme The Divi Theme has premade layout templates, click load layout to chose a Homepage Template or build your own. You should have a good idea of what you want on your Homepage from the homework. Let s load the Homepage Basic Template. It s a nice clean layout. Simple and Short. 63

You do not want any pages so long that your viewer has to scroll more than 3 times to view content. Viewers will leave your site. If a page gets too long, break out some of the content into another page. This is the Homepage Basic Layout; a slider module, a fullwidth header module, a section module with a row of 4 blurb modules and row with a call to action module. The page as viewed looks like this. The Slider section has a background color and text. The fullwidth header has text as well. This is the row of blurbs all have a fourth of the page. The call to action module has a background color text and a contact link. 64

65

Now, let s start making changes. Click the Slider Modules Settings Icon. Arrows: Choose whether or not you would like to display left and right navigation arrows.. Controls: Choose whether or not you would like to display the circle buttons at the bottom of the slider. Automatic Animation: Moves the slides automatically if enabled. Parallax Effect: Your background images will be fixed as you scroll. Admin Label: The default is Slider. The Admin Label allows you to change this label for easy identification. You can also enter optional CSS ID and Class, however we recommend you leave these blank unless you have a thorough understanding of CSS coding. Remember to Click Save to enter your choices!!! Now let s look at the slider settings themselves. Click on the Slide Module Settings Icon. 66

Heading: Enter the title text for your slider. Button Text: If you would like to display a button below your slider content enter the button text here. Button URL: If you display a button, insert a valid web URL in this field to define the destination link. Background Image: If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field. Background Color: If you would simply like to use a solid color background for your slide, use the color picker to define a background color. Slide Image: If you add a slide image, it will appear to the left of your slide text on top of your background. If you do not specify a slide image you will be left with a centered, text only slide. Slide Image Vertical Alignment: Choose the vertical alignment of your slide image. Slide Video: The video will appear to the left of the slide text. Enter a youtube or vimeo page URL. 67

Image Alt Text: Alternate text provides information if the image does not appear properly, or in any other situation where a user cannot view the image. It also allows the image to be read and recognized by search engines. Text Color: Choose either light or dark to contrast with the background. Background Video MP4, Webm, Width, Height, and Pause: Hosting video content is still problematic due to a lack of standardization and the increase in the use of mobile devices. We do not recommend it. Content: Enter the body content of your slider here. Note that the amount of text you enter here will determine the height of your slides. Saving And Editing: After pressing the Save button in the Slide Settings, you will be taken back to the module settings where you can add a new slide, delete/edit slides, and drag and drop to rearrange your existing slides. Remember to Click Save to enter your choices!!! 68

By adding a background image, changing the header text and the button text and erase the body text, the slider now looks like this. Now click the Fullwidth Header Settings Icon. Title: Enter your page title Subheading Text: This text will appear below the title in a smaller font. Text Color: Choose either light or dark to contrast with the background. Text Orientation: Align your text left, right or center. Admin Label: The default is Fullwidth Header. The Admin Label allows you to change this label for easy identification. You can also enter optional CSS ID and Class, however we recommend you leave these blank unless you have a thorough understanding of CSS coding. To change the background you will have to go to the section module settings and make the changes there. Remember to Click Save to enter your choices!!! 69

By adding a background color and changing the title text, the header now looks like this. The next section contains 4 blurbs, we covered the Blurb Module in the Page Builder Section. So with some quick edits to the images, titles and content, the blurbs look like this. The final section is a call to action module, click the module settings icon. Title: Enter your title here Button URL: Enter the destination URL for the Call to Action Button Button Text: Enter text or leave blank for no button Use Background Color: Yes/No Background Color: Select a color Text Color: Either light or dark to contrast with the background Text Orientation: Left, Center or Right 70

Content: Enter your body text here. Admin Label: The default is Call to Action. The Admin Label allows you to change this label for easy identification. You can also enter optional CSS ID and Class, however we recommend you leave these blank unless you have a thorough understanding of CSS coding. Remember to Click Save to enter your choices!!! By changing the title, removing the button text and changing and body text, the Call to Action looks very different. And all the edited elements put all together look like this. 71

72

ABOUT PAGE Now that the homepage is up and running, let s work on the page about you. You should have some great ideas about what you what to do, your passions and interests from your homework, as well as some layout ideas. Use any combination of image modules, text modules, person modules, headers, blurbs, testimonials that strikes your fancy. Sketch out designs first if that helps you see where things will go. Make sure to include a photo of yourself, it helps create a connection between you and your clients. BLOG PAGE Let s set up your Blog Page. The Divi Theme has two premade Blog layouts. I would recommend using one of them as they take care of the sequential coding and such. Click Load Layout and choose either Blog Masonry or Blog Standard. Standard includes a sidebar and Masonry does not. The Masonry layout looks like this. And the preview looks like this. It creates tiles of your blog posts and makes a gallery. Now it s time to generate content for your Blog Page. It s time for you to write your first Blog Post. You handle this a little differently; you do not edit the blog module on the Blog Page. You go to Post 73

in the Dashboard Command List. Click Add New. That will open New Post Add Start with a title. Your title can be keywords out of your post like, Nutrition Tips or Gratitude or Memory Lane. Why not write about what inspired you to become a health coach. Write about your journey and your client s journeys and successes. Or whatever calls to you. Just remember to hit publish when you are done and the post will be added to the top of your Blog Page. TIP: If you set a featured image it will automatically add a thumbnail of that image above the blog post so you don t have to put that picture in the text area. Scroll down until you see the Featured Image link on the right. Click Set Featured Image that will bring up the Set Featured Image area, which shows your Media Library. You can upload a new image or use something already in your gallery. Click the image, it will have a blue checkmark, then click Set featured image on the lower right. If you end up with duplicate images, check your settings in the blog module and the epanel. 74

PRODUCTS AND MEMBERS PRODUCTS Click on Product Pages that will give you a list of your pages. Then you can open the pages one by one to check on or change the content. But this process will be a little different. The products pages use a different editing process. The same editor as the blog posts. You will see this when you open the 12 Day Detox Program for example. All you will see at first is the header graphic, the text is below. Scroll down to the bottom of the page. That is where the prices are. If you need to change the prices just overwrite the old with the new. Just remember if you change the price on the product page you will need to change the price in the estore. Go to WP estore, by default it brings up the Manage Products area. 75

Click Edit. This will take you to the Add/Edit Products Page. Just type the new price in the Product Price box. Make sure to do this for each group. The 12 Day Detox has 4 Groups. Make sure you scroll to the bottom and hit Save Product to save your changes. You can also change out images. When you click on a picture you will get a menu bar along the top edge. You can change the alignment of the photo, edit it or remove it. To add images Click the Add Media Button. Once you click on the button it will bring up the Media Library. You can upload a new image or chose something from your library. Chose the image you would like, you will see a blue check mark in the upper right corner, then click the Insert into post button in the lower right. Then it will insert the photo. Click on the photo to bring up that menu along the top edge and you can control the placement of the picture. Make sure you update the page to save your changes, and then you can preview the page to see if you like the changes. 76

MEMBERS Click on WishList Member that will take you to the WishList Member Dashboard. To manage members and clients, click on Members. ADD A MEMBER That will take you to Members >>Manage Members. You can add a member or edit an existing member. To add a new member click Add New. That will bring up the New Member Information Area. Fill this out completely. Username: Use Member s Email, CANNOT be changed once assigned Password: Use something easy to remember, CAN be changed Membership Level: Choose Level Click Add Member 77

ADD A MEMBER TO A LEVEL You can click on a name or check the box next to the name to select that member. Once you select a member check the box next to the name. Then make a Selection from the Select an Action Drop Down Menu. Select Add to Level. Select Level from drop down menu. Click Go Confirm the changes Click OK 78