Content Blocks Sections

Content Blocks Sections allow you to split content into columns within the content area. They also allow creative use of images alongside text content, tables etc. The functionality is designed to allow you to define a wide variety of content display without complex web functions. You can find content blocks edit section below main content editor of any page.

There are 2 group of fields. First group of fields let you define layout options for the blocks, and those fields apply to each block. Second group of fields is inside “Blocks” section, and those fields define each block content.

First group of fields, which defines layout options for the blocks, are:

• Show Image As
  This field allows you to define main layout in a page for the blocks.
  If you choose “Content”, then blocks will be placed inside main page container area ( just like any other content in a page ). In that case, block image will be placed in a box, and you are able to define width for both image column and content column.
  If you choose “Background”, then image and content will be placed in 2 equal width columns. Image will fill one entire column, and content will fill another column.
• Main Content Column Side
  In this field, you can define side of content column for each block. You can set content column to be always on left side, always on right hand side, or to automatically switch sides for each block.
  You can also set this to “Custom” in order to manually define content column side for each block. In that case, a new field “Main Content Side” will appear inside each block settings section, allowing you to define custom side for that block.
• Blocks Width
  In this field you can define width of the blocks container.
  Choosing “Full width” option will expand blocks to full browser width.
  Choosing “Same as main container” will keep blocks inside main page container, just like any other content in that page.

• Show Image Behind Content
  This field is only visible when “Show Image As” field value is set to “Background”. Selecting that option will show image in both columns of the block. In image column, only image will be shown, and in content column, image will be shown as content background.
• Minimum Block Height
  This field is only visible when “Show Image As” field value is set to “Background”. It lets you define minimum height in pixels for each block. When that field is not defined, block height depends on content length, so by setting value for this field, you can ensure that blocks will always have that minimum height, even if content length is small.
• Content Overlay
  This field is only visible when “Show Image As” field value is set to “Background”. It lets you define overlay color for the block’s content column. This is useful when you have “Show Image Behind Content” field selected, because by setting overlay color between content and background image, text content will be more readable.
• Content Text Width
  This field is only visible when “Show Image As” field value is set to “Background”. It lets you define width of content inside block content column. This image illustrate difference between “Inside Container” and “Full Width”:
  

Second group of fields, which defines each block content, are:

• Block Name
  Only used in admin area, to show block name when block is collapsed. Click on arrow above the block number to expand/collapse block fields.
• Multimedia Column Type
  • Custom Content
    You can select “Custom content” if you want custom content instead of single image or slider. This is good option if you want for example to add table with some data, or any other custom content.
  • Single Image
    You should select this option if you want to show a simple image. After selecting this option, add image by clicking on “Add image” button:
    
    Then in popup window, you can select image from media library (1) by selecting its thumbnail in the grid list, or you can upload new image from your computer (2). When you finish selecting image, just confirm by clicking on “Select” button (3)
    
  • Slider Revolution – Multi Image
    If you want to show complex image slider. You need to first create slider for the block in “Main Menu” > “Slider Revolution” section. You can find HERE a detailed guide how to create a slider. 
    After you have slider created, you can select it from the dropdown here:
    
• Block Columns Size
  This field is only visible when “Show Image As” field value is set to “Content”. It lets you define size of columns in a block. First value represent left column size, and second value represent right hand column size. 
• Main Content Column
  In this field you need to define main content for the block.
• Main Content Side
  This field is only visible when “Main Content Column Side” field value is set to “Custom”. It lets you define custom order of columns in a block by setting on which side the content column will appear.

When you finish creating blocks section, you can simply add it to the main page content by using shortcode:
[content_blocks_sections section_id="1"] – for first section
[content_blocks_sections section_id="2"] – for second section etc.