You can display an image on a side and some text on the other side, with the background color of your choice. It's easy and there's 148 background colors available.
The result is responsive. I recommend you to resize the window of your browser to look the different results.
You have 3 possibilities :
- You want use all the width of your browser (if Wide layout) or all the width of your website (if Boxed layout). To obtain that, you must create a new module with the type Custom HTML. Choose the module position "image-text-top" or "image-text-bottom" and paste the HTML code inside.
- You want use only the width of your website and display image and text inside a special area above or under your article. To obtain that, you must create a new module with the type Custom HTML. Choose the module position "top" or "bottom" and paste the HTML code inside.
- You want display the image and the text in an article. To obtain that, edit your article and paste the HTML code inside.
Important : for these 3 possibilities, the HTML code is the same but the result is different.
In a module, the width of each part is 50% and there is a border above and under the title H2 (only for "image-text-top" and "image-text-bottom"). Under 980 pixels, the text is under the image and the border disappear. The min height is the same in an article (read below). In Template manager, you can adjust the font for this part.
If you display the code in an article, this is the result :
- Under 980 pixels, the image and the text are inline.
- Between 980 and 1100 pixels, image and text are on a side. And the width of each of them is 50% with a min heigth = 50% of the viewport.
- Between 1100 and 1300 pixels. Same thing with a width = 58% for the image and a min-height = 450pixels
- Above 1300 pixels. Same thing with a width = 66.66% for the image and a min-height = 400pixels
Procedure
Edit your module or your article and disable the wysiwyg editor. Then, paste the HTML code and change the text and the path of your image.
Important : In each example, I write the name of each image (mountain or bridge). This text is important because if there's nothing, the wysiwyg editor can't save this part. Of course, you can replace this text by the word of your choice.
Note : you can paste several times the code if you want display several images.
Image on the left side
Responsive design
A single design for all devices : mobiles, laptop, desktop ... This design should automatically adjust with your screen resolution.
Make a test : Resize your browser !
<div class="image-text-left color-brown">
<a class="image-text-image" style="background-image:url(images/YOUR-IMAGE.jpg);" href="URL OF THE LINK" >mountain</a>
<div class="image-text-column">
<div>
<h2>Your Title<h2>
<p>Your text here<p>
<p>
<a href="URL OF THE LINK" >Read More</a>
<p>
</div>
</div>
</div>
Image on the right side
Typography
Large choice of typography and layout with Bootstrap, Font awesome, multi-columns, images effects, additionnal menu, list, testimonials, ....
the possibilities are impressive !
<div class="image-text-right color-lightslategrey">
<a class="image-text-image" style="background-image:url(images/YOUR-IMAGE.jpg);" href="URL OF THE LINK" >bridge</a>
<div class="image-text-column">
<div>
<h2>Your Title<h2>
<p>Your text here<p>
<p>
<a href="URL OF THE LINK" >Read More</a>
<p>
</div>
</div>
</div>
Image on the left side without link : replace "a" by "span"
Responsive design
A single design for all devices : mobiles, laptop, desktop ... This design should automatically adjust with your screen resolution.
Make a test : Resize your browser !
<div class="image-text-left color-brown">
<span class="image-text-image" style="background-image:url(images/YOUR-IMAGE.jpg);" >mountain</span>
<div class="image-text-column">
<div>
<h2>Your Title<h2>
<p>Your text here<p>
</div>
</div>
</div>