Trick # 349 | Dieser Beitrag beinhaltet 1593 Wörter. – Geschätzte Lesezeit: ca. 8 Minuten.
Ein besonderer Effekt auf Ihrer Website sind Sprechblasen. So können Sie Texte ganz einfach vervorheben und interessante Zusatzinformationen anzeigen. Wie Sie mit dem Divi-Theme Sprechblasen erstellen, zeigen wir Ihnen heute.
Sie benötigen für diesen Hack bloss CSS-Code. Je nachdem, ob die Sprechblase nach oben, rechts, unten oder links zeigen soll, benötigen Sie unterschiedliche Codes.
Sprechblase, die nach oben zeigt
Um diesen Effekt zu erzielen vergeben Sie dem Textmodul die CSS-Klasse «speech-bubble-left». Dafür bearbeiten Sie das Textmodul, öffnen den Tab «Erweitert», klicken auf «CSS-ID und Klassen» und geben den Klassennamen im Textfeld «CSS-Klasse» ein.
Zusammen mit nebenstehendem CSS-Code ergibt dies dann folgende Darstellung:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Diesen Code fügen Sie in das CSS-Stylesheet Ihrer Website ein. Unter Design/Customizer/Zusätzliches CSS:
.speech-bubble-top {
position: relative;
padding: 20px;
color: #ffffff;
background: #293280;
border-radius: .4em;
}
.speech-bubble-top:after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border: 20px solid transparent;
border-bottom-color: #293280;
border-top: 0;
margin-left: -20px;
margin-top: -20px;
}Den CSS-Code können Sie natürlich nach den Gegebenheiten auf Ihrer Website anpassen.
Sprechblase, die nach rechts zeigt
Um diesen Effekt zu erzielen vergeben Sie dem Textmodul die CSS-Klasse «speech-bubble-left». Dafür bearbeiten Sie das Textmodul, öffnen den Tab «Erweitert», klicken auf «CSS-ID und Klassen» und geben den Klassennamen im Textfeld «CSS-Klasse» ein.
Zusammen mit nebenstehendem CSS-Code ergibt dies dann folgende Darstellung:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Diesen Code fügen Sie in das CSS-Stylesheet Ihrer Website ein. Unter Design/Customizer/Zusätzliches CSS:
.speech-bubble-right {
position: relative;
padding: 20px;
color: #ffffff;
background: #293280;
border-radius: .4em;
}
.speech-bubble-right:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0;
height: 0;
border: 20px solid transparent;
border-left-color: #293280;
border-right: 0;
margin-top: -20px;
margin-right: -20px;
}Den CSS-Code können Sie natürlich nach den Gegebenheiten auf Ihrer Website anpassen.
Sprechblase, die nach unten zeigt
Um diesen Effekt zu erzielen vergeben Sie dem Textmodul die CSS-Klasse «speech-bubble-left». Dafür bearbeiten Sie das Textmodul, öffnen den Tab «Erweitert», klicken auf «CSS-ID und Klassen» und geben den Klassennamen im Textfeld «CSS-Klasse» ein.
Zusammen mit nebenstehendem CSS-Code ergibt dies dann folgende Darstellung:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Diesen Code fügen Sie in das CSS-Stylesheet Ihrer Website ein. Unter Design/Customizer/Zusätzliches CSS:
.speech-bubble-bottom {
position: relative;
padding: 20px;
color: #ffffff;
background: #293280;
border-radius: .4em;
}
.speech-bubble-bottom:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: #293280;
border-bottom: 0;
margin-left: -20px;
margin-bottom: -20px;
}Den CSS-Code können Sie natürlich nach den Gegebenheiten auf Ihrer Website anpassen.
Sprechblase, die nach links zeigt
Um diesen Effekt zu erzielen vergeben Sie dem Textmodul die CSS-Klasse «speech-bubble-left». Dafür bearbeiten Sie das Textmodul, öffnen den Tab «Erweitert», klicken auf «CSS-ID und Klassen» und geben den Klassennamen im Textfeld «CSS-Klasse» ein.
Zusammen mit nebenstehendem CSS-Code ergibt dies dann folgende Darstellung:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Diesen Code fügen Sie in das CSS-Stylesheet Ihrer Website ein. Unter Design/Customizer/Zusätzliches CSS:
.speech-bubble-left {
position: relative;
padding: 20px;
color: #ffffff;
background: #293280;
border-radius: .4em;
}
.speech-bubble-left:after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 20px solid transparent;
border-right-color: #293280;
border-left: 0;
margin-top: -20px;
margin-left: -20px;
}Den CSS-Code können Sie natürlich nach den Gegebenheiten auf Ihrer Website anpassen.
Werbung
Werbung
