Wie du mithilfe von Atomion und dem Gutenberg Editor dein eigenes Layout umsetzen kannst, das zeige ich dir heute Schritt für Schritt an einem Beispiel-Layout.
Natürlich benötigt jedes Layout andere Anpassungen, dennoch hoffe ich, dir mit meinem Beitrag ein bisschen Inspiration geben zu können.
Inhaltsverzeichnis
Atomion installieren
Dein WooCommerce Theme für alle Fälle
Bringe deinen Online-Shop auf das nächste Level.
Wecke die Emotionen deiner Kunden – mit Atomion.
Die Installation des Themes erfolgt durch Hochladen der dazugehörigen ZIP-Datei. Direkt danach kannst du deinen Lizenzschlüssel eingeben und die dazugehörigen Plugins sowie das Demo-Material, installieren.
Eine detaillierte Beschreibung findest du zudem hier.
Unter “Design -> Neuerungen in Atomion” findest du außerdem eine kleine Übersicht der letzten Features. Alle Neuheiten sind hier kurz erklärt und per Link gelangst du direkt dorthin, wo du diese anpassen und ausprobieren kannst.
Atomion anpassen
Du kannst dein Design mit Atomion ganz ohne Entwicklerkenntnisse individuell anpassen. Dafür stehen dir im Customizer über 160 Optionen zur Verfügung. Unter “Allgemeine Einstellungen” habe ich für mein Layout die Farben und den Stil des Preloaders eingestellt, die Social-Media-Kanäle festgelegt, sowie entschieden, dass meine Headings keine Trennlinie bekommen sollen. Besonders für Online-Shops wichtig ist die Funktion der Breadcrumbs. Damit kannst du deinen Nutzern das Navigieren auf umfassenderen Seiten erleichtern.
Schriftarten
Mit Atomion kannst du für deine Überschriften und deinen Fließtext je eine Schriftart festlegen. Dafür kannst du auf Schriftarten aus der gesamten Google Fonts Bibliothek zugreifen. Positiv hierbei ist, dass die so ausgewählten Schriftarten heruntergeladen und lokal auf deinem Server gespeichert werden. Die Einbindung ist also vollkommen DSGVO-konform. Wer Google Fonts stattdessen dynamisch einbindet, läuft Gefahr abgemahnt zu werden. Mehr Informationen dazu findest du auch hier:
https://marketpress.de/google-fonts/
SVG integrieren
Das Logo habe ich als SVG eingebunden. Da WordPress von Haus aus, aus Sicherheitsgründen keine SVG-Dateien unterstützt, habe ich dafür das Plugin SVG Support verwendet.
Nach dessen Installation kannst du SVG´s genauso wie deine anderen Medien über die Medienbibliothek hochladen und verwenden.
Header
In den Header Einstellungen kann das zuvor hochgeladene Logo dann integriert werden. Unter “Design -> Customizer -> Header” findest du verschiedenste Einstellungen zu den Navigationen. Unter anderem kannst du hier auch eine Top Bar aktivieren. Für diese stehen dir bis zu drei Spalten zur Verfügung, in welchen du entweder ein zusätzliches Menü, die Social-Media-Links, einen Lauftext oder auch eigenes HTML anzeigen lassen kannst. Ich habe mich für eine Spalte entschieden und diese mit den Social-Media-Icons versehen. Für mein Layout habe ich die Position der Spalte außerdem auf “zentriert” gesetzt.
Beim Austauschen des Logos ist es wichtig, darauf zu achten, dass die Höhe des Logos nicht größer eingestellt ist, als die des Headers. Ist dem so, kann das zu Problemen in der Benutzung des Menüs führen. Vor allem, wenn man von dem standardmäßig rechteckigem zu einem viereckigen Logo wechselt.
Um dies auszugleichen, kannst du entweder die Höhe des Logos oder des Headers entsprechend anpassen.
Eine ausführliches Tutorial findest du auch hier.
Nachdem ich mich für das klassische Layout Model für die Navigation entschieden habe, galt es noch einen Hover Effekt für das Menü auszuwählen. Hiervon gibt es acht verschiedene, die in der von mir gewählten Farbe eingesetzt werden.
Für den Hero-Bereich habe ich das Plugin “Ultimate Addons for Gutenberg” installiert. Nun kannst du dir mit dem Gutenberg-Editor aus einer Reihe vordefinierter Design-Schnipsel das Grundgerüst deiner Webseite zusammenbasteln.
Ich habe mich für einen simplen Hero-Bereich mit zwei Headings und einem Call-To-Action entschieden. Den Rahmen sowie die Abstände und den Gradient für den Button habe ich durch das Hinzufügen von CSS-Klassen erstellt. Per Default werden die Buttons in den ausgesuchten Primärfarben angezeigt. Wenn du den Button anpasst, vergiss nicht auch den Hover-Effekt mit anzupassen.
Zum Erstellen des Gradients, habe ich diese Webseite verwendet.
Alle diese Schritte sind optional, du kannst natürlich auch ohne ein zusätzliches Plugin, nur mit Gutenberg ein schönes Layout umsetzen.
Farben
Die meisten Themes, und so auch Atomion, geben dir die Möglichkeit, deine eigenen Farben festzulegen. Dadurch wird das Erweitern deiner Seite extrem vereinfacht. So hatten alle meine Buttons schon das Gelb des Logos übernommen. Zur Darstellung der Produkte habe ich einen WooCommerce Block von Atomion verwendet. Hier sind schon Hover-Effekte vorprogrammiert. Du hast zudem die Möglichkeit zu entscheiden, welche Produkte du anzeigen möchtest.
Auch die Hintergrundfarbe der Website kannst du im Customizer unter “Farben” einstellen. Ich habe mich jedoch stattdessen für ein Muster entschieden, welches ich als Hintergrundbild per CSS integriert habe.
Inhaltsbereich anpassen
Atomion lässt sich sehr gut mit Gutenberg verwenden. Somit lassen sich deine Seiten problemlos im Gutenberg Editor füllen. Das Theme stellt dazu auch eigene Blöcke zur Verfügung. Mehr zu ihren Funktionen findest du hier.
Eine gute Auswahl an Seiten-Templates oder Design-Schnipseln bieten Plugins, wie zum Beispiel Spectra (vorher Gutenberg Ultimate Addons). Damit kannst du dir anhand deines Designs Seitenabschnitte vorbereiten und diese dann entsprechend anpassen.
Das Theme liefert dir zudem Template-Seiten, an welchen du dich orientieren kannst.
WooCommerce
Für e-Commerce Stores ist WooCommerce nach wie vor eines der meist verwendeten Plugins. In Deutschland gibt es dazu außerdem den Zusatz German Market. Damit lässt sich dein Shop einfach mit den lokalen rechtlichen Grundlagen in Einklang bringen.
Da Atomion aus dem selben Hause stammt, wie German Market und direkt für WooCommerce konzipiert wurde, lässt es sich mit beiden gut kombinieren und verwenden. Auch hier findest du einmal Blöcke innerhalb des Gutenberg Editors, sowie generelle Einstellungen im Customizer.
Neben Einstellungen zum Anzeigen der Produkte und Produktbilder, gibt es hier unter anderem die Möglichkeit deine WooCommerce-Seiten individuell anzupassen. So kannst du zum Beispiel auf deinen Produkt- und Shopseiten einen Hero Header integrieren. Auch den Hover Effekt kannst du anpassen oder sogar ausschalten sowie eine “Quick View” (Schnellansicht der Produkte) aktivieren. Dabei wird deinem Besucher das Produkt als Übersicht in einem Pop-up Fenster angezeigt, ohne dass die Seite verlassen werden muss.
Bilder
Mithilfe der verschiedenen Gutenberg Blocks lassen sich natürlich auch Bilder im Inhaltsbereich der Seite platzieren. Um Bilder zu erzeugen, die sich über die gesamte Seite strecken, kannst du auch hier “Hero-Bilder” einsetzen. Dafür eignet sich der theme-eigene Hero Slider Block.
Um nur ein einzelnes Bild anzuzeigen, lassen sich die anderen beiden Slider ausschalten. Dein Bild kann nun per URL in den Block Einstellungen integriert werden. Lässt du hier deine Headings sowie den Call-To-Action leer, dann erscheinen sie auch nicht auf der Live Seite. Mithilfe von etwas CSS kannst du deinem Bild eine Art “Parallax Effekt” geben, indem du einstellst, dass es beim Scrollen stehen bleiben soll.
Abgesehen davon lassen sich Bilder so wie wir es vom Gutenberg Editor gewohnt sind, integrieren. In meinem Layout wollte ich einen Effekt erzielen, indem die Bilder in den Hintergrund übergehen. Dafür musste ich ein wenig CSS integrieren.
Im unteren Beispiel habe ich zwei Spalten ineinander verschachtelt. Dem äußeren habe ich zwei gleiche Hintergrundbilder gegeben und diese mit den Eigenschaften “background-size” und “background-position” einmal links oben und einmal rechts unten platziert.
Der innere Container hat nun ein Hintergrundbild bekommen, das sich mit Hilfe von “background-size: cover” über seine gesamte Breite von 60% und einer Höhe von 500px erstreckt.
Um den ausgewaschenen Rahmen zu setzen, habe ich eine Maske erzeugt und diese im CSS angewendet. Weiche Übergänge kannst du entweder durch Bilder mit Transparenzen oder durch Gradients erzielen. Bei Masken solltest du den Präfix für Chrome und Safari nicht vergessen. Eine genaue Anleitung dazu findest du hier.
Footer
Das Theme stellt dir drei Footerbereiche zur Verfügung, die du individuell gestalten kannst.
Ein “Back To Top”-Button erleichtert deinen Webseiten Besuchern das Zurückscrollen zum Beginn der Seite. Dieser kann aber mit einem Klick auch deaktiviert werden.
Atomion macht es seinen Nutzern leicht, die voreingestellten Copyrights an seine Bedürfnisse anzupassen.
Auch Menüs lassen sich hier integrieren. Minimalistisch habe ich mich lediglich für die rechtlichen Infos entschieden.
Auch ein anderes Logo kann hier integriert werden, das ist vor allem dann nützlich, wenn der Kontrast in deinem Footer ein anderer ist, als der im Header.
Wem die Einstellung der Schrift und Hintergrundfarbe nicht ausreicht, der kann unter “Widgets” Inhalte hinzufügen. Dieser Bereich funktioniert wie das gewohnte Interface des Gutenberg Editors.
Weiteres kannst du danach, wie in meinem Beispiel, mit CSS lösen. So habe ich meine Hintergrundbilder eingefügt und die zuvor festgelegten Inhalte mit CSS positioniert.
Eigenes CSS
Wenn gewünscht, kannst du mit Hilfe von ein paar Zeilen eigenem CSS deine Layouts schnell noch individueller gestalten.
Dieses kannst du ganz unkompliziert unter “Design -> Customizer -> Zusätzliches CSS” einfügen.
Solltest du darüber hinaus die PHP-Dateien des Themes anpassen wollen, so solltest du mit einem Child-Theme arbeiten, damit deine Änderungen bei einem Update nicht verloren gehen. Wenn du sehr viele CSS Anpassungen vornimmst, kannst du diese natürlich auch im Child-Theme hinterlegen. So bleibt alles übersichtlich an einem Ort und kann bei einem eventuellen Seitenumzug schnell mitgenommen werden. Ein entsprechendes Child-Theme kannst du dir in deinem User-Dashboard herunterladen.
Wenn du auf den Geschmack gekommen bist und Atomion am liebsten direkt ausprobieren möchtest:
Dein WooCommerce Theme für alle Fälle
Bringe deinen Online-Shop auf das nächste Level.
Wecke die Emotionen deiner Kunden – mit Atomion.
