ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Search
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
Lektüre: Tipps zur Beschleunigung des Designprozesses mit Elementor
Aktie
Benachrichtigung Zeig mehr
Neuesten Nachrichten
iOS 16.4 Beta: So aktivieren Sie die Sprachisolation für Mobiltelefonanrufe
Wie man
Bewertung: OWC ThunderBay 8 bietet hochvolumigen, leistungsstarken Mac-Speicher
Technische Bewertungen
So erstellen Sie ein GIF in Photoshop
Wie man
Vollformat vs. APS-C: Welchen Kamerasensor sollten Sie wählen?
Gegen
Currys hat gerade das bisher beste Pixel 7-Bundle veröffentlicht
Angebote
Aa
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Aa
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
Search
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Folge uns
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren > Blog > Tipps > Tipps zur Beschleunigung des Designprozesses mit Elementor
Tipps

Tipps zur Beschleunigung des Designprozesses mit Elementor

Zuletzt aktualisiert: November 17, 2021 8:24 pm
ThemeLocal vor 1 Jahr 12 Minuten Mindestlesezeit
Aktie
12 Minuten Mindestlesezeit
Aktie

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!

Contents
Beginnen Sie mit vorgefertigten VorlagenEnvato-MarktTemplateMonsterElementor VorlagenbibliothekBenutze HotkeysAktionenGehe zuBenutzerdefiniertes CSS für SeitenElementor Finder-SuchleisteNavigator verwendenDefinieren Sie Ihre FarbpaletteVorgefertigte und wiederverwendbare Widget-Stile und -VorlagenEinpacken

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.

Verwandter Beitrag

SharePlay: So trainieren Sie mit Freunden mit Apple Fitness Plus

Mit diesem SIM-Karten-Schnäppchen erhalten Sie 60 GB Daten für nur 10 £

Fokusmodus funktioniert nicht? Probieren Sie diese 8 Tipps zur Fehlerbehebung aus

Mit diesem Angebot erhalten Sie eine Heißluftfritteuse für nur 34,99 £

Wie man Siri beibringt, einen Namen zu sagen, indem man die phonetische Schreibweise zur Kontakte-App hinzufügt

MARKIERTE: Beschleunigung, des, Designprozesses, Elementor, mit, Tipps, zur
ThemeLocal November 17, 2021
Teile diesen Artikel
Facebook Twitter Pinterest Whatsapp Whatsapp
Aktie
Was denkst du?
Liebe0
Traurig0
Glücklich0
Schläfrig0
Wütend0
kein Kommentar0
Zwinkern0
Vorheriger Artikel So schreiben Sie Inhalte, die Ihre Leser dazu bringen, mehr zu wollen
Nächster Artikel So erstellen Sie ein Online-Portfolio mit WordPress (und dem Gesamtthema)
Hinterlasse einen Kommentar

Schreibe einen Kommentar Antworten abbrechen

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

Berühmter Post

Ton und Bild: Mich stört eine weitere Spotify-HiFi-Verzögerung nicht so sehr
Technische Bewertungen
Mit diesem Angebot erhalten Sie eine Heißluftfritteuse für nur 34,99 £
Angebote
Diese 20-Pfund-Alexa-Uhr ist ein Smart-Home-Schnäppchen
Angebote
Philips Hue Centris im Test
Technische Bewertungen
https://blog.hootsuite.com/experiment-instagram-alt-text/
Strategie
NordVPN Standard vs. NordVPN Complete: Welches Bundle ist das Richtige für dich?
Gegen

También podría gustarte

Wie man

SharePlay: So trainieren Sie mit Freunden mit Apple Fitness Plus

vor 7 Stunden 3 Minuten Mindestlesezeit
Angebote

Mit diesem SIM-Karten-Schnäppchen erhalten Sie 60 GB Daten für nur 10 £

vor 11 Stunden 2 Minuten Mindestlesezeit
Wie man

Fokusmodus funktioniert nicht? Probieren Sie diese 8 Tipps zur Fehlerbehebung aus

vor 12 Stunden 8 Minuten Mindestlesezeit
Angebote

Mit diesem Angebot erhalten Sie eine Heißluftfritteuse für nur 34,99 £

vor 1 Tag 2 Minuten Mindestlesezeit
Wie man

Wie man Siri beibringt, einen Namen zu sagen, indem man die phonetische Schreibweise zur Kontakte-App hinzufügt

vor 1 Tag 2 Minuten Mindestlesezeit
Wie man

So legen Sie bei der Arbeit ein anderes Layout des iPhone-Startbildschirms fest (2023)

vor 2 Tagen 4 Minuten Mindestlesezeit
Showcase

Die 8 besten Tools zur Optimierung von Online-Inhalten für WordPress (2023)

vor 4 Tagen 12 Minuten Mindestlesezeit
Angebote

Apple MacBook Pro mit M2 Pro erhält einen verlockenden Rabatt

vor 5 Tagen 3 Minuten Mindestlesezeit
Zeig mehr
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Folge uns

© 2022 Themelocal. Alle Rechte vorbehalten.

  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt

Removed from reading list

Rückgängig machen
Welcome Back!

Sign in to your account

Passwort vergessen?