Lesefortschritt:

Styling-Ideen für das Divi-Blurb-Modul

5. Januar 2025 | CSS-Stylesheet, Divi-Theme

Trick # 418 | Dieser Beitrag beinhaltet 4325 Wörter. – Geschätzte Lesezeit: ca. 22 Minuten.

Vor Wochenfrist haben wir einen Beitrag zum Blurb-Modul des Divi-Themes veröffentlicht, in dessen Folge zahlreiche Anfragen für besondere Stylings eingetroffen sind. Darum schieben wir heute eine Serie Stylingideen zum Informationstext-Modul nach, welche auch Ihnen helfen können.

Die folgenden Snippets sind allesamt bestimmt für Ihr CSS-Stylesheet. Sie finden es im Backend unter Design/Customizer/Zusätzliches CSS.

Styling #1

r

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Dieser Effekt wird durch nebenstehenden Code ausgelöst. Bewegen Sie den Mauszeiger über das Informationstext-Modul.

Den CSS-Code können Sie kopieren und in das CSS-Stylesheet Ihrer Website einbinden. Letzteres finden Sie im Backend unter Design/Customiuer/Zusätzliches CSS.

.blurb-1,
.blurb-1 h4,
.blurb-1 .et-pb-icon {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.blurb-1:hover {
    -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.blurb-1:hover h4,
.blurb-1:hover .et-pb-icon {
    color: #59B14B!important;
}

Styling #2

r

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Dieser Effekt wird durch nebenstehenden Code ausgelöst. Bewegen Sie den Mauszeiger über das Informationstext-Modul.

Den CSS-Code können Sie kopieren und in das CSS-Stylesheet Ihrer Website einbinden. Letzteres finden Sie im Backend unter Design/Customiuer/Zusätzliches CSS.

.blurb-2,
.blurb-2 .et-pb-icon {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.blurb-2:hover {
    -webkit-box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    background-color: #fff;
}
.blurb-2:hover .et-pb-icon {
    -webkit-transform: scale(1.2) rotate(360deg);
    transform: scale(1.2) rotate(360deg);
}

Styling #3

r

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Dieser Effekt wird durch nebenstehenden Code ausgelöst. Bewegen Sie den Mauszeiger über das Informationstext-Modul.

Den CSS-Code können Sie kopieren und in das CSS-Stylesheet Ihrer Website einbinden. Letzteres finden Sie im Backend unter Design/Customiuer/Zusätzliches CSS.

.blurb-3,
.blurb-3 .et-pb-icon {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.blurb-3:hover {
    -moz-box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.1);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.blurb-3:hover .et-pb-icon {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

Styling #4

r

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Dieser Effekt wird durch nebenstehenden Code ausgelöst. Bewegen Sie den Mauszeiger über das Informationstext-Modul.

Den CSS-Code können Sie kopieren und in das CSS-Stylesheet Ihrer Website einbinden. Letzteres finden Sie im Backend unter Design/Customiuer/Zusätzliches CSS.

.blurb-4,
.blurb-4 .et-pb-icon,
.blurb-4 h4 {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.blurb-4:hover {
    background-color: #59b14b33;
}
.blurb-4:hover .et-pb-icon,
.blurb-4:hover h4 {
    color: #59B14B!important;
}

Styling #5

r

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Dieser Effekt wird durch nebenstehenden Code ausgelöst. Bewegen Sie den Mauszeiger über das Informationstext-Modul.

Den CSS-Code können Sie kopieren und in das CSS-Stylesheet Ihrer Website einbinden. Letzteres finden Sie im Backend unter Design/Customiuer/Zusätzliches CSS.

.blurb-5,
.blurb-5 .et-pb-icon {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.blurb-5:hover {
    transform: translateY(10px);
}
.blurb-5:hover .et-pb-icon {
    transform: translateY(10px);
}

Styling #6

r

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Dieser Effekt wird durch nebenstehenden Code ausgelöst. Bewegen Sie den Mauszeiger über das Informationstext-Modul.

Den CSS-Code können Sie kopieren und in das CSS-Stylesheet Ihrer Website einbinden. Letzteres finden Sie im Backend unter Design/Customiuer/Zusätzliches CSS.

.blurb-6,
.blurb-6 .et-pb-icon {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.blurb-6:hover {
    transform: translateY(-20px);
}
.blurb-6:hover .et-pb-icon {
    transform: translateY(-50px);
}

Styling #7

r

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Dieser Effekt wird durch nebenstehenden Code ausgelöst. Bewegen Sie den Mauszeiger über das Informationstext-Modul.

Den CSS-Code können Sie kopieren und in das CSS-Stylesheet Ihrer Website einbinden. Letzteres finden Sie im Backend unter Design/Customiuer/Zusätzliches CSS.

.blurb-7 {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.blurb-7:hover {
    transform: translateY(-20px);
}
.blurb-7:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 10px;
    width: 0;
    transition: width 0s ease, background .5s ease;
}
.blurb-7:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 10px;
    width: 0;
    background: #59b14b33;
    transition: width .5s ease;
}
.blurb-7:hover:before {
    width: 100%;
    background: #59B14B;
    transition: width .5s ease;
}
.blurb-7:hover:after {
    width: 100%;
    background: transparent;
    transition: all 0s ease;
}

Styling #8

r

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Dieser Effekt wird durch nebenstehenden Code ausgelöst. Bewegen Sie den Mauszeiger über das Informationstext-Modul.

Den CSS-Code können Sie kopieren und in das CSS-Stylesheet Ihrer Website einbinden. Letzteres finden Sie im Backend unter Design/Customiuer/Zusätzliches CSS.

.blurb-8 {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    position: relative;
    overflow: hidden;
    background-color: #fff;
}
.blurb-8:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    right: 50%;
    top: 0;
    background: #59B14B;
    height: 100%;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}
.blurb-8:hover:before {
    left: 0;
    right: 0;
}

Styling #9

r

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Dieser Effekt wird durch nebenstehenden Code ausgelöst. Bewegen Sie den Mauszeiger über das Informationstext-Modul.

Den CSS-Code können Sie kopieren und in das CSS-Stylesheet Ihrer Website einbinden. Letzteres finden Sie im Backend unter Design/Customiuer/Zusätzliches CSS.

.blurb-9, .blurb-9 .et-pb-icon {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.blurb-9 .et-pb-icon {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}
.blurb-9:hover {
    -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}
.blurb-9:hover .et-pb-icon{
  -webkit-filter: blur(0px);
  filter: blur(0px);
}

Bilder-Special – Trick #7: Bilder im Divi-Theme überlappend darstellen

6. März 2023 CSS-Stylesheet | Divi-Theme | Mediathek | Bild-Modul

Zwei oder mehr Bild-Module im Divi-Theme überlappen lassen? Kein Problem. Ein wenig CSS und gut ist. Wir zeigen Ihnen wie's geht.

Blog-Modul-Special #2: Gesamte Beitragsvorschau im Divi-Blog-Modul verlinken

24. Dezember 2022 CSS-Stylesheet | Divi-Theme | Blog-Modul

Normalerweise wird im Blog-Modul des Divi-Themes nur der Titel, das Bild und (sofern vorhanden) der Read-More-Link mit einer Verknüfung auf den vollständigen Beitrag verlinkt. Das lässt sich aber soweit ändern, dass der gesamte Teaser mit dem ...

Titel mit dekorativem Balken ergänzen

25. Februar 2024 CSS-Stylesheet | Divi-Theme | Text-Modul

Titeldarstellungen im Divi-Theme lassen sich hübsch gestalten. Heute zeigen wir Ihnen zwei Beispiele, wie Sie die Titelzeile mit einem Rahmen «auffüllen» können. Das ist ein echter Eyecatcher. Und ganz einfach zu machen.

Anruf oder SMS mit dem Divi-Button starten

11. Februar 2024 Divi-Theme | Button-Modul

Während viele Websites Kontaktformulare verwenden, gibt es Zeiten und Geschäfte, die einen direkteren oder dringenden Kontakt erfordern. Hier kann ein traditioneller Telefonanruf oder sogar eine Textnachricht sehr nützlich sein. Hier erfahren ...

Kategorien

Divi-Module

Dr.-Code-Specials

Neueste Beiträge

Geplante Beiträge

Meistbesuchte Beiträge

Feldbeschriftungen im Divi-Kontaktformular über dem Eingabefeld anzeigen (1307 Aufrufe)
Pflichtfelder im Kontaktformular-Modul des Divi-Themes automatisch mit Stern * markieren (1243 Aufrufe)
Website automatisiert neu laden und einen passenden Timer anzeigen (495 Aufrufe)
Divi-Accordions geschlossen starten und/oder per Klick öffnen und schliessen (397 Aufrufe)
5, 4, 3, 2, 1 – Happy New Year: Der Silvestercountdown (388 Aufrufe)

Child-Theme erstellen

Wir empfehlen Ihnen den Einsatz eines Child-Themes – damit sind Sie sicher, dass Ihre Anpassungen bei einem Theme-Update nicht überschrieben werden.

Member-Bereich

Dr. Code bietet Ihnen kostenlosen Zugang zu unserer umfangreichen Hack-Datenbank. Neben den bislang veröffentlichten Beiträgen und Tricks sind aberdutzende weitere Themen für Member bereits jetzt verfügbar.

Jetzt kostenlos und spamfrei registrieren

Themenidee?

Können wir Ihnen zu einem ganz bestimmten Thema weiterhelfen? Unsere Leserinnen und Leser haben oft die besten Ideen.

Themenvorschlag

Treffen Sie Vorsichtsmassnahmen bei der Nutzung der Inhalte dieser Website. Auch wenn die Tipps und Tricks erprobt sind, kann mal was schiefgehen.

Wir empfehlen, möglichst in einer Testumgebung zu arbeiten und/oder Sicherungskopien anzulegen, bevor Sie ans Werk gehen.

Werbung

Pin It on Pinterest

Share This