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:
Widget CSS Classes plugin adds the “CSS Classes” field, that can be used to change the width of the columns:
Now the column with added classes is wider:
We can also control the alignment:
Resulting in a left aligned column, while other columns are still using default alignment:
Under Chap Theme -> Footer we can also customize the spacing, separation and rows of widgets.
Creating a new row of widgets after the 3rd widget:
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.