Der Customizer

Permalink Allgemeine Einstellungen

Preloader

Wenn du eine Ladeanimation anzeigen lassen möchtest während die Seite läd, setze das Häkchen bei Preloader aktivieren.

Es stehen dir hier vier verschiedene Animationen zur Verfügung.
Wenn du das Häkchen bei „Vorschau aktivieren“ setzt, kannst du eine Vorschau im Customizer sehen.

Du kannst die verschiedenen Animationen nach deinen Wünschen farblich anpassen indem du die Hintergrundfarbe und Farbe festlegst.

Schriftarten

Hierüber können alle Schriftarten aus der Google Fonts Bibliothek eingebettet und genutzt werden. Im Moment sind ca. 950 verschiedene Schriftarten verfügbar.

Die Schriftart wird lokal auf dem Server installiert und von diesem geladen. Daher ist die Benutzung DSGVO-konform und benötigt keinen zusätzlichen Hinweis in der Datenschutzerklärung.

Du kannst Schriftarten herunterladen, löschen, für Überschriften und Fließtext festlegen, oder auch alle Änderungen wieder rückgängig machen und die Schriftarten auf Standard zurücksetzen.

Social Media

Um Social Media Icons im Header anzeigen zu lassen, setze das Häkchen bei Icons im Menü aktivieren und fülle die entsprechenden Felder für die URL’s aus.

Aktuell werden 29 Netzwerke automatisch an Hand ihrer URL erkannt und das passende Icon dafür angezeigt.

Folgende Netzwerke werden automatisch erkannt:

  • behance.net
  • bitbucket.org
  • codepen.io
  • deviantart.com
  • discord.gg
  • etsy.com
  • facebook.com
  • flickr.com
  • github.com
  • instagram.com
  • kickstarter.com
  • last.fm
  • linkedin.com
  • medium.com
  • patreon.com
  • pinterest.com
  • reddit.com
  • slack.com
  • snapchat.com
  • soundcloud.com
  • spotify.com
  • stackoverflow.com
  • tumblr.com
  • twitch.tv
  • twitter.com
  • vimeo.com
  • wa.me
  • xing.com
  • youtube.com

Wenn du ein Icon für deine Telefonnummer anzeigen lassen möchtest, welches gleich über einen Link verfügt, kannst du dies erreichen indem du tel: gefolgt von deiner Telefonnummer ohne Leerzeichen eingibst.

Willst du ein verlinktes Icon für deine E-Mail Adresse hinzufügen, gibst du mailto: gefolgt von deiner E-Mail Adresse ein.

RSS Feeds erhalten automatisch das korrekte Icon, in so fern sich entweder /feed/ oder /rss/ in der URL befinden.

Beispiele:

<!-- Telefonnummer hinzufügen -->
tel:08001234567

<!-- E-Mail Adresse hinzufügen -->
mailto:support@marketpress.de

<!-- RSS Feed hinzufügen -->
https://deine-domain.de/feed/

 

Du kannst die Reihenfolge der Icons ändern, indem du die URL’s via Drag & Drop nach oben oder unten verschiebst.
Möchtest du weitere Icons hinzufügen, klicke einfach auf den Button Hinzufügen.

Auch der Icon-Stil kann angepasst werden. Es stehen zwei Varianten zur Auswahl.

Die Icon-Farbe kannst du ändern indem du auf Farbe auswählen klickst und deine Wunschfarbe auswählst.

Möchtest du die Ausgabe der Icons darüber hinaus anpassen, so stellen wir dazu die Filter atomion_social_icons und atomion_social_icons_list zur Verfügung. Nähere Angaben dazu findest du in der Sektion Actions und Filter.

Du kannst Teilen-Buttons auf den Produktseiten und Beitragsseiten aktivieren oder deaktivieren indem du für die gewünschten Plattformen ein Häkchen setzt oder es entfernst.

Breadcrumb

Es besteht die Möglichkeit die Breadcrumb seitenweit komplett zu deaktivieren.

Standardmäßig wird für den ersten Punkt der Breadcrumb der Seitentitel der WordPress-Installation verwendet.
Du kannst stattdessen auch einen selbst definierten Text ausgeben lassen oder du wählst eines von fünf zur Verfügung stehenden Icons aus, welches dann an dieser Stelle angezeigt werden soll.

Auch das Trennzeichen kann geändert werden. Wähle hierzu einfach eines von fünf zur Verfügung stehenden Icons aus.

Weiterhin stehen drei Optionen für die Schriftgröße der Breadcrumb zur Verfügung, sowie Einstellungen zur Texttransformation (Großbuchstaben / Kleinbuchstaben / normal).

Außerdem besteht die Möglichkeit die Startseiten-URL, sowie das Home-Icon und das Trennzeichen-Icon individuell via Filter zu modifizieren. Siehe Actions und Filter.

Zusätzliche Einstellungen

Standardmäßig fügt Atomion allen Seitenüberschriften einen Unterstrich hinzu. Möchtest du dies nicht, kannst du dies hier deaktivieren.

Performance / Technik
Die dynamischen Stile aus den Einstellungen im Customizer, werden standardmäßig minifiziert als Datei (admin-ajax) geladen. Du kannst die Stile stattdessen auch inline im <head>-Bereich ausgeben lassen, indem du die Option „Dynamisches CSS inline ausgeben“ aktivierst. Bei manchen Servern kann dies die Ladezeit verbessern.

Permalink Header-Optionen

Logo

Logo
Hier kannst du ein Bild aus der Mediathek auswählen welches also Logo im Header angezeigt wird.

Die Bild-Container-Breite legt die Anzeige-Größe des Logos fest.
Bei Innenabstand des Logos kannst du den Abstand vom Logo zum Header ringsherum festlegen.

Favicon
Hier kannst du das Favicon für deine Seite auswählen, es wird im Browsertab erscheinen.

Top Bar

Du kannst hier eine Top Bar aktivieren, die oberhalb des Logos und der Navigation angezeigt wird. Du hast die Möglichkeit die Hintergrund- und Textfarbe einzustellen und bis zu drei Spalten anzulegen. Jeder dieser Spalten kannst du Inhalte zuweisen: entweder ein Menü welches der Menüposition „Top Bar“ zugewiesen wurde, die Social Media Icons, eigenes HTML (inkl. Shortcodes) oder Laufschrift. Du kannst außerdem die Ausrichtung jeder Spalte bestimmen, sowie die Laufschriftgeschwindigkeit festlegen.

Main Header

Layout
Insgesamt stehen vier verschiedene Layouts für den Header zur Verfügung (Logo links, Logo rechts, Logo oben, Logo mittig).

Zusätzlich kannst du hier die Header-Breite auf die Breite des Inhalts begrenzen, wenn du „Inhaltsbreite“ auswählst.
Das heißt, das Logo, die Navigation, die Social Media Icons etc. sind links und rechts am Inhalt ausgerichtet.
Standardmäßig wird der Header in voller Breite angezeigt.

Auch die Höhe des Headers kann angepasst werden, beachte bitte das der Header mindestens so hoch sein sollte wie dein Logo.

Außerdem kannst du hier die Hintergrundfarbe des Headers festlegen und einen Schlagschatten aktivieren.

Möchtest du den Hintergrund des Headers transparent anzeigen lassen, steht dir hierfür ein Schieberegler zur Verfügung. Bitte beachte, dass die Einstellungen zur Transparenz nur auf Seiten wirksam werden, bei welchen die Option „Transparenter Header“ aktiviert wurde. Diese platziert den Header auf dem Seiteninhalt.
Die entsprechende Option findest du in der Bearbeitungsansicht der entsprechenden Seite, rechts in der Sidebar in der Sektion „Dokument“.

Navigation
Lege hier den Abstand der einzelnen Menüpunkte links und rechts zueinander fest (S, M, L), passe die Schriftgröße der Menüpunkte an (Standard, S, M, L), stelle den Abstand zwischen den einzelnen Buchstaben der Menüpunkte ein (0 bis 5 Pixel) und wähle die Transformation der Buchstaben aus (keine, Großbuchstaben, Kleinbuchstaben).

Wähle aus acht verschiedenen Hover-Effekten und lege die Highlight-Farbe des Effektes fest, um dein Menü ganz nach deinen Wünschen zu gestalten.

Lege die Schriftfarbe des aktiven Menüpunktes sowie der inaktiven Menüpunkte und der Headerelemente fest.

Die Farbeinstellungen kannst du auch separat für das mobile Menü vornehmen.

Sticky Header

Wenn der Header mitscrollen und immer sichtbar sein soll, setze hier das Häkchen bei Sticky bei Scroll.

Du kannst wenn gewünscht hier ein anderes Logo festlegen als im normalen Header, wählst du kein anderes Logo aus wird das des normalen Headers verwendet.

Auch hier kannst du wieder festlegen wie hoch der Header sein soll, wie breit das Logo angezeigt wird und welchen Innenabstand das Logo zum Header haben soll.

Diese Einstellungen betreffen hier nur den Sticky Header, der normale Header bleibt davon unberührt.

Sub-Menü

Hier wählst du den Sub-Menü Typ aus. Du hast die Wahl zwischen einem ganz klassischen Dropdown Menü (Einfaches Menü) oder unserem Mega Menü.

Wenn du ein Menü mit Unterpunkten angelegt hast, kannst du hier die Hintergrundfarbe des Submenüs und die Schriftfarbe der Submenü-Punkte festlegen.

Außerdem kannst du hier auswählen, ob die Bilder für das Mega Menü aus den Produktkategorien oder aus den Menüeinstellungen verwendet werden sollen.

Suche

Wenn im Header ein Such-Icon erscheinen soll kannst du es aktivieren indem du hier das Häkchen bei Suche aktivieren setzt.

Bei „Suchmethode“ stellst du ein, ob die WooCommerce-Suche oder die WordPress-Suche verwendet werden soll.
Hast du das Plugin „Ajax Search for WooCommerce“ installiert, kannst du hier auch dieses als Suchmethode auswählen.

Du kannst außerdem auswählen ob die Suche als Dropdown dargestellt werden soll oder als Fullscreen-Lightbox.

Wenn du Dropdown als Stil wählst kannst du hier ebenfalls festlegen wie breit das Suchfeld sein soll.

Die Felder Text 1 und Text 2 erscheinen wenn du Lightbox als Stil ausgewählt hast unter dem Suchfeld.

Wenn du möchtest kannst du auch einen Platzhalter-Text für die Suche eintragen, dieser erscheint bei beiden Stilen.

Account

Wenn du im Header ein Account-Icon anzeigen lassen möchtest, kannst du die dieses hier aktivieren. Dabei stehen dir vier verschiedene Icons zur Auswahl.

Außerdem kannst du einstellen ob sich der Login-Dialog in einer Lightbox öffnen soll, und ob der User nach erfolgreichem Login zur Mein Konto Seite weitergeleitet werden soll.

Du hast auch die Möglichkeit, dem User anhand eines Häkchens neben dem User-Icon anzuzeigen, ob er eingeloggt ist oder nicht.

Außerdem kann ein Dropdown-Menü angezeigt werden, inklusive Kundenansprache und Logout-Link.

Bestimme selbst die Hintergrundfarbe, Schriftfarbe und Trennerfarbe des Dropdowns.

Dem Menü können beliebige Links hinzugefügt werden. Erstelle einfach ein neues Menü und weise diesem die Menüposition „Mein Konto“ zu.

Weitere Optionen zur Kundenansprache findest du unter Design -> Customizer -> WooCommerce -> Mein Konto. Dort kannst du auswählen ob der Benutzername, der Vorname oder der Vor- und Nachname angezeigt werden soll.

Permalink Blog

Wähle hier aus ob die Sidebar auf Blogarchiven rechts oder links angezeigt werden soll.

Um im Blog auf Übersichts- und Kategorieseiten einen weiterlesen-Link anzeigen zu lassen, aktiviere hier die Option „Weiterlesen-Link aktivieren“.
Standarmäßig wird der Link dann mit dem Linktext „weiterlesen“ ausgegeben. Möchtest du stattdessen einen anderen Linktext, trage diesen bei „Alternativer Weiterlesen-Linktext“ ein.

Du kannst hier festlegen ob das Beitragsbild auf Beitragsseiten so breit wie der Artikel (normal) oder so breit wie das Browserfenster (volle Breite) angezeigt werden soll, standardmäßig wird es so breit wie der Artikel angezeigt.

Wenn du das Häkchen bei Lesestatus-Leiste aktivieren setzt, wird auf den Beitragsseiten oben eine Leiste ausgegeben die den Lesefortschritt wiederspiegelt.

Außerdem kannst du hier die Untertitel für Bildergalerien aktivieren oder deaktivieren.

Standardmäßig wird unter dem Seiteninhalt eine Sektion mit einem „zurück nach oben“-Link angezeigt. Wenn du das nicht möchtest, kannst du dies hier deaktivieren.

Footer Top/Main Footer

Wenn du in den Widgetbereichen Footer Top und/oder Footer Main Inhalte hinzugefügt hast, kannst du hier die Text- und Hintergrundfarben festlegen.

Footer Bottom

Wenn du unterhalb der beiden eben genannten Bereiche zusätzlich noch den Widgetbereich Footer Bottom anzeigen lassen möchtest, setze hier das Häkchen bei Footer Bottom aktivieren.

Dir steht die Möglichkeit zur Verfügung, den Footer Bottom entweder in voller Breite oder in Inhaltsbreite anzeigen zu lassen.

Du kannst hier wenn gewünscht ein Logo auswählen was nur im Footer angezeigt wird,
außerdem kannst du zum Beispiel deine Copyright-Informationen bei Benutzerdefinierter Text eintragen.

Wie bei den beiden anderen Widgetbereichen kannst du auch für Footer Bottom die Text- und Hintergrundfarbe einstellen.

Social Icons

Wenn du in einem Footer Widgetbereich das Social Media Widget platziert hast, (und unter Customizer → Allgemeine Einstellungen → Social Media die entsprechenden Links angelegt hast) kannst du hier die Farbe und Hintergrundfarbe für die Icons festlegen.

Permalink Farben

Du kannst hier die Hintergrundfarbe für deine Seite festlegen.
Die Farbe für Buttons, Links und andere Highlights legst du bei Hauptfarbe fest, außerdem kannst du noch die Farbe für Überschriften und normalen Text anpassen, sowie die Farben für Erfolgsmeldungen (z.B. Produkt XY wurde deinem Warenkorb hinzugefügt) und Warnhinweise (z.B. XYZ ist ein Pflichtfeld) ändern.

Permalink WooCommerce

Shop-Mitteilung

Seit Version 1.1.4 kannst du hier die Hintergrund- und Textfarbe der Shop-Mitteilung einstellen.

Produktbilder

Sollten deine Produktbilder unscharf dargestellt werden, kannst du hier die Breite für das Hauptbild und die Vorschaubilder ändern.

Produktkatalog

Hero Bild auf Kategorien/Shop-Seite aktivieren
Zusätzlich zu den normalen WooCommerce-Einstellungen kannst du hier die Anzeige von Hero-Bildern auf Produktkategorie-Seiten und der Shopseite aktivieren. Diese werden dann unterhalb der Navigation, über dem normalen Seiteninhalt angezeigt.

Kategorie/Shop Hero Bildgröße
Du hast außerdem die Wahl diese Hero-Bilder entweder so breit wie den Inhalt (Normal) oder über die komplette Breite (Volle Breite) anzeigen zu lassen.

Shop-Seite Hero Bild
Das Hero-Bild für die Shopseite legst du direkt hier im Customizer fest. Die Hero-Bilder für die Produktkategorie-Seiten kannst du jeweils im Backend unter Produkte -> Kategorien -> deine Kategorie bei „Hero Bild“ festlegen.

Shop-Seite Beschreibung
Du hast nun auch zusätzlich die Möglichkeit einen Beschreibungstext auf der Shopseite anzeigen zu lassen. Diesen trägst du hier im Customizer ein.
Die Kategorie-Beschreibungen findest du wie gewohnt in deinem Backend unter Produkte -> Kategorien -> deine Kategorie bei „Beschreibung“.

Kategorie/Shop Beschreibung Position und Farbe
Neu hinzugekommen ist für dich nun noch die Möglichkeit im Customizer einzustellen ob die Beschreibungstexte oberhalb oder unterhalb der Produkte angezeigt werden sollen und die Auswahl der Textfarbe der Beschreibung.

Bei Produkte je Spalte mobil (<767px) kannst du festlegen wie viele Spalten mobil angezeigt werden sollen.

Außerdem hast du die Möglichkeit bei Sidebar Position die Sidebar auf Produktarchiven entweder links oder rechts ausgeben zu lassen.

Wenn du den Text für das Angebots-Label ändern möchtest, kannst du dies tun indem du deinen Wunschtext bei Text für Sale-Bubble einträgst.

Willst du stattdessen lieber die Ersparnis in Prozent anzeigen lassen, setze das Häkchen bei der Option Rabatt in % statt mit „Sale!“ angeben.

Möchtest du den Warenkorb-Button der erscheint wenn du über ein Produktbild hoverst ausblenden, dann entferne dazu das Häkchen bei der Option Warenkorb-Button für Produkte aktivieren.

Atomion fügt den Produktbildern auf Produktarchiven automatisch eine Animation hinzu welche du siehst wenn du mit der Maus über ein Produktbild fährst.
Möchtest du diese Animation umkehren oder ganz deaktivieren kannst du das hier tun indem du das Häkchen bei der jeweiligen Option setzt.

Schnellansicht
Bei Aktivierung dieser Option wird bei Produkt-Auflistungen (Übersichtsseiten, Produkt-Blöcken, Querverkäufen, Zusatzverkäufen, Ähnlichen Produkten) ein Schnellansicht-Button unter jedem Produktbild angezeigt.

Bei Klick auf den Button wird ein Overlay geöffnet welches Produktinformationen enthält und einen schnellen Wechsel zwischen den Produkten ermöglicht.

Die Variante der vorheriges / nächstes Produkt Navigation, der Button Stil, der Hover Effekt und die Farben können angepasst werden.

Produkt-Seite

Du kannst hier bei der Option „Produkt-Tabs Stil“ den Stil festlegen, in welchem die Produkt-Tabs (z.B. Beschreibung, Zusätzliche Informationen, Bewertungen) auf der Produktseite dargestellt werden sollen.
Du hast die Wahl zwischen den Optionen:

  • Sektionen – die Tabs werden untereinander angezeigt, alle Tabs sind immer sichtbar
  • Tabs – die Tabs werden nebeneinander angezeigt, Ausrichtung links, nur der jeweils gewählte Tab ist sichtbar
  • Tabs zentriert – die Tabs werden nebeneinander angezeigt, Ausrichtung mittig, nur der jeweils gewählte Tab ist sichtbar
  • Akkordeon – die Tabs werden untereinander angezeigt, nur die jeweils geöffneten Tabs sind sichtbar

Außerdem kannst du hier in der Sektion „Farben“ die Farbe für den In den Warenkorb-Button und die Bewertungssterne auf den Produkteinzelseiten festlegen.

Die Farbe für das Angebotslabel bei der Option Sales-Bubble greift sowohl auf Produktarchiven als auch auf den Produkteinzelseiten.

Über die Option „Stil“ kannst du sowohl die Darstellung der Zusatzverkäufe (up sells), als auch der Ähnlichen Produkte (related products) beeinflussen.
Du kannst diese jeweils entweder als Slider oder als Grid anzeigen lassen. Wählst du die Option „Grid“, kannst du außerdem festlegen, wie viele Spalten erscheinen sollen (1-5).
Ähnliche Optionen für die Querverkäufe (cross sells) findest du im Customizer unter WooCommerce -> Warenkorb.

Mein Konto

Hier hast du optional die Möglichkeit die Tabs Downloads, Adressen und Kontodetails, sowie das Logo auf der Mein Konto Seite auszublenden.

Bei „Kundenansprache“ kannst du auswählen ob der Benutzername, der Vorname oder der Vor- und Nachname im Account Menü angezeigt werden soll.

Weitere Einstellungen für den Account-Bereich im Header findest du unter Design -> Customizer -> Header -> Account.

Warenkorb

Mini-Warenkorb
Möchtest du den Warenkorb-Inhalt beim Überfahren mit der Maus anzeigen lassen, wähle bei Stil die Option Dropdown aus. Sollen deine Kunden stattdessen direkt zum Warenkorb weitergeleitet werden wenn auf das Icon geklickt wird, wähle den Stil Link aus.

Du kannst hier unabhängig von deinen Farbeinstellungen vom Header die Hintergrundfarbe sowie die Icon-Farbe für den Warenkorb festlegen. Und zwar sowohl für den leeren als auch den gefüllten Warenkorb einzeln. Außerdem kannst du die verschiedenen Farben auch für die mobile Ansicht extra anpassen.

Hast du den Stil Dropdown gewählt kannst du auch für den Mini-Warenkorb der beim Überfahren mit der Maus erscheint noch die Farben für den Hintergrund, den Text und die Icon- und Trennerfarben festlegen.

Möchtest du im Mini-Warenkorb die Steuerangaben anzeigen lassen setze das Häkchen bei der Option Steuerangaben im Mini-Warenkorb anzeigen.

Warenkorb-Seite
Durch Aktivieren der Bestellfortschrittsanzeige, wird diese während des Bestellprozesses angezeigt.
Es stehen drei Varianten zur Auswahl.
Welche Bezeichnungen verwendet werden, kann einfach mit dem jeweiligen Seitentitel festgelegt werden.

In der Sektion Querverkäufe bei der Option Stil kannst du die Darstellung der Querverkäufe (cross sells) auf der Warenkorb-Seite beeinflussen.
Du kannst diese entweder als Slider oder als Grid anzeigen lassen. Wählst du die Option „Grid“, kannst du außerdem festlegen, wie viele Spalten erscheinen sollen (1-5).
Ähnliche Optionen für die Zusatzverkäufe (up sells) und die Ähnlichen Produkte (related products) findest du im Customizer unter WooCommerce -> Produkt-Seite.

Wunschliste

Möchtest du registrierten und eingeloggten Benutzern eine Wunschliste zur Verfügung stellen, setze hier das Häkchen bei der Option Wunschliste aktivieren. Im Header und auf jeder Produkteinzelseite wird nun ein Herz-Icon angezeigt.

Die Farbe für das Icon auf den Produkteinzelseiten kannst du hier ebenfalls festlegen.

Klickt ein Benutzer auf das Herz-Icon auf einer Produkteinzelseite wird das entsprechende Produkt seiner Wunschliste hinzugefügt.

Bewertungen

In Atomion werden Bewertungssterne standardmäßig nur auf den Produkteinzelseiten und in Widgets angezeigt.
Sollen die Bewertungssterne auch auf Übersichtsseiten und in Produktblöcken angezeigt werden, kannst du hier die Option „Bewertungssterne auf Übersichtsseiten und in Blöcken anzeigen“ aktivieren.

Wenn bei dir Bewertungen zwar allgemein aktiviert sind, du aber bei einzelnen Produkten die Bewertungen deaktiviert hast, blendet WooCommerce standardmäßig nur das Bewertungsformular aus. Bereits abgegebene Sternewertungen werden dennoch weiterhin angezeigt.
Möchtest du dies nicht, kannst du die Option „Bewertungssterne überall ausblenden“ aktivieren.

Permalink Zusätzliches JS

Hier kannst du eigenes Javascript einfügen, welches dann entweder im Header oder Footer deiner Seite ausgegeben wird.