What takes a site from excellent to nice is consideration to element, specifically in relation to including some fascinating completing touches in your textual content spaces. Many of us spend a very long time perfecting their house web page best to expire of design inspiration when developing pages with a variety of replica and less pictures. Including a couple of easy options will lift even essentially the most text-heavy web page, serving to you so as to add hobby and breaking apart the content material on your readers.
In as of late’s publish I’m going to turn you 5 other ways in which I taste textual content with WordPress and Divi.
Subscribe To Our Youtube Channel
1. Upload Dropcaps
I will be able to’t face up to a dropcap. Actually, I upload them to just about each and every site I design. Dropcaps or preliminary caps are frequently used to nice impact in published magazines and newspapers and they’re very easy to put into effect in WordPress. A dropcap provides any web page segment a piece of writing really feel and you’ll taste your dropcap slightly simply with a contrasting coloration, if you want.
There are many plugins that mechanically upload a drop cap in your first paragraph however I love to have a bit of extra keep watch over. Do you know that the entire topics from Sublime Subject matters have a integrated dropcap shortcode? Even higher, it’s actually simple to taste with CSS the use of the .et-dropcap elegance.
To make use of it, upload the next code both sides of your preliminary capital letter like this:
yourletter
If you wish to taste the ET dropcap otherwise from the usual model, listed below are the strains of CSS you’ll upload in your Divi Customized CSS field within the Theme Choices > Common tab.
The code snippet beneath will will let you trade the font-size, line peak (ie. does the cap fill two strains or 3), trade the font kin and likewise trade the colour. It could take a bit of twiddling with the font length and line peak values to get it simply how you wish to have it.
.et-dropcap {
font-size: 95px;
line-height: 0.7;
coloration: #9ae5d3;
font-family: Occasions;
padding-top: 10px;
}
2. Combine & Fit Textual content Kinds in a Module
In relation to mix and matching fonts in one textual content module, you have got it simple. You don’t want to set up a plugin or any exterior information. All you must do is click on right into a textual content field, and a contextual menu will pop up. From right here you’ll modify the manner, formatting, or even the font kin of any characters you select. You’ll even upload in new H tags and modify colours from right here, too. The rest you spotlight will also be formatted one at a time from the textual content round it.
Additionally observe that you’ll do that with any module that you’ll edit textual content in-line, comparable to Blurbs or Testimonials.
3. The Divi Testimonial Module
Talking of the Testimonial module, it occurs to be one among my favourite techniques to get a divorce a text-heavy web page. It’s very best for developing sexy callouts for your web page, and in case you upload a background symbol and an offset keyline border, your content material will actually stand out. So as to add the border, simply paste this code into your settings. Underneath the Complex tab of the module settings, upload this snippet of code to the Primary Component field of the Customized CSS space. If you wish to have a background symbol, you’ll set it underneath the Content material tab.
define: cast 1px #000; outline-offset: 10px;
The CSS code beneath will make the offset keyline display up across the outdoor of the picture. The code for the offset keyline code will paintings with nearly any Divi module, too. And don’t fear in case you don’t want to use testimonials for your website. You’ll taste the module alternatively you wish to have for plenty of other highlighting choices. In this post, as an example, we use a testimonial module with overlay to spotlight workforce participants.
4. Fullwidth Textual content Blocks
Including full-width textual content blocks can provide your site a actually graceful trendy really feel, specifically in case you upload a cast background coloration to at least one column within the row (or each!) and range the manner or length of fonts you’re the use of.
For this case, we simply want a row with two columns and a textual content field in each and every column. Within the Row Settings, you’ll want to make the row full-width, set the Customized Gutter Width to one, and activate Equalize Column Heights. Relying for your coloration possible choices, it’s possible you’ll want to upload in some customized padding within the Spacing segment.
As soon as all that’s achieved, upload your textual content and feature amusing enjoying with font sizes and styles.
5. The Divi Toggle Module
The Divi Toggle Module is a great tool in relation to dealing with sections of your site that may be a bit of uninteresting, comparable to FAQs. I really like to make use of a mix of open and closed toggles with other styling results, so as to add hobby and get a divorce the web page. Every module is made for a unmarried open/shut toggle, so it is important to upload in as many modules as you wish to have entries to your show. For this one, I used 3 separate Toggle modules.
First, upload a brand new segment and make a selection a 1/3 and a couple of/3 column format. Upload a picture module and button to the 1/3 column. Then, upload the the entire toggles you want into the two/3 column and elegance the textual content and background coloration within the Design tab of each and every module. Individually, I believe alternating the textual content and background colours appears actually great, and it as a bit of of dynamism in your site as your customers click on thru your content material.
Wrapping Up
Getting inventive with textual content doesn’t imply you must stick with textual content modules. Now not best are you able to use the Testimonial and Toggle modules, however you’ll additionally extra attractively show your content material with the Name To Motion, Blurb, and Accordion modules as neatly. Enforcing a few of these concepts would possibly simply prevent from design boredom and your readers from a wall of textual content along with your subsequent mission. Oh, and don’t disregard the ones pleasant Divi dropcaps!
You should definitely subscribe to our email newsletter and YouTube channel in order that you by no means omit a large announcement, helpful tip, or Divi freebie!
.divi_cta{background-color: #8f43ee; coloration: #fff; font-size: 20px; font-weight: daring; padding: 20px; text-align: middle; show: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}
The publish 5 Text Styling Tricks for WordPress and Divi seemed first on Elegant Themes Blog.
WordPress Web Design