Customizing Panels on the Front Page

Watch a complete video course on building a website with Counter on YouTube →

Each panel has two options that control its appearance – Background Image and Additional CSS Classes.

Background Image

This option allows you to set image background for the panel. In addition to selecting the image, you can choose the Repeat, Position, Attachment, Size, and the Opacity of the background.

Additional CSS classes

All classes you put to this input field will be applied to the panel. This will allow you to style the panel using CSS later. There are also five classes that are available out of the box to help you tweak the look of the panels.

align-center—aligns the text to the center of the panel.

split-left—changes the layout of the panel so the featured image is displayed on the left and the content on the right.

split-right—same as previous, but displays the featured image on the right part of the panel.

fullwidth—useful when you need to create columns or other kinds of complex layout that require the full width of the panel. The maximum width of the content is 936px.

tall—adds top and bottom padding so the panel looks taller.

dark—changes the background color to black and text color to white.

no-border—removes the bottom border of the panel.

You can combine classes together like so: tall dark no-border or add your own ones to later style them with CSS.

Going Further with CSS

As I mentioned before, you can adjust the panels using CSS. Don’t get scared too quickly, it’s not as difficult as it may sound.

WordPress 4.7 introduced a great feature to Customizer called Additional CSS. Basically, it allows you to add your own CSS styles to the website without having to install any additional plugins or create a child theme. We’ll take advantage of this feature to customize the look of the panels on the front page.

There is an ID that allows you to add unique styles to each panel.

Using that ID you can change colors, alignments, hide elements and do virtually anything with the panel. Here are some examples.

Background Color

#panel-3 {
   background-color: #de7c43;
}

Text Color

#panel-3 {
   color: #ffffff;
}

Panel Title Color

#panel-3 .panel-title {
   color: #ffffff;
}

Hide the Panel Title

#panel-3 .panel-title {
   display: none;
}

Adjust the Vertical Size of the Panel

#panel-3 {
   padding-top: 10%;
   padding-bottom: 10%;
}

All Styles Combined

#panel-3 {
    color: #ffffff;
    background-color: #de7c43;
    padding-top: 10%;
    padding-bottom: 10%;
}

#panel-3 .panel-title {
    color: #ffffff;
}

As you can see, with just a little bit of knowledge of CSS, you can do virtually anything with this theme without having to install any page builders or other plugins.