editing a template module

Develop, Build & Integrate CMS Development
,
1

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>

2

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:

{% 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