General

Countdown

Default

Use a well-styled element to announce different schedules
like the opening of your store, website and much more.

Inline

Use a well-styled element to announce different schedules
like the opening of your store, website and much more.

Custom Labels

Use a well-styled element to announce different schedules
like the opening of your store, website and much more.

Spacing

Use a well-styled element to announce different schedules
like the opening of your store, website and much more.

Container Width

Use a well-styled element to announce different schedules
like the opening of your store, website and much more.

Custom Colors

Use a well-styled element to announce different schedules
like the opening of your store, website and much more.

Custom Typography

Use a well-styled element to announce different schedules
like the opening of your store, website and much more.

Custom Spacings

Use a well-styled element to announce different schedules
like the opening of your store, website and much more.

Button

Default

Powerful element button can be called anywhere with
multiple choices of color, size and much more


X Small


Small


Medium


Large


Extra Large


X Small


Small


Medium


Large


Extra Large


X Small


Small


Medium


Large


Extra Large


X Small


Small


Medium


Large


Extra Large

Button Padding

Powerful element button can be called anywhere with
multiple choices of color, size and much more


Padding 8PX


Padding 12PX


Padding 16PX


Padding 20PX

Button Radius Sizes

The angles of the borders can be curved to a different 
radius for each border alone or together as one.


Radius 2PX


Radius 10PX


Radius 18PX


Radius 50PX

Button Border Type

Variety of border types can be applied for each button
differently, also the size can be changed for each corner.


Solid


Double


Dotted


Dashed

Button Border Width

The border width can be easily enhanced for each
corner differently, or you can link them all together.


Width 1PX


Width 2PX


Width 3PX


Width 4PX

Button Left Icon

You can insert any icon from the font awesome
library right before the button text or after it.


Before Icon


Before Icon


Before Icon


Before Icon

Button Right Icon

The border width can be easily enhanced for each
corner differently, or you can link them all together.


After Icon


After Icon


After Icon


After Icon

Button Type

Different types can be selected for the button, when you
select over a type of button new skin will be attached.


Default Type


Info Type


Success Type


Warning Type

Button Color

The colors from the default are not the only that you can
apply to a button, freely to select any color from color picker.


Custom Color


Custom Color


Custom Color


Custom Color

Button Hover Color

The same options are attached for the button hover,
freely to select any color from color picker.


Custom Color


Custom Color


Custom Color


Custom Color

Button Hover Animation

More than 30 hover animations can be chosen,
for the animation of the button on mouseover.


Grow Animation


Shrink Animation


Pulse Animation


Pulse Grow Animation

Button Typography

Change the font family from more than 600 google fonts, or other 
font properties like letter spacing, line-height and much more.


Inconsolata


Playfair Display


BioRhyme


Archivo Black

Button Box Shadow

The box shadow can be combined with all the
perspective properties like blur, spread and lines.


Custom Shadow


Custom Shadow


Custom Shadow


Custom Shadow

Contact Forms

Creative Style

Create your contact forms easily via the most used
plugin Contact Form 7, the fields are powered by ajax.

Error: Contact form not found.

Creative Style

Create your contact forms easily via the most used
plugin Contact Form 7, the fields are powered by ajax.

Error: Contact form not found.

Classic Style

Create your contact forms easily via the most used
plugin Contact Form 7, the fields are powered by ajax.

Error: Contact form not found.

Classic Style

Create your contact forms easily via the most used
plugin Contact Form 7, the fields are powered by ajax.

Error: Contact form not found.

Contact Forms

Creative Style

Error: Contact form not found.

Creative Style

Error: Contact form not found.

Classic Style

Error: Contact form not found.

Classic Style

Error: Contact form not found.

Dividers

Solid

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque, risus eu venenatis posuere, est lectus feugiat lectus, euismod elementum tortor erat at libero. Nullam nec neque nec leo convallis placerat id at dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin pulvinar mattis libero, vitae dictum velit aliquam ac. Aenean ligula libero, accumsan iaculis elit ac, tempor semper nibh nunc sollicitudin cursus ante nec rhoncus.

Double

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque, risus eu venenatis posuere, est lectus feugiat lectus, euismod elementum tortor erat at libero. Nullam nec neque nec leo convallis placerat id at dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin pulvinar mattis libero, vitae dictum velit aliquam ac. Aenean ligula libero, accumsan iaculis elit ac, tempor semper nibh nunc sollicitudin cursus ante nec rhoncus.

Dotted

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque, risus eu venenatis posuere, est lectus feugiat lectus, euismod elementum tortor erat at libero. Nullam nec neque nec leo convallis placerat id at dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin pulvinar mattis libero, vitae dictum velit aliquam ac. Aenean ligula libero, accumsan iaculis elit ac, tempor semper nibh nunc sollicitudin cursus ante nec rhoncus.

Dashed

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque, risus eu venenatis posuere, est lectus feugiat lectus, euismod elementum tortor erat at libero. Nullam nec neque nec leo convallis placerat id at dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin pulvinar mattis libero, vitae dictum velit aliquam ac. Aenean ligula libero, accumsan iaculis elit ac, tempor semper nibh nunc sollicitudin cursus ante nec rhoncus.

Custom Weight

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque, risus eu venenatis posuere, est lectus feugiat lectus, euismod elementum tortor erat at libero. Nullam nec neque nec leo convallis placerat id at dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin pulvinar mattis libero, vitae dictum velit aliquam ac. Aenean ligula libero, accumsan iaculis elit ac, tempor semper nibh nunc sollicitudin cursus ante nec rhoncus.

Custom Color

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque, risus eu venenatis posuere, est lectus feugiat lectus, euismod elementum tortor erat at libero. Nullam nec neque nec leo convallis placerat id at dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin pulvinar mattis libero, vitae dictum velit aliquam ac. Aenean ligula libero, accumsan iaculis elit ac, tempor semper nibh nunc sollicitudin cursus ante nec rhoncus.

Custom Width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque, risus eu venenatis posuere, est lectus feugiat lectus, euismod elementum tortor erat at libero. Nullam nec neque nec leo convallis placerat id at dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin pulvinar mattis libero, vitae dictum velit aliquam ac. Aenean ligula libero, accumsan iaculis elit ac, tempor semper nibh nunc sollicitudin cursus ante nec rhoncus.

Left Alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque, risus eu venenatis posuere, est lectus feugiat lectus, euismod elementum tortor erat at libero.

Center Alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque, risus eu venenatis posuere, est lectus feugiat lectus, euismod elementum tortor erat at libero.

Right Alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque, risus eu venenatis posuere, est lectus feugiat lectus, euismod elementum tortor erat at libero.

Custom Gap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque, risus eu venenatis posuere, est lectus feugiat lectus, euismod elementum tortor erat at libero. Nullam nec neque nec leo convallis placerat id at dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin pulvinar mattis libero, vitae dictum velit aliquam ac. Aenean ligula libero, accumsan iaculis elit ac, tempor semper nibh nunc sollicitudin cursus ante nec rhoncus.

Google Maps

Zoom – 10

Share easily your location via the google maps element, 
you can change the style to fit with your website.

Height – 450px

Share easily your location via the google maps element, 
you can change the style to fit with your website.

Default

Share easily your location via the google maps element, 
you can change the style to fit with your website.

Blur

Share easily your location via the google maps element, 
you can change the style to fit with your website.

Contrast

Share easily your location via the google maps element, 
you can change the style to fit with your website.


Saturation​

Share easily your location via the google maps element, 
you can change the style to fit with your website.

Hue

Share easily your location via the google maps element, 
you can change the style to fit with your website.


Grid System

1/1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate pulvinar arcu a posuere. Aliquam malesuada rutrum velit nec cursus. Nulla mollis ultrices purus at maximus. Cras bibendum nulla ut erat tincidunt auctor. Nam egestas aliquet augue eu dictum. Quisque lorem ipsum, aliquet sit amet ipsum vitae, cursus tincidunt ligula. Integer quis justo quis odio fermentum sollicitudin eget in enim class aptent.

1/2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque vulputate pulvinar arcu a posuere. Aliquam malesuada rutrum velit nec cursus. Nulla mollis ultrices purus at maximus.

1/2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque vulputate pulvinar arcu a posuere. Aliquam malesuada rutrum velit nec cursus. Nulla mollis ultrices purus at maximus.

1/3

Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Pellentesque vulputate pulvinar arcu a posuere.

1/3

Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Pellentesque vulputate pulvinar arcu a posuere.

1/3

Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Pellentesque vulputate pulvinar arcu a posuere.

1/4

Lorem ipsum dolor sit amet, consectetur adipi scing elit pelle ntesque.

1/4

Lorem ipsum dolor sit amet, consectetur adipi scing elit pelle ntesque.

1/4

Lorem ipsum dolor sit amet, consectetur adipi scing elit pelle ntesque

1/4

Lorem ipsum dolor sit amet, consectetur adipi scing elit pelle ntesque.

1/3

Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Pellentesque vulputate pulvinar arcu a posuere. Aliquam malesuada rutrum velit nec.

2/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate pulvinar arcu a posuere. Aliquam malesuada rutrum velit nec cursus. Nulla mollis ultrices purus at maximus. Cras bibendum nulla ut erat tincidunt auctor. Nam egestas aliquet augue eu dictum. Quisque lorem ipsum, aliquet sit amet ipsum vitae, cursus tincidunt ligula integer.

1/4

Lorem ipsum dolor sit amet, consectetur adipi scing elit pelle ntesque.

1/4

Lorem ipsum dolor sit amet, consectetur adipi scing elit pelle ntesque.

2/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque vulputate pulvinar arcu a posuere. Aliquam malesuada rut rum velit nec cursus. Nulla mollis ultrices purus at maximus cra.

2/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellent esque vulputate pulvinar arcu a posuere. Aliquam malesuada rut rum velit nec cursus. Nulla mollis ultrices purus at maximus.

1/4

Lorem ipsum dolor sit amet, consectetur adipis cing elit pelle ntesque.

1/4

Lorem ipsum dolor sit amet, consectetur adipis cing elit pelle ntesque.

1/4

Lorem ipsum dolor sit amet, consectetur adipis cing elit pelle ntesque.

2/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellente sque vulputate pulvinar arcu a posuere. Aliquam malesuada rutr um velit nec cursus. Nulla mollis ultrices purus at maximus cras.

1/4

Lorem ipsum dolor sit amet, consectetur adipis cing elit pelle ntesque.

1/5

Lorem ipsum dol or sit amet, cons ectetur elit pelle.

1/5

Lorem ipsum dol or sit amet, cons ectetur elit pelle.

1/5

Lorem ipsum dol or sit amet, cons ectetur elit pelle.

1/5

Lorem ipsum dol or sit amet, cons ectetur elit pelle.

1/5

Lorem ipsum dol or sit amet, cons ectetur elit pelle.

1/6

Lorem ipsu m dolor sit amet, cons.

1/6

Lorem ipsu m dolor sit amet, cons.

1/6

Lorem ipsu m dolor sit amet, cons.

1/6

Lorem ipsu m dolor sit amet, cons.

1/6

Lorem ipsu m dolor sit amet, cons.

1/6

Lorem ipsu m dolor sit amet, cons.

1/6

Lorem ipsu m dolor sit amet, cons.

4/6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate pulvinar arcu a posuere. Aliquam malesuada rutrum velit nec cursus. Nulla mollis ultrices purus at maximus. Cras bibendum nulla ut erat tincidunt auctor nam egestas aliquet augue eu.

1/6

Lorem ipsu m dolor sit amet, cons.

Section Layout

Content Gap – Default

The powerful holder of grids offers multiple options to play 
with, options for responsive, alignment, padding and much more.

Column

Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Prae sent dign issim aliquam finibus duis re.

Column

Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Prae sent dign issim aliquam finibus duis re.

Column

Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Prae sent dign issim aliquam finibus duis re.

Content Gap – No Gap

The powerful holder of grids offers multiple options to play 
with, options for responsive, alignment, padding and much more.

Column

Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Prae sent dign issim aliquam finibus duis re.

Column

Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Prae sent dign issim aliquam finibus duis re.

Column

Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Prae sent dign issim aliquam finibus duis re.

Content Gap – Narrow

The powerful holder of grids offers multiple options to play 
with, options for responsive, alignment, padding and much more.

Column

Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Prae sent dign issim aliquam finibus duis re.

Column

Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Prae sent dign issim aliquam finibus duis re.

Column

Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Prae sent dign issim aliquam finibus duis re.

Content Gap – Extended

Using the Accordion element lets you save space 
while still presenting an abundance of content.

Column

Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Prae sent dign issim aliquam finibus duis re.

Column

Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Prae sent dign issim aliquam finibus duis re.

Column

Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Prae sent dign issim aliquam finibus duis re.

Content Gap – Wide

The powerful holder of grids offers multiple options to play 
with, options for responsive, alignment, padding and much more.

Column

Lorem ipsum dolor sit amet, con ectetur adipiscing elit prae sent dign issim aliquam finibus duis.

Column

Lorem ipsum dolor sit amet, con ectetur adipiscing elit prae sent dign issim aliquam finibus duis.

Column

Lorem ipsum dolor sit amet, con ectetur adipiscing elit prae sent dign issim aliquam finibus duis.

Content Gap – Wider

Using the Accordion element lets you save space 
while still presenting an abundance of content.

Column

Lorem ipsum dolor sit amet, con ectetur adipiscing elit prae sent dign issim aliquam.

Column

Lorem ipsum dolor sit amet, con ectetur adipiscing elit prae sent dign issim aliquam.

Column

Lorem ipsum dolor sit amet, con ectetur adipiscing elit prae sent dign issim aliquam.

Section Height – Min Height (450PX)

The powerful holder of grids offers multiple options to play 
with, options for responsive, alignment, padding and much more.

Column

Lorem ipsum dolor sit amet, con s ectetur adipiscing elit. Prae sent dign issim aliquam finibus.

Column

Lorem ipsum dolor sit amet, con s ectetur adipiscing elit. Prae sent dign issim aliquam finibus.

Column

Lorem ipsum dolor sit amet, con s ectetur adipiscing elit. Prae sent dign issim aliquam finibus.

Column Position – Bottom

Using the Accordion element lets you save space 
while still presenting an abundance of content.

Column

Lorem ipsum dolor sit amet, con s ectetur adipiscing elit. Prae sent dign issim aliquam finibus.

Column

Lorem ipsum dolor sit amet, con s ectetur adipiscing elit. Prae sent dign issim aliquam finibus.

Column

Lorem ipsum dolor sit amet, con s ectetur adipiscing elit. Prae sent dign issim aliquam finibus.

Content Position

The powerful holder of grids offers multiple options to play 
with, options for responsive, alignment, padding and much more.

Column – Top

Lorem ipsum dolor sit amet, co ns ectetur adipiscing elit. Prae sent dign issim aliquam finibus.

Column – Middle

Lorem ipsum dolor sit amet, co ns ectetur adipiscing elit. Prae sent dign issim aliquam finibus.

Column – Bottom

Lorem ipsum dolor sit amet, co ns ectetur adipiscing elit. Prae sent dign issim aliquam finibus.

Content Width – Boxed Custom (1600PX)

Using the Accordion element lets you save space 
while still presenting an abundance of content.

Column

Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Prae sent dign issim aliquam finibus. Duis mattis ma ttis pharetra do nec are curabitur sed enim vel.

Column

Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Prae sent dign issim aliquam finibus. Duis mattis ma ttis pharetra do nec are curabitur sed enim vel.

Column

Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Prae sent dign issim aliquam finibus. Duis mattis ma ttis pharetra do nec are curabitur sed enim vel.

Content Width – Full Width

The powerful holder of grids offers multiple options to play
with, options for responsive, alignment, padding and much more.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim aliquam finibus. Duis mattis mattis pharetra. Donec tristique ornare elementum. Sed ullamcorp er nunc et posuere posuere. Maecenas orci enim, tempus id justo eu, elementum auct.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim aliquam finibus. Duis mattis mattis pharetra. Donec tristique ornare elementum. Sed ullamcorp er nunc et posuere posuere. Maecenas orci enim, tempus id justo eu, elementum auct.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim aliquam finibus. Duis mattis mattis pharetra. Donec tristique ornare elementum. Sed ullamcorp er nunc et posuere posuere. Maecenas orci enim, tempus id justo eu, elementum auct.

Section Height – Fit to Screen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim aliquam finibus. Duis mattis mattis pharetra. Donec tristique ornare elementum. Sed ullamcorper nunc et posuere posuere. Maecenas orci enim, tempus id justo eu, elementum auctor quam integer.

Section Style

Image Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada lobortis malesuada. Duis mollis, felis a commodo scelerisque, justo velit auctor mi, sit amet efficitur mi erat eget.


Buy Now

Gradient Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada lobortis malesuada. Duis mollis, felis a commodo scelerisque, justo velit auctor mi, sit amet efficitur mi erat eget.


Buy Now

Video Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada lobortis malesuada. Duis mollis, felis a commodo scelerisque, justo velit auctor mi, sit amet efficitur mi erat eget.


Buy Now

Shape Dividers

Introducing Shape Divider

A very powerful feature added to the section offers a very beautiful way to create your pages with amazing layouts on the top of the section or at the bottom.

https://www.youtube.com/watch?v=d11trd0klQE

Shape Divider is a perfect example that allows you to create cool separator effects, that until now were simply not possible.

We are starting off with 18 shapes you can choose from. These are starter shapes, that can be customized to create an endless and versatile array of dividers.

Here they are:

How Shape Divider Works

The Shape Divider feature uses highly optimized SVG shapes, that are manipulated and customized on the frontend editor.

Besides making the shapes lightweight SVG files, the loading is asynchronous, meaning they only load when you need them to, and after the page has finished loading, so it doesn’t affect page speed.

Because the shapes are SVGs, this guarantees they are always seen as high resolution, including on retina screens.

Control Over Shapes

Flexibility is an important factor when creating shapes. In Elementor, you have control over the various settings that help customize each and every shape:

Background: You can separate any background with shapes, including color, image, video and gradient backgrounds

Controls: With the Shapes feature, you can control the size of the shapes, as well as invert them or flip them over

Top & Bottom Shapes: Set a different shape for the top and bottom part of the section, with a separate set of controls for each side

Mobile editing: You can quickly customize a different shape to fit desktop, tablet and mobile screens, using Elementor’s Mobile Editing feature.