Home Forums WoodMart support forum How can I globally set font sizes for headlines?

How can I globally set font sizes for headlines?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #498538

    wkmaster1985
    Participant

    I use the section title widget in a template.
    I have two instances: In one widget I set the title to be an H2 element (screenshot: https://tinyurl.com/2bc4ybqp, “H2 Überschrift”), in the other to be an H3 element (“H3 Überschrift”).

    It appears that both headlines have the same font size.

    How can I GLOBALLY set different font sizes for the different headline tags? I do NOT want to always individually set the font sizes.

    What I tried so far: I had a look at theme settings > “Typography”, but couldn’t find a setting for globally setting font sizes for headlines.

    #498622

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Set the font size in the style tab of the elementor page builder.
    If you have any questions feel free to contact us.

    Best Regards.

    #498898

    wkmaster1985
    Participant

    Hi Aizaz,

    as I wrote I want to set the font sizes “GLOBALLY” and NOT on an individual level via the style tab.

    Example:
    If I decide that my H1 always has 36 pixel and my H2 always 28 pixel then I want to set these font sizes globally in one spot, and I don’t want to go into every single page and every single widget and have to change the font size via the style tab.

    #499079

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/

    Hope this helps!

    Best Regards

    #499297

    wkmaster1985
    Participant

    Hi Aizaz,

    in the “Advanced” section in the dropdown I cannot select specific H tags, such as H2 or H3, and set a global font size. Please see my screenshot attached.

    My goal:
    I want my heading tags to have a GLOBAL font size, for example all H2 instances should have font-size = 30px and all H3 instances font-size = 26px. In the “Advanced” section I do not see any option to achieve my goal.

    #499371

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    You can Set typography for titles (h1, h2, h3, h4, h5, h6) from Theme Settings > Typography y> basics.
    https://ibb.co/tzgXdFr

    Best Regards.

    #499699

    wkmaster1985
    Participant

    @Aizaz:
    I have the feeling you do not understand what I am trying to achieve. My goal is to have DIFFERENT font sizes for DIFFERENT headline tags, for example 30px for H2, 26px for H3, etc.
    As I can see in your screenshot it is not possible to achieve this goal via Theme Settings > Typography > Basics.

    #499947

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Our “Section title” widget is created to add stylized titles for sections or slides on pages created with a page builder (examples https://prnt.sc/Rd-XBH2-F-Kn, https://prnt.sc/fvnYaT71SpeK, https://prnt.sc/dMy7Cw5ofE1G).

    This widget has its own size gradation that can be changed via “Predefined sizes” option (https://prnt.sc/yUws8fTnDu6I) which will also affect the size of its subtitle and text after the title (https://prnt.sc/rNhuvqBkaXc0). “Section title” title has “Tag” option, but it didn’t affect its size, and it was added only for SEO purposes.

    Second, what to do next:

    If you want to create a simple Heading for your text content you can use the default Elementor widget called “Headings” which titles size depend on from its h-tag (video https://gyazo.com/e3b5166ec9310a7ea7398a59d07989df)

    If you want to use “Section title” and want to make its title ignore “Predefined sizes” and depend on from h-tag, you need to add the following custom code to the Global CSS area in Theme Settings.

    .title-wrapper h1.title {
    	font-size: 28px;
    }
    
    .title-wrapper h2.title {
    	font-size: 24px;
    }
    
    .title-wrapper h3.title {
    	font-size: 22px;
    }
    
    .title-wrapper h4.title {
    	font-size: 18px;
    }
    
    .title-wrapper h5.title {
    	font-size: 16px;
    }
    
    .title-wrapper h6.title {
    	font-size: 12px;
    }

    Best Regards.

Viewing 8 posts - 1 through 8 (of 8 total)