Customization guide

REPLICATING THE FEATURES/BENEFITS BOXES

This customization requires two main steps to set it up anywhere else on your site.

 

1. Replicating the style

The code has been set to work with markdown blocks, so you'll need to create your new boxes with those blocks too.

  • If your blocks are located inside an index section, you need to make note of the URL slug you gave it (e.g. /about-intro) located under your Page Settings when clicking on the cog icon. This is your section's ID.
  • If your blocks are located inside a regular page, you need to make note of your page's unique ID. I have a tutorial on that if you're unsure how to find it.

With either of those IDs on hand, head over to your Custom CSS window and scroll to the end where you'll find my code clearly commented (around line 1134 as of May 2018).

Code

 

You'll see these selectors:

#what-makes-us-different .markdown-block,
#ourapproach .markdown-block {

 

And you'll need to add your new one to the group, by adding a comma, pasting your ID and adding the .markdown-block class to target the blocks. It will look similar to this once you're done:

#what-makes-us-different .markdown-block,
#ourapproach .markdown-block,
#your-new-id-here .markdown-block {

 

2. Replicating the layout

If you'd like your blocks to stay aligned at all times and rearrange themselves like I set them up to do, you need to do 2 things.

First, you'll have to set all your new markdown blocks in one single line, side by side.

Then, you'll need to add a Code Block right before your markdown block row:

Layout

Inside the Code Block, you'll need to remove the default code and paste ONE of the following snippets, depending on how wide you want the blocks on the first line to be.

 

You can use the following to make wider blocks, like the ones on your homepage.

<!-- PLEASE DO NOT DELETE THIS BLOCK - 3 BLOCK LAYOUT by Thirty Eight Visuals-->
<span class="adj-grandchild-three"></span>
Wider blocks

 

Or you can use the following to make narrower blocks, like the ones on the Our Approach page.

<!-- PLEASE DO NOT DELETE THIS BLOCK - 4 BLOCK LAYOUT by Thirty Eight Visuals-->
<span class="adj-grandchild-four"></span>
Narrower blocks

 

After saving and refreshing the page, your new responsive blocks should be good to go!


Need help? Contact me at beatriz@thirtyeightvisuals.com