The Image with text section makes it possible for you to add a nice section with a title, text and button block,
To activate this section you first have to add the section to your page. This can be done in a few small steps.
1) Click on 'add section' which can be found in your left sidebar
2) Scroll down, or search for 'Image with text', then click on 'Image with text'
3) Done, your 'Image with text' section is added.
General settings
The general settings contains the settings for the styling and layout of the 'Rich Text' section.
Simply click on the 'section' to open the settings.
On the right sidebar, the following settings will show
Image:
Upload the image you want to use in this section
Image overlay opacity:
Set the opacity of the overlay.
0% is no overlay
100% is full color overlay
Color scheme:
Select the color scheme for the overlay color. You can select the color pallets here.
Layout:
As stated in the beginning, the section comes with 2 layouts.
Image left, content right:
The image will show on the left, your text and button show on the right.
Image right, content left:
The image will show on the right, your text and button show on the left.
Content position:
Set the position of the content within the image block (text + button)
Spacing
Bottom spacing desktop/mobile:
Set the spacing on the bottom for desktop and mobile.
That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.
How to configure the image with text content?
By default, there are 6 elements added, you can edit them, remove them or add more elements.
The following elements are added:
- Title
- Textfield
- 3x Information
- Buttons
1. Editting the image with text contents
To edit the elements you simply click on the element you want to edit in your sidebar on the left of your screen.
1.1 Title/Heading block
After you clicked on the title block, on the right of your screen the following sidebar will open.
Heading:
This will be the heading of the Rich Text section.
Heading size:
Select the size of the heading from a range of small to extra large. When you choose for "Extra large", the size of the body text in this section will also be a bit larger than normal. The heading size you choose here is only applied to desktop view, you can customize the mobile heading size globally in the general theme settings under "Typography".
1.2 Text block
After you clicked on the text block, on the right of your screen the following sidebar will open.
Text:
This will be the text that will be shown in this section.
1.3 Button block
After you clicked on the button block, on the right of your screen the following sidebar will open.
First button label:
Fill in the name for the first button, for example: 'Read more'
First button link:
Here you can fill in the link to a page where the first button will redirect to when clicked on.
Second button label:
Fill in the name for the second button, for example: 'Read more'
Second button link:
Here you can fill in the link to a page where the second button will redirect to when clicked on.
Button color scheme:
Select the color scheme for the buttons. You can select the color pallets here.
Show links instead of buttons:
Check this box if you don't want buttons to show, but only clickable texts.
1.4 Information
After you clicked on the Information block, on the right of your screen the following sidebar will open.
Information:
Fill in a some text, this will be shown with a checkmark in front of it. Tip: when you add multiple Information blocks below each other it will create a nice list of USP's.
2. How to remove a part of the section?
Don't want to use a certain element in the Rich Text section? Just remove them!
To remove a block you simply click on the block you want to remove in your sidebar on the left of your screen.
After you clicked the block, on the right of your screen the sidebar will open.
On the bottom left of this sidebar, the following button 'Remove block' shows.
Simply click on this button and your block will be deleted.