Use this tool to find block ID.

Icon Boxes 01

Demo

Inspiration: Envato Elements

How to

1. Add Markdown Block for 3 boxes

Here I used SVG Code Icons. You can find other icons at svgicons.sparkk.fr

Box 1

<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M17.659,9.597h-1.224c-0.199-3.235-2.797-5.833-6.032-6.033V2.341c0-0.222-0.182-0.403-0.403-0.403S9.597,2.119,9.597,2.341v1.223c-3.235,0.2-5.833,2.798-6.033,6.033H2.341c-0.222,0-0.403,0.182-0.403,0.403s0.182,0.403,0.403,0.403h1.223c0.2,3.235,2.798,5.833,6.033,6.032v1.224c0,0.222,0.182,0.403,0.403,0.403s0.403-0.182,0.403-0.403v-1.224c3.235-0.199,5.833-2.797,6.032-6.032h1.224c0.222,0,0.403-0.182,0.403-0.403S17.881,9.597,17.659,9.597 M14.435,10.403h1.193c-0.198,2.791-2.434,5.026-5.225,5.225v-1.193c0-0.222-0.182-0.403-0.403-0.403s-0.403,0.182-0.403,0.403v1.193c-2.792-0.198-5.027-2.434-5.224-5.225h1.193c0.222,0,0.403-0.182,0.403-0.403S5.787,9.597,5.565,9.597H4.373C4.57,6.805,6.805,4.57,9.597,4.373v1.193c0,0.222,0.182,0.403,0.403,0.403s0.403-0.182,0.403-0.403V4.373c2.791,0.197,5.026,2.433,5.225,5.224h-1.193c-0.222,0-0.403,0.182-0.403,0.403S14.213,10.403,14.435,10.403"></path>
</svg>

#### Facebook Ads

Life finds a way. Life finds a way. God creates dinosaurs

Box 2

<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M18.303,4.742l-1.454-1.455c-0.171-0.171-0.475-0.171-0.646,0l-3.061,3.064H2.019c-0.251,0-0.457,0.205-0.457,0.456v9.578c0,0.251,0.206,0.456,0.457,0.456h13.683c0.252,0,0.457-0.205,0.457-0.456V7.533l2.144-2.146C18.481,5.208,18.483,4.917,18.303,4.742 M15.258,15.929H2.476V7.263h9.754L9.695,9.792c-0.057,0.057-0.101,0.13-0.119,0.212L9.18,11.36h-3.98c-0.251,0-0.457,0.205-0.457,0.456c0,0.253,0.205,0.456,0.457,0.456h4.336c0.023,0,0.899,0.02,1.498-0.127c0.312-0.077,0.55-0.137,0.55-0.137c0.08-0.018,0.155-0.059,0.212-0.118l3.463-3.443V15.929z M11.241,11.156l-1.078,0.267l0.267-1.076l6.097-6.091l0.808,0.808L11.241,11.156z"></path>
</svg>

#### Web Design

Life finds a way. Life finds a way. God creates dinosaurs

Box 3

<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M14.52,2.469H5.482c-1.664,0-3.013,1.349-3.013,3.013v9.038c0,1.662,1.349,3.012,3.013,3.012h9.038c1.662,0,3.012-1.35,3.012-3.012V5.482C17.531,3.818,16.182,2.469,14.52,2.469 M13.012,4.729h2.26v2.259h-2.26V4.729z M10,6.988c1.664,0,3.012,1.349,3.012,3.012c0,1.664-1.348,3.013-3.012,3.013c-1.664,0-3.012-1.349-3.012-3.013C6.988,8.336,8.336,6.988,10,6.988 M16.025,14.52c0,0.831-0.676,1.506-1.506,1.506H5.482c-0.831,0-1.507-0.675-1.507-1.506V9.247h1.583C5.516,9.494,5.482,9.743,5.482,10c0,2.497,2.023,4.52,4.518,4.52c2.494,0,4.52-2.022,4.52-4.52c0-0.257-0.035-0.506-0.076-0.753h1.582V14.52z"></path>
</svg>

#### Instagram Ads

Life finds a way. Life finds a way. God creates dinosaurs

2. Add Code Bock & Insert CSS code

<style>
  /* Icons size */
.svg-icon {
  width: 5em;
  height: 5em;
}
/* Icons color */
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #4691f6;
}
.svg-icon circle {
  stroke: #4691f6;
  stroke-width: 1;
}
  /* Align left icons */
  .markdown-block svg {
    float: left;
    margin-right: 1em;
}
  /* Space icon - heading - text */
  .markdown-block h4 {
    margin-top: 1px;
    margin-bottom: 1px;
}
</style>

Icon Boxes 02.

Demo

Inspiration: Envato Elements

How to

1. Same as Icon Boxes 01

2. Add Code Block – Paste CSS code

<style>
  /* Icons size */
.svg-icon {
  width: 5em;
  height: 5em;
}
/* Icons color */
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #4691f6;
}
.svg-icon circle {
  stroke: #4691f6;
  stroke-width: 1;
}
  /* Center all */
  .markdown-block * {
  	text-align: center;
  }
  /* Space icon - heading - text */
  .markdown-block h4 {
    margin-top: 1px;
    margin-bottom: 1px;
}
</style>

Icon Boxes 03. 

Demo

Inspiration: CreativeMarket

How to

1. Same as Icon Boxes 01

2. Insert Code Block > Paste below code

<style>
  /* Icons size */
.svg-icon {
  width: 5em;
  height: 5em;
}
/* Icons color */
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #fff;
}
.svg-icon circle {
  stroke: #fff;
  stroke-width: 1;
}
  /* Center all */
  .markdown-block * {
  	text-align: center;
  }
  /* Space icon - heading - text */
  .markdown-block h4 {
    margin-top: 1px;
    margin-bottom: 1px;
}
  /* shape */
  [data-section-id="5eae3688553856782af05de6"] .section-background:before {
    content: "";
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIzNXB4IiB2aWV3Qm94PSIwIDAgMTI4MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTY0MCAxNDBDMjg2LjU0IDE0MCAwIDAgMCAwaDEyODBTOTkzLjQ2IDE0MCA2NDAgMTQweiIvPjwvZz48L3N2Zz4=);
    background-size: 100% 35px;
    top: 0;
    height: 35px;
    z-index: 1;
    width: 100%;
    position: absolute;
}
    [data-section-id="5eae3688553856782af05de6"] .section-background:after {
    content: "";
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNXB4IiB2aWV3Qm94PSIwIDAgMTI4MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTY0MCAxNDBDMjg2LjU0IDE0MCAwIDAgMCAwaDEyODBTOTkzLjQ2IDE0MCA2NDAgMTQweiIvPjwvZz48L3N2Zz4=);
    background-size: 100% 25px;
    bottom: 0;
    height: 25px;
    z-index: 1;
    width: 100%;
    position: absolute;
   	transform: rotateX(180deg);
}
  /* section background color */
  [data-section-id="5eae3688553856782af05de6"] .section-background {background: #e8c6c5;}
/* section bottom padding */
  [data-section-id="5eae3688553856782af05de6"] .content-wrapper {
  	padding-bottom: 0;
  }
</style>

5eae3688553856782af05de6 is Section ID. Each section has specific ID

Icon Box 04. 

Demo

How to

1. Add 4 Markdown Blocks

Box 1

<i class="fa fa-star-o" aria-hidden="true"></i>

#### Branding

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Box 2

<i class="fa fa-globe" aria-hidden="true"></i>
#### Social Marketing

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Box 3

<i class="fa fa-pied-piper" aria-hidden="true"></i>

#### Content Writing

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Box 4

<i class="fa fa-camera-retro" aria-hidden="true"></i>

#### Photography

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

2. Add Code Block

and paste these code

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* heading 4 */
  .markdown-block h4 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.2em !important;
}
  /* paragraph */
  .markdown-block p {
    color: #808284;
    font-size: 15px;
}
  /* icons */
  .markdown-block i {
    font-size: 3em;
    color: black;
}  
</style>