• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

The Cre8tive Diva - WordPress Developer

Digital Nomad | Helping WordPress & Genesis Framework Website Owners All Over the World

  • Home
  • About
    • Accessibility Statement
    • Terms of Service & Privacy
  • Services
    • Blogger to WordPress Migration
    • Buddypress Installation
  • My Work
  • Blog
    • Tutorials
    • Five on Friday
    • Genesis Framework
    • Tipsy Tuesday
    • WordPress
  • Contact
Home » Studio Pro: Add a Title and Subtitle Above the Icon Widgets

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!

 

  • Like my Signature? Get the Signature Widget for Genesis right here!

  • FacebookTweetPinPrint

    Filed Under: Genesis Themes, Tutorials, WordPress

    Reader Interactions

    Comments

    1. Michelle Park says

      January 7, 2019 at 2:41 am

      Excellent tutorial! Thank you!

      • Anita Carter says

        January 7, 2019 at 12:59 pm

        You’re welcome Michelle! Glad to have helped.

    Primary Sidebar

    It's just me and my dog Bella. I am a freelance web developer at Cre8tiveDiva.com. I build websites using WordPress and the Genesis Framework, WooCommerce and provide troubleshooting and support. I also build with Shopify. I love chocolate, lots of coffee!

    Sign Me Up!

    Receive my blog posts, tips and updates delivered to your inbox!

    Yes, Sign Me Up

    *By signing up you will receive new blogs, updates on products, services and important alerts.

    Categories

    • Design
    • eCommerce
    • Five on Friday
    • Fonts
    • Free Themes
    • Freebie Friday
    • Genesis Framework
    • Genesis Plugins
    • Genesis Themes
    • Genesis Untapped
    • Instagram
    • MailChimp
    • News
    • Plugins
    • Press This News
    • Social Media
    • Tipsy Tuesday
    • Troubleshooting
    • Tutorials
    • Uncategorized
    • Web Development
    • WooCommerce
    • WordPress
    • WordPress Plugins

    Footer

    Digital Nomad! I can be anywhere I wanna be now.

    Latest Blog Posts

    • Temporary Fix When Using Genesis Blocks Posts and Page Grid with Genesis Simple Share
    • How to Add Reading Time to a WordPress Genesis Child Theme Without a Plugin
    • How to Add “Shop” to WooCommerce Breadcrumbs when Using Yoast

    Looking for Something?

    Copyright © 2012–2023 · Designed with by Me! · Hosted on SiteGround