Visual composer elements

Shelf comes with default 40 visual composer + 20 Custom elements. You can even add WordPress widgets as well.

Try not to work in text mode as you may mess up the codes.

Content section is a primary content area. Everything else is added to these content areas called sections. You can find it at the very top of the content elements list in Visual Composer. Change the columns layout to split these sections to add space for other elements.

You can add background color, background image, alter row padding and even add a parallax effect to make it more interesting.

Try not to work in text mode as you may mess up the codes.

  Tips

• Site wide sections Set the container width property to “Wide” to stretch the container width full width.
• Parallax effect Add a background image large enough for it to scroll (normally 1400×1200). And set parallax effect dropdown to “yes”.
• Change Content color You can switch between dark,light,black and white content colors according to your background color.

Icon box is probably the most used web design elements to list out services, features etc. Shelf provides you with 1000+ icons to use with icon boxes.

Watch it in action here.

Use these features to spice up your icon boxes

• Icons: You can use font icons, image icons or leave it blank. Choose from 1000+ icomoon icons.
• Background color: Change the icon box background color to predefined colors or choose custom ones.
• Link: Use link button if necessary.

It is the most popular WordPress plugin for creating animated Slideshows.

Import shelf_revolution_slider_demo.zip to use the custom css styles.

Go to their Revolution Slider product page to find out more.

Watch it in action here.

Add tabs and toggles to add user interactivity to your design. Normally used to display useful informations.

• Tabs: are horizontal tabs.
• Tour: is a vertical tabs.
• Accordion: is a group of toggles.
• Toggle: is an independent toggle.

You can have both transparent and boxed tabs and toggles.

Watch it in action here.

It is easy to add pricing tables. Just add it from the Visual composer as you add other elements. As you can add your pricing details as a list, it is even faster and easier.

Plan it before you start creating it for quick process.

• Add a pricing table with all the required settings.
• Now just duplicate it for each plans and drag them into seperate columns
• Set the featured pricing table and other details.
• you can remove the gutter between them by setting gutter of the row to “no gutter”

Showcase you recent works with filters. You can alter the number of columns, filter alignment, caption color, caption effect and gutter size for variations.

Display your recent works as carousel. You can alter the number of columns, caption color, caption effect and gutter size for variations. you can also show/hide pagination and navigations.

Display your blog posts as a carousel.

Use posts masonry to display your blog posts as a masonry. You can alter the number of columns and even add a sidebar as you require.

It is responsive and fits any screen size.

You can have a page title with description at page’s top if you need. You can add background color, background image and even alter row padding and a parallax effect to make it more interesting.

Use image gallery to display your images as a grid or slider(carousel). Alter the number of columns and change the transition effect while using it as a slider. You can use it as an alternative to premium revolution slider as it is powered by very light and touch enabled Owl Carousel.

You can also show/hide the pagination and navigation.

It slides almost anything. There is so much you can do with this powerful slider. Add anything to slide it with style. You can slide icon boxes, testimonials, team members, text blocks and even the row itself. Try experimenting with this one as you can create amazing visual elements using Anything Slider with other elements.

Watch it in action here.

These captions are invented to style texts. You can use extra two fonts along with body font for these. You can modify caption font through theme options > font settings. You can use these elsewhere across the design.

Goto text editor > Shortcodes menu > Caption > edit settings > generate shortcode.

example captions

[vc_caption font="font2" size="medium" color="light"]caption text[/vc_caption]</p><br /><br /> <p>[vc_caption bg="black" font="font2" size="small" color="dark"]caption text[/vc_caption]</p><br /><br /> <p>[vc_caption bg="white" size="large" color="dark" uppercase="uppercase"]caption text with [colored]colored text[/colored] here[/vc_caption]

Display your latest tweets as a slider. It you just want to list them you use Twitter widget.

You have to create your twitter app to get all the required informations(access tokens etc.)

Create you own app https://apps.twitter.com/

Display your skills as an animated pie chart.

Add your team members. Use different caption effects to display the details.

tip: You can slide team members using Anything Slider.

Use Call to action boxes to drag user’s attention to some action.

As it must be added to a row (section) that’s why you can alter section’s attributes to vary the look of this call to action button.

Add client’s testimonials and slide it using Anything slider. Make sure you add “Anything Slider” first before you start adding testimonials.

Display your achievements using these milestone elements. You can use icons as well.