Das Enfold Theme zeichnet sich durch seine Einfachheit aus, was es auch technisch nicht so versierten Personen erlaubt, rasch eine anständige Website zu bauen.

Die Einarbeitungszeit in den Enfold Standard ist relativ kurz, verglichen mit Themes vie Divi oder Avada, die einen auf den ersten Blick mit ihren Einstellungsmöglichkeiten beinahe erschlagen. Für Divi und Avada sind mehrere Wochen an Einarbeitungszeit zu veranschlagen, Enfold versteht man praktisch intuitiv. Dafür kann bei Divi und Avada praktisch alles in der Live-Vorschau grafisch angepasst werden, während Enfold komplett im Backend aufgebaut werden will.

Wie bei den anderen Themes kann man auch bei Enfold eines der Demo-Themes mit den dazugehörigen Demodaten (Inhalten) herunter zu laden, und dann „nur“ noch die Inhalte anpassen. Diese Einfachheit von Enfold geht allerdings auf Kosten der Flexibilität: ohne grundlegende CSS Kenntnisse und dem Verständnis von z.B. den Chrome oder Mozilla Developer-Tools sind kaum vom Theme nicht vorgesehenen Anpassungen möglich. Der Grund ist, dass meistens die gewünschte CSS-Klasse, die man verwenden möchte, erst durch den jeweiligen Inspektor herausgefunden werden kann. Alternativ kannst Du auch das (sehr gute) Support Forum von kriesi.at durchforsten.

Dennoch lässt sich praktisch alles an seinen eigenen Gusto anpassen. Enfold bietet für praktisch jedes Inhaltselement einen Reiter „Entwickler-Einstellungen“, wo sich eigene CSS Klassen hinterlegen lassen. Voraussetzung: das Enfold Child-Theme, damit die selbst eingestellten Änderungen bei einem Theme Update nicht verloren gehen.

Die CSS ID zuoberst kann ebenfalls für eigene CSS Anweisungen verwendet werden, ich verwende diese ID jedoch lediglich für Anker-Links. Ankerlinks sind Sprungmarken auf einer Seite, um sich bei längeren Seiten nicht die Finger wund scrollen zu müssen.

Wichtig für uns ist also hier der mittlere Abschnitt „Benutzerdefinierte CSS-Klasse“.

Auf einer Beispielseite habe ich den Inhaltstyp „spezielle Überschrift sowie einen Button eingefügt (Ansicht Backend). Anhand dieser Beiden Elemente schauen wir uns die Zuweisung eigener CSS Befehle an.

Beim Inhaltselement „Überschrift“ lassen sich standardmässig folgende Anpassungen vornehmen: die Grösse der Überschrift (h1, h2 etc.), die Farbe der Überschrift und deren Stil (links, rechts, zentriert). Das wars denn auch schon. (Ansicht Frontend).

Möchte man nun den Titel fett haben, benötigen wir noch keine CSS Klasse, den Enfold versteht HTML Tags in seinen Inhaltselementen. Also gehen wir hin und ändern die Überschrift auf fett.

Das geht übrigens auch mit <em> (kursiv), <u> (unterstrichen) usw. Die rote Warnung kann vernachlässigt werden, valider HTML-Code ist zugelassen. Was aber, wenn ich für diese spezielle Überschrift einen anderen Hintergrund haben möchte? Das geht nur mit einer CSS ID oder Klasse und dem zuweisen des eigenen CSS Codes.

Ich möchte also den Hintergrund und die Schriftfarbe genau umgekehrt haben. Wie wir wissen, kann die Schriftfarbe direkt im Inhalt-Element „Überschrift“ geändert werden. Wir müssen also lediglich die Hintergrundfarbe via unserer CSS Klasse zuweisen. Zuerst weisen wir dem Element eine Klasse zu:

Da die IDs und Klassen jeweils eindeutig und einmalig sein müssen, habe ich mir angewöhnt, meine Klassen jeweils mit meinem Kürzel zu beginnen. Achtung: Klassen und IDs werden in den Entwickler Einstellungen OHNE Punkt (.) bzw. Hashtag (#) eingegeben!

Nun gehen wir in die Enfold Theme-Einstellungen -> allgemeines Styling und dort ganz unten auf „Quick CSS“ und geben folgendes ein:

Achtung: Klassen und IDs im Quick CSS Fenster müssen nun mit Punkt (.) bzw. Hashtag (#) angegeben werden.

Das Resultat:

Dieses Vorgehen ist in den meisten Fällen so umsetzbar. Es gibt einige Ausnahmen, auf die ich im Laufe meiner Beiträge noch eingehen werde. Ausserdem werde ich auch darauf eingehen, wie man z.B. auf einzelnen Seiten andere Logos anzeigen lassen kann oder Header und Footer auf bestimmten Seiten farblich anpassen kann, so, wie ich das auf meiner Website auch gemacht habe. Das Zauberwort dafür heisst „.page-id“. Lass Dich überraschen!

Das ist doch allerhand, nicht? Viel Spass beim Ausprobieren!

Zurück zum Blog

 

 

 

 

 

Bereits 0 Mal geteilt! Jetzt teilen...

0 Kommentare

Hinterlasse einen Kommentar

An der Diskussion beteiligen?
Hinterlasse uns deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.