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
Der Standard-Header des Divi-Themes lässt sich mit einem Hintergrundbild versehen. So wie im Kopf dieses Beitrags. Das geht mit ein wenig CSS-Code ganz einfach.
Das Einbinden von eigenen Schriftarten ist nicht ganz ohne - unter dem Strich aber doch zu einfach, um auf hübsche und besonders passende Schriftarten zu verzichten. Dr. Code zeigt Ihnen wie es auf jeden Fall klappt
Nun: Dr. Code liebt das Divi-Theme. Aber Divi hat auch Macken. Gehörige sogar. Eine der gröbsten sind die verkorksten Listen, welche Divi produziert. Ob Aufzählungen oder Bullet-Points: das sieht meist nicht gut aus. Es lässt sich aber beheben. ...
Dieser Trick ist insbesondere spannend, wenn Sie Ihre Beiträge mit einem Layout aus Ihrer Divi-Bibliothek oder mit dem Theme-Builder des Divi-Themes arbeiten. Der Hack ist aber auch für andere Anwendungen geeignet: Sie können damit ein Bild ...
Keine Inhalte gefunden.
Werbung
