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
Der Envato-Markt ist wahrscheinlich der beliebteste Marktplatz nicht nur für Elementor-Vorlagen, sondern auch für WordPress-Themes und -Plugins.
TemplateMonster
TemplateMonster ist ein weiterer Anbieter von qualitativ hochwertigen Vorlagen-Assets, sie haben auch einige kostenlose Vorlagen.
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:
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:
- 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.
- Klicken Sie in der Fußzeile des Panels auf die Schaltfläche Elemente.
- 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.
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.
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.
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.
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.
