Explore Extralight – Premium Extra Child Theme. Extra is the best theme in Elegant Themes list. But, it took me some time (and code) to make it usable in my daily website creation routine.

So, I put together the best classes that help me to achieve a great website design fast and transformed it into Extralight – Premium Extra Child Theme.

Design is all about good choices and repetition.

I know Extra has plenty of modules to choose. But, I only use Text Module, Code Module and Image Module to create my layouts.

The more options you have – the slower will be your website creation workflow.

Extralight – Extra Child Theme Customizations:

Extralight features lots of changes to the default Extra theme. Take a look at the child theme highlights.

Italic

italic

Blockquote

This is an example of a blockquote using Extralight.

Drop Caps

Add a neat drop caps feature in the start of your blog posts. It can also be triggered adding the class dcaps2 inside Custom CSS of the Text Module.

This is an example of a drop caps using Extralight. It’s a pretty neat feature. Check it out!

Dividers

Quickly add dividers after h1 or h2 the d and d-h2 Custom CSS class. Add the dc when text is aligned to center.

Title

Title

Preformatted

Great for pasting code snippets without triggering it for coding tutorials.

<p>This is an example of a preformatted text.</p>

Sticky Widget

The last sidebar widget is always visible – scrolling together – until the bottom of the page.

jQuery Plugin: Sticky Anything

Menu with CTA

Always target a call to action for your website users and upgrade the UX.

In Extralight the last menu item is always highlighted. Learn how to do it here.

Footer reveal effect

The footer of the website has a neat Footer reveal effect. It can easily be created with normal WordPress widgets.

1.000 of lines of code

CSS and jQuery customizations to make your website development workflow easier and faster.

Margin and Padding Classes:

Easily add margin and padding with a simple class addition to Custom CSS tab.

mb0
*Add margin-bottom: 0 to div.

mt0
*Add margin-top: 0 to div.

mb5
*Add margin-bottom: 5px to div.

mt5
*Add margin-top: 5px to div.

mb10
*Add margin-bottom: 10px to div.

mt10
*Add margin-top: 10px to div.

mb15
*Add margin-bottom: 15px to div.

mt15
*Add margin-top: 15px to div.

Important:

Add the suffix -p to target only p elements of the div and -p-last to target only the last p element of the div.

Example:

mb0-p-last

Add margin-bottom: 0 only to the last p of the div.

p15
*Add padding: 15px to element.

p30
*Add padding: 30px to element.

pb5
*Add padding-bottom: 5px to element.

pt5
*Add padding-top: 5px to element.

pb10
*Add padding-bottom: 10px to element.

pt10
*Add padding-top: 10px to element.

pb15
*Add padding-bottom: 15px to element.

pt15
*Add padding-top: 15px to element.

General CSS Classes:

bg
*Add background pattern to Module.

Preview

bg p30
*Add padding: 30px to Module.

Preview

bg p30 ts
*Add text shadow to Module.

Preview

bg p30 mb0-p
*Add margin-bottom: 0 to p tags.

Preview

bg p30 mb0-p bs0
*Add box-shadow level 0 to Module.

Preview

bg p30 mb0-p bs1
*Add box-shadow level 1 to Module.

Preview

bg p30 mb0-p bs2
*Add box-shadow level 2 to Module.

Preview

bg p30 mb0-p bs3
*Add box-shadow level 3 to Module.

Preview

bg p30 mb0-p bs4
*Add box-shadow level 4 to Module.

Preview

bg p30 mb0-p bs0 up
*Add a border to the top of the Module.

Preview

bg p30 mb0-p bs0-a up
*Add box-shadow level 0 with mouse hover animation.

Preview

bg p30 mb0-p bs1-a up
*Add box-shadow level 1 with mouse hover animation.

Preview

bg p30 mb0-p bs2-a up
*Add box-shadow level 2 with mouse hover animation.

Preview

bg p30 mb0-p bs3-a up
*Add box-shadow level 3 with mouse hover animation.

Preview

bg p30 mb0-p bs0-a up lev
*Add levitation on mouse hover.

Preview

fs10
*Add font-size: 10px to Text Module.

Preview

bw
*Add color to image on mouse hover.

Loop animation on viewport

Add micro animations to enhance your website user experience when they are on a specific section of your website. The animation will start again when the user scrolls back again. Add the following classes inside Modules custom CSS to activate them.

et-waypoint et_pb_animation_fade_in
*Add fade in animation to target Module.

et-waypoint et_pb_animation_top
*Add fade in animation to target Module.

et-waypoint et_pb_animation_right
*Add fade in animation to target Module.

et-waypoint et_pb_animation_bottom
*Add fade in animation to target Module.

et-waypoint et_pb_animation_left
*Add fade in animation to target Module.

Button CSS Classes:

Create custom buttons by adding the following code inside Code Module:

<a href="#" class="mdb grey">Button</a>

mdb grey
*Create a grey Material Design Button.

mdb purple
*Create a purple Material Design Button.

mdb green
*Create a green Material Design Button.

mdb blue
*Create a blue Material Design Button.

mdb yellow
*Create a yellow Material Design Button.

mdb orange
*Create a orange Material Design Button.

mdb grey br
*Create a raised grey Material Design Button.

mdb purple br
*Create a raised purple Material Design Button.

mdb green br
*Create a raised green Material Design Button.

mdb blue br
*Create a raised blue Material Design Button.

mdb yellow br
*Create a raised yellow Material Design Button.

mdb orange br
*Create a raised orange Material Design Button.

mdb grey br re
*Add ripple effect on click.

mdb purple br re
*Add ripple effect on click.

mdb green br re
*Add ripple effect on click.

mdb blue br re
*Add ripple effect on click.

mdb yellow br re
*Add ripple effect on click.

mdb orange br re
*Add ripple effect on click.

mdb grey br re lev
*Add levitation on mouse hover.

mdb purple br re lev
*Add levitation on mouse hover.

mdb green br re lev
*Add levitation on mouse hover.

mdb blue br re lev
*Add levitation on mouse hover.

mdb yellow br re lev
*Add levitation on mouse hover.

mdb orange br re lev
*Add levitation on mouse hover.

(Adding cta class to section) mdb grey br re
*Create a full-width call to action button.

Important: you can create a cta with all colors listed above.

SVG Animation:

Open a Code Module and add the SVG code. If you want to write after the SVG icon add the class animate svg-inline:

<svg></svg><p>Your Title Here</p>

How to add SVG animation

animate
*Creates a 50px SVG animation.

animate delay
*Starts animation 1 second after page load.

animate small
*Creates a 32px SVG animation.

animate svg-inline
*Creates a 32px inline SVG animation.

Your Title Here

animate large
*Creates a 100px SVG animation.