Custom classes

Publishing content with the Visual Composer is pretty straightforward, but there are certain cases where you might want to extra tweak in order to fine tune your design. Here's a short tutorial about classes which are already available and how to use them.

First of all, you need to know that you can add extra class to almost any element, simply by editing that element and write the custom class inside the Extra Class field.

Second, you can add as many classes as you wish for a single element, you just need to separate them by a space.

Row Classes

  • Parallax backgrounds: parallax-bg

A feature which is available in the theme is to set a background image for any row. However, you need an extra step if you want to fix this background and thus create a faux parallax effect. As seen  here.

  • More padding: padding

This class adds more top/bottom padding to rows (for example: in cases where you want to have a background image and not too much content within).

  • Less padding on mobile devices: responsive-padding-less

To be used where you feel that there is simply too much space between elements on mobile devices. While white space is good on large desktops, in some cases you might want to reduce this on mobile devices. As seen  here (first row of text - "services, objectives, etc..").

  • Blog post full width row: full-width

This is a class which only has effect inside single post items. If you use the Visual Composer to build rich post layouts, you can even add rows which extend beyond the fixed width of a post (only the background extends, so it's useful for having parallax backgrounds in such rows). After choosing the Full Width option when creating the row, you also need to add this class. See the effect here.

Other Classes

  • Extra columns padding: padding-right or padding-left

This class adds extra padding either to the right or the left of a column (or both if you write both classes). It is very useful when you have a full width row with inner columns that have a background each (thus giving more white space inside each block that has it's own background). You can see this live  here (the second row of text - "the future is here, etc..").

  • White section title: white

When you have dark backgrounds you can easily insert white text by changing the color from the text editor. But if you want to add styled titles in such areas, you need to add the following class to the section title element, in order to turn it's title into white. See result  here.

  • Button & social icons alignment: align-center

If you have a button or a social icons list that you want to align to the center, you can use this class for the job. Take a look the first footer in our online preview for the result (buttons), or  this page (social icons).

  • Hide element on mobile device: hide-mobile or hide-tablet

This class hides any element on a mobile device (width less than 480px) or a table (width less than 760px).

These are the available classes. If you want to go further with this, you can create your own CSS classes in the Theme Options panel and use them anywhere you wish!