This feature is available in the evolve Plus premium theme version

NOTE: You can access all the shortcodes via the shortcodes icon on your visual editor. See this document if you need more information

 

Description and Code

 

Column shortcodes can be used in addition to other shortcodes when you wish content to be located in a specific column and wish to control that. Row shortcode is used to wrap the column shortcodes and align them correctly. It's highly recommended to always wrap the column shortcode in the row shortcode. Keep in mind that you can put other things into the columns, including other shortcodes. Here's an example of the row and column shortcode in code view:

[row_component class="" id=""][col_6_component background_color="" background_color_2="" background_color_fill="flat" background_color_linear="vertical" background_image="" background_repeat="no-repeat" background_position="left top" background_attachment="scroll" background_attachment_parallax="no" full_width="yes" padding="2rem" class="" id=""]Your Content Goes Here[/col_6_component][/row_component]

As the theme uses the Bootstrap 12 Columns Grid system, you can combine the column shortcodes to always result the system, for example you can combine 6-6, 3-3-3-3, 8-4 etc. In the example below, we combine the 8 and 4 column shortcode. Please note, how we use the number in the column shortcode - for example col_8_component and col_4_component. With other grids just replace those numbers with required one.

[row_component class="" id=""][col_8_component background_color="" background_color_2="" background_color_fill="flat" background_color_linear="vertical" background_image="" background_repeat="no-repeat" background_position="left top" background_attachment="scroll" background_attachment_parallax="no" full_width="yes" padding="2rem" class="" id=""]Your Content Goes Here[/col_8_component][col_4_component background_color="" background_color_2="" background_color_fill="flat" background_color_linear="vertical" background_image="" background_repeat="no-repeat" background_position="left top" background_attachment="scroll" background_attachment_parallax="no" full_width="yes" padding="2rem" class="" id=""]Your Content Goes Here[/col_4_component][/row_component]

 

Parameters

 

  • background_color
    • defines the column background color
    • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • background_color_2
    • defines the column background color 2 for Linear or Radial Gradient style
    • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • background_color_fill
    • defines the background color fill style
    • Possible valuesflat, linear, radial
  • background_color_linear
    • defines the background color orientation of Linear Style
    • Possible valuesvertical or horizontal
  • background_image
    • defines the path for the image that you want to show as background
    • Possible values - string - like http://example.com/wp-content/uploads/image.jpg
  • background_repeat
    • defines the background image repeat
    • Possible valuesno-repeat, repeat, repeat-x, repeat-y
  • background_position
    • defines the position of the background image
    • Possible valuesleft top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom
  • background_attachment
    • defines if the background image scrolls
    • Possible values - scroll or fixed
  • background_attachment_parallax
    • defines if the background will have Parallax effect
    • Possible valuesyes or no
  • full_width
    • defines if the column will have full width, disables horizontal padding
    • Possible valuesyes or no
  • padding
    • defines the inner padding of the column
    • Possible values - number - with unit like 10px, 2rem etc.
  • class
    • custom class for CSS of component
    • Possible values - string - like custom-element-class
  • id
    • custom ID for CSS of component
    • Possible values - string - like custom-element-id

 

Basic Examples

 

8-4 Column - 66,7% - 33%

 

Fusce quis facilisis sapien. Nullam nec nisl sed ipsum auctor luctus. Aenean et porta urna, ut luctus eros. Integer consequat ex sed purus suscipit, quis rutrum arcu congue. Cras vel augue ut ipsum dignissim elementum. Quisque quis mauris lorem. Suspendisse eu aliquet sem, at vestibulum nisi. Nulla suscipit, purus ut sodales lobortis, enim dolor vulputate eros, nec efficitur tellus tellus et tortor. Nunc sapien ligula, ultricies nec porttitor a, facilisis eget justo. Integer sed facilisis orci. Mauris pellentesque felis non velit iaculis rhoncus id et magna. Duis euismod velit a libero auctor, egestas pulvinar urna auctor. Nunc tristique lacus nulla, pharetra convallis felis rutrum eu. Sed accumsan ultrices mollis. Vivamus sit amet aliquam massa, eget iaculis metus. Praesent elementum arcu in est auctor pellentesque sit amet ac dui.
Fusce quis facilisis sapien. Nullam nec nisl sed ipsum auctor luctus. Aenean et porta urna, ut luctus eros. Integer consequat ex sed purus suscipit, quis rutrum arcu congue. Cras vel augue ut ipsum dignissim elementum. Quisque quis mauris lorem. Suspendisse eu aliquet sem, at vestibulum nisi.

 

6-6 Column - 50% - 50%

 

Fusce quis facilisis sapien. Nullam nec nisl sed ipsum auctor luctus. Aenean et porta urna, ut luctus eros. Integer consequat ex sed purus suscipit, quis rutrum arcu congue. Cras vel augue ut ipsum dignissim elementum. Quisque quis mauris lorem. Suspendisse eu aliquet sem, at vestibulum nisi. Nulla suscipit, purus ut sodales lobortis, enim dolor vulputate eros, nec efficitur tellus tellus et tortor. Nunc sapien ligula, ultricies nec porttitor a, facilisis eget justo. Integer sed facilisis orci. Mauris pellentesque felis non velit iaculis rhoncus id et magna. Duis euismod velit a libero auctor, egestas pulvinar urna auctor. Nunc tristique lacus nulla, pharetra convallis felis rutrum eu. Sed accumsan ultrices mollis. Vivamus sit amet aliquam massa, eget iaculis metus. Praesent elementum arcu in est auctor pellentesque sit amet ac dui.
Fusce quis facilisis sapien. Nullam nec nisl sed ipsum auctor luctus. Aenean et porta urna, ut luctus eros. Integer consequat ex sed purus suscipit, quis rutrum arcu congue. Cras vel augue ut ipsum dignissim elementum. Quisque quis mauris lorem. Suspendisse eu aliquet sem, at vestibulum nisi. Nulla suscipit, purus ut sodales lobortis, enim dolor vulputate eros, nec efficitur tellus tellus et tortor. Nunc sapien ligula, ultricies nec porttitor a, facilisis eget justo. Integer sed facilisis orci. Mauris pellentesque felis non velit iaculis rhoncus id et magna. Duis euismod velit a libero auctor, egestas pulvinar urna auctor. Nunc tristique lacus nulla, pharetra convallis felis rutrum eu. Sed accumsan ultrices mollis. Vivamus sit amet aliquam massa, eget iaculis metus. Praesent elementum arcu in est auctor pellentesque sit amet ac dui.

 

4-4-4 Column - 33% - 33% - 33%

 

Fusce quis facilisis sapien. Nullam nec nisl sed ipsum auctor luctus. Aenean et porta urna, ut luctus eros. Integer consequat ex sed purus suscipit, quis rutrum arcu congue.
Fusce quis facilisis sapien. Nullam nec nisl sed ipsum auctor luctus. Aenean et porta urna, ut luctus eros. Integer consequat ex sed purus suscipit, quis rutrum arcu congue.
Fusce quis facilisis sapien. Nullam nec nisl sed ipsum auctor luctus. Aenean et porta urna, ut luctus eros. Integer consequat ex sed purus suscipit, quis rutrum arcu congue.

 

Customized Examples

 

Fusce quis facilisis sapien. Nullam nec nisl sed ipsum auctor luctus. Aenean et porta urna, ut luctus eros. Integer consequat ex sed purus suscipit, quis rutrum arcu congue. Cras vel augue ut ipsum dignissim elementum. Quisque quis mauris lorem. Suspendisse eu aliquet sem, at vestibulum nisi. Nulla suscipit, purus ut sodales lobortis, enim dolor vulputate eros, nec efficitur tellus tellus et tortor. Nunc sapien ligula, ultricies nec porttitor a, facilisis eget justo. Integer sed facilisis orci. Mauris pellentesque felis non velit iaculis rhoncus id et magna. Duis euismod velit a libero auctor, egestas pulvinar urna auctor. Nunc tristique lacus nulla, pharetra convallis felis rutrum eu. Sed accumsan ultrices mollis. Vivamus sit amet aliquam massa, eget iaculis metus. Praesent elementum arcu in est auctor pellentesque sit amet ac dui.
Fusce quis facilisis sapien. Nullam nec nisl sed ipsum auctor luctus. Aenean et porta urna, ut luctus eros. Integer consequat ex sed purus suscipit, quis rutrum arcu congue. Cras vel augue ut ipsum dignissim elementum. Quisque quis mauris lorem.

 

Headline For Parallax Effect

Sed consequat interdum vulputate. Proin quis sem erat. Mauris a suscipit turpis. Sed pretium non enim non consequat. Donec semper nunc sed mauris maximus, sed consequat eros malesuada. Pellentesque interdum tortor quis eros pharetra hendrerit. Maecenas lectus mi, vestibulum pretium tellus quis, rhoncus consectetur erat. Etiam a nisi ac sapien vulputate mollis. Nunc condimentum, lacus ut convallis varius, nisl sem placerat neque, ut blandit neque turpis ut orci. In nec venenatis ex. Praesent in quam ipsum. Proin ac consectetur nisl. Nam dapibus sit amet nisl eget imperdiet. Sed sem neque, sagittis et faucibus id, finibus ultricies leo.

Fusce quis facilisis sapien. Nullam nec nisl sed ipsum auctor luctus. Aenean et porta urna, ut luctus eros. Integer consequat ex sed purus suscipit, quis rutrum arcu congue.

In faucibus posuere lectus, at placerat magna. Duis pretium ornare lacus. Nunc eget mi sollicitudin, faucibus magna vitae, malesuada libero.

 

Fusce quis facilisis sapien. Nullam nec nisl sed ipsum auctor luctus. Aenean et porta urna, ut luctus eros. Integer consequat ex sed purus suscipit, quis rutrum arcu congue.
Column with shortcodes and linear background color
Morbi sollicitudin sagittis sem, nec consequat lectus. Etiam in velit sed metus interdum varius a at eros. Duis pellentesque, metus rutrum finibus congue, massa lacus scelerisque odio, id tempus elit mi vel lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.