WordPress - Elementor - Isabella Krystynek - E-Book

WordPress - Elementor E-Book

Isabella Krystynek

4,0

Beschreibung

Wenn Sie eine Website mit nur wenigen Klicks und binnen kurzer Zeit erstellen möchten, dann ist dieses Buch genau das Richtige für Sie. Sie lernen darin den beliebtesten Drag-and-drop Page-Builder kennen, womit Sie nach der Installation und Aktivierung des PlugIns ganz einfach diverse Elemente aus einer Bearbeitungsleiste in einer Ihrer Seiten "schieben" können. Doch Elementor bietet noch viel mehr, denn Ihnen werden sämtliche Features für Ihr Design geboten, die Sie sonst nur in teuren Programmen erhalten.

Sie lesen das E-Book in den Legimi-Apps auf:

Android
iOS
von Legimi
zertifizierten E-Readern
Kindle™-E-Readern
(für ausgewählte Pakete)

Seitenzahl: 111

Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:

Android
iOS
Bewertungen
4,0 (1 Bewertung)
0
1
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



WordPress - Elementor

WordPress – Elementor Einer der beliebtesten Drag-and-drop Page-Builder1. Auflage 2022Einleitung:1.1. Was ist WordPress?1.2. Welche besondere Änderung gab es bei WordPress?2.1. Welcher Webhosting-Tarif ist der günstigste?2.1.2. Wieviel Speicherplatz wird benötigt?2.3. Das WordPress Dashboard2.4. Die WordPress Grundeinstellungen2.4.2. Beitragseinstellung ändern2.4.4. Permalinks anpassen2.5.2. Erste Seite mit WordPress erstellen2.5.4. Unterschiede zu Elementor Canvas und voller Breite2.5.5. Fügen Sie ein neues Theme hinzu3. Die Astra Designvorlagen4.1. Features in Free- und in der Pro-Version4.2. Aktivierung der Pro-Lizenz5.1. Elementor und die Verwendung5.1.2. Diverse Elementor Widgets5.1.4. Ausrichtung der Spalten und Abschnitte5.1.5. Der Hintergrund5.1.6. Der Text5.1.7. Rahmen und Trennlinien5.1.9. Diverse Bewegungseffekte5.1.11. Die responsive Gestaltung5.1.12. Die Attribute5.1.13. Benutzerdefiniertes CSS einbinden5.2. Der Editor5.2.2. Widgets entfernen5.2.6. Tastaturbefehle für den schnelleren Umgang5.2.7. Diverse Elemente mit der Lupe suchen6.2. Der Formteiler (Divider) vs. Abstandshalter (Spacer)6.5. Die Hintergrundgestaltung6.6.1. Vertikales Scrollen6.6.5. Rotation (drehen)6.7. Einführung in die Filtereffekte & Mischmodi6.7.2. Blend-Mode Funktionen6.7.3. Bekannte Filter6.8. Verwendung von Z-Index6.9.1. Verwendung7.1.1. Template im Frontend-Bereich hinzufügen7.2. Meine (gespeicherten) Templates7.2.3. Vorlagen im- und exportieren8.1. Nähere Beschreibung der häufigsten Effekte8.2. Das Problem mit den Animationen9.1. Online-Präsenz mit einem Kontaktformular stärken9.1.2. Fehler verbessern mithilfe der Leserbewertungen9.2.2. Das Formular für Ihre Marke anpassen9.2.3. Schriftart und Schriftfarbe anpassen9.2.5. Einstellung der Feldgröße9.2.7. Ein mehrstufiges Kontaktformular einrichten9.2.8. Wichtige Schritte bei der Formular-Gestaltung9.2.9. Die Formularübermittlungsoptionen einrichten9.2.10. Einstellungen für benutzerdefinierte Nachrichten im Kontaktformular9.3. Die Elementor-Widget Vor- und Nachteile9.3.1. Die Vorteile im Überblick:9.4. Etwaige Probleme beim Formularversand10.1. Ein neues Pop-ups Fenster erstellen10.5. Vor der Veröffentlichung10.5.2. Die Triggers (Auslöser)10.6. Die wichtigsten Features11.1. Integration der Marketing Tools11.1.1.1. So verbinden Sie Elementor mit AWeber:11.1.1.2. Erstellung eines AWeber Accounts11.1.1.3. Die Verwendung mit Elementor Pro:11.1.1.4. Die Verwendung mit Elementor Free (& AWeber Konfiguration):11.1.2.1. So verbinden Sie Elementor mit MailChimp:11.1.2.3. Die Verwendung mit Elementor Pro:11.1.2.4. Die Verwendung mit Elementor Free11.1.3.1. So verbinden Sie Elementor mit MailerLite:11.1.3.2. Erstellung eines MailerLite Accounts (& Hinzufügen eines MailerLite API-Keys)11.1.3.3. Die Verwendung mit Elementor Pro:11.1.3.4. Die Verwendung mit Elementor Free:11.2. Integration der WordPress PlugIns11.2.1.1. Erste Einrichtung des Online-Stores11.2.1.2. Einstellungen der Shop Seite, der Zahlungsmethoden & mehr11.2.1.3. Die Produkte, Kategorien und wichtige Seiten11.2.2.1. Erste Einrichtung von Yoast-SEO11.2.2.2. SEO-technische Optimierung mit Yoast-SEO11.2.2.3. Yoast-SEO und Elementor11.3. Integration der Sozialen Netzwerke11.3.1.1. Was ist "Facebook SDK"11.3.1.3. Nützliche Facebook Widgets in Elementor11.3.2. Social-Media-Integration #2.: Google Maps12.1. Der Seiten-Entwurf12.3. Die Veröffentlichung12.5. Privat? Passwortgeschützt?13.2. Standardschriftarten deaktivieren & neue einfügen13.3. Standardfarben deaktivieren13.3.1. Die Primärfarben13.3.3. Die Textfarben13.4. Das responsive Design (Breite)13.5. Der Abstand der Widgets13.5.1. Die vertikale Ausrichtung13.6. Einen Header & Footer mit Elementor erstellen13.6.2. Die Erstellung mit Elementor Free14.1. Font Awesome 5 Migration14.2. Die Elementor Bedingungen14.3. Elementor Wartungsmodus14.3.1. Was ist ein Wartungsmodus?14.4. Elementor vs. Gutenberg Editor14.4.2. Die Live-Bearbeitung14.4.4. Erweiterte Formatierungen14.5. WordPress Backup erstellen14.5.2. Werden Backups vom Hosting-Anbieter durchgeführt?14.5.4. Welche Daten werden bei einem Backup gespeichert?15.1. Fehlercode 40115.2. Fehlercode 40315.3. Fehlercode 50015.3.2.1. Wenn der Fehler 500 auf allen Websites erscheint15.4. Fehlercode 502 (Bad Gateway)15.6. Update Probleme15.7. Seite kann mit Elementor nicht bearbeitet werden15.7.1.1. Behebung eines Fehlers bei Anzeige einer weißen Seite15.7.2.1. Behebung des Fehlers bei Anzeige einer grauen Seite15.7.3.1. Behebung des Fehlers, wenn der Zugriff auf den Editor nicht möglich ist15.8.1. Behebung des Fehlers, wenn die Vorschau nicht geladen wird15.9. Formular-Fehlermeldung15.10.1. Behebung des Fehlers, wenn das Widget-Panel nicht geladen wird15.11.1. Behebung des Fehlers, wenn die Kit-Library nicht geöffnet werden kannSchlusswortImpressum

WordPress – Elementor Einer der beliebtesten Drag-and-drop Page-Builder

Powered by Krystmedia e.U. IT-Dienstleistungen & Webdesign

WordPress–ElementorEiner der beliebtesten Drag-and-drop Page-Builder

Fachbuch

Ab Version: 5.9

1. Auflage 2022

1. Auflage 2022

Impressum:

Powered by Krystmedia e.U. IT-Dienstleistungen & Webdesign

WordPress – Elementor – Einer der beliebtesten Drag-and-drop Page-Builder

Copyright © 2022 by Isabella Krystynek

https://www.krystmedia.at

Löwengasse 40

2230 Gänserndorf

[email protected]

Mitglied der WKO Österreich

Herausgeberin: Isabella Krystynek

Covergestaltung: Canva, Pty Ltd,canva.com

Bildbearbeitung:inpixio.com/‎

Hinweis: Dieses Buch ist urheberrechtlich geschützt.

Alle Rechte vorbehalten inkl. des Rechtes auf Reproduktion im Ganzen oder in Teilen und in jeglicher Form.

Einleitung:

Einleitung:

Liebe Leserinnen, liebe Leser,

herzlichen Glückwunsch für die Entscheidung mit dem PlugIn "Elementor" eine WordPress Website zu gestalten. In diesem Buch finden Sie sämtliche Informationen zu WordPress und welche Features Ihnen die kostenlose und die Pro-Version von Elementor bietet.

Elementor zählt zu den weltweit beliebtesten Website-Builder, die zudem auch kostenlos als interne Installation bei WordPress erhältlich ist. Mittlerweile wurde dieser Editor von mehr als 50.000 Anwendern installiert! Kein Wunder, denn es können in Kombination mit den namhaften Themes (Designvorlagen) wie beispielsweise "Astra" attraktiv aussehende Homepages erstellt werden.

In diesem Buch finden Sie Schritt-für-Schritt-Anleitungen, um mit dieser Designvorlage in Zusammenhang mit Elementor eine Website zu erstellen. Sie lernen zudem sämtliche Funktionen des Drag-and-drop Page Builders kennen, die Sie bestimmt für Ihre Online-Präsenz brauchen werden. Zudem befinden sich darin nützliche Informationen zu den diversen Einstellungen des PlugIns . Am Ende werden Sie in der Lage sein Elementor völlig selbständig zu nützen und vollwertige Websites mit dem Page Builder und Astra zu erstellen.

Bestimmt fragen Sie sich: "Weshalb wird in diesem Buch über die Designvorlage Astra berichtet?" Die Antwort darauf ist recht einfach: Erstens ist dieses Theme mit Elementor kompatibel und zweitens bietet Astra einige nützliche Templates (vorgefertigte Seiten, in denen sich Blindtexte "Lorem Ipsum… befinden) beispielsweise für die Erstellung eines Online-Shops, Reise-Blogs und weitere etliche Vorlagen für Firmen-Präsenzen, vorhanden sind. Ein weiterer Vorteil für StartUps ist, dass einige lukrative Vorlagen ebenfalls kostenfrei erhältlich sind. Am Ende des Buches finden Sie einen Glossar, worin Sie eine einfache Übersetzung zu den schwierig verständlichen Begriffen finden.

1.1. Was ist WordPress?

Alles über WordPress

1.1. Was ist WordPress?

Bevor ich auf die Anwendung des PlugIns Elementor und auf das Design eingehe, finden Sie hier noch eine kurze Einführung zum CMS-Programm WordPress. Denn hierbei handelt es sich um das populärste Content-Management-System weltweit, das eben aus einem sogenannten "Frontend-" und "Backend-" Bereich besteht. Der Frontend-Bereich ist dieser, den man auch als Besucher einer Website sieht und zum vollwertigen Backend-Bereich gelangt man nur als Administrator. Doch auch als registrierter Besucher kommt man zu diesem Bereich, allerdings aber nur, um das eigene Profil zu bearbeiten. WordPress ist deshalb so beliebt, weil man damit eine vollwertige Website ohne diversen Programmier-Kenntnissen erstellen kann.

Zur Information: In diesem Buch erhalten Sie sämtliche Informationen zu "wordpress.org". Des Weiteren bietet WordPress ein Baukasten-System an. Sie erreichen dies, wenn Sie in der Browser-Leiste die URL "wordpress.com" eingeben.

wordpress.org

wordpress.com

1.2. Welche besondere Änderung gab es bei WordPress?

1.2. Welche besondere Änderung gab es bei WordPress?

Ende des Jahres 2018 entstand ein völlig neuer Editor namens "Gutenberg", der den alten "Tiny MCE" Editor ersetzte. Zum können gewisse Tätigkeiten umso einfacher durchgeführt werden, denn es werden diverse Elemente aus den sogenannten Blöcken in den Content (Seiteninhalt) geschoben und zum anderen sieht eine Webpräsenz danach viel attraktiver aus. Der WordPress Gutenberg setzt auf ein interaktives Interface, wodurch die alte codebasierte Content-Creation mithilfe von HTML und CSS vollständig ersetzt wurde. Des Weiteren entwickelte WordPress mitunter neue sowie zeitlich relevante Designvorlagen, die mit wenigen Klicks dementsprechend angepasst werden können.

1.3. Wofür ist WordPress geeignet

Ursprünglich wurde WordPress für die Erstellung eines Blogs geschaffen. Doch mit der Zeit bietet dieses Content-Management-System weitaus mehr Möglichkeiten, um sich in der Online-Welt bekannter zu machen. Beispiele hierfür wären:

Blog

Online-Shop

Landing Page

Firmen-Homepage

Nischen-Website

Online-Community

Online-Magazin

Portfolio

Event-Präsenz

Nachrichten-Portal

2.1. Welcher Webhosting-Tarif ist der günstigste?

Wichtige Vorbereitungen für WordPress

2.1. Welcher Webhosting-Tarif ist der günstigste?

Hosting-Anbieter gibt es weltweit wie "Sand am Meer" und es werden auch immer mehr. Denn heutzutage ist es nicht mehr so schwierig Websites selbst zu hosten, wenn man über einen Webserver mit guter Kapazität verfügt. Des Weiteren ist es auch möglich Hosting-Dienstleistungen mittels eines Reseller-Vertrages anzubieten. Nun aber zurück zu den eigentlichen Webhosting-Anbietern. Ein entscheidender Preis-Faktor ist, wenn das All-in Paket mehr verschachtelte Leistungen (z.B. Domain, Speicherplatz, SSL-Zertifikate…) zu einem günstigen Preis angeboten wird. Außerdem sollte auf die Performance (Ausfallrate, Seitenladezeit) geachtet werden, denn ansonsten hat man in der Zukunft enorme und auch unnötige Probleme, die man eigentlich vermeiden könnte. Ich habe mit einigen Webhostern teilweise gute, aber auch schlechte Erfahrung gemacht. Nun finden Sie diese Anbieter, die ich für die Erstellung einer WP-Website empfehle. Zudem finden Sie dazu die Webhosting-Preise:

Netcup (ab 1,99 € / Monat)

World4You (ab 4,99 € / Monat)

Hoststar (ab 1,95 € / Monat)

Hosttech (ab 2,79 € / Monat)

Domaintechnik (ab 2,99 € / Monat)

Domainfactory (ab 4,99 € / Monat)

Stand: 2/2021

..1. Auf welche Systemvoraussetzungen sollte geachtet werden?

Für die Nutzung von WordPress werden bestimmte Voraussetzungen gesetzt, die von einem Hosting-Anbieter gefordert werden. Diese finden Sie zudem auch bei wordpress.org.

PHP-Version: 7.4 oder höher

MSQL-Version: 5.6 oder höher

HTTPS Support

2.1.2. Wieviel Speicherplatz wird benötigt?

..2. Wieviel Speicherplatz wird benötigt?

Für die erste Installation von WordPress wird nicht viel an Speicherkapazität benötigt. Es kommt also darauf an, wofür Sie Ihre Website benötigen. Soll es beispielsweise ein Online-Shop, eine Landing-Page oder ein Blog werden. Für welche Art Sie sich auch immer entscheiden. Wichtig ist, dass genug Speicherplatz vorhanden ist.

..3. Platz für MySQL Datenbanken

Bevor Sie Ihre erste Website erstellen, sollten Sie sich bei der Auswahl eines Tarifes überlegen, wieviele Webpräsenzen Sie in etwa in der Zukunft erstellen möchten und wie groß diese sein sollte. Denn jede WordPress Website benötigt eine MySQL Datenbank, worin sich sämtliche Datentypen wie in etwa die Benutzerdaten, Kommentare, Kategorien, PlugIns und Themes befinden. Achten Sie bei der Wahl Ihres Hosting-Anbieters darauf, dass je nach Paket eine Speicherkapazität ab einem 1 GB vorhanden ist.

..4. Zusätzliche Domains und E-Mail-Adressen

Für die Installation von WordPress wird eine Domain (Webadresse) benötigt. Nachdem Sie Ihren Tarif ausgewählt haben, können Sie mit der Erstellung loslegen. Bedenken Sie hierbei, dass eine Domain-Änderung im Nachhinein nicht gerade einfach ist. Deshalb machen Sie sich bezüglich der Wahl des Namens über den Grund und Inhalt Ihrer Homepage Gedanken. Je nach Webhoster gibt es die Möglichkeit eine gewisse Anzahl an kostenlosen Inklusiv-Domains zu erhalten. Ebenfalls können Sie diverse passende E-Mail-Adressen anlegen (z.B. [email protected]). Je nach Anbieter und Tarif können ab 500 E-Mail-Adressen angelegt werden.

2.2. WordPress installieren

Besonders für Einsteiger ist es bestimmt ausschlaggebend, wenn ein Hosting-Dienstleister das Service einer One-Klick-Installation von WordPress anbietet. Denn die dazugehörige Datenbank und sämtliche Website-Ordner werden automatisch installiert. Nach einer bestimmten Wartezeit erhalten Sie die Nachricht, dass der Prozess vollendet wurde, und Sie können sich mit Ihren festgelegten Zugangsdaten als Administrator anmelden. Aber im Grunde genommen ist eine externe Installation nicht unbedingt kompliziert, wenn Sie sich an die Anleitung halten.

2.3. Das WordPress Dashboard

Bild zu Schritt 4 (FileZilla)

Bild zu Schritt 5 (wp-config.php Datei)

Bild zu Schritt 6 (WordPress Installation)

2.3. Das WordPress Dashboard

Nachdem Sie Ihre Zugangsdaten aus Ihrem Mitgliederbereich geholt haben, können Sie sich nun als Administrator anmelden. Hierfür fügen Sie in der Browser-Leiste den Zusatz "/wp-admin" ein. Es öffnet sich die Login-Maske, worin Sie Ihren Benutzernamen und Ihr Passwort einfügen. Anschließend betätigen Sie den blauen Button: "Anmelden".

Wenn die Zugangsdaten korrekt eingegeben wurden, dann gelangen Sie zum Herzen von WordPress, dieses "Dashboard" genannt wird. Als "Administrator" haben Sie nun die Möglichkeit, sämtliche Änderungen und Anpassungen durchzuführen. Diese Tätigkeiten wären:

Neue Seiten und Beiträge erstellen

Neue Artikel gestalten und in einem Online-Shop einfügen

Kommentare verwalten

2.4. Die WordPress Grundeinstellungen

2.4. Die WordPress Grundeinstellungen

Bei einigen Hosting-Anbietern werden nach Installation von WordPress sämtliche Einstellungen in englischer Sprache angezeigt. Um dies zu ändern, klicken Sie in der schwarzen Menüleiste links auf den Menü-Punkt: "Settings". Sie befinden sich automatisch im Untermenü: "Settings". Auf dieser Seite scrollen Sie etwas nach unten, bis Sie den Titel "Site Language" finden. Dort wählen Sie die WordPress-Sprache "Deutsch", "Deutsch (Österreich) oder "Deutsch (Deutschland) aus. Nachdem Sie diese Änderung durchgeführt haben, klicken Sie auf den blauen Button "Save Changes". Nun werden sämtliche Begriffe in deutscher Sprache angezeigt.

..1. Titel und Untertitel ändern

Nach dieser Anpassung zeige ich Ihnen, wie man den Titel sowie Untertitel Ihrer Webpräsenz ändern kann. Hierfür scrollen Sie auf dieser Seite ganz nach oben und fügen Sie im freien Feld neben "Titel der Website" den Titel Ihrer Website ein. Darunter könnten Sie bei "Untertitel" das Feld befüllen.

2.4.2. Beitragseinstellung ändern

..2. Beitragseinstellung ändern

Nach erfolgreicher Durchführung der letzten Einstellung klicken Sie zum weiteren Untermenü: "Einstellungen/Lesen". Dort können Sie die angeben, ob eine statische Seite oder die Übersicht aller Beiträge als Startseite angezeigt werden soll. Des Weiteren haben Sie die Möglichkeit zu bestimmen, welche als Übersichtsseite Ihrer Beiträge dienen soll. Hierfür sollten aber vorab zwei Seiten erstellt werden, die eben "Startseite" und "Blog" heißen. Nach der Änderung sollten Sie wieder auf den blauen Button "Speichern" klicken.

..3. Diskussionseinstellungen anpassen

Mittels des WordPress Menüs "Einstellung/Diskussion