So verwenden Sie den Avada Header-, Footer- und Spaltenlayout-Builder

Unser ganz eigener Seitenersteller, der Avada Builder, ist jetzt in zwei Schnittstellen verfügbar: Avada Builder, unser Back-End-Wireframe-Seitenersteller, und Avada Live, unser Frontend-Builder, der erst kürzlich mit Avada 6.0 eingeführt wurde .

Mithilfe unseres unkomplizierten Systems aus Containern, Spalten und Elementen können Sie mit beiden Versionen des Avada Builder ganz einfach schöne Seitenlayouts für Ihre Website entwerfen. Avada Builder ist ein fantastisches Tool für moderne Webdesigner und Websitebesitzer gleichermaßen, da es ihnen die vollständige Kontrolle über alle Aspekte des Seiteninhalts und des Layouts gibt. Beide Versionen des Avada Builder generieren außerdem den gleichen Code. Sie sind vollständig austauschbar, sodass Sie mit dem derzeit verfügbaren Avada Builder das Beste aus beiden Welten nutzen können.

Auf der Seite „Layout Builder“ finden Sie alle Ihre Layouts und alle bedingten Layouts, die Sie möglicherweise zusätzlich zum standardmäßig erstellten globalen Layout erstellen möchten. Hier befindet sich auch der Bereich, in dem Sie Ihren Layouts Layoutabschnitte zuweisen und Bedingungen festlegen, damit Ihre bedingten Layouts wirksam werden.

Auf den Layout Builder kann über das Avada Dashboard zugegriffen werden, indem Sie im Dropdown-Menü „Layouts“ > „Layout Builder“ auswählen. Eine der einfachsten Möglichkeiten, Layouts zu beschreiben, besteht darin, zu sagen, dass es sich um Container handelt, die die vier Layoutabschnitte einer Seite enthalten – den Kopfzeilenabschnitt, den Seitentitelleistenabschnitt, den Inhaltsabschnitt und den Fußzeilenabschnitt. Weitere Informationen zu den Unterschieden zwischen Layout-Abschnitten und Layouts finden Sie in diesem Dokument: Grundlegendes zu Layouts und Layout-Abschnitten (PDF). Lesen Sie weiter, um mehr über die Dinge zu erfahren, die Sie auf dieser Seite tun können.

Zwei Teile befinden sich ganz oben auf der Layout Builder-Seite. Eine Technik zum Füllen der Layoutabschnitte im globalen Layout oder zum Generieren bedingter Layouts wird im ersten Abschnitt beschrieben (Hinweis: Sie können diesen Abschnitt mit dem X schließen). Auf der rechten Seite des Bildschirms befindet sich ein Bereich, in dem Sie dies tun können direkt neue Layouts erstellen (siehe unten). Geben Sie einen Namen für Ihr neues Layout ein und klicken Sie dann auf „Neues Layout erstellen“, um den Vorgang abzuschließen. Bei Verwendung dieser Methode wird ein leeres Layout erstellt. Es sind keine Layoutabschnitte oder Bedingungen angegeben.

Wenn Sie Layouts erstellen, werden diese automatisch in die Layout Builder-Seite importiert. Sie können ein Layout umbenennen, indem Sie oben auf der Seite auf die Schaltfläche „Umbenennen“ klicken. Sie können auch auf das Zahnradsymbol klicken, um Bedingungen für das Layout festzulegen, und Sie können ein Layout löschen, indem Sie oben auf der Seite auf das Papierkorbsymbol klicken. Sie können Kriterien auch anzeigen und zuweisen, indem Sie unten in allen Layouts mit Ausnahme des globalen Layouts klicken.

In jedem Layout können Sie die vier Layoutabschnitte sehen, die einem bestimmten Layout zugewiesen sind, einen für jedes der vier Layouts. In jedem Layoutabschnitt sehen Sie ein +-Symbol, mit dem Sie diesem Abschnitt des Layouts einen Layoutabschnitt zuweisen können, wenn Sie mit der Maus darüber fahren. Sie haben die Möglichkeit, diesem Abschnitt einen vorhandenen Layoutabschnitt zuzuweisen oder einen völlig neuen Abschnitt von Grund auf zu erstellen.

Verwenden des Abschnittslayouts

Als Teil von Avada Layouts können Sie jetzt vollständig anpassbare Fußzeilen für Ihre Website erstellen und dabei die gesamten kreativen Möglichkeiten von Avada Builder nutzen.

Ein Fußzeilenlayout ist ein Layoutabschnitt, der einem Layout hinzugefügt wird. amp erfordert eine benutzerdefinierte Fußzeile einen Abschnitt für das Fußzeilenlayout, der entweder dem globalen oder dem benutzerdefinierten Layout hinzugefügt werden kann. Wir werden uns im nächsten Abschnitt mit der Erstellung eines benutzerdefinierten Fußzeilen-Layout-Abschnitts befassen, aber zuerst werfen wir einen Blick auf die Einführung in Avada-Layouts.

Wählen Sie in der WordPress-Seitenleiste oder im Avada-Dashboard Avada > Layouts aus. Hier werden die Layouts und Layoutabschnitte von Avada erstellt und verwaltet. Wie unten gezeigt, ist das globale Layout zunächst leer und weist keine zugehörigen Layoutabschnitte auf.

Anpassen eines Layouts

Dieser Abschnitt kann zum globalen Layout oder einem bedingten Layout hinzugefügt werden und wird nur auf bestimmten benutzerdefinierten Beitragsarten oder einzelnen Seiten angezeigt. Das globale Layout ist bereits vorhanden, aber wir müssen zuerst ein bedingtes Layout entwickeln.

Fügen Sie auf der Seite „Layouts“ einen Namen hinzu und klicken Sie auf „Neues Layout erstellen“, wie unten gezeigt.

Erstellen Sie einen Fußzeilen-Layout-Abschnitt, wenn Sie ihn einem vorhandenen Layout oder dem globalen Layout hinzufügen möchten.

Wählen Sie im Bildschirm „Layout Section Builder“ den Typ des Layoutabschnitts aus, geben Sie einen Namen ein (in diesem amp „Footer“, möglicherweise „Global Footer“) und klicken Sie auf „Neuen Layoutabschnitt erstellen“, wie unten gezeigt.

Das folgende Bild zeigt, wie Sie einen Layout-Abschnitt direkt aus dem Layout generieren. Die Layoutabschnitte Ihrer Site müssen einem Layout hinzugefügt werden. Zunächst gibt es einfach ein globales Layout. Um also eine globale benutzerdefinierte Fußzeile zu erstellen, fügen Sie sie diesem Layout hinzu. Klicken Sie auf den Abschnitt „Benutzerdefiniertes Fußzeilenlayout“ und fügen Sie dann Bedingungen zum Abschnitt „Benutzerdefiniertes Fußzeilenlayout“ hinzu, damit das Layout gemäß den Kriterien angezeigt wird.

Daran ist nichts auszusetzen, aber es ist wichtig, die Situation zu berücksichtigen. Wenn das Layout derzeit aktiv ist (dh Bedingungen aufweist oder das globale Layout ist), sind alle neuen Layoutabschnitte sofort aktiv und leer. Es ist sinnvoller, zunächst über die Seite „Layout Section Builder“ eine benutzerdefinierte Fußzeile zu einem globalen Layout hinzuzufügen und sie dann zum globalen Layout hinzuzufügen.

Alternativ können wir einem bedingten Layout einen Fußzeilen-, Kopfzeilen- oder Spaltenlayoutabschnitt hinzufügen und ihn dann erstellen. Bedingungen werden erst verwendet, wenn Bedingungen hinzugefügt werden. Wie unten dargestellt, können wir den Abschnitt „Fußzeilenlayout“ ändern, indem wir mit der Maus darüber fahren und auf das Bearbeitungssymbol klicken.

Benutzerdefinierte Layoutbearbeitung

Der Standard-WordPress-Editor erscheint beim Bearbeiten eines neuen Layoutabschnitts; Sie können Avada Builder oder Avada Live von hier aus verwenden. Hier werden benutzerdefinierte Layoutabschnitte erstellt. Weitere Informationen finden Sie unter Erstellen von Layout-Abschnittsinhalten, aber kurz gesagt, Sie können hier alles erstellen.

Ihre benutzerdefinierte Fußzeile kann alles enthalten, was Sie im Avada Builder erstellen können. Sie können zahlreiche Spalten, Fotos usw. haben; Dies ermöglicht eine enorme Flexibilität. Im Abschnitt „Layout“ wird das Fußzeilenmaterial angezeigt. Das Material kommt vom Baumeister und Ihre Kreativität ist die einzige Einschränkung.

Sehen Sie sich unten die Original-Fußzeile an, die für die Taxi-Demo erstellt wurde. Dies wurde durch eine Änderung der Designoptionen und Fußzeilen-Widgets erreicht.

Die Desktop-Version dieses benutzerdefinierten Headers wird hier angezeigt. Um den Umfang dieses benutzerdefinierten Headers richtig zu verstehen, müssen Sie jedoch die Live-Site besuchen, auf die Sie hier zugreifen können.

Bedingtes Layout-Design

Keine Bedingungen in einem globalen Layout. Das Hinzufügen von Layoutabschnitten wird auf jeder Seite verwendet, da es global ist. Wenn Sie nur auf einigen Seiten Ihrer Website eine benutzerdefinierte Fußzeile benötigen, beispielsweise auf einzelnen Blog-Artikeln, müssen Sie ein bedingtes Layout verwenden.

Ein bedingtes Layout kann nur vorhandene Layoutabschnitte enthalten. Scrollen Sie dann auf der Registerkarte „Fußzeile auswählen“ des Layouts zu „Vorhanden“, wo Sie den Layoutabschnitt hinzufügen können, wie unten gezeigt.

Sie müssen die Bedingungen für jedes bedingte Layout festlegen. Das Layout ist aktiv, sobald die Bedingungen angegeben sind; Wenn Sie dies daher tun, bevor Sie den Layoutbereich einrichten, sind die Seiten, die den Bedingungen entsprechen, leer.

Um eine Bedingung hinzuzufügen, wählen Sie im unteren Menü des Layouts die Option „Bedingung hinzufügen“ aus. Es erscheint ein Dialogfeld, wie unten dargestellt. Weitere Informationen zu bedingten Layouts finden Sie unter Bedingte Layouts verstehen. Für dieses amp würden wir jedoch „Alle Beiträge“ auf der Registerkarte „Beitragsbedingungen“ auswählen, wie unten gezeigt.

Hinzufügen von Spalten aus dem Avada Layout Builder

Das Column-Element ist wie das Container-Element eine wesentliche Strukturkomponente beim Entwurf einer Avada-Site.

Das Hinzufügen von Spalten ist mit dem Avada Layout Builder relativ einfach.

  • Klicken Sie auf die Schaltfläche „ + Container “, um der Seite einen Container hinzuzufügen. Beim Einfügen eines Containers werden Sie aufgefordert, eine Spalte oder ein Spaltenlayout auszuwählen. Sie können einen leeren Container erstellen, aber normalerweise fügen Sie in diesem Schritt Spalten hinzu.
  • Um neue Spalten zu einem vorhandenen Container hinzuzufügen, bewegen Sie den Mauszeiger über den Container und klicken Sie auf die Schaltfläche „ + Spalte “. Um eine neue Spalte hinzuzufügen, klicken Sie hier.
  • Klicken Sie in der oberen linken Ecke einer Spalte auf das Symbol „Spaltengröße ändern“. Es wird jetzt die gleiche Größe wie Ihre Spalte haben. Beispielsweise unter der Option „Spaltengröße ändern“ amp „1/4 angezeigt
  • Ziehen Sie Spalten per Drag-and-Drop, um sie neu anzuordnen. Sie können Spalten auch per Drag-and-Drop in Container ziehen.

Eine Spalte kann nur innerhalb eines Containerelements mit derselben Breite platziert werden; Dies ist normalerweise die Site-Breite, die Sie für die Site festgelegt haben. Wenn Sie also die Site-Breite auf 1200 Pixel festlegen, ist eine halbe Spalte 600 Pixel breit. Voreingestellte Spaltengrößen werden unten angezeigt, wenn sie einer Seite hinzugefügt werden.

In Avada können Sie Spaltenbreiten (und mehr) separat für große, mittlere und kleine Layouts festlegen. Hier erfahren Sie, wie Sie die Anzeigereihenfolge und -größe von Spalten in responsiven Layouts festlegen und wie Sie diese hervorragende neue Funktion mit Spalten verwenden.

Benutzerdefinierte Breiten finden Sie unter Spalten > Design > Breite . Wie unten gezeigt, können Sie mithilfe einer Prozentzahl eine benutzerdefinierte Breite angeben. Somit ist die Positionierung uneingeschränkt möglich

„Auto“ ist eine neue Breitenoption. Anstelle einer festen Breite nimmt die Spalte den Platz des bedeutendsten Elements darin ein. Es funktioniert also nur in einigen Fällen. Sie können die übergeordnete Spalte auf „Auto“ ändern und die Größe der Spalte wird an die Breite des Elements angepasst.

Avada fügt außerdem Responsive Option Sets für Container und Spalten hinzu. Im Backend des Builders können Sie die Responsive Icons in allen Spalten sehen, wie im Bild unten dargestellt. Der Front-End Builder zeigt die Responsive Icons in den Optionen an.

Nur die neuen Flex-Container zeigen Responsive Option Sets. Spalten in Legacy-Containern sind nicht verfügbar.

Abschluss

Dank Avada Layouts ist die Möglichkeit, eine benutzerdefinierte Fuß- und Kopfzeile zu erstellen und Spalten hinzuzufügen, nun Realität und eine nahezu unbegrenzte Option. Sie können nicht nur die Leistungsfähigkeit von Avada Builder nutzen, um praktisch jede Fuß- oder Kopfzeile zu erstellen, die Sie sich vorstellen können, sondern Sie können auch die Leistungsfähigkeit bedingter Layouts nutzen, um sie auf jeder Seite, Kategorie, jedem benutzerdefinierten Beitragstyp oder einer beliebigen Kombination davon anzuzeigen oder auszublenden Kriterien, die Ihnen beim Einsatz des Avada Builders einfallen.

Wenn es um WordPress-Layouts geht, ist Avada Layouts im wahrsten Sinne des Wortes ein Game-Changer. Die Tatsache, dass es eine solche Gestaltungsfreiheit und Einsatzflexibilität ermöglicht, bedeutet, dass der Prozess der Erstellung von Fußzeilen nie derselbe sein wird.

Hanson F.

kürzliche Posts

So verwenden Sie Kopf- und Fußzeilen mit Elementor

Kopf- und Fußzeilen einer Website sind wesentliche Elemente. In den meisten Fällen dient der Header der Navigation …

6. Januar 2022

WordPress-Theme-Vergleich: Astra vs OceanWP

Zwei der beliebtesten WordPress-Themes auf dem Markt sind Astra und OceanWP. Fachmann…

2. Januar 2022

Vergleich des WordPress-News-Themes: Zeitung vs. Astra

Um eine hervorragende Nachrichten-Website zu erstellen, müssen Sie kein Webdesigner werden. Wir…

25. Oktober 2021

Erstellen Sie eine nachrichtenbezogene Website mit dem Zeitungsthema

Das Newspaper-Theme ist eines der bedeutendsten WordPress-Themes, das von tagDiv entworfen wurde, einem…

18. Oktober 2021

So erstellen Sie einen E-Commerce mit dem Avada WooCommerce Builder

Wenn es um die Einrichtung eines Online-Shops geht, ist WooCommerce das plugin -in der Wahl. Es…

4. Oktober 2021

So verwenden Sie Sticky-Header- und Scrolling-Effekte mit Elementor

Ein Header ist im Allgemeinen das Erste, was eine Person sieht, wenn sie Ihre Website besucht.

21. September 2021