What Is a Section Title and How to Add It in WordPress
If you’re searching for an effective and stylish way to grab the attention of your website visitors while they scroll through your pages, then section titles are certainly the way to go. These typography elements can help users understand what your content is about fast, further contributing to the user-friendliness of your site and making them interested in exploring more.
For this reason, we’ve decided to show you how you can create and add a section title to your WordPress site using the practical Qi Addons for Elementor Plugin and its Section Title widget. In addition, we will also share some of the most common practices when it comes to adding this useful element to a page, so make sure to read on as we talk about:
A section title is a typographic decoration element often used to capture the attention of users and allow them to easily remember the most important information within a page or section. Unlike header tags that are also used to provide a better content structure and boost the SEO of your site, the main purpose of section titles is to give a clear idea of what a specific section is about. They have the power to offer a precise overview of your content while engaging and inspiring readers to view more of your content all at once. Therefore, it can be said that section titles also allow users to understand more about different pages without actually reading the entire content.
There are many different ways in which section titles can be used on a page. For example, they can serve as a preview of different topics addressed on a page and act as a sort of table of contents. They can also be quite handy when used as an introduction to your business, product, or services. Oftentimes, you can see them on websites as sections that consist of a captivating title, informative subtitle, and/or additional text section that contains some of the brand’s key characteristics, brief about info, or even its core principles and philosophies. When used in this way, they can even represent a preview or teaser of different pages. In these cases, section titles can also include buttons that, when clicked on, lead to other pages, allowing them to learn more about the topics in question and explore the site in more detail.
News sites and blogging platforms also use section titles to list some of their newest and most popular blog posts or even featured articles. Every section title can provide a clear idea of the article’s subject and can include its first 30-50 words right below, along with a link that leads to the entire article.
All in all, how you will use section titles depends entirely on your purpose and design vision.
Since section titles also serve to captivate the attention of visitors (aside from providing them with different types of information), this leaves space for plenty of creativity and experimentation on your part. Still, there are some general rules you can follow when generating your own section title. For example, adding a different font type to your section title compared to the one you’re using for the rest of your site’s typography is perfectly fine as it can help engage your audience. If you want, you can add one of the decorative or elegant fonts, or even use some more unconventional font types to make them look particularly striking. Still, you should make sure that they look clean and are easy to read in general.
You can also feel free to experiment with the size of your section titles, their font weight, style, and decoration options. This means you can make your section title appear bold, italic, underline, or even combine all these traits at once – as long as they match the overall design style of your site.
The same goes for choosing whether your section titles will all be uppercase, lowercase, capitalized at the beginning of each word, or whether you will capitalize the beginning of the first word only. Most often, however, you will run into section titles that are either capitalized at the beginning of each word or come with only the first word capitalized except for things like conjunctions, prepositions, and articles (and, or, but, a, the, in, to, etc.).
Finally, we recommend that you refrain from using periods (or full stops) at the end of your section titles. The reason for this is simple – section titles represent titles, after all, and titles don’t have periods. Furthermore, a period can make the reader stop reading when they run into them. This can be counterproductive as titles should inspire the user to keep reading. Therefore, it’s important to keep their reading flow going without distracting them with full stops.
Now, while it’s true that you can add section titles in WordPress using the HTML code, it’s much easier to do so using the help of a full-featured section title widget. Namely, the Qi Addons for Elementor plugin comes packed with 60 different flexible widgets that allow you to fully customize different sections of your WordPress site in any way you like with complete ease.
Section Title is one such widget that you can use to create fully customizable and captivating titles for different page sections. You will get to adjust various header tags, add colors, and set different typography options for each separate section of your title. Moreover, not only will you be able to do all this to your title, but you will also be able to customize your subtitle, include additional text, and even add button and button icons.
Before we show you how to add a section title in WordPress, we should note that the Qi Addons for Elementor is a plugin that works with Elementor (as its name suggests). Therefore, you should have the Elementor page builder installed first in order to use this plugin.
Also, in case you prefer to watch videos instead of reading, we’ve got a video for you that covers the same subject, so make sure to check it out:
With that said, let’s see how you can easily add a section title in WordPress using the Qi Addons for Elementor’s practical and versatile Section Title widget.
Adding the Section Title Widget and Using the Content Tab
Go to the backend of your page or post using the Elementor page builder. Then, search for the Section Title widget in the Elementor sidebar and drag it over to the right side of the screen.
You will notice that the default section title has some placeholder content that consists of a subtitle, title, and some additional text.
The first thing we will replace is the title. To do this yourself, you should click the Title field on the left (located in the Content tab) and replace the existing text with your own. You can do the same to your Subtitle.
Now, this next option called Subtitle Position allows you to pick the desired position of your subtitle – just like its name indicates. It’s set to be placed above the title by default, but you can easily change it to be below the title (we’ve left ours at default, i.e. above the title).
Next, there’s the Text field that allows you to replace the default text with your own. We’ve inserted the content from one of the available examples that can be found on the widget’s page.
Of course, you can also use some of the other available options that will allow you to change the look of your text. For example, you can change the HTML tag, make your text appear bold, italic, underline, format it as a list, etc. You can even add media and use the Text mode to add any code or style it with CSS if you’d like.
Right underneath, you have the option that determines the line break position. For example, if you insert the number three into this field, the line will break after the third word. And in case you want to have multiple line breaks, simply separate your numbers using the comma.
If you want to disable the title line break for screens with a size 1024 and lower, you should use the option with the same name by switching it to Yes.
Next, the Position of Decorated Words option will allow you to decorate certain words from your title to make them stand out better. Simply set their number here and separate them by commas. We’ve entered the numbers one, two, and three, and you can instantly see how these words have changed their look.
The default decoration is set to italic, but you can easily change that by heading to the Style tab and finding the Title Different Decoration option.
You can pick from bold, italic, and underline once you open the dropdown. Feel free to choose any option that works for you.
Going back to the Content tab and its settings, we will remove the values for decorated words as we’ve just added them to quickly demonstrate what this option does.
Similar to the above-mentioned option, there’s also the option called Positions of Different Colored Words. For example, if you set “1,2,3” in this field, you will see that the first three words will have a different color compared to others.
Once again, you can set your preferred color using the Style tab. Then, you should find the Title Different Color option. Of course, you can use this option to set whichever color you like using the color picker or entering the hex code.
Finally, the Enable Button option will allow you to have a button in your section title element.
If you switch this setting to Yes, you will also get to use the Button section that contains different options related to your button.
There’s the Layout option that allows you to choose whether your button will be Filled (which is our default), Outlined or Textual.
Also, the Button Types option lets you set the type of your button. You will be able to choose from Standard (which is our default), With Inner Border, and Icon Boxed.
If you want, you can also enable the Button Text Underline. Here’s what it looks like if you switch it to Yes (we will switch this option back to default right afterward):
You can also pick the button Size and choose from Normal (this is our default), Small, Large, and Normal Full Width.
Here you will also find the Button Text field option that will allow you to enter your desired button text. We’ve replaced ours with the text that says “View More”.
The Button Link option lets you insert a link. We’ve used a hashtag as a placeholder.
Next, the Button Icon set of options allows you to add and adjust the button icon settings. Click anywhere on the (+) field (you can also pick from Icon Library or upload SVG) to choose one of the available icons. We’ve opted for using the Angled Arrow icon for ours.
Hit the Insert button once you’re done with your selection.
Once you choose your icon, you can also set the icon position by using the option with the same name. This option is set to Right by default, but you can also change it to Left if you’d like.
The Style tab Options
Moving on to the Style tab – here you will have access to all sorts of options related to styling.
The first available option is Alignment – it is set to Left by default, but you can also switch the alignment of your text to Center or Right.
Next, you can choose the Title Tag. You can pick anything from H1 to H6 or set it to P (Paragraph).
You can also easily change your Title Color by using the color picker.
Once you open the Title Typography setting, you will get access to plenty of different options related to typography. These include font Family, Size (we’ve set 70 pixels for ours), Weight, Transform, Style, and Decoration options.
Finally, you can add more space to your title using the Line Height option, while Letter Spacing lets you create more space between the letters themselves.
The next two options are the ones we’ve already mentioned at the beginning – the Title Different Color and Title Different Decoration. These allow you to set the different color or decoration to particular words in your title.
Next, the Subtitle Tag option lets you choose from H1 to H6 (or P). We’ve used the H6 tag for ours.
The Subtitle Color option works on the same principle as any other color picker, while the Subtitle Typography contains all the options like the Title Typography (the only difference being that these options apply to the subtitle instead of the title).
Afterward, you have the Text Color and the Text Typography options, both of which you can use to further style the look of your text.
Now, the Spacing Style settings include plenty of options for further adjusting the different margin and padding options.
The Title Margin will allow you to create space all around the title by increasing the values and keeping all fields linked. If you delink these values, you can set different values for each side of the title margin. For example, we’ve set 15px for the top margin to create more space between the title and the subtitle and left other margins at 0px.
There’s also the Subtitle Margin Top option. If you increase this value, you will be able to get more space above the subtitle.
Also, the Text Margin Top option will allow you to add more space between the title and your text. We’ve set ours at 15px.
Next, the Subtitle Padding allows you to shift the position of your subtitle by adding the values to your padding.
The Text Padding option works the same way as the previous one, only it applies to the text instead.
Last but not least, the Button Margin Top option shifts the button away from the text. You can set the value using the slider – we set ours at 45px.
The Button Style set of options allows you to style the look of your button in more detail.
The first option is the text button Typography which features the same options as all other Typography options (that we’ve mentioned a few times already).
Next, you have access to two different tabs called Normal and Hover. The former has options for setting the button style when displayed normally, i.e. when it’s not hovered over. The latter tab contains options for adjusting the look of your button when a user hovers over it. The options you set under the Normal tab will automatically apply to the Hover ones. Therefore, you can use the Hover tab to make desired changes.
Let’s take a look at what you can find in the Normal tab. First things first, you will be able to change the button text and background colors. For the text color, we’ve added a hex code ((#fffff) to make ours white. For our background color, we’ve used the #fc8d70 hex code to turn it into a nice tangerine shade.
The Border Color will allow you to set the color of the button border, while the Border Width values can also be increased right below.
Next, the Border Radius option can make the edges of the button appear more rounded. There is a small radius by default, but by delinking the values, you will make this default radius disappear (this is what we did). If you link the values together, you can increase all the sides evenly, or delink them and set each one separately.
The next option is the Button Padding that affects the space around the button content. If you keep increasing these values, you will see the way your button size will grow. Again, if you want to set different values for different sides, you need to delink the fields. We’ve added 14px for the top, 40 for the right side, 14 for the bottom, and 40 on the left.
Once you’re done with adjusting the Normal button settings, you can switch to the Hover tab. For the most part, these options are similar to the normal ones. Without touching any of the options, the look of the button will remain pretty much the same when hovering over it. But, if you want to change your text hover color, background and border hover colors, this is the place to do it.
One thing that differs from the Normal set of options is the Reveal Background option. To properly demonstrate what this option does, we will set the Background Hover Color first. You can change this color to anything you like – we’ve added a random one for our example (#B85B5B). Now, when you hover over the button you will see the colors changing.
Now, the Reveal Background option will determine the way this new color is revealed. For example, if you switch this option to Horizontal, the hover color will move in horizontally, like this:
In a similar fashion, if you change this option to Vertical, the color will move in vertically:
This effect can be quite useful if you want to add some cool effects to your button and make it stand out even more. That being said, we haven’t planned to use it for our design, so we will switch it back to None and clear the background hover color.
Now, the next set of options, called Button Icon Style, can be useful to those who’ve decided to add an icon to their button (like we did).
Here you will get to adjust the Icon Size (you can either type to change it or use the help of the slider). We’ve set ours at 16px.
Here you will also find another two switch tabs – Normal and Hover. Once you click on Hover, you will get to use the Move Icon option that will help you set the way the icon moves on hover. Think of it as adding a small animation effect that will make your icon move.
It’s set to Horizontal Short by default, but you can also change it to Horizontal, Vertical, Diagonal, and None (which will keep the icon still/unmoving on hover). We’ve kept the Horizontal Short animation for ours.
In the Normal tab, you will get to choose the Icon Color – the option which does the same job as any other color option. We’ve kept our icon color white to match the button text.
Next, the Icon Margin option will allow you to move the icon further from the button text. We’ve delinked the values and changed the left padding to 10px.
In our case, the Button Inner Corner Style option is empty because we’ve used the Filled button layout. In case we had used the layout with the inner border, we would’ve been able to use these options.
The same rule applies to the Button Underline Style option – if you enable the Button Text Underline, you will have access to options that stylize it.
Finally, there is also the Advanced tab which contains multiple options related to positioning, responsiveness, entrance animations, and more. That being said, these options are available for all Elementor widgets, so we won’t be covering them in this tutorial.
Hit the Publish/Update button at the bottom once you’re satisfied with your settings and you’re all set.
And here’s what our end result looks like:
Wrapping Things Up
A section title is a great typography element you can use to capture the attention of your visitors and get them to explore different sections and pages of your WordPress site. We recommend using the Qi Addons for Elementor plugin’s Section Title widget as it will allow you to customize your section titles down to the tiniest detail. You will get to adjust your typography, add additional text, change colors, add buttons and hover animations, and use many other options that will help your section titles truly stand out.
Now that you’ve gone through all the options that come with this useful widget, you should know how to create all the examples available on the widget’s page. It’s completely up to you to decide whether you want to use the same options that we did or want to create something else entirely. Just make sure to follow our instructions carefully and pick the options that work the best with your site’s design.
