beQualifed Preloader

Dokumentation der beQualified Website.

Diese Dokumentation beinhaltet alle Inhalte der Website und wo diese anzufinden sind.

§1 Navigation

Die Navigation und die Dropdown Funktion basiert auf der kostenfreien Version des Max Mega Menus. Da in der kostenfreien Version kein Logo enthalten ist, wird dieses per jQuery geladen. Der Quellcode hierzu befindet sich in der bequalified-navigation.js, welche in der functions.php hinterlegt ist. Stylings befinden sich in der Datei bequalified-navigation.css.

Die Hauptnavigation kann ganz normal über Design > Menüs bearbeitet werden. Auch die Navigation, welche sich darüber befindet und hier Top-Nav heißt, kann dort bearbeitet werden. Das Austauschen von Elementen ist nicht grundsätzlich möglich, da diese mit individuellen Stylings verbunden sind.

Submenus

Submenus sind als Toolset Widgets im jeweiligen Submenu definiert. D.h. um ein submenu zu verändern muss das jeweilige Submenu aus den Menus ausgewählt werden. Alle Menus befinden sich unter Design > Menüs und dann im oberen Dropdown nach dem Text Wähle ein Menü zum Bearbeiten:.

§2 Quick-Nav Widget

Bearbeiten des Inhalts

Der Inhalt des Widgets wird über den Custom Post Type Quick Nav Widgets eingepflegt. Dort befindet sich ein Objekt namens beQualified, welches als privat eingestellt ist. In diesem Objekt können folgende Punkte bearbeitet werden:

  • Headline Der Titel des Tabs, welche ganz oben angezeigt wird und den Icons ihren Alternativ-Text gibt.
  • Headline-Icon Dieses Icon wird auf der rechten Seite, sowie links neben der Headline des Tabs angezeigt.
  • MenuTitel 1-3 Diese definieren der Reihenfolge nach, von links nach rechts, die Titel der Tabs.
  • Objekt 1-6 Produktbild Diese definieren die Bilder der Produkte.
  • Objekt 1-6 Name Diese definieren die Namen der Produkte.
  • Objekt 1-6 Beschreibung Diese definieren die Beschreibungen der Produkte.
  • Objekt 1-6 Preis Diese definieren die Preise der Produkte.
  • Objekt 1-6 Zusatz Hier werden die zusätzlich anfallenden Kosten ausgewählt.

Technische Details zum Widget

Das Widget wird im Footer gerufen. Der Einfachheit halber ist dieses unter Toolset > Layouts visuell eingefügt. Es befindet sich in den Header and Footer-Bereichen.
An dieser Stelle wird der Shortcode [ wpv-view name="bequalified-quick-nav-widget" ] gerufen. Dieser ist wiederrum unter Toolset > Views definiert. Hier befindet sich die HTML Struktur.
Die Beitragsfelder, welche die Verbindung zum Custom Post Type schaffen sind unter Toolset > Beitragsfelder definiert.
Das CSS und JS befindet sich in den Dateien bequalifed-widget-quicknav.css und bequalifed-widget-quicknav.css, welche wiederrum in der functions.php hinterlegt sind.

§3 Cache

Der Cache wird über das kostenpflichtige Plugin WP Rocket gemanaged.
Dieses befindet sich, für angemeldete Nutzer immer in der Admin Leiste ganz oben. Über die Punkte Cache leeren wird der Cache gelehrt. Für gewöhnlich sollte diese Option sowie das Löschen des eigenen Browser Caches reichen. Sollte dennoch etwas nicht richtig angezeigt werden, kann zusätzlich noch die Option OPcache leeren genutzt werden.

§4 Preloader

Der Preloader, welcher beim Laden jeder Seite erscheint ist in der header.php im < html > tag als class="bq-preloader" definiert.
Alle weiteren Funktionen und Stylings befinden sich in den Dateien bequalified-preloader.css und bequalified-preloader.js, welche wiederrum in der functions.php definiert sind.

§5 Backups und Updates

Backups

Backups können über das Plugin All-in-One WP Migration gemacht werden.
Es sollte so oft wie möglich ein Backup gemacht werden, besonders bevor und nachdem Änderungen vorgenommen wurden.

Updates

Sofern Updates zur Verfügung stehen, befinden sich diese im Dashboard unter Dashboard > Aktuallisierungen. Grundsätzlich kann können Updates immer ausgeführt werden, jedoch kann es unter Umständen zu Kompatiblitätsproblemen kommen. Die Plugins Toolset Types, Toolset Views und Toolset Layous können nicht aktuallisiert werden. Dies hat den Grund, dass die neuste Version nicht mehr die genutzten Funktionen unterstützt. Zur Sicherheit wurde der Aktivierungsschlüssel entfernt. Dadurch ist ein versehentliches Update nicht mehr möglich.

§6 Formulare

Hubspot Formulare

Hubspot Formulare werden per JS importiert. Hierzu muss man sich in den offiziellen beQualified Hubspot Account einloggen und unter dem Menüpunkt Marketing > Lead-Erfassung > Formulare ein Formular auswählen oder neu erstellen.
Das Formular anschließend per Veröffentlichen > Code einbetten ausgeben. Den Code per Copy & Paste an der Stelle, wo das Formular angezeigt werden soll, eintragen.

Styling von Hubspot Formularen

Die Hubspot Formulare werden per iFrame eingebunden, daher ist die Bearbeitung nur über das Hubspot Backend möglich. Eine genau Anleitung dazu befindet sich hier: Anleitung Formulare anpassen

Formulare jetzt per Gravity Forms eingebunden.

MaiChimp Formulare

Die HTML Struktur für Mailchimp Formulare befindet sich im WordPress Backend auf der Linken Seite unter Mailchimp for WP > Formulare. Das Styling der Formulare bfindet sich in der style.css Datei.

§8 Bildgrößen

  • 768px Breite für Bilder, welche nur mobil auf die volle Viewport-Breite gestreckt werden.
  • 992px Breite für Bilder, welche den halben Viewport abdeckt und bei einem Umbruch auf die volle Breite gestreckt werden.
  • 1200px Breite für Bilder in der vollen Content-Breite.
  • 1170px Breite für Bilder, welche mit der Sidebar auf die volle Breite gestreckt werden. (z.B. Blogposts)
  • 1920px Breite für Bilder, welche den gesammten Viewport einnehmen.

Contact the Crew.

Ihre digitale Zukunft beginnt genau jetzt. Gerne berät Sie ein Mitarbeiter von beQualified umfangreich zu Ihren Bedürfnissen.