Osmosis 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 the size of each item.
Furthermore, you can reorder the elements, copy-paste and save templates. It has very simple and instinctive interface!

Let’s take a brief look at the elements:

Titles

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 Subtitle text to create more interesting text areas.

Dividers – Gaps

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

Quotes

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

Dropcaps

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

Lists

You can simply create a list with the Font Awesome web icon font you prefer. The list color is your preferred primary color.

Buttons

The button element is an easy way to add a styled button to your page. Just choose the appropriate type(simple, outline), size and color, 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 Awesome web icon font, 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 Osmosis 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 test, button and off you go.

Single Image

Upload a single image and give the align, animation, link you wish. Additionally, you can use a popup video, set the image to have full width or add title/caption.

Slider

This element is not just a simple slider. Upload your images, enable/disable the titles and captions, select the navigation, the hover effect and much more! Keep in mind that you can expand element to full width.

Gallery

The Gallery element has 4 different styles for showing your image galleries. Grid, Multigrid, Masonry and Carousel gallery with multiple options for hovers, overlays, columns and more. You can also create full width galleries.

Message Box

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

Google Map

Give the Latitude/Longitude, set the zoom you wish for your map. Upload the marker you like, set the map height.

Video

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

Accordion

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

Tabs

Simply add 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 tesimonial element and define the various settings like categories, speed, navigation and more. Select among 3 different main styles for your testimonial, Carousel, Grid or Masonry.

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 Bars

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.

Counter Element

This element can be used to quickly create animations that display numerical data in a more interesting way. You can add icon if you want and a title.

Countdown Element

With this element you can have a digital display that counts down. Super useful for a Coming Soon page or event. Select among 3 different styles and define your color options, font sizes etc.

Carousel

Upload photos(mainly logos) for the content of an attractively carousel. Define the number of images per screen shot and expand it to full width if you wish.

Social Share

With this element you can simply add social media icons (for sharing) anywhere in your pages.

Team Member

This element takes in a quick profile for a team member/employee and formats it attractively. Add the information you wish and select between two styles.

Promo Advanced

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 should only be used on pages without sidebars.

Blog

You can easily create a blog page or just insert a blog section in a page. Select the categories and the style you wish.

Portfolio

This element is just like Blog element. Make a nicely presentation of your portfolio. Simply select the style and categories you like.

Pie Chart

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

WooCommerce

Add any of the WooCommerce pages (if you installed and activated WooCommerce) you like easily via the graphic interface of the Visual Composer.

In the majority of the elements you can define CSS animations with time delay. In each element, you can set the margin-bottom so you can easily define your spaces. Keep in mind that the default margin is 30px.