Easy Designer Website Customisation Guide

• Add Your Logo
• Change your Website’s Name
• Change your Website’s Icon
• Pick your Colour Scheme
• Customise the Footer
• Connect your Paypal Account
• Customise your Home Page
• Customise your About Page
• Customise your Services Page
• Customise your Contact Page
• Adding and Deleting Pages
• Connecting Your Social Media
• Customise your Terms and Conditions
• Manage your Blog
• Managing your Shop & Products
• Customise the Main Menu
• Make your Site Visible to Search Engines
• Optimise for Search Engine Visibility
• Setup Backups
• Add your Facebook Pixel ID
• Setup your Facebook Pixel

About the Holding Page

The holding page is essentially a page which displays when people access your domain name and hides your website from your visitors while you are working on your site. If you requested for the Holding page to be activated when we installed your site, you may wish to customise your message or turn off the page and make your website live at any point. If you didn’t ask for it to be activated, you can do so at any point to hide your site while you make changes.

Turning the Holding Page On & Off

In WordPress, go to Settings > Coming Soon Page & Maintenance Mode. At the very top of the Content tab you will see the Status option. Here you can choose whether the holding page is turned on or off. When the holding page is turned on, your site is hidden from visitors, and displays a page with a message (see below for how to customise the message). However, when you are logged into WordPress you are able to see and edit your website so you can continue to customise it. Once you are ready to share with your followers, you can turn the holding page off.

Customising the Holding Page

Changing the headline, message and logo

In WordPress, go to Settings > Coming Soon Page & Maintenance Mode. In the Content tab you will see the current headline and message. Simply replace these with your own message. You can even include your social media links or email so people can still connect with you.

Changing the design

In the Design tab you can change the design of the holding page including the background colour, layout, and text colour and font. See all your changes by clicking the Live Preview tab and remember to save all your changes.

Adding Your Logo

Let’s start by adding your logo, probably the best way to start to make the site your own, and it’s really simple.

Upload your logo

In your WordPress dashboard look in the left hand menu. Go to Divi > Theme Options You will see lots of theme options here, some of which we will look at later but you don’t need to worry about most of them for now – we have set them up for you. What we are interested in is the first option at the top of the General tab – the logo. Here you can click to upload your own logo. Once you have selected and uploaded your logo image, scroll down to the bottom of the page and click Save Changes. Switch over to your website tab in your browser and refresh to see how your logo looks in place in the top left corner. If you’re happy with how it looks, great work! If you think the size needs to change a bit, we can do that easily.

Change Your logo size

In WordPress: Click Divi > Theme Customiser On the right hand side you will see your website, and on the left you should see a new menu of options. This is your Divi customiser, and this is where you can do all the basic customisation of your site. Click Header & Navigation > Primary Menu Adjust the slider on the Logo Max Height option by dragging it left and right to make your logo bigger or smaller. If you feel it still isn’t big enough, you can also adjust the height of the entire white logo bar by adjusting the slider on the Menu Height option and give the logo more room. You can see your changes taking effect on your website on the right – once you are happy, click Save & Publish at the top.

Website Name & Tagline

Next, let’s change the Name of your website (which appears in the browser tab, on search engine results pages, and also in some posts when people share a link to your site on social media), and the tagline. In your WordPress Dashboard: Click Divi > Theme Customiser Click General Settings > Site Identiity You can see here two text boxes, one where you can enter your website name, and another for your tagline. Enter your details, then click Save & Publish at the top. You can come into your Divi Customiser and change your site details easily at any time.

Website Icon

Your website icon is a small square image which appears in the browser tab next to your website name. You don’t need to have one, but it does help make your website look professional and stand out when visitors have a number of tabs open. In the Divi Customiser, go to Settings > Site Identiity Below the website name and tagline, you will see your website icon, which will be a placeholder icon, if this is the first time you are changing it. You can use any image for this icon, but it needs to be square and at least 512 x 512px or the system won’t upload it. However, remember it will appear tiny when uploaded so it’s best to use something simple that will be visible when very small. Even a block of colour with one letter to represent your branding would work.

Upload your new site icon

Simply click Settings > Site Identity, upload your desired image, then Save & Publish.

Customising Colours & Fonts

By customising the fonts and colours in your website, you will really start to make it unique and your own. Choose fonts and colours from your branding to give your website a professional look consistent with your business colours. If you are unsure about your brand colours, check out the Creative Genie Branding Magic Guide in the Genie Academy here: https://thegenieacademy.thinkific.com/courses/branding-magic

Change your theme accent colour

There are a few places in your Divi Customiser where you can change colour settings. The first thing you should do is change the themes overall accent colour. This will automatically populate some of the other colour elements throughout the design. Click General Settings > Layout Settings. There are a few other options here which you can play with if you wish, mainly affecting the overall width of your website. The accent colour is the bottom setting on this list. Simply click the colour and select your desired colour or enter the HEX code for your main brand colour. When you are happy with your colour choice, click Save & Publish to make your changes live.

Change your fonts and font sizes

Click General Settings > Typography In the Divi customisation area on the left you will see all your font options, including header and body fonts which you can choose from the dropdown menus, and various font sizes. Play with all the available options and see the effect immediately on the page on the right (this is only a preview for your benefit – it won’t change on your live site until you click Save & Publish!). You can even click onto different pages of your website on the left to see how different fonts and font sizes look in different places.

Change your font colours

At the bottom of the Divi Customisation typography section you have three font colour options available – body link colour, body text colour, and header font colour. Have a play, enter different colours from your brand, and see the results on the page on the right to see what you like. Once you are happy with your selections, click Save & Publish to make your changes live. Note: All of these text changes made in the Divi Customiser can be over-ridden for individual elements on your site. As you will see later in this guide, there are options for every element of text on your site so if you wish to make a certain title or paragraph stand out with a different font, size, or colour, you can!

Button Styles

Buttons are used in several places through your site. In the Divi Customiser you can set a style for your buttons which will be used whenever you use a button on your website (with some plugin-based buttons being the exception). If you do wish to override these base styles you can do so for any individual button within your site – we will cover that later when we’re looking at page customisation.

Customise your button styles

In your Divi Customiser go to Buttons > Button Styles On the left you can see all the different button style options. On the right you can see the preview of your website. Scroll down to somewhere you can see a button on your website so you can see the changes taking effect as you play. A good place to see them in effect is in the services section on the home page, as you have three buttons side by side. Note: The optin form button on the Free Gift section of your home page is NOT controlled or affected by the styles you set here – that particular button can be adjusted within the optin plugins own settings, which we will look at later in the Customising the Home Page section. Have a play with all the different options. Here you can change the button background colour and text colour, you can add a border and change the border width, you can even change the font for your buttons. Most of the options here are pretty self-explanatory. If you wish to change the corners of your buttons to make them more or less rounded, play with the Border Radius setting. There is also an option to add a button icon. By default, the buttons are style with a small arrow that only appears when somebody hovers over the button with their cursor, but you can change this as you desire. When you’re happy with your buttons, click Save & Publish.

Customise your button hover styles

There is also an option to change your buttons’ hover style, so that the text, border, or colour can change when the cursor is hovered over the button. Go to Buttons > Button Hover Styles Once again, have a play and hover your cursor over the buttons on your page to see your changes in effect. It’s a good idea to change the background colour slightly or maybe make the text bold on hover. Don’t forget to Save & Publish when you’re happy with your changes.

Header Format

If you wish, you can explore the different options for displaying your header elements – your logo and menu. Go to Divi > Divi Customiser Click Header & Navigation > Header Format Under Header Style you will see a dropdown menu. This contains your different options for how to display your header content. Have a play by selecting the different options and seeing how they look in the preview window on the right hand side. Leave it at the default layout with the menu on the right and the logo if you prefer, or choose another option. Once you are happy, click Save & Publish at the top.

Customising Footer Content

There isn’t much to be changed in the footer bar, by standard we have created a link to your Terms & Conditions page (we will come to customising that in a later section) and a link to the Creative Genie website. There is also a copyright statement, which you will want to edit with your own company details.

Change the content in the footer area

Go to Divi > Divi Customiser Click Footer > Bottom bar Scroll to the bottom of this section and you will see a box titled Edit Footer Credits  This area contains some html code to make the link work, so be careful to only edit the text that says Your Name Here and replace it with your own company name. If you wish to remove the ‘Website by Creative Genie’ line simply delete the following:

Website by Creative Genie

You can preview your changes on your website on the right hand side. When you are happy with your changes click Save & Publish.

 Overview

Divi is a WordPress theme with it’s own page builder – meaning you can create and modify web pages without ever needing to look at or understand a line of code! In my opinion (and many others’) Divi is one of the best themes available when it comes to combining style, ease of use, flexibility, expandability, modern features and integration with plugins. In this guide I have included everything you need to know to customise and manage your Easy Designer Website, but should you wish to take things further, go deeper into customisation, add more features, or just learn more about Divi, feel free to explore their documentation here: www.elegantthemes.com/documentation/ The Divi Builder is the simplest yet most sophisticated website builder I’ve ever come across, which is what inspired me to create this Easy Designer Website product for you – because it really does make it simple and fast to cutsomise your website. The Divi builder comes in two forms – the standard Back-end Builder and the front-end Visual Builder. Both interfaces do exactly the same thing, the only difference is the interface. The Back-end Builder is accessed inside the WordPress Dashboard and can be accessed along with all of the other standard WordPress settings. Itis accessed by editing a page and choosing Divi Builder. It displays all of the pages elements as blocks which you can easily delete, duplicate or click on to edit the content and settings. It’s great for making quick changes while you are inside the dashboard, but it’s also confined by the dashboard and is rendered as a block-based representation of your website. This is actually my preferred method of building the site, but I think for customisation purposes, you will find it easier to use the Visual Builder. The Visual Builder allows you to customise your pages on the front-end of your website! It’s an amazing experience and allows for much faster design. When you add content or adjust design settings inside the visual builder, your changes appear instantly. You can click onto the page and just start typing. You can highlight text and adjust its font and style. You can add new content, build your page and watch everything happen right before your eyes. This guide will focus on how to customise your website pages using the Visual Builder in Divi.

Enabling the Visual Builder

While you are logged in to your WordPress dashboard, you can navigate to any page on the front-end of your website and click the Enable Visual Builder button in the WordPress admin bar at the top of the page to launch the visual builder. You can also access it by going to your page in the back-end of WordPress. Go to Pages > Home Page (or whichever page you wish to edit) > Edit Click the Enable Visual Builder button that sits at the top of the back-end Divi Builder interface (note, you must first enable the Divi Builder before the visual builder button will appear – but the Divi builder has already been enabled on all the standard Easy Designer Website pages, so this only applies if you’re adding a new page). The Divi Visual Builder is a drag and drop page builder that allows you to combine and arrange content elements. The builder uses three main building blocks: Sections, Rows and Modules. Using these in unison allows you to create a countless array of page layouts. Sections are the largest building blocks, and they house groups of rows. Rows sit inside of sections and are used to house modules. Modules are placed inside of rows. This is the structure of every Divi website. In the Easy Designer Website I have already created these structures for you in alignment with everything my clients over the past ten years have most wanted in a website, so you will not be starting form scratch and you may not even wish to change the structure of your website pages. If you do however wish to move elements around on your page, delete, or add elements, it’s helpful to have an understanding of how Divi works. Don’t be overwhelmed by the following information, with the Easy Designer Website this is all done for you!

Sections

The most basic and largest building blocks used in designing layouts with Divi are sections. These are used to create large groups of content. There are three types of sections: Regular, Specialty and Full Width. Regular sections are made up of rows of columns, Full Width Sections are made up of full width modules that expand the entire width of the screen. Specialty sections allow for more advanced sidebar layouts. If you wish to know more information about using sections, check out Divi’s in-depth sections tutorial.

Rows

Rows sit inside of sections and you can place any number of rows inside a section. There are many different column types to choose from within your row as you will see when you add a new row. Once you define a column structure for your row, you can then place modules into a desired column. There is no limit to the number of modules you can place within a column. If you wish to know more information about using rows, head over to Divi’s in-depth rows tutorial.

Modules

Modules are the content elements that make up your website. There are many modules available in Divi, including text, images, video, buttons, forms – any kind of website content you could wish for. Every module that Divi has can fit into any column width and they are all fully responsive.

Visual Builder Options

With the visual builder enabled, you will see a little toolbar appear when you hover over an element (Section, Row, or Module) on your page. This toolbar gives you some editing options.

Moving elements on your page

The first icon, with the four arrows, allows you to grab the element and move it around on your page. If you hold down your left mouse button over this icon on any element, you can drag the element to any location on the page to rearrange orders of sections on the page, to rearrange the order of rows within the sections, and to rearrange the order of the modules within rows (or move them to other rows). It’s really that simple to rearrange the whole structure of your web page!

Editing elements on your page

The second icon, the little cog, allows you to access the settings for any element (Section, Row, or Module) on your page. This includes fonts, colours, spacing, and more specific design settings for different modules. We will look at these settings in more detail as we go through each page on your site further on in this guide.

Duplicating elements on your page

The third icon, two boxes over each other, allows you to duplicate that element. This is useful if you wish to have several similar elements on a page and change the content or image for each. Simply duplicate the item and then make the necessary design or content changes using the edit icon, and drag the new element to wherever you desire it on the page.

Saving elements to the Divi library

This isn’t something we will look at in detail here, as it’s more of a developer tool and not really necessary for you in customising your Easy designer Website which is the purpose of this site. However just know that it is possible to save elements from your page to the Divi Library form where they can be imported onto any other page of your site. It’s a very powerful tool.

Deleting elements from your page

This icon doesn’t need much explanation – it’s a trash can and it does exactly what it says – deletes that element from your page.

Saving Your Page & Accessing Page Settings

To access general page settings, click the purple dock icon at the bottom of your screen. This will expand the settings bar and provide you with various options. You can open up your page settings by clicking the gear icon. Here you can adjust things like page background color and text color. You will also find the Save and Publish buttons as well as responsive preview toggles so you can see how your site displays on different screen sizes.

Editing the Main Banner

The main banner on your home page is really the first thing that will catch your visitors’ eyes when they open your website. It needs to grab their attention and get your message across through both the image and the text. It’s a good idea to use an image here that features a photo of you, if you have one. Images from photoshoots often work best as they are high quality and look professional. If you don’t have any images of yourself or would rather use something else, there are great free stock photo sites these days such as unsplash.com where you can source photos with an open licence for use. Just be careful to read all licencing properly first. Open your home page in your browser and make sure you have enabled your Divi Visual Builder. When you hover over the main banner on your home page, you will see two tool bars appear – a purple one near the top left of your banner and a grey one near your text. The purple tool bar is relating to the page Section in which the header sits.

Change your banner image

These instructions apply to all the banners on your home page – although the main banner is the only one with buttons. You change the image and text on the other banners in the same way. The banner image is actually added as a Background Image of the Section. Click the small cog (Section Settings) icon in the purple section toolbar. A new box will open with all the settings options for this section. Make sure you are in the Content tab of the settings box and click Background. In the Background settings of any Section or Row, you will see four possible options: Colour, Gradient, Image, or Video. Feel free to click on any of the other options and have a play. Colours, gradients, and videos can all look very cool as backgrounds of banners and sections. If you choose to replace the background with a colour, gradient, or video, remember to delete this banner image by hovering over it and clicking the trashcan icon. If you wish to change this image to your own, click the cog icon that appears when you hover over the image. Your Media Library will open in front of you. If the image you wish to choose is already uploaded to your media library, simply choose it, else click on the Upload Files tab and click the Select Files button to find your image file on your computer. Once it has uploaded, click the button and see it in place on your page. If you don’t like it, you can always click the undo arrow at the bottom of the settings window to undo the image change. If you are happy with your new image, click the green tick at the bottom of the settings window to apply the change. The settings window will close. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Adjusting spacing on banner image

You may feel that your new image needs more or less padding in order to display properly. Hover over the image and click the settings icon on the main banner section to open your settings window. Click the Design tab and choose Spacing. You can play with different padding amounts here until you find the perfect spacing for your new banner image. When you are happy, click the green tick to apply the changes and close the settings window.

Customising text on banner

It’s so simple to make quick changes to the text on the banner (or anywhere!). Simply click on the text, highlight it, and start typing. If you make any mistakes, you can also undo any changes just as you would in a Word document, by using CMD-Z (Mac) or CTRL-Z (PC). You can also change the text on the banner by hovering over it and clicking the Module Settings icon. In this case the module is a Fullwidth Banner. The settings window will open in the Text section, and you will see a window with the Title, Subheading, and Button Text, which are all editable. You’ll notice there is an area for Button 2 text, as it’s also possible to add another button in your banner should you wish. There is also a Content box in which you can add more text if you wish to have a paragraph or two underneath the title and subheading. When you make changes within the settings box you can use the undo and redo arrows at the bottom of the box. Click the green arrow when you’re happy with your changes.

Customising button links

To add links to your button(s) open the Settings for the header module (not the section – the module toolbar is the grey one that appears over the text when you hover on it). Below the Text section is a Links section. Click this and add in the url which you would like your button to take people to. If for example you would like it to take people to your Services page, then open your website in a new browser tab, go to your services page, highlight and copy the url in the address bar at the top of the page, and paste this url into the Button# 1 url section. If you added a second button to your banner, do the same for the page you would like your second button to direct people to. When you are done, click the green tick, and test your buttons by opening your home page in a new browser window and clicking them to make sure they go to the correct pages.

Customising fonts on banner

If you wish to change font, colour, or size of any text on this banner it is possible to override the basic font design settings you set up earlier in the Divi Customiser. Open the Settings window for the banner module. Click on the Design tab. Here you will see several options, including text, subheading text, and title text. You don’t need me to talk you through all the options here, simply have a play, and remember you can easily undo any changes.

Customising buttons on banner

As with the text, if you wish to change the design of the button(s) on this banner it is possible to override the basic button design settings you set up earlier in the Divi Customiser. Open the Settings window for the banner module. Click on the Design tab. Scroll down below the text and layout options, and you will see design options for buttons 1 and 2 (ignore button 2 if you are only using one button on this banner). To override the basic button design settings you set up earlier, make sure Use Custom Styles for Button One is set to Yes. Now you will see you have all the same design options for this button as you did in the Divi Customiser, only this time any changes you make will be applied to this particular button only and not to any of the other buttons on your site. If you wish to make design changes to all buttons on your site, go into WordPress and open the Divi Customiser to change your base button design options as we discussed earlier in this guide. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising Services Columns

The services column on the home page uses the Divi Blurb module. 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. In our Easy Designer Website we have used this section as an example of a way to highlight your main Services, but of course you can change this text to anything you wish to promote. The structure of this section is a row with three columns, and a Blurb module inside each of those columns.

Changing the content of the Services columns

You can easily and quickly change the content – the title and the text – by clicking it, highlighting it, and typing in your new text. If you make any mistakes, you can also undo any changes just as you would in a Word document, by using CMD-Z (Mac) or CTRL-Z (PC). You can also change the text in the services columns by hovering the column and clicking the Module Settings icon. In this case the module is a Blurb. The settings window will open in the Text section, where you can easily change your title and content text.

Adding an image or icon in a Services column

It is possible to add an image or choose from a pre selection of icons for each of these columns. Click the Module Settings icon for services module. The settings window will open in the Text section, scroll down to the Images & Icons section. If you wish to use an icon to represent each of your services, make sure the Use Icon option is selected. You will then see the available icons. Choose an icon and click the Design tab to change the icon placement. If you wish you can upload an image to represent each of your services. Click the Upload Image button and choose your image. Click the Design tab to select your image placement. Click the green arrow when you’re happy with your changes.

Customising buttons in the Services section

The buttons at the bottom of each Services column actually a separate Button module, which I have placed below the Blurb module. SO to change these buttons, you will need to hover over the button and open the Button Settings window. In the Text section you can change the text that appears on your button. In the Link section you can add the url where you wish your button to link to. If you wish to change the design of the button(s) on this banner it is possible to override the basic button design settings you set up earlier in the Divi Customiser. Click on the Design tab. Scroll down to the Button section. To override the basic button design settings you set up earlier, make sure Use Custom Styles for Button One is set to Yes. Now you will see you have all the same design options for this button as you did in the Divi Customiser, only this time any changes you make will be applied to this particular button only and not to any of the other buttons on your site.

Adding and removing columns in the services section

It is possible to change the layout of the Services row to have more or less than three columns. You may wish, for example, to have four or two columns. Hover over the row, and you will see that as well as the usual toolbar options, there is now an extra option: Layout. It is the fourth icon along from the left when you hover over the row, and it looks like a box with vertical lines. Click the Layout icon for the services row and you will see that the three columns layout is currently selected. You can choose to make this two columns, or four columns, or even to make some of the columns wider than others. If you choose to add a new column, you will see that a space now appears for your new column. You can simply duplicate the previous Services module and the button module and drag them into the new space you created, then edit the content as described previously.

Removing the entire services section

If you wish to remove the entire services section (or any section on the page) just hover over the section and click the trashcan icon that appears in the Section Toolbar. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Managing the Testimonial Slider

There are two ways we display testimonials in the Easy Designer Website – simple testimonial boxes and this, the testimonial slider. The testimonial slider makes use of Divi’s Slider module to display your customer testimonials in a fun and eye catching way. If you’d prefer to simply use the testimonial boxes further down the home page, you can delete the entire testimonials slider section. If you want to keep it, however here is how to customise it with your own design and content.

Changing background image

The image is actually added as a Background Image of the Section. Click the small cog (section settings) icon in the purple section toolbar. A new box will open with all the settings options for this section. Make sure you are in the Content tab of the settings box and click Background. In the Background settings of any Section or Row, you will see four possible options: Colour, Gradient, Image, or Video. Feel free to click on any of the other options and have a play. Colours, gradients, and videos can all look very cool as backgrounds of testimonials and sections. If you choose to replace the background with a colour, gradient, or video, remember to delete this banner image by hovering over it and clicking the trashcan icon. If you wish to change this image to your own, click the cog icon that appears when you hover over the image. Your Media Library will open in front of you. If the image you wish to choose is already uploaded to your media library, simply choose it, else click on the Upload Files tab and click the Select Files button to find your image file on your computer. Once it has uploaded, click the button and see it in place on your page. If you don’t like it, you can always click the undo arrow at the bottom of the settings window to undo the image change. If you are happy with your new image, click the green tick at the bottom of the settings window to apply the change. The settings window will close.

Adjusting spacing on background image

You may feel that your new image needs more or less padding in order to display properly. Hover over the image and click the settings icon on the main banner section to open your settings window. Click the Design tab and choose Spacing. You can play with different padding amounts here until you find the perfect spacing for your new banner image. When you are happy, click the green tick to apply the changes and close the settings window.

Changing testimonial text

To change the text of the two sample testimonials we have added and replace them with your own, hover over the testimonial slider and open the Slider Settings tab by clicking the Settings icon. You will see the two sample testimonials. You can simply remove them by using the trashcan icon. To edit them, click on the Settings icon. A new window will open showing the testimonial title and text. Type or paste in your own fabulous testimonials.

Customising testimonials design

Whilst you have the Settings tab open for a testimonial, you can click on the Design tab to adjust the fonts and colours if you wish. You can also remove the semi transparent clack box that appears behind the testimonial by changing the Use Background Overlay option to No. You will see your design changes take effect on the page. Click the green button when you are happy with your changes.

Adding testimonials

The easiest way to add new testimonials to the slider is to simply duplicate one of your existing testimonials, once you have finished customising the design. With the Slider Settings window open you can duplicate your testimonials as many times as you wish and simply replace the title and content in each. The slider will just scroll through them all.

Changing slider controls

With the Slider Settings window open, in the Content tab, click Elements. Here you can choose whether to show or hide both the arrows and the slider controls (the little buttons at the bottom of the slider that indicate how many testimonials there are and that people can click to move to the next one). Click the green arrow to save your changes.

Changing animation speed

You can change the speed at which the testimonials scroll by going to the Advanced tab in your Slider Settings. If you wish you can turn automatic animation Off, so that your visitors have to click to see the next testimonial. Or you can keep automatic animation on and adjust the speed by entering a number, in milliseconds, for how soon each new testimonial should show. 6000 milliseconds = 6 seconds.

Removing the entire testimonials slider section

If you wish to remove the entire testimonial slider section (or any section on the page) just hover over the section and click the trashcan icon that appears in the Section Toolbar. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Blog Post Display

Blog posts can be displayed on any page on your site by simply adding a Blog widget to your page and selecting the blog category you would like to display. We cover how to add blog posts later in this guide. In your Easy Designer Website, blog posts show up in two places – on the Blog page and also on the home page, where we display the three latest posts. This section refers to how to adjust the way the blog posts show up on the home page (though all instructions are also relevant to how they show up on the Blog page).

Changing the title on the blog section

The title above the blog section on the home page is simply a text widget. To change the title text, simply highlight the text and type your desired title. If you wish to remove the title, just hover over it and click the trashcan icon. If you wish to adjust the colour and font, hover over the module, click the Text Settings icon, then make your desired changes in the settings window that appears.

Changing which and how many of blog posts to display

Hover over the blog post section and click the Blog Settings icon on the widget. The first option you will see in the Content tab is the Post Number. Enter here how many blog posts you would like to display on the home page. Below that you will see an Include Categories option. This will display all of your Post Categories. By default, we have set a category of Blog and all sample posts are assigned to this category. Therefore the latest Blog Posts will display in this section. However if you want to display different categories of posts in different areas of your page or site, you can control this by adding more blog categories and assigning your posts to the relevant category (see the Blog section of this guide). All of the categories will then display in this list and you can select only the categories you wish to display in this section.

Adjusting the information that displays

In the Blog Settings window under the Content tab, you will see an option to display just the Post Excerpt or the full post. Below this in the Blog Settings section there are some more options for you to play with, such as whether to display the post’s Featured Image, whether to show the Author Name, Post Date, and number of Comments. Below this you can also change the Background Colour of the blog posts. All of these options are down to your preference, so have a play and set them as you like. Remember to hit the green tick to save your changes!

Changing the layout of blog post display

In the Blog Settings window under the Design tab, you have a few options. The top option is the blog post Layout. By default in our EDW design, the layout is a grid layout, meaning the posts appear in boxes side by side. You can if you wish change it to Full Width layout so each post extends the full width of the content area and appear one above each other.

Changing the Blog Post text

Open the Blog Settings window. On the Design tab, scroll below the layout settings you will see some options to change the text of the blog posts, both headings and content text, if you wish it to be different to your master design settings.

Changing the Go to Blog button

The Go to Blog Button uses the Button module. As with most buttons on the site, to change these buttons, you will need to hover over the button and open the Button Settings window. In the Text section you can change the text that appears on your button. In the Link section you can add the url where you wish your button to link to. If you wish to change the design of the button(s) on this banner it is possible to override the basic button design settings you set up earlier in the Divi Customiser. Click on the Design tab. Scroll down to the Button section. To override the basic button design settings you set up earlier, make sure Use Custom Styles for Button One is set to Yes. Now you will see you have all the same design options for this button as you did in the Divi Customiser, only this time any changes you make will be applied to this particular button only and not to any of the other buttons on your site. You can also remove the button by hovering over it and clicking the trashcan icon.

Removing the entire blog post section from home page

If you wish to remove the entire blog section (or any section on the page) just hover over the section and click the trashcan icon that appears in the Section Toolbar. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Product Display

You will see on the home page some sample products. These are displayed using the Shop module, and the products are added using the WooCommerce plugin. We go into more detail about this later in the Managing the Shop section. Here we are looking at how to control and customise the way the products are displayed on the home page. To edit your shop display options, open the Shop Settings by hovering over the products on the home page and clicking the Shop Settings icon.

Which type and how many products to display

In the Content tab you can choose which type of products to display. By default we have set it to show the latest products, but you can change this to choose from Featured Products, Sales Products, best Selling Products, Top Rated Products or Product Category. So you can see how you can start to customise your page, and if you have many products to sell you can organise them into different sections, and even organise them further by putting them into product categories. Below this you can choose how many products you wish to display, in what order, and in how many columns. Click the green tick to save your changes.

Changing the product text styles

Open the Shop Settings window. On the Design tab, scroll below the layout settings you will see some options to change the text of the blog posts, both headings and content text, if you wish it to be different to your master design settings.

Removing the entire shop section from home page

If you wish to remove the entire shop section (or any section on the page) just hover over the section and click the trashcan icon that appears in the Section Toolbar. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising Testimonials

Testimonials are vital for any coach or consultant, and it doesn’t hurt to scatter them around the page. As with any Divi section, it’s super easy to duplicate your testimonials and simply change the text to add new testimonials. The second type of testimonial display on our sample page is simpler than the testimonial slider – just the text in a designed box.

Customising the testimonial content

Hover over the testimonial and click the Module Settings for the testimonial module. Under the Content tab you will see a Text section where you can change the testimonial text and replace it with your own. You will see we have kept it simple with just the person’s name and the testimonial, but there are several options here you can play with. You can add a job title and company name. And below the text section you can add an image, and you can add a link to the testimonial author’s website. Have a play until you are happy with the way it looks. Remember you can easily use the Undo and Redo icons to step backwards if you don’t like something you’ve done.

Customising the testimonial background

Open the Testimonial Settings window. In the Content tab at the bottom, you will see the Background option. You can choose between a coloured background, a gradient background, an image background or a video background for your testimonial. By default in our design, we use a colour AND a small quote image.

Customising the testimonial design

Open the Testimonial Settings window. Under the design tab you will see several options, to change the text of your testimonials. You also have options to adjust the styling of the portrait image if you added one. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

The opt-in form on the Easy Designer Webite demo (and therefore your website) is created using the Divi Email Optin module.

However, since the new GDPR regulations came into force in May 2018, we have found that this form, while easier to set up, doesn’t allow you to add a privacy notice with a checkbox for subscribers to agree to as per the GDPR regulations,  and we therefore encourage you to use a bespoke optin form created in your mailing list provider.

There are many mailing list providers , so when you are ready to add your optin form please contact us @ team@creativegenie.org or on the Facebook private support group and let us know which mailing list provider you use (e.g Mailchimp, Aweber) and we will assist you with instructions modified for your service.

Customising banner & title

Open your about page in your browser and make sure you have enabled your Divi Visual Builder. When you hover over the main banner on your about page, you will see two tool bars appear – a purple one near the top left of your banner and a grey one near your text. The purple tool bar is relating to the Section in which the banner sits. The grey one relates to the Fullwidth Header module which is used for this banner.

Change your banner image

Click the small cog (settings) icon in the grey module toolbar. A new box will open with all the settings options for this module. In the Content tab of the settings box, click Background. In the Background settings, you will see four possible options: Colour, Gradient, Image, or Video. Feel free to click on any of the other options and have a play. Colours, gradients, and videos can all look very cool as backgrounds of banners and sections. If you choose to replace the background with a colour, gradient, or video, remember to delete this banner image that is currently there by hovering over it and clicking the trashcan icon. If you wish to change this image to your own, click the cog icon that appears when you hover over the image. Your Media Library will open in front of you. If the image you wish to choose is already uploaded to your media library, simply choose it, else click on the Upload Files tab and click the Select Files button to find your image file on your computer. Once it has uploaded, click the button and see it in place on your page. If you don’t like it, you can always click the undo arrow at the bottom of the settings window to undo the image change.

Turning parallax effect off

On this page, the background image has Parallax Effect applied ot it. This gives it the sense that the background moves at a slightly different speed to the overlaying text when somebody scrolls on the page. It’s a cool effect, but if you don’t like it simply turn this option off by setting Parallax Effect to Off. If you are happy with your new image, click the green tick at the bottom of the settings window to apply the change. The settings window will close.

Customising text on banner

It’s so simple to make quick changes to the text on the banner (or anywhere!). Simply click on the text, highlight it, and start typing. If you make any mistakes, you can also undo any changes just as you would in a Word document, by using CMD-Z (Mac) or CTRL-Z (PC). You can also change the text on the banner by hovering over it and clicking the Module Settings icon. In this case the module is a Fullwidth Header. In the Content tab in the Text section, you can adjust the Main Title, and Subheading. You’ll notice there is an area for Button 1 and Button 2 text, as it’s also possible to add two buttons in your banner should you wish. There is also a Content box in which you can add more text if you wish to have a paragraph or two underneath the title and subheading. When you make changes within the settings box you can use the undo and redo arrows at the bottom of the box. Click the green arrow when you’re happy with your changes.

Customising fonts on banner

If you wish to change font, colour, or size of any text on this banner it is possible to override the basic font design settings you set up earlier in the Divi Customiser. Open the Settings window for the banner module. Click on the Design tab. Here you will see several options, including text, subheading text, and title text. You don’t need me to talk you through all the options here, simply have a play, and remember you can easily undo any changes. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising about me text

The about me text box is a simple Text Module. You can edit the text on the page by simply highlighting it and typing your own text. For more options, click the Text Module Settings icon that appears in the toolbar when you hover over the text. In the Content tab you can edit the text itself. In the Design tab you can change your colours and fonts, as well as play with options for the background colour of the text module, and the border. When you are happy with your changes, click the green arrow to apply them. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising image

The image on the about me page uses the Image Module. To change the image, hover over it and click the Settings icon that appears in the Image Module toolbar.

Uploading your own image

You will see a button to upload your new image. Simply click this button and navigate to your image file on your computer, then click upload.

Adjusting image layout and design

In the Design section there are a few options to customise the way your image displays, such as size, border, and alignment. Play with all your options, and when you are happy, click the green tick. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising social media icons

The social media icons on the about page are managed using a plugin called Monarch which is designed to work with Divi. Here I will provide you with details of how to make basic changes to customise your social media icons. If you wish to further explore the possibilities with the Monarch plugin, the full documentation for the plugin is here: https://www.elegantthemes.com/documentation/monarch/overview-monarch/ Earlier in the guide we covered how to connect to your social media accounts. Here we will look at how to customise the design of the icons. Go to your WordPress dashboard Go to Plugins > Monarch > Settings There are two different types of social media icons available, social media Sharing icons, and social media Follow icons. The sharing icons allow you to add icons to pages and posts that let people share your content on their social media channels. We use these on the blog, and you can find our more about how to do this in the Managing the Blog section. On the about page we use the Social Media Follow icons which allow you to share links to your own social media channels.

Changing the design of the social media icons

There are a few options for customising the way your social media follow icons look on the about page. In the left hand menu of the Monarch settings window, click Social Follow. Click on the Shortcode icon. Play with the different display options available. When you are happy with your selected options, click Generate Shortcode. This shortcode is how you add your social media icons to your page. Copy the shortcode and hop back to your about page with the Visual Builder enabled. Hover over the social media icons and click the settings icon to open the social media settings window. In the text area you will see the previous shortcode. Paste your new shortcode over this and click the green tick to save. You will see the visual changes on your page, but to test the link you will need to open the page in a new window without the Visual Builder enabled. If you are happy with how the icons look and you have ensured all the links are working correctly, return to the plugin tab and click Save Changes. To make further adjustments just follow through the above steps again.

Remove the Social media Follow icons

If you wish to remove the Social Media Follow icons from your about page, simply open the about page and make sure Visual Builder is enabled, then hover over the section and click the trashcan icon in the green settings toolbox that appears on the left of the section. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising Instagram feed

The Instagram Feed is also managed by a plugin, called Instagram Feed! To make adjustments to this feed, you need to go to your WordPress Dashboard and click Instagram Feed in the left menu.

Connect the Instagram feed to your Instagram account

At the top of the plugin settings page, click the button that says Login to get my User ID and Access Token Follow the steps on screen and login to your Instagram account You will be presented with your User ID and Access Token. Copy them one at a time and paste them into the corresponding boxes in the plugin settings page. Click Save Changes

Change the way your Instagram Feed displays

In the Instagram Feed plugin settings, click the Customize tab. There are several options for how to customise your Instagram feed on the about page. Scroll down the page and adjust the settings as you would like them. Your changes will automatically apply to the about page as we have added the shortcode for you.

Delete the Instagram feed section

If you wish to remove the Instagram Feed from your about page, simply open the about page and make sure Visual Builder is enabled, then hover over the Instagram Feed section and click the trashcan icon in the green settings toolbox that appears on the left of the section. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising banner & title

Open your services page in your browser and make sure you have enabled your Divi Visual Builder. When you hover over the main banner on your services page, you will see two tool bars appear – a purple one near the top left of your banner and a grey one near your text. The purple tool bar is relating to the Section in which the banner sits. The grey one relates to the Fullwidth Header module, which is used for this banner.

Change your banner image

Click the small cog icon (settings) in the grey module toolbar. A new box will open with all the settings options for this module. In the Content tab of the settings box, click Background. In the Background settings, you will see four possible options: Colour, Gradient, Image, or Video. Feel free to click on any of the other options and have a play. Colours, gradients, and videos can all look very cool as backgrounds of banners and sections. If you choose to replace the background with a colour, gradient, or video, remember to delete this banner image that is currently there by hovering over it and clicking the trashcan icon. If you wish to change this image to your own, click the cog icon that appears when you hover over the image. Your Media Library will open in front of you. If the image you wish to choose is already uploaded to your media library, simply choose it, else click on the Upload Files tab and click the Select Filesbutton to find your image file on your computer. Once it has uploaded, click the button and see it in place on your page. If you don’t like it, you can always click the undo arrow at the bottom of the settings window to undo the image change.

Turning parallax effect off

On this page, the background image has Parallax Effect applied ot it. This gives it the sense that the background moves at a slightly different speed to the overlaying text when somebody scrolls on the page. It’s a cool effect, but if you don’t like it simply turn this option off by setting Parallax Effect to Off. If you are happy with your new image, click the green tick at the bottom of the settings window to apply the change. The settings window will close.

Customising text on banner

It’s so simple to make quick changes to the text on the banner (or anywhere!). Simply click on the text, highlight it, and start typing. If you make any mistakes, you can also undo any changes just as you would in a Word document, by using CMD-Z (Mac) or CTRL-Z (PC). You can also change the text on the banner by hovering over it and clicking the Module Settings icon. In this case the module is a Fullwidth Header. In the Content tab in the Text section, you can adjust the Main Title, and Subheading. You’ll notice there is an area for Button 1 and Button 2 text, as it’s also possible to add two buttons in your banner should you wish. There is also a Content box in which you can add more text if you wish to have a paragraph or two underneath the title and subheading. When you make changes within the settings box you can use the undo and redo arrows at the bottom of the box. Click the green arrow when you’re happy with your changes.

Customising fonts on banner

If you wish to change font, colour, or size of any text on this banner it is possible to override the basic font design settings you set up earlier in the Divi Customiser. Open the Settings window for the banner module. Click on the Design tab. Here you will see several options, including text, subheading text, and title text. You don’t need me to talk you through all the options here, simply have a play, and remember you can easily undo any changes. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising intro text

The about me text box is a simple Text Module. You can edit the text on the page by simply highlighting it and typing your own text. For more options, click the Text Settings icon that appears in the toolbar when you hover over the text. In the Content tab you can edit the text itself. In the Design tab you can change your colours and fonts, as well as play with options for the background colour of the text module, and the border. When you are happy with your changes, click the green arrow to save them. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising services section

Changing the background colour

The background colour for the services section is applied to the page section. To change the colour hover over the section of the page and click the Settings icon in the blue toolbar that appears on the left at the top of the section. In the Content tab of the settings box, click Background. In the Background settings, you will see four possible options: Colour, Gradient, Image, or Video. Feel free to click on any of the other options and have a play. Colours, gradients, and videos can all look very cool as backgrounds of banners and sections. Click the green tick to apply your changes and close the settings window for the section.

Editing the Services text

Each of the three sample services we have added are applied using a text module. You can edit the text on the page by simply highlighting it and typing your own text. For more options, click the Text Settings icon that appears in the toolbar when you hover over the text. In the Content tab you can edit the text itself. In the Design tab you can change your colours and fonts, as well as play with options for the background colour of the text module, and the border. When you are happy with your changes, click the green arrow to save them.

Customising services images

The images on the services me page use the Image Module. To change the image, hover over it and click the Settings icon that appears in the Image Module toolbar. You will see a button to upload your new image. Simply click this button and navigate to your image file on your computer, then click upload. In the Design section there are a few options to customise the way your image displays, such as size, border, and alignment. Play with all your options, and when you are happy, click the green tick.

Adjusting layout

You can duplicate and delete all the services text and image elements by hovering over them and clicking the appropriate icon in the toolbar. Modules can be moved by holding down the move icons (four arrows) and dragging the element to where you wan tit on the page. For more details about how to change the structure of your layout, see the Visual Builder options in the Divi section. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising pricing tables

Pricing tables are a great way to allow people to compare the services you offer, and you can even highlight one column to show it’s the best value. The pricing tables themselves are displayed using the Divi pricing tables module. You can see full and extensive documentation for customising your pricing tables here: https://www.elegantthemes.com/documentation/divi/pricing-tables/

Changing the content of your pricing tables

Click on the Settings icon on the pricing table when you are viewing it with Divi Visual Builder enabled and you will see boxes for the three different columns. To change the content of one of the columns, simply click the settings icon on the one you want to change. It’s pretty self-explanatory. In the Text section you can change the title and content including price, currency, title, subtitle, and button text. In the Link section you can change the url of the button in that column by pasting in the url of page or product you want it to link to. In the Background section you can change the background design on that one column. When you have made your changes and are happy, click the green tick to apply your change and then click the back arrow at the top of the window to return to the list of columns. Repeat for each column to replace with your own info.

Adding and removing pricing columns

Click on the Settings icon on the pricing table when you are viewing it with Divi Visual Builder enabled and you will see boxes for the three different columns. To remove a column, click the trashcan on the right hand side. To add a column, click the big plus sign OR duplicate a current column (that way you keep all your design and settings but just change the content).

Customising the design of the pricing table

In the settings for the pricing table module, click on the Design tab and you will see all the different options for customising the design of the pricing table, including text, colours, When you are happy with your changes click the green tick to save them.

Removing the pricing table

You can remove the entire pricing table by hovering over it on your page, and clicking the trash icon that appears. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising testimonials

These are changed in exactly the same way as the testimonials on the home page.

Customising the testimonial content

Hover over the testimonial and click the Module Settings for the testimonial module. Under the Content tab you will see a Text section where you can change the testimonial text and replace it with your own. You will see we have kept it simple with just the person’s name and the testimonial, but there are several options here you can play with. You can add a job title and company name. And below the text section you can add an image, and you can add a link to the testimonial author’s website. Have a play until you are happy with the way it looks. Remember you can easily use the Undo and Redo icons to step backwards if you don’t like something you’ve done.

Customising the testimonial background

Open the Testimonial Settings window. In the Content tab at the bottom, you will see the Background option. You can choose between a coloured background, a gradient background, an image background or a video background for your testimonial. By default in our design, we use a colour AND a small quote image.

Customising the testimonial design

Open the Testimonial Settings window. Under the design tab you will see several options, to change the text of your testimonials. You also have options to adjust the styling of the portrait image if you added one. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising banner & title

Open your contact page in your browser and make sure you have enabled your Divi Visual Builder. When you hover over the main banner on your about page, you will see two tool bars appear – a purple one near the top left of your banner and a grey one near your text. The purple tool bar is relating to the Section in which the banner sits. The grey one relates to the Fullwidth Header module, which is used for this banner.

Change your banner image

Click the small cog (settings) icon in the grey module toolbar. A new box will open with all the settings options for this module. In the Content tab of the settings box, click Background. In the Background settings, you will see four possible options: Colour, Gradient, Image, or Video. Feel free to click on any of the other options and have a play. Colours, gradients, and videos can all look very cool as backgrounds of banners and sections. If you choose to replace the background with a colour, gradient, or video, remember to delete this banner image that is currently there by hovering over it and clicking the trashcan icon. If you wish to change this image to your own, click the cog icon that appears when you hover over the image. Your Media Library will open in front of you. If the image you wish to choose is already uploaded to your media library, simply choose it, else click on the Upload Files tab and click the Select Files button to find your image file on your computer. Once it has uploaded, click the button and see it in place on your page. If you don’t like it, you can always click the undo arrow at the bottom of the settings window to undo the image change.

Turning parallax effect off

On this page, the background image has Parallax Effect applied to it. This gives it the sense that the background moves at a slightly different speed to the overlaying text when somebody scrolls on the page. It’s a cool effect, but if you don’t like it simply turn this option off by setting Parallax Effect to Off. If you are happy with your new image, click the green tick at the bottom of the settings window to apply the change. The settings window will close.

Customising text on banner

It’s so simple to make quick changes to the text on the banner (or anywhere!). Simply click on the text, highlight it, and start typing. If you make any mistakes, you can also undo any changes just as you would in a Word document, by using CMD-Z (Mac) or CTRL-Z (PC). You can also change the text on the banner by hovering over it and clicking the Module Settings icon. In this case the module is a Fullwidth Header. In the Content tab in the Text section, you can adjust the Main Title, and Subheading. You’ll notice there is an area for Button 1 and Button 2 text, as it’s also possible to add two buttons in your banner should you wish. There is also a Content box in which you can add more text if you wish to have a paragraph or two underneath the title and subheading. When you make changes within the settings box you can use the undo and redo arrows at the bottom of the box. Click the green arrow when you’re happy with your changes.

Customising fonts on banner

If you wish to change font, colour, or size of any text on this banner it is possible to override the basic font design settings you set up earlier in the Divi Customiser. Open the Settings window for the banner module. Click on the Design tab. Here you will see several options, including text, subheading text, and title text. You don’t need me to talk you through all the options here, simply have a play, and remember you can easily undo any changes. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising intro text

The intro text box is a simple Text Module. You can edit the text on the page by simply highlighting it and typing your own text. For more options, click the Text Module Settings icon that appears in the toolbar when you hover over the text. In the Content tab you can edit the text itself. In the Design tab you can change your colours and fonts, as well as play with options for the background colour of the text module, and the border. When you are happy with your changes, click the green arrow to save them. Likewise, the telephone and email contact details are added as text modules and can be customised in the same way. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising contact form

With the Visual Builder enabled, hover over the contact form on your page and click the settings icon.

Changing and adding form fields

You will see the three form fields, Name, Email, and Message before you. You can edit each of these by clicking the settings icon on them. You can add a form field clicking the plus button below these form fields.

Success Message & Button text

In the Text section you can add a Success Message which the user will see when the form has successfully been submitted. You can also change the text on your Submit button.

Editing the email

Click the Email option to add the email address where you would like the form to be sent. Below this you will see we have entered a message pattern  – this is the email message you will receive when someone contacts you through your website. If you have added new form fields you will want to add them in the same way, using %%formfield%%

Captcha

Open the Elements section to choose whether to display a captcha to eliminate spam entries.

Redirect

Here you can choose to redirect the user to a page after their message has been sent. This is optional. You may wish to create a thank you page with a special message or content to which you redirect them after they get in touch with you.

Contact form design

In the Contact Form Settings, click the Design tab to access various design options for your form. Have a play, and remember to click the green arrow when you’re done! When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Managing the Shop

The Shop uses the popular and well supported WooCommerce plugin. It is a very comprehensive plugin with lots of add-ons available. In this guide we are just looking at the very basic settings and product options so you can sell simple products and downloadable products.

Basic shop settings

In your WordPress dashboard, go to WooCommerce > Settings. There are many options here, and you can browse through them all customising them to your needs. It’s particularly important to go to the Checkout section and add some payment methods so you can get paid when your customers buy something! The easiest way is to click the Paypal option and put in your Paypal email address. For more in depth guidance on all the WooCommerce settings, including shipping, taxes, and payment options, follow the in depth WooCommerce guide here: https://docs.woocommerce.com/document/configuring-woocommerce-settings/

Editing sample products

To make any changes to your products, access your WordPress dashboard and click Products. You will see the list of sample products we’ve added. Click Edit on one of these sample products.

Changing the basic product info

As we have already added some basic info, you will get an idea for how it works. You can change the name, and add a Product Description, which people will see when they click onto your product. At the bottom of the page you can add a Short Description, which will show up in other areas of the site like on the shop page. Above the short description area, you will see the Product Data section. Here you can change the price and if you wish to put the item on sale, add a sale price. This will show the original price crossed out with the sale price below, in your shop.

Making product virtual and/or downloadable

If your product is a downloadable product such as an mp3 download or a pdf rather than a physical product, make sure you check both the Virtual and Downloadable options at the top of the Product data section. If it is virtual but not downloadable such as membership to a club or group, only check the Virtual option. This will negate any shipping settings. If it’s a downloadable file, you will see a section where you can upload the file that the user should receive after purchase. You can also set a download limit.

Inventory

If you have a finite number of your product available, and want to manage inventory, click on the Inventory tab. Tick the Manage Stock option. Enter the amount you have available.

Linked products

It is possible to upsell other products when this product is viewed, to do this click the Linked Products tab and enter the product(s) you would like to upsell.

Variable products

We are not going to go too in depth in this guide as we want to keep it simply about basic products. However, if you wish to add more complex products with variable options such as colours and sizes, you can follow the more in depth WooCommerce guides here: https://docs.woocommerce.com/document/variable-product/

Shipping

If your product is an actual physical product that you will be posting to the customer, make sure to uncheck the virtual and downloadable options. When you do this a new Shipping tab will appear. Here, you can add the product weight and choose the shipping class. For more details on how to do this view the WooCommerce in depth guide: https://docs.woocommerce.com/documentation/plugins/woocommerce/getting-started/shipping/

Adding product categories

On the right hand side of the page, you will see a Product Categories option. If you haven’t yet added any product categories, this will be blank. If you wish to organise your products in categories, which allows you to control the display of different categories on the shop page and allows the customer to refine their searches by different categories, you can enter one or several new Product Categories here. Once you have added Product Categories, they will appear in this section for each product you create and you can select current categories by ticking them, or add more new categories as desired.

Adding product tags

Product tags are another way to relate products to each other, next to product categories. Contrary to categories, there is no hierarchy in tags; so there are no “subtags.” For example, if you sell clothing, and you have a lot of cat prints, you could make a tag for “cat.” Then add that tag to the menu or sidebar so cat lovers can easily find all t-shirts, hoodies, and pants with cat prints.

Adding a product image

The Product Image is the main image for your product. It serves as the focus in the image gallery of your product details page. Adding a product image is done in the same way as featured images for posts and pages are added. Adding product images and galleries are options that by default are available on the right hand side when editing a product in your store. Just upload your image!

Adding a product gallery

Product galleries display all images attached to a product through the Product Gallery meta box. You can create a product gallery using the same method as adding a featured image, but using the Product Gallery meta box.

Reorder images in product gallery

Images in the product gallery can be re-ordered easily via drag and drop. Simply re-order your images by moving them around.

Remove images from product gallery

To remove an image from the product gallery, hover over the image and click on the red “x.”

Adding & removing new products

Add a new product by duplicating an existing product or choosing Add New in the WordPress dashboard in the Products section. Simply enter all the information as described in the above section, editing sample products. To remove a product at any time, go to Products in WordPress dashboard, hover over the product you wish to remove, and click Trash.

Editing the shop page

The Shop page is just like any other page, but uses the Shop widget to display your shop products.

Change your banner image

Open your about page in your browser and make sure you have enabled your Divi Visual Builder. When you hover over the main banner on your services page, you will see two tool bars appear – a purple one near the top left of your banner and a grey one near your text. The purple tool bar is relating to the Section in which the banner sits. The grey one relates to the Fullwidth Header module, which is used for this banner. Click the small cog (settings) icon in the grey module toolbar. A new box will open with all the settings options for this module. In the Content tab of the settings box, click Background. In the Background settings, you will see four possible options: Colour, Gradient, Image, or Video. Feel free to click on any of the other options and have a play. Colours, gradients, and videos can all look very cool as backgrounds of banners and sections. If you choose to replace the background with a colour, gradient, or video, remember to delete this banner image that is currently there by hovering over it and clicking the trashcan icon. If you wish to change this image to your own, click the cog icon that appears when you hover over the image. Your Media Library will open in front of you. If the image you wish to choose is already uploaded to your media library, simply choose it, else click on the Upload Files tab and click the Select Files button to find your image file on your computer. Once it has uploaded, click the button and see it in place on your page. If you don’t like it, you can always click the undo arrow at the bottom of the settings window to undo the image change.

Turning parallax effect off

On this page, the background image has Parallax Effect applied ot it. This gives it the sense that the background moves at a slightly different speed to the overlaying text when somebody scrolls on the page. It’s a cool effect, but if you don’t like it simply turn this option off by setting Parallax Effect to Off. If you are happy with your new image, click the green tick at the bottom of the settings window to apply the change. The settings window will close.

Customising text on banner

It’s so simple to make quick changes to the text on the banner (or anywhere!). Simply click on the text, highlight it, and start typing. If you make any mistakes, you can also undo any changes just as you would in a Word document, by using CMD-Z (Mac) or CTRL-Z (PC). You can also change the text on the banner by hovering over it and clicking the Module Settings icon. In this case the module is a Fullwidth Header. In the Content tab in the Text section, you can adjust the Main Title, and Subheading. You’ll notice there is an area for Button 1 and Button 2 text, as it’s also possible to add two buttons in your banner should you wish. There is also a Content box in which you can add more text if you wish to have a paragraph or two underneath the title and subheading. When you make changes within the settings box you can use the undo and redo arrows at the bottom of the box. Click the green arrow when you’re happy with your changes.

Customising fonts on banner

If you wish to change font, colour, or size of any text on this banner it is possible to override the basic font design settings you set up earlier in the Divi Customiser. Open the Settings window for the banner module. Click on the Design tab. Here you will see several options, including text, subheading text, and title text. You don’t need me to talk you through all the options here, simply have a play, and remember you can easily undo any changes.

Customising product display

These are displayed using the Shop module. To edit your shop display options, open the Shop Settings by hovering over the products on the home page and clicking the Shop Settings icon.

Which type and how many products to display

In the Content tab you can choose which type of products to display. By default we have set it to show the latest products, but you can change this to choose from Featured Products, Sales Products, best Selling Products, Top Rated Products or Product Category. So you can see how you can start to customise your shop page, and if you have many products to sell you can organise them into different sections, and even organise them further by putting them into product categories. Below this you can choose how many products you wish to display, in what order, and in how many columns. Click the green tick to save your changes.

Changing the product text styles

Open the Shop Settings window. On the Design tab, scroll below the layout settings you will see some options to change the text of the blog posts, both headings and content text, if you wish it to be different to your master design settings. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising social media sharing icons

The social media icons on the about page are managed using a plugin called Monarch. Here I will provide you with details of how to make basic changes to customise your social media sharing icons. If you wish to further explore the possibilities with the Monarch plugin, the full documentation for the plugin is here: https://www.elegantthemes.com/documentation/monarch/overview-monarch/ Earlier in the guide we covered how to connect to your social media accounts. Here we will look at how to customise the design of the sharing icons on your products and posts. Go to your WordPress dashboard Go to Plugins > Monarch > Settings Under Social Sharing, click on Inline. Play with the different display options available. When you are happy with your selected options, click Save Changes.

Remove the Social media sharing icons

Go to your WordPress dashboard Go to Plugins > Monarch > Settings Under Social Sharing, click on Locations. Uncheck the Inline option or uncheck Products if you wish them to appear on blog posts only.

Managing the Blog

Posts are what make your blog a blog. We have added three sample posts for you, so you can easily go into those and edit them to contain your own blog content.

Editing the sample posts

In WordPress dashboard go to Posts > All Posts You will see the three sample posts. Click on one and click Edit.

Changing post content

Change the title and content of the post in the relevant areas. You can use the editor to add videos, images, and any other content you wish to your post.

Adding a featured image

Add a featured image on the bottom right of the page, by clicking the current image and uploading a new one. This will be displayed on your blog page and anywhere you choose to show blog posts.

Post categories

If you wish you can organise your posts into Post Categories. These are added in the Post Category section on the right hand side. On your blog page you can then select which categories you wish to display and could even have different sections for different categories. Select categories by clicking them or add new categories.

Adding tags

Tags are a bit like keywords and act as an additional way for your readers to search your related content. You can add several tags to a post.

Changing the slug

Under the main content area you will see a section called Slug. This is what will appear in the url when the user clicks your post. Change it to reflect the title of your post.

Discussion

In this section you can select whether or not to allow your readers to comment below your post.

Blog post display

Blog posts are displayed on any page on your site with the Blog Module.

Changing which and how many of blog posts to display

Hover over the blog post section and click the Blog Settings icon on the widget. The first option you will see in the Content tab is the Post Number. Enter here how many blog posts you would like to display on the home page. Below that you will see an Include Categories option. This will display all of your Post Categories. By default, we have set a category of Blog and all sample posts are assigned to this category. Therefore the latest Blog Posts will display in this section. However if you want to display different categories of posts in different areas of your page or site, you can control this by adding more blog categories and assigning your posts to the relevant category. All of the categories will then display in this list and you can select only the categories you wish to display in this section.

Adjusting the information that displays

In the Blog Settings window under the Content tab, you will see an option to display just the Post Excerpt or the full post. Below this in the Blog Settings section there are some more options for you to play with, such as whether to display the post’s Featured Image, whether to show the Author Name, Post Date, and number of Comments. Below this you can also change the Background Colour of the blog posts. All of these options are down to your preference, so have a play and set them as you like. Remember to hit the green tick to save your changes!

Changing the layout of blog post display

In the Blog Settings window under the Design tab, you have a few options. The top option is the blog post Layout. By default in our EDW design, the layout is a grid layout, meaning the posts appear in boxes side by side. You can if you wish change it to Full Width layout so each post extends the full width of the content area and appear one above each other.

Changing the Blog Post text design

Open the Blog Settings window. On the Design tab, scroll below the layout settings you will see some options to change design of the text of the blog posts, both headings and content text, if you wish it to be different to your master design settings. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising social media sharing icons

The social media icons on the about page are managed using a plugin called Monarch. Here I will provide you with details of how to make basic changes to customise your social media sharing icons. If you wish to further explore the possibilities with the Monarch plugin, the full documentation for the plugin is here: https://www.elegantthemes.com/documentation/monarch/overview-monarch/ Earlier in the guide we covered how to connect to your social media accounts. Here we will look at how to customise the design of the sharing icons on your blog posts. Go to your WordPress dashboard Go to Plugins > Monarch > Settings Under Social Sharing, click on Inline. Play with the different display options available. When you are happy with your selected options, click Save Changes.

Remove the Social media sharing icons

Go to your WordPress dashboard Go to Plugins > Monarch > Settings Under Social Sharing, click on Locations. Uncheck the Inline option.

Changing the sidebar on blog posts

On the right of each blog post you will see a sidebar, which has various blog options so the user can explore your blog. This sidebar is added using the Sidebar module. You can remove this module in the same way you would any other section on the site. However, the content of the sidebar is controlled in your WordPress dashboard. Go to Appearance > Widgets You will see a widget area called Sidebar. This is the sidebar that’s appearing on your blog posts. You can see all the different widgets that correspond to those you see on the sidebar. To remove any widgets form the sidebar, just drag them off to the left. To change the order of the widgets, just drag them into the desired order. You can also explore the other available widgets which you can add to your sidebar on the left, just drag them to the place where you would like them, and expand them to adjust their settings. You might find this article interesting, which explores the 25 most useful widgets for your blog: http://www.wpbeginner.com/showcase/25-most-useful-wordpress-widgets-for-your-site/

Adding & deleting pages

Adding a new page

If you wish to expand your site by adding new pages, it’s really easy to do so. The simplest way is to clone an existing page and then edit it in the same way we have described above for your existing pages. In your WordPress dashboard, go to Pages. Hover over the page you would like to duplicate, and click Clone. Now Edit the new page and give it a new name, then click Save. Now you can click View on the new page and Enable Visual Builder in the top options. You can now edit it as we have described in the other pages. Edit the current sections, or easily add new sections and modules in the builder.

Removing a page

If there are any pages in the sample site that you do not wish to use, you can remove it in your WordPress dashboard, by going to the Pages section. Simply hover over the page you wish to remove and click Trash.

Customising main menu

To customise what appears in the main menu at the top of you page, go into your WordPress dashboard and go to Appearance > Menus. You will see the menu in front of you with the menu items in the order that they appear.

Moving menu items

You can rearrange your menu items by grabbing hold of them with your cursor and moving them to the position you would like them in. You can even make child menus by indenting the menu item under another menu item you would like to be a ‘parent’.

Adding new menu items

Add new menu items by selecting from the options on the left hand side. There are several options for what you can add to the menu, including pages, posts, and custom links.

Removing menu items

Remove a menu item by clicking the little arrow on its right and choosing Remove. When you make any changes to your menu, make sure you click Save Changes to apply to changes to your site.

How to Remove the Shopping Cart from the Menu

• First of all log in to the wp-admin and get to the dashboard.
• From the dashboard, look to the left side menu and select ‘simple custom css’ which is under the appearence tab.
• Scroll to the bottom of the custom css code and type “.et-cart-info {display: none;}”
• Click the “Update Custom CSS” button.

Customising Main Banner

Open your home page in your browser and make sure you have enabled your Divi Visual Builder.

Change your banner image

The banner image is a Background Image of the Section. Click the small cog (Section Settings) icon in the section toolbar. A new box will open with all the settings options for this section. Make sure you are in the Content tab of the settings box and click Background. In the Background settings of any Section or Row, you will see four possible options: Colour, Gradient, Image, or Video. Feel free to click on any of the other options and have a play. Colours, gradients, and videos can all look very cool as backgrounds of banners and sections. If you choose to replace the background with a colour, gradient, or video, remember to delete this banner image by hovering over it and clicking the trashcan icon. If you wish to change this image to your own, click the cog icon that appears when you hover over the image. Your Media Library will open in front of you. If the image you wish to choose is already uploaded to your media library, simply choose it, else click on the Upload Files tab and click the Select Filesbutton to find your image file on your computer. Once it has uploaded, click the button and see it in place on your page. If you don’t like it, you can always click the undo arrow at the bottom of the settings window to undo the image change. If you are happy with your new image, click the green tick at the bottom of the settings window to apply the change. The settings window will close. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Adjusting spacing on banner image

You may feel that your new image needs more or less padding in order to display properly. Hover over the image and click the settings icon on the main banner section to open your settings window. Click the Design tab and choose Spacing. You can play with different padding amounts here until you find the perfect spacing for your new banner image. When you are happy, click the green tick to apply the changes and close the settings window.

Customising text on banner

It’s so simple to make quick changes to the text on the banner (or anywhere!). Simply click on the text, highlight it, and start typing. If you make any mistakes, you can also undo any changes just as you would in a Word document, by using CMD-Z (Mac) or CTRL-Z (PC). You can also change the text on the banner by hovering over it and clicking the Module Settings icon. In this case the module is a Text module. The settings window will open in the with a Text box where you can edit the text. When you make changes within the settings box you can use the undo and redo arrows at the bottom of the box. Click the green arrow when you’re happy with your changes.

Customising fonts on banner

If you wish to change font, colour, or size of any text on this banner it is possible to override the basic font design settings you set up earlier in the Divi Customiser. Open the Settings window for the text module. Click on the Design tab. Here you will see several options, including text, subheading text, and title text. You don’t need me to talk you through all the options here, simply have a play, and remember you can easily undo any changes. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising Text & Images

This section applies to all images and text on the page including the testimonials section, which is literally set up using an image and text module for each testimonial.

Customising text

Customising the text on the sales page is as simple as on any other page – just highlight the text you want to change and start typing! If you make any mistakes, you can also undo any changes just as you would in a Word document, by using CMD-Z (Mac) or CTRL-Z (PC). You can also change the text on the banner by hovering over it and clicking the Module Settings icon. In this case the module is a Text module. The settings window will open in the with a Text box where you can edit the text. When you make changes within the settings box you can use the undo and redo arrows at the bottom of the box. Click the green arrow when you’re happy with your changes.

Customising Images

The images on the page are all inserted using the image module. Change them in the same way as any other module – click on the module settings icon to open the window, and upload your own image. You will also find options for image size, and animation (we have a cool slide in effect on images on the sales page but you might want to change this or turn it off!).

Customising Video

Changing the Video

To change the video that appears near the top of the page to your own video, simply open the sales page and enable Visual Builder. Hover over the video and click the Video Settings icon. You will see an option to upload your video. Alternatively you can paste here a link to your video on a hosted site such as Youtube. Click the green arrow when you are done.

Video Design Settings

To change the design options for your video: Hover over the video and click the Video Settings icon. Click the Design tab. There are a few design options to choose from such as the colour of the Play button, the sizing and spcaing of the video. You will see your changes take effect on the page. Keep playing until you are happy, then click the green tick!

Remove the Video

If you wish to remove the video altogether, hover over the video module on the page and click the trashcan icon. You could then replace it with another module such as an Image or Text. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising Features

Customising Features

When I refer to Features I mean the tick list that appears to the right of the video. You could use this list to highlight some main features of what you’re selling to catch your customer’s eye. The features are added using the Blurb Module

Changing the text

You could simply replace the text on them by opening the page and enabling Visual Builder, then highlighting the text and replacing wiht your own. Or you could open the Blurb Settings window by clicking on the settings icon that appears when you hover over the blurb (each blurb is a separate module). You will see a space to change the title and content of the blurb. Click the green tick when you are done.

Changing the icon

If you wish to change the tick icon to another icon, once again open the Blurb Settings window. Scroll down until you see the Image & Icon section. Open this section. By default we have it set to display an icon. You can turn off the icon altogether. Or you can change the icon by selecting another one from the options available. There is also an option to use an image instead of an icon. Click the green tick.

Changing the icon colour

If you wish to change the icon colour once again open the Blurb Settings window. Click the Design tab. You will see at the top an option to change the colour of the icon. You can also choose to make it a circle icon, which literally adds a circle around the icon. You can change the colour of the circle. Click the green tick.

Changing the text font and colour

If you wish to change the icon colour once again open the Blurb Settings window. Click the Design tab. Scroll down and you will see some design options for the text and header text. Play until you are happy witht he text. Click the green tick. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising Buttons

Customising Buttons

The buttons use the Paypal Button module. Earlier in this guide, we talked you through Connecting Your Paypal Account. So the buttons should already be connected to your account. Unfortunately, as the Button Module isn’t a native Divi module, there is no option to change the design of the buttons in the Visual Builder. Instead, to make any changes ot the button design, you will need to open the backend builder in WordPress. At the top of the page in your WordPress toolbar, click Edit Page. Scroll down until you come to the Paypal Button module. Click the settings icon (in the backend builder this icon is three horizontal lines) At the top you can make sure your button is connected to the correct Paypal Account ID. If you don’t see your Paypal account in the list, refer back to the earlier section on Connecting Your Paypal Account. Now scroll down and change your settings, including item name, price, and currency. You can also add any shipping and tax if you need to. We have already set the buttons to have a return url so they take the customer to the Thank You Page after they have paid (we will look at how to edit the thank you page later in this section). You can also change the Button text and Alignment.

Customising Button Design

To change the colour, text,a dn font of the button, click on the Design tab and change Use Custom Styles for Button to Yes. When you have finished making all your changes, click Save & Exit, then on the right hand side of the page in WordPress, click Update.

Customising Benefits

Customising Benefits

When I refer to Benefits I mean the numbered list that appears below the video. You could use this list to highlight some main benefits of what you’re selling to catch your customer’s eye. Like the features, the features are added using the Blurb Module

Changing the text

You could simply replace the text on them by opening the page and enabling Visual Builder, then highlighting the text and replacing wiht your own. Or you could open the Blurb Settings window by clicking on the settings icon that appears when you hover over the blurb (each blurb is a separate module). You will see a space to change the title and content of the blurb. Click the green tick when you are done.

Changing the icon

If you wish to change the numbers to anotehr image or icon, once again open the Blurb Settings window. Scroll down until you see the Image & Icon section. Open this section. By default we have it uploaded number images. You can turn on the icon and choose an icon to replace the image if you wish, or upload an alternative image. Click the green tick.

Changing the text font and colour

If you wish to change the icon colour once again open the Blurb Settings window. Click the Design tab. Scroll down and you will see some design options for the text and header text. Play until you are happy witht he text. Click the green tick. When you have finished making all changes to your page, remember to click the purple dock icon at the bottom of the page and save all your changes!

Customising FAQs

Customising FAQs

Input the main text content for your module here.

Search Engine Optimisation

To manage your Search Engine Optimisation, we have installed the popular Yoast SEO plugin for you. Yoast provide a great overview of all the options, which you can see here: https://kb.yoast.com/kb/configuration-guide-for-yoast-seo/ To learn more about how to optimise your SEO, Yoast have provided a wonderful tutorial which you can follow along should you wish to here: https://yoast.com/wordpress-seo/

Basic Settings

To configure your basic YOAST SEO settings, in your WordPress dashboard, go to SEO in the left menu. The easiest way is to run the Configuration Wizard by clicking on the Run the Configuration Wizard button. The wizard will open up and is simple to follow along, following the prompts and putting in the information asked for you. When you reach the end, close the wizard, and all your basic settings will be applied for you.

Optimising your posts and pages

Now when you edit a page or post through your wordpress dashboard, you will see a Yoast section near the top of the page. This section will score your page Readability, and give you tips for improving it. It also shows you a snippet preview of how search engines see your site, and allows you to choose a focus keyword for the page.

Making your Site Visible to Search Engines

When you are ready to go live you will need to make sure your site is visible to be indexed by search engines, which it is not while in development mode. Go to Settings > General and uncheck the Discourage Search Engines checkbox under Search Engine Visibility

WordPress Statistics

We have installed a WordPress Statistics plugin for you to keep an eye on your site statistics. To view your statistics, go to Statistics in the left menu in your WordPress dashboard. You will see an overview of visits and visitors in the last 20 days. If you scroll down the page you can see a breakdown of several interesting statistics, including which browsers your visitors use, where they come from, and which website refereed them (Facebook, or Google, for example). By using the options in the left menu, you can see even more detailed statistics about your visitors.

Managing Updates

It’s vital to keep your WordPress site up to date to avoid hacking attempts. Old plugins and themes can make your site vulnerable – new versions of plugins and themes often patch known problems which hackers can exploit. Also, if you are using outdated plugins, they can often stop working with newer versions of WordPress. If you don’t wish to take care of this yourself, hop over to our Facebook group and ask us about our monthly web master services. However, if you are managing your own WordPress site, make sure you login every couple of days and check for outdated plugins, themes, and even WordPress itself. You can check for available updates in WordPress by clicking Dashboard > Updates. Then work through the list of updates available, checking the box and clicking Update.

Managing Backups

In order for you to be able to take backups of your site, we have installed Updraft Backup plugin for you. To access all your settings for this plugin, in your WordPress dashboard, go to Settings > UpDraft Backups There are various options including where to store your backups – you can connect to a number of services such as Dropbox. You can also set up an automatic backup schedule.

Below is a guide on how to schedule your backups and how to connect them to your preferred method of storage:

• On the Left side of the screen, highlight settings and go down to ‘UpdraftPlus Backups’
• This will take you to the ‘Current Status’ tab in the tabs along the top go to Settings
• Towards the top of the page you will be able to pick to select how often backups are taken
  as well as how many you want to keep saved at any one time.
• Below this you will see a group of icons for different storage solutions. Select your preferred choice(Google Drive and Dropbox are both free and reliable options).
• Scroll down to save changes and the page will refresh.
• There will now be a popup on the screen follow the link and then proceed to enter your information.
• Once you have entered your information you will be taken to the next screen click Allow.
• You will then be taken to a final page, on this page click Complete Setup.

Managing Security

Security is something you should be very away of with your WordPress site. WordPress is open source software, meaning it’s developed not just by one group or company, but by many contributors. It is constantly expanding and as explained in the Updates section, weaknesses can often be found by hackers. To keep your site secure, we have installed the iThemes Security plugin for you. This plugin works to keep out known hackers and works in the background, blocking dodgy login attempts to your site. We have already set up the basic settings for you, but if you wish to know more and tweak the settings, follow the guide here: https://www.elegantthemes.com/blog/resources/ithemes-security-plugin Change the notification email In your WordPress Dashboard go to Security > Settings. Click Global Settings. Scroll down and change your email address in the two places you see where it asks for your email address. We have set it up to send you a digest email to summarise what actions the plugin has taken to protect your site.

Adding Your Facebook Pixel ID

If you are running Facebook ads to drive potential customers to your site and would like to track leads and sales using Facebook Pixel, we have it all set up and ready for you. It is controlled using a plugin called PixelYourSite In the Wordpress dashboard, click on PixelYourSite in the left menu. On the first page that opens, scroll down slightly and you will see a space to enter your Facebook Pixel ID If you don’t know your Pixel ID, click this link (make sure you are logged into Facebook) and you should see it in the top left corner: https://www.facebook.com/ads/manager/pixel/facebook_pixel Enter it in the space and click Save

Managing the Facebook Pixel Events

We have already added two Events for you: 1) A ‘Lead’ event which is tracked using the url for the sales page 2) A ‘Purchase’ event which is tracked using the url for the thank you page As long as you direct your customers back to the thank you page after they purchase what you are selling on your sales page (see the Sales Page section of this guide), it will all work. You will need to change the value on the Purchase event to match the price of your item. To do this: In PixelYourSite click on the Events tab Scroll down and next to the Purchase event click Edit Change the Value to match the price of the item you sold through your sales page If you wish to add more sales pages and track more funnels, you can create new lead and purchase events each time linked to your new sales and thank you pages. For mor detailed information and to find out how to track more complex events, such as button clicks etc, view the PixelYourSite guide: http://www.pixelyoursite.com/facebook-pixel-plugin-help