How to Add Drop Caps in WordPress
Adding some custom styling to your content is a great way to spice up the look of your WordPress site or blog. For instance, introducing a simple line break can do wonders for the overall readability of your posts and pages, while paragraph indentation can also contribute to their look. Still, when it comes to highlighting your content in a stylish manner, nothing beats the use of drop caps. Not only can this element help you emphasize the introductory paragraph of your page or post, but it will also allow you to experiment and add more uniqueness to your website design.
This time around, we are going to show you a few different ways in which you can add drop caps in WordPress to accentuate the look of your content. We will explain how you can do this using the manual method as well as with two different plugins, including the Qi Addons for Elementor plugin.
But first, let’s see what a drop cap actually is and how it can benefit your WordPress site.
What Is a Drop Cap in Typography and How It Is Useful
As mentioned briefly in the beginning, a drop cap is a styling element characterized by using a large font size for the first letter in a paragraph, while the remaining text has a smaller font size compared to it. Oftentimes, a drop cap looks more ornate than the rest of the text. As such, it is frequently used in books as a chapter introduction or at the beginning of magazine articles. Similarly, it can also be found in many different types of blog posts, and most often in the first paragraph.
In the past, it was also common to insert a drop cap within the text to emphasize any important section, or even to highlight the beginning of a new sentence. Nowadays, however, drop caps are largely used to add a decorative touch to different pieces of text, on top of highlighting the beginning of a paragraph.
And so, not only are drop caps great for introducing your written content, but they also offer a nice and stylish way of attracting the attention of your potential readers. You can use them regardless of the type of blog you own – be it news-driven, related to fashion, travel, or any other niche. Even if you have a portfolio, agency, or any other website related to the creative industry, it might be a good idea to incorporate a drop cap into your pages or posts and match it with the rest of your design.
Now, while many WordPress themes with different typography effects come with a drop cap element out of the box, many still don’t support this option. If this is the case with the theme you’re using, or you simply want to have more options at your disposal, then this is the article for you. In fact, we’re going to cover three different methods for adding drop caps to your WordPress site. The first method will include the use of our free Qi Addons for Elementor plugin, the second one uses a more basic type of plugin, while the third one includes adding a drop cap manually with some custom CSS. So sit back, relax, and read on:
If you want to unleash your creativity to the fullest and give a completely unique style to your drop caps, then the Qi Addons for Elementor plugin is a perfect choice. The plugin is completely free to use and features a huge collection of 60 different widgets that can be used with the Elementor page builder to further customize the look and feel of your WordPress site. Among its list of widgets, there is also the Drop Caps widget that comes with a vast set of styling and other options that will allow you to customize your drop caps in many creative ways.
We will show you how to use the Drop Caps widget in full detail, so make sure to stick around. Also, in case you prefer to watch videos instead of reading, feel free to check out our video on the same subject:
Adding a Drop Cap Widget and Editing the Content
As it is apparent from its name, Qi Addons for Elementor is a plugin that works with Elementor, so you’ll need to have the Elementor page builder installed first to use the plugin. Also, if you need some further instructions on how to use Elementor, you can learn all about it in our comprehensive tutorial.
First, go to the backend of the page or post you’d like to add a drop cap to and search for the Drop Caps widget in your Elementor sidebar.
Then, simply drag the widget to the right side of the screen.
You will instantly be able to see some default Lorem Ipsum text within the widget, with a clearly noticeable big first letter. This text can be easily changed using the Text field on the left side of the screen (in the Content tab).
We used some content from the Qi Addons for Elementor landing page for our text. Of course, you should insert your desired text here instead.
And that’s it for the Content tab options. Now, we’re going to explore the options you can use to set the styling of your drop cap (available in the Style tab).
Styling the Drop Cap
Once you click on the Style tab, you will be able to see plenty of options related to the styling of your drop caps.
First things first, there’s the Letter Typography option that you can use to change the typography settings of your first letter. Clicking on this option will open many other typography-related options.
For example, with the font Family option, you can either choose the font family from the dropdown or simply type in the font family of your choice (if you already know the font family you wish to use for your letter).
We’ve chosen the DM Serif Text for ours, but of course, you can use any font family type that fits your needs better.
Then, you will be able to change the size of your letter. You can do this either by using the slider or by assigning a specific number value. We’ve used a value of 51 pixels for our example.
There are a few other options in the typography section, but we are going to come back to them a bit later when we start working on the typography options for the text. It will be easier to show you what these options can do if we demonstrate them on the rest of the text rather than on a single letter.
Moving on to the rest of the Style settings, there’s the Letter Color option that will allow you to pick the color for your letter (as is apparent from its name). Clicking on this option will open the color picker.
You can either set the hex code if you have a particular color for your letter in mind or you can simply choose the color using the slider.
We’ve added a nice shade of color blue using the hex code #1b3159:
Next, there’s a Letter Holder size option that can be used to increase or decrease the space between the letter and the rest of the text (or rather, the space that “holds” the letter). You can easily do this using the slider.
The Background type option comes with two different choices – Classic and Gradient.
If you end up using the Gradient option, you will also be able to pick two different colors for your letter background – the “start” and “end” color.
Here’s an example of how this effect can look on your letter:
As you can see, this option allows you to pick the gradient fill for your letter holder. Of course, you can use any other colors of your choice.
If you end up choosing the Classic option, then you will be able to use only one background color for your holder. We’ve chosen to go with white.
Another option you can use is called Image. As its name suggests, it lets you insert an image of your choosing so that you can use it for the letter background.
Once you pick your image, simply hit the Insert Media button.
This is what your letter can look like after inserting the background image. Feel free to add your own.
Next, there’s the Border Type option that lets you add a border around your letter. You can change your border type to Solid, Double, Dotted, Dashed, and Grooved.
We’ve opted for the Solid type and set its width to 1 pixel.
Then, you have the option to choose the color for your border. Once you click on the color picker, you can either use the hex code or the slider.
Right beneath, there is the Letter Border Radius option that has fields you can use to soften the edges of your border. If you increase the values in these fields, the edges will become rounder.
We wanted to create a circle for our letter border so we’ve given it a value of 50 pixels. Feel free to play around with different values until you find your own perfect pick.
Once you enable the Letter Stroke Effect option, your letter will become outlined and you will get to use a few other options to further change its look.
Here you will also be able to change the Letter Stroke Color and Letter Stroke Width. The latter option will help make the outline of your letter thicker in case you think it’s too thin. Simply increase the value using the arrows in the field until you get the desired width of your letter.
We won’t be using a letter stroke effect in our example, so we’ll turn it off. We just wanted to demonstrate what this option can help you achieve.
There is also the Letter Clip Effect option here, but we are going to show you what it can do on another drop cap example a bit later.
Now, we’ve also mentioned earlier that we are going to show you the rest of the typography options during the customizing of the typography text itself. It’s important to mention that the Text Typography options shown here will apply to the rest of the text, not the drop cap.
Once again, there’s the font family option that we’ve already explored in the beginning (when choosing the font family for our letter), the only difference being it now applies to the rest of the text as well.
The same goes for the Size option – either drag the slider or set your desired custom value.
Now, it’s time to take care of the Weight option. This option allows you to make your text Bold, Normal, Default, or use one of the offered number values. We’ve used the Default weight for ours.
Next, the Transform option allows you to make your text Uppercase, Lowercase, Capitalized, or Normal (the same as our Default).
The Style option also lets you add some additional effects to your text, like italic, normal, or oblique (once again, we’ve used the Default option).
The Decoration option will let you add an Underline, Line-Through, Overline, or opt for None (this was our Default option).
The Line Height option is particularly useful as it can help you adjust the height of the lines with your text. It is set in ems by default, but you can easily switch it to pixels.
Similarly, Letter Spacing lets you add more space between your letters.
And that’s it for the Text Typography options.
Next, the Text Color option is where you will be able to change the color of the text regardless of the color you’ve set for your letter. In other words, you can have two different colors for the letter and the rest of the text.
Now, there’s the Spacing Style tab right underneath that contains a whole other set of options, including Letter Margin and Letter Padding.
The Letter Margin option allows you to adjust the space outside the letter holder. By increasing the values and keeping them all the same, the space around the letter will expand evenly. Or, you can set a different value for each field.
We’ve used 1px for the top margin, and 16px for the right one. Note that you can also use negative values.
Last but not least, the Letter Padding option can be used to add space between the letter and its border. We’ve added 8 pixels of padding at the bottom so that our letter can be positioned at the very center of its circular border.
To save all your settings, click the Publish/Update button at the bottom.
Alternative Styling With the Letter Clip Effect
Now, by combining different widget options, you can create various types of drop caps and make them all look vastly different from one another. To properly demonstrate the range of the Drop Cap widget’s options, we’ve decided to create another drop cap example and style it differently from the first one.
Go back to the widget menu and find the Drop Caps widget once again. Drag it over to the right side of the screen. Once again, we’ve copied the text from the previous example and pasted it into the Content tab on the left (Text field). You can use your own text here.
Head to the Style tab once again. As we’ve already shown most of the options in this tab, we won’t go through all of them again. Instead, we are going to focus on combining another set of style settings to show you what you can create with this widget only if you use a slightly different mix of options.
We’ve set the font size of our drop cap to 95 pixels and its Weight to 700.
Afterward, we’ve chosen the Classic background type and set the background color to white.
Now, here’s the option we promised to show you earlier – the Letter Clip Effect. By enabling this option, you get one additional option that will allow you to choose between a Classic or Gradient background type. You will also notice that the letter has “vanished”, but don’t worry – that is only because the letter has been cut out for the time being.
This effect will allow you to create an entirely different look for your letter. For example, if you choose the Classic background type, you will be able to use a single color or an image for your letter. Or, you can choose the Gradient type and use two different colors for the gradient fill. We’ve opted for the Classic type to demonstrate what you can create by using the Image option.
After you pick your image and hit the Insert Media button, you will see that not only has the letter become visible again, it’s now showing the pattern of the image you’ve added as well.
You will also have a few different options at your disposal here, like the image Position (which is useful if your picture has a distinct pattern and you want it shown properly through the letter).
The next option is Attachment, which allows you to define the image behavior on scroll. You can either choose it to be Scroll (which is also our default option) or Fixed (it creates a parallax-like effect as the user scrolls and makes it seem like the pattern image shifts beneath the letter). Keep in mind that the latter option only works properly on Desktop, so we recommend setting this option to Default instead.
The Repeat option is useful if your image is smaller than the letter size. In that case, choose Repeat in the dropdown. If not, simply set it to No-repeat (like we did).
Moving on, there’s the Size option. You can set it to Auto (which is our default), Cover (which makes the image resize so that it fits the same width as the letter), and Contain (that resizes the image so it matches the letter dimensions). Also, by selecting Custom, you can adjust your image width manually.
Finally, we’ve decided to create an example using another image for our letter to show you how different your letter can look just by changing a single option. Once again, you are free to use any image that fits your own preferences.
We’ve already gone through the Text Typography and Text Color options in the previous drop cap example, so we’re going to skip on those and focus on the Spacing Style tab instead to show you a few different ways in which you can adjust the spacing of your letter.
Our letter doesn’t have a border so we didn’t need to use the Letter Padding. Instead, we’ve set the Letter Margin options.
First, we’ve delinked all the values and set a negative top margin of -4 pixels (using the down arrows in the margin field) to move the letter upward. Also, we’ve added more space on the right (3px) and on the bottom (4px). You can see the result in the picture below:
You can also play around with the Letter Margin options to change the letter position in any way you like.
Once you are satisfied with the look of your letter, go ahead and hit the Publish/Update button.
As you could see from the examples we created above, there are vastly different types of drop caps you can create with the Drop Caps widget in Qi Addons for Elementor, since it comes with a highly flexible set of options. Of course, how you will end up mixing these options is entirely up to you. And if you need some inspiration for creating your drop caps, you can also go to the widget page to see some of the different design examples – or create something entirely unique that works best with the design of your site.
If you prefer to use a plugin that only offers some basic styling options for your drop caps, then we recommend using the plugin called Initial Letter. The styling options that you will be able to use include size, color, and fonts for your drop cap. Also, you should note that if you use the Initial Letter plugin, you will only be able to set the same drop cap style for every page on your site, unlike the Qi Addons for Elementor plugin that allows you to have a different look for your drop cap on every page or paragraph.
After installing the plugin and activating it, head to Settings >> Initial Letter in your WordPress dashboard. Once there, you will be able to set various plugin options and customize the look of your drop cap according to your own preferences.
First, you will be able to select whether you want your drop cap to appear in every post or not.
You will also get to select the font of your letter, as well as its size, right padding, and vertical alignment.
Finally, you will get to customize the color of your letter, choose whether you want to use drop caps for excerpts, and mark or unmark the option that allows you to use the drop cap in the first paragraph only.
Save your changes once you’re satisfied with the options you’ve set. Then, you can go ahead and preview the look of your drop cap on your page or post.
If you’re familiar with coding and you don’t want to use a plugin to add your drop cap (for whatever reason), you always have the option to do this manually using CSS.
To do this, you need to head to Appearance >> Theme Editor in order to access your theme’s css stylesheet (the file called style.css).
Go to the very bottom of your stylesheet and enter the following code:
.post p:first-of-type:first-letter{
font-size: 60px;
color: #161616;
font-weight: bold;
padding: 10px;
float: left;
line-height: 1;
}
By adding this code and hitting the Update File button, you will be able to add a drop cap to the first paragraph of your page or post.
If you are comfortable with CSS coding in general, you can further customize your drop cap in any way you like. For example, you can add your own preferred color, font size, font weight, and floating position, add a different font family (i.e. font-family: “Times New Roman”, sans-serif;), and so on.
Wrapping Things Up
A drop cap is a neat typography element you can use to add an extra touch to your website’s content. Depending on the type of website or blog you own, as well as the overall style of your design, it can also help give a more polished look to your content and emphasize your paragraphs in a way that is unique and professional all at once. In addition to drop caps, WordPress also allows for other interesting textual effects, especially if you have the right tools, like Qi Addons. You can, for instance, highlight certain parts of text. Or, you can add a touch of dynamicity to your textual content by creating a cool text marquee.
As for the drop cap effect, what tool you will go for also depends on your specific requirements. If you’re willing to experiment with the design of your drop caps, or simply prefer to have plenty of options at your disposal, we highly recommend using the Drop Caps widget from the Qi Addons for Elementor plugin. It is intuitive and simple to use, and allows you to completely customize the look of your drop caps, create all sorts of styles, and easily match them with the rest of your website design. On the other hand, if you only wish to add a standard type of drop cap to your WordPress pages or posts, a simple plugin like Initial Letter will suit you just fine. Finally, if you know how to code, you can always add drop caps to your WordPress site manually and customize them according to your preferences using your theme’s stylesheet. No matter which method you choose to go for, just make sure to follow our instructions carefully to achieve the best possible results.
