How To Add A Fifth Column To Beaver Builder’s Footer Widget Area

Since widgets have been native to the Appearance > Widgets area, I wanted to keep that familiar set up instead of using Beaver Builder’s really cool global rows/sections ability which you could certainly use to achieve the same or similar result.

This article assumes you’re using the Beaver Builder Theme + Child Theme setup. 

I strive to customize things in a way that makes since, works the way you would expect, and is simply logical.

The code below will work in such a way that if Footer Column 5 does not actually contain any widgets, the footer area will be built just as before whether or not you use 1 or 4 columns, it’s still dynamic.

 

Create The Footer Column 5 Widget

Updated code for adding the widget area:

CARLOS AT BB HELPED ME SORT THE FOOTER COLUMNS TOGETHER INSTEAD OF COLUMN 5 BEING BY ITSELF (as shown in the image above). BELOW IS THE UPDATED CODE FOR ADDING THE WIDGET AREA.

Add this code to your functions.php file. This removes the footer widget areas, so we can add the 5th grouped together with the other 4.

add_action( 'widgets_init', 'gs_custom_widgets', 11 );
function gs_custom_widgets() {
 unregister_sidebar( 'footer-col' );
 unregister_sidebar( 'footer-col-2' );
 unregister_sidebar( 'footer-col-3' );
 unregister_sidebar( 'footer-col-4' );

 if ( 'disabled' != $footer_widgets_display ) {
  register_sidebars( 5, array(
   'name' => _x( 'Footer Column %d', 'Sidebar title. %d stands for the order number of the auto-created sidebar, 5 in total.', 'fl-automator' ),
   'id' => 'footer-col',
   'before_widget' => '<aside id="%1$s" class="fl-widget %2$s">',
   'after_widget' => '</aside>',
   'before_title' => '<h4 class="fl-widget-title">',
   'after_title' => '</h4>',
   ) );
  }
}

 

Setup 5 Column CSS for Bootstrap

Beaver Builder is built with the most famous Bootstrap which is fantastic. Its only drawback that I seem to always need to compensate for is it’s lack of 5 equal columns in a row that stretch all the way across without have to use push/pull classes. You can add this to your style.css file.

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-5ths {
  width: 20%;
  float: left;
}

@media (min-width: 768px) {
 .col-sm-5ths {
  width: 20%;
  float: left;
 }
}

@media (min-width: 992px) {
 .col-md-5ths {
  width: 20%;
  float: left;
 }
}

@media (min-width: 1200px) {
 .col-lg-5ths {
  width: 20%;
  float: left;
 }
}

Customize the footer-widgets file to support the 5th column

Lastly, we’re adding some conditional code to that footer-widgets.php file. Since you should be working with a child theme, within your theme folder you’ll want to have an includes folder. Within that, you need to copy the parent theme footer-widgets.php.

 

The code below checks if the Footer Column 5 is in use, if so we use the new 5ths classes above. If it’s not in use, then it essentially defaults back to using the display_footer_widgets() function.

<div class="fl-page-footer-widgets">
  <div class="fl-page-footer-widgets-container container">
  <div class="fl-page-footer-widgets-row row">
    <?php //FLTheme::display_footer_widgets(); ?>

    <?php if ( is_active_sidebar( 'footer-col-5' ) ) { ?>
      <div class="col-sm-5ths col-md-5ths">
        <?php dynamic_sidebar( 'footer-col' ); ?>
      </div>
      <div class="col-sm-5ths col-md-5ths">
        <?php dynamic_sidebar( 'footer-col-2' ); ?>
      </div>
      <div class="col-sm-5ths col-md-5ths">
        <?php dynamic_sidebar( 'footer-col-3' ); ?>
      </div>
      <div class="col-sm-5ths col-md-5ths">
        <?php dynamic_sidebar( 'footer-col-4' ); ?>
      </div>
      <div class="col-sm-5ths col-md-5ths">
        <?php dynamic_sidebar( 'footer-col-5' ); ?>
      </div>
    <?php } else {?>
      <?php FLTheme::display_footer_widgets(); ?>
    <?php } ?>

   </div>
 </div>
</div><!-- .fl-page-footer-widgets -->

You’re welcome 😉 Now you have a nice footer sitemap with 5 columns.

Did you achieve this differently? I’d love to hear about it in the comments below!

 

How to Change Beaver Builder Social Icon Style

Beaver Builder has been a great tool that most of my clients are really enjoying using. It makes their experience with their website much less dreadful. There’s so much flexibility for the developer and also for the designer.

 

I wrote only a couple lines because I didn’t want my social icons to have a background, I felt like the weight of the icons were too heavy and distracting for the area.

The result is the icons inherit the color set for the footer text, and we remove the circle backgrounds.

 

In addition, if you want to change the size of those icons, just add: font-size: 1.5em; to the i:nth-child(2).

How To Create Rounded Table Rows Using Pseudo CSS

border-radius applies to all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined.

We can, however, create a pseudo block element on table and td (but not tr, because it just doesn’t work) and use that to assign a border-radius. My end goal was to have what appeared to be “rows” of grouped information to make the data easier and quicker to digest.

The CSS in this example is using Bootstrap as a base. And the final solution was implemented using a custom HTML module in Beaver Builder for the table.

Setting up the :before pseudo block element

We want to target only the first cells (first-child) in each row (th & tr). If we don’t do this, we’ll end up with rounded borders in each cell block, which in my case isn’t what I want. Lastly, we’ll add on the last-child.

table tr th:first-child:before, table tr th:last-child:before, table tr td:first-child:before, table tr td:last-child:before {
content: "";
display: block;
width: 40px;
height: 40px;
background-color: blue;
position: absolute;
}
table tr th:first-child:before, table tr td:first-child:before {
top: -2px;
left: -2px;
border-top: 2px solid orange;
border-left: 2px solidorange;
border-top-left-radius: 5px;
}

The border width on the table cells is 2px (per bootstrap). So we give the pseudo blocks a negative position so that the border lines up with the one underneath. Then change the orange border to match the same color as the background or underlying border color, and making the blue background transparent, we’re able to essentially cover up the 90° edge on the cell and make it appear to be rounded.

Adding more pseudo :before & :after

Once that is set, we can continue on with adding the other 3 pseudo blocks, i.e. hiding that hard edge.

You can get the full gist from the pen below:

See the Pen Rounded Table Rows (faux) by Gina Stricklind (@gstricklind) on CodePen.


Comment and let me know what you think. Or, especially let me know if you’ve done something like this before and what your approach was.
?