Customizing footer columns

Widgets in the footer are displayed in a grid with equal width columns by default. By using the Widget CSS Classes plugin and adding Semantic UI column classes it’s possible to easily customize the column sizes.

A normal footer with 4 widgets looks like this:

Normal Chap WordPress theme footer

Widget CSS Classes plugin adds the “CSS Classes” field, that can be used to change the width of the columns:

Widget CSS classes input

Now the column with added classes is wider:

Six wide footer column

We can also control the alignment:

Adding alignment classes to widgets

Resulting in a left aligned column, while other columns are still using default alignment:

Left aligned footer column

Under Chap Theme -> Footer we can also customize the spacing, separation and rows of widgets.

Chap theme footer options

Creating a new row of widgets after the 3rd widget:

Multi row footer widgets

By default the border color for internally celled grids in Semantic UI is different from divided grids. This can be changed in the Chap Theme -> SUI tab by changing the @celledBorderColor variable in the Collections – Grid component.

Leave a comment

Your email address will not be published. Required fields are marked *