Marketing & Content Hub | Fragen, Tipps & bewährte Methoden

Dennis-DWFB
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

LP: Unterschiedliche Inhalte je nach Interesse

SOLVE

Hi zusammen,

ist es auf HubSpot Landing Pages möglich, folgendes Szenario umzusetzen:

 

Es gibt insgesamt 4 Themenfelder des Unternehmens. Für 3 Themenfelder soll es die direkte Anzeige des Ansprechpartners geben; für 1 Themenfeld soll ein Formular erscheinen.

 

Also ungefähr so, als ob man ein Formular verschachtelt und dann sagt "Wenn dieser Wert gleich A ist, zeig dieses weitere Feld A". Nur dass eben nur in 1 Falle überhaupt ein Formular angezeigt werden soll.

 

Klingt wahrscheinlich verwirrender als ich es eigemtlich meine. Vielleicht hat ja trotzdem jemand eine Idee 😉

 

Wie immer vielen Dank vorab!

Dennis

0 Upvotes
1 Accepted solution
Anton
Solution
Thought Leader | Partner
Thought Leader | Partner

LP: Unterschiedliche Inhalte je nach Interesse

SOLVE

Hi @Dennis-DWFB

bin persönlich kein großer Freund von Akkordeons, da sie aus meist aus Barrierefreiheitsgründen eher schwierig sind. (Ein weiterer Klick für den User; Man muss die einzelnen Reiter mit "Tab" und "Leertaste" ansteuern können etc). Das Beispiel aus der Code-Gallery ist - von Werk aus - nicht auf eine Tastatur Navigation ausgelegt.

 

Bei Bootstrap gibt es ein sehr gutes Akkordeon, welches man natürlich an HubSpot anpassen kann. 

 

Das wäre eine angepasste Version:

Anton_0-1660575176957.png

 

Hier der Code:

<div class="accordion" id="{{ module.akkordeon_name|lower|cut(' ') }}">
  {% for single_acc in module.akkordeon %}
		<div class="accordion-item">
    <h2 class="accordion-header" id="{{ single_acc.headline|lower|cut(' ') }}">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#{{ single_acc.headline|lower|cut(' ') }}" aria-expanded="true" aria-controls="{{ single_acc.headline|lower|cut(' ') }}">
        {{ single_acc.headline }}
      </button>
    </h2>
    <div id="{{ single_acc.headline|lower|cut(' ') }}" class="accordion-collapse collapse show" aria-labelledby="{{ single_acc.headline|lower|cut(' ') }}" data-bs-parent="#{{ single_acc.akkordeon_name|lower|cut(' ') }}">
      <div class="accordion-body">
        {{ single_acc.content }}
      </div>
    </div>
  </div>
{% endfor %}
</div>

Bitte beachte, das hier noch die komplette CSS und Javascripts fehlen, die für die Funktionalität zuständig sind. 

 

 

Den Content kann man natürlich individuell ausbauen. Beispielsweise mit einem sogeannten "Choise"(if-statement). Wie das Aussehen kann siehst du hier:

Anton_1-1660575814406.png

 

Anton_2-1660575840276.png

 

Code:

<div class="accordion" id="{{ module.akkordeon_name|lower|cut(' ') }}">
		{% for single_acc in module.akkordeon %}
		<div class="accordion-item">
				<h2 class="accordion-header" id="{{ single_acc.headline|lower|cut(' ') }}">
						<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#{{ single_acc.headline|lower|cut(' ') }}" aria-expanded="true" aria-controls="{{ single_acc.headline|lower|cut(' ') }}">
								{{ single_acc.headline }}
						</button>
				</h2>
				<div id="{{ single_acc.headline|lower|cut(' ') }}" class="accordion-collapse collapse show" aria-labelledby="{{ single_acc.headline|lower|cut(' ') }}" data-bs-parent="#{{ single_acc.akkordeon_name|lower|cut(' ') }}">
						<div class="accordion-body">
								{% if single_acc.content_typ == "text" %}
								{{ single_acc.content }}
								{% elif single_acc.content_typ == "form" %}
								{% form
		              form_to_use="{{ single_acc.form_select.form_id }}"
		              response_response_type="{{ single_acc.form_select.response_type }}"
		              response_message="{{ single_acc.form_select.message }}"
		              response_redirect_id="{{ single_acc.form_select.redirect_id }}"
		              response_redirect_url="{{single_acc.form_select.redirect_url}}"
		              gotowebinar_webinar_key="{{ single_acc.form_select.gotowebinar_webinar_key }}"
	              %}
								{% elif single_acc.content_typ == "image" %}
								{% if single_acc.image_field.src %}
				          {% set sizeAttrs = 'width="{{ single_acc.image_field.width }}" height="{{ single_acc.image_field.height }}"' %}
				          {% if single_acc.image_field.size_type == 'auto' %}
					          {% set sizeAttrs = 'width="{{ single_acc.image_field.width }}" height="{{ single_acc.image_field.height }}" style="max-width: 100%; height: auto;"' %}
				          {% elif single_acc.image_field.size_type == 'auto_custom_max' %}
					          {% set sizeAttrs = 'width="{{ single_acc.image_field.max_width }}" height="{{ single_acc.image_field.max_height }}" style="max-width: 100%; height: auto;"' %}
				          {% endif %}
				          {% set loadingAttr = single_acc.image_field.loading != 'disabled' ? 'loading="{{ single_acc.image_field.loading }}"' : '' %}
		                <img src="{{ single_acc.image_field.src }}" alt="{{ single_acc.image_field.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
	                {% endif %}
								{% endif %}
						</div>
				</div>
		</div>
		{% endfor %}
</div>

 

Den Content bereich (accordion-body) kannst du natürlich noch nach Bedarf weiter ausbauen. Allerdings sind Akkordeons hauptsächlich für (lange) Texte gedacht. 

 

 

VG

Anton

 

Anton Bujanowski Signature

View solution in original post

5 Replies 5
Anton
Thought Leader | Partner
Thought Leader | Partner

LP: Unterschiedliche Inhalte je nach Interesse

SOLVE

Hi @Dennis-DWFB

ich würde es mit einem Custom Modul lösen, da du bei Custom Modulen Smart-rules anwenden kannst. 

 

Ein ganz simples Custom Modul für Formular wäre so aufgebaut:

Anton_0-1660572481390.png

 

  1. neues Modul erstellen
  2. Formular Funktion zum Modul hinzufügen
  3. Funktion Snippet in den HTML+Hubl bereich copy/pasten
  4. Custom Modul auf der Seite/im Template einbauen
  5. Smart-Rules erstellen
  6. fertig

 

Die Smart-Rules könntest du anhand von Listenzugehörigkeiten steuern und die Kontakte mittels Workflow den entsprechenden Listen zuordnen.

 

 

 

Hoffe, das hilft

 

 

VG

Anton

 

 

Anton Bujanowski Signature
Dennis-DWFB
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

LP: Unterschiedliche Inhalte je nach Interesse

SOLVE

Hi @Anton ,

 

sehr cool, danke für dein individuelles Feedback! Aber: Mit Smart Rules werden wir hier nicht weit kommen, da die Funktion bereits für jeden Website-Besucher greifen soll.

 

Ich liebäugel gerade ein wenig mit der Akkordeon-Funktion, weiß aber (als Nicht-Programmierer) nicht wie sehr sich die einzelnen Reiter individualisieren lassen bzw. ob ich dann in 1 Reiter ein Formular anzeigen lassen könnte und in den anderen 3 Reitern Ansprechpartner mit Bild und Kontaktdaten. Hast du da Erfahrungen bei Akkordeons?

 

https://designers.hubspot.com/code-gallery/entry/founders/esparkbizhubspot-Tabs-to-Accordion-Module

 

Edit: Hab's gerade mal mit nem kostenlosen Akkordeon aus dem Marketplace versucht. Funktioniert. Ich kann jeden Reiter individualisieren und auch in 1 Reiter ein Formular einbinden. Freue mich aber natürlich weiterhin auf etwaige andere Ideen.

 

 

0 Upvotes
Anton
Solution
Thought Leader | Partner
Thought Leader | Partner

LP: Unterschiedliche Inhalte je nach Interesse

SOLVE

Hi @Dennis-DWFB

bin persönlich kein großer Freund von Akkordeons, da sie aus meist aus Barrierefreiheitsgründen eher schwierig sind. (Ein weiterer Klick für den User; Man muss die einzelnen Reiter mit "Tab" und "Leertaste" ansteuern können etc). Das Beispiel aus der Code-Gallery ist - von Werk aus - nicht auf eine Tastatur Navigation ausgelegt.

 

Bei Bootstrap gibt es ein sehr gutes Akkordeon, welches man natürlich an HubSpot anpassen kann. 

 

Das wäre eine angepasste Version:

Anton_0-1660575176957.png

 

Hier der Code:

<div class="accordion" id="{{ module.akkordeon_name|lower|cut(' ') }}">
  {% for single_acc in module.akkordeon %}
		<div class="accordion-item">
    <h2 class="accordion-header" id="{{ single_acc.headline|lower|cut(' ') }}">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#{{ single_acc.headline|lower|cut(' ') }}" aria-expanded="true" aria-controls="{{ single_acc.headline|lower|cut(' ') }}">
        {{ single_acc.headline }}
      </button>
    </h2>
    <div id="{{ single_acc.headline|lower|cut(' ') }}" class="accordion-collapse collapse show" aria-labelledby="{{ single_acc.headline|lower|cut(' ') }}" data-bs-parent="#{{ single_acc.akkordeon_name|lower|cut(' ') }}">
      <div class="accordion-body">
        {{ single_acc.content }}
      </div>
    </div>
  </div>
{% endfor %}
</div>

Bitte beachte, das hier noch die komplette CSS und Javascripts fehlen, die für die Funktionalität zuständig sind. 

 

 

Den Content kann man natürlich individuell ausbauen. Beispielsweise mit einem sogeannten "Choise"(if-statement). Wie das Aussehen kann siehst du hier:

Anton_1-1660575814406.png

 

Anton_2-1660575840276.png

 

Code:

<div class="accordion" id="{{ module.akkordeon_name|lower|cut(' ') }}">
		{% for single_acc in module.akkordeon %}
		<div class="accordion-item">
				<h2 class="accordion-header" id="{{ single_acc.headline|lower|cut(' ') }}">
						<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#{{ single_acc.headline|lower|cut(' ') }}" aria-expanded="true" aria-controls="{{ single_acc.headline|lower|cut(' ') }}">
								{{ single_acc.headline }}
						</button>
				</h2>
				<div id="{{ single_acc.headline|lower|cut(' ') }}" class="accordion-collapse collapse show" aria-labelledby="{{ single_acc.headline|lower|cut(' ') }}" data-bs-parent="#{{ single_acc.akkordeon_name|lower|cut(' ') }}">
						<div class="accordion-body">
								{% if single_acc.content_typ == "text" %}
								{{ single_acc.content }}
								{% elif single_acc.content_typ == "form" %}
								{% form
		              form_to_use="{{ single_acc.form_select.form_id }}"
		              response_response_type="{{ single_acc.form_select.response_type }}"
		              response_message="{{ single_acc.form_select.message }}"
		              response_redirect_id="{{ single_acc.form_select.redirect_id }}"
		              response_redirect_url="{{single_acc.form_select.redirect_url}}"
		              gotowebinar_webinar_key="{{ single_acc.form_select.gotowebinar_webinar_key }}"
	              %}
								{% elif single_acc.content_typ == "image" %}
								{% if single_acc.image_field.src %}
				          {% set sizeAttrs = 'width="{{ single_acc.image_field.width }}" height="{{ single_acc.image_field.height }}"' %}
				          {% if single_acc.image_field.size_type == 'auto' %}
					          {% set sizeAttrs = 'width="{{ single_acc.image_field.width }}" height="{{ single_acc.image_field.height }}" style="max-width: 100%; height: auto;"' %}
				          {% elif single_acc.image_field.size_type == 'auto_custom_max' %}
					          {% set sizeAttrs = 'width="{{ single_acc.image_field.max_width }}" height="{{ single_acc.image_field.max_height }}" style="max-width: 100%; height: auto;"' %}
				          {% endif %}
				          {% set loadingAttr = single_acc.image_field.loading != 'disabled' ? 'loading="{{ single_acc.image_field.loading }}"' : '' %}
		                <img src="{{ single_acc.image_field.src }}" alt="{{ single_acc.image_field.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
	                {% endif %}
								{% endif %}
						</div>
				</div>
		</div>
		{% endfor %}
</div>

 

Den Content bereich (accordion-body) kannst du natürlich noch nach Bedarf weiter ausbauen. Allerdings sind Akkordeons hauptsächlich für (lange) Texte gedacht. 

 

 

VG

Anton

 

Anton Bujanowski Signature
Dennis-DWFB
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

LP: Unterschiedliche Inhalte je nach Interesse

SOLVE

Mega @Anton , danke für deine Mühe. Schauen wir uns an!

MiaSrebrnjak
Community Manager
Community Manager

LP: Unterschiedliche Inhalte je nach Interesse

SOLVE

Hi @Dennis-DWFB,

 

danke für die Frage! 

Lass uns die CMS-Experten fragen, ob sie weiterhelfen können:

hi @Anton@Oezcan@StefanWendt, habt ihr eine Idee, wie man sowas umsetzen könnte? Danke!  🙂

 

Liebe Grüße

Mia, Community Team  

 




Wusstest du, dass es auch eine DACH-Community gibt?
Nimm an regionalen Unterhaltungen teil, indem du deine Spracheinstellungen änderst


Did you know that the Community is available in other languages?
Join regional conversations by
changing your language settings