{"id":881,"date":"2023-09-14T17:56:01","date_gmt":"2023-09-14T15:56:01","guid":{"rendered":"https:\/\/wypo.io\/documentations\/%taxomony%\/gutenberg-advanced-layout\/"},"modified":"2025-11-30T03:50:20","modified_gmt":"2025-11-30T02:50:20","slug":"gutenberg-advanced-layout","status":"publish","type":"wypo_documentations","link":"https:\/\/wypo.io\/en\/documentations\/gutenberg-advanced-layout\/","title":{"rendered":"Gutenberg Advanced Layout"},"content":{"rendered":"\n
\n

Installation<\/h2>\n\n\n\n

To install the plugin, please refer to the “Installing a plugin<\/a>” documentation. <\/p>\n<\/div>\n\n\n\n

\n

Layout Block<\/h2>\n\n\n\n

The Layout<\/strong> block serves as a container for advanced layout elements.
You can insert either a Columns<\/strong> block or a Grid<\/strong> block into it.<\/p>\n<\/div>\n\n\n\n

\n

Columns Block<\/h2>\n\n\n\n

The Columns<\/strong> block allows you to create flexible column systems.<\/p>\n\n\n\n

    \n
  • Easily adjust the width of columns.<\/li>\n\n\n\n
  • Set different widths depending on screen size.<\/li>\n\n\n\n
  • Align content vertically and horizontally.<\/li>\n\n\n\n
  • Set the spacing between columns (gap), horizontally and vertically.<\/li>\n<\/ul>\n\n\n\n

    The Columns<\/strong> block is a sub-block of the Layout<\/strong> block.<\/p>\n\n\n

    <\/div>\r\n \n\n\n

    Column Block<\/h2>\n\n\n\n

    The Column<\/strong> block is the only child allowed in a Columns<\/strong> block. It can contain all types of blocks.<\/p>\n\n\n\n

    Parameters per column:<\/strong><\/p>\n\n\n\n

      \n
    • Show or hide the column (useful for creating margins).<\/li>\n\n\n\n
    • Set the width of the column (several units available depending on the theme).<\/li>\n\n\n\n
    • Change the order of the columns (reposition the columns).<\/li>\n<\/ul>\n<\/div>\n\n\n\n
      \n

      Grid block<\/h2>\n\n\n\n

      The Grid<\/strong> block allows you to organize elements in a grid format.<\/p>\n\n\n\n

      \"Wypo<\/figure>\n\n\n\n
        \n
      • Contains only Cell<\/strong> blocks.<\/li>\n\n\n\n
      • Define the number of columns (max. 12) and rows (max. 12), with the option to adjust according to screen size.<\/li>\n\n\n\n
      • Adjust the spacing (gap) between cells in the Dimensions<\/strong> section.<\/li>\n<\/ul>\n\n\n\n

        The Grid<\/strong> block is a sub-block of the Layout<\/strong> block.<\/p>\n\n\n

        <\/div>\r\n \n\n\n

        Cell block<\/h2>\n\n\n\n

        The Cell block is the only child allowed in a Grid block. It can contain all types of blocks.<\/p>\n\n\n\n

        Parameters per cell:<\/strong><\/p>\n\n\n\n

          \n
        • Start column and width.<\/li>\n\n\n\n
        • Start line and height.<\/li>\n\n\n\n
        • Overlay order (z-index).<\/li>\n\n\n\n
        • Minimum height.<\/li>\n<\/ul>\n<\/div>\n\n\n\n
          \n

          Advanced Group<\/h2>\n\n\n\n

          The Advanced Group<\/strong> block builds on the features of the native WordPress Group<\/strong> block and takes them much further: it includes a wide range of CSS properties and allows precise, responsive control of styles for every screen size. This provides maximum flexibility for creating complex, customized, and fully adaptive layouts without touching any code.<\/p>\n<\/div>\n\n\n\n

          \n

          Personalization<\/h2>\n\n\n\n

          By default, three screen sizes are available:<\/p>\n\n\n

          \n
          \n
          \n PHP <\/div>\n <\/header>\n return [\n\t"lg"=>["label"=>__("Desktop"),"max"=>""],\n "md"=>["label"=>__("Tablet"),"max"=>"991"],\n "sm"=>["label"=>__("Mobile"),"max"=>"767","autoStack"=>true],\n];<\/textarea>\n