Elementor – One Step Webdesign

Elementor Button animieren – Button mit CSS anpassen

Benjamin Bode — Sat, 11 May 2024 12:14:03 +0000

Nutzt man den WordPress Pagebuilder Elementor, so stehen einem viele Elemente zur Verfügung. Unter anderem findet sich dort natürlich auch ein Button. Doch leider sieht dieser klassische Elementor Button recht rudimentär aus: Man kann zwar Schatten-Effekte und Hover-Farben sowie den Rahmen des Button anpassen, doch dann hört der Spaß auch auf.

Für die meisten Anwender ist diese Design-Begrenzung beim Button auch kein Problem, schließlich kann auch ein schlichter Button auf einer Website gut aussehen. Doch was kann man tun, wenn man eben keinen schlichten Button verwenden möchte, sondern einen, der schön animiert ist?

In diesem Fall kann man einfach etwas CSS hinzufügen: Entweder nutzt du Elementor Pro und kannst dann den Code direkt im Element unter „Erweitert“ –> „Eigenes CSS“ hinzufügen. Alternativ (wenn kein Elementor Pro) kannst du den CSS Code auch im Customizer deines Themes hinzufügen (sofern es in deinem Theme die Möglichkeit hierzu gibt).

Möchtest du deine Webseite nicht nur funktionell, sondern auch visuell ansprechend gestalten? Mit Elementor Pro hast du die Freiheit, deine Kreativität vollständig zu entfalten. Erweitere deine Designmöglichkeiten durch Zugriff auf fortgeschrittene Features wie das direkte Hinzufügen von individuellem CSS. Nutze die Chance, deine Buttons und andere Elemente deiner Webseite eindrucksvoll zu animieren, um die Benutzererfahrung zu verbessern und deine Besucher zu begeistern. Entdecke jetzt, wie Elementor Pro deine Designarbeit revolutionieren kann – hier geht es zu Elementor Pro *.

* Es handelt sich hierbei um einen Affiliate-Link.

Elementor Button animieren (1)

Dieser Button hat einen animierten Farbverlauf, bestehend aus vier Farben. Sobald man mit dem Mauszeiger über den Button fährt (hoovert), startet die Animation.

Meiner Meinung nach sieht dieser Button super cool aus, und kommt insbesondere bei einem Dark-Design (dunkler Website Hintergrund) gut zur Geltung.

  :root{      --grad1: #03a9f4; --grad2: #f441a5; --grad3: #ffeb3b; --grad4: #03a9f4; }    
  
  selector a{  	background: linear-gradient(110deg, var(--grad1), var(--grad2), var(--grad3), var(--grad4));  	
      background-size: 400%;
      z-index: 1;  	
      position: relative;  }  
  
  selector a:hover{  	
      animation: animate 12s linear infinite;  }  
@keyframes animate {  	      0%{  		background-position: 
            0%;  	}  	
             100%{  		background-position: 400%;  	}  }

Elementor Button animieren (2)

Dieser Button hat farbig animierte Ecken, die sichtbar werden, sobald der Mauszeiger den Button berührt.

Dieser zweite Button ist farblich deutlich schlichter als der Button 1. Doch auch bei diesem Button bin ich der Auffassung, dass die Farben besonders gut bei einem Dark-Design zur Geltung kommen.

selector{
    --btn-width: 180px;
    --btn-height: 50px;
    --btn-background: #1C3161;
    --left-gradient: #F803F8;
    --right-gradient: #03F2FD;
}

selector a {
  position: relative;
  width: var(--btn-width);
  height: var(--btn-height);
}

selector a:before,
selector a:after {
  content: '';
  position: absolute;
  inset: 0;
  transition: 0.5s;
}

selector a:nth-child(1):before,
selector a:nth-child(1):after {
  background: linear-gradient(45deg,var(--left-gradient),var(--btn-background),var(--btn-background),var(--right-gradient));
}

selector a:hover:before {
  inset: -3px;
}

selector a:hover:after {
  inset: -3px;
  filter: blur(10px);
}

selector a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--btn-background);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

Elementor Button animieren (3)

Dies ist ein schlichter Button, bei dem jedoch unter dem Inhalt ein kurzer Strich zu sehen ist. Geht man mit dem Mauszeiger über diesen Button, so wird der Strich größer, mit dem Resultat, dass der Inhalt des Button unterstrichen ist.

Ein solcher Button kann vielfältig eingesetzt werden. Das Unterstreichen ist ein schlichter, aber dennoch sehr schöner Effekt.

selector .elementor-button-content-wrapper:after{
    content: "";
    height: 1px;
    display: inline-block;
    background-color: #fff;
    position: absolute;
    top: 34px;
    margin-left: 0px;
    width: 20%;
    transition: width .6s ease;
}
selector:hover  .elementor-button-content-wrapper:after{
    width: 70%;
}

Fazit – Elementor Button animieren

Die kreative Nutzung von CSS zur Animation von Elementor Buttons bietet eine fantastische Möglichkeit, das visuelle Erlebnis einer Webseite zu bereichern und die Interaktion der Benutzer zu intensivieren. Durch die Implementierung einfacher, aber wirkungsvoller Animationen, kann man Buttons erstellen, die nicht nur ästhetisch ansprechend sind, sondern auch funktionale Zwecke erfüllen. Schließlich lässt sich auf diese Weise die Aufmerksamkeit der Website-Besucher gezielt auf wichtige Aktionselemente lenken.

Benjamin Bode

Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.

onestep-webdesign.de

Lottie Animation in WordPress nutzen

Benjamin Bode — Wed, 18 Jan 2023 01:40:15 +0000

Lottie ist eine Open-Source-Bibliothek, die es ermöglicht, animierte Grafiken in Websites und Anwendungen einzubetten. Im Gegensatz zu herkömmlichen Animationstechnologien wie Flash oder GIFs, die auf dem Gerät des Benutzers ausgeführt werden, werden Lottie Animationen auf dem Server berechnet und dann als vektorbasierte Grafik an den Browser gesendet. Dies ermöglicht eine höhere Leistung und Flexibilität bei der Gestaltung von Animationen.

In diesem Beitrag werden wir besprechen, warum man Lottie Animationen auf einer WordPress Website verwenden sollte und wie man diese einbinden kann.

Vorteile von Lottie Animationen

Lottie bietet viele Vorteile für die Verwendung in WordPress Webseiten. Einer der größten Vorteile ist die höhere Leistung und Flexibilität bei der Gestaltung von Animationen. Im Gegensatz zu herkömmlichen Animationstechnologien werden Lottie Animationen auf dem Server berechnet und dann als Vektor-Grafik an den Browser gesendet. Dies ermöglicht eine klare und scharfe Darstellung der Animationen auf allen modernen Browsern und Geräten.

Ein weiterer Vorteil von Lottie ist, dass es auch Interaktion und Benutzersteuerung ermöglicht. Das heißt, das Animationen auf Benutzeraktionen reagieren können, wie zum Beispiel das Klicken auf einen Button. Dies ermöglicht eine größere Benutzerfreundlichkeit und Interaktivität auf der Webseite.

Zudem können, dank der Kompatibilität mit Adobe’s After Effects, benutzerdefinierte Animationen erstellt werden.

Lottie Vorteile im Überblick

Höhere Leistung und Flexibilität bei der Gestaltung von Animationen
Kompatibilität mit allen modernen Browsern und Geräten
Verwendung von vektorbasierten Grafiken für klare und scharfe Darstellungen
Kompatibilität mit Adobes After Effects für die Erstellung benutzerdefinierter Animationen
Unterstützung für Interaktion und Benutzersteuerung
Einsparung von Bandbreite durch die Verwendung von kleinen Dateigrößen
Möglichkeit, Animationen auf bestimmten Seiten oder Bereiche der Website anzuzeigen
Einfache Integration in WordPress durch Plugins und Einbindung in die Themes

Lottie Animation – Vorbereitung

Bevor wir nun mit der Einbindung von Lottie-Animationen in die WordPress Webseite beginnen, müssen einige Vorbereitungen getroffen werden.

Zunächst müssen die Lottie Animationen (die verwendet werden sollen) heruntergeladen oder erstellt werden. Es gibt viele Websites, auf denen kostenlos Lottie Animationen heruntergeladen werden können. Du kannst natürlich auch deine eigenen Animationen erstellen, indem du ein Programm wie Adobe After Effects verwendest.

Lottie Animationen in WordPress einbetten

Nachdem du die Vorbereitungen abgeschlossen hast, können nun die Animationen in die WordPress Website eingebettet werden.

Lottie mit Elementor Pro

Eine Möglichkeit, dies zu tun, besteht in der Verwendung von Elementor Pro. Hier gibt es bereits (wenn Elementor aufgerufen ist) ein Element eigens für Lottie. Dieses Element kannst du einfach an die gewünschte Stelle auf deiner Webseite platzieren. Im nächsten Schritt musst du noch die Animation mit Hilfe von Elementor auf deine WordPress Website hochladen.

Fast geschafft: Nun kannst du noch Einstellungen hinsichtlich des Abspielens und der Größe der Animation treffen. Aber auch das geht ganz komfortabel mittels Elementor.

Du interessierst dich für Elementor?

Lottie mit Elementor und ElementsKit Elementor addons

Wenn du Elementor verwendest, aber ohne die kostenpflichtige Pro-Version, dann kannst du Lottie nicht ohne Weiteres verwenden. Aber zum Glück kann hier (wie so oft) ein WordPress Plugin für Abhilfe sorgen. Meine Empfehlung ist hier das Plugin ElementsKit Elementor addons.

Nach der Installation und Aktivierung kannst du ganz genau festlegen, welche Funktionen und Widgets du aus dem Sortiment dieses Plugins nutzen möchtest.

Mein Tipp: Aktiviere nur jene Funktionalitäten, die du wirklich benötigst. Je mehr aktiviert ist, desto stärker werden die Ressourcen deiner Website beansprucht und desto langsamer lädt dann letztendlich auch die Website. (Und dies hat dann wiederum auf die Nutzerfreundlichkeit und auf Google, Stichwort SEO.)

Öffnest du nun Elementor, so sollten dir jetzt zusätzlich die Elemente von ElementsKit zur Verfügung stehen. Also wenn du das Lottie Widget aktiviert hast, kannst du es nun nutzen. Dies ist eigentlich sehr ähnlich zu nutzen, wie das Pendant von Elementor Pro.

Lottie mit WordPress ohne Elementor

Natürlich kann man Lottie auch verwenden, ohne Elementor zu nutzen (doch meiner Meinung nach ist es mit Elementor am einfachsten). Beispielsweise bieten dir auch die Kadence Blocks eine Option, Lottie auf der Website einzubetten. Bei Kadence Blocks handelt es sich um ein Plugin oder vielmehr um eine Erweiterung des Gutenberg Editor (das ist der WordPress eigene Blockeditor).

Alternativ können auch andere Plugins wie beispielsweise LottieFiles – Lottie block for Gutenberg genutzt werden. Oder du entscheidest dich für den harten Weg und fügst den entsprechenden Code in die entsprechenden Dateien deines genutzten WordPress Themes ein. (Doch wie gesagt, das ist der harte Weg und eigentlich nur für Programmierer eine Option.)

Fazit

Lottie Animationen bieten viele Vorteile für die Verwendung auf WordPress Webseiten. So ist Lottie im Vergleich zu herkömmlich Animationen wesentlich ressourcenschonender: Eine Lottie Animation benötigt nur sehr wenig Speicherplatz, kann schnell geladen werden und verlangsamt somit die Website nicht.

Doch der Hauptvorteil bei der Verwendung von Animationen ist, dass du deine Website auf kreative Weise gestalten und Ihre Inhalte hervorheben kannst. Lottie ist hierfür ideal.

Benjamin Bode

Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.

onestep-webdesign.de

Elementor Link Farbe ändern

Benjamin Bode — Mon, 26 Dec 2022 16:28:36 +0000

Aufgrund der zahlreichen Designoptionen ist Elementor eine großartige Wahl für alle, die eine individuell angepasste Webseite erstellen möchten, ohne dabei selbst Code programmieren zu müssen. In diesem Beitrag werden ich dir zeigen, wie man einfach und schnell die Elementor Link Farbe ändern kann, damit du deine Website noch ansprechender gestalten kannst.

Mit dem Page Builder Elementor kann sehr einfach die Linkfarbe angepasst werden. Hierbei kann man einerseits die „normale“ Farbe des Links einstellen, als auch eine Hover-Farbe, also jene Farbe, die der Link haben soll, wenn man diesen mit dem Mauszeiger berührt.

Die Elementor Link Farbe lässt sich auf verschiedenen Ebenen festlegen: Für die gesamte Website, für einen ausgewählten Abschnitt oder für eine ausgewählte Spalte. Dies hat den Vorteil, dass du ganz genau festlegen kannst, wo welche Linkfarbe zum Einsatz kommen soll.

Elementor Link Farbe ändern: Abschnitt oder Spalte

Hier sind die Schritte, die du befolgen musst, um für einen Abschnitt oder eine Spalte die Farbe jeweiligen Links anzupassen:

Elementor öffnen: Öffne zunächst den Page Builder Elementor und wähle den Bereich aus, in dem die Linkfarbe angepasst werden soll. Hierbei kann entweder ein bestimmter Abschnitt oder eine bestimmte Spalte ausgewählt werden.
Klicke auf das Icon, um den Bereich (oder die Spalte) zu bearbeiten.
Wähle nun den Stil-Tab an. Unten Links sollte nun der Bereich „Typografie“ erscheinen.
Hier hast du die Möglichkeit, die Linkfarbe sowie die Linkfarbe bei Mauszeigerkontakt anzupassen.
Klicke auf „Speichern“ und überprüfe das Ergebnis auf der Website.

Elementor Link Farbe ändern: Globale Einstellung

Die Elementor Link Farbe kann auch global geändert werden. Dies hat den Vorteil, dass man nicht für jeden Abschnitt einzeln die Linkfarbe festlegen muss. Durch das Anpassen der Linkfarbe auf globaler Ebene, werden die Links der gesamten Website angepasst.

Elementor öffnen: Öffne zunächst den Page Builder Elementor.
Klicke oben links auf das Icon, das aus drei Balken besteht.
Wähle nun den Reiter „Website-Einstellungen“ an.
Klicke auf „Typografie„.
Jetzt kannst du die Elementor Link Farbe ändern. Hover ist gleichbedeutend mit „bei Mauszeigerkontakt“.
Klicke abschließend auf „Speichern“ und überprüfe das Ergebnis auf der Website.

Du interessierst dich für Elementor?

Fazit

Das Anpassen der Linkfarben in Elementor ist super einfach. Du kannst dies entweder für die gesamte Website machen, als auch für jeden Abschnitt / Spalte individuell. Die Einstellungen, die für einen Abschnitt oder eine Spalte getroffen wurden, überschreiben jedoch die globalen Einstellungen. Dementsprechend empfehle ich dir, zunächst die globalen Einstellungen in Elementor anzupassen. Anschließend kannst du (je nach Bedarf) einen Abschnitt auswählen und expliziert dort die Elementor Link Farbe ändern.

Benjamin Bode

Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.

onestep-webdesign.de

WordPress Breakpoints – Breakpoints in Elementor anpassen

Benjamin Bode — Fri, 16 Sep 2022 12:18:59 +0000

Mit WordPress Breakpoints kannst du steuern, wie die Inhalte der Webseite auf verschiedenen Bildschirmgrößen aussehen. Auf diese Weise kannst du sicherstellen, dass die Website auf allen Geräten gut aussieht.

Möchtest du wissen, wie man WordPress Breakpoints in Elementor nutzen kann, um eine responsive WordPress Website zu erstellen? In diesem Beitrag werfe ich einen Blick darauf, was Elementor Breakpoints sind und wie du diese nutzen kannst, um bessere responsive Designs zu erstellen.

Was sind WordPress Breakpoints?

WordPress Breakpoints sind die Punkte (beziehungsweise man definiert Bildschirmbreiten), an denen sich der Inhalt je nach dem Gerät, auf dem er angezeigt wird, ändert. So kannst du beispielsweise einen Breakpoint für den Desktop, einen anderen für das Tablet und einen weiteren für Mobilgeräte festlegen. Indem du unterschiedliche Breakpoints für verschiedene Geräte festlegst, kannst du sicherstellen, dass die Inhalte der Webseite unabhängig vom Anzeigegerät gut aussehen.

Somit kann man zum Beispiel festlegen, dass ein Text auf dem Desktop größer und auf dem Smartphone kleiner dargestellt wird. Aber auch die Anordnung vom Inhalt und diversen Elementen kann angepasst werden.

Breakpoints sind definierte Bildschirmbreiten, an denen sich der Inhalt der Website ändert, um sich optimal an die Bildschirmgröße des Geräts anzupassen, auf dem sie angezeigt wird.

Vorteile von WordPress Breakpoints:

Kontrolliere, wie der Inhalt der Website auf verschiedenen Geräten aussieht
Mehr Kontrolle über das Erscheinungsbild der Website

Wie man Elementor Breakpoints verwendet

Elementor ist einer der beliebtesten Page Builder, mit dem ganz einfach benutzerdefinierte Seiten und Beiträge erstellt werden können, ohne auch nur eine einzige Zeile Code schreiben zu müssen. Eine der nützlichsten Funktionen von Elementor sind die „Custom Breakpoints“, also WordPress Breakpoints, die man frei definieren kann.

Die Standard-Breakpoints

In Elementor sind standardmäßig drei Breakpoints hinterlegt: Desktop, Tablet und Smartphone. Wenn du eine Webseite mit Elementor bearbeitest, kannst du die Inhalte der Webseite ganz einfach an diese Breakpoints anpassen.

Mit einem Klick auf das „Smartphone-Desktop“-Icon, welches sich beim Arbeiten mit Elementor unten links befindet, kannst du die Vorschau im Editor ändern. Nachdem das Icon angewählt wurde, kann man wählen, für welchen Breakpoint man nun die Inhalte anpassen möchte (Leiste oben in Elementor).

Benutzerdefinierte Breakpoints einrichten

Um benutzerdefinierte Breakpoints in Elementor verwenden zu können, müssen wir sicherstellen, dass diese Option in den Elementor-Einstellungen auch aktiviert ist. Navigiere in deinem WordPress Dashboard auf Elementor –> Einstellungen. Wähle danach den Reiter Experimente aus.

Suche nun nach der Einstellung Zusätzliche benutzerdefinierte Breakpoints. Diese Option sollte aktiviert sein. (Ein grüner Punkt zeigt an, welche Einstellungen aktiviert sind.) Andernfalls setze diese Einstellung auf Aktiv.

Diese Einstellungen, die von Elementor Experimente genannt werden (experimentelle Funktionen), sind teilweise schon seit Jahren als Experimente deklariert. Warum? Keine Ahnung. Lege am Besten eine Datensicherung an, bevor du hier Änderungen vornimmst.

Das Einrichten von individuellen WordPress Breakpoints in Elementor ist einfach. Klicke hierfür zunächst in der linken Spalte (oben) des Elementor-Editors auf das Icon, welches aus drei horizontalen Linien besteht.

Es sollte sich nun ein Menü öffnen. Wähle hier Website-Einstellungen aus. Im Menü der Website-Einstellungen musst du nun auf den Reiter Layout klicken.

Nun befindest du dich in den Layout-Einstellungen von Elementor. Nun sollte dir auch der Menü-Eintrag Breakpoints angezeigt werden. Klicke auf Breakpoints, um diese im nächsten Schritt anzupassen.

Hier siehst du nun die hinterlegten WordPress Breakpoints.

Um einen weiteren Breakpoint hinzuzufügen, klicke einfach auf das Plus-Symbol. Nun kannst du auch wählen, für welches Endgerät diese Einstellung gelten soll.

Sobald ein neuer Breakpoint hinzugefügt wurde, kann hierfür die Breite (in Pixeln) festlegen. Damit das funktioniert, musst du die Breite für jeden Breakpoint festlegen (andernfalls werden die in Elementor hinterlegten Einstellungen verwendet). Beim individuellen Festlegen der Breiten musst du beim kleinsten / obersten Breakpoint beginnen. Andernfalls werden die Einstellungen von Elementor nicht übernommen. (Warum das so ist, kann ich nicht beantworten. Vielleicht ein Fehler seitens Elementor.)

Wenn du die Breakpoints erfolgreich definiert hast, klicke auf den Speichern-Button. Anschließend wird Elementor neu geladen.

Sobald Breakpoints hinzugefügt und konfiguriert wurden, werden diese automatisch auf der Website angewendet. Wenn du Webseiten-Inhalte nun mit Elementor bearbeitest, kannst du die zusätzlichen Breakpoints aufrufen und deine Inhalte dementsprechend anpassen.

Abschließende Überlegungen

WordPress Breakpoints sind ein praktisches Tool, wenn es um die Umsetzung von responsiven Designs für eine WordPress Website geht. Mit den individuell definierbaren Breakpoints in Elementor hast du die Kontrolle darüber, wie die Inhalte auf verschiedenen Geräten aussehen. So kannst du eine WordPress Website erstellen, die auf allen Bildschirmgrößen eine gute Figur macht.

Du interessierst dich für Elementor?

Elementor Pro – Wann lohnt sich der Kauf?

Die Breakpoints von Elementor sind jene Punkte, an denen sich die Breite einer Seite oder Spalte ändert, um sich an verschiedene Geräte anzupassen.

Es gibt drei Standard-Breakpoints, die Elementor standardmäßig verwendet: Telefon, Tablet und Desktop. Zusätzlich können benutzerdefinierte Elementor Breakpoints erstellt werden.

Wenn keine WordPress Breakpoints verwendet werden, wird die Website in der Standardbreite angezeigt. Dies ist möglicherweise nicht für alle Geräte und Bildschirmgrößen geeignet. Es wird daher empfohlen Breakpoints zu verwenden, um eine bessere Benutzererfahrung zu gewährleisten.

Benjamin Bode

Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.

onestep-webdesign.de

Elementor Pro – Wann lohnt sich der Kauf?

Benjamin Bode — Sun, 28 Nov 2021 21:47:57 +0000

Elementor ist ein beliebtes Plugin zur Webseiten-Erstellung (ein sogenannter Page-Builder) für WordPress. Das Funktionsprinzip ist leicht zu verstehen und macht die Erstellung und Gestaltung Ihrer Website so einfach wie nie zuvor.

Elementor bringt in der kostenfreien Variante viele nützliche Funktionen mit, doch diese reichen nicht aus, um komplexe Designs oder Webseiten mit dynamischen Inhalten umzusetzen. Die hierfür notwendigen Optionen sind nur mit Elementor Pro zugängig.

Dieser Beitrag soll dir bei der Entscheidung helfen, ob Elementor Pro die Anschaffung wert ist oder nicht. Ich gehe auf die Vor- und Nachteile ein, was die Elementor Pro Version beinhaltet und wie viel diese kostet. So kannst du sehen, ob dieses Plugin das Richtige für deine Bedürfnisse ist.

Elementor Pro – Vergleich mit der kostenfreien Variante

Elementor Pro ist ein All-in-One-Website-Builder, mit dem du wunderschöne Websites entwerfen und erstellen kannst, ohne dich um die Programmierung kümmern zu müssen.

Mit der kostenfreien Version von Elementor kann man schon eine ganze Menge anstellen. Diese verfügt über einfache Drag-and-Drop-Funktionen, mit denen du das Layout deiner Website erstellen und Inhalte auf Seiten hinzufügen kannst. Es ist keinesfalls so, dass es sich hierbei nur um einen „Teaser“ für die Pro Version handelt. Trotzdem bringt die Pro Version Elementor nochmal auf ein ganz anderes Level.

Vorteile von Elementor Pro

Es gibt viele Vorteile, die Elementor Pro mit sich bringt.

Theme Builder: Dies ist aus meiner Sicht einer der größten Vorteile: Elementor Pro verfügt über einen sogenannten ‚Theme Builder‘. Im Klartext heißt das, dass man keinerlei Einschränkungen bei der Gestaltung der Website hat. Header, Footer und Alles, was zwischen diesen beiden Bereichen liegt kann individuell erstellt und angepasst werden. Natürlich sind dabei auch eigene Vorlagen für Blog-Beiträge möglich.
Popups: Das erstellen gut aussehender Popups ist mit der Pro-Version kein Problem. Entweder man designt ein eigenes Popup oder man importiert eine der Popup-Vorlagen, die von Elementor bereitgestellt werden. Anschließend kann ganz genau festgelegt werden, wann, für wen und auf welcher Seite das Popup erscheinen soll.
Dynamische Inhalte: Einerseits bietet es viel mehr Flexibilität bei der Arbeit mit einer interaktiven Website durch die Möglichkeit, geschichtete Seiten und Elemente zu verwenden. Zudem macht die Pro-Version das Erreichen komplexer Designs einfacher als je zuvor möglich. Insbesondere das Einfügen dynamischer Inhalte ist relativ einfach. Beispielsweise können mit dem Plugin ACF Informationen angelegt werden, die dann von Elementor, an der entsprechenden Stelle auf der Website, ausgelesen und angezeigt werden.
Vorlagen: Ein weiterer großer Vorteil von Elementor Pro sind die Vorlagen. Diese können direkt beim Erstellen einer Webseite aus der Datenbank von Elementor importiert werden. Du kannst aber auch eigene Vorlagen für deine Website-Projekte oder Vorlagen für verschiedene Arten von Projekten erstellen.
Code hinzufügen: Ein weiterer Vorteil der Pro Version besteht dadrin, dass eigener Code problemlos und einfach hinzugefügt werden kann. So können beispielsweise Elemente mit zusätzlichem CSS-Code versehen und individuell angepasst werden. Aber auch das Einfügen von JavaScript ist sehr einfach.
Eigene Schriftarten: Verwendet man Elementor in der kostenfreien Variante, so kann im Bereich der Schriftarten zwischen den Google Fonts ausgewählt werden. Zugegebenermaßen bietet dies eine riesige Auswahl. Doch wenn man ein Schriftart auserhalb des Google-Kosmos verwenden möchte, dann ist dies ohne weitere Plugins nicht möglich. Es sei denn, man nutzt Elementor Pro: Hier können Schriftarten mit wenigen Klicks hochgeladen und genutzt werden.
Eigene Icons: Ähnlich wie bei den Schriftarten verhält es sich auch bei den Icons. Standardmäßig stehen die Icons von ‚Font Awesome‘ zur Verfügung. Eigene Icons können nur mit der Pro-Version hochgeladen und genutzt werden.
Mehr Elemente: Wer hätte es gedacht: Mit Elementor Pro stehen einem weit mehr Elementor zur Verfügung, als dies in der kostenfreien Variante der Fall ist. Unter diesen zusätzlichen Elementen befindet sich auch ein Kontaktformular, welches ich persönlich sehr gelungen finde.
Support: Elementor hat in der Vergangenheit deutlich die Preisschraube angezogen. Im Gegenzug wird nun aber den Nutzern ein guter Support geboten. Sollte es Probleme geben oder wird individuelle Hilfe zu einem bestimmten Sachverhalt benötigt, so erhält man zeitnah Unterstützung vom Elementor Team.

Nachteile von Elementor Pro

Die Vorteile von Elementor Pro sind nicht zu verachten. Doch wo viel Licht ist, da gibt es bekanntlich auch Schatten.

Einer der größten Nachteile ist, dass Elementor Pro nur als Abonnement erhältlich ist. So wird man jährlich für die Nutzung zur Kasse gebeten.
Die Lizenz für Elementor Pro ist nicht gerade günstig.
Es existiert keine Lifetime Lizenz.
Lock-In-Effekt: Nutzt man Elementor auf der Website, dann nutzt man wahrscheinlich auch in Zukunft Elementor, da ein Wechsel relativ Aufwendig ist.
Keine deutschsprachige Dokumentation oder Support auf Deutsch (wird allerdings bisher auch von keinem anderen Page Builder Plugin geboten).
Die Ladezeiten sind beim Einsatz von Elementor allgemein etwas langsamer, als wenn auf einen Page Builder verzichtet wird.

Vergleich: Elementor und Elementor Pro

	Elementor	Elementor Pro
Drag & Drop Editor	mit Einschränkungen
Responsive Design
Basic Elemente zur Webseiten-Gestaltung
Pro Elemente zur Webseiten-Gestaltung	X
Basic Vorlagen
Pro Vorlagen	X
Eigene Schriften und Icons	X
Dynamische Inhalte	X
Theme Builder	X
Popups	X
Elementor Kontaktformular	X
Support (Hilfe vom Elementor Team)	X

Elementor Pro kosten – Die Preisgestaltung des Plugins

Ob nun die Preise für Elementor Pro teuer oder angemessen sind, das hängt letzten Endes immer vom individuellen Nutzen ab. Aus meiner persönlichen Sicht sind die anfallenden Kosten in Ordnung: Ich setze Elementor Pro ausschließlich für anspruchsvolle Projekte ein. Hierbei lernt man die gebotenen Funktionalitäten wertzuschätzen, da eine Umsetzung ohne Elementor Pro oftmals sehr viel zeitaufwendiger oder gar unmöglich ist.

Installation von Elementor Pro

Wenn du Elementor Pro nutzen möchtest, installierst du als erstes die kostenfreie Elementor Version, die du von der Elementor Webseite oder direkt aus dem WordPress Plugin Repository herunterladen kannst.

Um die zusätzlichen Funktionen der Pro Version nutzen zu können, muss nach dem Kauf das Pro Plugin aus dem Account auf der Elementor Produkt-Webseite herunterladen und anschließend installiert und aktiviert werden (zusätzlich zum einfachen Elementor Plugin). Außerdem muss nach der Installation in den Elementor Einstellungen die Lizenznummer eingetragen werden. Diese ist dem Elementor-Account zu entnehmen.

WordPress Theme für Elementor Pro

Spätestens nach der Aktivierung von Elementor Pro stellt sich die Frage, welches Theme verwendet werden sollte.

Laut den Aussagen des Herstellers, soll Elementor mit nahezu allen aktuellen WordPress Themes verwendet werden können. Für die reibungsfreie Nutzung der Theme Builder Funktionen, so dass Elementor Pro sich voll entfalten kann, wird jedoch das Hello Elementor Theme empfohlen.

Auch ich verwende gerne die Kombination aus Elementor Pro und dem Hello Elementor Theme. Allerdings sind die Themes Astra und Kadence ebenfalls sehr gut geeignet, um mit Elementor zu arbeiten.
Lese hier meine WordPress Theme Empfehlungen.

Die Theme-Builder Funktionen

Obwohl viele Dinge in der kostenlosen Elementor-Version möglich sind, enthält nur die Pro-Version die Theme-Builder-Funktionen.

Was ist ein Theme Builder?

Während mit Hilfe von einem Page Builder immer nur den Inhalt einer Seite oder eines Beitrags gestaltet kann, bietet der Theme Builder auch die Möglichkeit übergreifende Layouts zu erstellen. Somit kann man quasi ein eigenes Theme gestalten ohne Programmierkenntnisse haben zu müssen.

Welche Vorteile hat ein Theme Builder?

Wird ein Blogbeitrag mit einem Page Builder gestaltest, dann muss jeder weitere Blogbeitrag erneut im Page Builder aufgebaut werden. Die Gestaltung kann zwar als Vorlage gesichert und kopiert werden, doch wenn alle vorhandenen Blogbeiträge umgestaltet werden sollen, ist dies oftmals sehr mühsam.

Mit dem Theme Builder von Elementor Pro ist das anders. Mittels der Theme Builder Funktionen können übergreifende Anpassungen vorgenommen werden. Auch wiederkehrende Elemente wie beispielsweise Header, Footer und Sidebar können individuell gestaltet werden. Gleiches gilt für die Darstellung von Archiven wie zum Beispiel einer Blog- oder Produkt-Übersicht.

Popups mit Elementor Pro

Elementor Pro verfügt über einen ausgereiften Popup Builder. Die umfangreichen Gestaltungsmöglichkeiten in Hinblick auf das Aussehen und die Eigenschaften der Popups lässt kaum Wünsche offen. Ein Vergleich mit anderen gängigen Popup Plugins wie z.B. Convert Pro oder OptinMonster muss hier definitiv nicht gescheut werden.

Einziger Kritikpunkt an dieser Stelle: Bei den Popups gibt es aktuell leider keine Statistikfunktion (also eine Auswertung, wie oft auf ein Popup geklickt wurde, etc.). Wer dieses kleine Manko verschmerzen kann, der kann mit dem Popup Builder von Elementor Pro wunderschöne Popups erstellen, wobei auch auf Vorlagen von Elementor zurückgegriffen werden kann.

Fazit – Für wen lohnt sich Elementor Pro?

Die Basic-Funktionen zur Gestaltung einer Website werden von der kostenfreien Elementor Version abgedeckt. Für kleine Websites mag dies ausreichen, doch bei größeren Projekten stößt man hier häufig an Grenzen. Ist dies der Fall, so ist die Pro-Version oftmals die Lösung.

Mit Sicherheit ist es nicht notwendig, alle Features von Elementor Pro zu nutzen, wenngleich dies möglich wäre. Vielmehr sollte man sich genau überlegen, welche Funktionen für eine Website benötigt werden. In der Praxis ist es nicht selten so, dass man heute das eine Feature benötigt und ein weiteres vielleicht erst in sechs Monaten.

Ich persönlich nutze die Pro-Version von Elementor sehr gerne, wenn eine komplexe Website mit dynamischen Inhalten (custom fields) umgesetzt werden soll. Ebenfalls greife ich auf Elementor Pro zurück, sollte ein raffiniertes Design (mit vielen grafischen Elementen) gewünscht sein.

Elementor ist einer der weltweit führenden WordPress Page Builder und wird unter anderem von Web-Profis wie Entwicklern, Designern und Marketingexperten eingesetzt.

Elementor Pro ist eine kostenpflichtige Erweiterung für Elementor. Elementor Pro enthält einige sehr nützliche Funktionen, wie visuelles Live-Formulardesign, den Popup Builder und den Theme Builder. Auch benutzerdefiniertes CSS und JavaScript sind möglich.

Für eine einzelne Website kostet Elementor Pro 49 USD jährlich, für drei Websites beläuft sich der Preis auf 99 USD im Jahr. Gemessen am Leistungsumfang ist dies ein durchaus fairer Preis.

Ja, dies ist problemlos möglich.

Ja, auch das ist jederzeit möglich. Möchte man beispielsweise von Essential auf Advanced umstellen, so zahlt man die Differenz zwischen den Plänen.

Dann bleiben alle erstellten Seiten intakt, allerdings erhält man keine weiteren Updates, keinen Zugriff auf die Pro Templates und auch keinen Support mehr.

Benjamin Bode

Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.

onestep-webdesign.de

Elementor Trennlinie animieren

Benjamin Bode — Thu, 18 Nov 2021 15:04:49 +0000

Elementor bietet beim Aufbau einer Webseite sogenannte Abschnitte, Spalten und Elemente. Jedes dieser drei Begriffe kann individuell bearbeitet und angepasst werden. Wenn man einen Abschnitt bearbeitet, kann man eine sogenannte Trennlinie hinzufügen. Hier gibt es verschiedene Designs für die Trennlinie, zum Beispiel Berge, Tropfen, Pyramide oder auch Wellen.

Schon einige Male habe ich mich gefragt, wie man diese Elemente animieren kann. Schließlich sieht eine bewegte Welle (als Trennlinie) auf einer maritimen Website ziemlich cool aus.

Nun habe ich eine Lösung gefunden, wie man die Elementor Trennlinie animieren kann. Und diese Lösung möchte ich im Folgenden mit dir Teilen

Setup – Plugins und Theme

Um die Animationen der Elementor Trennlinie zu testen, habe ich WordPress installiert. Zudem nutze ich das Kadence Theme (das ist für die Animation der Trennlinie jedoch herzlich egal, funktioniert mit jedem Theme) und natürlich verwende ich Elementor.

Elementor Trennlinie animieren

1. Webseite mit Elementor öffnen und einen Abschnitt auswählen

Im ersten Schritt öffne ich eine Webseite mit Elementor, damit ich diese bearbeiten kann. Auf der Webseite sollte schon Inhalt sein, der in mehrere Abschnitte gegliedert ist (sonst wird es mit der Trennlinie zwischen den Abschnitten schwer). Nun wählt man den Abschnitt an, dem die Trennlinie hinzugefügt werden soll.

2. Unter ‚Abschnitt bearbeiten‘ auf ‚Stil‘ klicken und Trennlinie hinzufügen

Jetzt in der linken ‚bearbeiten‘ Spalte auf den Reiter Stil klicken. Unter Trennlinie Form kann nun ausgewählt werden, ob die Trennlinie den ausgewählten Abschnitt nach oben oder nach unter abgrenzen soll. In meinem Beispiel entscheide ich mich für Trennlinie oben und wähle unter Typ die Trennlinienform Wellen aus. Zudem lege ich noch eine Farbe für die Trennlinie fest.

Hervorragend, die Trennlinie ist angelegt. Nun muss diese noch animiert werden. Hierfür müssen ein paar Zeilen CSS Code ergänzt werden.

3. Für die Animation den CSS Code hinzufügen

Jetzt gilt es den CSS Code unserer Webseite hinzuzufügen.

body { overflow-x:hidden; }
.elementor-shape-bottom,
.elementor-shape-top
{
    animation: wave 8s cubic-bezier( 0.45, 0.45, 0.63, 0.53) infinite;
    width: 220%;
}
@keyframes wave {
    0% { margin-left: 0; }
    50% { margin-left: -1200px; }
    100% { margin-left: 0px; }
}

Wenn du Elementor Pro verwendest, ist das hinzufügen des Codes super einfach. Nutzt du Elementor in der kostenfreien Variante, dann können wir den Code auch hinzufügen, allerdings etwas umständlicher, in dem wir auf den Customizer zurückgreifen.

CSS Code mit Elementor Pro hinzufügen

Du möchtest wissen, ob Elementor Pro für deine Zwecke geeignet ist? Dann lese jetzt: Elementor Pro – Wann lohnt sich der Kauf?

Wie schon gesagt, ist das hinzufügen von zusätzlichem Code mit Elementor Pro ein Kinderspiel. Klicke einfach unter Abschnitt bearbeiten auf den Reiter Erweitert und füge dann unter Eigenes CSS den Code ein.

Voilà, Trennlinie ist animiert.

Da wir den Code direkt eingefügt haben, während der entsprechende Abschnitt ausgewählt ist, wird die Trennlinie ausschließlich für diesen Abschnitt animiert.

CSS Code im Customizer hinzufügen (bei Verwendung der kostenfreien Elementor Variante)

Mit der kostenfreien Variante von Elementor kann leider kein zusätzlicher Code hinzugefügt werden. Ist aber halb so wild: Wir verlassen Elementor und öffnen nun den Customizer (Dashboard –> Design –> Customizer). Bei einem guten WordPress Theme kann im Customizer zusätzlicher CSS Code hinzugefügt werden. Hier muss nun der Code eingefügt werden.

Ist dies erledigt, dann klicke im Customizer auf den Button veröffentlichen. Anschließend sollte die Elementor Trennlinie animiert sein.

Da der CSS Code im Customizer hinzugefügt wurde, gilt die Animation nun für alle Trennlinien; soll heißen: Alle Trennlinien deiner Website sind nun gleichermaßen animiert.

Fazit

Mit Elementor ist es wirklich ziemlich einfach, die Trennlinien zu animieren beziehungsweise diese in Bewegung zu versetzen. Gerade bei maritimen Webseiten sorgen bewegte Wellen-Trennlinien für das gewisse Extra, vorausgesetzt es wird mit den Animationen nicht übertrieben. Doch dies liegt bekannter Weise auch immer im Auge des Betrachters.

Das Schöne: Elementor Pro wird nicht zwingend benötigt, um die Trennlinien zu animieren. Auch mit der kostenfreien Variante von Elementor können Trennlinien mit einer Animation versehen werden, indem der entsprechende CSS Code im Customizer des Themes hinzugefügt wird.

Nichtsdestotrotz macht das Arbeiten mit Elementor Pro an vielen Stellen mehr Spaß und bietet auch deutlich mehr Funktionen als die kostenfreie Variante von Elementor. Sollten dich die Vorteile der Pro-Version interessieren, dann gelangst du hier zur Website von Elementor.

Benjamin Bode

Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.

onestep-webdesign.de