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
Das Divi-Suchmodul zeigt üblicherweise ein Eingabefeld links und den Suchbutton rechts. Die beiden Elemente können Sie aber vertauschen – wie das geht, zeigen wir Ihnen heute.
Der Divi-Builder - mit welchem Sie im Backend Ihre Inhalte gestalten - ist in zwei Versionen verfügbar: Neben der modernen Variante wird nach wie vor der Classic-Divi-Builder angeboten, der bis Sommer 2019 der Standard-Builder war. Da und dort ...
Im Divi-Theme gibt es ein hübsches Accordion-Modul, mit welchem sich die Inhalte einer Website sehr schön strukturieren lassen. Jedoch hat das Modul in der Grundausstattung zwei entscheidende Nachteile: Der erste Accordion-Content ist beim ...
Die Divi-Module können nicht nur eingegebene Texte anzeigen; wenn gewünscht bedienen sie sich auch in den weiteren Beitragsfeldern oder stellen Content aus Custom-Taxonomies des jeweiligen Beitrags dar. Die Anzeige dieser dynamischen Daten ...
Keine Inhalte gefunden.
Werbung
