Implementieren Sie benutzerdefinierte zusätzliche CSS-Funktionen mit Hilfe von Elementor

Last Updated on 11/10/2021 by MTE Leben

In diesem schnellen und einfachen Tutorial erfahren Sie, wie Sie mit einer sehr hilfreichen und unglaublich coolen Funktion namens benutzerdefiniertem CSS arbeiten. Mit Hilfe dieses Tools können Sie Ihren eigenen benutzerdefinierten Code hinzufügen und Ihren Abschnitt gestalten.

Sie können so ziemlich alles auf Ihrer Seite mit Hilfe von benutzerdefiniertem CSS bearbeiten. Natürlich können Sie Ihre Blöcke ganz einfach ohne Codezeile anpassen, indem Sie einige der besten kostenlosen und Premium-Elementor-Vorlagen verwenden, die auf dem Markt erhältlich sind. Mit Hilfe des CSS-Codes können Sie jedoch eine Reihe von stilvollen Funktionen auf die Elemente anwenden. Fangen wir an!

So beginnen wir mit der Arbeit mit CSS-Code in Elementor

Zuallererst müssen Sie den Abschnitt auswählen, den Sie bearbeiten möchten. Als Beispiel haben wir diesen gut aussehenden Abschnitt gewählt, der ein Bild, mehrere Textelemente und eine Überschrift enthält.

Lassen Sie uns für einige Elemente eine andere Hintergrundfarbe festlegen, die Textfarben ändern und eine andere Ausrichtung festlegen. Für einen schnellen Start müssen Sie auf die Registerkarte “Mit Elementor bearbeiten” klicken, die sich oben auf Ihrer Seite befindet.

Danach wird die Elementor-Editor-Seitenleiste auf der linken Seite Ihrer Seite angezeigt.
• Tab auf den „html“-Text im Elementor-Suchfeld.
• Ziehen Sie den „HTML“-Block und legen Sie ihn in den Bereich ab, in dem Sie Ihre Elemente anpassen möchten.
• Über dem ausgewählten Block erscheint der neu erstellte leere Block mit dem „“-Symbol. Keine Sorge, es wird nicht auf Ihrer Seite angezeigt.
• In der Elementor-Seitenleiste erscheint der HTML-Code-Bereich, in dem Sie Ihren Code schreiben.

Fügen Sie im HTML-Code-Bereich das „“-Tag ein und vergessen Sie nicht, es zu schließen! Drücken Sie die Schaltfläche “Aktualisieren”, um die Änderungen zu bestätigen.
• Lassen Sie uns einen neuen Hintergrund, eine neue Textfarbe und einige weitere Funktionen für den Textabsatz festlegen. Geben Sie den folgenden Code in den Codierbereich ein.

Sie können Ihre Änderungen sofort einsehen, in einem Echtzeitformat.

• Speichern Sie die Änderungen und lassen Sie uns mit der Anpassung fortfahren!

Sie können jeden gewünschten benutzerdefinierten Stil hinzufügen, von den grundlegenden Layouteinstellungen wie Ausrichtung, Schriftgröße oder Familie bis hin zu den komplizierten animierten Effekten und den Optionen, die Ihr Bild skalieren oder runden.

Nun, Sie können sehen, dass es wirklich einfach ist, benutzerdefinierte CSS-Optionen in Ihrem Elementor-Design hinzuzufügen und zu verwalten und die Benutzeroberfläche Ihrer Seiten zu verbessern. Mit Hilfe dieser Technologie können Sie verschiedene Abschnitte ändern, auch wenn Sie kein Programmierer sind!

Wir hoffen, dass Ihnen unser einfaches und schnelles Tutorial zum Hinzufügen von benutzerdefiniertem CSS-Code in der kostenlosen Version von Elementor gefällt. Abonnieren Sie unseren Newsletter, um weitere nützliche Tutorials und Angebote zu finden!