How to add a capital letter

E s question of likes but there are people who love capital letters, also known as capitular letters . They are those letters at the beginning of a paragraph that are of a size markedly superior to the rest widely used in ancient medieval books.

I mean something like this …

[19659003 You will also have seen them in books and even newspapers because it is a detail of style that many designers like and, in the end, readers who get used to seeing this type of ornaments, style.

Well, if you are of classic taste and want to add capital letters in Divi perhaps you should know that is something that is already included by default in Divi and in all the themes of Elegant Themes .

How to add Capital Letter in Divi

So creating a capital letter in Divi is as easy as wrapping it in this shortcode :

] So, if you have a text of this type:

You just have to add the shortcode to get your capital letter:

You would pass this …

To this other …

It is a matter of taste in any case. [19659003] Now, if you do not like the default styles, then p art of the beauty of the capital letters is that they are distinguished from the rest of the typefaces, you can add the styles you want

How to change the styles of capital letter in Divi

To change the style by default of the capital letter to another that you like more you just have to add some code to your custom CSS either in the WordPress customizer or in the general Divi options ]something like this for example:

With what you would have this other …

Another way is to add the styles online, within shortcode something like this for example:

As you see, the capital letters are a great resource of style for many types of webs, which can attract the attention of the reader, something that you should never underestimate. [19659003] They are also not to be included in all the paragraphs, so it's not usually a good idea to include them by default, but you can give your publications a "class" by choosing where to put a capital letter.

Loading …

That may also help you:

How to have Capital Letter in your Blog • WordPress Help

and a lot of people who like to use the capital letter in their blogs. I refer to that nice effect that we see in books and newspapers that show the first character of a text in a size, even typography, different.

I have used it a long time in CiberPrensa and, as every now and then I am asked by a reader, I have encouraged myself to do a guide in which to show the two ways (that I know) of putting Capital Letter in your Blog

The Simple Mode

There is a way to get it in the fastest and easiest way, using a plugin. It is not a bad option if you want to obtain a quick result but it has the disadvantage that you do not completely control the aspect of the capital letter .

The process is this:

  1. Download the plugin DropCap First
  2. Unzip it on your computer and upload the "dropcap_first" folder to the plugins directory of your server (/ wp-content / plugins /)
  3. Activate the plugin

If you dare , you can retouch some of the plugin's CSS by modifying the file 'dropcap_style.css', located in the plugin folder.

HTML mode

Here we already talk about older words (never better said) Not only will you be able to configure the CSS style in a basic way, but you can even use special HTML marks or, more interestingly, use images as a capital letter. In addition, we will automate it with a PHP function.

To give a different style to the first letter of a paragraph we need to frame it in a special HTML element to which we will then add a bit of CSS to put it to our liking. We will use an element ' span ' with the class ' letracapital '. The resulting paragraph would read something like this:

Remember to not repeat the letter after of 'span'


Here you have to be a little thin because each template has different values ​​of line height and font size, so you'll have to adapt this part to your theme. We will assume, for the example, that your standard paragraph has a font size of 14 pixels and a line of 18 pixels.

1. Floating ! – We have to make our capital letter "float" to the left so that the paragraph text flows around it.

2 . Font Size – We assign a font size of 40 pixels (remember that this can vary depending on the default values ​​of your template), and a line height of 35 pixels, which is twice the line height of the standard paragraph minus 1 pixel (in this case only).

3. More Style – We will use a serif font, put it in blue and add a bit of space to the right so that it does not mix with the paragraph.

The normal thing is that you have to play a bit with the font size and line height to adjust it to your template. This is your task and what will offer you a personal style

Automating that is gerund

Perfect, you have already added the necessary CSS to your file style.css . But what would be a nuisance to have to add HTML marks every time you write a new article ?. With this bit of PHP we will get WordPress to do it for you:

How does this code work? Basically, take the content of the post and wrap the first letter with sample special mark.

All you have to do is paste this code into the file ' functions.php ' of your template.

Now you choose which of the two systems you prefer. The first one gives you immediate and effortless results, but the second one is much more complete and will allow you to distinguish your blog from the rest of the world [1945911]

NOTICE : this publication is from two years ago or plus. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

Loading …

That may also help you: