The plugin offers different shortcodes to use the CSS3 Multiple Columns.
For better user experience it includes an integration into the visual editor. You can enter all attributes with the help of dialogs, so you don’t need to write the shortcodes by hand.
The plugin simply wraps the enclosed content into a container and defines according CSS rules.
The attributes for the shortcodes and examples you can find under “Other Notes”.
All default values can be changed in the settings page. With saving the settings a static CSS file is written and included for better performance.
Here is the list of shortcodes with the corresponding attributes:
This is an enclosing shortcode to distribute content into a CSS3 multiple columns layout. As content you can use any complex markup. A div-Tag with CSS classes and default definitions is used to wrap the content. The default values for the attributes can be changed in the settings page of the plugin.
Possible attributes:
40px
. Possible values can be found on column-gap on w3schools.comExample:
[css_columns gap=30px width=120px count=3 rule_color="#000000" rule_style=solid rule_width=medium]
.... here goes the complex content ....
[/css_columns]
This is an enclosing shortcode, which only can be used within the [css_columns] shortcode. You can define content, which spans over multiple columns.
Possible attributes:
span
, h2
, div
, …Example:
[css_col_span cols=2 tag=div]
... here goes the spanning content ....
[/css_col_span]
This is an enclosing shortcode, which only can be used within the [css_columns] shortcode. You can define content, which never breaks into different columns. WARNING Feature is not supported by Firefox yet!
Possible attributes:
span
, h2
, div
, …Example:
[css_no_break type=avoid tag=div]
... here goes the non-breakable complex content ....
[/css_no_break]