Top level rows

How to open a top (or first level) row which can contains columns and other sub rows.

In container row

<div class="row">
<div data-midnight="dark" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row top-level standard_section" style="padding-top: 0px; padding-bottom: 0px; ">
<div class="row-bg-wrap">
<div class="inner-wrap">
<div class="row-bg    " style=""></div>
</div>
<div class="row-bg-overlay"></div>
</div>
<!-- first level columns here -->
</div>	
</div>

Full width background row

<div class="row">
<div data-midnight="dark" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row top-level full-width-section standard_section    first-section loaded" style="padding-top: 0px; padding-bottom: 0px; ">
<div class="row-bg-wrap">
<div class="inner-wrap">
<div class="row-bg    " style=""></div>
</div>
<div class="row-bg-overlay"></div>
</div>
<!-- first level columns here -->
</div>	
</div>

Full width content row

<div class="row">
<div data-midnight="dark" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row top-level full-width-content standard_section    first-section loaded" style="padding-top: 0px; padding-bottom: 0px; ">
<div class="row-bg-wrap">
<div class="inner-wrap">
<div class="row-bg    " style=""></div>
</div>
<div class="row-bg-overlay"></div>
</div>
<!-- first level columns here -->
</div>	
</div>

Open a second level row

How to open a second level row (subrow) which can contains columns.

<!-- START first level column content -->
<div data-midnight="" data-column-margin="default" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row standard_section    " style="padding-top: 0px; padding-bottom: 0px; ">
<div class="row-bg-wrap">
<div class="row-bg" style=""></div>
<!-- second level column(s) -->
</div>
<!-- ENDfirst level column content -->

The second level column work as the first level column. It’s possible to use the same properties and features.

Open a first level column

How to open a first level column inside a first level row.

<div class="col span_12 [TEXT-COLOR] left">
<div class="vc_col-[MAX-CONTAINER-WIDTH]-[COLS_NUM] wpb_column column_container vc_column_container col [PADDING] [CENTERED-TEXT]" 
data-t-w-inherits="default" data-border-radius="[RADIUS]" data-shadow="[SHADOW]" data-border-animation="" 
data-border-animation-delay="" data-border-width="[BORDER_WIDTH]" data-border-style="solid" data-border-color="[BORDER_COLOR]" 
data-bg-cover="" data-padding-pos="[PADDING_POS]" data-has-bg-color="[HAS_BG_COLOR]" data-bg-color="[BG_COLOR]" 
data-bg-opacity="[BG_OPACITY]" data-hover-bg="" data-hover-bg-opacity="1" data-animation="[ANIMATION_EFFECT]" 
data-delay="[ANIMATION_DELAY]">
</div>
<-- Other columns properties like link columns, bg-overlay -->
<div class="vc_column-inner">
<div class="wpb_wrapper">
<-- column content, subrow -->
</div>
</div>
<!-- other columns -->
</div>

Dove:

• [TEXT-COLOR] : light/dark
• [MAX-CONTAINER-WIDTH]: xs/sm/md/lg.
• [COLS_NUM]: da 1 a 12 colonne (1 colonna piccola, 12 colonna a tutta riga).
• [PADDING] : no-extra-padding (per 0 padding) oppure padding-X-percent (dove X è la parcentuale di padding, 1,2,3,ecc %).
• [RADIUS] : numero di pixel per border-radius.
• [SHADOW] : profondità dell’ombreggiatura (small_depth).
• [BORDER_WIDTH] : dimensione in px del bordo.
• [BORDER_COLOR] : colore del bordo in HEX.
• [PADDING_POS] : posizione padding (all per tutti i lati).
• [HAS_BG_COLOR] : true/false per indicare se è presente colore di sfondo della colonna.
• [BG_COLOR] : colore di sfondo in hex code
• [BG_OPACITY] : opacità dello sfondo (0.0,0.1,…1.0).
• [ANIMATION_EFFECT ] : effetto di animazione (es: fade-in-from-bottom).
• [ANIMATION_DELAY] : ritardo in ms dell’animazione.
• [CENTERED-TEXT] : applicare classe “centered-text” per centrare il contenuto della colonna.

Altre proprietà per le colonne

Nascondere le colonne

Applicare la classe al div di classe “wpb_column”:

vc_hidden-CONTAINER_WIDTH

dove CONTAINER_WIDTH:

• xs –> extra small display
• sm –> small display
• md –> medium display (ex: tablet)
• lg –> desktop display

Link a tutta colonna

<!-- inside the column -->
<a class="column-link" target="_self" href="URL"></a>
<!-- but before the content -->

Column border

Apply the css property “border” on the div of the column with class “wpb_column”.

<div style="border: 1px solid black; "></div>

Immagine di sfondo nella colonna

Applicare le proprietà sul div di classe wpb_colum.

<div style="background-image: url(...)" data-bg-cover data-using-bg="true"></div>

Overlay colonna

<!-- inside the column -->
<div class="column-bg-overlay" style="opacity: 0.3; background-color: #333333;">
<!-- but before the content -->

Elementi Grafici

Custom Heading

<h2 style="" class="vc_custom_heading">
Title
</h2>

Sostituire h2 in base al tag desiderato. Specificare le proprietà in style=””.