Funktionsparameterkonfiguration von Elementor

Elementor ist ein leistungsstarker und intuitiver WordPress-Website-Editor, der den Nutzern Werkzeuge bietet, um Websites einfach zu erstellen und anzupassen. Als fortschrittlicher visueller Editor ermöglicht er das Design verschiedenster Webseitenelemente per Drag-and-Drop, wodurch hochgradig individuelle, professionelle und ansprechende Websites entstehen.

Dieser Artikel gibt eine Einführung in die Grundkonfiguration von Elementor, damit die Nutzer vor der Bearbeitung von WordPress-Seiten mit Elementor ein besseres Verständnis der Funktionen von Elementor erhalten und Probleme durch fehlerhafte Parameterkonfigurationen vermieden werden. Nachfolgend ist das von mir zusammengestellte Inhaltsverzeichnis, Leser können auch die Verlinkungen im Inhaltsverzeichnis für gezieltes Lesen nutzen.

• WordPress-Backend-Layout nach der Installation von Elementor
• Allgemeine Einstellungen
• Integration
• Erweiterte Einstellungen
• Features

一、Layout nach der Installation von Elementor

Nach der Installation des Elementor-Plugins wird im Seitenleistenmenü des WordPress-Adminbereichs ein entsprechendes Symbol für die Funktionskonfiguration erzeugt. Dieser Artikel beschäftigt sich hauptsächlich mit der Konfiguration der Funktionsparameter von Elementor. Die Template-Funktion unter dem Elementor-Symbol werde ich in späteren Kapiteln der Elementor-Technik-Lernserie ausführlich behandeln und wird hier vorerst ignoriert. Wenn man mit der Maus über das Elementor-Symbol fährt, erscheint wie im Bild gezeigt eine Liste aller Elementor-Einstellungen. Durch Klicken auf den Menüpunkt „Einstellungen“ im Pop-up-Menü gelangt man zur Seite zur Konfiguration der Funktionsparameter.

二、Allgemeine Einstellungen

Beitragstyp

Hierbei handelt es sich um die Seiten- und Beitragstypen, die mit Elementor bearbeitet werden. Die Standardeinstellung kann beibehalten werden. Ohne spezielle Anwendungen müssen diese Parameter nicht geändert werden.

Standardrolle deaktivieren

Die Beschreibung dieser Funktion seitens Elementor ist sehr klar: Wenn dieses Kästchen aktiviert ist, erben die Elementstile und -farben beim Bearbeiten der Seite mit Elementor die Einstellungen des Themes. Diese Option sollte je nach eigenem Bedarf aktiviert werden. Ich aktiviere sie bei der Seitenbearbeitung, um die Effizienz zu erhöhen, wobei die Farbgestaltung zuerst in den Theme-Einstellungen festgelegt wird.

Standard-Schriftart deaktivieren

Wenn keine benutzerdefinierte Schriftart benötigt wird, sollte diese Funktion in der Regel nicht aktiviert werden. So erbt Elementor die Schriftstil-Einstellungen des Themes. Für Unternehmen in China, egal ob chinesische oder fremdsprachige Websites, wird im Allgemeinen von der Nutzung spezieller Schriftarten abgeraten, da es aufgrund von Netzwerkrichtlinien in China Verbindungsprobleme geben kann. Wenn die Netzwerkanbindung für Schriftarten nicht reibungslos funktioniert, kann dies die Ladegeschwindigkeit der Website negativ beeinflussen.

Elementor verbessern

Diese Option ist keine konkrete Funktionsnutzung, sondern dient dazu, dass Elementor zur Verbesserung des Plugins einige Nutzungsdaten sammelt. Ob diese Option aktiviert wird, ist persönlicher Entscheidung überlassen. Als CS-Berufstätiger akzeptiere ich solche Anfragen in der Regel, solange sie anderen nicht schaden.

三、Integration von Elementor

Die Einstellungen unter „Integration“ gehören zu den fortgeschrittenen Nutzungsmöglichkeiten von Elementor und dienen dazu, API-Schlüssel verschiedener anderer Anwendungen oder Systeme anzubinden, um den Datenaustausch zwischen Elementor und Drittanbieter-Anwendungen zu ermöglichen. Bevor ich auf die Integrationsfunktionen von Elementor eingehe, möchte ich eine eigene Erfahrung teilen, um Zeitverschwendung bei der Nutzung bestimmter Funktionen im Bereich Integration zu vermeiden. Diese Erfahrung hat mich etwa 2 Stunden unnötiger Arbeit gekostet. Der Tipp lautet: Auf inländischen Servern funktionieren die Google-APIs nicht, weil die Netzwerkverbindung nicht zustande kommt. Deshalb sollte man Google-bezogene APIs nicht in inländische Clouds einbinden. Ausländische Server sind davon nicht betroffen. Wer die genauen Gründe wissen möchte, sollte dies selbst recherchieren. Im Folgenden erkläre ich die zwei häufig genutzten Integrationen: Stripe-Zahlungen und E-Mail-Marketing mit MailChimp.

Elementor-Integration mit MailChimp und Stripe

Auf der Integrationsseite von Elementor kann man nach unten scrollen und die Integrationen für MailChimp und Stripe sehen. Bevor du diese Integration vornimmst, solltest du den API-Schlüssel (API-Key) der jeweiligen Anwendung erhalten haben. Kopiere und füge den API-Key in das entsprechende Eingabefeld ein. Nach der Eingabe kannst du auf die Schaltfläche „Validate Test API Key“ unter dem Eingabefeld klicken, um den API-Key zu überprüfen. Wenn die Überprüfung erfolgreich ist, klicke ganz unten auf der Seite auf „Änderungen speichern“. Falls du dich bereits im Elementor-Seitenbearbeitungsmodus befindest, musst du diesen zuerst verlassen und erneut betreten, damit die gerade eingerichtete Integration wirksam wird.

四、Erweiterte Einstellungen

Die Parameter in den erweiterten Einstellungen können bis auf die Google-Schriftarten in der Regel auf den Standardwerten belassen werden. Google-Schriftarten sollten in der Regel deaktiviert werden, und zwar aus zwei Gründen:

• Wenn der Server in China steht und die Website auf Chinesisch ist, werden beim Start der Website zunächst die Schriftarten geladen. Die bereits erwähnten Netzwerkprobleme können dabei zu erheblichen Ladeverzögerungen führen.
• Wenn der Server im Ausland steht und die Website eine Fremdsprache nutzt, wirst du selbst ebenfalls Verzögerungen beim Zugriff spüren. Wichtig zu beachten ist hier, dass Verzögerungen beim Zugriff über ein chinesisches Netzwerk nicht automatisch bedeuten, dass Nutzer im Ausland ebenfalls Verzögerungen haben – das wird vom Netzwerk bestimmt.

五、Funktionen

Der Einstellungsbereich für Funktionen bei Elementor steht in engem Zusammenhang mit HTML und CSS. Die Funktionsoptionen sind in zwei Kategorien unterteilt: experimentelle Funktionen und stabile Funktionen. Die meisten Funktionen sind standardmäßig aktiviert. Unabhängig davon, ob die Funktionen standardmäßig aktiviert sind oder nicht, werde ich die wichtigsten davon erläutern.

Grid-Container

Dies ist eine Art Container, genannt Grid-Container. Mit Grid-Containern ist es sehr einfach, die Anzahl der Reihen und Spalten zu erweitern. Allerdings fehlt im Elementor-Bearbeitungsmodus die Flexibilität, beispielsweise können keine verschachtelten Ebenen von Grids erstellt werden und individuelle Parameter für einzelne Reihen und Spalten können nicht angepasst werden. Auch wenn die Grid-Funktion nicht meine bevorzugte Wahl für das Erstellen von Containern ist, wird empfohlen, sie zu aktivieren.

Flexbox-Flexcontainer

Der Flexbox-Flexcontainer ist, wie der Name schon sagt, ein flexibler Container und eine Container-Art, die ich häufig verwende. Er ermöglicht sehr gut die Verschachtelung von Containern und die individuelle Anpassung der Größen von Untercontainern, was eine flexible Seitenlayout-Gestaltung ermöglicht. Diese Funktion sollte ohne Zweifel aktiviert werden.

Verzögertes Laden von Hintergrundbildern

Dies ist eine Funktion von Elementor zur Leistungsoptimierung der Seite. Wenn diese Funktion aktiviert ist, werden im Bearbeitungsmodus alle Bilder außer denjenigen, die im ersten sichtbaren Bereich (Above the Fold) sind, verzögert geladen. Da die Bilder beim Besuch der Seite nicht synchron geladen werden, kann dies die Ladezeit des ersten sichtbaren Bereichs deutlich verbessern. Diese Funktion kann auch die LCP-Wertung (Largest Contentful Paint) bei den Core Web Vitals verbessern und ist ein guter Leistungsoptimierungsparameter. Allerdings befindet sich diese Funktion zum Zeitpunkt der Erstellung dieses Textes noch in der Experimentierphase. Alle experimentellen Funktionen können eventuell Inkompatibilitäten mit anderen Plugins verursachen, daher sollte diese Funktion mit Vorsicht aktiviert werden.

Optimierte DOM-Ausgabe

DOM steht für „Document Object Model“, auch bekannt als DOM-Baum, und bezeichnet die hierarchische Struktur von HTML. Die optimierte DOM-Ausgabe von Elementor verbessert automatisch die Struktur und Markierung des HTML-Codes, sodass der Code besser den W3C-Standards entspricht. Wenn kein benutzerdefinierter HTML-Code verwendet wird, ist es eine gute Wahl, diese Funktion zur Optimierung des HTML-Codes zu aktivieren.

Zusätzliche benutzerdefinierte Breakpoints

Um diese Funktion zu erklären, müssen wir zunächst verstehen, was ein Breakpoint bedeutet. Im Bereich der Webentwicklung versteht man darunter einfach die verschiedenen Pixelbereiche der Bildschirmgrößen, in der Anwendungsentwicklung ist es der Bereich, in dem ein Programm läuft. Wenn man die Definition von Breakpoints in der Webentwicklung kennt, kann man diese Funktion gut verstehen. Diese Funktion ermöglicht es, im Elementor-Bearbeitungsmodus die Bildschirmgröße der aktuell bearbeiteten Seite individuell festzulegen, wie zum Beispiel Bildschirmgrößen für Mobilgeräte, Tablets und Desktop-Computer. Diese Funktion sollte aktiviert werden.

Verbessertes CSS-Laden

Diese Funktion kann die Art und Weise des CSS-Ladens effektiv optimieren. Das Prinzip besteht darin, CSS asynchron oder verzögert zu laden, wodurch unnötiges Rendern beim Seitenaufruf reduziert und die Ladegeschwindigkeit der Seite verbessert wird. Allerdings weist Elementor in der Beschreibung dieser Funktion auch darauf hin, dass es zu Inkompatibilitäten mit anderen Plugins kommen kann. Daher empfehle ich, diese Funktion mit Vorsicht zu aktivieren oder sie bei auftretenden Problemen wieder zu deaktivieren.

Abschließend, wenn du wenig Zeit hast und die Investition in technisches Lernen und praktische Umsetzung hoch ist und du nicht vorhast, dich tiefer mit technischen Aufgaben zu beschäftigen, dann dient dieser Artikel vielleicht nur dazu, dir die Grundkonfiguration von Elementor näherzubringen und die Funktionsweise des WordPress-Seiteneditors zu erklären. Wenn du nicht selbst Hand anlegen möchtest, sondern die professionelle technische Arbeit lieber einem erfahreneren Team überlassen willst, empfehlen wir dir, einen professionellen Service zu wählen. Das Team von Logicsi Digital Technology spezialisiert sich auf WordPress-Webseitenentwicklung und technische Entwicklung. Wenn du WordPress-Webdesign- und Entwicklungsaufträge vergeben möchtest, kontaktiere gerne das Logic Digital Technology Team. Wir bieten dir effiziente und professionelle Lösungen an.

Copyright © Logic Digital Technology (SZLOGIC). Alle Rechte vorbehalten, Wiederveröffentlichung untersagt.