3 squares on home page

How can I replace those 3 squares with images of the same size but keep the formatting? Everytime I try to change the 3 squares, I lose the formatting.

Link to homepage http://www.drfaubel.com

Please disable tinyMCE editor in global configuration (change editor to "editor - none").
You might also find some help in this article:
https://www.gavick.com/documentation/jo ... ml-filters

I've done that but those squares are coded differently than just pictures.

This is the code

<div class="gkFeature">
<div class="gkCrop">Easy to customize</div>
<h2>Easy to customize</h2>
<small>Nunc a urna sed neque fermentum pharetra. Aliquam suscipit purus nisi.</small></div>
<div class="gkFeature">
<div class="gkHTML5">HTML5 &amp; CSS3</div>
<h2>HTML5 &amp; CSS3</h2>
<small>Nunc a urna sed neque fermentum pharetra. Aliquam suscipit purus nisi.</small></div>
<div class="gkFeature">
<div class="gkResponsiveDesign">Responsive design</div>
<h2>Responsive design</h2>
<small>Nunc a urna sed neque fermentum pharetra. Aliquam suscipit purus nisi.</small></div>

How would I edit this to insert images in the place of the squares?

There are no image links in the original code and when I insert one, it breaks the formatting. I have no code editor enabled. Please help.

They are made with a technique called sprites.
You can edit this file:
templates/gk_creative/images/features_icons.png
and replace existing 3 icons with your new ones. It should do the trick. Just keep them where they are (new icons should be centered exactly in same spot where current ones are centered.

I do not want icons... I want regular images of the same size. Can I just replace the png with an image and it works? Thanks in advance.

fixed it.. just disabled that module and added another module in top2 position then moved some stuff around.

Ok, I'm glad you could solve it out on your own.
If you have any additional questions regarding this topic, please let me know.