Trick # 222 | Dieser Beitrag beinhaltet 745 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Das Button-Modul des Divi-Themes umfasst ja bereits einige Einstellungsmöglichkeiten. Ein paar zusätzlich Spielereien sind aber allemal drin. Zum Beispiel können Sie den Schaltflächen beim hovern einen hübschen Glanzeffekt spendieren. Wir zeigen Ihnen wie.
Sie benötigen dafür CSS-Code. Kopieren Sie diesen und legen Sie ihn in das CSS-stylesheet Ihrer Website ab. Das Stylesheet finden Sie im Backend unter Design/Customizer/Zusätzliches CSS:
.et_pb_button {
overflow: hidden;
box-shadow: 0 0 0 0 transparent;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.et_pb_button:hover {
box-shadow: 0 0 30px 5px rgba(41, 50, 128, 0.5); /* Legen Sie hier Ihre Farbe fest
(es sollte die gleiche Farbe sein wie die der Schaltfläche bg bei Hover, aber mit einer Deckkraft von 0,5)
und spielen Sie mit den Werten 30px und 5px, um den Box-Shadow anzupassen */
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.et_pb_button:hover:before {
-webkit-animation: shine 0.5s 0s linear;
-moz-animation: shine 0.5s 0s linear;
animation: shine 0.5s 0s linear;
}
.et_pb_button:active {
box-shadow: 0 0 0 0 transparent;
-webkit-transition: box-shadow 0.2s ease-in;
-moz-transition: box-shadow 0.2s ease-in;
transition: box-shadow 0.2s ease-in;
}
.et_pb_button:before {
content: '';
display: block;
width: 0px;
height: 86%;
position: absolute;
top: 7%;
left: 0%;
opacity: 0;
background: #ffffff;
box-shadow: 0 0 60px 20px #ffffff; /*spielen Sie mit den Werten 60px und 20px, um den Box-Shadow anzupassen*/
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
}
.et_pb_button:after {
line-height: inherit !important;
}
@-webkit-keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
@-moz-keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
@keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}Der Effekt sieht dann aus wie nebenstehend gezeigt:
Werbung
Heute mal wieder ein Hack, der überall funktioniert: Die automatische Silbentrennung. Dank eines simplen CSS-Codes geht das auf allen Websites ganz einfach.
Normalerweise stellt Divi die zu präsentierenden Inhalte mit gebührendem Abstand an. Jedoch lassen sich auch mit dem Divi-Theme Inhalte überlappen - etwa Textblöcke. Wie's geht, zweigen wir Ihnen heute.
Das Divi-Theme bietet im Builder neben den Standard-Sektionen auch Spezial-Sektionen (auch Speciality Section genannt), welche weitere Möglichkeiten bei der Darstellung Ihres Contents eröffnen. Diese Sections können auch auf der vollen ...
Einen Websiteinhalt - sei es nun ein Bild, Text oder ein anderes Element - können Sie ganz einfach vertikal und horizontal zentriert im Browserfenster anzeigen. Bei Bedarf werden Sie sogar den Scrollbalken los, falls Sie dieser stört.
Keine Inhalte gefunden.
Werbung
