Webseite selber erstellen
WorkShop Teil 2: Das Setup

Workshop WordPress Elementor Einstellungen

Teil 2: das Setup

WordPress

Der nächste Schritt zu unserer Webseite besteht darin, einen genauen Blick auf die WordPress-Installation zu werfen. Vielleicht können wir einiges bereinigen, auch können bereits Updates bereit stehen. Wenn wir (weil wir nach dem ersten Teil des WorkShops eine Pause eingelegt haben) nicht mehr eingeloggt sind dann tun wir das. 

Kleiner Tip: lege dir ein Bookmark für die Adminseite an, wenn du diese aufrufst und nicht mehr eingeloggt bist, wirst du dann zur Loginseite weitergeleitet:

https://deinedomain.tld/wp-admin/

 

WordPress aufräumen

Themes löschen

Mit der Installation wurden automatisch einige Themes installiert, die wir nicht benötigen. Ich empfehle das aktuellste Theme (im Augenblick TwentyTwenty) für Notfälle zu belassen, alle anderen zu löschen:

Dashboard > Design > Themes > Auf den Screenshot des zu löschenden Themes klicken (Theme Details) > rechts unten auf löschen

Plugins kontrollieren

Dashboard -> Plugins 

Neben den beiden Elementor Plugins findest du auch 2 weitere: Hello Dolly und Akismet. Ersteres kann man bedenkenlos löschen, bei Akismet stellt sich die Frage, ob man es verwenden will. Wer Kommentare auf der Seite zulassen will sollte es aktivieren. Dieses Plugin dient dazu, Spam in den Kommentaren zu verhindern. Es ist dazu notwendig einen Account zu erstellen, für private Seiten ist das kostenfrei.

Aktualisierungen

Im Dashboard tauchen hin und wieder Hinweise für Aktualisierungen auf. Das betrifft nicht nur Updates von Themes und Plugins sondern auch von Übersetzungen. Angezeigt werden zur Verfügung stehende Aktualisierungen in der Menüleiste durch ein kleines Symbol mit einer Anzeige der Anzahl der zu aktualiserenden Kompotenten. Draufklicken hilft.

Webseite erstellen WordPress Plugins
Die beiden Plugins Hello Dolly und Akismet sind vorinstalliert und können entfernt werden.

WordPress Einstellungen

Links unten unter Einstellungen findest du verschiedene Bereiche, zu denen Einstellungen vorzunehmen sind. Sich nicht auf die Voreinstellungen zu verlassen sondern das einmal durchzugehen wird dringend empfohlen.

Allgemein

Hier können die Voreinstellungen übernommen werden, ev. gibt es andere Vorlieben zum Datums bzw. Uhrzeitformat.

Schreiben

Kann bleiben wie es ist.

Lesen

Die Startseiteneinstellung wird man vermutlich auf eine statische Seite umschalten. Hier kann man die einzige Seite die im Augenblick existiert, die Beispiel-Seite einstellen. 

Die Zahl für die Blogseiten ist auch wichtig, wenn man die Anzahl der Suchergebnisse verändern will. Mehr darüber im Beitrag über die WordPress Interne Suche.

Auch findet man hier die Option für die Sichtbarkeit für Suchmaschinen. Ich empfehle die Suchmaschinen bis zum Launch der Seite auszuschliessen.

Diskussion

Bei den Standardeinstellungen für Beiträge kann man Kommentare grundsätzlich ausschliessen. Das sollte man immer tun, auch wenn man gar keine Beiträge sondern nur Seiten erstellt: Spammer finden alles! 

Die meisten Einstellungen sind selbsterklärend und müssen hier nicht weiter besprochen werden. Der Bereich für Avatare ist auch für jene spannend die sich in den Details der DSGVO herumtreiben. Ob Avatare DSGVO-konform sind ist anscheinend nicht einfach zu beantworten. Wer sie nicht benötigt: ausschalten.

Medien

WordPress legt bei jedem Bild auch Kopien in verschiedenen Bildgrößen an. Das ist gut so, ob man die Voreinstellungen so behalten will ist eine Gestaltungsfrage. Meine Empfehlung: so beibehalten.

Bei Dateien hochladen kann noch die Option für monatsbasierte Ordner ausgeschalten werden. Ich empfehle das nicht, die automatisch wachsende Ordnerstruktur merkt man im Alltag überhaupt nicht, und wenn man wirklich einmal per FTP in die Homepage eingreifen will, hilft das bei der Übersicht. 

Permalinks

Der Permalink ist der Bestandteil der gemeinsam mit der Domain die absoluten Adressen alle Bestandteile der Webseite bilden. Gut überlegen. Ein Permalink heisst deswegen so, weil er permanent besteht. Google vergisst Permalinks auch nach Jahren nicht und gibt 404-Fehler aus, auch wenn eine Seite gelöscht wurde. Daher: eine gute Option wählen (ich arbeite normalerweise nur mit Beitragsname) und wenn man wirklich einen Beitrag oder eine Seite löscht den verwaisten Link mittels Redirect umleiten.

Datenschutz

Hier vorerst nichts ändern. Wir behandeln das Thema weiter unten in diesem WorkShop.

Fonts

Schriften gehören zu wichtigsten Gestaltungselementen überhaupt. Viele Jahre lang waren die Möglichkeiten im Web sehr eingeschränkt. Immer noch kann man im Vergleich zur Gestaltung für Druckwerke (oder PDFs) nur einen Teil der unerschöpflichen Vielfalt in der Typographie nutzen. 

Andererseits sind durch die Notwendigkeiten des Responsive Designs und die Optimierung auf auf kleine Handy Screens die Gestaltungsmöglichkeiten sehr reduziert worden. Da bleibt eine gelungene Schriftauswahl oft als letzter Rest eines Corporate Designs übrig, der auch auf einem Handy erkennbar bleibt.

Die Entscheidung lautet also: Schriften bewusst auswählen. Woher kommen nun die Schriften im Browser? Die erste Möglichkeit besteht darin, Systemschriften zu verwenden. Der große Vorteil: der Computer auf dem Browser läuft kennt diese Schriften, sie müssen nicht erst geladen werden. Der Nachteil: es gibt nicht viele die wirklich auf allen Systemen vorhanden sind – und sie sind unsagbar langweilig. 

Elementor bietet von Haus aus die Möglichkeit, die Google-Font Bibliothek zu verwenden. Die Schriften werden also beim Seitenaufruf in den Browser geladen. Vorteile sind große Auswahl und kostenlose Verfügbarkeit. Die Nachteile liegen darin, dass für das Laden der Schriften Zeit vergeht die wir (ausser durch die Auswahl der Art und Menge der Schrift selber) nicht beeinflussen können. Der noch größere Nachteil liegt aber darin, dass vermutlich die Nutzung von Google-Schriften über den Google-Font-Server nicht wirklich DSGVO-konform ist. Google behauptet zwar auf der einen Seite, diese Fonts nicht zum Tracken zu verwenden, verweist aber gleichzeitig auf die allgemeinen Geschäftsbedingungen, die sich leider nicht wirklich am europäischem Recht orientieren. 

Wir haben aber die Möglichkeit Schriften selber zu hosten und einzubinden. Dh. wie auch ein Bild oder ein Logo wird die Schrift von unserem eigenen Webserver zum User übertragen. Die gute Nachricht ist: Google bzw. die Lizenzen unter denen die Schriften veröffentlicht wurden erlauben den Einsatz der Schriften auch lokal. Wir können also aus der reichlichen Google-Bibliothek wählen und müssen uns die Fontfiles besorgen. Oder wir können auch andere (legale!!!) Quellen nutzen.  

Elementor unterstütze übrigens auch Adobe Fonts (TypeKit). Wer eine ID hat kann diese im unter 

Dashboard > Elementor > Einstellungen > Integration

angeben und so diese Lizenz nutzen. Wer also zB. ohnehin schon eine CreativeCloud Lizenz nutzt sollte hier einmal nachschauen, ob er nicht auch versehentlich das Recht auf die Webnutzung von Fonts mit erworben hat.

 

Schriften einbinden

Hier nun eine praktische Anleitung zur Einbindung eines Google Fonts als lokale Datei:

  1. Es gibt das Service Google-Webfonts-Helper (übrigens von einem Österreicher). Dort wähle ich die Schrift Work Sans aus. (Latin. Die Charsets 200 (light), regular und 700 (bold). Das Service generiert eine ZIP-Datei, die ich downloade.
  2. Als nächstes geht es im Dashboard unter Elementor > Benutzerdefinierte Schriftarten > Add New
    [Anmerkung: nicht wundern, wer Elementor auf deutsch verwendet: immer wieder tauchen manche Begriffe auf englisch auf, hier ist einfach die Übersetzung (noch) nicht vollständig]
  3. Einen Schriftnamen eingeben und dann die Schriftvariante hochladen.
  4. Wer hat sollte möglichst immer alle technischen Versionen zur Verfügung stellen. Verschiedene Browser verwenden verschiedene Formate. Wir wissen nicht womit unsere Besucher browsen, also bieten wir möglichst alles an was geht.
  5. Danach veröffentlichen, nun stehen die Schriften im Elementor zur Verfügung.
1 Schrift suchen 2 Zeichenumfang wählen 3 Schriftschnitte (Varianten) auswählen 4 ZIP-Paket downloaden
Webfonts lokale Einbinden
Einen neuen Font erstellen und die Fontdateien hochladen. Möglichst alle 5 Formate, nur die Schnitte (Varianten) die man wirklich benötigt.
Webseite selber erstellen Fonts einbinden
Nach der Veröffentlichung stehen die Schriftvarianten im Elementor zur Verfügung.
In eigener Sache:
werkform bietet dir ein passendes Hosting inkl. Domain und E-Mailadresse an. Zusätzlich kann werkform dir auch bei der Installation der Komponenten und der notwendigen Lizensierung von Elementor Pro helfen.
Werbung

Elementor Einstellungen

Zuvor haben mit den Schriften schon Elementor Einstellungen vorgenommen. Jetzt wenden wir uns den weiteren Einstellungen zu.

Dashboard > Elementor > Einstellungen

Generell

Wir wollen Elementor für Beiträge und Seiten verwenden. Solltest du weitere Posttypen erstellen (siehe auch mehr dazu in diesem Artikel), tauchen diese CPTs (Custom Post Types) in der Liste auf.

Die Optionen Standardfarben deaktivieren und Standardschriftarten deaktivieren wählen wir aus. Dadurch werden die Styles aus dem Theme nicht verwendet sondern die Elementor eigenen Theme Style Optionen greifen. [Der deutsche Text übrigens falsch ist.]

Elementor Einstellungen
Im ersten Reiter alle Optionen auswählen.

Stil

Die Voreinstellungen unter dem Reiter Stil  entsprechen meinen Vorstellungen. Wer jedoch eine andere Inhaltsbreite wählen will oder die Breakpoints für Tablet und Handy ändern will findet hier die Optionen. 

Ganz unten ist der generelle Lightbox-Schalter. Wer nicht will, dass bei einem Klick auf ein Bild mit dem Ziel Medienanhang die Datei in einem Modalfenster geöffnet wird muss diese Option hier ausschalten.

Integration

Der Name verrät es, hier sind die Keys einzugeben wenn wir folgende Dienste nutzen wollen:

  • reCaptcha
  • reCaptcha V3
  • Facebook SDK
  • MailChimp
  • Drip
  • ActiveCampaign
  • GetResponse
  • ConvertKit
  • MailerLite
  • Adobe Fonts (TypeKit)
  • Font Awesome Pro

Erweitert

Für fortgeschrittene Anwender bzw. Problembehandlungen. Wer (ältere) Templates benutzt wo manche Icons nicht funktionieren sollte probieren, ob die Option Font Awesome 4 Unterstützung laden das Problem löst. 

Rechtliches

Wer eine Webseite oder ein Blog betreibt muss sich auch dem Thema der rechtlichen Umgebung widmen, in der das alles statt findet. Ich persönlich finde das unglaublich mühsam und schwierig, ausserdem ist es nicht einfach Antworten zu finden, die stimmen. Selber überprüfen kann ich nichts, ich muss den Experten glauben – die selber natürlich uneinig sind. Meine Empfehlung lautet also:

  1. Tu nichts, was du nicht auch im richtigen Leben machen würdest.
  2. Suche dir jemanden den du zutraust, genug Ahnung von der Sache zu haben.

Konkret heißt das für Webseitenbetreiber, dass neben den Klassikern wie Strafrecht, Urheberrecht etc. besonders 2 Komponenten zusätzlich berücksichtigt werden müssen: das Medienrecht und die Datenschutzgrundverordnung. Wir brauchen also ein Kochrezept, einen Waschzettel dem wir folgen können und dadurch alles richtig machen.

Meine Empfehlung dazu lautet, das Plugin WP DSGVO Tools (GDPR) von legalweb.io zu verwenden. Und zwar aus folgendem Grund: ich habe gelernt, dass die DSGVO eben kein europäisches Gesetz ist und sondern vielmehr (auch) ein österreichisches und deutsches. Daher ist es wichtig, dass bei der Implementierung auf die lokalen Ausformungen dieses Gesetzes Rücksicht genommen werden. Ausserdem werden die kritischen Texte laufend angepasst, ich vertraue also darauf, dass die aktuelle Auslegung der Gesetze in meine Implementierung einfliessen. Ganz praktisch in für die Umsetzung: wir benötigen ein Impressum und eine Datenschutzerklärung

Am Einfachsten ist die Installation über

Dashboard > Plugins > Installieren

Dort suchen wir nach WP DSGVO Tools und installieren jenes von legalweb. 

Webseite erstellen DSGVO
Nach der Installation wird das Plugin aktiviert, dann tauchen gleichen ein paar Leseübungen auf.

Nun müssen wir uns durch das Plugin bzw. dessen Optionen arbeiten. Im Dashboard ist der neue Punkt WP DSGVO Tools aufgetaucht, den wählen wir aus.

Wir haben keine Lizenznummer. Das Plugin funktioniert auch ohne, mit Lizenz stehen umfangreiche Optionen zur Verfügung die je nach Webseite sehr wertvoll sein können! Bitte prüfen.

Eine Admin Email Adresse geben wir an. An diese werden die Benachrichtigungen gesendet.

Bei Datenschutzvereinbarungen klicken wir auf Seite erstellen. Nun haben wir eine neue Seite bekommen in der bereits die aktuellen Datenschutztexte eingetragen wurden. 
Wenn wir nun im Dashboard zu den Seiten wechseln sehen wir eine Datenschutzseite im Status Entwurf und ein zweite, die bereits online ist. Die erste stammt von WordPress selber und kann gelöscht werden. Danach im Dashboard unter Einstellungen > Datenschutz die neue Seite Datenschutzvereinbarungen als Seite für die Datenschutzerklärung auswählen. (Diese Seite benutzen klicken).

Zurück zum DSGVO-Plugin. Im zweiten Menüpunkt Cookie notice /popup findest du die Einstellungen eben dafür. Wer Analysedaten erhebt sollte auf jeden Fall mindestens eine Cookie-Notitz einblenden. Hier wird auch definiert, wie lange das Cookie gültig bleiben soll.

Unsere Daten geben wir nun im dritten Menüpunkt an. Unter Webseitenbetreiber sind möglichst alle Felder auszufüllen. Das Land ist wichtig! Die Texte werden je nach ausgewähltem Land generiert. [Österreich finden man übrigens nach Australien, klassischer Fall von zuerst sortiert und danach übersetzt].

Im letzten Feld findet man die Impressum Einstellungen. Auch hier klicken wir wieder auf Seite erstellen

Wir haben nun die beiden Seiten für unsere rechtliche Sicherheit einmal grundlegend erzeugt. Das ist einmal ein Anfang. 

Die PremiumVersion des Plugins bietet darüber hinaus Optionen zum Einbinden von Google Analytics, Targeting, erweiterte Texte für verschiedenste Fälle etc. Es ist wirklich sinnvoll sich tiefer in dieses Thema einzuarbeiten, jedoch nicht an dieser Stelle.

Globale Definitionen

Der nächste Schritt am Weg zu unserer Webseite ist die Definition der einzelnen Gestaltungselemente. Sehen wir uns einmal an, wie es im Augenblick aussieht: wie haben ja eine Beispielseite automatisch angelegt.

Dashboard > Seiten > Beispiel-Seite > bearbeiten

Die Seite wird innerhalb des Dashboards geöffnet, Gutenberg ist der aktive Editor. Wir klicken auf mit Elementor bearbeiten.  Der Anblick ist wenig erfreulich, was wir mit den nächsten Schritten beheben werden. Ganz links oben im Editor finden wir ein Hamburgermenu, damit kommen wir nun zu den weiteren Einstellungen.

 

Webseite erstellen - Elementor Beispielseite
Das Menu links oben in der Ecke bringt uns zu den Einstellungen innerhalb von Elementor.

Die ersten beiden Punkte Standardfarben und Standardschriftarten können wir gleich vergessen, diese haben wir zuvor deaktiviert. 

Theme Style

Wenn wir auf Theme Style klicken wechselt der Elementor auf königsblau. [Ich vermute in diesem Bereich wird es bald Nachbesserungen geben: wo man wie zu welchen Optionen gelangt ist nicht wirklich konsistent, logisch ist es auch nicht, dass man eine Seite bearbeiten muss um darüber aus der Seite die Einstellungen für die übergeordnete Website zu machen.] Nun haben wir 6 Menüpunkte vor uns, wo wir die globalen Werte setzen können, also Einstellungen treffen die grundsätzlich alle Inhalte betreffen.

Hintergrund

Hier kann ich eine Hintergrundfarbe, einen Farbverlauf oder auch einen Bildhintergrund festlegen. In diesem Beispiel wird der Hintergrund ein helles Grau.

Typographie

Wir haben uns ja bereits zuvor Gedanken über die Schriften gemacht, hier kann ich das anwenden. Ich wähle unter Body > Textfarbe ein dunkles grau. darunter bei Typographie die eigene Schriftfamilie Work Sans. Bei Größe setze ich die Einheit auf EM und lege die Größe auf 1.1 fest. Dann klicke ich auf den kleinen Desktop neben der Schrift Größe und kann so von Desktop auf Mobile wechseln. Hier stelle ich die Größe auf 1.0 EM ein. 

Elementor Theme Style Typo 1
Wir legen die eigenen Schriftart Work Sans fest sowie die Schriftgröße 1.1 EM.
Theme Style Elementor Mobile Typo
Wenn wir bei Größe auf den kleinen Desktop klicken können wir auf Mobile wechseln und so eine etwas kleinere Schrift für Mobiltelefone einstellen. Die Vorschau wechselt automatisch auf einen Mobile Screen.

Link

Bei diesen Einstellungen heisst es vorsichtig sein, immerhin sind viele Elemente auch ein Link, die durch diese Angaben verändert werden. Ich lege hier also nur die Grundfarbe für den Link fest, ein dunkles Rot, sowie die Farbe für das Hover,  Schwarz. Zusätzlich wähle ich beim Hover die Auszeichnung unterstrichen. 

H1 bis H6

Jetzt kommt es ein wenig auf’s Fingerspitzengefühl an, aber Geschmäcker sind bekanntlich sehr verschieden. Als Farbe wähle ich für alle Überschriften Schwarz. Ich mag, wenn die größte Überschrift etwa 2,5 x so groß wie der Fliesstext ist, ausserdem will ich sie fett. dazu habe ich ja den Schriftschnitt extra geladen. Also bei H1 kommt Work Sans, 2.5 EM, Schriftschnitt Bold, die H2 wird 1.8 EM groß und Bold, die H3 1.5 EM, schwarz, Bold. Die H4 wird bei mir genauso groß wie der Fliestext, nämlich 1.1 EM. H5 und H6 definiere ich nicht, weil ich sie nur sehr selten verwende.

Überschriften Theme Style definieren
Um zu sehen wie die Schriftendefinitionen aussehen habe ich ein paar Überschriten in meine Beispielseite eingebaut.

Wir können jederzeit auf die weiteren Theme Style Optionen zurückgreifen. Es gibt noch Buttons, Form Fields, Bilder und Eigenes CSS. Wenn ich hier jetzt das grundlegende Aussehen der Buttons festlege gilt das für die ganze Webseite – ich kann aber jeden einzelnen Button auch anders gestalten, wenn es notwendig ist. Wenn ich also immer einen dunklen Button auf hellem Grund habe aber dann einmal, auf einer ganz speziellen Seite, einen dunklen Hintergrund habe kann ich diesen einzelnen Button dann auch hell gestalten. 

Das CSS des Widgets ist also über dem CSS des Theme Style anzusehen. Das gilt natürlich für alle hier getroffenen Definitionen. Ich kann immer die Typographie einer einzelnen Überschrift ganz individuell gestalten, Theme Style hilft mir aber eine möglichst große Konsitsenz über die ganze Seite hinweg zu erreichen. 

Speichern drücken! Wir landen wieder im gewohnten Elementor.

Elementor Globale Einstellungen

Und noch einmal haben wir Einstellungen vorzunehmen. Innerhalb des Elementors gibt es einen Block unterhalb von Theme Style, genannt Einstellungen. Hier auf Globale Einstellungen klicken. [Anmerkung: nein, Konsistent ist das nicht, das ist Stand März 2020, Version 2.9.1 – gut möglich, dass hier beim nächsten Update aufgeräumt wird.]

Viel einstellen werden wir hier nicht, es gibt 2 Bereiche. Unter Stil nehmen wir keine Änderungen vor, unter Lightbox kann man Aussehen und Verhalten eben der Lightbox verändern. Zur Erinnerung: aktiviert/deaktiviert haben wir die Lightbox im ersten Teil des Workshops.

Webseite Erstellen Elementor Lightbox Einstellungen
Die Einstellungen für die Lightbox findet man unter Globale Einstellungen > Lightbox unter dem Hamburgermenu links oben innerhalb des Elementors.
In eigener Sache:
werkform erstellt auch grafische Konzepte. Logos und Corporate Designs. Wenn du ein Logo, eine Schriftendefinition und eine Farbberatung brauchst- reden wir darüber, gerne auch im Videochat.
Werbung

Logo

Was uns jetzt noch fehlt ist das Logo unserer Seite. Das Logo ist nach wie vor Sache des Themes und folgedessen ausserhalb der Elementor-Umgebung zu finden. Wie übrigens auch Menüs, auf die wir später noch stossen werden. 

Dashboard > Design > Customizer > Webseite-Informationen

Ist der Weg zu unserer Logodefinition. Neben dem Logo kann man dort auch den Titel der Webseite, den Untertitel sowie das Website-Icon festlegen (also die Grafik, die dann in den Bookmarks auftaucht bzw. im Browserfenster im Tab angezeigt wird).

Wir klicken also auf Logo auswählen und wählen unser Logo von der lokalen Festplatte. 

WordPress Customizer Logo einfügen
Wir wählen im Customizer Logo und Webseiten-Icon aus und klicken auf veröffentlichen.

Jetzt ist angerichtet. Im 3. Teil dieses Workshops beschäftigen wir uns mit den Templates für Kopf und Fuß – und natürlich auch für den großen Bereich dazwischen.

Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp
Share on linkedin
LinkedIn
Share on email
E-Mail