Smart Documentation / Page Builder / Columns

Columns

“Columns“ are part of the row and they hold your content elements inside them. Columns can be reordered. Click and drag column around (horizontal axis). That way you can group elements in logical groups and then drag them around with your mouse (to re-position).

Column Settings↑ Back to Top

Aspect

  • Text Alignment: Specify the text alignment inside the column.
  • Content Skin: Specify the content skin. You can inherit, use the dark or light skin.
  • Column Content Width: Select the unit of the content width value. By default, it is set to %, but you can change it to pixels
    • Column Width: Change the % width or set the content width value in pixel
  • Horizontal position: Specify the horizontal position of the content relative to the containing row, in case you have decreased the value of the column.
  • Vertical position: Specify the vertical position of the content.
  • Custom padding: Activate this option to define custom padding
    • Custom padding: You are given 6 presets to work with: 0px, 15px, 30px, 60px, 90px, 120px. This settings are referred inside the admin options as 0, 1, 1, 2, 3, 4, 5.

Style

  • Background Color: Select the background color from the color palette.
  • Background Image: Upload/Select an image to use as background for the row. If a background image is set you will have the following options:

Off Grid

  • Shift X-Axis: Set how much the element has to shift in the X axis. You are given 11 presets to work with: -150px, -120x, -90px, -60px, -30px, -15px, 0px, 15px, 30px, 60px, 90px, 120px and 150px. This settings are referred inside the admin options as -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5.
  • Shift X-axis fixed: This will deactivate shift-y for responsive devices.
  • Shift Y-Axis: Set how much the element has to shift in the Y axis. You are given 11 presets to work with: -150px, -120x, -90px, -60px, -30px, -15px, 0px, 15px, 30px, 60px, 90px, 120px and 150px. This settings are referred inside the admin options as -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5.
  • Shift X-axis fixed: This will deactivate shift-y for responsive devices.
  • Custom Z-Index: Set a custom z-index value to ensure the visibility of the element.

Responsive

  • Display in Desktop: Choose the visibility of the element in desktop layout mode (when the viewport is greater than 960px wide).
  • Display in Tablet: Choose the visibility of the element in desktop layout mode (when the viewport is greater than 570px and smaller than 960px wide).
  • Display in Mobile: Choose the visibility of the element in desktop layout mode (when the viewport is smaller than 570px wide).

Animation

  • CSS Animation: Add some type of CSS animation.
  • Animation Speed: Specify the entrance animation speed in milliseconds.
  • Animation Delay: Specify the entrance animation delay in milliseconds.

Extra

  • Extra Class Name: Add a CSS class if you want one.
Page Builder

Related Articles