Visual Composer

Visual composer is a drag and drop frontend and backend page builder plugin that equips you with more than 40 elements (also called shortcodes) to design your page with ease. In addition to these predefined elements, Citilights has 7 extra ones helping you to create many desirable pages. To generate the shortcodes, go to Backend Editor, click the “+” icon to add shortcode. Navigate to Citilights tab to find a shortcode you want to use. You can add those shortcodes to any pages or posts for your own use.

Note: In some cases, when you add an element and edit it, you should edit Row settings at the same time.

♣ Row settings includes:

Using Container: if you check this box, container`s width will be 1170px.
Row stretch: In our demo, we set Default in this section. Besides Default, you can select Stretch row, Stretch row and content, stretch row and content (no paddings). If opting these ones, the whole content in Red row 2 will disappear when it is shown on the site.
Full height row: when you tick this box, row will be set to full height.
Use video background: If this box is checked, video will be used as row background.
Parallax: There are three options for you:
None: image without parallax effect
Simple: image with parallax effect. It means that the image will move when you let the mouse scroll on it
With fade: image with parallax effect but move effect of the image is not as clear as that of Simple style.
Note: Two options Use video background (tick this box) and Parallax (Simple and With fade) will avail in some cases. For example, if font color is white and you do not use video background or Simple/ With Fade Parallax then visitors of you site may find it difficult to read white words and phrases. You know,  white words on white background. No one can figure out those words in this case!

CSS box: you can change width of padding, border and margin hereBackground color: opt color for background hereBelow background color section, you will have an option to upload the background image and opt styles of background image: theme default, cover, contain, no repeat and repeat.Cover: Scale the background image to be as large as possible so that the background area will be completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.Contain: Scale the image to the largest size such that both its width and its height can fit inside the content area.No repeat: Size of the image will not change when it is placed in background area.Repeat: Size of the image will also be as same as that of the original one; however, then many replicates of this image will be established in background area.

This shortcode is used in creating Home Page
Title: Enter a title here, for example, recent properties
Style: Grid, List, Slider or Featured Style

If you select Grid style and List Style then you will have the following options:
Show Layout Control: Choose Hide or Show grid/ list switching button
Show Pagination: Choose Show or Hide
Show: Choose All or Featured Property
Property Type: Select a Property type that will be show or leave blank to show all property types
Property Status: Select a Property Status that will be displayed or leave blank to show all property statuses
Similarly, you have some options like Property Label, Property Location and Property Sub-location
Number of properties to show: The number of properties is displayed per page
Sort properties by: Properties will be arranged in conformity with Featured, Date, Price, Name, Area or Random
Sort Direction: Decrement or Increment
Visibility: Opt All devices or a device on which Properties will be shown

If you select Slider and Featured style, you will have options:
Auto Play Slider: Tick this box so that Slider will automatically play
Slide Time, Slide Speed: Set Time and Speed of the Slide
Show: Choose All or Featured Property
Property Type: Select a Property type that will be show or leave blank to show all property types
Property Status: Select a Property Status that will be displayed or leave blank to show all property statuses
Similarly, you have some options like Property Label, Property Location and Property Sub-location
Number of properties to show: The number of properties is displayed per page
Sort properties by: Properties will be arranged in conformity with Featured, Date, Price, Name, Area or Random
Sort Direction: Decrement or Increment
Visibility: Opt All devices or a device on which Properties will be shown

This shortcode is used in creating Homepage
Animation: Slide or Fade
Slide Time/ Speed/ Height: set a number
Auto Play Slider: tick this box so that slider can be automatically played
Show Slide Indicator, Show Previous/ Next Navigation: Tick these boxes to show Slide Indicator, Previous/ Next Navigation.
Show Property Search: tick this box to show search below Slider
Show Advanced (Amenities) Search: check this box to show Advanced Search
Search Info Title: Give a title
Search Info content: give a content

This shortcode is used to show Agents section on Home page
Title: Give a title here
Number: The number of Agents is shown

This shortcode is used to create Pricing Table page
Featured Items: the number of Featured packages
Buttons Text: Enter text of the button

This shortcode is used to create Login/Register Page
Mode: There are 3 kinds for you to select in the drop-down list. It can be Only login, Only register or both Login and Register
Login/Register Text: These options are used as description for the login/register form

This shortcode is used to display single property
Title: Enter a title here
Property: Choose a property in the drop-down list
Style: Select a style in the drop-down list. The style can be featured , List or Grid item