In der letzten Ausgabe haben wir darüber gesprochen, wie man diePoster zum Thema Woodmart(Banner), in dieser Ausgabe sprechen wir über den Elementor-Editor zur Dekoration derWoodmart-ThemenWir werden in die Verwendung des Elementor-Editors eintauchen, um Ihr WoodMart-Theme weiter anzupassen und zu optimieren. In diesem Tutorial lernen Sie, wie Sie die multifunktionalen Module von Elementor nutzen, um ein schönes und funktionales Frontend für Ihre Website zu erstellen.

Rufen Sie den Bearbeitungsmodus wie oben gezeigt auf.

Jede Vorlage enthält verschiedene Module, wie unten gezeigt. Dies ist ein Screenshot eines der Module, aber die tatsächliche Anwendung bedeutet nicht, dass jedes Modul für die

Unten sehen Sie die gleiche Vorlage, aber mit einem anderen Effekt

Sieht es nicht viel besser aus, nicht so eintönig, sondern mit einer eigenen Persönlichkeit?

Als Nächstes werden wir über die Auswirkungen der einzelnen Funktionen des Elementor-Editors und die spezifischen Methoden sprechen.

Lassen Sie uns zunächst erklären, das gesamte Layout der oben genannten Vorlage, geben wir die Vorlage auf der rechten Seite der Bearbeitungsseite wird das gesamte Layout zu sehen, wie folgt

Layout wie oben gezeigt sind Container (Container) Zusammensetzung, die Container innerhalb der verschiedenen Module

Wie oben gezeigt, zum Beispiel durch den Titel und Klassifizierung Modul zwei Implementierungen, auf der rechten Seite wird die Anzeige entsprechen, Elementor-Editor, besser geeignet für Anfänger, aber wenn Sie die schönere und besser aussehende anpassen möchten, sondern auch einige Erfahrung benötigen!

Nehmen wir als Beispiel zwei spezifischere Module, die wie folgt aussehen

Aus dem Bild oben, das ist ein Poster oder Bild plus ein Produkt-Display-Modul rechts, das Layout ist 1:3, in der Tat, es ist die beiden Container im Inneren des Moduls hinzugefügt

Schauen Sie zuerst auf die linke Seite, das folgende Bild Kastensymbol ist der Container (Behälter), das Stiftsymbol ist der Modul-Editor, dies ist ein Promo Banner (Werbebanner) Modul

Schritte: Website-Frontend → Auswahl des entsprechenden Moduls → Box (Container) Container

Beim Betreten des Containers können wir einige Einstellungen des Containers wie folgt sehen

Es gibt drei Haupteinstellungen, und zwar

Layout: Layout

Stil

Advanced: Erweiterte Einstellungen (fortgeschritten)

Container-Layout: der Stil des Containers, unterteilt in flexible Boxen und Raster (rote Boxen).

Content Width: das Layout des Containers, unterteilt in Mitte und volle Breite, volle Breite ist voller Bildschirm, nach der Übersetzung und die tatsächliche Wirkung in der Lage sein zu verstehen (gelbe Box)

Breite: die Breite des gesamten Containers. (blaues Feld)

Min. Höhe: Höhe des gesamten Containers (blauer Kasten)

Sie können sehen, das blaue Feld, um die Rückseite kann nach dem Prozentsatz der Anpassung oder Pixel-Anpassung angepasst werden, aber es gibt andere, insgesamt vier Formate, die am häufigsten verwendeten oder ich sagte, dass die beiden, passen wir nach der tatsächlichen Situation, sondern auch sehen, das Gerät Muster, was darauf hindeutet, dass es möglich ist, nach jedem Gerät individuell anpassen, wenn die adaptive ist nicht ideal, können Sie gehen, um die Anpassung der

Lücken: Spalten, verstanden als Lücken vor dem Container (grüne Kästchen)

Stil, wie oben gezeigt.

Hier wird der Container an die Background (Hintergrund)-Farbe angepasst, die anderen müssen sich vorübergehend nicht bewegen!

Wie oben dargestellt.Advanced: Erweiterte Einstellungen (fortgeschritten)

Layout→Rand: Einstellung des Versatzes des äußeren Rahmens

Layout→Padding: Anpassen des Versatzes des inneren Rahmens

In der Regel nicht brauchen, um einzustellen, wenn Sie brauchen, um Stil ist nicht das gleiche, oder füllen Sie die Notwendigkeit, sich anzupassen, das heißt, die Notwendigkeit für bessere Ergebnisse, aber nicht empfehlen, dass Anfänger zu bekommen, kann zu einem guten Gefühl der Computer-Seite führen, aber andere Geräte scheinen durch das Gefühl durcheinander zu sein!

Responsive: responsive, können Sie dieses Modul, so dass das Gerät zur Anzeige, oder nur in einem Gerät, sehr flexibel, und auch Sie können zwei der gleichen, aber für verschiedene Geräte, hat eine sehr gute Wirkung erreicht, sondern auch zu vermeiden, Selbst-Anpassung oder passen Sie die Wirkung einer Lösung!

Das obige ist der Container (Container) Die grundlegende Verwendung des Containers Grundlagen sind so ziemlich die gleichen, wird es subtile Unterschiede, aber nicht das Modul, der Unterschied wird groß sein!

Was wir über dieses Modul zu sagen haben, erfahren Sie hier

Allgemein: In diesem Modul wird die Möglichkeit angezeigt, Links einzufügen.

Hintergrund.

Quelle: Hintergrundquellen

choose imae: Wählen Sie ein Bild aus, aber nur, wenn Ihre Quelle "choose image" ist, können Sie zur Mediathek gehen oder ein Bild hochladen.

Bannerhöhe: Höhe des Moduls

Bildposition: Position des angezeigten Bildes

Wie oben dargestellt, Inhalt

Entsprechend der Lage des richtigen Moduls, ist dies relativ einfach nicht zu sagen, das gleiche, können Sie auch übersetzt werden, um zu verstehen, die

Stil: Stil, hier können Sie sich mit dem Stil der einzelnen Komponenten, ist es, sie schöner, wie der Titel der Beschreibung der Schaltfläche, sowie weitere Auswirkungen des Moduls, gehen wir nach der Übersetzung zu verstehen, die

Erweitert: erweiterte Einstellungen (fortgeschritten), im Grunde das Gleiche wie bei Containern, aber Anfänger brauchen sie nicht zu optimieren

Als nächstes werden wir über die rechte Seite sprechen.

Schritte: Website-Frontend → entsprechender Container (Kästchensymbol) oder Modul (Stiftsymbol)

Wie die obige Abbildung zeigt, besteht er aus einem Container, in dem das Titelmodul und das Buttonmodul eingefügt sind, der Container darunter wird durch ein Produktmodul ergänzt

Wie oben gezeigt, erscheint beim Berühren des Titels das Stiftsymbol, um den Editor aufzurufen, und dasselbe gilt für das Schaltflächenmodul, wie unten gezeigt

Wie das Bild oben, ist die Bedeutung sehr gut nach der Übersetzung verstanden. Durch die detaillierte Einführung in dieser Ausgabe, ich glaube, Sie haben ein tieferes Verständnis der Anwendung von Elementor-Editor in benutzerdefinierten WoodMart Thema. Wir haben gezeigt, wie Sie die visuelle Wirkung und Funktionalität Ihrer Website mit verschiedenen Modulen und Containern verbessern können. Bleiben Sie dran für unseren nächsten Artikel, in dem wir weitere Tipps zur Verwendung von Basismodulen und Containern geben werden, um Ihnen zu helfen, dieWeb-Design. Vielen Dank für die Lektüre, und wir sehen uns in der nächsten Ausgabe wieder!