Problem building pages from scratch

CHugo · ‎abr 23, 2021

Hello,

I wanted to make a site from scratch in Hubspot, so I didnt use any template.

The problem I ama having is that I can not add the dnd area,

here my code:

<!--

templateType: none

-->

<!doctype html>

<head>

{{ require_css(get_asset_url("/RLK-BLANK-THEME/css/main.css")) }}

{% if page_meta.html_title %}<title>{{ page_meta.html_title }}</title>{% endif %}

{% if site_settings.favicon_src %}<link rel="shortcut icon" href="{{ site_settings.favicon_src }}" />{% endif %}

</head>

<body>

{% block header %}

{% global_partial path='/RLK-BLANK-THEME/partials/header.html' %}

{% endblock header %}

{% block body %}

{% dnd_area "no_structure", label="No Structure" %}

{% end_dnd_area %}

{% endblock body %}

{% block footer %}

{% global_partial path='/RLK-BLANK-THEME/partials/footer.html' %}

{% endblock footer %}

</body>

</html>

Edit Page _ lp-test 2021-04-23 18-09-04.png

I've just wanted to give some géneral guidelines from the html and css file and then make the structure of the page with the drag and drop function.

thank you

webdew · ‎abr 26, 2021

Hi @CHugo ,

Try this code:

{% extends "./layouts/base.html" %}{% block body %}
{# The main-content ID is used for the navigation skipper in the header.html file. More information on the navigation skipper can be found here: https://github.com/HubSpot/cms-theme-boilerplate/wiki/Accessibility #}
<main id="main-content" class="body-container-wrapper">
  {# All templates are recommended to have an h1 present for both accessibility and SEO best practice. This should be at the top of the template before any other textual content. The h1 element below is within a dnd area to allow content editors the ability to adjust the content and alignment of the text. #}
  {% dnd_area 'dnd_area' class='body-container body-container--home', label='Main section' %}    {# Form section #}
    {% dnd_section
      background_color={
        r: 248,
        g: 250,
        b: 252,
        a: 1
      },
      vertical_alignment='MIDDLE'
    %}
      {% dnd_module path='@hubspot/image',
        img={
          'alt': 'Stock placeholder image with grayscale geometrical mountain landscape',
          'size_type': 'auto',
          'src': get_asset_url('../images/grayscale-mountain.png')
        },
        offset=0,
        width=6
      %}
      {% end_dnd_module %}
      {% dnd_column
        offset=6,
        width=6
      %}
        {% dnd_row %}
          {% dnd_module path='@hubspot/rich_text'%}
            {% module_attribute 'html' %}
              <h1>This is your main headline.</h1>
              <p>Use this space to tell everyone about what you have to offer.</p>
            {% end_module_attribute %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module path='@hubspot/form' %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}
    {# End form section #}    {# Two column image right section #}
    {% dnd_section
      vertical_alignment='MIDDLE'
    %}
      {% dnd_module path='@hubspot/rich_text',
        offset=0,
        width=6
      %}
        {% module_attribute 'html' %}
          <h2>Provide more details here.</h2>
          <p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>
        {% end_module_attribute %}
      {% end_dnd_module %}
      {% dnd_module path='@hubspot/image',
        img={
          'alt': 'Stock placeholder image with grayscale geometrical mountain landscape',
          'size_type': 'auto',
          'src': get_asset_url('../images/grayscale-mountain.png')
        },
        offset=6,
        width=6
      %}
      {% end_dnd_module %}
    {% end_dnd_section %}
    {# End two column image right section #}    {# Two column image left section #}
    {% dnd_section
      background_color={
        r: 248,
        g: 250,
        b: 252,
        a: 1
      },
      vertical_alignment='MIDDLE'
    %}
      {% dnd_module path='@hubspot/image',
        img={
          'alt': 'Stock placeholder image with grayscale geometrical mountain landscape',
          'size_type': 'auto',
          'src': get_asset_url('../images/grayscale-mountain.png')
        },
        offset=0,
        width=6
      %}
      {% end_dnd_module %}
      {% dnd_module path='@hubspot/rich_text',
        offset=6,
        width=6
      %}
        {% module_attribute 'html' %}
          <h2>Provide more details here.</h2>
          <p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>
        {% end_module_attribute %}
      {% end_dnd_module %}
    {% end_dnd_section %}
    {# End two column image left section #}  {% end_dnd_area %}
</main>
{% endblock body %}

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

Exibir solução no post original

CHugo · ‎abr 26, 2021

Thank you, it works 🙂

Exibir solução no post original

webdew · ‎abr 26, 2021

Hi @CHugo ,

Try this code:

{% extends "./layouts/base.html" %}{% block body %}
{# The main-content ID is used for the navigation skipper in the header.html file. More information on the navigation skipper can be found here: https://github.com/HubSpot/cms-theme-boilerplate/wiki/Accessibility #}
<main id="main-content" class="body-container-wrapper">
  {# All templates are recommended to have an h1 present for both accessibility and SEO best practice. This should be at the top of the template before any other textual content. The h1 element below is within a dnd area to allow content editors the ability to adjust the content and alignment of the text. #}
  {% dnd_area 'dnd_area' class='body-container body-container--home', label='Main section' %}    {# Form section #}
    {% dnd_section
      background_color={
        r: 248,
        g: 250,
        b: 252,
        a: 1
      },
      vertical_alignment='MIDDLE'
    %}
      {% dnd_module path='@hubspot/image',
        img={
          'alt': 'Stock placeholder image with grayscale geometrical mountain landscape',
          'size_type': 'auto',
          'src': get_asset_url('../images/grayscale-mountain.png')
        },
        offset=0,
        width=6
      %}
      {% end_dnd_module %}
      {% dnd_column
        offset=6,
        width=6
      %}
        {% dnd_row %}
          {% dnd_module path='@hubspot/rich_text'%}
            {% module_attribute 'html' %}
              <h1>This is your main headline.</h1>
              <p>Use this space to tell everyone about what you have to offer.</p>
            {% end_module_attribute %}
          {% end_dnd_module %}
        {% end_dnd_row %}
        {% dnd_row %}
          {% dnd_module path='@hubspot/form' %}
          {% end_dnd_module %}
        {% end_dnd_row %}
      {% end_dnd_column %}
    {% end_dnd_section %}
    {# End form section #}    {# Two column image right section #}
    {% dnd_section
      vertical_alignment='MIDDLE'
    %}
      {% dnd_module path='@hubspot/rich_text',
        offset=0,
        width=6
      %}
        {% module_attribute 'html' %}
          <h2>Provide more details here.</h2>
          <p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>
        {% end_module_attribute %}
      {% end_dnd_module %}
      {% dnd_module path='@hubspot/image',
        img={
          'alt': 'Stock placeholder image with grayscale geometrical mountain landscape',
          'size_type': 'auto',
          'src': get_asset_url('../images/grayscale-mountain.png')
        },
        offset=6,
        width=6
      %}
      {% end_dnd_module %}
    {% end_dnd_section %}
    {# End two column image right section #}    {# Two column image left section #}
    {% dnd_section
      background_color={
        r: 248,
        g: 250,
        b: 252,
        a: 1
      },
      vertical_alignment='MIDDLE'
    %}
      {% dnd_module path='@hubspot/image',
        img={
          'alt': 'Stock placeholder image with grayscale geometrical mountain landscape',
          'size_type': 'auto',
          'src': get_asset_url('../images/grayscale-mountain.png')
        },
        offset=0,
        width=6
      %}
      {% end_dnd_module %}
      {% dnd_module path='@hubspot/rich_text',
        offset=6,
        width=6
      %}
        {% module_attribute 'html' %}
          <h2>Provide more details here.</h2>
          <p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>
        {% end_module_attribute %}
      {% end_dnd_module %}
    {% end_dnd_section %}
    {# End two column image left section #}  {% end_dnd_area %}
</main>
{% endblock body %}

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

CHugo · ‎abr 26, 2021

Thank you, it works 🙂

CMS Development