Elementor: Schaltfläche zum Herunterladen einer PDF-Datei erstellen

Elementor: Schaltfläche zum Herunterladen einer PDF-Datei erstellen

Möchten Sie mit Elementor Page Builder eine PDF-Datei-Download-Schaltfläche erstellen?

Beim Erstellen einer Seite Elementor-Hilfe (unabhängig davon, ob es sich um eine Homepage, eine Zielseite usw. handelt), können Sie eine Download-Schaltfläche hinzufügen, mit der die Datei direkt heruntergeladen wird, wenn ein Besucher auf die Schaltfläche klickt, anstatt zu einem neuen Webbrowser-Tab geleitet zu werden, um die Datei anzuzeigen Datei.

Lesen Sie auch: So betten Sie PDF in Elementor ein, ohne Code zu schreiben

Elementor hat ein Schaltflächen-Widget die Sie verwenden können, um eine Schaltfläche zum Herunterladen von Dateien zu erstellen. Beim Hinzufügen des Schaltflächen-Widgets können Sie einfach Ihren Dateilink im Einstellungsfenster hinzufügen.

Lesen Sie auch: So installieren Sie Elementor auf WordPress

Die Standardeinstellung leitet Ihren Besucher jedoch zu einem neuen Tab, um die Datei für bestimmte Dateiformate anzuzeigen, einschließlich PDF und Bildformate wie JPG und PNG. Wenn Sie möchten, dass die Datei direkt heruntergeladen wird, müssen Sie dem Download-Link ein benutzerdefiniertes Attribut hinzufügen.

Erstellen einer Download-Schaltfläche für PDF-Dateien in Elementor

Laden Sie zunächst die PDF-Datei in die WordPress-Medienbibliothek hoch. Melden Sie sich dazu bei Ihrem WordPress-Dashboard an und navigieren Sie zu Medien -> Hinzufügen. Klicken Sie auf die Schaltfläche Dateien auswählen um Ihre Datei auszuwählen.

Sobald die Datei hochgeladen ist, sehen Sie eine Schaltfläche URL in Zwischenablage kopieren um die Datei-URL und einen Link zu kopieren Veränderung um die Datei zu bearbeiten.

Klicken Sie auf die Schaltfläche URL in die Zwischenablage kopieren.

Sie finden die Datei-URL auch in der WordPress-Medienbibliothek (Medien -> Medienbibliothek). Wählen Sie einfach die Datei aus, die Sie verwenden möchten, und klicken Sie auf URL in Datei kopieren. Zwischenablage im erscheinenden Fenster.

Sobald die URL kopiert ist, gehen Sie zum Editor von Elementor und fügen Sie das Schaltflächen-Widget hinzu. Fügen Sie die gerade kopierte URL in das Feld ein Pfandrecht aus dem Einstellungsfeld.

Erstellen Sie mit Elementor eine Download-Schaltfläche für PDF-Dateien

Um das benutzerdefinierte Attribut hinzuzufügen, klicken Sie auf das Zahnradsymbol im Feld Link. Sie können einen beliebigen Namen in das Feld Benutzerdefinierte Attribute eingeben.

Sie können das folgende Format verwenden: Télécharger|[nom fichier]. Zu Hause hätte ich Télécharger|Elementor

Erstellen Sie mit Elementor eine Download-Schaltfläche für PDF-Dateien

Hier. Sie können auf die Registerkarte zugreifen Style um die Schaltfläche anzupassen. Wenn Sie mit der Bearbeitung der gesamten Seite fertig sind, können Sie Ihre Seite aktualisieren oder veröffentlichen.

Endgültige Vorschau

Zusammengefasst

Elementor verfügt über ein Schaltflächen-Widget, mit dem Sie Ihrer Seite eine Schaltfläche zum Herunterladen von Dateien hinzufügen können. Sie können jede vom WordPress-System unterstützte Datei hinzufügen, z. B.: PDF, ZIP, JPG, PNG usw.

Für Dateiformate wie PDF, JPG und PNG müssen Sie jedoch ein benutzerdefiniertes Link-Attribut hinzufügen, damit die Datei direkt heruntergeladen werden kann.

Wenn Sie Elementor Pro, können Sie auch das Schaltflächen-Widget verwenden, um eine Aktionsschaltfläche wie die zu erstellen WhatsApp-Chat-Schaltfläche, der Facebook-Messenger-Button, etc ...

Holen Sie sich jetzt Elementor Pro!

Fazit

Hier ! Das ist alles für diesen Artikel, der Ihnen zeigt, wie Sie mit Elementor Page Builder eine Schaltfläche zum Herunterladen einer PDF-Datei erstellen. Wenn Ihnen dieser Artikel gefallen hat, zögern Sie nicht Teilen Sie in Ihrem bevorzugten sozialen Netzwerk.

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.

Erzählen Sie uns von Ihrem commentaires und Vorschläge im entsprechenden Abschnitt.

... 

Elementor: So erstellen Sie eine vollständige Website auf WordPress

Elementor: So erstellen Sie eine vollständige Website auf WordPress

Elementor bietet regelmäßig Themen an, mit denen Sie daraus eine vollständige Website erstellen können. Jeden Monat veröffentlichen wir neue Themen, die sich um eine bestimmte Nische drehen und dennoch so flexibel sind, dass Sie sie endlich an Ihre eigenen Bedürfnisse anpassen können.

In Kombination mit Elementor Pro helfen Ihnen diese Themen dabei, schnell mit jedem Teil Ihrer Website zu beginnen, einschließlich:

die pstatisches Alter, wie die Homepage,

  • der Header
  • die Fußzeile
  • Seite 404
  • der Archivbereich 
  • der Blog
  • Popups und andere

In diesem Tutorial zeigen wir Ihnen, wie Sie mit dem visuellen Seitenersteller von Elementor eine vollständige Website erstellen.

Aber vorher, wenn Sie WordPress Discover noch nie installiert haben Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann zurück zu warum wir hier sind.

So erstellen Sie eine vollständige Website mit Elementor-Themen

In diesem Tutorial lernen Sie, wie Sie ein Thema als Grundlage für alle wichtigen Teile Ihrer Website verwenden und dann alles zusammenfügen, um eine zusammenhängende Website zu erstellen.

Genauer gesagt das Thema digital-Agentur.

Ihre Website enthält eine Reihe grundlegender Seiten, z. B. Seiten:

  • Home
  • Über die
  • Services
  • Kunden
  • Blog
  • Kontakt

Außerdem bietet es Abschnitte, die sich auch dynamischen Inhalten widmen. Beispielsweise stimmen Ihre Blogpost-Archive und Post-Vorlagen automatisch mit Ihren eigenständigen Seiten überein. Sie können auch Kopf- und Fußzeile sowie ändern Seiten 404

So erstellen Sie eine vollständige Website oder einen Blogpascher 1

So erstellen Sie eine Website mit einem Elementor-Thema:

1. Installieren und aktivieren Sie das Elementor Hello-Design 

Da Sie Elementor und eine Designvorlage zum Erstellen Ihrer gesamten Website verwenden, müssen Sie nicht nach anderen Elementen suchen.

Stattdessen benötigen Sie nur eine leichte, leistungsoptimierte Website, die das Elementor Hello-Thema bietet.

Um zu beginnen, gehen Sie zu Aussehen → Themen → Hinzufügen und suchen " Hallo Elementor". Installieren und aktivieren Sie dann das Thema. 

2. Konfigurieren Sie die grundlegenden statischen Seiten Ihrer Website

Dann gehen Sie zum Menü Seiten → Hinzufügen um die Basisseiten Ihrer Website zu erstellen.

Erstellen Sie zunächst eine Seite mit dem Namen " Home "Und klicken Sie auf die Schaltfläche Bearbeiten mit Elementor um Elementor zu starten.

Klicken Sie auf Einstellungen zu öffnen Seiteneinstellungen und ändern Sie das Layout, um gleich zu sein Element oder volle Breite.

Öffnen Sie dann die Elementor-Vorlagenbibliothek und suchen Sie unter nach "Digital Agency" Seiten :

Sie sollten eine Liste der Seitenvorlagen dieses Themas sehen. Vorlage einfügen Startseite aus der Liste der Modelle.

Jetzt sollten Sie eine vollständige Homepage sehen. Der Header sieht vorerst etwas langweilig aus - aber keine Sorge, das werden wir bald beheben.

Fügen Sie als Nächstes eine weitere Seite hinzu, die Sie für Ihre " Über die".

Erstellen Sie wie zuvor eine Seite und ändern Sie das Layout in Element oder volle Breite. Öffnen Sie dann die Vorlagenbibliothek und fügen Sie die Vorlage ein Über Uns des Digital Agency-Themas.

Wiederholen Sie jetzt einfach den gleichen Vorgang, um alle anderen Seiten zu erstellen, einschließlich: Dienstleistungen, Kunden und Kontakt.

Mach dir noch keine Sorgen um die Blog-Seite. Diese Seite ist nicht statisch wie die anderen. Aus diesem Grund erstellen Sie es dort mit einer anderen Methode (die wir später in diesem Tutorial behandeln werden).

Um die Einrichtung Ihrer statischen Seiten abzuschließen, müssen Sie Ihre WordPress-Installation anweisen, eine statische Homepage zu verwenden. Um dies zu tun…

  • gehe zu Einstellungen → Wiedergabe
  • Wählen  Eine statische Seite (unten auswählen) unter Ihren Homepage-Einstellungen 
  • Wählen Sie die Seite aus, die die Homepage-Vorlage des Themas enthält

3. Erstellen Sie die anderen Teile Ihrer Website

Jetzt können Sie die anderen Teile Ihrer Website mit Elementor erstellen. Mit Elementor können Sie über das Erstellen statischer Seiten hinausgehen (wie Sie es oben getan haben).

Mit Elementor können Sie auch Abschnitte entwerfen wie: en-Kopf; die Fußzeile, etc ...

Dank des Elementor-Themas können Sie Vorlagen für alle Abschnitte importieren, die sich bereits auf den statischen Seiten befinden, die Sie im vorherigen Schritt erstellt haben.

Um auf den Visual Builder von Elementor zuzugreifen, gehen Sie zu Vorlagen → Theme Builder. Sie müssen Elementor Pro installieren, um darauf zugreifen zu können.

Jetzt ist es Zeit, Ihre Abschnitte zu erstellen

Kopfzeile

Gehen Sie zunächst zur Registerkarte Kopfzeile Klicken Sie dann in der Visual Builder-Oberfläche auf Neu hinzufügen. Auf dem nächsten Bildschirm sehen Sie eine Auswahl an Vorlagen in der Elementor-Bibliothek. Suchen Sie wie bei statischen Seiten nach „Digital Agency“ und fügen Sie dann Folgendes ein:

Elementor - Header-Vorlage einfügen

Jetzt sollten Sie eine visuelle Vorschau Ihrer Kopfzeile sowie ein Navigationsmenü aus der von Ihnen eingefügten Vorlage sehen.

Wenn Sie es ändern möchten

  • gehe zu  Aussehen → Menüs in Ihrem WordPress-Dashboard
  • Erstellen Sie ein neues Menü

Nachdem Sie ein Menü erstellt haben, können Sie die in Schritt 2 erstellten Seiten zu Ihrem Navigationsmenü hinzufügen.

Lesen Sie auch: 10 Automatisierungstools für das Marketing von Kleinunternehmen

Wenn Sie mit dem Hinzufügen von Menüelementen fertig sind, speichern Sie Ihr Menü und kehren Sie zu Ihrer Kopfzeilenvorlage in der Elementor-Oberfläche zurück.

ensuite, veröffentlichen Ihren Header und verwenden Sie Anzeigebedingungen, um Ihre Header-Vorlage auf Ihrer gesamten Website anzuzeigen. Wenn Sie möchten, können Sie auch Anzeigebedingungen verwenden, um verschiedene Kopfzeilen für verschiedene Arten von Inhalten zu erstellen:

Dann drücken Speichern und schließen

Fußzeile

Jetzt ist es Zeit, Ihre Website-Fußzeile zu erstellen:

  • Kehren Sie zur Oberfläche des visuellen Seitenerstellers zurück
  • Klicken Sie auf die Registerkarte Fußzeile 
  • Klicken Sie auf die Schaltfläche zu Neue Fußzeile hinzufügen
  • Geben Sie im Popup Ihrer Fußzeile einen Namen und klicken Sie auf Vorlage erstellen

Jetzt sollten Sie eine Liste mit Fußzeilenvorlagen sehen, genau wie Sie es mit Ihrer Kopfzeile getan haben. Suchen Sie nach "Digital Agency" und fügen Sie die Fußzeilenvorlage ein.

Sobald Sie die Fußzeilenvorlage eingefügt haben, sollte eine Vorschau Ihrer Fußzeile angezeigt werden:

ensuite, veröffentlichen Ihre Fußzeilenvorlage und verwenden Sie die Anzeigebegriffe, um sie auf Ihrer gesamten Website anzuzeigen.

Blog-Seite

Im Gegensatz zu den statischen Seiten, die Sie in Schritt 2 erstellt haben, ist die Blog-Seite Ihrer Website ein " Archiv ". Im Grunde bedeutet dies, dass die neuesten Inhalte Ihrer Website dynamisch angezeigt werden.

Wenn ein Benutzer auf ein bestimmtes Element auf der Blog-Seite klickt, wird er zu einer Seite weitergeleitet, die den Inhalt dieses Elements anzeigt. Dies wird als "einzelne" Seite bezeichnet. Ihr einzigartiges Design stellt sicher, dass alle Ihre Inhalte gleich aussehen – das einzige, was sich ändert, ist der eigentliche Inhalt (wie Beitragstitel, Text, Beitragsbild usw.).

Entdecken So fügen Sie mit Elementor ein Inhaltsverzeichnis in WordPress hinzu

Um Archivseiten und eindeutige Seitenvorlagen zu erstellen, sollten Sie den Elementor Visual Builder verwenden - keine Zonen ! ou Artikel WordPress Standard.

Beginnen…

  • Öffnen Sie die Theme Builder-Oberfläche
  • Gehen Sie zur Registerkarte Archiv
  • Klicken Sie auf Neu hinzufügen
  • Geben Sie ihm einen Namen und klicken Sie auf Vorlage erstellen

Wie bei Ihrer Kopf- und Fußzeile wird eine Liste der Archivseitenvorlagen angezeigt. Suchen Sie nach der Vorlage „Digital Agency“ und fügen Sie sie ein.

Jetzt sollten Sie das grundlegende Design Ihrer Artikelseite sehen.

Es sollte beachtet werden, dass es normal ist, wenn Sie nur einen Artikel sehen, da WordPress nur mit einem Standardbeispiel geliefert wird, das „Hello World! ".

Im Moment müssen Sie nur noch etwas tun veröffentlichen Ihre Archivseite und stellen Sie sie so ein, dass sie in allen Archiven angezeigt wird.

Lesen Sie unseren Leitfaden weiter So migrieren Sie eine WordPress-Website manuell

Dann können Sie in Ihrem Dashboard zum Posts-Menü gehen und neue Blog-Posts erstellen. Ordnen Sie jeden Artikel einer Kategorie namens „News".

Wenn Sie jetzt zu Ihrer Blog-Seite gehen, sollten Sie automatisch alle diese neuen Posts sehen:

Erstellung der Blogpost-Vorlagenseite

An diesem Punkt sieht Ihre Blog-Seite ziemlich benutzerfreundlich aus. Wenn Sie jedoch auf einen bestimmten Blog-Beitrag klicken, stimmt das Layout nicht mit dem Rest Ihrer Website überein.

Um dieses Problem zu lösen, müssen Sie mit Elementor eine "eindeutige" Vorlage erstellen:

  • Öffnen Sie Elementor Visual Builder
  • Gehen Sie zur Registerkarte alleinstehend Posten
  • Klicken Sie auf Neu hinzufügen

Im Popup Neue Vorlage :

  • Geben Sie ihm einen Namen
  • wählen Posten in der Dropdown-Liste Wählen Sie Post Type. Dies teilt Elementor mit, dass Sie diese Vorlage für Ihre Blog-Posts verwenden möchten (im Gegensatz zu Pages oder einem anderen benutzerdefinierten Post-Typ, den Sie verwenden könnten).

Wieder sehen Sie die Elementor-Vorlagenbibliothek. Suchen Sie die eindeutige Artikelvorlage der Vorlage "Digital Agency" und fügen Sie sie ein.

Lesen Sie auch Wartungsmodus unter WordPress: Erläuterung und Konfiguration

Wenn Sie möchten, können Sie die vielen Widgets für dynamische Veröffentlichungsdaten verwenden, um das Erscheinungsbild Ihrer Seite zu steuern.

Zum Beispiel, wenn Sie das Widget ändern  Beitragsinfokönnen Sie die Metadatenelemente steuern, die wie in der Veröffentlichung angezeigt werden ...

  • Autor
  • Erscheinungsdatum
  • Bemerkungen
  • Usw.

Wenn Sie mit Ihrem Artikelmodell zufrieden sind, klicken Sie auf veröffentlichen. Anschließend können Sie die Anzeigeoptionen verwenden, sodass diese eindeutige Vorlage nur für Beiträge in der Kategorie "Jenseits von Nachrichten" gilt:

  • Wählen Sie aus der catégorie
  • Wählen Sie die Kategorie News

Dann drücken Speichern & schließen.

Jetzt sollten alle Ihre Blog-Beiträge ein Design haben, das zum Rest Ihrer Website passt.

Um die Sache zu beenden, gehen Sie zu Aussehen → Menüs und fügen Sie Ihre Blog-Seite zu Ihrem Navigationsmenü hinzu. Dazu können Sie im Abschnitt einen Link zur Kategorie „Neuigkeiten“ hinzufügen Kategorien.

Seite 404

Schließlich müssen Sie die 404-Seite Ihrer Website erstellen. Auf der 404-Seite Ihrer Website sehen Besucher, ob sie einem fehlerhaften Link folgen oder versuchen, eine nicht vorhandene Seite zu besuchen.

Entdecken Sie auch unsere 5 Wordpress-Plugins, um eine bessere Fehler zu verwalten 404

Um Ihre 404-Seite zu erstellen, verwenden Sie den visuellen Builder von Elementor, um eine weitere einzigartige Vorlage hinzuzufügen.

  • Öffnen Sie Elementor Visual Builder
  • Gehen Sie zur Registerkarte Fehler 404
  • Klicken Sie auf Neu hinzufügen
  • Fügen Sie die Vorlage für die digitale Agentur von der 404-Seite ein
404-Seite - Erstellen Sie eine komplette Website

Veröffentlichen Sie als Nächstes Ihre Vorlage, um Ihre Website fertigzustellen.

Holen Sie sich jetzt Elementor Pro!

Fazit

Hier ist ! In diesem Handbuch erfahren Sie Schritt für Schritt, wie Sie mit Elementor eine vollständige Website erstellen. wenn Sie Kommentare oder Vorschläge, zögern Sie nicht, uns im reservierten Bereich zu informieren.

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken

...

Elementor: So erstellen Sie ein mehrstufiges Formular mit Animation

Elementor: So erstellen Sie ein mehrstufiges Formular mit Animation

In diesem Artikel zeigen wir, wie man ein mehrstufiges Formular mit Lottie-Animation auf Elementor erstellt.

Der robuste visuelle Builder von Elementor wurde kürzlich um mehrstufige Formularfunktionen erweitert. Sie haben jetzt einen Formularersteller, der alle Basen abdeckt! 

Auch wenn es nicht ganz oben zu sein scheint, sollten Sie wissen, dass es sich um eine erste Version handelt und dass zwangsläufig neue Updates diese Funktionalität erweitern werden.

Mit mehrstufigen Formularen sehen Ihre Formulare nicht nur besser aus, sie bieten auch höhere Conversion-Raten, wenn Sie Informationen von den Besuchern Ihrer Website sammeln möchten.

Helfen Sie jetzt Ihren Besuchern, die Registrierung abzuschließen und Ihre Conversions mit einem mehrstufigen Formular zu verbessern.

Bessere Benutzererfahrung

Benutzer davon zu überzeugen, Ihre Formulare auszufüllen, ist keine leichte Aufgabe. Wenn Sie sie dazu ermutigt haben, Ihr Formular zu lesen und es sogar auszufüllen, müssen Sie sicherstellen, dass Sie sie beschäftigen, insbesondere da einige Formulare einschüchternd sein können.

Entdecken Sie auch unsere 10 WordPress-Plugins zum Erstellen eines Kontaktformulars

Das neue Widget für mehrstufige Formulare behandelt genau diese Frage: Ein komplexes Formular zu einem einfachen und schönen Gestaltungselement machen.

Steigerung der Conversions und Leads

Es besteht kein Zweifel, dass eine Form, die für das Auge angenehm und einfach zu navigieren ist, der Konvertierung förderlicher ist. Dies ist Ihr Ziel als Website-Builder und auch das Ziel des mehrstufigen Formular-Widgets.

Lesen Sie unseren Artikel auf So steigern Sie Ihre Conversions: Erhöhen Sie begrenzte Angebote

Mit diesem Formular können Sie die Conversion-Raten in allen Bereichen verbessern. Sie eignen sich besonders für Bereiche wie Versicherungen, Universitäten, Immobilien, Tourismus und viele mehr. Ich bin sicher, dass sie Ihnen dabei helfen werden, Formulare mit hoher Conversion und unendlicher Flexibilität zu erstellen.

Comment ça marche

Nachdem Sie ein Formular auf der Seite abgelegt haben, fügen Sie das Feld „Schritt“ hinzu. Sie werden sehen, dass ein neues Feld automatisch hinzugefügt wurde und sich optisch abhebt. Bewegen Sie das Step-Element an die Stelle, die Sie in Steps aufteilen möchten, und voila! Sie haben gerade ein mehrstufiges Formular erstellt.

Entdecken So erstellen Sie eine vollständige Website mit Elementor

Das Feld Schritt fungiert als Trennzeichen und ermöglicht Benutzern Folgendes:

  • Wählen Sie die Bühnenanzeige: Symbol, Text, Symbol und Text, Nummer, Nummer und Text, Fortschrittsbalken oder keine
  • Fügen Sie ein Symbol als Meilensteinindikator hinzu
  • Passen Sie das Erscheinungsbild von Schritten an
  • Passen Sie die folgenden und vorherigen Elemente an
  • und validieren Sie jedes Schrittfeld

Bringen Sie Ihre Website auf eine ganz neue interaktive Ebene

Haben Sie sich jemals gewünscht, dass Ihre Website noch interaktiver und ansprechender sein könnte als sie es bereits ist?

Möglicherweise haben Sie diesen Gedanken in der Vergangenheit aus mehreren Gründen aufgegeben, aber das wird sich mit der Einführung von Lottie Animations ändern. Dies ist Ihre Chance, Ihr Webdesigner-Spiel auf die nächste Stufe zu heben und aus Tausenden von Lottie-Animationen auszuwählen, die Sie Ihrer Website hinzufügen möchten.

Le Lottie Widget kann Lottie-Animationen aus verschiedenen Quellen akzeptieren, wie z LottieFiles.com. Sie können auch Ihre eigenen Animationen mit dem hinzufügen Lottiefiles Plugin oder das Bodymovin-Plugin für Adobe After Effects.

Überraschen Sie Ihre Kunden

Wenn Sie Ihre statischen Designs und Bilder laden und sie plötzlich mit Bewegung, Farbe und allen anderen Arten von Animationseffekten verjüngen, ändern Sie das Spiel.

Plötzlich wird Ihr Website-Design zum Leben erweckt. Es ist in Bewegung und interagiert damit mit dem Besucher Ihrer Website. Lottie-Animationen sind SVG, 100% reaktionsschnell und superleicht.

Erhöhen Sie die Benutzerinteraktion

Das Hinzufügen von Lottie-Animationen dauert Sekunden und kann verwendet werden, um das Engagement für jeden Teil Ihrer Website zu verbessern.

Nehmen Sie zum Beispiel Knöpfe.

Wir alle wissen, wie wichtig Handlungsaufforderungstasten sind. Mit Lottie können Sie die Interaktion Ihrer Besucher mit Schaltflächen verbessern, ohne viel Zeit mit dem Codieren und Perfektionieren von Designdetails zu verbringen.

Lesen Sie auch: Wie Benutzer Engagement auf Wordpress zu verbessern

Stellen Sie sich eine normale Schaltfläche gegenüber einer Schaltfläche mit einem animierten Pfeil vor. Welchem ​​würdest du mehr Aufmerksamkeit schenken? Es sind diese kleinen Dinge, die einen Unterschied machen, und Ihre Kunden werden den Job sicherlich zu schätzen wissen.

Mit dem Lottie-Widget können Sie mit vielen Einstellungen herumspielen, z. B. Trigger, Schleifen, Hover, Umkehranimation und Rendering-Optionen. Der Belebung Ihrer Websites sind keine Grenzen gesetzt.

Comment ça marche

  • Zugang zu lottiefiles.com und wählen Sie eine Animation
  • Laden Sie die Lottie JSON-Datei herunter
  • Ziehen Sie im Elementor-Editor in das Lottie-Widget
  • Klicken Sie auf das Symbol für die Medienbibliothek und laden Sie die Lottie JSON-Datei herunter
  • Hier ! Sie sollten die Animation sehen.

Wenn Sie eine schöne Animation erstellt haben, senden Sie uns bitte den Link im Kommentarbereich unten.

Holen Sie sich jetzt Elementor Pro!

Fazit

Das Hinzufügen von Lottie-Animationen und mehrstufigen Formularen bietet zwei großartige Möglichkeiten, um nicht nur Ihre Benutzererfahrung, sondern auch Ihre Benutzeroberfläche zu verbessern.

Da sich Webtrends ständig ändern, ist es immer wieder spannend, die Funktionalität Ihrer Website weiter zu verbessern und sich als echter Experte zu positionieren. wenn Sie Kommentare oder Vorschläge, zögern Sie nicht, uns im reservierten Bereich zu informieren.

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken

...

Elementor: So verwenden Sie den Farbsampler

Elementor: So verwenden Sie den Farbsampler

Möchten Sie den Color Sampler in Elementor verwenden?

Heute werden wir Ihnen über eine weitere sehr beliebte Funktion von Elementor berichten. Obwohl es weitgehend unterschätzt wird, hilft Ihnen diese Funktion dabei, Ihre Produktivität mit Elementor zu verbessern.

Entdecken Sie: So installieren Sie Elementor auf WordPress

Die Farbpalette einer Website ist ein wesentlicher Bestandteil von die Benutzererfahrung. Die Wahl der falschen Palette kann diese Erfahrung zu einer Katastrophe machen und Sie eine riesige Leserschaft kosten. Aber das Finden des besten Farbschemas kann nicht nur die Benutzererfahrung verbessern.

Mit dem Color Sampler können Sie Farben aus Bildern und anderen Elementen auf Ihrer Seite extrahieren, um ein perfektes Farbschema zu erstellen, das Sie auf einer einzelnen Seiten-Website oder auf Ihrer gesamten Website verwenden können.

Lesen Sie auch: So verwenden Sie den Farbwähler in Elementor

Lassen Sie uns nun fortfahren und sehen, wie diese Funktion funktioniert.

Um dieses Tutorial abzuschließen, erstellen Sie eine Seite oder eine Vorlage. Hier haben wir eine Seitenvorlage importiert. Klicken Sie dazu im Bearbeitungsfeld auf das Ordnersymbol.

So verwenden Sie den Color Sampler in Elementor

Geben Sie im angezeigten Popup in die Suchleiste "Portfolio" ein und wählen Sie das letzte Element der Ergebnisliste

Klicken Sie auf einfügen und die Vorlage wird in Ihre Seite oder Ihren Beitrag eingefügt. Im Bild unten entdecken Sie unsere Homepage.

Wir werden den blauen Hintergrund rechts mit dem Color Sampler ändern, um Farben aus dem Bild links zu extrahieren.

Klicken Sie auf Spalte bearbeiten

Klicken Sie im linken Bereich auf die Registerkarte Style und im Block Hintergrund, klicken Sie auf Hintergrundtyp Classic.

Klicken Sie dann bei der Farboption auf das Farbwähler und nach auf dem Farbmuster.

So verwenden Sie den Color Sampler in Elementor

Klicken Sie auf das Bild links, ein Popup zeigt die in diesem Bild gefundene Farbpalette. Wählen Sie die Farbe aus, die Ihnen gefällt, und der Hintergrund rechts erhält sofort diese Farbe.

So verwenden Sie den Color Sampler in Elementor

Und da haben Sie es, Sie haben ein perfektes Farbschema erstellt, das perfekt zu Ihrem Bild passt.

Holen Sie sich jetzt Elementor Pro!

Fazit

Hier ist ! Das war's für diesen Artikel, der Ihnen zeigt, wie Sie den Color Sampler in Elementor verwenden. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, flass es uns wissen im commentaires.

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...

Elementor Cloud: So erstellen Sie eine Website in 3 Minuten

Elementor Cloud: So erstellen Sie eine Website in 3 Minuten

In diesem WordPress-Tutorial erfahren Sie, wie Sie dank Elementor Cloud, einer automatisierten Lösung zum Erstellen einer Website, in nur 3 Minuten eine Website mit Elementor erstellen WordPress-Blog mit Elementor für Anfänger und erfahrene Blogger oder Webmaster.

Wenn Sie lieber dem Video-Tutorial folgen möchten, dann klicken Sie auf die Schaltfläche über dem folgenden Video:

Es war fast unmöglich, eine eigene Website zu erstellen, ohne das Programmieren zu lernen oder einen Entwickler einzustellen. Dank Plattformen wie WordPress und Plugins wie Elementor ist das, was einst unmöglich war, jetzt Realität.

In diesem Tutorial zeigen wir Ihnen, wie Sie mit WordPress und Elementor eine neue Website erstellen, und führen Sie Schritt für Schritt durch den Prozess.

Aber vorher laden wir Sie zum Entdecken ein So installieren Sie Elementor auf WordPress oder So installieren (fügen) Sie ein Plugin in WordPress hinzu

Erstellen Sie eine WordPress-Website mit Elementor

WordPress ist ein leistungsstarkes Content-Management-System, das kostenlos heruntergeladen und verwendet werden kann und mit dem Sie jede Art von Website erstellen können; von einfachen persönlichen Blogs und kleinen Unternehmenswebsites bis hin zu großen Unternehmenswebsites und funktionsreichen Apps. 

Elementor, auf der anderen Seite, ist ein benutzerfreundlicher und dennoch robuster Seitenersteller, der es jedem leicht macht, seine Website zu erstellen, egal wie komplex sie ist.

In diesem Tutorial zeigen wir Ihnen, wie Sie mit der neuen Elementor Cloud-Plattform in drei Minuten eine WordPress-Website erstellen. Der Name mag stark sein, aber die Lösung ist wirklich automatisiert und für jeden Anfänger einfach.

Das allererste, was Sie tun müssen, ist, zur Elementor-Seite zu gehen und zum Ende der Seite zu gehen und den Elementor Cloud-Link zu finden.

Erstellen Sie eine Website mit Elementor Cloud

Sie werden auf eine neue Seite weitergeleitet. Scrollen Sie nach unten und finden Sie den Abschnitt KEINE VERSTECKTEN FEEN. Klicken Sie rechts auf den Button JETZT KAUFEN Wie im Bild unten.

Erstellen Sie eine Website mit Elementor

Die Zahlungsseite wird geöffnet und Sie werden aufgefordert, Ihre E-Mail-Adresse einzugeben. Klicken Sie nach der Eingabe auf die Schaltfläche CREATE ACCOUNT

Erstellen eines Elementor-Cloud-Kontos

Geben Sie dann auf der nächsten Seite das Land, das Bundesland, die Adresse, die Postleitzahl usw. ein und klicken Sie dann auf die Schaltfläche Fortfahren

Wählen Sie danach die Zahlungsmethode aus. Sie können zwischen Kreditkarte oder PayPal wählen. Wir haben uns für die Methode entschieden PayPal.

Klicken Sie rechts auf Ihrem Bildschirm auf die gelbe PayPal-Schaltfläche.

Un Pop-up wird geöffnet und Sie werden aufgefordert, Ihre PayPal-Anmeldeinformationen einzugeben und zu bestätigen.

Wenn der Vorgang erfolgreich war, werden Sie auf die Dankesseite mit zwei Schaltflächen weitergeleitet. Der erste Gehen Sie zu Mein Konto führt Sie zu Ihrem Konto und zum zweiten Beginnen Sie mit der Erstellung Ihrer Website zur automatisierten Erstellung Ihrer Website.

Klicken Sie auf die zweite Schaltfläche. Sie haben Anspruch auf ein neues Popup, das Sie auffordert, den Namen Ihrer Website einzugeben. Bestätigen Sie mit einem Klick auf Nächste Seite.

Warten Sie, bis der automatische Vorgang zum Erstellen Ihrer Website beendet ist, und klicken Sie dann auf die Schaltfläche Lass uns gehen!

Klicken Sie auf Got It wie im Bild unten.

Klicken Sie auf Open WP Dashboard, um Ihr Dashboard zu öffnen.

Klicken Sie im neuen Begrüßungs-Popup auf die Schaltfläche Verwenden Sie ein Website-Kit

Sie werden aufgefordert, eine Website-Vorlage aus der von Elementor angebotenen Liste auszuwählen. Sie haben die Möglichkeit, sie nach Kategorie zu filtern, indem Sie links auf eine davon klicken.

Erstelle einen WordPress-Blog mit Elementor

Wenn Sie das Modell gefunden haben, das Ihren Vorstellungen entspricht, fahren Sie mit dem Mauszeiger darüber, ein neuer Button erscheint, klicken Sie auf Demo ansehen

Erstelle einen WordPress-Blog mit Elementor

Sie werden sehen können, was dieses Modell bietet. Sie können auf allen Seiten dieses Modells navigieren und wenn Sie damit zufrieden sind, klicken Sie auf die Schaltfläche Kit anwenden der die Vorlage auf Ihrer Website installiert.

Wenn nicht, die Taste Zurück zur Bibliothek bringt Sie zurück zur Liste der Vorlagen und Sie können eine andere anzeigen.

Nach dem Klicken auf Kit anwenden, werden Sie in einem Bestätigungs-Popup gefragt, ob Sie wirklich dieses gesamte Modell oder nur einige Seiten installieren möchten. Sie können klicken Alle anwenden ou Customize um Ihre Auswahl anzupassen.

Eine Zusammenfassung Ihrer Auswahl wird angezeigt, klicken Sie auf Nächste Seite

Erstelle einen WordPress-Blog mit Elementor

Zum Schluss klicken Sie auf Zurück zum Dashboard , um zu Ihrem Website-Dashboard zurückzukehren.

Klicken Sie auf Ihrem Dashboard auf Name meiner Website oben und links von Ihrem Bildschirm, dann auf VWebsite besuchen um zu sehen, wie Ihre Website funktioniert.

Und hier haben Sie gerade Ihre Website auf WordPress mit Elementor Cloud erstellt.

Alles, was Sie noch tun müssen, ist, es nach Ihren Wünschen anzupassen. Dafür bieten wir eine Elementor-Tutorial-Paket zu deren Entdeckung wir Sie einladen.

Wenn Sie mit diesem Leitfaden fertig sind, möchten Sie vielleicht unsere anderen Leitfäden und Tutorials für spezifischere Seiten lesen.

Mit diesen Tutorials können Sie Ihre Website verbessern und das Beste aus ihr herausholen.

Holen Sie sich jetzt Elementor Pro!

Fazit

So ! Das war es für diesen Artikel, der Ihnen zeigt, wie Sie in 3 Minuten eine Website mit Elementor erstellen. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, lassen Sie es uns innerhalb wissen commentaires.

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...

Elementor: So fügen Sie einen Schaltflächen-Soundeffekt hinzu

Elementor: So fügen Sie einen Schaltflächen-Soundeffekt hinzu

Müssen Sie herausfinden, wie Sie Elementor einen Schaltflächen-Soundeffekt hinzufügen können? Finden Sie es in diesem Artikel heraus.

Sehen Sie diese 2 Schaltflächen?

Wenn Sie auf klicken Von der Katze, es wird miauen, und wenn Sie auf die Schaltfläche klicken chien, wird es ein bellendes Geräusch erzeugen. In diesem Artikel zeigen wir Ihnen, wie Sie hinzufügen Elementor ein Soundeffekt für die Schaltfläche, wenn sie angeklickt wird.

So fügen Sie der Schaltfläche in Elementor einen Soundeffekt hinzu

Schritt 1: Erstellen Sie eine Schaltfläche

Zuerst müssen Sie die Schaltfläche erstellen. Sie können die Schaltfläche nach Ihren Wünschen anpassen, da Elementor viele Optionen bietet, um Ihre Schaltfläche schön aussehen zu lassen.

Sobald die Schaltfläche fertig ist, bereiten Sie nun den Soundeffekt für die Schaltfläche vor und laden Sie ihn in die WordPress-Medienbibliothek hoch. Sie können das MP3- oder WAV-Dateiformat für Soundeffekte verwenden.

Um die Sounddatei in die WordPress-Medienbibliothek hochzuladen, navigieren Sie zum WordPress-Dashboard und klicken Sie auf Medien -> Hinzufügen. Sie können die Dateien ziehen und ablegen oder klicken Dateien auswählen um sie hochzuladen.

Schaltflächen-Soundeffekt auf Elementor

Sobald die Dateien heruntergeladen sind, gehen Sie zur Medienbibliothek und klicken Sie auf einen der Sounds, dann im angezeigten Fenster auf Kopieren die Datei-URL um den Link für den Soundeffekt zu erhalten.

Schaltflächen-Soundeffekt auf Elementor

Schritt 3: Fügen Sie den folgenden HTML-Code hinzu

Um Ton von der Schaltfläche zu erzeugen, müssen wir den folgenden HTML-Code verwenden.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  //Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends
});
</script>

Fügen Sie im Canvas-Bereich ein HTML-Widget hinzu und fügen Sie den Code in den Block ein HTML-Code.

Verwenden Sie zum Ersetzen Ihren Soundeffekt-Link Sound-Effekt-URL in der Anleitung

var audio1 = new Audio('Sound-Effect-URL')

Wählen Sie die CSS-Klassen für die Schaltfläche aus und ändern Sie den Code der CSS-Klasse der Schaltfläche

$(".button-class").mousedown

Nach der Änderung des Codes sieht es so aus.

Schaltflächen-Soundeffekt auf Elementor

Schritt 4: Fügen Sie der Schaltfläche eine CSS-Klasse hinzu

Um die Schaltfläche mit den Codes zu verbinden, müssen wir der Schaltfläche CSS-Klassen hinzufügen, damit der Code weiß, auf welche Schaltfläche geklickt wird, und die Soundeffekte auslöst.

Schaltflächen-Soundeffekt auf Elementor

Und das ist für eine Taste mit einem Soundeffekt. Sie können jetzt Ihren Button anpassen. Und wenn Sie weitere Schaltflächen mit Soundeffekten hinzufügen möchten, können Sie einen Teil des Codes kopieren und ein wenig ändern.

Zusätzliche Schaltflächen mit Soundeffekten hinzugefügt

Erstellen Sie die Schaltfläche oder kopieren Sie die vorhandene Schaltfläche

Sie können die vorhandene Schaltfläche kopieren, indem Sie mit der rechten Maustaste auf die vorhandene Schaltfläche klicken und Kopieren auswählen und sie dann in einen beliebigen Abschnitt einfügen, indem Sie mit der rechten Maustaste in diesen Abschnitt klicken.

Schaltflächen-Soundeffekt auf Elementor

Kopieren Sie einen Teil des Codes und passen Sie die Variablen und den CSS-Klassennamen der zweiten Schaltfläche an

Lassen Sie uns einige Teile des vorherigen HTML-Codes kopieren, die den Soundeffekt auslösen, es ist der folgende Code unten

//Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends

Nachdem Sie den Code kopiert haben, fügen Sie ihn direkt darunter ein von Audio 1 endet. Ändern Sie die Variable audio1 und der gesamte Code, der die Variable verwendet audio1 auf den neu erstellten Code in audio2.

Siehe auch: Elementor: So erstellen Sie eine Effektkarte aus einem Portfolio

Ersetzen Sie dann die Soundeffekt-URL, wenn Sie einen neuen Soundeffekt für die neue Schaltfläche verwenden, und ändern Sie den Code Knopf Klasse in Ihren neu erstellten Schaltflächen-CSS-Klassen.

Der endgültige Code sieht wie im folgenden Bild aus.

Schaltflächen-Soundeffekt auf Elementor

Ersetzen Sie den CSS-Klassennamen der Schaltfläche

Schaltflächen-Soundeffekt auf Elementor

Ihre neu erstellte Schaltfläche hat auch einen Soundeffekt, wenn Sie darauf klicken. Sie können so viele erstellen, wie Sie möchten.

Audioelemente gehören zu den großartigen Ergänzungen einer Website. Sie stellen nicht nur ein attraktives Element für Websites dar, sondern tragen auch dazu bei, einen bleibenden Eindruck beim Endbenutzer zu hinterlassen.

Lesen Sie auch: Elementor: So migrieren Sie eine WordPress-Website

Die Aktion oder das Ergebnis sollte jedoch nur dann von Ton begleitet werden, wenn es eine wichtige Botschaft an den Benutzer deutlich verstärkt oder verdeutlicht. Informieren Sie den Benutzer über etwas, das seine Aufmerksamkeit erfordert, damit es sich nicht negativ auf Ihre Website auswirkt.

Holen Sie sich jetzt Elementor Pro!

Fazit

So ! Das war es für diesen Artikel, der Ihnen zeigt, wie Sie Schaltflächen-Soundeffekte auf Elementor hinzufügen. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, lassen Sie es uns innerhalb wissen commentaires.

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...