Kreatives Webdesign leicht gemacht. Wie Du mit negativen Margins überlappende Elemente erstellst und Deinem 08/15-Design einen echten Wow-Faktor verleihst. Let’s get creative! ✨
How to Überlappende Elemente
In diesem Tutorial zeige ich Dir, wie Du mit etwas Kreativität (und einem kleinen bisschen Custom Code) ein simples Design in einen echten Blickfang verwandelst.
Du lernst:
- Wie Du mit negativen Margins (negative Außenabstände) arbeiten kannst, um Text und Bilder übereinander zu legen
- Wie Du durch CSS-Klassen einen weißen Hintergrund für Deine Texte erstellst, damit sie über einem Video oder Bild lesbar bleiben
- Wie Du Videos mit Rahmen, Schatten und leichter Drehung ansprechend gestalten kannst
- Wie Du das Design für Tablet- und Mobilansicht optimierst
Der Trick mit dem negativen Margin und dem weißen Text-Hintergrund erzeugt einen modernen, dynamischen Look, der perfekt für kreative Webseiten, Portfolios oder ansprechende Landingpages geeignet ist.
Der komplette CSS-Code ist unter dem Video verfügbar – probier es aus und setze Deine eigenen kreativen Ideen um!
Tool-Tipps
*Affiliate-Link. Wenn Du über diesen Link etwas kaufst, kostet es Dich nichts extra, aber ich erhalte eventuell eine kleine Provision, die ich direkt in mein Galão Projekt reinvestiere 😊
Code zum Kopieren
Weißer Balken als Hintergrund bei der Überschrift. Tausche im Code die h1 gemäß der Überschriftenhierarchie aus.
/**Weißer Hintergrund Überschrift**/
.background-white h1 {
background-color: #FFFFFF;
display:inline;
white-space:pre-wrap;
padding: 0.1em;
}Einfügen entweder auf Widget Ebene im Titel Widget unter Einstellungen > Erweitert > Eigene CSS oder seitenübergreifend im Elementor Menü oben links > Drei Striche > Website Einstellungen > Individuelle CSS.
Weißer Balken als Hintergrund beim Fließtext.
/**Weißer Hintergrund Fließtext**/
.background-white p {
background-color: #FFFFFF;
display:inline;
white-space:pre-wrap;
padding: 0.1em;
}Einfügen entweder auf Widget Ebene im Text-Editor Widget unter Einstellungen > Erweitert > Eigene CSS oder seitenübergreifend im Elementor Menü oben links > Drei Striche > Website Einstellungen > Individuelle CSS.
