Problem building pages from scratch

CHugo — Fri, 23 Apr 2021 16:11:11 GMT

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>

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

Re: Problem building pages from scratch

webdew — Mon, 26 Apr 2021 11:52:29 GMT

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.

Re: Problem building pages from scratch

CHugo — Mon, 26 Apr 2021 13:51:37 GMT

Thank you, it works 🙂

topic Problem building pages from scratch in CMS Development

Problem building pages from scratch

Re: Problem building pages from scratch

Re: Problem building pages from scratch