How to Work on Your Website

1) You would have been given the login URL, a username and a password. Log into your website. If you have forgotten your password, click on ‘Lost your password?’ on the login page to reset. A link to create a new password will be emailed to you.

2) Once you’ve successfully logged in, you will arrive at the ‘Dashboard’. It looks similar to this:
Website Dashboard

3) Right on the very top left hand corner, look for the ‘home (house)’ icon with the name of your website next to it.

4) Hover your mouse on the HOME icon and you will see ‘VISIT SITE’. Click on VISIT SITE.
visit site

5) Your Home page will appear, exactly as how visitors would see it, except, you now have a black task bar on the very top of your screen. If this is the page you want to edit, that’s fine. If it’s another page that you want to work on, then navigate to that page using the website menu, just as you would when visiting the site.

6) When you’re on the page you want to work on, go to the black task bar on the top. What you have on the task bar depends on the theme your website is using.

If your website uses
the DIVI theme click here
X theme click here

A website using the DIVI theme:

Your taskbar will look similar to this:
Taskbar on a WordPress website
You have the option to either click on EDIT PAGE or ENABLE VISUAL BUILDER.
Clicking on ‘EDIT PAGE‘ will give you a simple, wireframe page editor to work on.
Wire frame editor of Divi theme
The blue bar contains settings for the column, green for the row and grey for the module. Clicking on the settings (3-horizontal-lines) icon will enable you to edit the settings for the column, row or module.
Divi settings icon
You will most probably need to do your editing in the modules only. So click on the grey settings icon. The module will open, giving you the ability to make changes. If it is a ‘text module’, you can either work on it using the ‘visual’ or ‘text’ mode. This is in ‘visual’ mode:
divi text module in visual mode

This is in ‘text’ mode. Here you can see the codes in HTML or CSS
Divi text module

Edit your text or images. Then click ‘Preview Changes’ in the right hand panel, if you wish to preview your work. A new tab will open to show your edited page. Click UPDATE when you are happy with your changes and are ready for the changes to appear on the frontend.

Clicking on ‘ENABLE VISUAL BUILDER‘ will give you a what-you-see-is-what-you-get builder. You see the page as it looks on the frontend but when you hover on the various parts of the page, the settings for each section (blue), row (green) and module (grey) will appear.
divi visual builder

You will most probably need to work on the modules only. To open a module, click on the grey ‘cogwheel’.
divi settings icon

The module setting will open. The image below shows the text module, enabling you to edit the text or any images within.
divi text module settings
Again, you can work in either the ‘visual’ or ‘text’ mode. Make your changes and click the green ‘tick/check’ to save your work.

Alternatively, you can simply position your house on any part of the page you want to edit and click on it. Then edit the content. Changes will appear live on the page so you can see exactly how it will look like on the frontend.

When you are satisfied with your work, click on the purple circle with 3 dots on the bottom of the page:
divi purple circle
and click on the green SAVE button. Your work will be saved and will appear on the frontend.

Give yourself a pat on the back :).

A website using the X theme:

You would have followed the instructions from 1 – 6 above. Your black taskbar on the top of the page will look similar to this:
xtheme taskbar of page
Click on EDIT PAGE on the black taskbar. This will load:
xtheme showing cornerstone button
Click on EDIT WITH CORNERSTONE.

The page will load with Cornerstone functionalities enabling you to do your edits.
page loaded on cornerstone of x theme
Clicking on the part of the page you want to edit will open up the settings for that element for you to make changes to.
editing elements on x theme webpage

Click on the CONTENT box. Edit your page. If it’s a ‘text’ element, the settings will load on HTML mode.
xtheme text element
Click on the ‘T’ if you’d rather use ‘Rich Text’ to make your edits. Changes will appear live as how it would look on the frontend. Or, click on the PREVIEW button to view the whole page on a new tab.
x theme preview

When you’re happy with your work and changes, click SAVE and visitors will see your edited page on the frontend.
x theme save button

Give yourself a pat on the back :).

Please remember that if all this is too much for you, I am available to do the work for you (hourly rate applies). Just email me.

VIEW MORE