In diesem Text erfahren Sie, wie Sie in Elementor mithilfe von einfachem CSS-Code Slide-Out-Boxen erstellen können, die auf jede Art von Inhalt angewendet werden können.
Als erstes müssen Sie einen verschachtelten Abschnitt erstellen, indem Sie die Spalten in den aktuellen Abschnitt ziehen und den Hintergrund gestalten. Unter Option Fortschrittlich Wir fügen oben und unten im Abschnitt a unter der Option etwas Platz hinzu Stil Wir werden ein Bild für den Hintergrund einfügen, wo wir es auch tun werden Position Attribut festlegen Zentrum Zentrum, Code Wiederholen wir werden einstellen Keine Wiederholung und bei Größe wir werden einstellen Abdeckung.
Innerhalb des Abschnitts sehen wir, dass eine Spalte erstellt wurde und darin ein verschachtelter Abschnitt vorhanden ist. Mit dem verschachtelten Abschnitt löschen wir eine Spalte, die wir nicht benötigen, und formatieren den Rest. Unter Option Fortschrittlich Wir fügen ein Leerzeichen und dann ein Sub hinzu Stil Wir werden es stilisieren, indem wir Farbe hinzufügen und seine Enden unter der Option abrunden Grenze und so bekamen wir den ersten Abschnitt. Dann fügen wir einen Titel hinzu und fügen Text ein.
Als nächstes kopieren wir den Abschnitt und modifizieren ihn ein wenig, um sie zu unterscheiden, indem wir Text löschen, eine Schaltfläche hinzufügen und was auch immer Ihnen einfällt. Wir haben also zwei verschiedene Abschnitte erhalten und müssen nun einige CSS-Klassen implementieren, mit denen wir den Stil der Abschnitte mithilfe von spezifischem CSS-Code ändern können. Als erstes müssen Sie allen Abschnitten eine CSS-Klasse hinzufügen, indem Sie auf den Abschnitt und unter der Option klicken Fortschrittlich Finde das Feld CSS-Klassen und geben Sie den Namen der gewünschten Klasse ein.
Nachdem wir die oben genannten Schritte ausgeführt haben, müssen wir es speichern und mit dem Hinzufügen des CSS-Codes beginnen. Es kann an verschiedenen Stellen und in mehreren Abschnitten eingegeben werden. Am besten ist es jedoch, es im Thema einzugeben, damit wir es global verwenden können, und wir werden es unter der Option tun Anpassen, in dem Sie finden werden Benutzerdefiniertes CSS/JS wie im Bild unten.
Es braucht einen Boden Benutzerdefiniertes CSS/JS Geben Sie den spezifischen Code ein, basierend auf den CSS-Klassen der von uns verwendeten Abschnitte. Seien Sie vorsichtig, wenn Sie diesen Abschnitten Klassennamen geben, damit Sie bei der Eingabe des CSS-Codes nicht auf etwas stoßen, das nicht richtig funktioniert. Der CSS-Code ist im folgenden Bild dargestellt db-hover-scale, db-hover-box und db-hover-slideout Klassennamen. Wenn Sie sie anders benannt haben, verwenden Sie Ihre eigenen Namen.
Wenn Sie den CSS-Code eingegeben haben, sehen Sie, wie der nächste Abschnitt aussehen sollte. Zunächst wird der obere Abschnitt vom unteren abgedeckt. Um dieses Problem zu lösen, müssen Sie den oberen Abschnitt ändern, damit er den unteren abdeckt Seite mit Elementor. Sie können dieses Problem lösen, indem Sie den obigen Abschnitt ändern Z-Index unter Option Fortschrittlich und geben Sie ihm den Wert 1. Auf diese Weise deckt der obere Abschnitt den unteren ab, wie im Bild oben, und im nächsten Bild sehen Sie, was angezeigt wird, wenn Sie mit der Maus über die Abschnitte fahren.
Mit einem recht einfachen CSS-Code erhalten Sie ein schönes und kreatives Abschnittslayout. Ich hoffe, dass dieser Text für Sie nützlich war und Sie etwas Neues gelernt haben. Wenn Sie daran interessiert sind, weitere Tipps für selbständiges Arbeiten zu lesen, können Sie diese auf unserer Website nachlesen Blog, und falls Sie sich mit Fachleuten beraten möchten, klicken Sie darauf Verknüpfung.
Quelle: Youtube
