{"id":33826,"date":"2019-03-01T11:06:09","date_gmt":"2019-03-01T11:06:09","guid":{"rendered":"http:\/\/getshortcodes.com\/?post_type=docs&p=33826"},"modified":"2023-03-23T17:12:59","modified_gmt":"2023-03-23T17:12:59","slug":"columns","status":"publish","type":"docs","link":"https:\/\/getshortcodes.com\/docs\/columns\/","title":{"rendered":"Columns"},"content":{"rendered":"
\n\t
\n\t\t
\n
\n
<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\t
\n\t\t
\n  
 <img src="http:\/\/placekitten.com\/100\/100" \/> <\/div><\/div>\n  
 <img src="http:\/\/placekitten.com\/100\/100" \/> <\/div><\/div>\n<\/div><\/pre>\n\t<\/div>\n<\/div>\n\n\n
\n\t
\n\t\t
\n
\n
 Content <\/div>\n<\/div>\n
\n
 Content <\/div>\n<\/div>\n
\n
 Content <\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\t
\n\t\t
\n  
 Content <\/div><\/div>\n  
 Content <\/div><\/div>\n  
 Content <\/div><\/div>\n<\/div><\/pre>\n\t<\/div>\n<\/div>\n\n\n
Table of contents<\/p>\n\n
  1. Description<\/a><\/li>
  2. Options<\/a>
    1.  \u2013 columns container<\/a><\/li>
    2.  \u2013 single column<\/a><\/li><\/ol><\/li>
    3. Custom formatting <\/a><\/li>
    4. Formatting of shortcodes<\/a><\/li>
    5. Borders and background<\/a><\/li>
    6. Last column is lower than the others<\/a><\/li><\/ol><\/li><\/ol>\n\n\n
      Description<\/h2>\n\n\n\n
      Content can be divided into columns with the help of two shortcodes – 
      <\/div><\/em> and 
      <\/div><\/div><\/em>. The first shortcode, 
      <\/div><\/em>, serves as a container for columns and is used for the creation of the line with columns. The second shortcode, 
      <\/div><\/div><\/em>, creates columns and should contain the necessary content.<\/p>\n\n\n\n
      Options<\/h2>\n\n\n\n
      <\/div> \u2013 columns container<\/h3>\n\n\n\n
      Option name<\/th>Possible values<\/th>Default value<\/th><\/tr>
      class<\/strong>
      Additional CSS class name(s) separated by space(s)<\/td>      		CSS class name(s) separated by space(s)<\/td>\u2013 none \u2013<\/em><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      <\/div><\/div> \u2013 single column<\/h3>\n\n\n\n
      Option name<\/th>Possible values<\/th>Default value<\/th><\/tr>
      size<\/strong>
      Select column width. This width will be calculated depend page width<\/td>      		1\/1 (Full width)
      1\/2 (One half)
      1\/3 (One third)
      2\/3 (Two third)
      1\/4 (One fourth)
      3\/4 (Three fourth)
      1\/5 (One fifth)
      2\/5 (Two fifth)
      3\/5 (Three fifth)
      4\/5 (Four fifth)
      1\/6 (One sixth)
      5\/6 (Five sixth)<\/td>      		1\/2<\/td><\/tr>
      center<\/strong>
      Is this column centered on the page<\/td>      		yes or no<\/td>no<\/td><\/tr>
      class<\/strong>
      Additional CSS class name(s) separated by space(s)<\/td>      		CSS class name(s) separated by space(s)<\/td>\u2013 none \u2013<\/em><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      Custom formatting <\/h2>\n\n\n\n
      If you use 
      <\/div><\/em> and 
      <\/div><\/div> <\/em>shortcodes, it is recommended to use custom formatting mode. This mode can be enabled or disabled on plugin settings page. Follow the path: Dashboard - Shortcodes \u2013 Settings \u2013 Settings tab<\/em>. By default this mode is enabled.<\/p>\n\n\n\n
      This option can be helpful if you're facing issues with layout.<\/p>\n\n\n\n
      Formatting of shortcodes<\/h2>\n\n\n\n
      If you notice excess gaps in columns or wrong alignment of them, then you should delete line breaks and extra whitespaces between shortcodes. This approach can be used also at enabled custom formatting mode. Example:<\/p>\n\n\n\n
      <\/div>
      <\/div><\/div> Content <\/div><\/div> 
       Content <\/div><\/div><\/div><\/pre>\n\n\n\n
      Borders and background<\/h2>\n\n\n\n
      You can easily add borders and backgrounds to columns using custom CSS code. Follow instructions below to do that.<\/p>\n\n\n\n
      First, navigate to Dashboard \u2013 Shortcodes \u2013 Settings<\/em> and paste the following CSS snippet into the Custom CSS code<\/em> field:<\/p>\n\n\n\n
      .su-row.columns-with-border .su-column-inner {\n  border: 2px solid #de3e35;\n  padding: .5rem 1rem;\n}\n.su-row.columns-with-border .column-with-green-border .su-column-inner {\n  border: 2px solid #5dde35;\n}\n\n.su-row.columns-with-background .su-column-inner {\n  background: #de3e35;\n  color: #fff;\n  padding: .5rem 1rem;\n}\n.su-row.columns-with-background .column-with-green-background .su-column-inner {\n  background: #5dde35;\n}<\/code><\/pre>\n\n\n\n