menu

Visual Composer Basics

Brooks theme uses Visual Composer as main page builder. In addition to extending Visual Composer’s native functionalities, we’ve created a new, unique modules that has been customized and adapted to Brooks.

In this section we will cover basic information about building pages with Visual Composer. According to standards of web, Visual Composer based on 12 columns grid system, Brooks support this functionality and extend it with new features, included in standard Visual Composer modules.

Page builder based on 2 main layout structures:

  • row
  • column

Every row consists of only columns, therefore columns could consist of any other elements even rows.

Row

Row is base element in builder structure, it could be only added to root context(also exists Inner Row, it could be added to another column). To add row into the page choose Row element in elements list.

19a3b5f542

 

After doing this row will appear in the bottom of main editor window.

f7867f8189

 

1. Drag and drop elements

Drag and drop interface allows you quickly change your layout position or reorder elements. Simply drag elements or modules using the Drag Arrows Icon.

 

2. Row Layout
Layout settings allows you to configure how much columns container will consist of and width(number of grid columns) of each column. You could choose both from predefined or set custom layout. For example: 5/12 + 7/12 will split row on 2 columns 41% and 59% width of parent accordingly.
50c9c1bf17

3. Edit Column
By click on this icon will be opened overlay window with column setting, which we will cover in next section.

 

4. Edit Row

Row settings consists of few section: General, Design and Background Effects Options.

General options:

  • Row stretch – defines row container style. It could be fullwidth, boxed(1170px on desktop), boxed by right or left side – it mean that one side of container will pulled to parent side(browser window side) another side will fit same offset as boxed container.
  • Full height row – choose to make row height equal to browser window.
  • Equal height – inner columns will be set to equal height.
  • Content position – content position within columns

Design Options consist of general CSS options available for almost any VC Element. There are box settings( margin, border and padding ), border options, background color/image and image fill mode, it is quite simple and intuitive settings interface.

Background Effects Options:

  • Use video background – choose to use video as background of the row. If it is checked, video url field(Only Youtube links supported) will appear. It is recommended to set image on background at the same time(while video loading and on mobile it will be displayed instead of video)
  • Parallax – set background image to parallax mode.
  • Scale Background Animation(Ken Burns Effect) – set background image to scale animation effect.
  • Background Overlay Scheme – set overlay scheme: dark, light or main site color(Theme Option -> Styling).
  • Background Overlay Gradient – choose to use gradient(from bottom to top) instead of solid color.

 

5. Clone and Paste Row

One way to make page building proceed more efficiently is to go to use the copy, paste and close functionalities.

 

6. Add elements

Simply insert elements into column inside row, click on the Plus Icons, and you’ll see an overlay window containing all the available modules. Select the one you want, and it will be inserted onto the page.

 

Column

Column is another base element in builder structure, it could be only inside row container. To add column into existing Row click on large plus icon on row element.

 

1be71b6783

 

After doing this Column will appear inside the row.

ac07d8d28b

 

1. Edit Column

Column settings consists of few section: General, Design and Responsive Options.

General options:

  • Column side inner offset – defines column container style, same as Row stretch, but gives more flexibility.
    For example lets create full width Row with background image(you should know how to do this ) and one column inside, with 1) some content pulled to left side of boxed container( other words invisible container 1170px width) and 2) transparent color background.

    5694e142bd

    Set inner box pulled to left side

     

    03b578d555

    Settings for background color with opacity 0.9

    This will display something like this on front end.

    c3bdc5fbc0

  • Parallax – set column parallax animation, there are presented 2 options: Initial offset and Track distance. Initial offset defines how far block will be shifted vertically before parallax animation(positive value shifts down), track distance – how long block should move in parallax while it is on screen, for example if this value set to 100px – block will move by 100px during the time it is visible on the browser screen. Here you can find example usage of this animation.
  • Responsive Options – it is core Visual Composer feature that allows to customize grid on different screen sizes, more details here.

 

2. Delete Column

Delete column from row.

 

3. Add Elements

Simply insert elements into column inside row, click on the Plus Icons, and you’ll see an overlay window containing all the available modules. Select the one you want, and it will be inserted onto the page.

 

Note: only Column could contains row(VC Inner Row), therefore maximal depth level next:

Row -> Column -> Inner Row -> Inner Column.

Inner Row

Inner Row is the same element as Row but could be inserted into Column and does not have Background Effects Options.

To add inner row into column choose Row in list of elements.

19a3b5f542

 

This element allows to create more than 12 columns and gives more flexible customizing.

da470e305b

 

Inner Column

Inner Column is the same element as Column but could be inserted only into Inner Row and does not have Column side inner offset option.