Config Row / Column

Home / Config Row / Column

Content management is a breeze with Fortuna and it requires absolutely no coding skills. Using a highly customized version of the Visual Composer plugin the theme offers a user friendly Drag’n’Drop interface for easy page creation and editing. Follow these simple steps to create a Page with Pure:

Step 1:Go to Pages > Add new in your Dashboard. Add a Title to your Page (top field).

Step 2:Switch to Backend Editor if you are currently under Classic Mode (button below Title field).

Step 3:Start adding page content by clicking on the Plus button or Add Element.

row-column-1

Step 4:The Add Element Popup appears, click on the first element in order to add a new Row to your page. A Row is a main building block of a page, you can split your Rows into Columns, place various elements into your rows, set Row Backgrounds, effects etc.

row-column-2

Step 5:Once you have the new Row added to your page you can split that Row into Columns in order to organize elements nicely in it. Once you split your Row into column you can start adding different Page Elements into your columns. If you want to edit your Row/Column Settings click on the small Pen icon (top right corner of the Row/Column). You can also Duplicate your Row with the Icon (duplicate icon) next to it or Remove the Row/Column with the icon to the right (trash bin icon).

row-column-3

Row Settings (General)

Click on the Edit Row button (Pen icon, top right of the Row). You will see the Row Settings Dialog popup.

row-setting

Layout:

Full Width (overflow hidden) – Row will full width (option default)

Full Width (overflow visible) – Row will full width, visible content if overflow

Container – Max width 1170px and center.

Container Extended – If screen width is greater than or equal to 1600px, row width will be 1600px.

Container Fluid – Full width, padding left and padding right 15px.

row-layout

Columns gap:

In order to control gaps between columns navigate to row parameter window and change column gap option – the gap will be introduced between all columns within this row. Default value of gap is set to 0.

Important: In case of mobile stacking gap will be introduced between stacked columns as well.

Full Height Row and Video Background:

https://youtu.be/kpe8YHns8R8

Equal height:

In order to set columns within row to be equal height you must navigate to row parameter window and check Equal height option to be active. All columns within this row will have equal height and align to the longest column.

Content position:

In order to control vertical alignment of content within rows/columns navigate to row parameter window and select position of content – top, middle or bottom. By default value is set to “Default” meaning it will use Top or any other alternative if defined within your WP theme.

Parallax:

https://youtu.be/J5G6yNp4UG4

Show background overlay (Overlay Color)

row-overlay-color

Image – Click button to select select image or set background image from Design Options

Overlay Opacity – Set opacity for overlay (0 → 100)

Row ID

Set ID of row (Note: make sure it is unique and valid according to w3c specification http://www.w3schools.com/tags/att_global_id.asp)

Row Settings (Design Options)

https://youtu.be/34Xd9L_oLcs

Row Settings (Animation Settings)

row-animation

CSS Animation – Select type of animation if you want this element to be animated when it enters into the browsers viewport.

Animation Duration – Duration in seconds. You can use decimal points in the value. Use this field to specify the amount of time the animation plays. The default value depends on the animation, leave blank to use the default.

Animation Delay – Delay in seconds. You can use decimal points in the value. Use this field to delay the animation for a few seconds, this is helpful if you want to chain different effects one after another above the fold. 

Managing Columns

Once you have the desired number of columns in a Row you can manage each Column’s individual settings by clicking on the Toolbar icons of that specific Column. The Plus Icon adds an element to the top of the Column, the bottom Plus Icon adds an elemnt to the bottom of the Column. The Trash Bin icon removes the Column. Access the Column Settings by clicking on the Pen Icon.

column-manager

Column Settings (General)

Access the Column Settings by clicking on the Pen Icon. The General tab provides with the option to add CSS classes to your Column if you wish to access it via CSS (can pass more than one divided by a space).

column-general

 Column Settings (Design Options)

https://youtu.be/34Xd9L_oLcs

Column Settings (Responsive Options)

https://youtu.be/_C1SE2Cj-4k

    admin   Posted in: