Shortcodes – Content Boxes

Content Boxes are a nice addition to Incept because it gives a unique look and style to your page when you can display special content to the reader. Content Boxes look like this:

contentboxes1

For those who would like a different column layout, you have that option as well because we start with our column shortcodes which has the ability to allow use to make custom columns.

Step 1 – Create Columns

For this tutorial, we will recreate the demo that you see above. So the first thing we need to do is to create a “custom” 2-column layout by clicking on the shortcode column button on the editor:

button columns

Now it’s time to make our custom column layout by selecting the “Custom Grid” option on our dropdown selection shows:

custom col option

When you click on “Custom Grid”, a popup window will be displayed:

custom grid1

In the “Number of Columns” field, type in 2 for our layout.

contentboxes2

Click on the first box to edit the size. We will make the Grid to be 3

contentboxes3

Click on the second box and make this grid as 9

contentboxes4

Now click the “Insert” button and you should see our custom grid shortcode added to your content area.

contentboxes5

 

Step 2 – Add our First Display Heading

Select the first column “Text” placeholder content and then click on the “Display Heading” shortcode button on the editor:

display headings editor button

Then on the popup window, select the following:

contentboxes6

  • Heading = Heading 1
  • Style = Content Box Title
  • Align = Right

Now click “Insert” and replace the “Your Heading” text with your own. In our case, we can put in “Exceeding creative design limits” so that our shortcode now looks like this:

[incept_row class="row"]
[incept_col class="col-sm-3"][incept_display heading="h1" style="incept-content-box-title" align="right"]Exceeding creative design limits[/incept_display][/incept_col]
[incept_col class="col-sm-9"]Text[/incept_col]
[/incept_row]

Step 3 – Add our Content Box

Now we need to add out content box in the right column. Select the “Text” placeholder that you see in our second column and then on the shortcode editor button row, select the “Content Box” to bring up our window.

contentbox editor button 

contentboxes8

  • Layout – This is our layout where Right puts out content on the right and the side border on the left. Left will be the other way around.
  • Border Colour – This is the colour we want our vertical border to be. You need to enter a HEX colour value like this: #000000 (this is black)

In our tutorial here, our layout will be “Right” and our Border Colour will be #e8b044 for our orange type colour. Click on the “Insert” button and this will now add our Content Box shortcode to the other code we have.

[incept_row class="row"]
[incept_col class="col-sm-3"][incept_display heading="h1" style="incept-content-box-title" align="right"]Exceeding creative design limits[/incept_display][/incept_col]
[incept_col class="col-sm-9"][incept_cbox border="#e8b044" layout="right"]Your content here.[/incept_cbox][/incept_col]
[/incept_row]

Step 4 – Add our Sub Heading

This is the second heading in the second column above the content…this is the heading in Uppercase letters:

EXPLORE HOW SHAPED PIXELS CREATES EXCEPTIONAL WORDPRESS THEMES FOR PEOPLE WHO ARE SERIOUS ABOUT BUSINESS

To do this, we need to select the placeholder text in our Content Box shortcode “Your Content Here” and then click on the “Display Headings” shortcode editor button. This time, select the following:

  • Heading = Heading 2
  • Style = Content Box SubTitle
  • Heading Alignment = Left

Now click “Insert” so that our updated content box shortcode now looks like this:

[incept_row class="row"] [incept_col class="col-sm-3"][incept_display heading="h1" style="incept-content-box-title" align="right"]Exceeding creative design limits[/incept_display][/incept_col] [incept_col class="col-sm-9"][incept_cbox border="#e8b044" layout="right"][incept_display heading="h2" style="incept-content-box-subtitle" align="left"]Explore how Shaped Pixels creates exceptional WordPress themes for people who are serious about business[/incept_display][/incept_cbox][/incept_col] [/incept_row]

Step 5 – Add Content

Now that we have the following elements added:

  • Custom Columns
  • Our First column heading title
  • Our second column heading subtitle

Time to add content to the Content Box, just below the subtitle we previously added. It’s going to be important you do this carefully, but right after this shortcode closing square bracket, place your mouse cursor:

[incept_display heading="h2" style="incept-content-box-subtitle" align="left"]Explore how Shaped Pixels creates exceptional WordPress themes for people who are serious about business[/incept_display]

Now you can type your content, but for example, we can use some Lorem Ipsum text content (dummy content) to match the demo site. Make note that when you type in content, just hit the “Enter” key when you want to start a new paragraph like our sample content box shows:

Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute rure dolor reprehenderit in voluptate se cillum dolore eu fugiat nulla paraturs. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed pers picia tis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam eaque psa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

 When you are done, we can then click on “Update” or “Publish” for your page or post. 

When all done and complete, this is what your full shortcode snippet should look like:

[incept_row class="row"] [incept_col class="col-md-3"][incept_display heading="h1" style="incept-content-box-title" align="right"]Exceeding creative design limits[/incept_display][/incept_col][incept_col class="col-md-9"][incept_cbox border="#e8b044" layout="right"][incept_display heading="h2" style="incept-content-box-subtitle" align="left"]Explore how Shaped Pixels creates exceptional WordPress themes for people who are serious about business[/incept_display]  Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute rure dolor reprehenderit in voluptate se cillum dolore eu fugiat nulla paraturs. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Sed pers picia tis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam eaque psa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.[/incept_cbox]  [/incept_col] [/incept_row]