Studio Pro: Add a Title and Subtitle Above the Icon Widgets

In the Studio Pro child theme by SEO Themes, a member of the Facebook group has asked how to place a Title and Subtitle above the Icon Widgets.

Watch the video before proceeding.

Below are instructions on how to do this without modifying the Studio Pro child theme functions.

Install and activate the Genesis Widget Column Classes plugin.

1. Go to Appearance > Customize.
2. Select Front Page 2 which is where the Icon Widgets are located.
3. Click “Add a Widget“.
4. Select “Custom HTML“.
5. You will see that the widget appears at the end instead of the beginning. Close and Drag the widget to the top of the widget area so it’s now the first one.
6. Add your Title. Then add your Subtitle in the Content box. You can use whatever “h” tag you’d like as shown in the video.

Leave the column settings as it is. Click Done.

Now open the first Icon – select “one-third” from the drop down. Check the box for “first.” Click Done.

Open the second Icon – select “one-third” only. Do not check the box. Click Done.

Ope the last Icon – select “one-third” only. Do not check the box. Click Done.

Move the Title and Subtitle Above the three Icon Widgets

Using your browser dev tool as I did in Firefox, select the first widget.

In my case, the widget id is “custom_html-24”. Copy or write that down.

Click the back arrow (<) twice to go back to the beginning.

Select Additional CSS. Copy and paste the following into the box. Change the 24 to the number of your custom widget.

#custom_html-24 {
display: inline-table;
width: 100%;
text-align: center;
margin-bottom: 40px;
margin-bottom: 4rem;
}

#custom_html-24 .widget-title {
font-size: 1.618em;
}

#custom_html-24:after {
content: '';
display: block;
height: 1px;
width: 60px;
width: 6rem;
background-color: #adb5bd;
margin: 20px auto 0;
margin: 2rem auto 0;
}

You will then see it align above the three icon widgets. Click Publish.

That’s it!