Inline Title/Heading one font size, Subtitle/Sub-heading a different font size

Greetings,
I have spent the last few days trying to figure out if this scenario is possible, without finding a solution.
I imagine “anything is possible with WordPress” but solutions may not be the “right or proper way”.

Example:

TITLE/HEADING - Subtitle/Subheading
(Where the TITLE/HEADING is H2 or equivalently sized and Subtitle/Subheading is H3 or equivalently sized.

I am also not sure how to switch from the “Classic Editor” to “Gutenberg Block Editor” which may be all I need to do to accomplish what I am after.

Thank you in advance!
Frank Ginn

Hi Frank Ginn,

You can change the heading tag directly from heading block by accessing the block toolbar when you click on the heading block.

Screen Shot 2020-10-20 at 12.37.28

and choose either H1-H5 or H6.

Doesn’t it work for you? Or do you have other concerns?

Regards,
Kharis
aThemes Support

Hi Kharis,
I don’t think I asked my question correctly or displayed what I would like to accomplish in my example previously stated. I am able to change size as you mentioned above however it changes globally the line of text. I am trying to achieve to different font sizes within the one line of text differentiating the TITLE/ HEADING - subtitle/subheading.

I am hoping this displays properly to get across what I am asking.
But it could be I am not using the right editor as stated originally, when I am in the Editor it says “Classic”. I am not sure how to get to new native block editor.

Thank you for your patience with me.

Frank Ginn

Hi Frank,

If you are running the latest version of WordPress you’ll have access to the block editor. If not, you might have Classic Editor plugin activated the list of your plugins under Dashboad > Plugins menu.

For your case, you can use a Custom HTML block to insert HTML heading tag. For example:

   <h3 class="my-heading">My heading - <span>My subheading</span></h3>

Screen Shot 2020-10-22 at 16.52.58

Then you can add the below CSS code to Appearance menu > Customize > Additional CSS.

    .my-heading {
      text-transform: uppercase;
      font-size: 20px;
    }

    .my-heading span {
      font-style: italic;
      font-size: 14px;
    }

Regards,
Kharis
aThemes Support

Thank you so much Kharis,

I used Custom HTML block to insert tag:

   <h2 class="my-headingCarrizo">Carrizo Plain National Monument - <span>California Superbloom 2019</span></h2> 

I added the following CSS code to Appearance menu > Customize > Additional CSS

    .my-headingCarrizo {
    	text-align:center;
    	font-style: bold;
    	font-style: italic;
    	}
    	
    .my-headingCarrizo span {
    	font-style: bold;
    	font-style: italic;
    	font-size:18px;
    }

It worked perfectly once I figured out the wording and reference points.
I am a work in progress, (as is my website), without any formal code instruction. You have helped me greatly and are proving that “Anything is possible with WordPress”!

I do not have the Classic Editor plugin, so that is also answered.

Stay safe and have a great week,
Frank Ginn

1 Like

You’re welcome Frank!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support