Home Forums Gutenberg How to implement 2-column layout?


How to implement 2-column layout?

  • Hi,
    how to implement a 2-column layout so that the user has a live preview in the Gutenberg editor? I tried to create a block with <InnerBlocks> but two <InnerBlocks> cannot be used.


    <div class="container" style="display: flex">
    	<div style="width: 20%;">
    		  // Here side menu, only allow one block: 'core/my-side-menu'
    	<div style="width: 80%;">
    		  // Allow all blocks here except 'core/my-side-menu'
  • I would suggest building your sidebar as widget. WP recently integrated Gutenberg into the widgets aswel.

    To register a sidebar:

    if (function_exists('register_sidebar'))
       // Define Sidebar Widget Area
           'name' => __('Sidebar'),
           'description' => __('Sidebar voor de vervolgpagina\'s'),
           'id' => 'sidebar',
           'before_widget' => '<div id="%1$s" class="%2$s">',
           'after_widget' => '</div>',
           'before_title' => '<h3>',
           'after_title' => '</h3>'

    Then implement this code in your sidebar area:
    <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar')) ?>

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.