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/Video:
Upload a image or a video you want to use in this section
Image/video overlay opacity:
Set the opacity of the overlay.
0% is no overlay
100% is full color overlay
Width:
Select if you want to the section image/video to be boxed width or full width.
Height:
Controls the section height from small to extra large. If you want to have a custom height enable the checkbox and adjust the height using the slider.
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)
Background:
These settings control the background color showing underneath the section:
Background Color scheme:
Select the color scheme for the background.
Background color opacity:
Control the background opacity using the range slider.
Background position:
Control the background alignment left/right.
Background color width:
Control the width of background showing in the rich text banner.
Background color height:
Control the height of background showing in the rich text banner.
Mobile layout:
If you want to have a different image than desktop or you can have a video on desktop and a image on mobile.
In mobile layout you have options to control the background that is showing under the section.
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
- Text field
- 3x Information
- Buttons
Each of these elements can further be adjusted/customized, feel free to check all of them and if you have any questions click on the chat icon which you can find on the bottom right of your screens.