Elementor Page-Builder - Jetzt mit Icon Library

Zeit für grenzenlose Kreativität.

Vor knapp einer Woche hat Elementor die neuste Version seines Page Builders veröffentlicht. Für uns Grund genug, Ihnen den Elementor Page Builder vorzustellen und die wichtigsten Fragen rund um das Thema „Page Builder“ zu klären. Dazu fangen wir am besten mit den Grundlagen an.

Was ist ein Page Builder?

Unter einem Page-Builder versteht man einen „Baukasten“ für Websites, Webshops oder Blogs. Dieser „Baukasten“ erlaubt es nur auf Grundlage von vorgefertigten Bausteinen eine komplette Website zu gestalten. Dazu wird zu Beginn ein Layout erstellt, dass in verschieden Spalten unterteilt und so Inhalte nebeneinander darstellt. Ein solches Layout ist nicht nur praktisch, da es einfach zu bearbeiten ist, sondern bringt auch Vorteile für das responsive Design. Durch die Spalten-Struktur kann man ohne großen Aufwand aus einer Desktop-Darstellung auch die Darstellung für Tablets und andere Mobilgeräte erzeugen. Die meisten Page-Builder machen dies heute sogar automatisch und erleichtern dem Nutzer/Designer die Arbeit.

Wie installiert man einen Page-Builder in WordPress?

Bei Page-Buildern unterscheidet man zwei Arten. Zum einem gibt es einige Page-Builder, die direkt in einem WordPress-Theme verankert sind und meist automatisch beim Installieren des Themes mitinstalliert werden. Auf der anderen Seite gibt es auch Page Builder, die als Plugin geliefert werden und dann wie gewohnt über das Plugin-Menü installiert werden müssen.

Tipp

Wir empfehlen, immer einen Page-Builder zu benutzen, der unabhängig von dem gewählten Theme ist (also per Plugin installiert wird). Sollten Sie in Zukunft doch einmal entscheiden, dass Sie das Design/das Theme wechseln wollen, macht ein Plugin den Wechsel deutlich einfacher.

Der Elementor Page Builder

Für uns ist die Wahl des richtigen Builders ganz klar. Wir nutzen für alle von uns erstellten Seiten den Elementor Page Builder. Dieser ist unglaublich intuitiv, flexibel und umfangreich. Durch eine Vielzahl von Erweiterungen von Elementor selbst oder dritten, lässt sich damit ihm jedes Projekt umsetzen.

SEO freundlich

Durch seine modernen Programmier-Standards ist der Page-Builder besonders SEO-freundlich. So können viele OnPage Optimierungen direkt mit Elementor realisiert werden.

Layout Änderungen per drap-and-drop

Mit Elementor wird das Layout erst wirklich flexible. So können einzelne Abschnitte nach Belieben kleiner und größer gezogen werden.

Open Source

Die Grundversion von Elementor ist vollkommen kostenlos. Sie können also auch ohne großen finanziellen Aufwand sofort durchstarten. Wenn Sie allerdings auf die "Pro-Features" zugreifen möchten, müssen Sie für diese bezahlen.

Vollkommen responsiv

Nicht nur, dass die meisten Inhalte, die mit dem Builder erstellt werden, sofort auch auf Mobilen-Endgeräten funktionsfähig sind. Das Fein-Tuning geht ebenfalls spielen leicht, mit geringstem Aufwand werden Ihre Inhalte mobilfreundlich.

Flexible Höhen und Breiten

Mit Hilfe des übersichtlichen und gut strukturierten Menüs können die einzelnen Bereiche (Sections) der Seite individuell angepasst werden. Dadurch lassen sich beispielsweise atemberaubende Landingpages erstellen, Seiten, bei denen Bilder die komplette Seite einnehmen sollen und vieles mehr.

Elementor v2.6 - Die neue Icon Library

Seit dem 09.07.19 ist die neue Version von Elementor verfügbar. Unter anderem bringt die neue Version noch mehr Icons, Front Awesome 5, SVG Uploads und mehr. Was diese Verbesserungen im Einzelnen sind und welche Vorteile sie bringen, wollen wir Ihnen hier einmal näher erläutern.

Endlich eine riesige Auswahl an Icons

Icons findet man überall, ob für Social-Media, in den Kontaktdaten oder in der Mobile-Navigation. Icons sind einfach überall präsent, auch auf jeder modernen Website oder in jeder Webapp. Der große Vorteil von Icons: die Landezeit. Im Gegensatz zu Bildern sind Icons von der Datenmenge her deutlich kleiner.

Da die Ladezeit mittlerweile ein Ranking-Faktor ist und der User immer schnellere Inhalte fordert, ist deren Optimierung auch ein Bestandteil der Suchmaschinenoptimierung (SEO). Geringere Datenmengen sind deshalb ein Segen für jede Website. Auch Elementor, das großen Wert auf die SEO-Freundlichkeit legt, setzt deswegen auf Icons; und mit der neuen Icon-Library sind die Möglichkeiten fast unbegrenzt. Aber diese Icons können nicht einfach nur eingebunden werden, sondern mit den neuen Funktionen auch individuell angepasst werden.

Lassen Sie uns jetzt Ihre Website bauen

Zusammen mit Ihnen bauen wir Ihre neue Website

Font Awesome 5 - Endlich auch im Elementor Page Builder

Jedem Webdesigner ist Font Awesome ein Begriff. Die Font Awesome Bibliothek bringt über 1500 verschiedene vektorisierte Icons. Mit der großen Anzahl an Icons lässt sich noch mehr Individualität und unbegrenzte Möglichkeiten auf die Website bringen.
Achtung
Prüfen Sie nach dem Update, ob alle Icons noch denselben Inhalt zeigen, wie vor dem Update. Einige Icons haben sich beim Wechsel von Version 4 auf 5 geändert.
SVG - Was ist das?
Scalable Vector Graphics (SVG) sind 2-dimensionale XML-basierte Vektorgrafiken, die auch Animationen oder Interaktionen unterstützen. Besonders die Skalierbarkeit ist einer der größten Vorteile des Dateiformates. So können sich Grafiken responsive an die Bildschirmbreite anpassen, ohne an Qualität zu verlieren.

Noch nicht genug Icons? Dann nutzen Sie Ihre eigenen!

Wenn Ihnen die neue Vielfalt an Icons immer noch nicht ausreicht, dann können Sie Ihre eigenen Icons nutzen. Neben der Integration der Icon Library und Front Awesome 5, bietet die neue Version die Möglichkeit, individuell erstellte Icons als SVG hochzuladen. Damit lassen sich auch Logos ganz einfach als SVG einbinden, was die Ladezeit Ihrer Seite weiter optimieren kann.

Noch nicht genug Icons? Dann nutzen Sie Ihre eigenen!

Aller Anfang ist schwer. Unser Einstiegs-Guide zum gelungenen Start

Um eine neue Seite mit Hilfe des Elementor Page-Builders zu erstellen, gehen Sie in das Menü „Seiten“ und klicken wie sonst auch auf „Erstellen“. Sie landen wie üblich in dem gewohnten WordPress-Editor. Allerdings gestalten Sie Ihre neue Seite nicht aus dem Guttenberg Editor heraus, sondern klicken auf „Mit Elementor bearbeiten“.
Auf der linken Seite des Bildschirms finden Sie das Menü des Elementor-Page Builders. Hier können Sie neue Inhalte auswählen und nach rechts auf die Seite ziehen. Dort finden Sie eine Vorschau der Seite, auf der Sie per drag-and-drop Änderungen vornehmen können.

Im Unteren Teil des Menüs finden Sie außerdem die wichtigsten Einstellmöglichkeiten. Mit Hilfe des Zahnrades gelangen Sie zu den allgemeinen Einstellungen der Seite. Dort können Sie den Seiten-Titel ändern oder ganz ausblenden, sowie das Layout anpassen. Besonders das Layout ist unserer Meinung nach eine der wichtigsten Einstellungen überhaupt. Hier sollten Sie vor dem eigentlich Bearbeiten der Seite schon eine Entscheidung treffen: „Begrenzt“ oder „Volle Breite“. Es empfiehlt sich, gerade für Landingpages die volle Breite zu nutzen, um die Wirkung zu verbessern. Bei Blogbeiträgen oder anderen Inhalten kann aber auch die begrenzte Seitenbreite Vorteile haben.

Lassen Sie uns helfen

Wir helfen Ihnen beim Designen Ihrer Website oder designen Sie komplett für Sie

Der erste Inhalt - Jetzt geht es richtig los

Nach den allgemeinen Einstellungen kommen wir jetzt endlich zur Seitenerstellung. Dazu finden Sie in der Mitte der Seite einen gestrichelten Kasten. Mit Hilfe des „Plus“-Buttons können Sie einen neuen „Abschnitt“ hinzufügen, für den Sie direkt festlegen können, wie viele Spalten dieser haben soll. Mit Hilfe des Ordner-Symbols können Sie direkt vorgefertigte Templates oder bereits vordesignte Seiten aus der Bibliothek wählen und sofort einfügen. Natürlich können Sie diese später noch personalisieren und mit eigenen Texten füllen, aber gerade zu Anfang nehmen sie Ihnen viel Arbeit ab und sparen somit Zeit.
Jetzt müssen Sie kreativ werden. Wir wünschen Ihnen viel Freude beim Ausprobieren und beim Erstellen neuer, beeindruckender Inhalte.