Mediaplanung Beispiele auf einer Glasscheibe
Tipps zur Erstellung eines Mediaplans
12. Januar 2019
E-Mail Marketing
26. März 2019

Die automatische Anpassung der Spaltenhöhe im Muffin Builder des Betheme

In diesem Beitrag geht es um die automatische Anpassung von Blöcken (Inhaltselementen) im Muffin Builder. Das ist eigentlich ganz einfach, aber viele gehen umständliche Wege, die viel Zeit kosten und nicht wirklich zum gewünschten Ergebnis führen. So wird's gemacht.


Beispiel 1: Automatische Anpassung

So wird's gemacht:

1. Zuerst legt ihr eine eigene Section für die Elemente an, die angepasst werden sollen. In den Einstellungen der Section wählt ihr, unter den Fortgeschrittenen-Einstellungen, den Stil Equal Height | items in wrap durch anklicken des Kästchens aus.

2. Als nächstes wird der Umbruch (Wrap) eingefügt, in den die Inhaltselemente eingefügt werden.

Tipp: Damit die Kästchen etwas Abstand voneinander halten, habe ich in den Einstellungen der Spalte einen Innenabstand von 2% eingegeben. Hier könnte man auch mit Pixeln arbeiten und alle Seiten einzeln angeben. Ich mach es mir aber immer so leicht wie möglich und habe einfach eine Prozentzahl eingegeben, die sich dann auf alle Seiten bezieht.

4. Jetzt werden die Spalten mit den Inhalten, in meinem Fall Listenelemente, eingefügt und die Hintergrundfarbe ausgewählt. Alternativ könnt ihr auch ein Hintergrundbild wählen.

5. Die unterschiedlichen html Codes für die Darstellungsform der Listen könnt ihr auf der Betheme Seite nachsehen. Im Menüpunkt Sportcodes->Typografie->List&Bullet Lists. https://themes.muffingroup.com/be/splash/

Wichtig ist, für alles was nicht ausgerichtet werden soll, wieder eigene Sektionen anzulegen.

Das ist der html Code der Liste.

<h3>Listenbereich 1</h3>

<ul>
<li>Marketingkonzepte</li>
<li>Online Marketing und klassische Werbung</li>
<li>Planung, Konzeption und Entwurf</li>
<li>Kommunikation & Social Media</li>
<li>Suchmaschinenoptimierung SEO</li>
<li>Newsletter Marketing</li>
<li>Websites, Blogs, E-Commerce</li>
<li>Content Management / CMS WordPress</li>
<li>Analyse und Optimierung</li>
</ul>
Screenshot Betheme Muffin Builder

Betheme - Hilfe für Einsteiger

Benötigt Ihr Unterstützung bei der Entwicklung eurer Website mit dem Betheme?

Beispiel 2: Gestaltungsvariante

Gestaltung der Inhaltselemente mit HTML

Die Spalten können dann mit HTML individuell gestaltet werden wie z.B. die Abstände und die Schriftgröße. In diesem Beispiel habe ich die Schrift etwas größer gemacht (big) und den Abstand zum Rand verändert. Hier sind euch keine Grenzen gesetzt, ihr müsst nur HTML lernen. Eine gute Adresse ist: W3Schools.

<div style="padding: 20px; 20px, 20px, 20px">
<h3>Listenbereich 1</h3>

<ul class="big">
<li>Marketingkonzepte</li>
<li>Online Marketing und klassische Werbung</li>
<li>Planung, Konzeption und Entwurf</li>
<li>Kommunikation & Social Media</li>
<li>Suchmaschinenoptimierung SEO</li>
<li>Newsletter Marketing</li>
<li>Websites, Blogs, E-Commerce</li>
<li>Content Management / CMS WordPress</li>
<li>Analyse und Optimierung</li>
</ul>
</div>