Elementor: Wie Du einfach Webseiten erstellen kannst

Elementor.com Page-Builder

Das Geheimnis, wie Du kostenlos, schnell und einfach eine tolle Webseite erstellen kannst, ohne selbst WebDesigner zu sein!

Elementor.com Page-Builder

Um was geht es in diesem Artikel? Ich weis aus vielen Hilferufen, Gesprächen und zahlreichen Postings in Facebook, Twitter und Co., dass sich nach wie vor tausende Marketer mit WordPress, aber insbesondere mit dem wie richte ich die Seite ein sehr schwer tun. Aussagen wie ich habe keinen Plan, ich bin kein Webdesigner oder wo soll ich anfangen beziehungsweise auch:” Ich habe keine Zeit”! Höre ich nur all zu oft. Dabei gibt es eine einfache, schnelle und zudem noch kostenlose Möglichkeit, das selbst und ohne Kenntnisse in HTML und CSS haben zu müssen zu realisieren.

Aber was ist das denn jetzt für ein geheimnisvolles Tool, höre ich schon alle rufen. Dieses Tool ist ein Plugin und heißt Elementor. Es kam vor etwas mehr als 1 Jahr auf den Markt und wurde schon mehr als 200.000 mal heruntergeladen.  Da es eine große Fangemeinde hat, wird es auch laufend erweitert und verbessert.

Elementor ist ein Pagebuilder

Was ist das denn jetzt schon wieder, werden sich jetzt Viele fragen. Ein Pagebuilder ist, wörtlich übersetzt ein Seitenbauer. Dieser sorgt für die Gestaltung meiner WordPress-Seite, aber auch für Beiträge wie diesen und vieles mehr. Damit Sie das jetzt einmal erleben, werde ich jetzt mit dem Elementor-Plugin weiter machen. Zunächst werde ich jetzt das Plugin auf dieser Seite installieren. Dazu bin ich auf die Pluginseite gewechselt und habe das Plugin installiert und aktiviert. Wie einfach das geht, siehst Du im folgenden Video.

Video abspielen

Was beinhaltet jetzt Elemntor?

Der folgende Part zeigt und beschreibt jetzt die einzelnen Elemente vom Elementor Pagebuilder im Detail.

Internetmarketing
Elementor-Übersicht Teil 2

Linke sehen Sie die Elementor-Übersicht in der die wichtigsten Standard-Elemente aufgelistet sind. Die können dann nach rechts mit der Maus in den Bearbeitungsbereich gezogen werden. So sind dort von links oben nach rechts unten die folgenden Elemente vorhanden.

  1. Spalten,
  2. Überschrift, 
  3. Bilder,
  4. Textelement
  5. Video,
  6. Button,
  7. Trennelement (Linie),
  8. Abstand,
  9. Google Maps;
  10. Icons,
  11. Bilder-Box,
  12. Icon-Box,
  13. Bildergalerie,
  14. Bild-Karussell,
  15. Aufzählung (Icon-Liste),
  16. Zähler,
  17. Fortschrittsbalken,
  18. Empfehlung,
  19. Tabs;
  20. Akkordeon,
  21. Umschalter,
  22. Social Icons,
  23. Warnung,
  24. Soundcloud,
  25. Shortcode,
  26. HTML-Code,
  27. Menü-Anker,
  28. Sidebar,
  29. und diverse WordPress-Elemente

Somit haben wir zur Gestaltung von WordPress-Seiten und -Beiträgen über 30 verschiedene und einfach anzuwendende Elemente zur Verfügung. Und das alles erhalten Sie kostenlos! Ja, das Elementor-Plugin ist kostenlos. Und es darf auf allen Webseiten eingesetzt werden.

Aber das ist noch nicht Alles!

Elementor Menü oben
Elementor globale Einstellungen
Elementor Menü unten
Elementor Menü unten li X
Elementor Menü unten Ansichten
Elementor Menü unten
Elementor Menü unten-Vorlagen

Wenn man sich in Elementor befindet, gibt es oben und ganz unten jeweils ein Menü:

Im oberen Menü kann ich die Elemente, auch Widgets genannt, auswählen oder globale Einstellungen vornehmen.

Links habe ich die globalen Einstellungen einmal aufgerufen und zeige diese hier.

Die meisten sind wohl selbst erklärend.

Allerdings ist logisch, das gesamte Plugin ist sehr einfach, jedoch auch umfangreich.

Das bedeutet wiederum, um es komplett zu beherrschen ist ein wenig üben notwendig. Es ist wie Radfahren, Übung macht den Meister. 

Allerdings kann man hier nicht vom Fahrrad fallen und sich weh tun, denn man kann alles wieder löschen.

Im unteren Menü, das hier links zu sehen ist, sind neben dem grünen Speichern-Button noch 4 weitere Punkte versteckt. Diese sind von links aus:

  1. hinter dem x verbirgt sich der Zugang  zu Dashboard und zur Seitenansicht.

Der 2. Punkt mit dem Bildschirm beinhaltet die verschiedenen Ansichten. Das heißt hier kann ich mir die Seite anschauen, wie sie am BildschirmTablet oder handy aussieht.

Dort kann ich auch abweichende Einstellungen, für die unterschiedlichen Ansichten, vornehmen.

Der 3. Punkt mit dem Bildschirm ist die Funktion zum Rückgängig machen.

Hinter dem 4. Punkt mit dem TAB verbirgt das Vorlagen-Menü

Dort kann jeder eigene Vorlagen speichern oder aus der bestehenden Vorlagen Bibliothek unterschiedliche Vorlagen auswählen. Diese lassen sich auch abändern und als eigene Vorlagen zur Wiederverwendung speichern.

Für den ersten Eindruck hier eine erste Übersicht über die Vorlagen.

Vorlagen Ansicht

Die 3 Einstellungsmöglichkeiten eines Elementor Widgets

Jedes Elementor Widget bietet 3 grundsätzliche Einstellungen im oberen Bereich. Am roten unterstrich siehst Du, wo du dich gerade befindest.

Hier sind alle Bereich zu sehen und du bzw. Ich befinde mich im Inhaltsbereich. Hier ist das Überschriften Widget zu sehen und ich habe den Titel (die Überschrift) eingegeben die weiteren Punkte: Unter Link kann ich die Überschrift verlinken. 

Unter Größe kann ich von schmal über XL bis Riesig auswählen. Vorgabe ist die unter Global gewählte Größe.

Weiter Punkte ist die Auswahl der HTML-Tag von H1 bis H6 sowie die Ausrichtung wie auf der Anzeige zu sehen ist.

 

Bereich Style

Der Bereich Erweitert enthält viele weiter Einstellungen:

Zuerst sind da die 5 Bereiche:

  • Element-Stil
  • Hintergrund
  • Rahmen
  • Responsive
  • Eigenes CSS

Der Punkt Element-Stil ist wohl der am häufigsten genutzte Punkt. Hier nehme ich Einstellungen für Margin und Padding vor. 

Aber was ist darunter zu verstehen? Für viele die sich wenig bis garnicht mit Web-Design und HTML bzw. CSS beschäftigen, wurde ja ein solcher Pagebuilder geschaffen. Jedoch sind ein paar wenige Grundbegriffe unabdingbar notwendig. Dazu gehören Margin und Padding. Und es ist nich das gemeint, woran manche jetzt denken. 

Unter Margin versteht man der äußeren Abstand eines Elements oder Widgets. Dieser kann für alle Seiten oder einzeln in Pixel (px) eingegeben werden.

Unter Padding ist der innere Anstand, z.B. eines Textes oder Bildes zur umgebenden Element gemeint.

Weiter Hintergrund und Rahmen sind selbsterklärend. Der Rest erfordert weitere Kenntnisse die allerdings im Internet erklärt werden.

Bereich Inhalt

Hier ist der Bereich Style. Im Überschriften Widget kann jeder jetzt die Textfarbe wählen. 

Unter Typografie git es einen Schalter der erst einmal Aus (Standard) ist und An. geschaltet werden muß. Dort läßt sich mit einem Schieberegler die Größe in Pixel einstellen

Weiter Punkte ist die Auswahl der Schriftfamilie,

der Schriftschnitt, was bedeutet wie fett die Stärke der Schrift ist.

Der Punkt Umwandlung hat zur Auswahl: Gross- oder Kleinschreibung, Kapitälchen und normal.

Hinter Stil verbirgt sich: normal, kursiv und schräggestellt.

Linien Höhe (Line-Height) sowie Buchstabenabstand sind selbsterklärend.

Ebenso der Punkt Textschatten.

Bereich erweitert

Wie sehen die Globalen Einstellungen zu Beginn aus

Beitrag bearbeiten
Beitrags-Atribute

Wenn Du mit einem Beitrag oder einer Seite startest, ist es sinnvoll zuerst einige Grundeinstellungen zu machen.

Zu Beginn legen wir den titelfest und speichern die Seite erst einmal. Anschließend nehmen wir entweder unter den Beitrags-Attributen sowie den Seitenleiste-Layout, die grundlegende Einstellung vor.

Bei den Beitrags-Attributen haben wir wie zu sehen das Standardtemplate oder das Elementor-Canvas zu Auswahl. Das können wir aber auch in Elementor unter den globalen Einstellungen noch ändern.

Des weiteren läßt sich das Standardtemplate unter Seitenleisten-Layout anpassen, wie links zu sehen ist.

Bei einigen Layouts lassen sich noch weiter Einstellungen vornehmen.

Wichtig zu wissen ist, dass Elementor mit den meisten WordPress-Themes hervorragend zusammen harmoniert. Wofür ich allerdings keine Garantie übernehmen kann.

Die globalen Elementor Einstellungen

Hier in den globalen Einstellungen sind die ersten 4 Punkte die eigentlich wichtigen Einstellungen in denen Du etwas ändern kannst. 

Die letzten 4 Einstellungen solltest Du besser nicht nutzen, außer Du weißt was Du tust und bist Dir über die Folgen im klaren.

Im weiteren Verlauf erkläre ich Dir anhand von Screenshots die ersten 4 Punkte.

Elementor globale Einstellungen
Globale Farben

Ich gehe hier gleich auf 2 globale Elemente ein.

Zum ersten links, die Globale Farbe. Hier sind bereits häufige Farben zu Paletten zusammen gestellt.

Auf der rechten Seite gibt es den Farbwähler. Dort kannst Du die einzelnen Farbpaletten bearbeiten und verändern.

Somit haben wir 2 wichtige globale Elemente abgehandelt.

 

Farbwähler
Globale Schriftarten

Die globalen Schriftarten sind ein wichtiger Punkt, da fast jeder seine eigenen Vorlieben für Schriftarten und Farben hat. Zudem sind Schriftarten entscheidend für die Lesbarkeit von Webseiten und bestimmen maßgeblich die Verweildauer des Besuchers auf Deiner Webseite.

Das wiederum ist ein wichtiges Kriterium von Google für Dein Ranking in der Google-Suche.

So kannst Du vorab überlegen welches Ihre globale Schriftart sein soll. Und das für die Haupt-Überschriften als Schriftfamilie und Schriftschnitt.

So bist Du später bei der Erstellung Deiner Webseite erheblich schneller und kannst Dich so mehr um Marketing und Besucher kümmern.

Und das ist doch das was Du willst, stimmt’s?

Also ein weiterer beweis, dass Du selbst und mit geringem Aufwand und Kosten, selbst eine einzigartige Webseite bauen kannst.

Zusammenfassung

In diesem Artikel habe ich Dir jetzt gezeigt, wie Du eine eigene Webseite erstellen kannst. Und das allein, einfach und ohne großen Aufwand.

Das das auch noch ohne große Kosten für unter 30 €uro im Jahr zu schaffen ist zeige ich Dir in diesem Artikel.