How To Add GLOBAL Drop Caps In Divi Posts

hi i'm victor at evimundo.com and today we're going to create a nice retro design adding a global drop cap to all your posts we're going to use the divi theme and some custom css so let's start [Music] all the resources needed can be found in this blog post on dvimund.com and if you're watching this directly on youtube you'll find the link in the description below the video so let's get started and the first step is to add a css class to our custom body template so i'll head over to my wordpress dashboard on my divi website and i'll go to divi and theme builder and from here i'll find my post template and the custom body part of it and if you don't have a post template in the divi theme builder that means that you probably are using the default tv blog template that looks something like this and there are actually a css snippet in the end of the blog post that lets you create a global drop cap for this default template as well so head over there to find it in the bottom of the post but i would highly recommend you to create a global template for your posts in the theme builder since you can do so much more here so i'll head into my custom body for my post template and by the way you can actually download a free post template with the global drop cap included in the blog post so i will show you how to do that in the end of this video but first we will focus on how to do it from scratch okay so in the post template i will look for my post content module and that's this one that will display the text and the images and the other content that you will put into the post when you publish it in classic editor or gutenberg or even the tv builder so i'll open the cogwheel for the post content and i'll head to the advanced tab and i'll go to css id and classes and i'll add the css class dm hyphen drop cap okay so i want to target this first letter in every blog post on my website that uses this template so that's what we are going for i'll exit and i will save my changes okay next step is to go to the theme customizer under the dv tab because now we are going to add our drop cap css and i'll go to additional css i can close that one and now i'll head back to the blog post to find the css snippet and there we go so i'll copy that one and i'll paste it in the additional css well before we do that i can actually go to the news and i'll open a blog post so we can see before and after so here we have a blog post and you can see that there is no drop cap here and if i paste the text of the css voila we have a nice drop cap so what we have done here is that we will target the class that we just created in the post content module in the template and we added dm hyphen drop cap so that's what we are targeting we will target the first letter in that element and you can see a few settings here like the font size 75 pixels you can change that of course if you want to have it bigger or smaller float left you should probably not change because that would look strange but you can also change the padding if you think you want more or less padding the line height and also the color of course and let's publish and we can have a look here at the different posts and we have a third one starting with an l so that's how it looks and now it's inheriting the font that is used in the text here the body copy of the post so that's the same font so the next step we're going to change this font because i think it has a nice retro feeling if you add a serif font or a more classic font that will deviate a little bit from the rest of the font you are using let's head back to the blog post and change the drop cap font and we'll start by the easy way and that's by using a font that is already processed on the website and there we have six fonts uh the classic ones are ariel georgia times roman trebuchet maybe and verdana so i will use georgia that's a nice serif font with a classic look i will copy that snippet and i will head back to my additional css and i will replace the old snippet with a new one okay so now we can see that the font changed and the new thing in this code is actually just this one the font family is saying it should be georgia and then we have some backup fonts if the font georgia can't be read i'll publish and maybe the o you can't really see the serif part so let's refresh this one with an a there you can see a nice serifs and we have the l as well there we go so this looks really nice i think maybe you want to change it to another custom font like any google font out there and that's a little bit more tricky but there's a way to solve that or actually there are two ways that i'm going to show you so if we scroll down we're going to try it out with this funky font it's called hennypenny and you could of course use any google font or any other font for that sake but i will use the hennypenny font in this example okay so i will start by copying this css snippet and i will add it replace the old one and you can see a small change there but if we go to the blog post with an a there we go and i refresh it but it's not any penny it's a backup font so this is actually how the hennypenny font looks why isn't that one displayed the reason for this is that tv will only read the fonts that are actually used used on the post or the page that you are visiting and this is a really good thing because if it would read thousands of fonts the page speed would be horrible how do i make tv to read this font so i can actually display it in front end well there are two ways and first i'm going to show you an easy hack that's the quick way of doing it without code but it's not maybe the most beautiful way but it works so if i head back to my site and i'll exit the theme customizer and i'll head back to the theme builder i'll go to my posts template and the body template so now i'm going to trick divi into thinking that the fontany penny is used in this post so i'll open my post content module i go to the design tab and now i'll have to find a text style that is not used in this post template for example example heading text i haven't styled the age the heading six and that's rarely used i would say so i go to the h6 that i will never use in a post and i'll choose the heading for font i will search for henny and there we have it henny penny and now i will save the template so let's refresh this one now after we added the h6 with hennypenny and there we go the font is actually red so i know that this is kind of a hack or a workaround but i mean it works and it's easy and you don't have to to do any coding but i will also show you the more correct way of doing it with code if you like to keep it neat and clean i'll head back to the theme builder and i will remove the h6 so i'll go back there to the heading text and i'll just say that the h6 should have the default font and i'll save it and now if i return to my blog post and i would refresh this one you will see that the hannah penny font is not red anymore oh maybe it's cached i'll try it again there we go okay so the correct way of doing this is to go to the google fonts website and i can search for any penny the font that i'm using and from here you'll click the link select this style and that will expand a sidebar and from here you can actually embed a code to include it on your website so i will copy this little snippet and i will choose the link one and not import because the link one would probably be better for your page speed and as you can see here it says to embed the font copy the code into the head of your html so that's what we are going to do so i'm back at in my wordpress website i'll close the theme builder i will go to the theme options in divi and from here i will go to the integration tab and add code to the head of your blog and blog would also mean the head of the entire website so i'll just paste this snippet from google and i'll save the changes now if i refresh this post the henny penny font should be read and displayed as a drop cap and there we go it worked [Music] last but not least i will show you how to download a pre-made template with the global drop cap so in the blog post you can just enter your email address to subscribe to the divi mundo newsletter there are some nice tutorials and free stuff included in there so click download and there we have the link to a zip file and if i expand it i will find a text file how to import with a step-by-step instruction and the actual layout in a json file so if i head back to my wordpress dashboard i'll go to divi and the theme builder now if you already have a custom body for your posts you can just click the pen now you can drag the json file into the content area and just drop it you want to replace the existing content and you would probably like to download a backup before importing so you can import your old layout again if you would like to go back to that one i'll click import to the db builder so first my backup is downloaded and now the new layout is imported so i'll just have to click save and i'll close so if you don't have this template for your posts i'll just remove it you can create it by clicking add new template and then you choose to display it on all your posts you can also display it on your products if you have woocommerce installed or all your custom post types or whatever or just some specific categories in your blog etc but i'll go for all posts in this example i'll create the template here we go and it will inherit the global header and footer by default so now i want to add the custom body so i'll choose build custom body and now it's empty just an empty section there so i will drag and drop the json file again and i want to replace the existing content which is the empty section and since there's nothing here i don't need to download a backup before importing so i click import to the db builder and that was quick and now the template is imported and just a heads up you cannot see the drop cap here in the theme builder i'm not sure why that's the case but if you save it save the changes and let's have a look at the post take this one and let's preview it in front end you can see that the drop cap is there in front and so you your visitors will see it and i guess that's the most important thing okay that was all for today let me know what you think in the comments below and don't forget to subscribe for more videos coming your way thanks for watching [Music] [Applause] [Music]

Channel: DiviMundo

Views: 50

Keywords: divi drop cap, divi drop caps, divi dropcap, divi dropcaps, divi font styling, divi blog design, wordpress drop cap, wordpress drop caps, wordpress dropcap

Id: HJtsUue5GSU

Length: 13min 4sec (784 seconds)

Published: Sun Dec 12 2021