Yes, in dnd you can not able to add the left-right margin. You can add the padding to the dnd section if you want spacing or you can use the max_width=1200 if you want specific section alignment.
Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Did you checked the documentation about the Drag and Drop editor. In there you will see all available properties that are possible within the dnd_area. Margin is one of them. Check:
I also recommend to check the video in the documentation. If your page already exists and you have changed your dnd_column, changes within the template won't overwrite the existing page. It's best to create a blank page to check if all defaults will work.
Also, I don't see any use of the 'margin' propertie in your code, so it's best to check that as well.
I already checked the documentation you linked and also see the video. I see that "margin" is accepted..
I also know that my changes won't overwrite my existing page, in fact I always check them with the preview or on a new page.
There is no margin set in my code because I got the error I attach in my previous message. As you can see in my screenshot, it seems as top and bottom margins are accepted, but not left and right and I don't understand why. Thanks,
I'm not working from the Boilerplate Theme, however I don't see a "margin" set in the Boilerplate theme code.
I try to set a margin on a dnd_column as you suggest but it give me the same error and it is ignored:
My theme is a copy of a Markeplace theme, named "Regal Lite". I don't know if there is something in files that set as ignored the left and right margin declaration.
Here is my actual page code:
<!--
templateType: page
isAvailableForNewContent: true
label: Landing Page SMT
screenshotPath: ../../images/template-previews/landing-pages/lead-capture.png
-->
{% extends "../layouts/base.html" %}
<!-- Header No Navigation Code Start -->
{% block header %}
{% global_partial path="../partials/header-no-navigation.html" %}
{% endblock header %}
<!-- End Header No Navigation Code -->
{% block body %}
<main class="body-container-wrapper landing-page-wrapper">
{% set placeholder = {
'src': get_asset_url('/SMT/images/template-previews/web-pages/grayscale-mountain.png'),
'alt': 'Stock placeholder image with grayscale geometrical mountain landscape',
'size_type': 'auto'
}
%}
{% dnd_area "dnd_area" class='body-container lead-capture-page', label='Main section' %}
<!-- Lead Section Code Start -->
{% dnd_section, full_width=true, class="banner-main section-flex", background_color=#F9F9F9 %}
{% dnd_column, width=6, padding={
'left': '5%',
'right': '5%',
'top': '5%',
'bottom': '5%',
} %}
{% dnd_row %}
{% dnd_module 'content'
path='@hubspot/rich_text',
html='<p><img src="https://f.hubspotusercontent30.net/hubfs/19949987/Special-machine-tools-separatore-1.png" alt="Special Machine Tools" style="width: 180px; margin-bottom: 15px " width="180"></p>
<h3>Lorem ipsum dolor sit amet</h3>
<h1>In rationale digest. Who price over</h1>
<p>A rattling only especially not that find of into and sentinels check safely as is I the kings.</p>'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% dnd_column, width=6, offset=6,
padding={
'left': 0,
'right': 0,
},
background_image = {
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': 'https://f.hubspotusercontent30.net/hubfs/19949987/Rettificatrici%20a%20centro%20mobile.jpg'
},
max_width=1000,
vertical_alignment='MIDDLE'
%}
{% dnd_row %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
<!-- fine banner principale -->
<!-- prima fascia -->
{% dnd_section, full_width=true, class="section-flex"
%}
{% dnd_column, width=6,
padding={
'left': 0,
'right': 0,
},
background_image = {
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': 'https://f.hubspotusercontent30.net/hubfs/19949987/Rettificatrici%20a%20centro%20mobile.jpg'
},
max_width=1000,
vertical_alignment='MIDDLE'
%}
{% dnd_row %}
{% end_dnd_row %}
{% end_dnd_column %}
{% dnd_column, width=6, offset=6,
padding={
'right': '5%',
'left': '5%',
'top': '5%',
'bottom': '5%',
}
%}
{% dnd_row %}
{% dnd_module 'Headline'
path='/SMT/modules/Headline.module',
headerline_alignment=b_left,
headline_enable_disable_overline=true,
headingline_overline='WHO WE ARE',
headline_heading_title='About Company',
headline_enable_dsiable_description=true,
headline_description='<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% dnd_row %}
{% dnd_module "rich_text"
path="@hubspot/rich_text",
html='<ul style="margin-bottom: 30px"> <li>Bullets are great</li> <li>For spelling out benefits and</li> <li>Turning visitors into leads.</li> </ul>'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% dnd_row %}
{% dnd_module 'Button'
path='/SMT/modules/Button.module',
width=4,
button_type=bordered_btn,
button_color=base_color,
button_size=medium_btn,
button_text='read more'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
<!-- prima fascia End -->
<!-- seconda fascia -->
{% dnd_section, background_color=#F9F9F9, class= 'section-flex' %}
{% dnd_column, width=6,
padding={
'right': '5%',
'left': '5%',
'top': '5%',
'bottom': '5%',
}
%}
{% dnd_row %}
{% dnd_module 'Headline'
path='/SMT/modules/Headline.module',
headerline_alignment=b_left,
headline_enable_disable_overline=true,
headingline_overline='WHO WE ARE',
headline_heading_title='About Company',
headline_enable_dsiable_description=true,
headline_description='<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% dnd_row %}
{% dnd_module "rich_text"
path="@hubspot/rich_text",
html='<ul style="margin-bottom: 30px"> <li>Bullets are great</li> <li>For spelling out benefits and</li> <li>Turning visitors into leads.</li> </ul>'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% dnd_row %}
{% dnd_module 'Button'
path='/SMT/modules/Button.module',
width=4,
button_type=bordered_btn,
button_color=base_color,
button_size=medium_btn,
button_text='read more'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% dnd_column, width=6, offset=6,
padding={
'right': 0,
'left': 0,
},
background_image = {
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': 'https://f.hubspotusercontent30.net/hubfs/19949987/Rettificatrici%20a%20centro%20mobile.jpg'
},
max_width=1000,
vertical_alignment='MIDDLE'
%}
{% dnd_row %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
<!-- seconda fascia End -->
<!-- banner -->
{% dnd_section
padding={
'top': 0,
'bottom': 0,
'left': 0,
'right': 0,
},
full_width=true,
%}
{% dnd_module "module_162487726673010" path="/SMT/modules/Inner Banner", label="Inner Banner" %}
{% end_dnd_module %}
{% end_dnd_section %}
<!-- Banner Section Code End -->
<!-- Benefits Section Code Start -->
{% dnd_section, padding={
'top': '5%',
'bottom': '5%',} %}
{% dnd_column
padding={
'left': 0,
'right': 0,
},%}
{% dnd_row %}
{% dnd_module 'Icon Boxes SMT'
path='../../modules/Icon Boxes SMT',
icon_box_style: ibox_sone,
%}
{% module_attribute "icon_box_item" %}
[
{
ibox_icon_type: "ibox_image",
ibox_image: {
"src": "https://f.hubspotusercontent20.net/hubfs/4057429/Regal_Core_Theme/Icons/balance-1.png"
},
ibox_title: "Supper Organized",
ibox_enable_disable_description: true,
ibox_description: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>'
},
{
ibox_icon_type: "ibox_image",
ibox_image: {
"src": "https://f.hubspotusercontent20.net/hubfs/4057429/Regal_Core_Theme/Icons/creativity-1.png"
},
ibox_title: "Technology",
ibox_enable_disable_description: true,
ibox_description: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>'
},
{
ibox_icon_type: "ibox_image",
ibox_image: {
"src": "https://f.hubspotusercontent20.net/hubfs/4057429/Regal_Core_Theme/Icons/idea-1.png"
},
ibox_title: "Artificial Intelligence",
ibox_enable_disable_description: true,
ibox_description: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>'
}
]
{% end_module_attribute %}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
<!-- Benefits Section Code End -->
<!-- SMT in numeri section -->
{% dnd_section, padding={
'top': 0,
'bottom': 0,
'left': 0,
'right': 0
},
full_width=true,
%}
{% dnd_module "module_162461216983112" path="/SMT/modules/Inner Banner SMT", label="Inner Banner SMT" %}
{% end_dnd_module %}
{% end_dnd_section %}
<!-- SMT in numeri end section -->
<!-- terza fascia -->
{% dnd_section,
padding={
'top': '5%',
'bottom': '5%',
} %}
{% dnd_column, width=6,
padding={
'left': 0,
}
%}
{% dnd_row %}
{% dnd_module 'Headline'
path='/SMT/modules/Headline.module',
headerline_alignment=b_left,
headline_enable_disable_overline=true,
headingline_overline='WHO WE ARE',
headline_heading_title='About Company',
headline_enable_dsiable_description=true,
headline_description='<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% dnd_column, width=6, offset=6,
padding={
'right': 0
}
%}
{% dnd_row %}
{% dnd_module "rich_text"
path="@hubspot/rich_text",
html='<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
<br>Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.</p>
<p>Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
<!-- terza fascia End -->
<!-- fascia 4 box colonne -->
{% dnd_section, padding={
'top': '5%',
'bottom': '5%',} %}
{% dnd_column
padding={
'left': 0,
'right': 0,
},%}
{% dnd_row %}
{% dnd_module 'Image Box'
path='../../modules/Image Box'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
<!-- end fascia colonne -->
<!-- form -->
{% dnd_section %}
{% dnd_column, width=6,
padding={
'left': 0
},
%}
{% dnd_row %}
{% dnd_module 'content'
path='@hubspot/rich_text',
html='<h2>In rationale digest. Who price over</h2>
<em>Your advised myself have those got he look of using continues time business goat, little ran of thoughts and plan for receive best. </em>
<p>A rattling only especially not that find of into and sentinels check safely as is I the kings.</p>
<h6>Invitation out poured it a what:</h6><ul><li>Working and the their grateful</li><li>Any didnt out frequency, something</li><li>On built pink she home</li><li>Mostly evaluation evils sight earnestly</li><li>The royal been a the</li></ul>'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% dnd_column, width=6, offset=6,
padding={
'right': 0
},
%}
{% dnd_row %}
{#{% dnd_module 'Form'
path='@hubspot/Form',
title=Get Your Free Copy,
%}
{% end_dnd_module %}#}
{% dnd_module "module_162462571285833" path="/SMT/modules/Form SMT", label="Form SMT" %}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
<!-- Lead Section Code End -->
{% end_dnd_area %}
</main>
{% endblock body %}
<!-- Footer No Navigation Code Start -->
{% block footer %}
{#{% global_partial path="/generated_global_groups/48581429531.html" %}#}
<div class="footer-base">
{% global_partial path="/generated_global_groups/48524388371.html" %}
</div>
{% endblock footer %}
<!-- End Footer No Navigation Code -->
For now I work with section classes to set the left margin to 0.