So erstellen Sie eine schöne Homepage mit Elementor und Genesis

Veröffentlicht: 2022-11-07

Wenn Sie mit dem Elementor Pro WordPress-Plugin und dem untergeordneten Genesis-Theme eine schöne Homepage erstellen möchten, finden Sie hier eine Schritt-für-Schritt-Anleitung dazu. Zunächst müssen Sie das Genesis Framework auf Ihrer WordPress-Site installieren und aktivieren. Dann müssen Sie das Elementor Pro-Plugin installieren und aktivieren. Sobald beide aktiviert sind, müssen Sie eine neue Seite in WordPress erstellen und die Vorlage „ElementorCanvas“ aus dem Seitenattribute-Bedienfeld auswählen. Jetzt können Sie mit dem Erstellen Ihrer Homepage mit Elementor beginnen. Ziehen Sie einfach die Elemente, die Sie verwenden möchten, per Drag & Drop in den Canvas-Bereich. Sie können Ihren eigenen Text, Bilder, Videos und mehr hinzufügen. Wenn Sie mit Ihrer Homepage zufrieden sind, klicken Sie einfach auf die Schaltfläche „Veröffentlichen“ und Ihre neue Homepage wird live gehen.

Die meisten Fragen, die ich bekommen habe, beziehen sich auf die Verwendung von Elementor im Genesis Framework. Die einfache Antwort ist ja. Es gibt jedoch untergeordnete Themen, die nicht aktualisiert wurden, um die neuesten WordPress Core- und Gutenberg-Updates zu unterstützen. Selbst wenn Sie dies auf Ihrem Gerät installiert haben, können Sie den Seitenersteller von Elementor mit jedem der Genesis-Designs verwenden. Unabhängig davon, welchen Seitenersteller Sie verwenden, Elementor oder Genesis Pro , Sie werden eine fantastische Erfahrung machen. Das Genesis Framework muss aktualisiert werden, um verwendet werden zu können. Fühlen Sie sich frei, Ihre Fragen zu stellen, und fordern Sie eine Demo an, wie dies funktioniert.

Funktioniert Elementor mit Genesis Framework?

Bildquelle: https://wpcity.com

Dieser Seitenersteller, der auf dem Genesis Framework aufbaut, ist bei weitem der beliebteste unter allen Seitenerstellern der Community. Mit diesem Tool können Sie Ihre Website in nur 15 Minuten von der Kopf- bis zur Fußzeile anpassen. Es kann sogar verwendet werden, um komplexere Websites zu erstellen, indem Designmodule freigeschaltet werden.

Elementor ist der am weitesten verbreitete Seitenersteller in der Community und unterstützt das Genesis Framework. Mit dem Genesis Framework können Sie Ihr untergeordnetes Genesis-Theme an Ihre spezifischen Anforderungen anpassen. Elementor ist ein eigenständiger Seitenersteller, der es für Benutzer ohne technische Erfahrung einfach macht, eine Website zu erstellen. Erstellen Sie Ihr eigenes Design mit Genesis Framework, mit dem Sie aus jedem untergeordneten Design auswählen und zusätzliche Designelemente hinzufügen können. Es ist nicht erforderlich, das Programmieren zu lernen, da es alle untergeordneten Designeinstellungen im Backend überschreibt. Wenn Sie das Beste aus beiden Welten wollen, sollten Elementor und Genesis Framework zusammen verwendet werden.

Elementor: Ein Framework für Veränderungen

Elementor ist in der Tat ein Framework. Mit diesem Tool können Sie ein neues Design-Framework für Ihre WordPress-Site erstellen, das das Erscheinungsbild Ihrer Themenbereiche ändert, die für Seitenersteller traditionell unsichtbar waren.

Wie aktiviere ich das Genesis Child Theme?

Bildquelle: https://cloudways.com

Um ein untergeordnetes Genesis-Theme zu aktivieren, müssen Sie zunächst das Genesis Framework installieren. Sobald das Framework installiert ist, können Sie das untergeordnete Design über das Menü „Darstellung“ > „Designs“ in Ihrem WordPress-Dashboard aktivieren.

Es gibt viele Leute, die von der Idee eingeschüchtert sind, das Genesis-Framework sowie ein untergeordnetes Thema zu installieren. Es ist eine einfache Aufgabe. Sie können WordPress weiterhin verwenden, ohne Themes zu installieren. Es wird als hochfunktionales Thema definiert, das auf einem Framework basiert. Das Child-Theme ist etwas, das in das Parent-Theme integriert ist. Das untergeordnete Genesis-Theme ist das gleiche wie alle anderen WordPress-Themes. Der Hauptunterschied besteht darin, dass sowohl das übergeordnete als auch das untergeordnete Thema hochgeladen und im WordPress-Theme-Verzeichnis gespeichert werden müssen. Das Genesis Framework und das Child Theme können nur mit einem kleinen Problem installiert werden.

So passen Sie Ihr CSS für ein benutzerdefiniertes Genesis-Design an

Wenn Sie ein benutzerdefiniertes Design verwenden, müssen Sie möglicherweise das CSS anpassen. Das Genesis-Framework soll so minimalistisch wie möglich sein, aber Sie können Polsterung oder Rand hinzufügen, um es hervorzuheben.

Muss ich ein Child-Theme mit Elementor verwenden?

Bildquelle: https://themewaves.com

Auf diese Frage gibt es keine endgültige Antwort, da sie von persönlichen Vorlieben und den spezifischen Anforderungen Ihres Projekts abhängt. Wenn Sie nur ein paar kosmetische Änderungen an Ihrer Website vornehmen möchten, müssen Sie wahrscheinlich kein untergeordnetes Thema erstellen. Wenn Sie jedoch größere Änderungen oder Anpassungen vornehmen möchten, ist ein untergeordnetes Design möglicherweise eine gute Idee. Letztendlich liegt es an Ihnen zu entscheiden, ob Sie ein untergeordnetes Thema mit Elementor verwenden müssen oder nicht.

Wann sollte man ein Child Theme verwenden (und wann nicht!)

Wenn Sie Elementor zum Erstellen einer benutzerdefinierten Website verwenden, ist es wichtig, dass Sie die Elementor-Anpassung in das Design einbeziehen. Mit untergeordneten Themen können Sie nur geringfügige Änderungen an Ihrer Website vornehmen. Elementor aktualisiert es auch automatisch, wenn es ein Update erkennt. Obwohl es eine gute Idee ist, untergeordnete Themen im Auge zu behalten, sind sie überhaupt nicht erforderlich. Wenn Sie Ihre Website mit einem untergeordneten Design anpassen, anstatt es direkt zu bearbeiten, überschreiben Sie alle Änderungen, die Sie vornehmen, wenn das Design aktualisiert wird. Sie können entweder das Thema ändern oder Ihre Arbeit verlieren. Sie können auch ein untergeordnetes Thema verwenden, wenn Sie dies bevorzugen. Im Falle eines untergeordneten Designs können Sie damit Teile des Designs wiederverwenden, ohne es zu überschreiben. Das bedeutet, dass sobald Sie Ihr Child-Theme angepasst haben, Ihre Änderungen jedes Mal automatisch beibehalten werden, wenn Sie Ihr Parent-Theme aktualisieren.

Elementor Child-Theme

Ein Elementor-Child-Theme ist ein WordPress-Theme, das seine Funktionalität von einem anderen WordPress-Theme erbt, das als Parent-Theme bezeichnet wird. Untergeordnete Themen werden häufig verwendet, wenn Sie Änderungen an einem vorhandenen WordPress-Theme vornehmen möchten, ohne die Möglichkeit zu verlieren, das übergeordnete Thema zu aktualisieren.

Benötigen Sie ein Child-Theme für Hello Elementor?

Um Hello Styles nutzen zu können, muss Elementor direkt eingebunden werden. Wenn Sie den CSS-Code von Hello hinzufügen oder ändern möchten, empfehlen Ihre Designer in einigen Fällen, dass Sie ein untergeordnetes Design (untergeordnetes Hello-Design) verwenden. In diesem Artikel erklären wir, warum die Verwendung eines untergeordneten Designs in einigen Fällen nicht immer erforderlich ist.

Was ist der Unterschied zwischen WordPress-Theme und Child-Theme?

Themenerweiterungen für Kinder werden empfohlen, wenn sie noch funktionsfähig sind und das gleiche Design und den gleichen Code haben. Untergeordnete WordPress-Designs ermöglichen es Ihnen, ein Design oder Framework anzupassen, indem Sie die leistungsstarken Funktionen des übergeordneten Designs oder Frameworks nutzen.

So verwenden Sie das Child-Theme in WordPress

Es ist besser, ein untergeordnetes Thema als Alternative zu einem Hauptthema zu haben. Sie können dasselbe mit dem Namen des Themas tun, indem Sie daneben auf die Schaltfläche Aktivieren klicken. Durch Klicken auf die Schaltfläche Aktivieren neben dem Namen des Themas können Sie wie gewohnt auf die Website zugreifen.

Die untergeordneten Themen erscheinen auf die gleiche Weise wie die übergeordneten Themen, aber die Funktionen und das Erscheinungsbild sind ausgeliehen. Weitere Informationen zu untergeordneten WordPress-Themes finden Sie in unserem Artikel Was ist ein WordPress-Theme? Wenn Ihr untergeordnetes Design als ZIP-Datei verpackt geliefert wurde, müssen Sie auf die Schaltfläche „Design hochladen“ klicken. Wenn das Parent-Theme im Theme-Verzeichnis von WordPress.org verfügbar ist, wird die Installation durchgeführt. Es wird Sie darüber informieren, dass Sie das übergeordnete Design als Teil des Einrichtungsprozesses manuell installieren müssen. Nachdem Sie sowohl das Parent- als auch das Child-Theme installiert haben, können Sie das Child-Theme aktivieren. Sie müssen das Parent-Theme nicht aktivieren, um das Child-Theme zu verwenden. Darüber hinaus haben wir eine Anleitung erstellt, wie Sie die Dateien finden, die Sie in einem WordPress-Theme bearbeiten müssen. Wenn Sie zu Ihrem WordPress-Dashboard zurückkehren, können Sie auf die Registerkarte Aussehen zugreifen und Ihr untergeordnetes Thema auswählen.

So installieren Sie ein Child-Theme mit Oceanwp

Sie können ein untergeordnetes Thema installieren, indem Sie zum WordPress-Dashboard gehen. (Alte Einstellungen: Themenbereich). Speichern Sie anschließend Ihre Einstellungen in einer DAT-Datei und exportieren Sie sie auf Ihren Computer. Sie können dann das OceanWP Child Theme deinstallieren.

So bearbeiten Sie das WordPress-Theme mit Elementor

Wenn Sie Ihr WordPress-Theme mit Elementor bearbeiten möchten, müssen Sie zunächst das Elementor-Plugin installieren und aktivieren. Sobald Sie das getan haben, können Sie zu jeder Seite oder jedem Beitrag auf Ihrer Website gehen und auf die Schaltfläche „Mit Elementor bearbeiten“ klicken, um den Elementor-Editor zu starten. Von dort aus können Sie mit der Anpassung Ihres Designs beginnen, indem Sie Elemente per Drag & Drop auf die Seite ziehen und sie nach Ihren Wünschen bearbeiten. Sie können Dinge wie die Farben, Schriftarten und das Layout Ihres Designs ändern und Ihre eigenen benutzerdefinierten Inhalte hinzufügen, indem Sie die verschiedenen Widgets verwenden, die Elementor anbietet. Wenn Sie mit Ihren Änderungen zufrieden sind, können Sie auf die Schaltfläche „Veröffentlichen“ klicken, um Ihre Arbeit zu speichern und Ihre Änderungen auf Ihrer Website live zu schalten.

So ändern Sie ein WordPress-Theme in Astra (verwenden Sie Elementor Pro Builder ) – Dies ist der Schritt-für-Schritt-Prozess. Reisen, Bücher und Essen gehören zu den behandelten Themen. Zwischen dem 20. Juni 2020 und dem 31. Dezember 2020 stellte ich fest, dass mein altes Design veraltet war und ich keinen Support hatte. Mir wurde vor einem Monat klar, dass ich mein Thema ändern musste, und im letzten Monat habe ich daran gearbeitet. Die gängigsten kostenpflichtigen Themen liegen im Preis zwischen 20 und 60 US-Dollar. Die meisten Reiseblogger verwenden heutzutage entweder Generate Press, Avada, StudioPress, Genesis oder Astra Themes oder OceanWp. Wie wirken sich wechselnde WordPress-Themes auf den Inhalt aus?

Es ist immer noch derselbe Inhalt. Der Inhalt muss jedoch möglicherweise auf eine Weise geändert werden, die in den Einstellungen nicht sichtbar ist. Sie müssen nicht über Programmierkenntnisse verfügen, um Astra oder Elementor Pro zu verwenden. Wenn Sie nicht verstehen, was Sie tun, sollten Sie erwägen, einen Website-Designer einzustellen. Wenn Sie jedoch möchten, dass Ihre Website gestaltet wird, sollten Sie es vermeiden, ein Vermögen an Entwicklungskosten zu zahlen. Das Ändern von WordPress-Designs kann das Erscheinungsbild einer Website verändern. Ein WordPress-Theme kann geändert werden, ohne dass es installiert werden muss.

Dies kann auf verschiedene Weise erreicht werden. Wir werden Sie in diesem Leitfaden durch den Prozess zum Ändern des WordPress-Themes auf dieser Website führen. Alternativ können Sie es in einer anderen Umgebung testen und die Änderungen dann in Ihre Produktionswebsite importieren. Bevor Sie Ihre Website registrieren können, müssen Sie zuerst die Staging-Site deaktivieren und dann die Live-Site aktivieren (wenn Sie nur eine Lizenz haben). Die meisten Änderungen wurden mit Elementor Pro vorgenommen, und wir haben die Änderungen auf Site-Ebene auf der Themenebene beibehalten. Sowohl Elementor Pro als auch Elementor verfügen über eine Reihe schöner Vorlagen, die in einer Vielzahl von Browsern getestet werden können, um die Kompatibilität sicherzustellen. Eine Vielzahl kostenloser Kits ist für Benutzer von Elementor Pro verfügbar.

Sie können eine vollständig angepasste Website erstellen, indem Sie diese Kits herunterladen. In einigen Fällen verwende ich die für mich angepassten Envato-Blöcke. Wenn Sie Ihre Vorlage speichern möchten, klicken Sie einfach mit der rechten Maustaste auf den Abschnitt oder das Widget und wählen Sie „Als Vorlage speichern“ aus dem Menü.

So verwenden Sie den Child-Theme-Konfigurator

Die Verwendung des Child-Theme-Konfigurators ist einfach. Laden Sie einfach das Plugin herunter und installieren Sie es auf Ihrer WordPress-Seite. Gehen Sie nach der Installation zur Einstellungsseite des Plugins und wählen Sie das untergeordnete Thema aus, das Sie verwenden möchten. Das Plugin generiert automatisch ein untergeordnetes Design basierend auf dem ausgewählten Design.

Im Folgenden finden Sie eine Schritt-für-Schritt-Anleitung zum Konfigurieren eines Child-Themes über das Child-Theme-Konfigurator-Plugin. Es generiert den Verzeichnisnamen des untergeordneten Designs, indem es den Namen des untergeordneten Designs an den Namen des übergeordneten Designs anhängt. Obwohl es kostenpflichtige Premium-Erweiterungen gibt, glauben wir, dass die kostenlose Version für einen Anfänger ausreichend ist. Mit dem Plugin Child Theme Configurator können Sie mithilfe des enthaltenen Plugins ganz einfach ein neues Child Theme für Ihre Website erstellen. Das Plugin bietet zwei Optionen zum Speichern von Child-Theme-Stylesheets. Sie können eine style.css-Datei im Verzeichnis Ihres untergeordneten Designs erstellen, indem Sie die primäre Stylesheet-Option auswählen. Wenn Sie das Theme-Framework Genesis verwenden, wählen Sie die Option Übergeordnete Theme-Stylesheets ignorieren.

Menüs, Widgets und andere Anpassungseinstellungen können vom Parent-Theme in das Child-Theme kopiert werden. Nachdem Sie alle erforderlichen Anpassungen vorgenommen haben, klicken Sie auf die Schaltfläche Neues untergeordnetes Design erstellen. Die Liste der änderbaren Vorlagendateien wird auf der Registerkarte Dateien angezeigt. Über die beiden Reiter Abfrage/Selektor und Eigenschaft/Wert kann der passende Style aus dem Parent-Theme gefunden und modifiziert werden. Das Problem, die CSS-Eigenschaft und den Selektor zu finden, ist ein häufiges Problem bei manuellen Child-Themes . Das Child Theme Configurator Plugin macht dieses Problem so einfach wie möglich zu lösen. Das Importieren beliebiger Webfonts, wie z. B. Google-Fonts, unter der Abfrageoption #import kann auf der Registerkarte Webfont erfolgen.

Auf der Registerkarte Parent/Child können Sie ein Child-Theme löschen, duplizieren und analysieren. Sie können diese Optionen anzeigen, sobald Ihr untergeordnetes Thema mit diesem Plugin erstellt wurde. Ein neues untergeordnetes Design finden Sie im WordPress-Admin-Dashboard, indem Sie auf die Registerkarte Designs klicken.

Kann ich den Child-Theme-Konfigurator löschen?

Falls Sie das Theme-Editor-Plugin nach dem Erstellen eines Child-Themes vergessen haben, verlieren Sie keine Daten.

Benutzerdefiniertes untergeordnetes Genesis-Design

Ein benutzerdefiniertes Genesis-Child-Theme ist eine großartige Möglichkeit, Ihrer WordPress-Site Ihre eigene persönliche Note zu verleihen. Indem Sie Ihr eigenes benutzerdefiniertes untergeordnetes Thema erstellen, können Sie sicherstellen, dass Ihre Website genau so aussieht, wie Sie es möchten, ohne sich Sorgen machen zu müssen, dass die Änderungen durch ein zukünftiges Update des Genesis Framework überschrieben werden. Außerdem können Sie mit einem benutzerdefinierten untergeordneten Design ganz einfach Funktionen nach Belieben hinzufügen oder entfernen, ohne Code bearbeiten zu müssen.

Das Genesis-Framework von StudioPress ist Lego-Blöcken sehr ähnlich. Es macht es einfach, an den verschiedenen Komponenten des Themas zu arbeiten und sich darin zu bewegen. Alle unsere Themes sind mit einem Genesis Child Theme aufgebaut. Das Genesis-Design muss beim Erstellen eines Designs als übergeordnetes Design Ihres Kindes installiert werden. Um Ihrer Website einen Google Analytics-Tracking-Code hinzuzufügen, gehen Sie zur Einstellungsseite des Genesis-Designs. Wenn Sie ein Plugin verwenden, müssen Sie den Tracking-Code nicht manuell in Ihren Header eingeben. Das Genesis Visual Hook Guide-Plugin zeigt die verschiedenen Abschnitte einer Seite und hilft bei der Bestimmung, welche Funktionen sich wo befinden.

Wenn Widget-basierte Inhalte erstellt, gepflegt und aktualisiert werden, ist es einfach, sie zu erstellen, zu pflegen und zu aktualisieren. Zuerst müssen wir unseren Widget-Bereich registrieren. Wir verwenden dann eine Funktion, um es der Seite hinzuzufügen. Es ist in Ordnung, die Widget-Bereiche auf Appearance nachzuschlagen, aber sie werden derzeit nicht auf der Startseite angezeigt. In vielen Fällen wird die Widget-ID/Klasse durch eine erkennbare Namenskonvention damit verknüpft. Wenn Sie ein Design verwenden, können Sie wahrscheinlich eine Logodatei hochladen. Wenn Sie Ihr Logo anders gestalten möchten, können Sie die Breite und Höhe des Logos ändern.

Ein Plugin kann den Credit einer Fußzeile in wenigen Minuten ändern. Simple Edits ist die perfekte Lösung für diese Art von Situation. In einem kleinen Ausschnitt können Sie die Fußzeile mit den neuesten Informationen für eine Vielzahl von Themen aktualisieren. Wenn Sie einfache Bearbeitungen verwenden, können Sie die Post-Info (Byline) und Post-Meta jedes Genesis-Designs ändern. Sie können diese Bereiche einfach bearbeiten, indem Sie die bereitgestellten Shortcodes, HTML und Text verwenden.