Getting Started Guide
Congratulations
Congratulations on getting your very own website. Just remember that if you press the wrong button, your computer isn’t going to blow up. With WordPress you can click a button on any of your posts or pages to backup to a previous version. So, have fun and enjoy playing with your new site with the freedom of knowing you can’t mess it up.
If have any questions, please email me at mail@thebarefootwebdesigner.co.uk or call me on 02921 257770.
Step 1: Set up your new email address on Gmail
The easiest way to get access to your emails is to use Gmail. The link below will take you to a tutorial on how to set up your email address on Gmail in 11 steps. When you get to “step 3” you’ll need to enter your username and password (your website designer will have emailed this to you).
https://thebarefootwebdesigner.co.uk/2013/09/11-steps-to-set-up-an-add-on-email-to-gmail/
Step 2: Set up your matching Twitter and Business Facebook graphics
The Barefoot Web Designer will have sent you graphics that match your website for Twitter and Business Facebook Page. Watch the video tutorials below on how to add the graphics…
Business Facebook Page Set Up
Business Facebook Page Youtube Video Tutorial
If you’d prefer a step by step written guide, here’s a blog post on how to set up a Business Facebook Page.
Twitter Page Set Up
Twitter Page Youtube Video Tutorial
Step 3: How to login to your website
The Barefoot Web Designer will have sent you your log in details. Before you can make any changes to your site, you will need to log in. The login for your site is: http://your-wordpress-site.com/wp-admin. Replace “your-wordpress-site.com” with the name of your website.
Step 4: Resize Images
If you have taken an image with a camera, it will be a very large file (up to 10 megabits). So, it’s important to resize the image so that your pages and posts don’t take too long to load. Take a look at this tutorial on how to edit, resize and optimize images using PicSize.com. I recommend you keep images that you want to put on your pages to 800 pixels wide
Recommended Image Sizes
Featured Blog Image Size: 795 pixels wide
Page & Pose Image Size: 500 pixels wide
Step 5: Royalty Free Images
If you want to add royalty free, eye-catching images to your pages and posts, I recommend using Shutterstock. Here’s a tutorial on how to get images using Shutterstock. If you’re using the images as “featured images” on your blog post, make sure you resize the image so it’s 795 pixels wide.
Step 6: WordPress Basics
It’s a good idea to spend an hour or two getting familiar with the “WordPress Basics” by looking through The WordPress Manual. While looking through the manual, log into your website and follow along.
Step 7: Divi Basics
Your website was developed using the Divi theme. I recommend you spend a bit of time getting to know how to use the Divi features on your website by looking through the tutorials below. While looking through these tutorials, log into your website and follow along.
Divi Basics
Below are the video tutorials I recommend you watch first. They cover the basics of your Divi theme.
Uploading A Custom Logo Image.
The video tutorials above cover the basics. The tutorials below cover how to use the various “modules”.
Divi Modules
The accordion module is a great way to consolidate information within a single system. Accordions are very similar to tabs, except that the items are displayed within a vertical list. When a new item within the list is opened, the previously-opened item is closed and the new item’s content is displayed.
Animated counters are a fun and effective way to display stats to your visitors. Animation is triggered using lazy-loading to make browsing the page truly engaging.
The audio module allows you to embed an audio file + a custom audio player anywhere on your page. For example, if you’re a yoga teacher, this is a great feature to give snippets of meditations that you sell on Amazon; or for podcasters who want to post their latest shows.
With Divi, even blogs are a module, and your “blog” can be placed anywhere on your website, and in various formats. You can combine blog and sidebar modules to create classic blog designs. 1 column, 2 column or 3 column blogs can all be built using blog and sidebar modules.
The blurb module is a simple and elegant combination of text and imagery. Blurbs are a great way to showcase small bits of important information, and are often used in rows to display skills or features. Blurb modules can be placed in any column that you create.
It’s always important to give your visitors a clear call to action. Whether you are trying to get them to come to a yoga class or contact you for more information, he call-to-action module will get the clicks you need. The CTA module is a simple combination of a title, body text and a button. When combined with a vibrant background color, a CTA can easily catch your visitor’s eye.
The circle counter provides you with a beautiful and visually-compelling way to display a single statistic.
Easily add contact forms to any part of your website.
The Countdown Timer module creates a visual timer that counts down to a specific date. This is great if for an up and coming yoga workshop, retreat, even to build anticipation.
The divider module is perfect for creating either a horizontal line rule, custom vertical spacing, or both. Using this element is great for creating breathing space for your pages.
Divi has been designed to be WooCommerce compatible. To integrate WooCommerce you will need to go to the “plugins” section of your admin, search for “WooCommerce” and install it.
The Filterable Portfolio allows you to display your most recent projects in either a Grid or Standard fashion.
The full width header module makes it easy to add beautiful, colorful headers to the top of your pages (or anywhere on your page). These modules can only be placed within full width sections.
The maps modules makes it easy to embed custom Google Maps anywhere on your page. You can even add unlimited pins to the map, and define a custom viewport starting location. The maps modules also comes in a Normal Width format.
The Fullwidth Menu module lets you place a navigation menu anywhere on the page. This allows your header navigation to move around the page using the builder!
The Fullwidth Portfolio module works just like the normal Portfolio module, except that it displays your project in a beautiful Fullwdth fashion. It also comes with some unique new layouts: Grid & Carousel. The module works by displays a list of your most recent Projects, and can be used by alternative health practitioners who want to display a gallery of their most recent workshops, retreats, etc.
You can place sliders into full width sections, making your sliders span the entire width of the browser.
Divi makes it easy to add images anywhere on the page. All images support lazy-loading, and come with 4 different animation styles that make browsing your website fun and engaging. Image modules can be placed in any column that you create, and their size will be adjusted to fit.
The maps modules makes it easy to embed custom Google Maps anywhere on your page.
Growing your mailing list is easy using Divi’s newsletter signup module. This module supports MailChimp, Aweber and Feedburner integration.
The number counter is a great way to display numbers in a fun and engaging way. This module is commonly used to display statistics about yourself or your company. For example, display your student count, number of yoga classes available, number of Facebook followers, etc.
The Person Modules is the best way to create a personal profile block. This is a great module to use if you have a yoga studio for your Team Members.
With the Portfolio Module you can show off your work anywhere on your site in any column structure.
It’s easier than ever to create pricing tables for your alternative health products. Create as many tables as you want, and control the pricing and features of each.
Divi lets you create an unlimited number of widget ready areas on the fly. Sidebars can then be added to any page, allowing you to create unique sidebars for different section of your website.
Sliders can be placed anywhere, spanning the full width of whatever column structure they are in.
The social follow modules lets you create icon-based links that point to your online social profiles, such as Facebook, Twitter and Google+.
Tabs are a great way to consolidate information and improve user experience on your page.
Testimonials are a great way to encourage trust from your visitors. Using the Divi testimonial widget, you can quickly add testimonials to pages. Testimonials are usually compelling quotes from your customers. Each testimonial has a quote, the name of it’s author, and a link their website (which is optional).
Text can be added anywhere to your page. Text modules can be placed within any column type, and when combined with other modules, they make for a truly dynamic page. When you add a text module, you are given all of the editing capabilities of a normal WordPress page. The text module can be used to create a small bit of text within a complex layout, or it can be used in a full width column to create an entire page.
Toggles are a great way to consolidate information and improve user experience on your page. Using Divi, you can create any number of toggles that will look great inside any sized column.
Divi Additional Features
Divi comes with some great options for customizing your header and navigation area. All of these options are found in the theme customizer. To locate the theme customizer, log in to your WordPress Dashboard and the click the Appearances > Customize link.
When you write a blog post to be included in one of our Blog Modules, you can create one of 6 different post formats. Article, Video, Audio, Quote, Gallery and Link. Each of these formats structures you post differently, putting more focus on the type of content that the format represents.
How to add a mega menu to your top navigation bar. To create a Mega Menu, click the Appearance > Menus link > Create your menu > Click Screen Options (top of page) > Select the CSS class > Click on the parent link (top tier link) > Within the CSS Classes box type: mega-menu > click Save.
Divi makes building a project fun and easy. A ‘Projects’ menu item has been added inside of your Admin Panel – so you can create projects as if you were creating a Post or Page. You also have the option to use the basic project structure, or to use the builder to create truly amazing project layouts.
How To Create One Page Websites
When you create a new page, you can easily enable Divi’s Single Page navigation option, giving your visitors a visual and clickable representation of their progress on the page. You can also use custom anchor links and Section ID’s to create one-page menus for the complete One-Page package.
You can define your own logo image from within the ePanel theme options page in your WordPress Dashboard. To locate ePanel, click the Appearances > Divi Theme Options link in your WordPress Dashboard. Within ePanel, under the General Settings > General tab, locate the “Logo” field.
Divi uses the WordPress Theme Customizer interface to allow you to adjust your theme’s colours quickly and easily. To use the Theme Customizer, click the Appearances > Customize link. This will launch the customizer along with various colour options. Once you have launched the customizer, you will see various colour options and font options. Adjustig the colours will change the live preview on the right. Once you have chosen your desired colour scheme, simply click save to push the changes to your live website.
That’s it.
If you have any questions, please contact me.
George Watts
The Barefoot Web Designer
mail@thebarefootwebdesigner.co.uk
