WordPress: Forms benutzen bei Visual Composer Seiten

Visual Composer kommt mit einem eigenen Plugin für Forms (dhvc form) daher, welches gut in Visual Composer integriert ist und daher wenig Probleme machen dürfte.

Für jedes Formular wird im Plugin:Forms eine Forms geadded (leider kann man die nicht aus einer bereits bestehenden duplizieren).

Beispielsweise:

Titel:  IT Freelancer Services – Spezieller Service

Backend editor von Visual Compser

Add element: Zeile (2/3+1/3)
Form Control:Form Email ++++ Form Control:Form Button Submit

Form Email:
Label: Jetzt Angebot einholen!
Name: email-angebot-website (wichtig keine Leerzeichen!)
Icon: envelope
Placeholder Text: Ihre Email
Required: Yes, please anklicken

Form Button Submit:
Senden!

Form Options:
Save Submitted Form to Data? (/)
On successful submit: Display a message
Message position: button
Message: <b style=“background-color:Tomato;“>Vielen Dank, Ihre Anfrage wurde übermittelt!</b>

Send form data via email: (/)
Sender email: entsprechend füllen
Recepient email: entsprechend füllen
Email subject: IT Freelancer Services – Spezieller Service
Email body:
Form Body: [form_body]
IP Address: [ip_address]

 

Dann mit Add Element -> DHVC Form schließlich auf Zielseite einbinden.

WordPress: Mehrere Autoren für einen Artikel zeigen

Entsprechendes Plugin: https://de.wordpress.org/plugins/co-authors-plus/

Das Theme muss trotz Aktivierung des Co-Authors-Plugins noch händisch angepasst werden. Hierzu muss die passende Stelle im Code des Templates gesucht werden. Dazu den Theme-Ordner per FTP-Client auf den lokalen Rechner kopieren. Dann mittels passendem Such-Tool (bei mit Datei-Suche im notepad++) nach dem entsprechenden class-attribute (class=“author-name“) suchen, welches ich zuvor auf meiner WordPress-Seite entsprechend rausgefunden habe:

In meinem generatepress-theme steht der entsprechende code in der Datei template-tags.php

// If co-autor
if ( function_exists( 'coauthors_posts_links' ) ) {
echo ' ';
coauthors_posts_links();
} else {
// If our author is enabled, show it
if ( $author ) {
echo apply_filters( 'generate_post_author_output', sprintf( ' ',
sprintf( '',
__( 'by','generatepress'),
esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
esc_html( get_the_author() )
)
) );
}
}

Da in meinem Theme kein Leerzeichen zwischen den Autoren und dem verbindenen und war, musste ich auch noch das css per customizer anpassen:

WordPress: Slider Revolution

Verwendung von Slidern allgemein

Seit dem Siegeszug von mobilen Endgeräten sind Slider problematisch geworden. Wenn der Text zu lang ist, wird er einfach abgeschnitten. Gut verwenden kann man sie noch bei reinen Bildgalerien oder bei Artikelserien. Hier ist ein Artikel gegen die Verwendung von Slidern: https://yoast.com/opinion-on-sliders/

Hier ist ein weiterer Artikel gegen die Verwendung von Slidern: https://thrivethemes.com/why-sliders-suck/

Installation

Die Kosten von $25 sind nicht ohne, aber ich sehe gerade keine manuelle Alternative, nachdem mein Versuch den Bootstrap-Slider in WordPress zu integrieren vorläufig eher gescheitert ist. Hier geht’s zum bezahlten Download. Unheimlich ist mir die schiere Größe des Downloads: 208 MB. Aber da sind viele Beispiele mit drin. Die zip muss entpackt werden. Hochgeladen und aktiviert wird dann nur das 7,5 MB große revslider.zip.

Plugins -> Installieren -> Plugin hochladen -> .zip von meinem Computer auswählen -> Jetzt installieren -> Aktiveren

Um z.B. Templates nutzen zu können musst Du slider revolution noch registrieren. Hier findest Du den Lizenzschlüssel. Gehe unter Download und wähle hier den Lizenzschlüssel als Text. Den gibst Du dann in wordpress ein: http://www.it-freelancer-magazin.de/wp-admin/admin.php?page=revslider&view=sliders Register this code.

Template: Team Carousel

Man muss die Templates benutzen, denn sonst wird slider revolution aufgrund der richtig vielen Konfigurationsmöglichkeiten einer manuellen Slidererstellung richtig kompliziert. Ein alternatives Layout für Teamdarstellung ist das x-Spaltenlayout: http://www.fitnessstudio-bodyfit.de/fitnessstudio/

Template: Team carousel. Die Thumbnails in der Gallerie oben befinden sich in Static/Global layers. Die Thumbnails müssen so zugeschnitten sein, dass die Motive nicht verzerrt werden. Man muss, wenn man noch ein paar Thumbnails zusätzlich hinzugefügt hat auch noch deren Verlinkung anpassen: das geht über Aktionen. Dazu muss man noch vorher die Slide-Titel anpassen.

Slider Einstellungen

hier finden sich die generellen Slidereinstellungen

Slide Editor

Im Slide-Editor werden die einzelnen Bilder des Sliders einzeln bearbeitet. Die Tabs unter der Bilderreihe beziehen sich auf das aktuell selektierte Bild. Mit dem Button Diskette auf grünem Hintergrund werden die Änderungen am einzelnen Bild gespeichert.

 

Umzug WordPress auf Host Europe WebServer

Hier findet sich der Umzug nach WebGo beschrieben. Und hier (sehr ausführlich) der Umzug einer WP-Instanz nach Host Europe: Quelle

E-Mail-Addy umziehen: Mach einen Forward auf meine andere Email-Addresse, damit ankommende Emails nicht verloren gehen.

Ich muss auf dem WebServer das Passwort setzen für die vorgeschlagenen SSH-Zugänge (KIS -> WEBSERVER -> Sicherheit & SSL -> SSH Zugang konfigurieren), dann bis zu 15 min warten! Der SSH-User ist nur der Teil vor dem @ – der Teil dahinter bezeichnet den Server.

Dann mit Kitty (Putty war irgendwie buggy) zum WebServer verbinden. Nach wenigen Minuten geht meine Verbindung futsch, weil mein Internet daheim aktuell brüchig ist.

Per FTP auf altem Server anmelden: ncftp -u web11 s96.goserver.host

TBC …

WordPress: PageBuilder (Visual Composer)

Allgemein

Soll die Optik einer Webpage weg vom Blogstyle und hin zu einer strukturierten Seite, bieten sich Pagebuilder an. Beim letzten WordPress-Meetup wurde mir von Visual Composer (das mir eigentlich ein Kollege empfohlen hatte) abgeraten. Wegen der verwendeten Shortcodes führe dieses Plugin, wie viele anderen Pagebuilder-Plugins, zu einem Vendor-Lockin. Zwei erfahrene WordPress-Meetupler rieten mir daher zu Elementor.

Elementor

Zumindest mit WordPress-Version 4.7.5 (und 4.8.) in Kombination mit Elementor-Version 1.5.2, hat der Editor beim Beitrag-Erstellen nicht geladen, wenn man über das Beiträge/Seite-Menü kam (möglicherweise lag es daran, dass mein Theme nicht aktuell war). Erst als man die Seite in der Vorschau angeschaut hat und von dort dann Mit Elementor bearbeiten geklickt hat, hat’s funktioniert. Die Auswahl an Templates ist dort jedoch sehr begrenzt – ein guter Designer wird trotzdem mit dem zügigen Zusammenklicken seine Freude haben.

Visual Composer

Kostet $34.

Das erste gedownloadete .zip hat WordPress nicht als gülitges Plugin identifizert und die Installation abgebrochen. Erst beim zweiten Download hat die Plugin-Installation funktioniert. Und erst beim Update der aktiven WordPress-Templates hat Visual Composer auch geladen. Danach Visual Composer aktivieren: /wp-admin/admin.php?page=vc-updater

Die Templates in der Template Library sind alle für sehr schlanke content-arme Webseiten ausgelegt. Vielleicht verhält es sich dabei wie mit der Haute-Couture-Kleidung, die nur an einem superschlanken Model gut aussieht. Einige Layout-Anregungen fand ich jedoch beim gemütlichen Durchstöbern der Templates, so dass die Vorstellung zum Layout meiner content-reichen Webseite dadurch reifte.

So fügt man ein Template ein

Zeile – das am häufigsten verwendete Element

Diese unterteilt die Webseite vertikal. Innerhalb der Zeile wird dann häufig noch ein x-Spalten-Layout implementiert. Die Ausdehnung einer Zeile erkennt man an der gestrichelten Linie, wenn man mit der Maus über die Zeile geht. Das blaue Zeilenmenü ist etwas kontraintuitiv, denn es erscheint auch über einer Spalte, obwohl alle darin vorgenommenen Aktionen die gesamte Zeile betreffen (kann man mit dem Papierkorb-Icon mal versuchen).

Den Sinn von Spalte hinzufügen habe ich nicht verstanden, wenn man das gleiche doch im Layout-Menüpunkt machen kann?!

Best practices

Achte darauf, dass jede inhaltliche Zeile (selbst wenn es nur ein Separator ist) auch wirklich in eine neue technische Zeile bekommt – sonst entsteht Chaos. Eine neue Zeile baut man, indem man auf das allgemeine + Zeichen klickt:

 

Nach jedem erfolgreichen Arbeitsschritt Aktualisieren klicken und nach einem Fehler einfach die Seite neu laden – so kommt man dann wieder zur letzten korrekten Seitenversion.

Wenn man aus Versehen einen kaputten Stand aktualisiert hat, kann man mit dem herkömmlichen WP-Revisionssystem zur älteren korrekten Version zurückkehren.

Layout-Änderungen an der Seite lassen sich am besten im Backend-Modus durchführen. Sowieso sollte man so oft wie möglich im Backend-Modus arbeiten, weil der auch schneller funktioniert.

Formulare

Die Log-Funktionality hatte einen Bug (Stand: 23.7.): Obwohl ich mehrfach in Variationen eine E-Mail-Addy in eine simple form abschickte, lieferten mir die entries: No entries found. Wenn man jedoch ein SMTP-Mail-Plugin für WP installiert hat, geht die Benachrichtigung per Email jedoch wenigstens.

$17: easy-form (Synonym: dhvc)
uploadbare .zip befindet sich innerhalb des downgeloadeden .zips.
Eine eigene Vorschau gibt es nicht – man muss die in der einbettenden Seite benutzen.

Vielversprechend sah auch WP Forms aus, das jedoch in der Pro-Version $200/Jahr kostet.