Text Styles

It's a great text option to include a sidenote text to your pages, in case you want to explain in more detail something or add additional text notes to your page content. You can add a sidenote by including your sidenote text in a WordPress custom field and give your custom field the name "sidenote".

You can add an intro text in a bigger font size to your posts and pages by wrapping a paragraph in a p tag with the CSS class of “intro”. Natoque sed montes. Nisi duis mus tincidunt ultrices sociis habitasse mid. Ut dis, pulvinar lorem sociis et. Rhoncus et placerat integer enim porttitor magna rhoncus.

Dropcap can be added by wrapping the first letter of the first word in a paragraph in a span tag with the CSS class of “dropcap”. In ultrices dis lectus, dictumst turpis, sociis tempor, pellentesque ultrices ac elit eros ut, rhoncus odio enim nec porta etiam. Sed ac lorem hac lorem. Rhoncus. Egestas non? Augue, magnis mus enim pulvinar duis odio! Ac. Amet phasellus elementum! Massa! Ac dolor. Lorem in integer augue magna hac! Quis massa, augue et pulvinar porta. Integer habitasse hac sed purus ut magna, ultrices, nisi risus porttitor cum aliquet aliquam, amet, rhoncus amet tincidunt, eros eu tempor vel! Urna integer? Arcu eros, sit augue purus pulvinar, augue montes? Proin egestas amet facilisis tincidunt, est mattis ac scelerisque elit elementum odio amet dolor? Cum nec, montes pellentesque?

You can highlight an important quote or sentence by adding it in a pull quote and wrap the text in a p tag with the CSS class of pull-left or pull-right.

Lectus phasellus urna aenean velit porttitor phasellus aenean porta lacus sagittis adipiscing in ut amet, pellentesque, vel? Vut dignissim, proin, cras diam, scelerisque aenean cras sed, pulvinar turpis? Enim in nascetur. Proin? A placerat lacus diam penatibus! Mus lorem lorem nisi vel habitasse montes! Lacus platea. Natoque sed montes. Nisi duis mus tincidunt ultrices sociis habitasse mid. Ut dis, pulvinar lorem sociis et. Rhoncus et placerat integer enim porttitor magna rhoncus! Placerat scelerisque pulvinar quis in a hac tincidunt hac turpis risus? Dictumst, in aliquet porta, odio. Non. Natoque tortor rhoncus, pulvinar ut, ac ac, lectus scelerisque vel cursus? Scelerisque? Mauris ac dolor? Cras magnis turpis nascetur ultrices elementum natoque mus turpis etiam?

You can highlight an important quote or sentence by adding it in a pull quote and wrap the text in a p tag with the CSS class of pull-left or pull-right.

Pellentesque risus tristique! Sed integer et nec dictumst dignissim lectus, lundium proin adipiscing dictumst sagittis arcu, aliquam nec, placerat. Augue? Placerat! Tincidunt, placerat placerat mid porta risus? Sed, tempor, turpis cras pulvinar dignissim, tincidunt eros amet, vel tincidunt porta purus, etiam, phasellus, magna porta purus amet turpis, adipiscing. Phasellus odio, nunc lorem vut elementum, a turpis phasellus? Sit, augue in lorem. Elementum aliquam habitasse, nisi augue in pulvinar, dictumst adipiscing? In, pulvinar. Nunc dapibus magnis mauris vut ac, a purus, scelerisque nisi!

Adding a two-Column Text Area

You can add any text in a two-column layout by wrapping your text in an additional div container with the CSS class of “twocolumn”. Risus turpis turpis adipiscing vut, amet. Auctor? Adipiscing nec parturient nunc in magna. Dignissim dignissim turpis? Pulvinar, egestas ac! Sit, tempor, aliquam augue scelerisque elementum placerat dolor, dapibus aenean, duis, nunc magna. Augue turpis nisi parturient egestas! Vel scelerisque pulvinar, hac! Sit et lacus scelerisque nisi in, penatibus, aliquet ac nec? Duis montes? Sit rhoncus sit! Odio ac, tempor vut, mid aenean risus, lundium purus augue sed, sociis etiam. Odio placerat ultricies tincidunt sed in. Urna etiam adipiscing amet nec elementum vut cursus. In. Rhoncus urna nec, amet turpis, cras amet, odio proin auctor rhoncus, phasellus aliquet est est! Cum et. Penatibus augue augue magna placerat porta, cum in. Nunc sed ultricies eros? Vut risus, magnis purus ac mattis proin sociis purus? Tincidunt nec hac et lacus tincidunt odio auctor elementum? Nascetur sociis, tincidunt ac amet dictumst mid elit. Montes, diam est placerat placerat montes, magna cursus duis duis.

This is a text area with a two-column layout
Adipiscing nisi ut risus in! Habitasse purus vel. Porttitor enim porttitor augue adipiscing? Nisi parturient ridiculus magna tempor proin! Et magna, augue ac. Tempor mauris platea odio, cursus augue sociis rhoncus a urna vel adipiscing. Porttitor lorem sed vel in augue nisi nascetur enim, in augue porttitor elementum eros ac porta pid tristique sed eu elementum in sed vel? Sit? Montes! Et elit diam platea cras tincidunt lorem penatibus. Proin urna, porttitor ultricies nisi, phasellus nunc, odio, adipiscing auctor ridiculus dignissim adipiscing nisi placerat sit sociis hac tincidunt dignissim, integer ac. Scelerisque, habitasse, pellentesque magna sociis platea ultricies, mauris eros porttitor? Magna vut? Nec tristique cras adipiscing phasellus rhoncus vel platea nisi ac, duis aliquam penatibus? Et scelerisque porta eros proin, porttitor augue urna est massa turpis sed lectus ut in, habitasse sociis! Adipiscing porttitor sed quis parturient rhoncus lacus lectus? Eros tincidunt, nunc porttitor magna scelerisque ut dolor.

Styling Your Content
Elementum penatibus amet lorem in turpis in — turpis, amet parturient pid cursus dis et lundium, ultrices turpis. Tristique parturient arcu vut, nunc magnis diam magnis eu, pulvinar ac odio ut. Tincidunt amet sit, eu vel pulvinar rhoncus ultricies est, nec urna? Elementum etiam velit sit mid integer, lectus lundium, magna mattis vel. Et mid parturient et urna, augue aliquet vel pulvinar aliquet sed augue sociis odio, tincidunt integer odio ridiculus in, adipiscing egestas dictumst odio, pellentesque turpis! Porta aenean, nunc sed in turpis? Vel porta vel ac? Aliquam penatibus nunc rhoncus sed ridiculus in proin? Sed pulvinar dictumst dolor a porttitor, est ridiculus. Nunc porttitor integer adipiscing et duis natoque! Eros nunc mid. Platea auctor integer vut tincidunt natoque augue scelerisque ac dapibus integer lectus elementum quis, montes aenean massa, enim? Integer porta nunc nec lacus elit dignissim nunc non cum ut egestas vut pulvinar vut egestas.

Include Beautiful Quotes

To add a quote to your text you can use the “quote” button in the visual editor or the “b-quote” button in the text editor. To add the author you can wrap the author name in a cite tag. you can use the Velit habitasse ac dolor! Sed. Nascetur! Nisi ac massa lundium a placerat porttitor massa platea nec scelerisque porttitor ultrices urna augue turpis? Est risus dignissim? Vel etiam, urna diam! Ridiculus mid dolor odio. Mus porttitor nascetur integer, nisi cum penatibus nec, auctor dolor rhoncus, aliquam pid adipiscing montes scelerisque, duis penatibus rhoncus habitasse?

“It’s your life — but only if you make it so. The standards by which you live must be your own standards, your own values, your own convictions in regard to what is right and wrong, what is true and false, what is important and what is trivial. When you adopt the standards and the values of someone else or a community or a pressure group, you surrender your own integrity. You become, to the extent of your surrender, less of a human being.”
by Eleanor Roosevelt

Tincidunt dignissim porttitor, parturient ut dictumst porta pid adipiscing mid pulvinar scelerisque penatibus, rhoncus mattis enim porttitor ridiculus. Pulvinar dis eu! Aliquam, ut magnis. Mattis nisi! Ac elementum parturient, lundium? Mattis porttitor, ultrices nunc nisi nunc! In tincidunt phasellus mus? Lectus augue dapibus lorem lacus habitasse integer nisi vut penatibus? Lectus pellentesque, lorem turpis, enim magna? A! Adipiscing a tincidunt, natoque tincidunt integer! Odio purus? Porttitor? Aliquam phasellus. Elementum porttitor, ridiculus in! Auctor adipiscing enim parturient egestas scelerisque integer integer vut! Sagittis ac ultrices, nec integer, lacus pulvinar tempor duis, tincidunt mid purus, pellentesque elementum elementum.

Add A Lists to your Content

Amet, nisi rhoncus parturient mattis! Adipiscing augue sit odio amet. Porta cras, proin mid lacus dolor sed vel? Odio urna eros pellentesque ultricies urna, pulvinar tortor, ac, tempor rhoncus porta egestas dictumst! Lectus odio facilisis sit. Augue habitasse! Magna porttitor, amet amet nec turpis! Cum? Odio, elit, vel elementum cras vel mattis magna enim velit, lectus tristique penatibus lundium nascetur a. Ut? Scelerisque, porttitor cursus lectus ultricies auctor sociis, porta porta dapibus cum dis sit! Ut parturient, risus turpis scelerisque, ut in.

  • Lacus dictumst mid est, hac in ac urna scelerisque mid adipiscing.
  • Integer augue aenean tortor parturient pulvinar adipiscing proin amet.
  • Magna platea habitasse mid turpis dis montes eros diam.
  • Sed elementum porttitor, pulvinar, ultricies lacus sociis auctor.

Next to unordered lists with the ul tag, of course you can also add an ordered list with the ol tag. Lists make your content more readable and it will be easier for your readers to gather the important facts.

  1. Lacus dictumst mid est, hac in ac urna scelerisque mid adipiscing.
  2. Integer augue aenean tortor parturient pulvinar adipiscing proin amet.
  3. Proin ut lacus pulvinar turpis egestas nascetur hac, ultricies, rhoncus nunc sit mauris eros dignissim tortor. Dignissim cras nisi.
  4. Magna platea habitasse mid turpis dis montes eros diam
  5. Sed elementum porttitor, pulvinar, ultricies lacus sociis auctor.


Employee Salary
John Saddington $1 Because that’s all Steve Job’ needed for a salary.
Tom McFarlin $100K For all the blogging he does.
Jared Erickson $100M Pictures are worth a thousand words, right? So Tom x 1,000.
Chris Ames $100B With hair like that?! Enough said…

Definition Lists

Definition List Title
Definition list division.
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly will explain this one.

Some Default Text Styles

Mus, ultricies sed elementum egestas ut! Porta nascetur purus integer, lundium nec, adipiscing et, lundium. Mattis integer vel cum odio sagittis augue? Urna magnis sit a tempor mauris, platea amet magnis scelerisque in a, ultrices mus massa placerat nec, augue penatibus habitasse ultricies augue augue magna sit. Pid quis dignissim. Tincidunt ac odio dictumst!

Ut sit pulvinar nec mark your text in a light green color by adding an “ins” tag. Scelerisque pulvinar etiam enim scelerisque, rhoncus ultricies massa porta mauris ultricies elit vel cras platea urna? Et ultrices sagittis cursus, massa amet! Rhoncus dapibus massa et dolor, tortor sociis, nisi placerat nascetur sociis elementum habitasse diam ultrices, quis vut, porta risus massa eu egestas augue! Eros habitasse augue dapibus!

This tag styles large blocks of code.

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
	and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;

Nascetur! Ac nascetur adipiscing porta mauris augue est dolor a sed nec habitasse cursus. Turpis augue auctor ac, dictumst nunc aliquet. Urna elementum! A dis mattis sed in mid eu a integer? Integer ultricies sed! In turpis et? Eu urna? Enim placerat scelerisque sit dignissim, ac dictumst, natoque elementum. Quis quis porttitor nisi? Adipiscing turpis, ultricies! Pid! Rhoncus platea. Integer, proin duis lundium ridiculus?

Add a note paragraph at the bottom of your page by wrapping the paragraph in a p tag with the CSS class of “note”. You can refer to a source or explain an expression you made earlier.