DW Fixel: Grid System

The About page & Contact page of DW Fixel are built based on the grid system of the theme, you can see the details by go to Typography page on our demo site and click on Code Explained button in Grid system section.

For example, if you want to create an About page like on our demo, you can add the following code to the WordPress Text editor:

  <div class="grid-wrap">
 <div class="col-grid">
 <div class="col-1">Profile image</div>
 <div class="col-2">Profile info</div>
 <div class="col-1">Profile socials</div>
 </div>
 <div class="col-grid">
 <div class="col-2">Employment</div>
 <div class="col-2">Education</div>
 </div>
 <div class="col-grid">
 <div class="col-3">Technical Experience</div>
 <div class="col-1">Vcard</div>
 </div>
</div>

And the Contact page is similar:

  <div class="grid-wrap">
 <div class="col-grid">
 <div class="col-4">Google map</div>
 </div>
 <div class="col-grid">
 <div class="col-2">Contact form</div>
 <div class="col-2">Vcard</div>
 </div>
</div>

If you want to remove the padding in the grid cells, you can add the no-padding class like this:

  <div class="grid-wrap">
 <div class="col-grid">
 <div class="col-2 no-padding">content...</div>
 <div class="col-2 no-padding">content...</div>
 </div>
</div>

You can also use the DW outer grid system button in the editor to make the grid outer by using shortcode instead of the HTML codes above:

Here is the shortcode for About page & Contact page:
About page:

  [col_grid_wrap]
[col_grid]
[col_size class="col-1"]Profile image[/col_size]
[col_size class="col-2"]Profile info[/col_size]
[col_size class="col-1"]Profile socials[/col_size]
[/col_grid]
[col_size class="col-2" padding="yes"]Employment[/col_size]
[col_size class="col-2" padding="yes"]Education[/col_size]
[/col_grid]
[col_grid]
[col_size class="col-3" padding="yes"]Technical Experience[/col_size]
[col_size class="col-1" padding="yes"]Vcard[/col_size]
[/col_grid]
[/col_grid_wrap]

Contact page:

  [col_grid_wrap]
[col_grid]
[col_size class="col-4"]Google map[/col_size]
[/col_grid]
[col_grid]
[col_size class="col-2" padding="yes"]Contact form[/col_size]
[col_size class="col-2"]Vcard[/col_size]
[/col_grid]
[/col_grid_wrap]