How To Offset A Box Section

Have you ever been designing a site and just want to add a small design element without overpowering your layout? If yes, this post may just the thing you want to consider.

Here, I will show you how to offset a box section with a few easy steps. I personally have found this feature to be most effective when I design a website’s homepage. However, if other pages of your site demand certain content to be highlighted, this tool could be used elsewhere. First, to get an idea of what we are hoping for, here is a preview of the end result: Above, you can see the finalized box. The box contains the two most important columns for this specific site. To make the content pop a bit more, the box is offset to lay above the bottom of a full-width slider. The drop shadow also gives the section some importance and shows the visitor that this section takes is more important than the sections that may come after it. 

So, how do customize a section to allow this subtle design? It’s as simple as playing around with the sizing in both the section above the box (in this case the full-width slider).  I have created the following:

  1. A full-width menu
  2. A full-width slider
  3. A two-column section with two blurbs. (This section is where the box comes in).  

I use the visual builder because it is easiest for me to see my actions, especially in the case of a design element such as this box. From the visual builder, access the full-width slider settings. In ‘Section Settings’, navigate to the “design” tab. Find the “spacing” function. As you can see on the image below, I entered 40px in the bottom box of the “custom padding” area. All other boxes are left with 0px. Leaving 40px of spacing in this bottom box was most effective for me because I still wanted to show the full-width slider’s dot navigation. (If you opt to remove the dot navigation from the slider, a greater value can be entered).  In the two-column section settings, navigate to the “design” tab and spacing area, just as you did in the previous slider section. Instead of adjusting the padding, you will adjust the custom margin. In the “top” box under custom margin, enter -65px. This will raise the two-column section just slightly above the full-width slider, but the slider’s dot navigation should still be showing.  Now, the remainder of the blog will focus directly on the two-column section settings. Here, you have the option to add a drop shadow and border as I did. (See above). While creating the box feature, I found, while not entirely necessary, the drop shadow feature gives the box extra significance on the page.  You can set the box shadow by selecting the first option for “shadow.”  Box Shadow Horizontal Position: 1px Box Shadow Vertical Position: -5px Box Shadow Blur Strength: 59px Box Shadow Spread Strength: 9p   If you wish to add a matching border, you can do so by using the following settings: Rounded Corners: 1px on each of the four corners. Border Style: Select the four borders option. Border Width: 4px Border Style: Outset

Once you’ve completed the steps above, your work should resemble the box shown above in the first graphic. The box adds a bit of class to the site and makes the most important pieces known immediately.