How to Create Layout of image , text section on Adjacent sides using Dnd areas blockbody.

[ShyamVikaas]

Hi All,

 My sole intention is to create a layout of image , text inside a section which should be editable in Hubspot Website Pages from CLI Boilplate code. Seeking right approach to style this modules of image, text. if Tailwind is applicable to Style this HUBL Dnd_module. Hope I will be Happy to do so

Thanks in Advance 

Regards 

Shyam Vikaas D

[ShyamVikaas]

where can i get better understanding of custom module approach. i couldnt get resource, sample code for its implementation with tailwind css. could you please me in implementation of custom module in Hubspot

[Anton · Accepted solution]

Hi @ShyamVikaas, 

you can create a section template or a custom module for this. 

Section templates look something like this:

<!--
 templateType: section
 label: My saved section
 description: Lorem ipsum
 isAvailableForNewContent: true
-->
{% dnd_section, class="first-cssClass second-cssClass" %}
{# your section layout goes here #}
{% end_dnd_section %}

a custom module layout with an image,(rich-)text option and a "should the image be on the left or on the right" option could look something like this:

<div class="myModule-wrapper">
   {% if module.image_position == "left" %}
   <div class="leftArea image-wrapper">
      {% if module.image.src %}
         <img src="{{ module.image.src }}" alt="{{ module.image.alt }}" class="image-class">
      {% endif %}
   </div>
   <div class="rightArea text-wrapper">
      {{ module.custom_text }}
   </div>
   {% else %}
   <div class="leftArea image-wrapper">
      {{ module.custom_text }}
   </div>
   <div class="rightArea text-wrapper">
      {% if module.image.src %}
         <img src="{{ module.image.src }}" alt="{{ module.image.alt }}" class="image-class">
      {% endif %}
   </div>
   {% endif %}
</div>

Here are some more information about sections and modules:

• reusable sections
• (custom) module configuration

My personal recommendation would be to go with the custom module approach since it will give you more flexibility but it has some drawbacks since modules are considered the smallest possible element for dnd. Therefore they don't support dnd(you can't place other dnd elements inside of them) and you can use them only in columns, sections and rows but not the other way round - unless you recreate the layout and functionality inside the module. 

best, 

Anton

[ShyamVikaas]

How to implement the tailwind css to it and what will be the right approach for styling

[Anton]

Hi @ShyamVikaas,

1. create a custom module
2. write your desired HTML layout with the tailwind classes you like to use
3. add following fields
   1. image field
   2. text field
   3. (rich-)text fiel
   to it
4. add the fields to the layout
5. save/publish the module
6. replace the whole dnd-layout in your template with this one module
7. done

As for styling you have "unlimited" options. 

• wrapping the whole module code in a div with a class and add your custom styling to an already existing CSS file which is getting loaded
• add static CSS to the module.css
• add static CSS to the module.html wrapped inside a {% require_css %} function
• add styling fields to the module fields and add them inside a {% scope_css %} function in the module.html 
• Use booleans to toggle between classes
• Use choices to switch between classes
• ...

best, 

Anton