Shortcodes – Create a Dropcap

This is a quick and easy tutorial on creating a dropcap for your post or page content. If you want to know more about dropcaps, you can do a search on Google, but basically this lets you add some enhanced style to the beginning of your post’s first paragraph like you see in the screenshot below;

dropcap

Dropcaps are applied to the first letter of the first paragraph and should be styled to take up the first 3 lines of content. They can styled in many ways, but what you see in the screenshot above is what this theme provides you; keeping it fairly simple.

Create a Dropcap

When you have at least your first paragraph written, place your mouse cursor right at the beginning of the first sentence and then on the editor, click on the “Dropcap” button.

dropcap editor button

This will insert the following shortcode:

[incept_dropcap]Add your dropcap letter here[/incept_dropcap]

Replace the “Add your dropcap letter here” placeholder text with the first letter of the first word of your first paragraph. Click “Update” or “Publish” for your post.

Adding more style or colour to the dropcap can be done by creating custom CSS to your website, either through a CSS plugin or a child theme’s style.css file. Default styling for a dropcap is:

.dropcap {     font-family: georgia,serif;     float: left;     font-style: italic;     font-size: 4.5rem;     line-height: 0.5;     margin: 0.813rem 0.5rem 0 0; }

For example, if you want to add a colour to it, you would do something like this:

.dropcap {     color: #cc55ff; }

You can add more to that if you wish…even changing the font family.