I need to create 2 columns inside this tabber module, please assist asap!
I have a tabber module that requries a 2 column layout (one image and text on the right, see attached). Each tabbed section will share the same layout. I was instructed to hard code this and I'm not sure the best way to go about doing this as I'm very new to HubSpot CMS and web development. Please assist asap! Thank you so much!
Here is the link:
https://go.socialstudies.com/microcredentials-0
I need to create 2 columns inside this tabber module, please assist asap!
Hi @gramirez,
since you're using Vast - modify your tabber module as following:
<div class="tabber-content"> <div class="tab-pane active" id="tab-1"> <div class="span6 left-tab-col">YOUR CONTENT FOR THE LEFT COLUMN OF THE TAB GOES HERE</div> <div class="span6 right-tab-col">YOUR CONTENT FOR THE RIGHT COLUMN OF THE TAB GOES HERE</div> </div> <div class="tab-pane" id="tab-2"> <div class="span6 left-tab-col">YOUR CONTENT FOR THE LEFT COLUMN OF THE TAB GOES HERE</div> <div class="span6 right-tab-col">YOUR CONTENT FOR THE RIGHT COLUMN OF THE TAB GOES HERE</div> </div> <div class="tab-pane" id="tab-3"> <div class="span6 left-tab-col">YOUR CONTENT FOR THE LEFT COLUMN OF THE TAB GOES HERE</div> <div class="span6 right-tab-col">YOUR CONTENT FOR THE RIGHT COLUMN OF THE TAB GOES HERE</div> </div> <div class="tab-pane" id="tab-4"> <div class="span6 left-tab-col">YOUR CONTENT FOR THE LEFT COLUMN OF THE TAB GOES HERE</div> <div class="span6 right-tab-col">YOUR CONTENT FOR THE RIGHT COLUMN OF THE TAB GOES HERE</div> </div> </div>
you can change the span number to anything you want BUT both numbers inside a "tab-pane" have to be equal 12. Here some examples: span2 + span10, span3 + span9, span 4 + span8...
Also: wrap the module in the design-manager into a few groups and give them propper classes (like container and page-center) so that the content is not full-width(unless you want so).
It should look like this (of course with your header and footer)
I've added a few random modules to the group to show you how you should build your groups. The
.page-center
class is the Vast default to set everything inside to a max-width of 1260px(if I'm correct and you didn't change it)
best,
Anton
I need to create 2 columns inside this tabber module, please assist asap!
I need to create 2 columns inside this tabber module, please assist asap!
I need to create 2 columns inside this tabber module, please assist asap!
great!
Consider to create a custom module with a repeater function for this - this might help you/your content-creators.
If you don't have further questions/problems mark it as "solved" - it helps the community 🙂
best,
Anton
I need to create 2 columns inside this tabber module, please assist asap!
I need to create 2 columns inside this tabber module, please assist asap!
hey,
here's a link about repeater fields:
https://designers.hubspot.com/blog/repeating-fields-in-the-new-module-framework
basicly you create a new module in the design manager with the wrapping divs, add your desired functions on the right sidebar; group them and enable the repeater function in the group.
Your code should look like this
here's the source code:
<div class="tabber-wrap blog-tabber">
<ul class="clearfix tabber-tabs">
{% for item in module.single_tab %}
<li><a href="#tab-{{loop.index0}}">{{ item.tab_name }}</a></li>
{% endfor %}
</ul>
</div>
<div class="tabber-content">
{% for item in module.single_tab %}
<div class="tab-pane" id="tab-{{loop.index0}}">
<div class="span6 left-tab-col">
{% if item.image.src %}
{% set sizeAttrs = 'width="{{ item.image.width }}" height="{{ item.image.height }}"' %}
{% if item.image.size_type == 'auto' %}
{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
{% elif item.image.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ item.image.max_width }}px; max-height: {{ item.image.max_height }}px"' %}
{% endif %}
<img src="{{ item.image.src }}" alt="{{ item.image.alt }}" {{ sizeAttrs }}>
{% endif %}
</div>
<div class="span6 right-tab-col">{% inline_rich_text field="richtext_field" value="{{ item.richtext_field }}" %}</div>
</div>
{% endfor%}
</div>
You need to recreate the functions exactly as seen in the first screen - unless you know what you do 🙂
best,
Anton
I need to create 2 columns inside this tabber module, please assist asap!
I need to create 2 columns inside this tabber module, please assist asap!
I really just need each tab to hold the same 2 column layout at this point. It's ok if it's all hardcoded.
