You can display an image on a side and some text on the other side, with the background color of your choice and an optionnal shadow inside the image. It's easy and there's 148 colors available for the background and the shadow.
The result is responsive. I recommend you to resize the window of your browser to look the different results.
You have 2 possibilities :
- 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 2 possibilities, the HTML code is the same but the result is different.
In a module, the width of each part is 50%. Under 980 pixels, the text is under the image. 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.
Note 2 : Shadow around the images : you can add an internal shadow with the code "shadow-image-COLOR" (replace color by the your choice). See examples below.
Image on the left side with a brown background
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 left side with a brown background and black shadow inside the image
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 shadow-image-black">
<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 with a ligthtslategrey background
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 right side with a ligthtslategrey background and a ligthtslategrey shadow around the image
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 shadow-image-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>