Anemos comes with the Visual Composer, a visual layout builder that allows you to forget about syntax of shortcodes and create multiple layouts within minutes without writing a single line of code! You can edit, delete, increase and decrease size of each item.
Furthermore, you can reorder the elements,copy-paste and save templates. It has very simple and instinctive interface! Don’t forget to read the Rows/Columns section in this documentation, where you will discover the amazing responsive possibilities.
As you can easily see, Anemos’s elements are especially handmade for the theme’s preferences and they harmoniously use the amazing visual interface of the composer. That means you will not find just one Visual Composer copy in Anemos!

Let’s take a brief look at the elements:

Title

This element will create a title that you can use to introduce a new section in a page or even an element. You can set the alignment, the header you prefer and the line-style(if you use a line).

Text Block

Add the text you like by using the classic TinyMCE. Additionally, style your text as Leader text or Subheading text to create more interesting text areas.

Divider

With this element you can create a divider (line, double line, dashed line or back to top) to better separate your elements and sections. Additionally, you can split you pages by using full-width dividers.

Custom Heading

This is what you read. You are able to select any Google font you like, set the size, the tag, align, color, line height and set the link URL.

Empty Space

Add a Blank space with the height you prefer.

Quote

Add your text, set the animation you like and your quote text is ready to be published.

Dropcap

Two styles for dropcaps. Add your text, choose your style, set the animation and save.

Button

The button element is an easy way to add a styled button to your page. Just choose the appropriate type(simple,line), size, shape and color and icons from 5 different Font libraries. Finally, fill out the other fields (text, link) and off you go!

Icon Box

Another element with multiple options. Firstly, select the icon size and the icon shape. Secondly, you can use any font from 5 different Font libraries, upload a png icon or even write a character(letter or number)! Give title, text, link, align, box color, advanced hover (if you like) and enjoy it!

Icon

Just like the Icon Box but with only a single icon and multiple options. Use any font from 5 different Font libraries, select the icon size, shape, colors, align, set the link.

Media Box

Media for Anemos means image, video or map. Combine one of these with title, text, link and you’re ready!

Image Text

With this shortcode you can simply upload an image(with a video popup if you like), title,text and button(any type).

Slogan

The slogan element creates a slogan with two buttons. Simply add title, subtitle, text, line-style and buttons(1 or 2).

Call-Out

With call-out element you’re able to choose your preferred style, give a title, your text, button and off you go.

Single Image

Upload a single image and give the align, animation, link you wish. You can have Image, Image Link, Image popup and popup video.

Slider

This element is not just a simple slider. Upload your images, select the navigation type and color. Set if you want autoplay, the slideshow speed, the image crop/resize! Don’t forget to set it to full width element, it’s great!

Gallery

The Gallery element has 2 different styles for showing your image galleries with various options. Classic Grid and Masonry with multiple options for hovers, overlays, columns and more. You can easily create full width galleries. Keep in mind that in Grid and Carousel style you are able to select the image crop.

Message Box

With this element you create a message text with an icon and background color.

Google Map

Give the address you like and your map is ready. Upload the marker you like, set the height and type. Don’t miss to expand your map to full width if you wish.

Video

You can just add a video(YouTube, Vimeo), even full width video.

Accordion

This element creates an accordion panel that expands when the user clicks on the title to reveal more information.

Tab

Simply add horizontal tabs as needed until you are ready.

Tour

Simply add vertical tabs as needed until you are ready.

Testimonial

This element creates a nicely slider out of your testimonials items. Go Testimonial > Testimonial Items and create your testimonials. Afterwards, add the testimonial element and define the various settings like categories, speed, navigation and more.

Pricing tables

Pricing tables is used to display any subscription options in an appropriate column. Create the tables you wish (don’t overdone with this, 4 tables per row are enough) and add your data.

Progress Bar

This element creates horizontal bars that get animated in accord with the percent given; the best way to show your skills in a visual way with multiple styles.

Counter Element

This element can be used to quickly create animations that display numerical data in a more interesting way. You can set colors, icon, title, text and more.

Social Share

With this element you can simply add social media icons anywhere in your pages in multiple styles.

Typed Text

Add your prefix text, your suffix text and add-style the Typed Text which makes your text moves.

Team Member

This element takes in a quick profile for a team member/employee and formats it attractively. Add the information you wish, it’s so simple.

Advanced Promo

This is a special element. You can easily create a nicely colored tabbed sections (rows) with image (logo), text and button. Just create multiple Promo Advanced elements in different rows, define the colors(backgrounds) you prefer and collapse these rows. This creates very appealing and interesting areas to show off your partners or anything else you wish. We recommend to use the Promo Advanced element on pages without sidebars.

Contact Form

With this element you can simply use any Contact Form 7 you’ve created. When using the Contact Form, the default layout is to have one field per row.
However, you can have multiple fields in the same row with different styles by adding some HTML markup. For example:

Contact Form style 1 Classic with 3 columns

<div class="eut-form-style-1 eut-form-light">
<div class="eut-one-third"> [text* your-name placeholder "Your Name (required)"]</div>
<div class="eut-one-third">[email* your-email placeholder "Your Email (required)"]</div>
<div class="eut-one-third eut-last-column">[text your-subject placeholder "Subject"]</div>
<div>[textarea your-message placeholder "Your message"]</div>
<div>[submit "Send your message"]</div>
</div>

 

Contact Form style 2 Light example

<div class="eut-form-style-2 eut-form-light">
<div class="eut-one-half">[text* your-name placeholder "Your Name (required)"]</div>
<div class="eut-one-half eut-last-column">[email* your-email placeholder "Your Email (required)"]</div>
<div>[text your-subject placeholder "Subject"]</div>
<div>[textarea your-message placeholder "Your message"]</div>
<div>[submit class:eut-custom-btn "Send your message"]</div>
</div>

 

Contact Form style 2 Dark example

<div class="eut-form-style-2 eut-form-dark">
<div class="eut-one-half">[text* your-name placeholder "Your Name (required)"]</div>
<div class="eut-one-half eut-last-column">[email* your-email placeholder "Your Email (required)"]</div>
<div>[text your-subject placeholder "Subject"]</div>
<div>[textarea your-message placeholder "Your message"]</div>
<div>[submit class:eut-custom-btn "Send your message"]</div>
</div>

 

Contact Form Newsletter example

<div class="eut-newsletter">
<div>[email* your-email placeholder "Your Email (required)"]</div>
<div>[submit "Subscribe Now"]</div>
</div>

 

Pie Chart

With this element you can create appealing pie charts with multiple options.

Flexible Carousel

With this element you can create very appealing and interesting carousels to show off multiple elements. Add the Flexible Carousel in a row and click to start adding elements into it in order to have various content in the carousel. Create columns, define the responsiveness, select your navigation type and many more. Impressive?

It is worth noting that this is a complicated element so we suggest to use only the elements that you first see when you click the Add button.

In the majority of the elements you can define CSS animations with time delay.