HOW TO USE DIVI

Divi has become the easiest way to update a WordPress website. It’s close to the drag and drop method we’ve all been waiting for.

Simply log in, look at your website like a regular viewer, and start changing text, layout, and images in an intuitive way.

Below are some basic video and text instructions on how to use this system. If you need more, they are all over the internet – either on the official tutorials or Google your question (add “Divi theme” to your search query). 

NB. Despite what some tutorials say, you don’t need to pay for an expensive Divi licence anywhere else to use your Artist Website. It is included free with any hosted Artist Website.

 

Site Basics

To Start (and Saving Your Work)

How to start editing your website:

 

1. Log in to your website, by clicking the “Login” button at the bottom of your website, and entering your username and password (email me if you have forgotten this)

2. Go to YourWebsiteName.com and view your website normally – just like anyone else would

3. Navigate to the page you would like to edit

3. Click on “Enable Visual Builder“, at the top centre of your page. Only you can see this button.

You can see a user clicking this button here:

 

4. You can now edit your website.

 

Important – How to Save Your Progress

This is essential every time you change something on your website, and can be seen at the end of the above video

1. Click on the three purple dots at the bottom middle of your screen

2. Click Save (the green button on the bottom right of your screen)

 

 

 

Working With Text

Changing Text (Easy)

You can change your text in a very easy way.

In this video you can see me highlight and double click the text, then change it just via typing.

I also change some of the text to italics, by clicking the white on grey “i” button.

I also save my work at the end.

Changing Text (Advanced)

You can also change your text in a more advanced way – eg. if you’d like to change the text color, spacingsize – or just about anything else.

In this video you can see me:

1. Click the grey “cog” symbol that controls the text area, to show extra controls. 

2. Click the “visual” tab, to change text in an easy way

3. Change text by typing in the text box

4. Highlight text

5. Centre the text (and change back to left hand side justify)

6. Change the text to bold, and back again

7. Click the purple “design” tab – to get even more controls

8. Under “Text“, change the text size, text letter spacing, and text line height

9. Change the text color (two different ways)

10. Click the green check mark “done” button

I also save my work at the end.

 

 

Working With Images

Changing Images

1. Hover over an image and click onthe grey cog icon

2. You can also click the grey “+” icon if you want to add a new image in a new place

3. In the popup box, click the cog icon over the image

4. Select “Upload Files” to upload a new image from your computer. Or click “Media Library” to add an image you’ve already uploaded before

5. Click “Upload an Image

6. You can do all sorts of things with the image. In the video I change the URL or page address people go to when they click on the image. You can get this address from your browser bar when you look at your website.

7. You can also select “Open in Lightbox” if you’d like the image to open in its own popup box.

8. Click the green check button

9. Click the three purple dots and click Save to save your work

(There is another way to change image galleries. That tutorial is coming soon).

Reordering Gallery Images (Grids)

1. Move your mouse until you see the grey cog icon over your gallery

2. When you click it, you will see the editing popup appear

3. Drag and drop the images in the order you like

4. You can also delete images from your gallery (just click the trashcan icon over the image)

5. You can also add images to your gallery (just click the plus icon at the end of a gallery)

6. Click the green check mark to close the editing popup

7. Click Save to save your work

Changing Work Titles

1. See the title that currently exists (here it’s “Title”, revealed by clicking the image)

2. Move your mouse around until you see the gallery’s grey cog icon, and click on it

3. Click on the plus icon to see all the images in your media library

4. Fill in the Title section with your new title. Here I have called it “New Title Here”

5. Note – you do not need to save your new title. It will be saved automatically. You also don’t have to click “Select”. Simply wait a few seconds and it will be saved.

6. Close the popup box by clicking the x at the top

7. Click the green check mark to close your edit box. Click the green Save button to save your work

8. Your new title may not be visible yet. If it isn’t, reload the page to see the new title on your website

 

 

Tweaking Your Layout and Design

Changing White Space

Different adjustments are possible, for desktop, tablet, and smartphone views.

 

1. Click and wiggle your cursor until you see the green box around your content appear

2. Drag and drop the area you wish to increase or decrease. (Lining up text and images is usually the best policy. Don’t be too ashamed to use a ruler over your screen!)

3. If you would like to change your layout on mobile or tablets, click the three purple dots

4. Then click the tablet, smartphone or desktop icon to see a live preview and make changes – with changes visible just on those platforms

5. Click the green Save button to save your work

 

 

Any Further Questions?

If you can’t find out how to do something on your Artist Website in any of the above, feel free to suggest a new tutorial, or ask me to do it for you.

3 + 13 =