Kategorien
Content Management Systeme E-Commerce Shared Hosting Site Builder Wunschthema

Dynamische Formulare für WordPress

Heute wieder ein Wunschthema. Viele Kreative nutzen den WordPress Portfolio Inhaltstyp. Auf den Portfolio Seiten stehen einzelne Werke, Projekte, Events oder andere Informationen. Oft wollen Besucher nach der Durchsicht eines Portfolios Kontakt aufnehmen und ein bestimmtes Werk kaufen, mieten oder einfach nur mehr Informationen haben. Für den Empfänger der E-Mail wäre es, je nach Anwendungsfall, hilfreich zu wissen, auf welchen Portfolio Eintrag sich die Nachricht bezieht.

Wenn etwas gekauft oder gemietet werden soll, wird das oft mit einer eCommerce Lösung abgewickelt, siehe hierzu auch WOO Commerce – der Online Shop in WordPress.

Manchmal ist es aber gar nicht so klar, was unter welchen Bedingungen verkauft, vermietet oder realisiert wird. Bei Anschaffungen wie Kunst oder Fragen zu Projekten hilft eine Warenkorb Lösung nicht weiter. Schön wäre ein individualisiertes Formular, das bei Bedarf im entsprechenden Portfolio Eintrag erscheint.

Im WordPress Core ist kein Kontaktformular enthalten. Auf wordpress.org finden sich zahlreiche Formular Plugins. Eines des bekanntesten ist vermutlich das kostenlose Contact Form 7. Es wird auf mehr als 5 Millionen WordPress Websites verwendet!

Das Prinzip bei Contact Form 7 ist einfach. Man kann sich beliebig viele Kontaktformulare erstellen und diese dann per Short Code in einen WordPress Beitrag kopieren.

Ein Kontaktformular
Ein Kontaktformular

Ich könnte mir also pro Portfolio Eintrag ein Kontaktformular erstellen und zuordnen … zack … wäre mein Problem gelöst.

Aber was mache ich, wenn ich 250 Portfolio Einträge habe?
Jedesmal ein neues Formular erstellen?

So prinzipiell müsste ja nur die URL des entsprechenden Portfolio Eintrags und vielleicht noch der Titel in die E-Mail des Kontaktformulars eingetragen werden – aber wie?

Contact Form 7 Dynamic Text Extension Plugin

Für diesen Fall gibt es das Contact Form 7 Dynamic Text Extension Plugin. Es das Hinzufügen dynamischer Felder in einem Formular. Diese Felder können sichtbar (aber nicht editierter) oder unsichtbar (hidden) sein. Der Inhalt der Felder wiederum ist ein beliebiger Short Code.

In meinem Fall CF7_get_post_var key=’title‘ für den Titel des Portfolio-Eintrags und CF7_URL für den Link zum Portfolio-Eintrag.

Dynamische Elemente
Dynamische Elemente

Beide Werte sollen auf der Seite natürlich nicht angezeigt werden, sondern nur in der E-Mail. Dazu müssen sie im Mail Template ebenfalls eingetragen werden.

Mail Template
Mail Template

Im Ergebnis hat man nun ein einziges Formular für beliebig viele Portfolio Anfragen. Der Titel und die URL von der aus das Formular verschickt wurde, erscheinen in der E-Mail!

Hinweis: Die dynamischen Teile funktionieren natürlich in allen Inhaltstypen, in denen der Formular Short Code eingetragen wird, nicht nur im Portfolio. In meinem Fall brauchte ich das Feature aber nur in den Portfolio Einträgen und hier auch nur bei manchen.

Fazit

Es muss nicht immer ein Warenkorb System oder ein Premium Formular Plugin sein. Mit dem freien Contact Form 7 Plugin und der dynamischen Erweiterung eröffnen sich interessante Möglichkeiten.

Links


tl;dr: In WordPress lassen sich sehr einfach dynamische Kontaktformulare erstellen.

Kategorien
Content Management Systeme Site Builder Webdesign

Animiertes Scrolling mit ScrollReveal

Animationen sind Techniken, die für den Betrachter ein bewegtes Bild erzeugen. Bei Animationen geht um so grosse Worte wie Charme und das Ziel einer Animation ist Aufmerksamkeit. Die bewegten Bilder werden durch quetschen und strecken, beschleunigen und abbremsen, überlappende und unterstützende Bewegungen, Bewegungsbögen, Übertreibungen und weitere Effekten erstellt.
Fast jede Website enthält in der einen oder anderen Weise Animationen, beispielsweise für die Art und Weise wie ein Menü aufklappt oder ein Button geklickt wird. Animationen können auf den Besucher sehr polarisierend wirken. Man mag sie oder man mag sie nicht. Allgemein akzeptierte Animationen sind eher dezent und unauffällig und werden auf den ersten Blick gar nicht als Animation wahrgenommen.

Letzte Woche bin ich mal wieder über die JavaScript Library ScrollReveal „gestolpert“. Die gibt es schon seit mehreren Jahren, aber der Effekt kommt nun auch bei größeren Sites an. So prinzipiell geht es darum den Vorgang des Scrollen mittels JavaScript zu animieren. Die Elemente der Website werden dabei während des Scrollens „charmant“ eingeblendet. Gerade auf mobilen Geräten ist dieser Effekt sehr oft zu sehen.

Zum besseren Verständnis, hier ein, wie sollte es anders sein, animiertes GIF um den Effekt etwas deutlicher zu machen.

Animiertes Scrollen
Animiertes Scrollen

Um ein wenig die „Magie“ aus der Sache zu nehmen und dich zu motivieren, auch mal mit Animationen zu experimentieren, zeige ich wie einfach dieser Effekt in jede Website eingebaut werden kann.

ScrollReveal in eine Website einbauen

Scroll Reveal ist eine 8.8 Kilobyte große JavaScript Datei, die den notwendigen JavaScript Code enthält. Du kannst sie auf deinen Server laden oder aus einem Content Delivery Netzwerk nutzen.

Um die Datei einzubinden, musst du sie in den HTML Code deiner Site einbinden.

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>

In WordPress und Joomla geht das ganz leicht im Admininistrationsbereich (WordPress: Design -> Editor, Joomla: Erweiterungen -> Templates). Wenn du die Dateien nicht per Browser bearbeiten kannst, musst du die passende Datei, wie beispielsweise in Drupal per FTP oder auf der Konsole ändern oder eine Erweiterung installieren mit der du die Dateien im Browser bearbeiten kannst.

Ich bleibe beim WordPress Beispiel und ändere gleich mal unser Novatrend Blog. In der Datei mit der Fußzeile, die in WordPress meistens footer.php heißt, musst du den Code einbinden.

Scrollreveal in Footer einbinden
Scrollreveal in Footer einbinden

Die Datei wird nun bei nächsten Seitenaufruf geladen. Noch passiert aber nichts, denn du musst noch konfigurieren, auf welche CSS Klassen welcher Effekt angewendet werden soll.

Um beispielsweise alle Artikel in der Übersichtsliste zu animieren, benötigst du folgenden Code:

<script>
  window.sr = ScrollReveal();
  sr.reveal('.post', {
    duration: 2000,
    origin: 'bottom'
    })
</script>

window.sr ist umfasst alle Bereiche auf die die Animationen angewendet werden sollen.
sr.reveal(‚.[CSS Klasse]‘, { [Parameter] } übergibt eine bestimmte Konfiguration des Effekts an die CSS Klasse, die animiert werden soll. In meinem Fall soll die Klasse .post in 2000 Millisekunden (duration: 2000) von unten kommend (origin: ‚bottom‘) eingeblendet werden.

Wenn du also beispielsweise das Menü von oben, die Widgets von rechts und die Artikel von unten einblenden willst, musst du für die entsprechenden CSS Klassen diese Bedingungen formulieren. Die Namen der Klassen sind abhängig vom Template.

<script>
  window.sr = ScrollReveal();
  sr.reveal('.post', {
    duration: 2000,
    origin: 'bottom'
    })
  sr.reveal('.widget', {
  duration: 2000,
  origin: 'bottom'
    })
  sr.reveal('.site-header-menu', {
  duration: 2000,
  origin: 'bottom'
    })
</script>

Den Effekt, den dieser Code erzeugt, erlebst du gerade hier auf der Site.

Hinweis: Abhängig von der Länge der Beiträge ist es sinnvoll, andere Klassen als .post zu konfigurieren. Wenn der Beitrag nicht auf den Screen passt, wird er sonst erst nach beim Scrollen angezeigt. Hier im Blog habe ich letztlich die Klassen .entry-header, .post-thumbnail, .caption und .entry-footer angesprochen, so dass sich auch ein einzelner Artikel nach und nach aufbaut. 

Du kannst es so konfigurieren, dass die Animation einmalig erscheint (default) oder so, das jedesmal, wenn das Element auf dem Bildschirm erscheint die Animation ausgeführt wird (window.sr = ScrollReveal({ reset: true });). Ich habe mich für eine einmalige Animation entschieden.

Elemente können auch ins Bild gedreht werden und es gibt viele weitere Effekte, die auf der GitHub Page des Projekts beschrieben werden.

Link

https://scrollrevealjs.org


tl;dr: Scroll Animationen sind viel einfacher als du denkst

Kategorien
Content Management Systeme Site Builder Webdesign

SP Page Builder für Joomla

Site-, Layout- und Page-Builder vereinfachen die Konfiguration einer Website. Auch für Joomla gibt es Page Builder Erweiterungen, mit denen man per Drag and Drop einzelne Seiten erstellen kann. Als Beispiel zeige ich in diesem Beitrag den SP Page Builder der Firma Joomshaper. Es gibt eine freie und eine kostenpflichtige Version. Die kostenpflichtige Version hat erheblich mehr Features und bietet natürlich auch Support, zum Ausprobieren reicht die freie Version allerdings hin.

Installation

Joomla

Zum Ausprobieren solltest du ein „frisches“ Joomla ohne Beispieldaten installieren. Ich probiere es lokal aus (siehe dazu auch Das Wunder der Erstellung einer Website).

Installation Joomla
Installation Joomla

Ich habe die Sprache der Joomla Installation auf Englisch belassen. Nach der Installation sieht das Frontend so aus.

Frontend nach der Installation
Frontend nach der Installation

Helix Template Framework

Der SP Page Builder funktioniert am besten mit dem Template Framework Helix. Helix nutzt Bootstrap in der Version 4 und ist komplett kostenlos. Auf der Download Site (https://www.joomshaper.com/downloads/template/helixultimate) wird ein Quickstart Paket und ein Template angeboten. Das Quickstart Paket enthält ein fertig konfiguriertes Joomla mit Helix. Ich lade mir, nach vorheriger Registrierung eines Benutzerkontos, nur das Template (helixultimate_template_j3.zip).

Helix Template
Helix Template

Das Template installiere ich über Extensions -> Manage -> Install und …

Template Installation
Template Installation

… aktiviere es als Default Style durch einen Klick auf das ausgegraute Sternchen.

Default Style auswaehlen
Default Style auswaehlen

Durch einen Klick auf den Link Styles (shaper_helixultimate – Default) kommst du in die Optionen des Templates. Ich ändere nichts, schaue es mir aber mal an 🙂

Template Einstellungen
Template Einstellungen

Das Frontend sieht ohne Änderungen folgendermaßen aus:

Frontend mit Helix Template
Frontend mit Helix Template

SP Page Builder

Nun kommt die eigentliche Page Builder Erweiterung. Die freie Lite Version lässt sich unter https://www.joomshaper.com/page-builder herunterladen, ich nehme die aktuelle 3er Version (com_sppagebuilder_lite_v3.1.3.zip) …

SP Page Builder - Download
SP Page Builder – Download

… und installiere sie ebenfalls unter Extensions -> Manage -> Install.

SP Page Builder Installation
SP Page Builder Installation

Erste Schritte

Dein Joomla hat nun ein neues, hoch konfigurierbares Template und einen Page Builder, mit dem der Inhaltsbereich einzelner Seiten aus vielen Elementen zusammengebaut werden kann. Der Page Builder beeinflusst die Ausgabe der Seite, das Template bietet (wie alle Joomla Templates) die Möglichkeit um diese Seite herum Module an verschiedenen Positionen zu platzieren. Im Screenshot siehst du die Vorschau der möglichen Modulpositionen. An der Stelle, an der eben „Home“ steht, würde dann die Ausgabe einer Page Builder Seite positioniert werden. Wenn die Modulpositionen nicht „gefüllt“ sind, erscheinen sie auch nicht.

Helix Template - Modulpositionen
Helix Template – Modulpositionen

Um diese Positionen in der Vorschau zu sehen, musst du in den Template Optionen die Vorschaumöglichkeit zunächst aktivieren.

Template Positionen aktivieren
Template Positionen aktivieren

Nach der Aktivierung kannst du die Positionsvorschau durch einen Klick auf das „Auge“ neben dem Template Style aufrufen.

Template Positionen aufrufen
Template Positionen aufrufen

Die erste Seite

Joomla bietet als möglichen Inhalt (Content) sogenannte Beiträge (Articles) an. Ein Beitrag besteht aus einer Überschrift, einem HTML Bereich und vielen Metadaten. Der SP Page Builder bietet nun zusätzlich zu den nach wie vor existierenden und verwendbaren Beiträgen die Möglichkeit Page Builder Seiten zu erstellen, die sich wie Beiträge verhalten, aber viel individueller konfigurierbar sind. In Drupal würde man sagen, es gibt einen zusätzlichen Inhaltstyp, in WordPress wäre es ebenfalls ein zusätzlicher Inhaltstyp, wie beispielsweise die Portfolio Typen.

Der SP Page Builder fügt ein eigenes Menü in der Joomla Administration hinzu, so dass du einfach zur Seitenübersicht kommst. Eine Seite erstellst du dort durch die Eingabe eines Titels.

Startseite erstellen
Startseite erstellen

Nach der Erstellung der Seite ist sie im Frontend sichtbar und mit dem Frontend Editor bearbeitbar.

Startseite im Frontend-Editor
Startseite im Frontend-Editor

Im linken Bereich sind alle verfügbaren Elemente, im rechten Bereich ist das Frontend deiner Website. Du kannst eine neue Layout Reihe (Row) hinzufügen und dann deine gewünschten Elemente hinzufügen. Je nach Element gibt es eine beeindruckende Fülle an Konfigurationsmöglichkeiten.

Du kannst beliebig viele Seiten erzeugen und diese bei Bedarf über die in Joomla übliche Weise mit einem Menülink versehen. SP Page Builder stellt für die eigenen Seiten entsprechende Menüeintrags-Elemente zur Verfügung.

Es gibt eine ausführliche (englische) Dokumentation aller Funktionen (https://www.joomshaper.com/documentation).

Fazit

Wenn man sich auf die Kombination Template und Page Builder einlässt, lassen sich tatsächlich nach kurzer Einarbeitungszeit ansprechende Websites auf der Basis vom Joomla erstellen.

Links


tl;dr: Der SP Page Builder verwandelt Joomla in ein Drag and Drop Site Building Tool.

Kategorien
Content Management Systeme seafolly.ch Webdesign

Drupal 8.5 Layout Builder

Das Open Source Content Management System Drupal hat schon immer mit sogenannten Content Construction Kits geglänzt. Für eine Website mit strukturierten Inhalten können bereits im Drupal Core beliebig viele Inhaltstypen angelegt und mit Zusatzfeldern ergänzt werden. Die Felder können aufeinander Bezug nehmen und individuell formatiert werden. Es ist also sehr einfach und elegant, beispielsweise einen Inhaltstyp Künstler, einen Inhaltstyp Werke, einen Inhaltstyp Galerien und einen Inhaltstyp Ausstellungen zu erstellen, miteinander zu verknüpfen und dann ein Kunstportal zu starten. Einen solchen prinzipiellen Aufbau benötigen fast alle größeren Websites.  Mit der neuen Drupal 8.5 Version kommt nun ein Layout Builder hinzu, der einen Schritt weiter geht.

Kategorien
Content Management Systeme Services Site Builder Webdesign Webserver Wunschthema

Und nun stehst du da … mit HTML, CSS und JavaScript

Nachdem ich letzte Woche gezeigt habe, wie einfach man sich eine Website Entwicklungsumgebung auf seinem eigenen Computer einrichtet, will ich mal nachfragen, wie es denn so aussieht mit der Erstellung der eigenen Website 🙂

Wenn du die eigene Website tatsächlich selbst mit HTML, CSS und JavaScript baust, ist das ja etwa so, als wenn du ein Haus aus Steinen, Sand, Kalk, Holz und Ziegeln selbst baut. Das kann sehr schön sein, aber es dauert auch echt lange bis es fertig ist. Falls dir diese Art der Erstellung einer Website gefällt, hier noch ein paar Links aus unserem Blog zur Motivation: