CMS Development

CHugo
Contributor

Problem building pages from scratch

SOLVE

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>
<html lang="{{ html_lang }}" {{ html_lang_dir }}>
  <head>
    <meta charset="utf-8">
    {{ require_css(get_asset_url("/RLK-BLANK-THEME/css/main.css")) }}
    {% if page_meta.html_title %}<title>{{ page_meta.html_title }}</title>{% endif %}
    <meta name="description" content="{{ content.meta_description }}">
    {% if site_settings.favicon_src %}<link rel="shortcut icon" href="{{ site_settings.favicon_src }}" />{% endif %}
    <link rel="preconnect" href="https://fonts.gstatic.com">
    {{ standard_header_includes }}
  </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 %}
    {{ standard_footer_includes }} 
  </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
0 Upvotes
2 Accepted solutions
webdew
Solution
Guide | Diamond Partner
Guide | Diamond Partner

Problem building pages from scratch

SOLVE

Hi @CHugo ,

Try this code: 

<!--
  templateType: page
  isAvailableForNewContent: true
  label: Home
  screenshotPath: ../images/template-previews/home.png
-->
{% 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. 

View solution in original post

CHugo
Solution
Contributor

Problem building pages from scratch

SOLVE

Thank you, it works 🙂

View solution in original post

0 Upvotes
2 Replies 2
webdew
Solution
Guide | Diamond Partner
Guide | Diamond Partner

Problem building pages from scratch

SOLVE

Hi @CHugo ,

Try this code: 

<!--
  templateType: page
  isAvailableForNewContent: true
  label: Home
  screenshotPath: ../images/template-previews/home.png
-->
{% 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
Solution
Contributor

Problem building pages from scratch

SOLVE

Thank you, it works 🙂

0 Upvotes