Adding and Editing Images

Note: Please make sure you’ve read the Page Builder overview before viewing the guide below. 

1. Log in

First log into your website by going to your domain name and adding /login to then end. An example would be: http://yourdomainname.co.za/login

Enter the username and password supplied to you by Web Africa and click Log In. Make sure you use the correct username and password.

2. Locate the page you want to edit

Once you’re logged in to your dashboard, click on the ‘Pages‘ link in the left hand navigation menu.

3. Hover over the Page you wish to edit and click ‘edit’

This will take you into the page editor.

4. Locate the module in the visual layout which contains your image. In most instances it will either be named Blurb or a short description of the module section

Editing the Blurb Module

Click on the 3 horizontal lines to open the module settings as per the image below:

Editing 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. Blurb modules can be placed in any column that you create.

Editing Blurb Module

Title – Give a title to your blurb that will appear above the body text of the blurb in a bold text style. The URL option below the Title Field will allow you to make your Title a hyperlink.

URL – Place a valid web URL in this field to turn your Blurb Title into a link. Leaving this field blank will simply leave your title as a static element.

URL Opens – Here you can choose whether or not your link opens in a new window.

Use Icon – When using Blurbs, you can choose to either use an Icon or and Image with your text. If you select “yes” for the “Use Icon” option, then you will be presented with the following options to customise your icon. If you do not choose to use an Icon, then you will be prompted to upload an image instead.

IconIf you chose “yes” for the “Use Icon” setting, then this option will appear. This options presents you with a list of available icons that you can use with your blurb text. Simply click on the con that you would like to use and it will appear in your blurb.

Icon ColourIf you chose “yes” for the “Use Icon” setting, then this option will appear. This option allows you to customise the colour of your Icon. By default, the icons are set to your theme accent colour.

Circle IconIf you chose “yes” for the “Use Icon” setting, then this option will appear. This options allows you to place your icon within a coloured circle. If you select “yes” for this setting, then you will be presented with additional options for customising your circle colour and border.

Circle ColourIf you chose “yes” for the “Circle Icon” setting, then this option will appear. Here you can pick a colour to use for your circle. This colour is independent from your Icon colour selected earlier. You icon, in it’s colour, will appear inside this a circle with the colour you select here.

Show Circle BorderIf you chose “yes” for the “Circle Icon” setting, then this option will appear. This option allows you to turn on a border for your circle. If selected, an additional option will appear to select your border colour.

Circle Border ColourIf you chose “yes” for the “Show Circle Border” setting, then this option will appear. Here you can adjust the colour of the circle border.

Image/Icon Placement – Here you can choose where you would like your image/icon to be placed. It can either appear above the text, or to the left of the text. Placing the image/icon to the left of your text will cause the image to be smaller than if it were placed at the top.

Image/Icon Animation – This controls the direction of the lazy-loading animation.

ImageIf you did not choose to use an Icon, then this setting will appear. Place a valid image url here, or choose/upload an image via the WordPress Media Library. Blurb Images will always appeared centered within their columns and will span the full width of your column up to 550px. However, your image will never scale larger than its original upload size. The height of the blurb image is determined by the aspect ratio of your original image, so making all of your blurb images the same height is a good idea if you are placing them side by side.

Image Alt TextIf you did not choose to use an Icon, then this setting will appear. Alternate text provides any necessary information if the image does not load, appear properly, or in any other situation where a user cannot view the image. It also allows the image to be read and recognised by search engines.

Text Colour – If your blurb is being placed onto a dark background the Text Colour should be set to ‘Dark’. Visa versa, if your blurb is being placed onto a light background, the Text Colour should be set to ‘Light’.

Text Orientation – This dropdown menu allows you to specify the orientation of your text to be Left Justified, Centered, or Right Justified.

Content – This field is where you can enter the body content of your blurb. Blurb Text will also span the full width of your column up to 550px.

Admin Label – By default, your blurb module will appear with a label that reads ‘Blurb’ in the builder. The Admin Label allows you to change this label for easy identification.

Editing the Image Module Settings

Image Module Settings: 

Image Module

Image URL – Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image.

Image ALT Text – Alternate text provides any necessary information if the image does not load, appear properly, or in any other situation where a user cannot view the image. It also allows the image to be read and recognised by search engines.

Lightbox – Here you can choose whether or not your image will open in a Lightbox when clicked. If enabled, then your image will “zoom in” to their full size when clicked inside a modal window. This is a great feature for portfolios.

Link URL – Place a valid web URL in this field to turn your Image into a link. Leaving this field blank will simply leave your image as a static element.

Animation – Use this dropdown menu to specify the lazy-loading animation for your image. You can choose for your image to fade in from the right, left, bottom, or top.

Admin Label – By default, your image module will appear with a label that reads ‘Image’ in the builder. The Admin Label allows you to change this label for easy identification.