How to make Hestia contact us section appear like demo

In case you don't have a CSS plugin, we advise you install    Advanced CSS Editor plugin and follow the instructions. In Appearance ->Customize ->Advanced CSS Editor add the following code.

If you are using WordPress 4.7 or later you could add the code to Appearance->Customize->Additional CSS.

To add the contact sections like our demo go to Appearance->Customize->Front Page Sections->Contact and paste the following code:

<div class="info info-horizontal">
<div class="icon icon-primary"><i class="fa fa-map-marker"></i></div>
<div class="description">
<h4 class="info-title">I am a title</h4>
<p>I am a sentence</p>
</div>
</div>

You need to paste this code for every section of text you want to add to the area example:

<div class="info info-horizontal">
<div class="icon icon-primary"><i class="fa fa-map-marker"></i></div>
<div class="description">
<h4 class="info-title">I am a title</h4>
<p>I am a sentence</p>
</div>
</div>

<div class="info info-horizontal">
<div class="icon icon-primary"><i class="fa fa-map-pin"></i></div>
<div class="description">
<h4 class="info-title">I am a title 2</h4>
<p>I am a sentence 2</p>
</div>
</div>

<div class="info info-horizontal">
<div class="icon icon-primary"><i class="fa fa-street-view"></i></div>
<div class="description">
<h4 class="info-title">I am a title 3</h4>
<p>I am a sentence 3</p>
</div>
</div>

For more icons you could visit  Font Awesome, find the icon you want and then copy this part of the code:

Replace the following part of the snippet above with the newly copied text:

Before:
<div class="icon icon-primary"><i class="fa fa-street-view"></i></div>
After:
<div class="icon icon-primary"><i class="fa fa-map-pin"></i></div>

That's it! Save and publish your changes.