![\"Avada](\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2017\/05\/Avada-google-Map-Template.jpg\" "\\"Avada")
<\/a><\/p>\nKlar hat nicht jedes WordPress Theme die stylischen M\u00f6glichkeiten von Avada – welches dank dem integriertem Fusion Builder wesentlich mehr M\u00f6glichkeiten bietet, um auf einfache Art und Weise Seiten mit ansprechendem \u201cWOW\u201d-Effekten und Inhalten zu f\u00fcllen. Doch AVADA bietet Sie gl\u00fccklicherweise nun mal \u2013 und deshalb sollte man Sie auch nutzen.<\/p>\n
Und f\u00fcr diejenigen von euch, die das AVADA Theme und dessen unendliche M\u00f6glichkeiten noch nicht kennen, m\u00f6chte ich hier zeigen, wie man ein simples Kontaktformular mit Fusion Builder Elementen \u201caufh\u00fcbscht\u201d. Das gute daran: das mit den Fusion Builder Elementen erstellte Formular funktioniert auch unter anderen Themes!<\/p>\n
Was braucht Ihr daf\u00fcr?<\/p>\n
- \n
- Zuallererst nat\u00fcrlich das AVADA Theme (erh\u00e4ltlich bei Themeforest.net),<\/li>\n
- dann m\u00fcssen nat\u00fcrlich die im AVADA Theme integrierten Plugins Fusion Core und Fusion Builder aktiv sein<\/li>\n
- das empfohlene Plugin Contakt Form 7 (oder ein anderes WordPress Mail-Formular) muss installiert und aktiviert sein<\/li>\n
- ein g\u00fcltiger API Key f\u00fcr google Maps muss vorhanden sein<\/li>\n
- (optional) ein Captcha Key muss bei google generiert werden<\/li>\n<\/ul>\n
Alles vorhanden? Dann kann\u2019s ja losgehen..<\/p>\n
Wenn Ihr diesem Link<\/a> 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.<\/p>\n
![\"Avada](\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2017\/05\/Avada-Theme-contact-form-setup_thumb.jpg\" "\\"Avada")
<\/a>Eines sei vorausgeschickt: es gibt mehrere M\u00f6glichkeiten nach Rom zu kommen \u2013 bzw. ein Kontaktformular zu erstellen. Bei der 1. M\u00f6glichkeit nutzt man die Avada Themeeinstellungen, erstellt eine Seite und w\u00e4hlt das Contact-Template. Die google Maps Anpassungen macht man dann in den Avada Theme Optionen.<\/p>\n(Bild links: Kontaktformular aus dem Avada Theme heraus erstellen \u2013 geht auch, funktioniert aber nur bei aktiviertem Avada-Theme \u2013 besser ist der Weg \u00fcber den Fusion Builder)<\/em><\/p>\n
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\u00a0 geh\u00f6rt.<\/p>\n
Man kann allerdings das Theme wechseln und das Avada Plugin \u201cFusion Builder\u201d aktiv lassen. Hat man ein anderes Theme aktiviert und erstellt eine Standard Seite, funktionieren die Fusion Builder Elemente auch dort. Man kann also \u00fcber die Schaltfl\u00e4che \u201cFusion Builder Element Generator\u201d alle f\u00fcr Avada verf\u00fcgbaren Elemente (und davon gibt es im Vergleich zu anderen Themes wirklich reichlich) in jedem anderem Theme einbauen.<\/p>\n
![\"Fusion](\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2017\/05\/Fusion-Builder_thumb.jpg\" "\\"Fusion")
<\/a>Im n\u00e4chsten Schritt muss dann nur im Men\u00fc die Standardseite eingebunden werden und als Kontaktformular benannt werden.\u00a0 Dieses Vorgehen macht Sinn, wenn man \u00f6fters das Theme wechselt, wenn sich das Avada Theme als zu Scriptlastig herausstellt und lange Ladezeiten verursacht \u2013 oder wenn man einfach mal etwas neues ausprobieren m\u00f6chte, was optisch noch besser zu seinem Blog passt.<\/p>\n(Bild rechts: Ein anderes Theme \u2013 hier Magic Mag – ist aktiv (und wie man sieht, bringt es auch einige Elemente mit \u2013 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)<\/em><\/p>\n
Doch kommen wir zur\u00fcck zur Formularerstellung:<\/p>\n
![\"Avada](\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2017\/05\/Avada-Fusion-Builder_thumb.gif\" "\\"Avada")
<\/a>Zwingend ist nat\u00fcrlich das Formular um mit uns in Kontakt zu treten. Dies erstellt man ziemlich bequem mit dem bekannten Plug-In \u201cContact Form 7\u201d. Nach der Erstellung bindet man das Formular mittels eines Shortcodes bequem auf der Kontakt-Seite ein.<\/p>\nUnter normalen Umst\u00e4nden w\u00fcrde dies schon reichen \u2013 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 \u2013 und dies sogar noch angepasst an unser Theme Layout.<\/p>\n
Und als wenn das nicht reichen w\u00fcrde, bauen wir auch noch eine Akkordeon Funktion, welche Fragen zum Kontaktformular enth\u00e4lt, ein – die sich bei anklicken \u201centrollt\u201d, und den bis dahin verborgenen Inhalt freigibt.\u00a0 Dieses Akkordeon kann man sehr gut bei den beliebten \u201cFAQ\u201ds (frequently asked Questions = h\u00e4ufig gestellte Fragen<\/em>) einsetzen: es spart Platz auf der Seite, der Besucher muss weniger scrollen und er braucht nur auf den Punkt klicken, der Ihn interessiert \u2013 die Erkl\u00e4rungen, der f\u00fcr Ihn nicht relevanten Themen, bleiben ausgeblendet.<\/p>\n
Die Akkordeon Funktion hei\u00dft im Fusion Builder \u201cToggles\u201d und findet sich im Reiter \u201cBuilder Elements\u201d. Mann muss nur noch die \u00dcberschriften eintippen, w\u00e4hlt den Text, der beim entrollen angezeigt werden soll (der l\u00e4sst sich per Editor formatieren), dann noch Styling- B\u00f6nsches wie ob ein Rahmen angezeigt werden soll, welche Rahmenfarbe der haben soll, ob eine Trennlinie angezeigt werden soll und vieles mehr.\u00a0 Der Fusion Builder l\u00e4sst von den Optionen her keine W\u00fcnsche offen.<\/p>\n
![\"google](\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2017\/05\/google-Maps-Geodaten_thumb.jpg\" "\\"google")
<\/a>Fangen wir als erstes mit der google Map an, denn die m\u00f6chte ich ganz oben auf der Seite anzeigen lassen. Ich selber habe nur eine Adresse \u2013 aber der Fusion Builder Map-Generator unterst\u00fctzt mehrere Adressen – dar\u00fcber hinaus f\u00fcr jede Adresse ein angepasstes Icon und angepasste Info-Boxen (wie das aussieht, k\u00f6nnt Ihr auf <\/em>dieser Testseite<\/em><\/a> sehen)<\/em>. Dazu muss f\u00fcr jeden Eintrag in den entsprechenden Feldern der vertikale Strich \u201c|\u201d als Trenner eingef\u00fcgt werden. Auf der Windows Tastatur liegt dies Zeichen auf der \u201cAlt GR\u201d Taste und der Taste rechts neben \u201cShift\u201d.<\/p>\nMan kann seine Adresse\/n in das daf\u00fcr vorgesehene Feld ganz normal eingeben, so als w\u00fcrde man es in einem Brief als Anschrift eintippen. Google Maps erkennt meistens die Adresse \u2013 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\u00fcnschten Position mit der RECHTEN Maustaste. Im sich nun \u00f6ffnenden Kontextmen\u00fc w\u00e4hlt man den Eintrag \u201cwas ist hier?\u201d 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<\/strong> und per Paste \u2018n Copy in das daf\u00fcr vorgesehene Feld einf\u00fcgen.<\/p>\n
Das sch\u00f6ne 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 \u00fcbersichtlichen grafischen Umgebung an. Dadurch lassen sich schnell \u00c4nderungen an den Einstellungen vornehmen, ohne dass man im Quellcode herumfummeln muss und eventuell die ganze Seite zerst\u00f6rt. Dies funktioniert bei allen Elementen \u2013 wenn man vorher einen Container erstellt hat (Voraussetzung f\u00fcr die Nutzung der Fusion Builder Elemente) .<\/p>\n
\u00dcber die Container kann man auch die Breite und Anzahl der gew\u00fcnschten Objekte steuern. Eine Aufz\u00e4hlung hier w\u00fcrde zu weit f\u00fchren \u2013 schaut einfach auf die Avada Fusion Builder Referenz<\/a>.\u00a0 Leider ist die Dokumentation nur auf Englisch verf\u00fcgbar, aber daf\u00fcr auch sehr umfangreich und gut erkl\u00e4rt.<\/p>\n
Wir erstellen also f\u00fcr 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\u00fctzt uns der Fusion Builder: wenn ich sp\u00e4ter die Reihenfolge der Objekte \u00e4ndern m\u00f6chte, dann kann ich das bequem per Drag \u2018n Drop tun (Wichtig: Nicht vergessen die \u00c4nderungen durch dr\u00fccken der Taste \u201cSave\u201d ganz unten zu speichern!)<\/em><\/strong>.\u00a0 In den Container f\u00fcgen wir nun das Element \u201cGoogle Map\u201d ein. Das Vorgehen ist eigentlich selbsterkl\u00e4rend und wird dazu auch noch in den einzelnen Masken erkl\u00e4rt.<\/p>\n
Als Breite der Map geben wir 100% ein, da Sie \u00fcber die ganze Seitenbreite reichen soll. Die H\u00f6he sollte nicht zu gro\u00df gew\u00e4hlt werden, damit der Besucher nicht zu weit scrollen muss um die anderen Inhalte zu sehen. Ein Ausschnitt von 300 Pixeln reicht meistens. Als n\u00e4chstes kann man sich um die Zoomstufe k\u00fcmmern. Der voreingestellte Wert ist eigentlich f\u00fcr eine einzelne Adresse schon gut –\u00a0 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\u00e4hlen, die zum Theme passt \u2013 man ist hier nicht auf die google Standardfarbe der Maps beschr\u00e4nkt. Ebenso verh\u00e4lt es sich mit den \u201cInfoboxen\u201d (die kleinen erkl\u00e4renden popup Fenster unter den Standort-Icons).<\/em> Schriftfarbe und Hintergrundfarbe lassen sich bequem per Farbpicker in exakten RGB Werten einstellen. Experimentiert einfach mal ein bisschen mit den Einstellungen<\/p>\n
Kommen wir zum n\u00e4chsten Element: dem Akkordeon \u2013 oder Toggle Element. Auch dies brauchen wir nur aus der Bibliothek ausw\u00e4hlen und anklicken. Ein Element reicht, denn wir k\u00f6nnen es um weitere Eintr\u00e4ge erweitern. Auch hier sind die Einstellungen selbsterkl\u00e4rend, bzw. kann man damit ein bisschen herumspielen. Rahmen oder nicht, und wenn, welche Farbe? Es f\u00e4llt manchmal schwer nicht zu viele Optionen zu nutzen \u2013 weniger ist meistens mehr. Wichtig ist die Einstellung \u201cOpen by Default\u201d, hei\u00dft also, ob der versteckte Inhalt am Anfang angezeigt werden soll \u2013 also ob das \u201cAkkordeon\u201d entrollt ist, oder nicht. Auch hier gilt: einfach mal mit den Einstellungen herumprobieren. In das Feld der \u00dcberschriften schreiben wir die einzelnen FAQ- Fragen \u2013 in das Feld welches sich nach dem entrollen \u00f6ffnet die entsprechenden Antworten.<\/p>\n
Nun sind wir auch schon beim letzten Element: dem eigentlichen Mailformular. Daf\u00fcr wird im Fall von dem Plug-In \u201cContact Form 7\u201d nur der Shortcode zu dem Mailformular eingef\u00fcgt, welches vorher in den Plug-In-Einstellungen erstellt worden ist. Dort sind auch die Einstellungen f\u00fcr das \u2013 optional vom gleichen Entwickler erh\u00e4ltliche – ReCaptcha-Tool vorzunehmen. Um das ReCaptcha Tool zu nutzen muss man es bei google beantragen (<\/em>hier der Link zur Webseite<\/em><\/a>).<\/em>\u00a0 Dort erh\u00e4lt man einen Api-Key, den man im entsprechenden Feld des Plug-Ins eintr\u00e4gt.\u00a0 Auch f\u00fcr die Nutzung der google Maps ben\u00f6tigt man im \u00fcbrigen einen Api-Key, den man im Avada Theme unter dem Pfad:\u00a0 Avada > Theme Options > Contact Form > Google Map <\/em>in das entsprechende Feld eingibt.<\/p>\n