H1 HEADING CENTRED
This is your introduction paragraph with the most important keywords associated with the business website. It should be fairly short but should encapsulate who we are, what we do, and WHERE we do it.
H2 HEADING – IMAGES AND TEXT
This section has 2 equal sized images and text. Edit the row to change the proportion of each column. This text can be centred or justified to suit the amount of text there is. Images can be resized for mobile and tablet if needed. Text can also be changed in the editor for single words or phrases, or in the Design tab for all text in the module.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
TASK:
Create or modify a row so that it has an image in the left column and text in the right column. Then make another one, the other way around. The column containing the image should be portrait.
Note: Columns will automically stack below each other in mobile. To swap the image and text around in mobile (if you need to) requires some extra coding. We use a plugin called Divi Toolbox to do this. Divi Toolbox settings can be found in the Menu under “Divi”. (This is fairly advanced)
BLURB 1 TITLE
A blurb consists of an image or icon at the top, a title below it, and this text below the title. It is usually a short description of one of the company’s services and is clickable to another page (Services, About, Contact, etc). The link is set in the “link” menu below. You can also add a button module below:
BLURB 2 TITLE
This blurb uses an icon instead of a square image. The icon can also be positioned on the left to look like bullets.
BLURB 2 TITLE
This blurb uses an icon instead of a square image. The icon can also be positioned on the left to look like bullets.
BLURB 3 TITLE
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. Add more text to show how it aligns…or doesn’t.
TASK:
See if you can figure out how to correct the alignment of the blurbs above so that the grey backgrounds are all lined up with the longest one.
Hint: It’s a setting in the ROW.
Note: the grey backgrounds are created in the row, not the blurbs, for precisely this reason.
TABS
This is a TAB. Users click on the heading to open the tab and read the content. Tabs are great for multiple text blocks that should not be displayed at the same time. You can fit a lot of text into a small area by using tabs.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
ACCORDIONS
ACCORDION 1
Accordions are great for FAQs. You can’t close them using the arrow icon you used to open them. They close automatically when you open one of the others in the set.
Accordion 1 is open by default. There is a trick to having them all closed by default using a line of CSS code in the first accordion which hides it.
Use the Design tab to change colours, spacing, fonts, etc. Remember to check it on mobile too.
ACCORDION 1A
Accordions are great for FAQs. You can’t close them using the arrow icon you used to open them. They close automatically when you open one of the others in the set.
Accordion 1 is open by default. There is a trick to having them all closed by default using a line of CSS code in the first accordion which hides it.
ACCORDION 2
Each accordion should ideally have text only in it. You can use the ADD MEDIA button to incorporate an image within the text if need be. Remember to set the alignment of the images – either left or right to wrap the text around it. Or “None” to have the image on it’s own in a row.
ACCORDION 3
Each accordion should ideally have text only in it. You can use the ADD MEDIA button to incorporate an image within the text if need be. Remember to set the alignment of the images – either left or right to wrap the text around it. Or “None” to have the image on it’s own in a row.
CALL TO ACTION
CALL TO ACTION MODULE
A CTA module is similar to a blurb but without an image. Instead it has a button at the bottom. You can add an image here if you like.
CALL TO ACTION MODULE
A CTA module is similar to a blurb but without an image. Instead it has a button at the bottom. You can add an image here if you like.
CALL TO ACTION MODULE
A CTA module is similar to a blurb but without an image. Instead it has a button at the bottom. You can add an image here if you like.
The row above has “Equalize column heights” activated, but you can see they are not. See if you can figure out why.
GOOGLE MAP
To add a google map to a web page, go to Google Maps and search for the address or place you want. Then click “Share”. In the dialog box that opens, click on the “Embed a map” link at the top. Then click “COPY HTML”.
Next, create a “CODE” module and paste the embed code into it. Find the “width” value in the code and replace with 100% so that it fills the column horizontally. The height can vary based on your preference or how much surrounding terrain you want visible on the map. Usually 450 pixels is enough.
The map below shows the V&A Waterfront in Cape Town. Try changing it to another location by following the steps above.
STATS AND COUNTERS
%
Satisfied Clients (Circle Counter)
- Bar Counter 1 50%
- Bar Counter 2 30%
- Bar Counter 3 20%
Countdown Timer to Spring
Day(s)
:
Hour(s)
:
Minute(s)
:
Second(s)