Mobile Ansicht von Landing Pages optimieren

[Angi]

Hallo Community,

unsere Landing Pages wollen wir natürlich auch in der mobilen Ansicht "chic" haben. Allerdings gerate ich hier zusehends an die Grenzen des Editors. Manche Elemente kann ich in der mobilen Ansicht ausblenden, andere nicht. 

Sind das die Grenzen der Starter Version oder gibt es Tricks, die ich nicht kenne? Ins Html oder den Code kann ich zumindest nicht eingreifen mit der Starter Version.

Bin dankbar für Hinweise und Tipps. 

Viele Grüße

Angi

[MiaSrebrnjak · Accepted solution]

Hi @Angi,

interessantes Thema, danke für deine Frage!

Ich werde ein paar andere Community Mitglieder & HubSpot Experten markieren, um zu sehen, ob sie ihr Wissen mit uns teilen können:

hi @Anton, @mariomaier, @Oezcan, @StefanWendt, habt ihr vielliecht Tipps zu Landing Pages & der mobilen Ansicht? Danke!

Viele Grüße, 

Mia

[Anton · Accepted solution]

Hi @Angi,

an "Starter" liegt es nicht, da diese Option in jedem "Plan" enthalten ist. 

Tritt dieser Sachverhalt bei Custom Modulen, Default Modulen oder beiden auf? 
Default Module: sind in jeder Instanz enthalten und können nicht modifiziert werden

Custom Module: selbstgecoded/gekauft/heruntergeladen/Theme o. Template spezifisch.

Erste Einschätzung aus der Developer Brille: Wenn es sich hierbei um Custom Module handelt, dann ist die Option höchstwahrscheinlich a) nicht eingebaut oder b) dekativiert. 

Hier der entsprechende Knowledge base Artikel dazu.

Als Developer würde ich custom Module durch eine simple Modifizierung(vorher immer eine Kopie des Modules erstellen) anpassen.

Hier ein "mini Tutorial" falls du oder jemand von deinen Kollegen es ausprobieren möchtet(Ich gehe hier den Design-Manager weg, da dies einfacher ist): 

• Module klonen(Backup)
• Neuen Namen geben und das "alte" Modul für künftige Verwendung deaktivieren(oben rechts neben aktualisieren/veröffentlichen Button)
• geklonte Module öffnen und den Baustein "Boolesch" hinzufügen
  • Ich empfehle ihn mittels drag&drop in der Sidebar nach ganz oben zu setzen, damit er später schneller geklickt werden kann
• falls das Module keine "wrapping-div" o.ä hat, eine hinzufügen(siehe Code block)

<div class="myCustomModule">
...
{# Content/Module layout #}
...
</div>

• nun hast du mehrere Möglichkeiten das Module auf mobile ein-/auszublenden. Hier die einfachste:
  • Mit Hilfe der Boolesch Abfrage eine CSS Klasse triggern. Wie hierbei der Code aussehen kann/muss siehst du hier

Module HTML:

<div class="myCustomModule{% if module.mobile_verstecken %} mobileHidden{% endif%}">
...
{# Content/Module layout #}
...
</div>

Haupt CSS Datei:

@media screen and (max-width:480px){ {# hier kannst du deine gewünschte max. Bildschrimbreite angeben, Standard sollten 480px sein. #}
.moduleHidden{
display:none;
}
}

Möglicherweise hast du/ihr schon eine ähnliche Klasse, falls dem so ist, kannst du auf den CSS Code verzichten und stattdessen in der if-Abfrage die vorhandene Klasse ansprechen. 

Bitte beachte: wenn du/ihr das Module klonst/klont, dann wird diese Option nur für das neue Module vorhanden sein. Bereits verbaute/verwendete Module sind davon nicht betroffen und müssen neu ersetzt und neu befüllt werden. 

Hoffe das hilft

Viele Grüße

Anton

[Angi]

Vielen Dank Mario! Sehr gut.. da tun sich ganz neue Optionen auf in HubSpot. Ich muss mich mal damit beschäftigen und melde mich gern bei Fragen zurück. 

Viele Grüße

Angi

[mariomaier · Accepted solution]

Hallo Angi, 

anbei ein kurzes Erklärungsvideo wie du HTML und CSS beim HubSpot CMS Hub aufrufen kannst und ein Custom Modul erstellst - leider ist audio und video nicht ganz sycron (Loom hat hier gerade ein wenig Probleme) aber es hilft dir trotzdem hoffentlich weiter.

BG Mario 

Hier das Video: https://www.loom.com/share/29b203bfa71f4f12bc3ceb000f01b94d

[Angi]

Hallo Mario, hab dein Video angeschaut - erstmal großartig, dass du das aufgenommen hast!

Unter Marketing - Dateien und Vorlagen komm ich allerdings nicht zum Design Manager. Diese Option habe ich gar nicht. Ich kann nur Dateien und Vorlagen anklicken, dann zeigt er mir hochladene Bilder etc. Aber in das Feld, das du zeigst, komme ich nicht. Ist da doch die Starter Version begrenzt?

[Angi]

Vielen Dank Mario, das schau ich mir an. 

[mariomaier]

Das HubSpot Community Tool hat leider meinen Video-Embedd Versuch nicht ganz richtig abgebildet -> hier der Link zum Video.

BG Mario 

[mariomaier]

https://www.loom.com/share/29b203bfa71f4f12bc3ceb000f01b94d

[Anton · Accepted solution]

Hi @Angi,

an "Starter" liegt es nicht, da diese Option in jedem "Plan" enthalten ist. 

Tritt dieser Sachverhalt bei Custom Modulen, Default Modulen oder beiden auf? 
Default Module: sind in jeder Instanz enthalten und können nicht modifiziert werden

Custom Module: selbstgecoded/gekauft/heruntergeladen/Theme o. Template spezifisch.

Erste Einschätzung aus der Developer Brille: Wenn es sich hierbei um Custom Module handelt, dann ist die Option höchstwahrscheinlich a) nicht eingebaut oder b) dekativiert. 

Hier der entsprechende Knowledge base Artikel dazu.

Als Developer würde ich custom Module durch eine simple Modifizierung(vorher immer eine Kopie des Modules erstellen) anpassen.

Hier ein "mini Tutorial" falls du oder jemand von deinen Kollegen es ausprobieren möchtet(Ich gehe hier den Design-Manager weg, da dies einfacher ist): 

• Module klonen(Backup)
• Neuen Namen geben und das "alte" Modul für künftige Verwendung deaktivieren(oben rechts neben aktualisieren/veröffentlichen Button)
• geklonte Module öffnen und den Baustein "Boolesch" hinzufügen
  • Ich empfehle ihn mittels drag&drop in der Sidebar nach ganz oben zu setzen, damit er später schneller geklickt werden kann
• falls das Module keine "wrapping-div" o.ä hat, eine hinzufügen(siehe Code block)

<div class="myCustomModule">
...
{# Content/Module layout #}
...
</div>

• nun hast du mehrere Möglichkeiten das Module auf mobile ein-/auszublenden. Hier die einfachste:
  • Mit Hilfe der Boolesch Abfrage eine CSS Klasse triggern. Wie hierbei der Code aussehen kann/muss siehst du hier

Module HTML:

<div class="myCustomModule{% if module.mobile_verstecken %} mobileHidden{% endif%}">
...
{# Content/Module layout #}
...
</div>

Haupt CSS Datei:

@media screen and (max-width:480px){ {# hier kannst du deine gewünschte max. Bildschrimbreite angeben, Standard sollten 480px sein. #}
.moduleHidden{
display:none;
}
}

Möglicherweise hast du/ihr schon eine ähnliche Klasse, falls dem so ist, kannst du auf den CSS Code verzichten und stattdessen in der if-Abfrage die vorhandene Klasse ansprechen. 

Bitte beachte: wenn du/ihr das Module klonst/klont, dann wird diese Option nur für das neue Module vorhanden sein. Bereits verbaute/verwendete Module sind davon nicht betroffen und müssen neu ersetzt und neu befüllt werden. 

Hoffe das hilft

Viele Grüße

Anton

[MiaSrebrnjak · Accepted solution]

Hi @Angi,

interessantes Thema, danke für deine Frage!

Ich werde ein paar andere Community Mitglieder & HubSpot Experten markieren, um zu sehen, ob sie ihr Wissen mit uns teilen können:

hi @Anton, @mariomaier, @Oezcan, @StefanWendt, habt ihr vielliecht Tipps zu Landing Pages & der mobilen Ansicht? Danke!

Viele Grüße, 

Mia