ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen

    7 Möglichkeiten, die Größe von PDF-Dateien zu reduzieren

    Warum die meisten Blogging-Ratschläge fehlschlagen (und wie man sie behebt)

    7 wesentliche Fragen, die sich jeder Blogger stellen muss

    So schreiben Sie Inhalte, die Ihre Leser dazu bringen, mehr zu wollen

    Was tun, wenn Ihr Blog gehackt wird

    So schreiben Sie schneller: 10 einfache Tipps, um Ihre Schreibleistung zu verdoppeln

    Wie man Trends produktiv überwacht und berichtenswerte Inhalte schreibt

    So planen Sie Inhalte wie Walter Bishop

    So schreiben Sie den ultimativen Blog-Beitrag: Der Spickzettel eines Bloggers

  • WordPress
    • All
    • Plugins
    • Themes

    So fügen Sie ein Schema für mehrere Standorte für lokale Unternehmen in WordPress hinzu

    Die 11 besten Amazon-Affiliate-WordPress-Themes 2022

    Die 5 besten NFT-WordPress-Themes 2022

    So fügen Sie Zusammenarbeit im WordPress-Blockeditor hinzu (Google-Doc-Stil)

    So akzeptieren Sie Google Pay in WordPress (der einfache Weg)

    Die 9 besten WordPress-Themes zur Lead-Generierung 2022

    So passen Sie die Ergebnisseite der WooCommerce-Produktsuche an

    So erstellen Sie ein zusammenklappbares Seitenleistenmenü in WordPress (der einfache Weg)

    So fügen Sie „Jetzt kaufen, später bezahlen“-Zahlungspläne zu WordPress hinzu

  • E-Mail Marketing

    So verwenden Sie Gast-Blogging, um Ihre E-Mail-Liste zu erstellen

    Die E-Mail-Marketing-Kennzahlen, auf denen jede Kampagne basieren sollte

    So verwenden Sie ein Kontaktformular, um Ihre E-Mail-Liste zu erstellen

  • SEO

    So beheben Sie Fehler vom Typ 404 von benutzerdefinierten Beiträgen in WordPress

    Erhöhen Sie den Traffic auf Ihrer WordPress-Site in 6 einfachen Schritten

    Wie man automatisch externe Links in WordPress Nofollow macht

    Wie man in Suchmaschinen einen höheren Rang erreicht

    So entfernen Sie defekte Links für immer von Ihrer WordPress-Site

    SEO-Anfängerleitfaden: Intro, Prep & Jargon

    WordPress Keyword-Recherche und -Nutzung für SEO

    Verbessern Sie SEO mit Backlinks, Seitengeschwindigkeit und mehr

    Die 10 wichtigsten Funktionen von Yoast SEO für WordPress

  • Soziale Netzwerke

    So fügen Sie einem Instagram-Post eine Erinnerung hinzu

    So planen Sie kostenlos Pinterest-Pins

    Wie man auf Instagram viral wird: Der Leitfaden für Anfänger

    5 großartige Möglichkeiten, Ihre Social-Media-Updates zu diversifizieren, um mehr Traffic und Engagement zu generieren

    Können Sie Instagram verwenden, um Ihr Geschäft auszubauen?

    6 effektive Möglichkeiten, sich in sozialen Medien zu vermarkten

    6 intelligente Instagram-Marketing-Tipps, um Ihr Geschäft anzukurbeln

    So konvertieren Sie Ihr persönliches Instagram-Profil in ein Unternehmensprofil

    Shorby Review: Steigern Sie den Traffic von Social Media mit Landing Pages + mehr

  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
No Result
View All Result
  • Bloggen

    7 Möglichkeiten, die Größe von PDF-Dateien zu reduzieren

    Warum die meisten Blogging-Ratschläge fehlschlagen (und wie man sie behebt)

    7 wesentliche Fragen, die sich jeder Blogger stellen muss

    So schreiben Sie Inhalte, die Ihre Leser dazu bringen, mehr zu wollen

    Was tun, wenn Ihr Blog gehackt wird

    So schreiben Sie schneller: 10 einfache Tipps, um Ihre Schreibleistung zu verdoppeln

    Wie man Trends produktiv überwacht und berichtenswerte Inhalte schreibt

    So planen Sie Inhalte wie Walter Bishop

    So schreiben Sie den ultimativen Blog-Beitrag: Der Spickzettel eines Bloggers

  • WordPress
    • All
    • Plugins
    • Themes

    So fügen Sie ein Schema für mehrere Standorte für lokale Unternehmen in WordPress hinzu

    Die 11 besten Amazon-Affiliate-WordPress-Themes 2022

    Die 5 besten NFT-WordPress-Themes 2022

    So fügen Sie Zusammenarbeit im WordPress-Blockeditor hinzu (Google-Doc-Stil)

    So akzeptieren Sie Google Pay in WordPress (der einfache Weg)

    Die 9 besten WordPress-Themes zur Lead-Generierung 2022

    So passen Sie die Ergebnisseite der WooCommerce-Produktsuche an

    So erstellen Sie ein zusammenklappbares Seitenleistenmenü in WordPress (der einfache Weg)

    So fügen Sie „Jetzt kaufen, später bezahlen“-Zahlungspläne zu WordPress hinzu

  • E-Mail Marketing

    So verwenden Sie Gast-Blogging, um Ihre E-Mail-Liste zu erstellen

    Die E-Mail-Marketing-Kennzahlen, auf denen jede Kampagne basieren sollte

    So verwenden Sie ein Kontaktformular, um Ihre E-Mail-Liste zu erstellen

  • SEO

    So beheben Sie Fehler vom Typ 404 von benutzerdefinierten Beiträgen in WordPress

    Erhöhen Sie den Traffic auf Ihrer WordPress-Site in 6 einfachen Schritten

    Wie man automatisch externe Links in WordPress Nofollow macht

    Wie man in Suchmaschinen einen höheren Rang erreicht

    So entfernen Sie defekte Links für immer von Ihrer WordPress-Site

    SEO-Anfängerleitfaden: Intro, Prep & Jargon

    WordPress Keyword-Recherche und -Nutzung für SEO

    Verbessern Sie SEO mit Backlinks, Seitengeschwindigkeit und mehr

    Die 10 wichtigsten Funktionen von Yoast SEO für WordPress

  • Soziale Netzwerke

    So fügen Sie einem Instagram-Post eine Erinnerung hinzu

    So planen Sie kostenlos Pinterest-Pins

    Wie man auf Instagram viral wird: Der Leitfaden für Anfänger

    5 großartige Möglichkeiten, Ihre Social-Media-Updates zu diversifizieren, um mehr Traffic und Engagement zu generieren

    Können Sie Instagram verwenden, um Ihr Geschäft auszubauen?

    6 effektive Möglichkeiten, sich in sozialen Medien zu vermarkten

    6 intelligente Instagram-Marketing-Tipps, um Ihr Geschäft anzukurbeln

    So konvertieren Sie Ihr persönliches Instagram-Profil in ein Unternehmensprofil

    Shorby Review: Steigern Sie den Traffic von Social Media mit Landing Pages + mehr

  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
No Result
View All Result
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
No Result
View All Result
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
Home Tipps

Tipps zur Beschleunigung des Designprozesses mit Elementor

8 Monaten ago
in Tipps
Reading Time: 7 mins read
A A
0
Auf Facebook teilenAuf Twitter teilen

Es ist kein Geheimnis, dass Elementor heute einer der besten Seitenersteller in der WordPress-Community ist. Und es ist nicht mehr nur ein Page Builder. Elementor hat sich so weiterentwickelt, dass Sie selbst mit einem kostenlosen, grundlegenden WordPress-Theme voll funktionsfähige Websites erstellen können, ohne eine einzige Codezeile schreiben zu müssen!

Während Elementor viele Optionen und Anpassungsmöglichkeiten bietet, verpassen wir oft die kleineren Details und Teile des Plugins, die einen großen Einfluss auf den Designprozess einer Website haben können.

Das Entwerfen von Webseiten mit Elementor ist bereits schnell und einfach, aber wenn Sie den Gestaltungsprozess beschleunigen möchten, dann sind Sie hier richtig. In diesem Artikel erfahren Sie, wie Sie den Designprozess mit Elementor beschleunigen können, indem Sie den Editor mit Tools von Drittanbietern vollständig nutzen.

Beginnen Sie mit vorgefertigten Vorlagen

Vorgefertigte Vorlagen können die Entwicklung Ihres Projekts beschleunigen. Das Entwerfen neuer Seiten von Grund auf braucht Zeit, und meistens verlieren Sie diese Zeit, während Sie ständig das Layout und die Stile der Seite anpassen. Genau hier kommen Vorlagen zum Einsatz. Die Vorlagenbibliothek von Elementor ist eine großartige Ressource, um den Designprozess zu beschleunigen. Auch wenn Sie keine vorgefertigte Vorlage verwenden, können Sie immer die Vorlagenbibliothek als Inspiration verwenden. Vorlagen können einfach mit einem einzigen Klick direkt auf die Seite importiert werden.

Elementor-Vorlagen können in zwei Teile unterteilt werden. Wenn Sie beispielsweise eine vorgefertigte Seite von oben nach unten importieren möchten, können Sie eine ganze Seite (wie eine Info- oder Kontaktseite) mit ihrem gesamten Inhalt importieren. Die zweite Option ist, wenn Sie nur einen Abschnitt oder Block des Designs importieren möchten. Sie können dies tun, wenn Ihnen beispielsweise einer der Abschnitte von Services, Hero, Kontakt oder Abonnieren von Abschnitten gefällt.

Wunderbare kostenlose und Premium-Sammlungen von Vorlagen sind im Internet leicht verfügbar.

Envato-Markt

Envato-Markt

Der Envato-Markt ist wahrscheinlich der beliebteste Marktplatz nicht nur für Elementor-Vorlagen, sondern auch für WordPress-Themes und -Plugins.

TemplateMonster

TemplateMonster

TemplateMonster ist ein weiterer Anbieter von qualitativ hochwertigen Vorlagen-Assets, sie haben auch einige kostenlose Vorlagen.

Elementor Vorlagenbibliothek

Elementor Vorlagenbibliothek

Elementor-Vorlagenbibliothek – Ist ein natives Vorlagen-Warehouse für Elementor, neue kostenlose und Premium-Vorlagen erscheinen sehr oft.

Benutze Hotkeys

Wenn Sie mit Elementor nur mit der Maus arbeiten, dann hören Sie bitte auf! Verbringen Sie 10 Minuten damit, Shortcodes zu lernen, was Ihnen eine Menge Zeit spart und den Designprozess Ihrer Website beschleunigt. Abgesehen von den einfachen wie Kopieren und Einfügen können Sie auch erweiterte benutzerdefinierte Verknüpfungen verwenden. Sie können äußerst nützlich sein, insbesondere wenn Sie zwischen dem Bedienfeld und dem Vorschaumodus navigieren oder zur mobilen Bearbeitung wechseln möchten.

Hier ist eine Liste von Verknüpfungen, die die Geschwindigkeit der Gestaltung Ihrer Website erheblich steigern können:

Aktionen

Rückgängig machen Strg / Cmd + Z Auf der Seite vorgenommene Änderungen rückgängig machen
Wiederholen Strg / Cmd + Umschalt + Z Wiederholen Sie alle Änderungen, die auf der Seite vorgenommen wurden
Kopieren Strg / Cmd + C Kopieren Sie einen Abschnitt, eine Spalte oder ein Widget
Paste Strg / Cmd + V Einen Abschnitt, eine Spalte oder ein Widget einfügen
Stil einfügen Strg / Cmd + Umschalt + V Fügen Sie den Stil eines Abschnitts, einer Spalte oder eines Widgets ein
Löschen Löschen Löschen Sie einen Abschnitt / eine Spalte / ein Widget, das bearbeitet wird
Duplikat Strg / Cmd + D Duplizieren Sie einen Abschnitt / eine Spalte / ein Widget, das bearbeitet wird
Speichern Strg / Cmd + S Speichern Sie Ihre Seite im Überarbeitungsverlauf

Gehe zu

Panel / Vorschau Strg / Cmd + P Wechseln Sie zwischen dem Bedienfeld und der Vorschauansicht
Mobile Bearbeitung Strg / Cmd + Umschalt + M Wechseln Sie zwischen Desktop-, Tablet- und Mobilansichten
Geschichte Strg / Cmd + Umschalt + H Gehen Sie zum Verlaufsfenster
Navigator Strg / Cmd + I Öffnet den Navigator
Vorlagenbibliothek Strg / Cmd + Umschalt + L Öffnet unsere Vorlagenbibliothek modal
Tastatürkürzel Strg / Cmd + ? Öffnet das Hilfefenster für Tastenkombinationen
Aufhören ESC Öffnet Einstellungen und springt zu Exit to Dashboard

Benutzerdefiniertes CSS für Seiten

Wussten Sie, dass Sie für jede Seite benutzerdefiniertes CSS haben können? Ja, aber beachten Sie, dass diese Funktion nur in der Pro-Version von Elementor enthalten ist. Um dies zu umgehen, zeige ich Ihnen, wie Sie benutzerdefiniertes CSS für jede Seite einfügen. Mit diesem Trick sparen Sie Geld, wenn Sie die Pro-Version nur zum Hinzufügen kleiner Anpassungen auf Seitenebene verwenden möchten.

Dazu müssen Sie nur das HTML-Widget und diesen Code darin verwenden:

<style>
/*Your custom CSS code here*/
.elementor p {
color: red; 
font-size: 25px; 
text-decoration: underline;
line-height: 40px;
}
</style>

Schauen Sie sich dieses Beispiel an:

Benutzerdefinierter Code

Elementor Finder-Suchleiste

Wenn Sie an der Seitengestaltung arbeiten, möchten Sie sehr oft zu anderen Seiten, Einstellungen, einer Verkaufsseite oder irgendwo anders springen, und es kann zeitaufwändig sein, wenn Sie: die Seite speichern > zurück zu Ihrem Dashboard gehen > Seiten öffnen > Suchen Sie nach der Seite, die Sie öffnen möchten. Dies kann viel Zeit und Energie verschwenden, wenn Sie es immer wieder tun mussten.

Glücklicherweise verfügt Elementor über eine integrierte Lösung, um den Designprozess zu rationalisieren und zu beschleunigen. Anstatt sich all diese Mühe zu machen, können Sie einfach den Elementor Finder verwenden. Sie können direkt zu allen Einstellungen, Vorlagen, Seiten oder Themenbereichen springen, indem Sie in der Suchleiste suchen. Der Finder kann durch Klicken auf die Tasten Cmd/Strg + E an einer beliebigen Stelle im WordPress-Dashboard aufgerufen werden. Sehen Sie sich dieses Video an, um zu sehen, was Sie mit dem Finder tun können.

Navigator verwenden

Navigator ist ein Navigationsbaumfenster, das einfachen Zugriff auf jedes Element im Seitenersteller bietet. In diesem kleinen Fenster können Sie durch die Elemente navigieren und die Widgets einfach per Drag & Drop verschieben.

Navigator ist besonders nützlich für lange Seiten oder Seiten mit komplexem mehrschichtigem Design und für Elemente, die den Z-Index ohne Rand, absolute Position usw. kombinieren. Er ermöglicht Ihnen den Zugriff auf Elementgriffe, die möglicherweise hinter anderen Elementen positioniert sind.

Sie können auf den Navigator auf eine von 3 einfachen Weisen zugreifen:

  1. Klicken Sie mit der rechten Maustaste auf ein beliebiges Element und klicken Sie dann auf Navigator. Dadurch werden Sie automatisch zu dem jeweiligen Element im Navigationsbaum weitergeleitet.
  2. Klicken Sie in der Fußzeile des Panels auf die Schaltfläche Elemente.
  3. Verwenden Sie die Tastenkombination Cmd/Strg + I.

Sehen Sie sich dieses Video an, um es in Aktion zu sehen:

Navigator hat auch einige andere Funktionen, wie das Benennen von Widgets, das Ein- und Ausklappen von Widgets, das Schweben oder Andocken des Panels und das Ein- oder Ausblenden von Widgets. Sie können eine vollständige Rezension in ihrem sehen Dokumentation.

Definieren Sie Ihre Farbpalette

Normalerweise folgen wir beim Design einer Website einem vom Designer erstellten Designmuster. Dieses Muster enthält normalerweise eine Kombination der Farben, die sich über die gesamte Site wiederholen. Dies sind Markenfarben, die unverändert bleiben sollten. Dies bedeutet, dass wir jedes Mal, wenn wir ein neues Widget auf der Seite hinzufügen, den Farbcode kopieren und einfügen oder uns an den Farbcode erinnern müssen, um ihn in der Widget-Einstellung anzuwenden. Dies kann zeitaufwendig sein. Glücklicherweise hat Elementor eine Lösung für uns.

Sie können Ihre Markenfarben in den Color Picker-Einstellungen definieren und sie jedes Mal wiederverwenden, wenn Sie auf Farboptionen für das Widget-Styling zugreifen. Wählen Sie einfach eine voreingestellte Palette oder definieren Sie Ihre eigenen benutzerdefinierten Farben, um beim Entwerfen Zeit zu sparen.

Schauen Sie sich dieses Video an:

Vorgefertigte und wiederverwendbare Widget-Stile und -Vorlagen

Elementor ist einer der besten Seitenersteller, aber haben Sie über die Standard- und hässlichen Schaltflächen nachgedacht? Registerkarten? Menüs? Oder ein anderes Widget? Diese Standard-Widgets sehen aus, als wären sie vor einigen Jahren entworfen worden, oder wollten Sie vielleicht Widgets, die Sie in Projekt A gestaltet haben, in Projekt B wiederverwenden?

Derzeit können Sie mit Elementor keine Widget-Stile für zukünftige Projekte speichern und wiederverwenden. Zum Glück das kostenlose WunderWP Plugin bietet einige Möglichkeiten, dieses Problem zu lösen.

Zunächst einmal enthält WunderWP eine Reihe von voreingestellten Widget-Stilen, die Ihnen zur Verfügung stehen. Vorgefertigte Stile für Überschriften, Galerien, Schaltflächen, Trennwände, Karussells, Formulare, Preistabellen und mehr sind mit einem Klick verfügbar. Ziehen Sie einfach ein Elementor-Widget auf Ihre Seite, wählen Sie einen vorgefertigten WunderWP-Widget-Stil aus und beginnen Sie mit dem Hinzufügen von Inhalten.

WunderWP-Voreinstellungen

Mit WunderWP können Sie auch ganz einfach Ihre eigenen Widget-Stile in Elementor speichern und wiederverwenden. Es ist ganz einfach: Stilisieren Sie ein Widget, speichern Sie es in der WunderWP Cloud (die kostenlos ist!) und verwenden Sie es später für ähnliche Widgets. Dies funktioniert sowohl für einfache als auch für komplizierte Widgets. Sie können dies beispielsweise verwenden, um ein Überschriften-Widget zu speichern, das unterschiedliche typografische Werte enthält, oder für ein Bild-Widget mit benutzerdefinierten Schlagschatten.

WunderWP benutzerdefinierte Stile

Dasselbe gilt für Vorlagen – Sie können vollständige oder teilweise erstellte Vorlagen in der WunderWP Cloud speichern. Die Vorlage ist vorhanden, sodass Sie sie, wenn Sie fertig sind, problemlos in eine Seite oder Website einfügen können. Auf diese Weise müssen Sie es nur einmal erstellen, was Ihnen viel Zeit spart.

Benutzerdefinierte WunderWP-Vorlage

Oder Sie nutzen die vorgefertigten Inhaltsvorlagen von WunderWP. Derzeit gibt es über 50 vorgefertigte Abschnittsvorlagen – wie Kontakt, Handlungsaufforderung, Kopfzeile, Fußzeile, Dienste, Info, Team, Dienste, Countdown und vieles mehr – für eine Vielzahl von Zwecke.

WunderWP vorgefertigte Vorlage

Einpacken

Bis zu diesem Zeitpunkt ist Elementor ohne Zweifel einer der besten WordPress-Seitenersteller auf dem Markt. Fast jeden Tag werden neue Tools und Funktionen hinzugefügt, um den Designprozess zu rationalisieren und zu beschleunigen und die Projektlieferzeit zu verkürzen.

Welcher Tipp ist Ihrer Meinung nach der hilfreichste und welchen kannten Sie vorher nicht? Vielleicht wissen Sie auch etwas, was hier nicht erwähnt wird? Bitte teilen Sie es mit anderen.

Share26Tweet16Send
Previous Post

So schreiben Sie Inhalte, die Ihre Leser dazu bringen, mehr zu wollen

Next Post

So erstellen Sie ein Online-Portfolio mit WordPress (und dem Gesamtthema)

Related Posts

Angebote

Dieser unglaubliche Galaxy S22-Vertrag ist billiger als der Kauf des Telefons

6 Stunden ago
Technik

Du kannst jetzt ein Pixel mit offiziellen Teilen von Google und iFixit reparieren

20 Stunden ago
Wie man

iOS 16: So ändern Sie die Uhr des Sperrbildschirms in arabische Ziffern

20 Stunden ago
Load More
Next Post

So erstellen Sie ein Online-Portfolio mit WordPress (und dem Gesamtthema)

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

EMPFOHLEN

Epson EcoTank ET-3850 im Test

4 Monaten ago

Apple Watch-Symbole und -Symbole: Meistere deine Apple Watch 7 oder frühere Modelle

6 Monaten ago

Duux Threesixty 2 Rezension

5 Monaten ago

So gewinnen Sie jedes Mal Apple Watch-Wettbewerbe

4 Monaten ago
ThemeLocal – Blog-Tipps, die wie von Zauberhand funktionieren

Wir helfen klugen Unternehmern, ihre Blogs in profitable Geschäfte zu verwandeln. Wir sind ein preisgekrönter Blog, der seit 2020 Bloggern und Unternehmern hilft.

Folge uns

Neueste Nachrichten

So beheben Sie den Fehler, dass Philips Hue-Leuchten nicht erreichbar sind

Juni 30, 2022

So sehen Sie Wimbledon 2022 in 4K HDR in Großbritannien – Infos zum UHD-Stream hier

Juni 30, 2022
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt

© 2022 ThemeLocal. Tous droits réservés.

No Result
View All Result
  • Bloggen
  • WordPress
    • Plugins
    • Themes
  • Shopify
  • E-Mail Marketing
  • Monetarisierung
  • SEO
  • Soziale Netzwerke
  • Tutorials
  • Bewertungen
  • Tipps
  • Sicherheit
  • Software und Dienste
  • Verkehrserzeugung
  • Anfängerleitfaden
  • Showcase

© 2022 ThemeLocal. Tous droits réservés.