..oder: wie man google Maps dank Fusion Builder farblich an AVADA und andere Themes anpassen kann..
Man kennt das ja: man hat in stundenlangem tüfteln seinem Theme die passenden Farben spendiert, bindet auf dem Kontaktformular eine google Map mit den Standorten und den dort ansässigen Ansprechpartnern ein – und dann passt die google Map farblich so gar nicht zum Design des Blogs. Aber welcher Besucher möchte schon gern auf einem langweiligem Kontaktformular landen, welches weder stylisch noch textlich zum Rest des Blogs passt?
Ein Beispiel wie es richtig gut aussehen kann ist hier:
Klar hat nicht jedes WordPress Theme die stylischen Möglichkeiten von Avada – welches dank dem integriertem Fusion Builder wesentlich mehr Möglichkeiten bietet, um auf einfache Art und Weise Seiten mit ansprechendem “WOW”-Effekten und Inhalten zu füllen. Doch AVADA bietet Sie glücklicherweise nun mal – und deshalb sollte man Sie auch nutzen.
Und für diejenigen von euch, die das AVADA Theme und dessen unendliche Möglichkeiten noch nicht kennen, möchte ich hier zeigen, wie man ein simples Kontaktformular mit Fusion Builder Elementen “aufhübscht”. Das gute daran: das mit den Fusion Builder Elementen erstellte Formular funktioniert auch unter anderen Themes!
Was braucht Ihr dafür?
- Zuallererst natürlich das AVADA Theme (erhältlich bei Themeforest.net),
- dann müssen natürlich die im AVADA Theme integrierten Plugins Fusion Core und Fusion Builder aktiv sein
- das empfohlene Plugin Contakt Form 7 (oder ein anderes WordPress Mail-Formular) muss installiert und aktiviert sein
- ein gültiger API Key für google Maps muss vorhanden sein
- (optional) ein Captcha Key muss bei google generiert werden
Alles vorhanden? Dann kann’s ja losgehen..
Wenn Ihr diesem Link folgt, dann seht Ihr, welche Optionen AVADA bietet, um die google Maps farblich ins Theme einzubinden und die verschiedenen Orte, die angezeigt werden sollen, mit personalisierten Icons zu versehen.
Eines sei vorausgeschickt: es gibt mehrere Möglichkeiten nach Rom zu kommen – bzw. ein Kontaktformular zu erstellen. Bei der 1. Möglichkeit nutzt man die Avada Themeeinstellungen, erstellt eine Seite und wählt das Contact-Template. Die google Maps Anpassungen macht man dann in den Avada Theme Optionen.
(Bild links: Kontaktformular aus dem Avada Theme heraus erstellen – geht auch, funktioniert aber nur bei aktiviertem Avada-Theme – besser ist der Weg über den Fusion Builder)
Der Nachteil bei dieser Verfahrensweise: wechselt man vom Avada Theme auf ein anderes, dann funktioniert das Contact Template nicht mehr, da es zu den Avada Theme Optionen gehört.
Man kann allerdings das Theme wechseln und das Avada Plugin “Fusion Builder” aktiv lassen. Hat man ein anderes Theme aktiviert und erstellt eine Standard Seite, funktionieren die Fusion Builder Elemente auch dort. Man kann also über die Schaltfläche “Fusion Builder Element Generator” alle für Avada verfügbaren Elemente (und davon gibt es im Vergleich zu anderen Themes wirklich reichlich) in jedem anderem Theme einbauen.
Im nächsten Schritt muss dann nur im Menü die Standardseite eingebunden werden und als Kontaktformular benannt werden. Dieses Vorgehen macht Sinn, wenn man öfters das Theme wechselt, wenn sich das Avada Theme als zu Scriptlastig herausstellt und lange Ladezeiten verursacht – oder wenn man einfach mal etwas neues ausprobieren möchte, was optisch noch besser zu seinem Blog passt.
(Bild rechts: Ein anderes Theme – hier Magic Mag – ist aktiv (und wie man sieht, bringt es auch einige Elemente mit – aber bei weitem nicht die Vielfalt des Fusion Builder, der wie man sieht trotz anderem Theme aktiv ist), und trotzdem kann man mit dem Fusion Builder bequem Elemente auf seiner Seite einbauen)
Doch kommen wir zurück zur Formularerstellung:
Zwingend ist natürlich das Formular um mit uns in Kontakt zu treten. Dies erstellt man ziemlich bequem mit dem bekannten Plug-In “Contact Form 7”. Nach der Erstellung bindet man das Formular mittels eines Shortcodes bequem auf der Kontakt-Seite ein.
Unter normalen Umständen würde dies schon reichen – aber wir wollen ja ein Formular mit mehr Pep erstellen, deshalb binden wir auch noch eine Google Map ein, die unseren Wohnort oder bei Bedarf sogar mehrere Orte anzeigt – und dies sogar noch angepasst an unser Theme Layout.
Und als wenn das nicht reichen würde, bauen wir auch noch eine Akkordeon Funktion, welche Fragen zum Kontaktformular enthält, ein – die sich bei anklicken “entrollt”, und den bis dahin verborgenen Inhalt freigibt. Dieses Akkordeon kann man sehr gut bei den beliebten “FAQ”s (frequently asked Questions = häufig gestellte Fragen) einsetzen: es spart Platz auf der Seite, der Besucher muss weniger scrollen und er braucht nur auf den Punkt klicken, der Ihn interessiert – die Erklärungen, der für Ihn nicht relevanten Themen, bleiben ausgeblendet.
Die Akkordeon Funktion heißt im Fusion Builder “Toggles” und findet sich im Reiter “Builder Elements”. Mann muss nur noch die Überschriften eintippen, wählt den Text, der beim entrollen angezeigt werden soll (der lässt sich per Editor formatieren), dann noch Styling- Bönsches wie ob ein Rahmen angezeigt werden soll, welche Rahmenfarbe der haben soll, ob eine Trennlinie angezeigt werden soll und vieles mehr. Der Fusion Builder lässt von den Optionen her keine Wünsche offen.
Fangen wir als erstes mit der google Map an, denn die möchte ich ganz oben auf der Seite anzeigen lassen. Ich selber habe nur eine Adresse – aber der Fusion Builder Map-Generator unterstützt mehrere Adressen – darüber hinaus für jede Adresse ein angepasstes Icon und angepasste Info-Boxen (wie das aussieht, könnt Ihr auf dieser Testseite sehen). Dazu muss für jeden Eintrag in den entsprechenden Feldern der vertikale Strich “|” als Trenner eingefügt werden. Auf der Windows Tastatur liegt dies Zeichen auf der “Alt GR” Taste und der Taste rechts neben “Shift”.
Man kann seine Adresse/n in das dafür vorgesehene Feld ganz normal eingeben, so als würde man es in einem Brief als Anschrift eintippen. Google Maps erkennt meistens die Adresse – wie gesagt meistens. Alternativ kann man aber auch die Geodaten eingeben. Um an die zu kommen (die werden normalerweise so nicht angezeigt), klickt man an der gewünschten Position mit der RECHTEN Maustaste. Im sich nun öffnenden Kontextmenü wählt man den Eintrag “was ist hier?” und daraufhin werden die Geodaten unten im Fenster in einem Popup angezeigt. Dort auf die Geodaten geklickt, erscheint auf der linken Seite ein blauer Bereich in dem die Geodaten angeteigt werden. Wichtig dabei: nur die auf dem Bild rot umrandeten Werte mit der Maus markieren und per Paste ‘n Copy in das dafür vorgesehene Feld einfügen.
Das schöne am Fusion Builder: benutzt man ihn, statt dem Standard Editor, erkennt er den erzeugten Code, der sehr umfangreich sein kann und zeigt Ihn in einer übersichtlichen grafischen Umgebung an. Dadurch lassen sich schnell Änderungen an den Einstellungen vornehmen, ohne dass man im Quellcode herumfummeln muss und eventuell die ganze Seite zerstört. Dies funktioniert bei allen Elementen – wenn man vorher einen Container erstellt hat (Voraussetzung für die Nutzung der Fusion Builder Elemente) .
Über die Container kann man auch die Breite und Anzahl der gewünschten Objekte steuern. Eine Aufzählung hier würde zu weit führen – schaut einfach auf die Avada Fusion Builder Referenz. Leider ist die Dokumentation nur auf Englisch verfügbar, aber dafür auch sehr umfangreich und gut erklärt.
Wir erstellen also für unsere Kontaktformular-Seite einen Container in 100% Seitenbreite. In den Container packen wir nun die entsprechenden Objekte, so wir wir Sie angezeigt haben wollen (auch hier unterstützt uns der Fusion Builder: wenn ich später die Reihenfolge der Objekte ändern möchte, dann kann ich das bequem per Drag ‘n Drop tun (Wichtig: Nicht vergessen die Änderungen durch drücken der Taste “Save” ganz unten zu speichern!). In den Container fügen wir nun das Element “Google Map” ein. Das Vorgehen ist eigentlich selbsterklärend und wird dazu auch noch in den einzelnen Masken erklärt.
Als Breite der Map geben wir 100% ein, da Sie über die ganze Seitenbreite reichen soll. Die Höhe sollte nicht zu groß gewählt werden, damit der Besucher nicht zu weit scrollen muss um die anderen Inhalte zu sehen. Ein Ausschnitt von 300 Pixeln reicht meistens. Als nächstes kann man sich um die Zoomstufe kümmern. Der voreingestellte Wert ist eigentlich für eine einzelne Adresse schon gut – sollten mehrere Standorte angezeigt werden sollen, dann sollte man den Zoomfaktor so weit hinauszoomen, dass alle Orte auf einer Karte angezeigt werden. Als Karten Overlay kann man sich eine Farbe auswählen, die zum Theme passt – man ist hier nicht auf die google Standardfarbe der Maps beschränkt. Ebenso verhält es sich mit den “Infoboxen” (die kleinen erklärenden popup Fenster unter den Standort-Icons). Schriftfarbe und Hintergrundfarbe lassen sich bequem per Farbpicker in exakten RGB Werten einstellen. Experimentiert einfach mal ein bisschen mit den Einstellungen
Kommen wir zum nächsten Element: dem Akkordeon – oder Toggle Element. Auch dies brauchen wir nur aus der Bibliothek auswählen und anklicken. Ein Element reicht, denn wir können es um weitere Einträge erweitern. Auch hier sind die Einstellungen selbsterklärend, bzw. kann man damit ein bisschen herumspielen. Rahmen oder nicht, und wenn, welche Farbe? Es fällt manchmal schwer nicht zu viele Optionen zu nutzen – weniger ist meistens mehr. Wichtig ist die Einstellung “Open by Default”, heißt also, ob der versteckte Inhalt am Anfang angezeigt werden soll – also ob das “Akkordeon” entrollt ist, oder nicht. Auch hier gilt: einfach mal mit den Einstellungen herumprobieren. In das Feld der Überschriften schreiben wir die einzelnen FAQ- Fragen – in das Feld welches sich nach dem entrollen öffnet die entsprechenden Antworten.
Nun sind wir auch schon beim letzten Element: dem eigentlichen Mailformular. Dafür wird im Fall von dem Plug-In “Contact Form 7” nur der Shortcode zu dem Mailformular eingefügt, welches vorher in den Plug-In-Einstellungen erstellt worden ist. Dort sind auch die Einstellungen für das – optional vom gleichen Entwickler erhältliche – ReCaptcha-Tool vorzunehmen. Um das ReCaptcha Tool zu nutzen muss man es bei google beantragen (hier der Link zur Webseite). Dort erhält man einen Api-Key, den man im entsprechenden Feld des Plug-Ins einträgt. Auch für die Nutzung der google Maps benötigt man im übrigen einen Api-Key, den man im Avada Theme unter dem Pfad: Avada > Theme Options > Contact Form > Google Map in das entsprechende Feld eingibt.
Tja, das war’s eigentlich auch soweit schon. Noch Fragen? Dann müsst Ihr mir schreiben – und könnt auch sofort das angepasste Super-Duper Kontaktformular benutzen!..
