So verwenden Sie den Avada Header, Footer und Column Layout Builder

Unser eigener Page Builder, der Avada Builder, ist jetzt in zwei Oberflächen verfügbar: Avada Builder, unser Backend-Wireframe-Pagebuilder, und Avada Live, unser Frontend-Builder, der erst kürzlich mit Avada 6.0 eingeführt wurde .

Mit unserem unkomplizierten System aus Containern, Spalten und Elementen ermöglichen Ihnen beide Versionen des Avada Builders, auf einfache Weise schöne Seitenlayouts für Ihre Website zu 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 auch denselben Code. Sie sind vollständig austauschbar, sodass Sie mit Avada Builder, der derzeit verfügbar ist, das Beste aus beiden Welten haben.

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

Auf den Layout Builder kann über das Avada-Dashboard zugegriffen werden, indem im Dropdown-Menü Layouts > Layout Builder ausgewählt wird. 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 Layoutabschnitten und Layouts finden Sie in diesem Dokument: Grundlegendes zu Layouts und Layoutabschnitten (PDF). Lesen Sie weiter, um mehr über die Dinge zu erfahren, die Sie auf dieser Seite tun können.

Ganz oben auf der Seite Layout Builder befinden sich zwei Teile. Eine Technik zum Auffüllen der Layoutbereiche im Globalen Layout oder zum Erzeugen von Bedingten Layouts wird im ersten Abschnitt skizziert (Tipp: Sie können dies mit dem X schließen) und auf der rechten Seite des Bildschirms befindet sich ein Bereich, von dem aus Sie 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 werden keine Layout-Abschnitte oder -Bedingungen angegeben.

Beim Erstellen von Layouts 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 auf das Papierkorbsymbol oben auf der Seite klicken. Sie können Kriterien auch anzeigen und zuweisen, indem Sie auf den unteren Rand aller Layouts mit Ausnahme des globalen Layouts klicken.

In jedem Layout können Sie die vier einem bestimmten Layout zugewiesenen Layout-Abschnitte sehen, einen für jedes der vier Layouts. In jedem Layoutbereich sehen Sie ein +-Symbol, mit dem Sie diesem Bereich des Layouts einen Layoutbereich zuweisen können, wenn Sie die Maus darüber bewegen. Sie haben die Möglichkeit, diesem Bereich einen bestehenden Layoutbereich zuzuweisen oder einen komplett neuen Bereich zu erstellen.

Abschnittslayout verwenden

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. Für die Ex - amp le erfordert eine benutzerdefinierte Fußzeile eine Fußzeile Layout - Abschnitt, der entweder mit dem globalen oder benutzerdefiniertes Layout hinzugefügt werden. Wir werden uns im nächsten Abschnitt mit der Erstellung eines benutzerdefinierten Footer-Layout-Abschnitts befassen, aber zuerst schauen wir uns Einführung in Avada-Layouts an.

Wählen Sie in der WordPress-Seitenleiste oder im Avada-Dashboard Avada > Layouts aus. Hier werden die Layouts und Layout Sections von Avada erstellt und verwaltet. Wie unten gezeigt, ist das Globale Layout zunächst leer, ohne zugeordnete Layout-Abschnitte.

Anpassen eines Layouts

Dieser Abschnitt kann dem 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.

Auf dem Layout - Bildschirm Abschnitt Builder, wählen Sie die Art von Layout - Abschnitt, geben Sie einen Namen (in dieser ex amp le, Footer, möglicherweise Globale Footer) und Neues Layout Abschnitt Erstellen klicken, wie unten dargestellt.

Die folgende Abbildung zeigt, wie Sie direkt aus dem Layout einen Layoutbereich generieren. Die Layoutabschnitte Ihrer Site müssen einem Layout hinzugefügt werden. Anfänglich gibt es einfach ein globales Layout. Um eine globale benutzerdefinierte Fußzeile zu erstellen, fügen Sie sie diesem Layout hinzu. Benutzerdefinierter Footer-Layout-Abschnitt, und fügen Sie dann Bedingungen zum Custom Footer-Layout-Abschnitt 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 hat oder das globale Layout ist), sind alle neuen Layout-Abschnitte sofort aktiv und leer. Es ist sinnvoller, einem globalen Layout zunächst eine benutzerdefinierte Fußzeile über die Seite Layout Section Builder hinzuzufügen und sie dann dem globalen Layout hinzuzufügen.

Alternativ können wir einem bedingten Layout eine Fußzeile, eine Kopfzeile oder einen Spalten-Layout-Abschnitt hinzufügen und es dann erstellen. Bedingungen werden erst verwendet, wenn Bedingungen hinzugefügt werden. Wie unten dargestellt, können wir den Footer-Layout-Bereich ändern, indem wir den Mauszeiger darüber bewegen und auf das Bearbeitungssymbol klicken.

Hinzufügen des Fußzeilen-Layout-Abschnitts zum bedingten Layout

Bearbeitung von benutzerdefinierten Layouts

Der Standard-WordPress-Editor wird beim Bearbeiten eines neuen Layout-Abschnitts angezeigt. Sie können Avada Builder oder Avada Live von hier aus verwenden. Hier werden benutzerdefinierte Layoutabschnitte erstellt. Weitere Informationen finden Sie unter Erstellen von Layoutabschnittsinhalten, 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 ursprüngliche Fußzeile an, die für die Taxi-Demo erstellt wurde; Dies wurde durch Ändern der Themenoptionen und Fußzeilen-Widgets vorgenommen.

Taxi-Demo > Basis-Fußzeile” src=”https://lh3.googleusercontent.com/_xzRCQdf_jBPoJv6eaW9Wx3rdXORc7Ni1945ud13b9kALKA4WdmZpeSSCTnLx-4hcwPKXGF1dl3E0qragaIr_eJ6AiBY2F Sehen Sie sich die benutzerdefinierte globale Fußzeile von Avada Layouts an.

Die Desktop-Version dieses benutzerdefinierten Headers wird hier gezeigt, aber um den Umfang dieses benutzerdefinierten Headers richtig zu erfassen, müssen Sie 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, z. B. für einzelne Blogartikel, 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.

Zuweisen eines benutzerdefinierten Layout-Abschnitts

Sie müssen die Bedingungen für jedes bedingte Layout festlegen. Das Layout ist aktiv, sobald die Bedingungen festgelegt sind; Daher sind die Seiten, die den Bedingungen entsprechen, leer, wenn Sie dies vor dem Einrichten des Layoutbereichs tun.

Um eine Bedingung hinzuzufügen, wählen Sie Bedingung hinzufügen aus dem unteren Menü des Layouts. Ein Dialogfeld wird angezeigt, wie unten gezeigt. Weitere Informationen zu Bedingte Layouts finden Sie unter Bedingte Layouts, aber für dieses ex amp le, würden wir alle Beiträge in den Beiträgen Registerkarte Bedingungen wählen, wie unten zu sehen.

Hinzufügen von Spalten aus dem Avada Layout Builder

Das Column-Element ist wie das Container-Element eine wesentliche strukturelle Komponente beim Entwerfen 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 hat jetzt die gleiche Größe wie Ihre Säule. Beispielsweise unter der Option „Spaltengröße ändern“ amp „ 1/4
  • Ziehen Sie Spalten, um sie neu anzuordnen. Sie können Spalten auch per Drag & Drop in Container ziehen.

Eine Spalte kann nur innerhalb eines Containerelements mit der gleichen Breite platziert werden; Dies ist normalerweise die Site-Breite, die Sie für die Site festlegen. Wenn Sie also die Site-Breite auf 1200 px einstellen, ist eine 1/2-Spalte 600 px breit. Voreingestellte Spaltengrößen werden unten angezeigt, wenn sie zu einer Seite hinzugefügt werden.

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

Benutzerdefinierte Breiten befinden sich unter Spalten > Design > Breite . Wie unten gezeigt, können Sie durch Verwendung einer Prozentzahl eine benutzerdefinierte Breite angeben. Somit ist die Positionierung uneingeschränkt

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

Avada fügt auch Responsive Options Sets für Container und Spalten hinzu. Im Backend des Builders können Sie die Responsive Icons in allen Spalten sehen, wie in der Abbildung unten zu sehen. Der Front-End-Builder zeigt die Responsive Icons in den Optionen an.

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

Fazit

Dank Avada Layouts ist die Möglichkeit, benutzerdefinierte Fußzeilen und Kopfzeilen zu erstellen und Spalten hinzuzufügen, jetzt Realität und eine fast grenzenlose Option. Sie können nicht nur die Leistungsfähigkeit von Avada Builder nutzen, um praktisch jede Fußzeile oder Kopfzeile zu erstellen, die Sie sich vorstellen können, sondern Sie können auch die Leistungsfähigkeit von bedingten Layouts nutzen, um sie auf jeder Seite, Kategorie, benutzerdefinierten Beitragstyp oder einer beliebigen Kombination von ein- oder auszublenden Kriterien, die Sie sich mit dem Avada Builder vorstellen können.

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

Hinterlasse einen Kommentar

Deine Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind markiert *