Add custom layouts

In your custom module you should create the following configuration file in /etc/contenttype_layouts.xml

Add the following in your file:

  "1.0" encoding="UTF-8"?>
  <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Blackbird_ContentManager:etc/contenttype_layouts.xsd">
  config>

Then you should follow this rule for adding your custom layouts:

Add a category of layout (id should start at 4):

<layouts id=”...” label=”...”>...layouts>

In this tag, you can manage as many layout you want. Create a new layout with:

<layout id=”...” label=”...”>...layout>

So in your layout, you manage the columns:

<column id=”...” class=”...” width=”...” float=”...”/>

class: css class: ct-column-... value

width: css class: ct-width-... value

float: css class: ct-float-... value

You can get inspire by this following file: /etc/contenttype_layouts.xml

Ex:

  "1.0" encoding="UTF-8"?>
  <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Blackbird_ContentManager:etc/contenttype_layouts.xsd">
   
   <layouts id="1" label="1 Column">
   <layout id="10" label="1 simple column">
   <column id="1" class="main" />
   layout>
   <layout id="12" label="1 column separated by a middle area, with top and bottom areas">
   <column id="7" class="top" />
   <column id="1" class="main-half" />
   <column id="8" class="middle" />
   <column id="2" class="main-half" />
   <column id="9" class="bottom" />
   layout>
   layouts>
   
   <layout id="35" label="3 columns separated by a middle area, with top and bottom areas (33% | 33% | 33%)">
   <column id="7" class="top" />
   <column id="2" class="main-half" width="33-mid" />
   <column id="1" class="main-half" width="33" />
   <column id="8" class="middle" />
   <column id="3" class="main-half" width="33" />
   <column id="4" class="main-half" width="33" />
   <column id="5" class="main-half" width="33-mid" />
   <column id="6" class="main-half" width="33" />
   <column id="9" class="bottom" />
   layout>
   layouts>
  config>
loader
Loading...