Trick # 214 | Dieser Beitrag beinhaltet 802 Wörter. – Geschätzte Lesezeit: ca. 5 Minuten.
Gerade in mehrspaltigen Designs möchte man vielleicht ein Bildmodul in exakt derselben Höhe wie der nebenan liegende Text darstellen. Das schaffen wir mit ein wenig CSS-Code.
So wie hier zu sehen könnte Ihr Layout gestaltet sein:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Um den Hack umzusetzen, öffnen Sie zunächst die Einstellungen der Zeile über den Zahnradbutton, wechseln dann in den Design-Tab und aktivieren Sie den Button «Spaltenhöhen ausgleichen» unter «Grösse einstellen».
Dann wechseln Sie ins Bild-Modul und vergeben diesem eine CSS-Klasse – unter «Erweitert», «CSS-ID und Klassen». Dort fügen Sie «full-height-image-column» in das Textfeld für «CSS-Klassen» ein.
Nun kommt der CSS-Code. Diesen fügen Sie in das CSS-Stylesheet Ihrer Website unter Design/Customizer/Zusätzliches CSS ein:
/* Hier setzen Sie die Höhe des Image-Moduls */
.full-height-image-column {
height: 100%;
}/* Dies setzt die Höhe des Image-Containers */
.full-height-image-column .et_pb_image_wrap {
height: 100%;
}/* Hier wird die Höhe und der Zuschnitt des Bildes selber festgelegt */
.full-height-image-column img {
object-fit: cover;
height: 100%;
}Schon sieht das obige Layout wunschgemäss aus. Etwa so wie im folgenden:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Werbung
Die Optimierung von Bildern ist ein entscheidender Aspekt des Website-Managements. Leider laden viele User zu grosse Bilder auf ihre Website. Das 30-Megabytebild aus der Kamera ist im Web schlicht unnötig, verlangsamt den Pageload, ...
Geben Sie Ihren HörerInnen einen Bonus und bieten Sie die Möglichkeit, Audios von Ihrer Website herunterzuladen. Mit dem Audio-Modul des Divi-Themes geht das ganz simpel: Sie fügen dem Modul einfach einen Download-Button hinzu.
Im Button-Modul des Divi-Themes lässt sich standardmässig bloss eine einzige Textzeile platzieren. Wem das nicht genügt und wer gerne eine zweite Textzeile hätte, muss ein wenig nachhelfen. Wir zeigen Ihnen wie.
Je nach Grösse Ihrer Anzeige und je nach Umfang des Menüs Ihrer Website kann es vorkommen, dass das Menü auf kleineren Monitoren zweizeilig dargestellt wird. Das ist natürlich unschön und wir versuchen es zu verhindern. Hier ein Hack, der helfen kann.
Keine Inhalte gefunden.
Werbung
