So erstellen Sie eine Infografik -Webseite mit Elementor

Mit Geschichten und Informationen, die nur ein paar Klicks entfernt sind, verlassen sich die Menschen zunehmend auf Statistiken und numerische Daten über abstrakte Erzählungen, um fundierte Entscheidungen zu treffen. Hier glänzen infografische Webseiten. Sie ziehen nicht nur Besucher an, sondern fesseln auch Aufmerksamkeit, was komplexe Informationen sowohl zugänglich als auch ansprechend macht.

Außerdem können infografische Webseiten komplexe Daten auf überzeugende und leicht zu lesende Wege aufstellen. Wenn Infografiken alle Fallstudien oder hypothetischen Geschichten/Ideen begleiten, können sie leistungsstarke Werte für das Marktpublikum schaffen. Es ist jedoch nicht schwierig, infografische Webseiten zu erstellen.

Mit Elementor und Happyaddons können Sie jede Art von Infografik -Webseiten -Design auf WordPress erstellen. In diesem Tutorial-Beitrag zeigen wir eine Schritt-für-Schritt-Anleitung zum Erstellen einer Infografik-Webseite mit Elementor. Fangen wir an!

Was ist eine Infografik -Webseite?

Eine Infografik -Webseite soll Informationen unter Verwendung grafischer Darstellungen präsentieren, um Konzepte zu veranschaulichen. Es kombiniert verschiedene visuelle Elemente wie Bilder, Diagramme, statistische Figuren, Symbole usw. mit minimalen Texten, um die umfassenden Daten zu vereinfachen.

Infografische Webseiten priorisieren visuelle Inhalte, um die Lesbarkeit zu verbessern, damit die Menschen das gesamte Konzept auf den ersten Blick leicht verstehen können. Diese Art von Seite wird normalerweise für Geschichtenerzählen, Datenvisualisierung und Bildungszwecke erstellt. Zweifellos haben Infografik -Webseiten höhere Aufbewahrungs- und Engagementraten.

Warum und wann Sie infografische Webseiten benötigen

Schauen wir uns nun einen kurzen Blick darauf an, warum und wann Sie infografische Seitendesigns auf Ihrer Website benötigen, bevor Sie in den Abschnitt "Tutorial" eintauchen. Lassen Sie uns erkunden.

• Vereinfacht komplexe Informationen

Visuelle Elemente helfen den Benutzern, komplexe Datenthemen zu verstehen, ohne durch die Aufnahme wichtiger Erkenntnisse überfordert zu werden.

• Hält Besucher auf Ihrer Website länger

Eine effektive Infografik -Seite motiviert die Besucher, länger auf Ihrer Website zu bleiben, indem sie die Absprungraten verringert und das Conversion -Potenzial steigern.

• Stärkt die Markenbehörde

Indem Sie strukturierte Daten und wertvolle Erkenntnisse visuell angezeigt werden, können Sie Ihre Website als vertrauenswürdiger Informationsanbieter einrichten.

• Für Marketing- und Werbeinhalte

Infografik Seiten sind eine effektive Möglichkeit, Produktvergleiche neben Kampagnenhighlights anzuzeigen. Sie können auch Kunden -Testimonials anzeigen, um die Aufmerksamkeit der Kunden zu erregen.

• Beiträge in sozialen Medien teilen

Infografik -Inhalte sind auf Social -Media -Plattformen leicht zu teilen. Außerdem lieben Menschen in letzter Zeit die Infografiken und statistischen Informationen mehr als Textgeschichten.

So erstellen Sie eine Infografik -Webseite mit Elementor

Wenn Sie mindestens ein paar Wochen WordPress verwenden, haben Sie möglicherweise von Elementor gehört. Es ist ein leistungsstarkes Plugin für Drag-and-Drop-Seite Builder, mit dem Sie Webseiten ohne Codierung entwerfen können. Alles, was Sie tun müssen, ist Design -Widgets zu wählen, sie auf die Seite zu ziehen und abzugeben und sie anzupassen.

Happyaddons ist ein bekanntes Addon zum Elementor-Plugin. Es wird mit vielen zusätzlichen Design -Widgets und -funktionen geliefert. Wenn Sie jemals das Gefühl haben, dass Elementor nicht genug ist, können Sie Happyaddons damit ausprobieren. Wenn Sie die beiden Plugins zusammen verwenden, können Sie im Bereich Webdesign Magie machen.

Holen Sie sich die Plugins, indem Sie auf die unten stehenden Links klicken.

• Elementor
• Happyaddons
• Happyaddons Pro

Sie können Infografikseiten nur mit den freien Versionen von Elementor und Happyaddons erstellen. Die Premium -Version bietet jedoch einige weitere aufregende Ressourcen. Wir werden also die Premium -Version von Happyaddons in diesem Tutorial verwenden.

Sobald die Plugins auf Ihrer Website installiert und aktiviert sind, folgen Sie dem unten gezeigten Tutorial.

Schritt 01: Öffnen Sie einen Beitrag oder eine Seite mit Elementor

Öffnen Sie einen Beitrag oder eine Seite mit Elementor. Links befindet sich das Elementor -Panel , in dem Sie alle Design -Widgets und -Funktionen finden. Auf der rechten Seite befindet sich die Elementor -Leinwand , auf der Sie die Widgets ziehen müssen, um die Infografik -Webseite zu entwerfen.

Schritt 02: Erstellen von Spalten zum Platzieren von Widgets

Bevor Sie ein Widget platzieren, müssen Sie Spalten erstellen. Klicken Sie dazu auf das (+) Plus -Symbol . Wählen Sie dann die Option FlexBox Container aus. Wählen Sie danach eine Spaltenstruktur aus, die Sie für das Design benötigen.

Überprüfen Sie, wie Sie Lightbox in WordPress mit Elementor hinzufügen.

Schritt 03: Fügen Sie den Spalten geeignete Widgets hinzu

Legen Sie nach Ihren Entwurfeinstellungen Widgets in die von Ihnen erstellten Spalten. Mal sehen, wie wir diesen Abschnitt entwerfen.

# Fügen Sie das Bild -Widget hinzu

Geben Sie ' Bild ' in das Suchfeld ein. Sobald das Bild -Widget unten angezeigt wird, ziehen Sie es in einen geeigneten Abschnitt im Spaltenstrukturbereich.

Laden Sie ein Bild hoch oder fügen Sie eins aus der Medienbibliothek aus dem im Bild unten markierten Abschnitt in den Widget -Bereich hinzu.

# Fügen Sie das Übergangswidget hinzu

Finden Sie das Widget der Überschrift und platzieren Sie es in die rechte Spalte.

Schreiben Sie einen Titel für die Infografik -Seite. Da ich diese Seite für Diabetes erstellen werde, habe ich sie für den Seitentitel geschrieben.

Kommen Sie zur Registerkarte Stil . Sie erhalten Optionen, um die Ausrichtung, Typografie, Textfarbe und mehr zu ändern.

# Fügen Sie das Texteditor -Widget hinzu

Fügen Sie danach das Texteditor -Widget unter die Überschrift hinzu. Dadurch können Sie der Leinwand einfache Texte und Absätze hinzufügen.

Fügen Sie nun Ihren gewünschten Text dem Texteditor -Widget hinzu. Erhöhen Sie dann die Schriftart, ändern Sie die Schriftfamilie und wählen Sie eine Farbe aus, wie wir sie oben gezeigt haben.

Wenn Sie die Lücke zwischen zwei Widgets verringern möchten, können Sie die Randeinstellungen anpassen .

Fügen Sie in gleicher Weise zusätzliche Text und Bilder in die Leinwand mit den jeweiligen Widgets hinzu.

Durch die Verwendung der Margin -Option können Sie jedes Widget an einen anderen Ort verschieben und platzieren, z. B. die Karte auf dem Bild unten. Hoffe du verstehst es.

Erfahren Sie, wie Sie in WordPress einen Ereigniskalender erstellen.

Schritt 04: Erstellen Sie einen neuen Abschnitt, um statistische Diagramme hinzuzufügen

Eine Website -Seite ist eine Kombination mehrerer Abschnitte. Um einen neuen Abschnitt zu erstellen, müssen Sie der Seite einen neuen Spaltenstrukturbereich hinzufügen.

Fügen Sie mit dem Texteditor -Widget eine Kopie zum neuen Infografik -Abschnitt hinzu, wie wir es unten getan haben.

# Fügen Sie der Leinwand ein Diagramm -Widget hinzu

Happyaddons verfügt über sechs Diagramm -Widgets, die sehr hilfreich für die Gestaltung der Infografik -Webseite sind. Erkunden Sie einfach die Diagramm -Widgets und wählen Sie die aus, die Ihnen das Design der Infografik -Webseiten mögen.

Wir werden das Widget der Skill -Balken verwenden, um bestimmte statistische Daten anzuzeigen.

Voreinstellungen sind mit vorgezeichneten Vorlagen ausgestattet. Sie können eine beliebige Voreinstellung für das Widget der Skill -Balken auswählen oder bei der Standardeinstellung bleiben.

Aus dem Abschnitt "Fertigkeiten" können Sie alle Balken nacheinander Informationen hinzufügen, indem Sie auf die jeweiligen Registerkarten klicken. Sie können sehen, dass wir sie umbenannt und jeweils Prozentsätze festlegen.

Gehen Sie zum Stil der Stil und halten Sie das Widget der Skill -Balken aus. Sie können die Textfarbe, Typografie und verschiedene andere Einstellungen des Widgets ändern.

Mit dem Texteditorblock können Sie der linken Seite weitere Informationen hinzufügen, um den White -Raum zu verwenden.

Schritt 05: Erstellen Sie eine neue Spaltenstruktur für weitere Informationen

Um einen weiteren Abschnitt hinzuzufügen, erstellen Sie erneut eine neue Spaltenstruktur. Fügen Sie dann ein Bild und eine Textbeschreibung hinzu, wie wir es im Bild unten gemacht haben.

Füllen Sie dann auf der rechten Seite den weißen Raum mit geeigneten Informationen. Wir haben zwei Texte mit dem Texteditor -Widget hinzugefügt. Dazwischen haben wir einen Abschnitt mit dem Flexbox -Behälter aufbewahrt.

Sie können diese Unterabschnitte mit diesem Flexbox-Container erstellen.

Fügen Sie nun das Symbol -Widget zu den Containerabschnitten hinzu.

Das Icon -Widget verfügt über eine umfassende Sammlung von Ikonen in der Bibliothek. Sie können das Symbol einzeln für alle Abschnitte ändern. Mach es so, wie wir es getan haben.

Um die Symbolfarbe zu ändern , gehen Sie zur Registerkarte Stil> Primärfarbe .

Um ihre Position zu ändern, gehen Sie zum Layout -Registerkarte> Rand . Ich hoffe, Sie können den Rest selbst tun.

Schritt 06: Erstellen Sie den letzten Abschnitt für das Infografik -Webseitendesign

Erstellen Sie wie oben einen neuen Abschnitt und eine neue Spaltenstruktur mit dem FlexBox -Container. Fügen Sie auch eine Überschrift für den Abschnitt hinzu.

# Fügen Sie ein Kreisdiagramm hinzu

Wie oben erwähnt, verfügt Happyaddons mit vielen nützlichen Diagramm -Widgets. Wir werden das Kreisdiagramm in diesem Abschnitt verwenden. Ziehen Sie es und lassen Sie es in den jeweiligen Abschnitt fallen.

Geben Sie im Abschnitt Kreisdiagramm des Widgets Informationen für das Kreisdiagramm an, indem Sie alle Registerkarten einzeln verwenden.

Erweitern Sie den Abschnitt "Einstellungen" . Von hier aus können Sie zahlreiche Dinge anpassen. Aber die bekanntesten, die Sie tun können, ist , einen Titel zu schreiben und die Position der Legende zu ändern.

Gehen Sie zur Registerkarte Stil . Sie können die Typografie, die Schriftgröße und die verschiedenen Farbtoneffekte für das Widget anpassen.

# Fügen Sie ein Balkendiagramm hinzu

Fügen Sie das Balkendiagramm -Widget gleich zu der Leinwand hinzu.

Passen Sie das Balkendiagramm -Widget an und setzen Sie Informationen und Stylisierung so an, wie Sie möchten. Ich hoffe, Sie können es selbst tun. Mach es.

Hier finden Sie eine Anleitung zum Anzeigen von 360 -Grad -rotierenden Produktfotografie in WordPress.

Schritt 07: Legen Sie eine Hintergrundfarbe für das Infografik -Webseiten -Design fest

Das Festlegen einer Hintergrundfarbe auf der gesamten Seite könnte das Infografik-Webseiten-Design mehr Augen-soothing machen. Klicken Sie dazu auf das Dreizeilen-Symbol in der linken Ecke.

Sie werden in ein neues Panel gebracht. Klicken Sie auf die Option Site -Einstellungen .

Sie werden wieder in ein neues Panel gebracht. Klicken Sie auf die Hintergrundoption .

Wählen Sie aus der Farboption eine Farbe aus. Sie werden sehen, dass die Farbe über den Hintergrund der Seite angewendet wird.

So können Sie Ihr Infografik -Webseitendesign erstellen und entwerfen.

Schritt 08: Vorschau des Infografik -Webseiten -Designs

Gehen Sie zur Vorschau -Seite und überprüfen Sie, ob alles gut funktioniert. Es funktioniert gut an Ihrem Ende.

Schließen!

In der Tat ermöglicht Elementor, gepaart mit Happyaddons, atemberaubende Infografik -Webseiten, die komplexe Informationen vereinfachen. Um die besten Ergebnisse zu erzielen, müssen bestimmte wichtige Punkte sorgfältig berücksichtigt werden.

Halten Sie Ihr Design sauber und übersichtlich, indem Sie übermäßige Text und Bilder vermeiden. Verwenden Sie eine Farbpalette, die mit Ihrer Markenidentität übereinstimmt, und gewährleisten Sie die mobile Reaktionsfähigkeit, um ein konsistentes Erscheinungsbild auf allen Geräten aufrechtzuerhalten. Wenn möglich, fügen Sie Animations- und Schwebeffekte hinzu, da sie Ihren Inhalt interaktiv machen können.

Streben Sie nach einer harmonischen Balance zwischen Textinhalten und Designelementen. Priorisieren Sie die Verwendung von Diagrammen und Diagrammen, da sie perfekt mit dem Zweck von Infografik -Seiten übereinstimmen. Optimieren Sie zuletzt Ihre Seite, um sicherzustellen, dass sie schnell geladen wird, ohne die Leistung zu beeinträchtigen.

Wenn Sie all diese Best Practices folgen, können Sie wunderbare Infografik -Webseiten erstellen, die Mehrwert verleihen und Conversions bringen.