Home>Support>Customizing Vantage Big Headline for Different Pages

Customizing Vantage Big Headline for Different Pages

By Hugh J. Masterson, 10 years ago. Last reply by Andrew Misplon, 10 years ago.

Hi,

Is it possible to customize the Vantage “lovely big headline” (LBH) widget or for that matter the “visual editor” widget for different pages. Forinstance the LBH widget defaults to text center. I would lihgt to float it left on a different page, and also change the font size of style. I tried going into page builder and viewing as text and changing from h1 to h2 for instance and it won’t let me do that. Perhaps I have to create a for the particular page in question, but I’m not sure how to proceed.

Thanks so much,

Hugh

URL: http://www.sanctifyme.org

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 1 day ago Andrew Misplon
    Hi, I Work Here

    Hi Hugh

    It’s not possible to edit Page Builder content via the Text or Visual tabs. Page Builder content can only be edited via Page Builder. The Headline widget doesn’t have any formatting options. You can insert the following under Appearance > Custom CSS and change the properties as required:

    /* Vantage Headline Widget */

.widget_headline-widget h1 {
color: #444444 !important;
font-family: Verdana, Geneva, sans-serif !important;
font-size: 26px !important;
text-align: center !important;
}

.widget_headline-widget h3 {
color: #666666 !important;
font-family: Verdana, Geneva, sans-serif !important;
font-size: 14px !important;
text-align: center !important;
}

    To make that change apply to only one page or post you’d need to prefix each selector with the unique body class found on each page or post.

  2. 10 years, 1 day ago Hugh J. Masterson

    Thanks Andrew. Do you have an example of how would do the prefix. Are we still talking about modifying the child style.css or does it require tweaking the php. I’m thinking maybe the latter?

  3. 10 years, 19 hours ago Andrew Misplon
    Hi, I Work Here

    Please remember that unless you’re working in a child theme it’s best never to use Appearance > Editor or edit your style.css file. Whenever you update a theme everything gets overwritten. With CSS like this it’s easiest to paste it into Appearance > Custom CSS.

    Each page has a unique body class, sometimes it’s easy like home is just .home:

    <body class="home">

    There will be lots of other classes in there but you’ll see home in there for the home page or blog for the blog page. Then for pages or posts you’ll see a class that might look like: postid-10.

    So to prefix these headline selectors for say the home page would look like this:

    /* Vantage Headline Widget */

.home .widget_headline-widget h1 {
color: #444444 !important;
font-family: Verdana, Geneva, sans-serif !important;
font-size: 26px !important;
text-align: center !important;
}

.home .widget_headline-widget h3 {
color: #666666 !important;
font-family: Verdana, Geneva, sans-serif !important;
font-size: 14px !important;
text-align: center !important;
}

    To find body classes you need to inspect your page source. Easiest done with your browser’s developer tool. Please see our tutorial: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

  4. 10 years, 15 hours ago Hugh J. Masterson

    Thanks that’s realy helpful. I’ll try that.

  5. 10 years, 14 hours ago Andrew Misplon
    Hi, I Work Here

    For sure.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More