LiveCanvas Review – Ein entwicklerfreundlicher WordPress Page Builder

In diesem Test sehen wir uns ein WordPress Page Builder-Plugin mit einem integrierten HTML- und CSS-Editor an: LiveCanvas.

Während für WordPress viele Page Builder-Plugins verfügbar sind, zielt dieses darauf ab, sich von der Konkurrenz abzuheben, indem es so entwicklerfreundlich wie möglich ist.

Darüber hinaus ist die Ausgabe dieses Seitenerstellers reines HTML und CSS. Dadurch sollten Ihre Seiten schneller geladen und SEO-freundlicher sein als bei einigen anderen Plugins zum Erstellen von Seiten.

In diesem Test von LiveCanvas behandeln wir die besten Funktionen dieses Tools, um Ihnen bei der Entscheidung zu helfen, ob dies das richtige WordPress Page Builder-Plugin für Ihre Website ist.

Lass uns anfangen…

Für wen ist das LiveCanvas-Plugin geeignet?

Wer die volle Kontrolle über das Design seiner WordPress-Website haben möchte, sollte mit LiveCanvas ein interessantes Plugin finden.

LiveCanvas bietet jedoch viele Funktionen, die vor allem Entwickler und Programmierer sehr nützlich finden sollten. Diese Funktionen tragen dazu bei, LiveCanvas von der Konkurrenz abzuheben. Dank des HTML- und CSS-Editors, den wir später in diesem Test genauer behandeln, erhalten Sie mit diesem WordPress-Plugin viel Kontrolle darüber, wie Ihre Website aussieht.

Wenn Sie also eine benutzerdefinierte WordPress-Website erstellen oder Seiten mit benutzerdefinierten Designs zu Ihrer Website hinzufügen möchten, könnte LiveCanvas das Plugin für Sie sein.

LiveCanvas arbeitet mit einem eigenen Theme – einem benutzerdefinierten Child-Theme von UnderStrap. Das bedeutet zwei Dinge: eine gute Site-Performance und Bootstrap 4 als CSS-Framework darunter.

LiveCanvas WordPress-Plugin-Funktionen

Da LiveCanvas ein leistungsstarkes Plugin zum Erstellen von WordPress-Seiten ist, verfügt es über viele Funktionen. Hier sind einige der Highlights dieses Tools, die Ihnen bei der Entscheidung helfen, ob es das Richtige für Sie ist.

Für einen schnellen Überblick über das Plugin bietet Ihnen dieses Video eine kurze Einführung in die Möglichkeiten von LiveCanvas.

Ein entwicklerfreundliches Page Builder-Plugin

Eine der entwicklerfreundlichen Funktionen dieses Seitenerstellers ist der LiveCanvas-Code-Editor. Beim Erstellen von Seitendesigns mit dem Plugin können Sie schnell das zugrunde liegende HTML und CSS anzeigen. Sie können diesen Code nicht nur anzeigen, sondern auch über den benutzerfreundlichen Editor bearbeiten.

Dies gibt Ihnen viel mehr Freiheit als bei vielen anderen WordPress Page Builder-Plugins. Dank dessen sollten Sie in der Lage sein, wirklich benutzerdefinierte und einzigartige Designs für Ihre WordPress-Website zu erstellen, während Sie ein handelsübliches Plugin verwenden.

Wenn Sie jedoch kein Entwickler sind und kein Interesse daran haben, das zugrunde liegende HTML und CSS zu bearbeiten, können Sie einfach die Front-End-WYSIWYG-Schnittstelle von LiveCanvas verwenden, um Ihre Seiten zu erstellen.

Viele fertige Inhalte

Während LiveCanvas definitiv jeden ansprechen wird, der eine vollständig benutzerdefinierte WordPress-Website erstellen möchte, enthält es auch einige großartig aussehende vorgefertigte Inhalte.

Eine große Anzahl von Abschnitten steht Ihnen zur Verfügung – die Sie kombinieren und mischen können, um ganz einfach benutzerdefinierte Webseiten zu erstellen.

gen sind.

Alle diese vorgefertigten Abschnitte sind vollständig bearbeitbar, sodass Sie sie entweder sofort verwenden oder anpassen können, um sie zu Ihren eigenen zu machen. Sie sind nur HTML5-Code-Blöcke – mit Bootstrap 4.

Einige Beispiele für die Arten von Abschnitten, die in diesem Inhalt behandelt werden, sind Heldenabschnitte, Funktionsfelder, Galerieraster und Handlungsaufforderungsfelder. Sie können auch Teammitgliedsprofilbereiche, Preistabellenabschnitte und Testimonial-Anzeigen hinzufügen. Es gibt mehrere Variationen von jedem Typ, sodass Sie in der Lage sein sollten, etwas zu finden, das für Ihre Website geeignet ist, unabhängig von Ihren Designpräferenzen und -anforderungen.

Dank der stylischen vorgefertigten Inhaltsabschnitte sollte es Ihnen leicht fallen, Ihre Seiten mit LiveCanvas schnell zu erstellen.

Front-End Page Builder-Schnittstelle

Wie viele der besten modernen Page Builder-Plugins für WordPress verfügt LiveCanvas über eine Front-End-Schnittstelle. Das bedeutet, dass alle Ihre Anpassungsarbeiten über einen WYSIWYG-Editor erfolgen. In der Vergangenheit wurde diese Arbeit bei den meisten Plugins dieser Art im Backend Ihrer WordPress-Website durchgeführt. Dies war unpraktisch, da die Ansicht der Seite, an der Sie arbeiteten, nicht der Version ähnelte, die Ihre Besucher bei der Veröffentlichung des Inhalts sehen würden.

Da LiveCanvas über eine Front-End-Oberfläche verfügt, erhalten Sie während der Arbeit eine sehr gute Vorstellung davon, wie Ihre Seite aussehen wird, wenn sie live geht. Dadurch müssen Sie Ihre Arbeit nicht speichern, eine Vorschau Ihrer Seite in einem neuen Browser-Tab anzeigen und zwischen Tabs wechseln, um zu sehen, wie sie aussehen wird, wenn sie live geht. Dadurch können Sie mit LiveCanvas benutzerdefinierte Seitendesigns viel schneller erstellen, als wenn Sie einen Page Builder mit einem Backend-Editor verwenden würden.

Hier sind einige der besten Funktionen der LiveCanvas-Seitenerstellungsoberfläche:

Bearbeitungsverlauf

Um Ihnen mehr kreative Freiheit und die Möglichkeit zu geben, ohne Angst vor Fehlern zu arbeiten, verfügt LiveCanvas über eine Rückgängig-Funktion. Auf diese Weise können Sie zur vorherigen Version Ihres benutzerdefinierten Seitendesigns zurückkehren, falls etwas nicht so aussieht, wie Sie es sich vorgestellt haben. Jetzt können Sie selbstbewusst experimentieren und wissen, dass alle Fehler, die Sie machen, schnell rückgängig gemacht werden können.

Einfache HTML- und CSS-Bearbeitung

Wie bereits in dieser LiveCanvas-Überprüfung erwähnt, verfügt dieses Seitenerstellungs-Plugin über einen Code-Editor.

Im Gegensatz zu einigen anderen beliebten WordPress Page Builder-Plugins macht es LiveCanvas einfach, das zugrunde liegende HTML und CSS Ihrer Seiten zu bearbeiten. Dadurch erhalten Sie viel mehr Kontrolle darüber, wie Ihre Inhalte aussehen werden. Sie können den HTML-Code jederzeit anzeigen und dann Änderungen daran vornehmen. Diese Änderungen werden sofort auf Ihre Seite angewendet, sodass Sie ganz einfach mehr Kontrolle über das Design Ihrer Inhalte haben.

Bei LiveCanvas wird die Bearbeitung von HTML und CSS durch die Code-Editor-Oberfläche erleichtert. Wenn Sie den HTML-Editor öffnen, ist der gesamte Code klar formatiert und ausgerichtet. Farben werden verwendet, um die Lesbarkeit des Codes zu erleichtern. Sie können den Code auch ganz einfach komprimieren und falten, um eine klarere Ansicht des Abschnitts zu erhalten, den Sie bearbeiten.

Wenn Sie die Größe des Code-Editor-Fensters ändern müssen, ist dies ebenfalls einfach. Ziehen Sie einfach den Rand des Fensters, um es je nach Bedarf zu verkleinern oder zu vergrößern. Ein weiteres wirklich beeindruckendes Feature des LiveCanvas-Code-Editors ist die Autocomplete-Funktion. Auf diese Weise können Sie Ihren Code schneller schreiben und Fehler reduzieren, indem Sie Vorschläge über die automatische Vervollständigung machen. Ein weiterer hilfreicher Aspekt des Code-Editors ist seine Fähigkeit, Ihren Code zu korrigieren, indem Sie schließende Tags hinzufügen, die Sie vergessen haben.

Der LiveCanvas-Editor kann auch dazu beitragen, dass Sie beim Bearbeiten von HTML und CSS Ihrer Seite nicht überfordert werden. Dazu blendet der Code-Editor den gesamten HTML- und CSS-Code aus, mit Ausnahme des spezifischen Elements, das Sie bearbeiten. Auf diese Weise können Sie sich auf den Teil der Seite konzentrieren, an dem Sie gerade arbeiten, ohne abgelenkt zu werden oder sich im restlichen Seitencode zu verlieren.

Auch wenn Sie nicht viel oder gar keine HTML-Kenntnisse haben, ist diese Funktion dennoch nützlich. Da online so viele HTML-Schnipsel verfügbar sind, können Sie diese Beispiele kopieren und in Ihr LiveCanvas-Seitendesign einfügen. Aus diesem Grund können Sie Ihren Seiten weitere Elemente hinzufügen, z. B. Call-to-Action-Schaltflächen, die Sie online gefunden haben. Wenn Sie sich mit HTML auskennen, werden Sie auch die Leichtigkeit schätzen, mit der Sie Ihren Seiten Ihren eigenen HTML-Code hinzufügen können.

Bauen Sie Ihre eigenen Steine: die Block- und Abschnittsbibliothek

In LiveCanvas haben Sie die Möglichkeit, Ihre eigenen HTML-Chunks zur einfachen Wiederverwendung in Ihren Seiten in einer lokalen Bibliothek zu speichern. Dies ist eine großartige zeitsparende Funktion – Es ist definitiv etwas, das diejenigen zu schätzen wissen, die mehrere benutzerdefinierte Seiten oder Websites erstellen.

Tatsächlich gibt es zwei separate Bibliotheken, Abschnitte und Blöcke: Abschnitte sind für diese großen, großen, vorgefertigten Elemente in voller Breite. Blöcke sind für Elemente gedacht, die innerhalb eines Rasters liegen – also normalerweise nicht in voller Breite.

Wenn Sie in der Vergangenheit andere WordPress-Seitenersteller verwendet haben und festgestellt haben, dass Ihre Inhalte alle ziemlich ähnlich sind, kann diese Funktion Ihnen helfen, Ihre eigene benutzerdefinierte Bibliothek von Modulen aufzubauen, um Ihren Designs ein völlig originelles Aussehen zu verleihen – und Ihre ganz speziellen Bedürfnisse abzudecken .

Erstellen Sie benutzerdefinierte Fußzeilen

Bei einigen WordPress-Seitenerstellern können Sie nur die Post- und Seitenbereiche bearbeiten. Bei LiveCanvas ist dies jedoch nicht der Fall. Wenn Sie eine benutzerdefinierte Fußzeile für Ihre WordPress-Website erstellen möchten, können Sie dies mit LiveCanvas tun. Sie sind nicht darauf beschränkt, Ihrer Fußzeile nur Widgets hinzuzufügen. Sie können stattdessen über den LiveCanvas-Inhaltseditor und seine Unterstützung für die Verarbeitung von benutzerdefiniertem HTML beliebige Inhalte hinzufügen.

Schneller Zugriff auf Stockbilder

Während Sie Ihre benutzerdefinierte Website oder Seiten erstellen, können Sie mit LiveCanvas schnell Stock-Bilder in Ihre Layouts einfügen. Dank der Integration mit Unsplash können Sie ihre große Bibliothek mit kostenlosen Bildern durchsuchen. Wenn Sie eines gefunden haben, das Ihnen gefällt, können Sie es schnell in Ihre Seite einfügen. All dies findet innerhalb der LiveCanvas-Bearbeitungsoberfläche statt.

Seitenanimationseffekte *********

Damit Ihre Inhalte die Aufmerksamkeit Ihrer Besucher auf sich ziehen, können Sie mit LiveCanvas ganz einfach Animationen zu Ihren Seiten hinzufügen. Durch Aktivieren einer Option auf der Backend-Einstellungsseite von LiveCanvas wird die Animate On Scroll-Bibliothek zur Site hinzugefügt. Im LiveCanvas-Editor können Sie jedem Element verschiedene Animationen wie Einblenden, Spiegeln, Verschieben und Zoomen zuweisen, während Sie die Dauer und Verzögerung der Animation steuern.

Unterstützung für universelle Shortcodes

LiveCanvas bietet Ihnen die Möglichkeit, beliebige Shortcodes in Ihre benutzerdefinierten Seitendesigns einzufügen. Auf diese Weise können Sie jede Art von Plugin und Funktionalität von Drittanbietern in Ihre LiveCanvas-basierten Seiten integrieren, mit einer praktischen Ajax-Vorschau in Echtzeit, sodass Sie sofort sehen können, wie die Ausgabe des Shortcodes aussehen würde.

Da es so viele Shortcode-Plugins für WordPress gibt, können Sie die Anzahl der Elemente, die Sie in die benutzerdefinierten Seiten einfügen können, die Sie mit LiveCanvas erstellen, schnell erhöhen, wodurch Ihre kreativen Möglichkeiten exponentiell erweitert werden.

Ein fantastisches ergänzendes Theme

LiveCanvas wird mit einem empfohlenen, ergänzenden WordPress-Startthema geliefert: CustomStrap.

Als Garantie für Geschwindigkeit und Zuverlässigkeit ist es schön zu wissen, dass CustomStrap ein untergeordnetes Thema von UnderStrap ist, dem am besten bewerteten und reinsten Starter-Theme mit Bootstrap 4.

CustomStrap verfügt über einen integrierten SCSS-Compiler, sodass Sie das CSS von Bootstrap im Handumdrehen neu erstellen und anpassen können, um Ihre spezifische Farbpalette zu erhalten und ihm Ihren einzigartigen Styling-Twist zu verleihen – alles über die WordPress Customizer-Benutzeroberfläche, ohne dass geeky npm-Pakete auf Ihrem installiert werden müssen Maschine über die Kommandozeile.

Einige Designer argumentieren, dass Bootstrap-Sites alle gleich aussehen. Dies wird mit CustomStrap nicht passieren – Sie haben Tausende von Kombinationen von Schriftarten, Farben und Stilen.

CustomIt ermöglicht auch die Aktivierung der reaktionsschnellen Typografiefunktion, die in der heutigen mobilen ersten Welt sehr nützlich ist.

Sie bleiben jedoch nicht bei einer Wahl. LiveCanvas funktioniert mit jedem Bootstrap 4-basierten WordPress-Theme. Wenn Sie Ihr eigenes benutzerdefiniertes Bootstrap 4-basiertes Design haben, können Sie das LiveCanvas-Plugin nahtlos ausführen, um Ihre benutzerdefinierten Seiten zu erstellen.

Keine Anbieterbindung

Wie bereits in dieser LiveCanvas-Überprüfung beschrieben, können Sie einfach auf HTML und CSS zugreifen und diese bearbeiten, die von der visuellen Benutzeroberfläche des Editors generiert wurden. Dies gibt Ihnen zwar mehr kreative Freiheit für Ihre Seite, hat aber auch einen weiteren Vorteil.

Da LiveCanvas sauberes HTML und CSS für das Seitendesign generiert, funktionieren Ihre Seitendesigns auch dann wie gewohnt, wenn Sie das Plugin deaktivieren. Das bedeutet, dass Sie LiveCanvas nicht lebenslang verwenden müssen, wie es bei einigen anderen Page Builder-Plugins der Fall ist.

Auch wenn das Plugin deaktiviert ist, können Sie weiterhin auf das HTML und CSS der Seite zugreifen und diese bearbeiten, um Änderungen daran vorzunehmen. Sie können die Änderungen einfach nicht über die LiveCanvas-Benutzeroberfläche oder den Code-Editor vornehmen, es sei denn, Sie reaktivieren dieses Plugin.

Benutzererfahrung des LiveCanvas-Plugins

Um Ihnen eine Vorstellung davon zu geben, wie dieser Page Builder verwendet wird, untersucht dieser Teil unserer LiveCanvas-Überprüfung die Benutzererfahrung des Plugins.

Wie bereits erwähnt, sollte LiveCanvas mit jedem Bootstrap 4-basierten WordPress-Theme funktionieren. Das Plugin wird jedoch auch mit einem eigenen Starter-Theme geliefert, das Sie anstelle eines Themas aus einer anderen Quelle verwenden können.

Unabhängig davon, für welches Design Sie sich entscheiden, können Sie nach der Installation des Plugins auf Ihrer Site Ihren LiveCanvas-Lizenzschlüssel eingeben, um automatische Updates zu aktivieren.

Um mit der Erstellung eines benutzerdefinierten Seitendesigns für Ihre WordPress-Website zu beginnen, müssen Sie einfach eine neue Seite aus Ihrem WordPress-Dashboard erstellen.

Das Plugin fügt dem Seiteneditor ein Panel hinzu, mit dem Sie den LiveCanvas-Editor für diesen Inhalt aktivieren können.

Aktivieren Sie den LiveCanvas-Editor

Nachdem Sie LiveCanvas für eine bestimmte Seite aktiviert haben, können Sie mit dem Inhaltseditor Ihr benutzerdefiniertes Design erstellen.

Nachdem Sie Ihrer Seite einen Abschnitt hinzugefügt haben, können Sie einige Inhalte in diesen Abschnitt einfügen. Da LiveCanvas viele vorgefertigte Abschnitte enthält, können Sie schnell mit der Erstellung Ihrer Seite beginnen.

Fertige Seitenabschnitte

Die verschiedenen Elemente, die Sie Ihren Seiten hinzufügen können, sind alle gut organisiert, sodass Sie leicht finden, wonach Sie suchen. Nachdem Sie Ihrer Seite eine hinzugefügt haben, können Sie sie über den Live-Editor anpassen.

Inline-Textbearbeitung

Da LiveCanvas über eine Inline-Textbearbeitung verfügt, können Sie einfach auf einen Textbereich klicken und mit der Eingabe beginnen, um Ihren eigenen Inhalt hinzuzufügen.

Wenn Sie einen anderen Elementtyp auf Ihrer Seite bearbeiten möchten, z. B. ein Bild, ist dies genauso einfach. Klicken Sie dazu auf das Element und die Steuerelemente für dieses Element werden in der Seitenleiste angezeigt. Sie können dieses Element dann über die Steuerelemente des Seitenleistenbereichs anpassen.

Smartphone- und Tablet-Ansichtsfenster

Während Sie an Ihrer Seite arbeiten, können Sie die Größe des Ansichtsfensters jederzeit ändern. Auf diese Weise erhalten Sie eine gute Vorstellung davon, wie Ihre Inhalte auf einer Reihe von Geräten aussehen werden. Dazu gehören Smartphones mit kleinem Bildschirm, Tablets und andere voreingestellte Ansichtsfenster.

HTML- und CSS-Bearbeitung

Wie bereits erwähnt, ist eine der wichtigsten Funktionen von LiveCanvas der HTML- und CSS-Editor. Sie können jederzeit zum HTML-Editor wechseln, indem Sie einfach auf ein Seitenelement, beispielsweise eine Zeile, klicken und dann auf den entsprechenden Menüpunkt klicken.

Um Verwirrung zu vermeiden, zeigt der HTML-Editor nur den HTML-Code für das Element an, das Sie bearbeiten. Sobald Sie Änderungen am HTML vornehmen, wird es auf Ihre Seite angewendet, damit Sie die Ergebnisse Ihrer Bearbeitung sehen können.

Hoffentlich gibt Ihnen das eine Vorstellung davon, wie dieses Page Builder-Plugin funktioniert. Werfen wir nun einen Blick auf die Preisinformationen.

LiveCanvas WordPress Plugin Preisinformationen

LiveCanvas ist ein Premium-Plugin, das in zwei Preisplänen verfügbar ist:

• Pro: 79 USD pro Jahr für 1 Jahr Zugriff auf Updates und Support.
• Lebenslang: 199 US-Dollar für lebenslangen Zugriff auf Updates und Support.

Unabhängig davon, für welche Option Sie sich entscheiden, können Sie LiveCanvas auf beliebig vielen Websites verwenden. Dies schließt alle Websites ein, die Sie für Ihre Kunden erstellen.

Letzte Gedanken zur LiveCanvas-Überprüfung

LiveCanvas bietet viele der besten Funktionen der beliebtesten WordPress Page Builder-Plugins. Dazu gehören eine moderne Drag-and-Drop-Oberfläche, eine gute Auswahl an vorgefertigten Inhalten und viele Anpassungsmöglichkeiten.

Es verfügt jedoch auch über einen benutzerfreundlichen HTML- und CSS-Editor, der Ihnen noch mehr Kontrolle über Ihre Seitendesigns gibt.

Wenn Sie also nach einem flexiblen und entwicklerfreundlichen WordPress Page Builder-Plugin suchen, ist LiveCanvas eine großartige Option.

Besuchen Sie die LiveCanvas-Website, um mehr über dieses Page Builder-Plugin zu erfahren.