Wie nutzt man das Styla CMS Modul "HTML"?

Im HTML-Modul können beliebige Inhalte angezeigt werden.  Sie können iFrame-Links einfügen oder einen Code mit benutzerdefiniertem CSS schreiben.

HTML

Beschreibung:

Im HTML-Modul können beliebige Inhalte angezeigt werden. 
Sie können iFrame-Links einfügen oder einen Code mit benutzerdefiniertem CSS schreiben.

Beispiel-Versionen:

Version

iFrame

HTML with Custom CSS

Anwendungs-bereiche

Um externe Inhalte anzuzeigen (z. B. eine Google Maps-Karte)

Um benutzerdefinierten Inhalt anzuzeigen

Layout

  • Zeile: 2:1 Layout / Standardbreite
  • Ausrichten: Zentriert / Abstand oben: Groß / Innere Abstände: Groß
  • Kein Hintergrund

Code

 
 
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d155421.59372202243!2d13.284650129082397!3d52.50697037931671!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a84e373f035901%3A0x42120465b5e3b70!2sBerlin!5e0!3m2!1sen!2sde!4v1651128430207!5m2!1sen!2sde" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
 
 
<style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); :not(#\\20) .stylaApp *.custom-headline { font-size: 2.5rem; line-height: 1.2; font-family: 'Montserrat', serif; font-weight: 700; color: darkgreen; } </style> <div> <h2 class="custom-headline">This is some HTML</h2> <p>to show different usecases of the HTML Module</p> </div>

Preview

49cfba85-3d6b-40f4-beae-2f0f7d4fccea