# editing a template module

**URL:** <https://community.hubspot.com/t/editing-a-template-module/119991>\
**Category:** CMS Development\
**Tags:** professional, enterprise\
**Created:** [November 7, 2024, 9:27am UTC](https://community.hubspot.com/t/editing-a-template-module/119991 "2024-11-07T09:27:48Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ESchlangerLev](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@ESchlangerLev](https://community.hubspot.com/u/ESchlangerLev)\
**Post date:** [November 7, 2024, 9:27am UTC](https://community.hubspot.com/t/editing-a-template-module/119991/1 "2024-11-07T09:27:48Z")

</div>

I have a landing page made with a template module as the following - made for a webinar with speakes.

How can I change the speakers lines manually so that the name of the speaker will be one line, the title on the second line and the organization name at the third line?

I would be great if there was an option to adjust manually or set the default lines.

\<div class=“speakerFormSection”\>

\<div class=“wrapper”\>

\<div class=“div-block-43-copy”\>

\<div class=“speakers-20”\>

\<div class=“speakers-h”\>Speakers:\<br\>

\</div\>

{% for item in module.speaker\_group %}

\<div class=“div-block-44”\>

{% if item.speaker\_image.src %}

{% set sizeAttrs = ‘width=“{{ item.speaker\_image.width }}” height=“{{ item.speaker\_image.height }}”’ %}

{% if item.speaker\_image.size\_type == ‘auto’ %}

{% set sizeAttrs = ‘style=“max-width: 100%; height: auto;”’ %}

{% elif item.speaker\_image.size\_type == ‘auto\_custom\_max’ %}

{% set sizeAttrs = ‘width=“{{ item.speaker\_image.max\_width }}” height=“{{ item.speaker\_image.max\_height }}” style=“max-width: 100%; height: auto;”’ %}

{% endif %}

{% set loadingAttr = item.speaker\_image.loading != ‘disabled’ ? ‘loading=“{{ item.speaker\_image.loading }}”’ : ‘’ %}

\<img src=“{{ item.speaker\_image.src }}” alt=“{{ item.speaker\_image.alt }}” {{ loadingAttr }} {{ sizeAttrs }}\>

{% endif %}

\<div class=“text-block-6 webinar”\>{{ item.speaker\_name }},\<br\>\‍

\<span class=“whiterole webinar”\>{{ item.speaker\_designation }}\</span\>

\<br\>

\</div\>

\</div\>

{% endfor %}

\</div\>

\<div class=“lp-content-70”\>

{{ module.content }}

\</div\>

\<div class=“form-30”\>

\<div class=“lp-form-box webinar”\>

\<h2 class=“form-heading”\>{{ module.form\_title }}\</h2\>

\<div class=“lp-form”\>

{% form

form\_to\_use=“{{ module.select\_form.form\_id }}”

response\_response\_type=“{{ module.select\_form.response\_type }}”

response\_message=“{{ module.select\_form.message }}”

response\_redirect\_id=“{{ module.select\_form.redirect\_id }}”

response\_redirect\_url=“{{module.select\_form.redirect\_url}}”

gotowebinar\_webinar\_key=“{{ module.select\_form.gotowebinar\_webinar\_key }}”

%}

\</div\>

\</div\>

\</div\>

\</div\>

\</div\>

\</div\>

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [November 7, 2024, 8:33pm UTC](https://community.hubspot.com/t/editing-a-template-module/119991/2 "2024-11-07T20:33:10Z")

</div>

Hi @ESchlangerLev,

it’s hard to say what’s in the “Speaker designation” element. But if you want to have everything seperated you could add a few text(not rich-text) elements(title, organization…) to the speaker\_group element and change the code to something like this:

```lia-code-sample
{% require_css %}
<style>
{% scope_css %}
.speaker-information{
 display:flex;
 flex-direction: column;
 gap: .5rem; 
}
{% end_scope_css %}
</style>
{% end_require_css %}

{# The code above this might not be needed. Feel free to delete it #}
...
<div class="speakerFormSection">
 <div class="wrapper">
 <div class="div-block-43-copy">
 <div class="speakers-20">
 <div class="speakers-h">Speakers:<br>
 </div>
 {% for item in module.speaker_group %}
 <div class="div-block-44">
 {% if item.speaker_image.src %}
 {% set sizeAttrs = 'width="{{ item.speaker_image.width }}" height="{{ item.speaker_image.height }}"' %}
 {% if item.speaker_image.size_type == 'auto' %}
 {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
 {% elif item.speaker_image.size_type == 'auto_custom_max' %}
 {% set sizeAttrs = 'width="{{ item.speaker_image.max_width }}" height="{{ item.speaker_image.max_height }}" style="max-width: 100%; height: auto;"' %}
 {% endif %}
 {% set loadingAttr = item.speaker_image.loading != 'disabled' ? 'loading="{{ item.speaker_image.loading }}"' : '' %}
 <img src="{{ item.speaker_image.src }}" alt="{{ item.speaker_image.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
 {% endif %}
 <div class="text-block-6 webinar speaker-information">
 <span class="whiterole webinar">{{ item.speaker_name }}</span><br>
 <span class="whiterole webinar">{{ item.speaker_title }}</span><br>
 <span class="whiterole webinar">{{ item.organization }}</span>
 </div>
 </div>
 {% endfor %}
 </div>
 <div class="lp-content-70">
 {{ module.content }}
 </div>
 <div class="form-30">
 <div class="lp-form-box webinar">
 <h2 class="form-heading">{{ module.form_title }}</h2>
 <div class="lp-form">
 {% form
form_to_use="{{ module.select_form.form_id }}"
response_response_type="{{ module.select_form.response_type }}"
response_message="{{ module.select_form.message }}"
response_redirect_id="{{ module.select_form.redirect_id }}"
response_redirect_url="{{module.select_form.redirect_url}}"
gotowebinar_webinar_key="{{ module.select_form.gotowebinar_webinar_key }}"
%}
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

```

best,

Anton