Columns Block Style: Dividing Lines
Adds a "Dividers" style to the Columns block that draws a thin vertical line between columns on wide screens and a horizontal one when they stack on phones.
Opens WPIDE on
Code
add_action( 'init', function () {
register_block_style( 'core/columns', array(
'name' => 'wpide-dividers',
'label' => 'Dividers',
'inline_style' => '.wp-block-columns.is-style-wpide-dividers>.wp-block-column+.wp-block-column{border-top:1px solid rgba(0,0,0,.15);padding-top:1.5em;}@media (min-width:782px){.wp-block-columns.is-style-wpide-dividers>.wp-block-column+.wp-block-column{border-top:0;padding-top:0;border-left:1px solid rgba(0,0,0,.15);padding-left:2em;}}',
) );
} );How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.