How to do a custom Layout

[Estebark]

How are you?
I would like to ask a question about how it is possible to create sections with two, three, or four columns, but using your own CSS clasess. I have created two sections at the moment that are displayed in the CMS so that designers can drag and drop them, but when dragging the section that says it has two columns, the two columns do not appear, only one appears with the full width with the area to place the module. The only way these columns appear is if you set the default structure, but this one comes with the width parameters. I know that this works for the default style sheet, but is there a way to make your own and have the columns also work with your own structure that you create yourself? I'm looking forward to any information, thank you very much.

[Anton · Accepted solution]

Hey @Estebark, 

the easiest way to create custom layouts is to build the layout on a blank page, enable the developer mode, copy the hubl code, paste it into your saved section template and go from there. 

You can access the developer mode either by adding

?developerMode=true

to your domain while you're in the page editor(noot Design-Manager) or via this chrome extension (it has other cool features too)

best, 

Anton

[GiantFocal · Accepted solution]

Hi @Estebark,

You'll need to specify the offset and width parameters to your dnd_columns.

For example, if you're creating a 3-column section, here is how your dnd_columns should look like:

{% dnd_column width=4 %}
{% end_dnd_column %}
{% dnd_column width=4, offset=4 %}
{% end _dnd_column %}
{% dnd_column width=4, offset=8 %}
{% end _dnd_column %}

The total number of column widths must be 12. The offset should be counted from the left column. 

[Anton · Accepted solution]

Hey @Estebark, 

the easiest way to create custom layouts is to build the layout on a blank page, enable the developer mode, copy the hubl code, paste it into your saved section template and go from there. 

You can access the developer mode either by adding

?developerMode=true

to your domain while you're in the page editor(noot Design-Manager) or via this chrome extension (it has other cool features too)

best, 

Anton