Elementor Container für Anfänger: Erstellen Sie einen modernen Preisbereich von Grund auf neu

1. Einführung: E, willkommen zurück zu einer weiteren großartigen Elementarklasse von mir, Ich bin Webdesigner und WordPress-Dozent. In diesem Kurs möchte ich Ihnen zeigen, wie Sie mit Elementor einen modernen Preisbereich erstellen mit Elementor einen modernen Preisbereich Wir werden die kostenlose Version von Elementor verwenden. Wenn Sie Elementor noch nicht kennen, ist dieses Projekt der perfekte Weg, um sich mit Flexbox-Containern vertraut zu machen Flexbox Containers ist das neue Layoutsystem Abschnitte und Spalten ersetzt Wir werden das Layout Schritt für Schritt durchgehen vom Verständnis der Struktur unserer Preisgestaltung als Sammlung von Containern und Elementen bis hin zum Hinzufügen und Gestalten des gesamten Inhalts Und das Beste daran: Du brauchst kein Elementor Pro oder irgendwelche kostenpflichtigen Plugins, deine Kreativität und die kostenlosen Tools, die bereits in Wordpress und Elementor integriert Und am Ende dieses Kurses wirst du nicht nur einen übersichtlichen, ansehnlichen Preisbereich haben , sondern du wirst auch verstehen, wie Flexbox-Container funktionieren und wie Flexbox-Container funktionieren und du sie benutzt, um flexible, moderne Layouts in einem Lamenter zu erstellen moderne Layouts In der nächsten Lektion möchte ich Ihnen nun eine Demo dessen zeigen , was wir bauen werden Lassen Sie uns also gleich eintauchen. Wir sehen uns in Kürze. 2. Projekt-Demo: Das ist also genau das, was wir bauen werden. Wenn ich mit der Maus über eine der Tabellen hier fahre, siehst du diesen schönen Schlagschatten, und wenn ich mit der Maus über die Schaltflächen fahre, wirst du feststellen, dass sie diesen animierten Effekt haben Das nennt man Bobbing, und wir werden sehen, wie man das hinzufügt. Die Liste hier ist durch diese gestrichelte Linie getrennt. Im Grunde ist es das, was wir erstellen werden. In der nächsten Lektion bereiten wir unsere Umgebung vor. Wir sehen uns in Kürze. 3. Installieren von Astra und Elementor: Lass mich jetzt zu meiner Wordpress-Website wechseln. Dies ist eine brandneue Installation von Wordpress. Ich gehe davon aus, dass Sie WordPress bereits installiert haben. Also als erstes möchte ich mein Theme installieren , weil jede Wordpress-Website ein Theme haben muss. Also gehe ich zu Appearance Themes und das aktive Theme ist 2025, aber ich möchte Astra installieren, also sage ich Theme hinzufügen und hier ist Astra. Ich sage installieren und aktivieren. Und da haben wir's. Jetzt ist Astra unser aktives Thema. Lass mich das einfach schließen. Wir wollen ihre Vorlagen nicht verwenden, schließen Sie das und das. Als Nächstes möchte ich Elementor installieren da Sie die Preistabelle mit Elementor erstellen werden die Preistabelle mit Elementor Gehen wir also zu den Plug-ins. Lassen Sie uns zunächst einfach auf Installierte Plugins klicken, um zu sehen, was wir hier haben. Wir haben diese beiden , die mit jeder Installation von WordPress geliefert werden. Ich wähle einfach all diese Plugins aus und sage „Deaktivieren“, „ Anwenden“, „Alle auswählen“, Löschen“, „Anwenden“, weil ich keines von ihnen verwenden möchte. In Ordnung, also lass mich sagen Plugin hinzufügen. Hier gebe ich Elementor ein Und hier ist jetzt eine Elementor-Installation Da haben wir's. Also sage ich jetzt aktivieren. Und jetzt ist Elementor auf unserer Website aktiv. Jetzt müssen Sie möglicherweise einen Einrichtungsassistenten ausführen. Wenn Sie WordPress noch nie installiert haben, müssen Sie manchmal müssen Sie manchmal einen bestimmten Einrichtungsassistenten verwenden, der , glaube ich, 2023 eingeführt wurde . Wenn du zu einem Einrichtungsassistenten weitergeleitet wurdest, gehe diesen Einrichtungsassistenten durch und beende die Einrichtung eines Elementors 4. Der Preisabschnitt Teil 1: Nachdem wir unser Theme und unser Plug-In Elementor installiert haben , ist es an der Zeit, unsere Preistabelle zu erstellen Also möchte ich direkt zu den Seiten gehen. Und wir haben diese beiden Standardseiten hier. Jetzt wird eine Preistabelle normalerweise auf einer Preisseite platziert. Fügen wir also eine Seite mit dem Namen Preisseite hinzu. Ich sage Seite hinzufügen. Und ich gebe ihm den Namen Preisgestaltung. Und ich sage jetzt, denk dran, wir haben Elementor und Astra installiert Hier haben wir also ein paar Einstellungen, die jetzt möglich sind, weil wir Elementor und Astra installiert haben E-Vorlage, wir wollen Elementor in voller Breite verwenden. Wechseln wir hier zu den Astra-Einstellungen. Für das Container-Layout verwende ich am liebsten die volle Breite. Diese bleiben unverändert. Belassen Sie es als Standard. Was die Seitenleiste angeht, verwende ich gerne keine Seitenleiste Und für diese Elemente möchte ich den Astra-Header und Astra-Foo deaktivieren und das Astra-Banner veröffentlichen Dies sind die Grundeinstellungen, die ich immer für jede Elementarseite festlege , die ich mit Elementor bearbeiten möchte Also bearbeite jetzt mit Elementor. Und hier sind wir. Jetzt überspringe ich das einfach , weil ich keine Verbindung zu meinem Elementarkonto herstellen möchte , da dies nur ein Beispiel ist Also überspringe es. Jetzt haben wir eine leere Seite, auf der wir alles hinzufügen können, was wir wollen. Also werde ich auf Neuen Container hinzufügen klicken und eine Flexbox verwenden Ich nehme diesen Container mit einer einzigen Richtung nach unten. Es ist dieser rosafarbene Behälter von Kante zu Kante. Ich möchte, dass wir das Ding für einen Moment beobachten. Das sind also drei Container. Wir werden drei Container erstellen, und jeder Container hat ein Überschriftenelement, ein Texteditor-Element. Dies ist ein Container mit drei Containern nebeneinander angeordnet sind, um diese drei Textteile, das Dollarsymbol, den Betrag und den Monat, zu erstellen . Das sind drei Spalten. Wir werden sehen, wie das geht. Das ist ein einziger Teiler. Dies ist eine Symbolliste, und diese Symbolliste befindet sich im selben Container wie diese Schaltfläche, aber wir werden sehen, wie das alles funktioniert Ich möchte nur, dass wir eine Mindmap von dem haben, was wir gerade erstellen. Also, wenn wir wieder reingehen, wollen wir damit beginnen diese drei Container zu erstellen. Und wie Sie sehen können, berühren die drei Container nicht die Ränder des Bildschirms. Sie nehmen etwa 80% der Breite von diesem Rand bis zu diesem Rand Sie nehmen etwa 80% der verfügbaren Breite ein. Wir wollen also einen Container hinzufügen der die Preistabellen enthält, und dieser Container wird zu 80% breit sein Lassen Sie mich Ihnen zeigen, was ich meine. Gehen wir also wieder rein und fügen einen Container hinzu. Ich werde einen Container hinzufügen und ihn dort ablegen. Dieser äußere Behälter, der rosa ist, sollte also 100% einnehmen, also stelle die Breite auf Prozent um und sage 100%. Und jetzt der Behälter, den wir hineinlegen, dieser schwarze Behälter, nicht der rosafarbene. Dieser gräuliche Behälter sollte 80% ausmachen. Aber jetzt ist er links vom äußeren Behälter ausgerichtet, also wähle ich den äußeren Behälter und richte die Elemente in der Mitte Schau dir an, was damit passiert , wenn ich auf Elemente ausrichten klicke. Jetzt ist es in der Mitte ausgerichtet. Was wir gerade erstellt haben, ist der Container, der diese drei Spalten enthält. Lassen Sie uns nun die drei Spalten erstellen. Hier, im inneren Container, möchte ich noch einen weiteren Container hinzufügen. Und ich werde diesen Container, den inneren Container, nach rechts verlinken und duplizieren und ihn erneut duplizieren. Jetzt haben wir drei Container in diesem Container. Und dieser Container befindet sich natürlich in diesem Container. dieser Container ausgewählt ist, gehe ich in die Richtung und wechsle von oben nach unten, denn wie Sie sehen können, ist seine Richtung momentan von oben nach unten. Mit anderen Worten, der Inhalt im Container selbst wird von oben nach unten gestapelt Deshalb sind diese drei eins, zwei, drei. Wenn wir jedoch zur horizontalen Zeile wechseln, ist alles innerhalb des Containers jetzt von links nach rechts angeordnet, anstatt von oben nach unten. Jetzt haben wir also drei Spalten. werde das veröffentlichen, ich werde einfach etwas Text hineinlegen, plus noch einmal Überschrift da und Überschrift da. Wählen Sie diesen aus, wählen Sie diesen, zwei, wählen Sie diese drei aus. Veröffentlichen Sie das, sehen Sie sich die Änderungen in der Vorschau an. Zumindest haben wir jetzt drei Spalten. Lassen Sie uns jetzt weitermachen und diese erstellen. Also wähle ich hier die erste Spalte aus, Spalte Nummer eins, und ich gehe zu Stil, Hintergrund, wähle diesen Pinsel, wähle Farbe und ich wähle eine gelbliche, cremefarbene, weißliche Wählen Sie die Farbe, die Sie möchten, vielleicht irgendwo dort. Lassen Sie mich einfach weitermachen und auswählen, damit ich sehe, dass wir Grundkenntnisse für kleine persönliche Projekte haben. jetzt den Text auswähle, die Überschrift, die wir hier eingefügt haben, ändere ich das einfach auf Basic. Wählen Sie den Container selbst noch einmal aus. Ich gehe zu Rand, mache ihn einfarbig und gebe ihm eine Rahmenbreite von eins. Nehmen wir an, wir veröffentlichen vorerst und schauen uns an was wir als Vorschau haben. Das haben wir. Geben wir ihm ein paar abgerundete Ecken. Solange es noch ausgewählt ist, möchte ich zum Grenzradius gehen und ihm einen Grenzradius von 20 geben. Jetzt hat er diese abgerundeten Ecken und los geht's. Gehen wir jetzt wieder rein, lassen Sie mich Plus sagen, und ich werde hinzufügen, wie Sie sehen können, wir haben diese Liste. Fangen wir also mit dieser Liste an. Ich werde hier die Symbolliste eingeben . Also werde ich diese Symbolliste löschen, sobald diese rosafarbene Markierung erscheint. Da haben wir's. Ich werde auch einen Button hinzufügen. Fügen Sie also eine Schaltfläche direkt in das Feld direkt darunter hinzu. Da haben wir's. Solange es noch ausgewählt ist, kann ich zu Stil und Position Center gehen auch diese Liste auswählen. Mittelpunkt der Stilausrichtung. Ich kann dieses Ausrichtungszentrum für den Textstil auswählen. Denken Sie daran, wir haben diesen Text, und ich sage, das sind drei Spalten. Wir möchten also dieses Rechtsklick-Duplikat auswählen und ich möchte es auf 5$ ändern Richtig, li, duplizieren, richtig, leak, duplizieren. Wählen wir das erste aus und ändern es in ein 1-Dollar-Zeichen, wählen wir das letzte aus und ändern es in einen Schrägstrich für den Monat Das sind nun drei Elemente. Was wir brauchen, lassen Sie mich es zuerst veröffentlichen und dann eine Vorschau davon anzeigen. Das haben wir. Also sage ich hier Plus und füge dann einen Container direkt unter dem Basistext hinzu. Da wir drei Elemente haben, können wir sie per Drag & Drop in den Container ziehen. Ich ziehe auch den Preis, füge ihn dort ein und dann den Monat direkt unter dem Preis. Nein, es ist noch nicht in der Kiste. Ich möchte sichergehen, dass es in diesem Behälter ist. Also lass mich den Monat ziehen In Ordnung, lass mich ihn einfach in der Mitte ablegen und das dann nach oben ziehen und in die Mitte legen . Warum bin ich nicht in der Lage, alles richtig zu machen. Jetzt kann ich es bis zum Ende durchziehen. Jetzt befinden sich diese drei Elemente in einem Container. Wenn ich also den Container auswähle und hier die Richtung ändere, sind sie jetzt horizontal angeordnet. Jetzt gehe ich, solange dieser Container noch ausgewählt ist, werde den Inhalt so zur Mitte hin ausrichten. Und jetzt kann ich jeden von ihnen einzeln auswählen und in der Größe ändern. Wenn ich hier also Typografie stylen möchte, kann ich die Größe der 5$ individuell erhöhen , einfach so Also veröffentliche das. Das ist es, was wir 5. Der Preisabschnitt Teil 2: Wie Sie sehen können, haben wir hier unten und hier oben keinen Abstand. Wenn ich also den Container auswähle, der hier alles , gehe ich zu Erweitert Ohne diesen Link zu unterbrechen, werde ich sagen, dass der Abstand 30 sein wird Das ist der Abstand vom Rand zum inneren Inhalt. Was ist, wenn ich 50 sage? Ja, 50 ist okay. Also, jetzt haben wir 50 an der Seite, wir haben 50 hier oben, 50. In Ordnung. Damit möchte ich als Nächstes diesen Container auswählen und die Elemente horizontal in einer geraden Linie ausrichten . Schau dir das an, wenn ich Elemente ausrichten auswähle. Jetzt ist alles gerade angeordnet. Wählen Sie dies aus, gehen Sie zum Stil Typografie, Gewicht 900 schwarz. Wählen Sie den Monat aus, gehen Sie zu Stil, Typografie. Tatsächlich werde ich die Größe auf Größe 18 reduzieren, das Symbol, Währungssymbol und den Typografiestil auswählen Ich denke, diese Größe ist okay. Jetzt möchte ich zur erweiterten Marge (rechts) wechseln und die Marge auf der rechten Seite reduzieren, um sie dem Betrag anzunähern. Negative 20 scheint also zu funktionieren. Ich werde auch den Betrag auswählen. Gehe zur erweiterten Marge und reduziere die rechte Marge , um sie nach rechts zu verschieben. Einfach so, dass sie nahe beieinander sind. Jetzt, wo das noch ausgewählt ist, kann ich zur Stiltextfarbe wechseln. Ich kann ihm 209-20-9209 geben. Wählen Sie diesen Text aus. Stil, Textfarbe, kann ihm diese 29 geben, richtig kopieren. Ich wähle auch das aus, den Symbolstil. Komm her. Fügen Sie den Code ein. Jetzt habe ich vergessen, diesen Teiler hinzuzufügen. Also lass uns wieder hier rein gehen. Lassen Sie uns außerdem einen Teiler hinzufügen. Lass es uns genau dort ablegen, einfach so außerhalb dieses Containers Und genau hier, sagen wir, es sollte 80% der Breite einnehmen, und richten wir es so an der Mitte aus. Ändern wir es in eine gepunktete oder gestrichelte Linie. Ich werde zur gestrichelten Linie wechseln. Ich wähle diese Symbolliste aus und gehe zum Symbol. Gehen wir zurück zum Inhalt, listen Element Nummer eins auf, löschen das und ändern wir diesen Namen in das, was wir hier für bis zu fünf Benutzer haben. Ich glaube, ich hatte diesen Text. Ich möchte keine Zeit mit Tippen verbringen. Also werde ich es von dort kopieren, wo ich es habe. Ich habe es gefunden, kopiere das. Ich werde es hier einfügen. Artikel Nummer zwei auflisten, das Symbol löschen. Ich will das Symbol nicht. Kopiere das, platziere es hier. Jetzt werde ich diesen Teil schnell vorspulen. Fügen Sie einfach alle Elemente hinzu und entfernen Sie das Symbol, wenn Sie es nicht benötigen. Ich werde das löschen. Also wie gesagt, ich werde diesen Teil schnell vorspulen und wir sehen uns, sobald ich fertig bin . Füge das da rein. Kopieren Sie das, duplizieren Sie das, fügen Sie das dort ein, veröffentlichen. Als Nächstes möchte ich auswählen, solange das noch ausgewählt ist, ich möchte zum Stil wechseln und ich möchte Leerzeichen dazwischen sagen. Ich möchte, dass wir den Betrag ein wenig verteilen, vielleicht bis zu zehn. Ordnung, als Nächstes gehen wir zum Button, und ich gehe zum Inhalt und sage, was haben wir hier? Inzwischen. Ja. Also zum Inhalt, solange die Schaltfläche ausgewählt ist Gehen wir jetzt zu dieser Stelle, an der Sie den Link hinzufügen. Gehen wir also davon aus, dass dies der Link ist. Du wirst es genau dort hinstellen. Und wenn Sie in einem neuen Tab öffnen möchten, können Sie den Link in einem neuen Fenster öffnen. Dadurch wird es in einem neuen Tab geöffnet und dieser reduziert. Lass uns stilvoll reingehen. Und zuallererst möchte ich diese Polsterung kaputt machen, weil ich bessere Polsterung geben will: links, 50, rechts, 50, oben, sagen wir 20 und unten Sagen wir jetzt 15. 15. Sagen wir für den Flaschenradius zehn. Ja, einfach so. Veröffentlichen. Und jetzt werden Sie genau hier feststellen, dass dieser Abstand größer ist als dieser Abstand. Lassen Sie uns den Abstand hier reduzieren. Ich werde diesen Container auswählen. Ich weiß nicht, warum ich ihn nicht auswählen kann. Okay, lassen Sie mich diesen Container auswählen , zu Erweitert gehen, dann diesen Standardrand durchbrechen dann den unteren Rand verkleinern, vielleicht bis zu dieser Stelle. Wie Sie jetzt sehen können, ist der Abstand zwischen der Fünf und der Trennlinie und der der Fünf und der Trennlinie und der Abstand zwischen hier und hier fast identisch. Also veröffentliche das Und schauen wir uns an, was wir bisher haben. Ich glaube, jetzt kommen wir weiter. Das nächste, was wir tun wollen, ist zunächst, lassen Sie uns das ändern. Also wähle ich dieses Basic gehe zurück zum Stil, zur Typografie Ich möchte das auf 900 Schwarz ändern. Gehen wir zur Schriftart, zur Textfarbe. Lassen Sie uns das auf 29 ändern, um die gewünschte Farbe zu erhalten. 29 29, 29 ist dieselbe Farbe, die wir dafür verwendet haben. Und ich möchte diesen Container auswählen , um diesen Abstand ein wenig zu reduzieren. Also oberer Abstand. Vielleicht auch bis zu dieser Stelle. Und ich möchte auch diese Polsterung an der Seite reduzieren. Denken Sie daran, wir haben diesen Behälter ausgewählt und rundum eine Polsterung von 50 angebracht Lassen Sie uns nun weitermachen und diesen Link unterbrechen. Und für links und rechts machen wir zehn und zehn draus. Oben und unten sind es jeweils 50. Veröffentlichen Sie das. Und jetzt sehen wir uns eine Vorschau der Änderungen an. Das ist jetzt viel besser. Ordnung. Also zumindest kommen wir jetzt irgendwohin. Als Nächstes möchte ich, dass wir diese beiden Platzhalter für die Spalten waren Jetzt möchte ich rechten Maustaste darauf klicken und es duplizieren, rechten Maustaste darauf klicken und es erneut duplizieren Und jetzt können wir diese beiden entfernen, weil sie nur Platzhalter für zwei andere Spalten waren Und weil wir das haben, werde ich einfach die Preise für diese anderen hinzufügen Also kopiere das, wähle das aus, geh hierher und ändere das in das. Und ich werde diesen Teil schnell vorspulen. Und jetzt der allerletzte hier und da geht's los. Damit habe ich das Hinzufügen der verschiedenen Funktionen und Vorteile der einzelnen Pläne abgeschlossen . Ich sage einfach „Veröffentlichen“. Und jetzt schauen wir uns die Änderungen an. Und jetzt haben wir das gerade. 6. Der Preisabschnitt Teil 3: Ich möchte, dass wir es etwas vorzeigbarer machen. Fügen wir hier oben etwas Abstand hinzu, damit es auf unserem Bildschirm zentralisiert Also wähle ich den Container aus. Fortgeschrittene, ich werde die Marge knacken und ihr eine obere Marge von 50 geben. Und das werde ich veröffentlichen. Sehen wir uns eine Vorschau der Änderung an. Ja, ich denke, das ist besser. Und jetzt, während dieser Container noch ausgewählt ist, gehe ich zum Layout. Nein, lassen Sie uns diesen inneren Behälter auswählen, der alles enthält. Es waren 80% Ich möchte, dass wir es vielleicht zu 70% veröffentlichen. Also, ich möchte, dass du hier etwas beachtest. Hier sind all unsere Knöpfe unten. Das ist die Referenz, die wir uns angesehen haben. Unsere Schaltflächen sind also in jeder Box und in jeder Box sehr richtig ausgerichtet . Und genau hier in der Version, die wir erstellt haben, hebt sich unsere Schaltfläche, um der Symbolliste näher zu kommen. Wie bringen wir sie also alle nach unten? Gehen wir wieder rein. Denken Sie daran, wir haben diesen Container hier hinzugefügt und diese drei Elemente hinzugefügt, und wir konnten sie innerhalb des Containers anordnen. Wir können hier dasselbe tun und diese beiden Elemente voneinander trennen. Also sage ich Plus, dann Container. Ich werde es genau dort ablegen. Das ist okay. Und wenn es genau dort abgelegt ist, kann ich es auch in den Container und auf die Schaltfläche ziehen . Jetzt befinden sich beide im Container. Ich wähle den Container selbst aus und gehe zu Erweitert. Und genau hier haben wir Größe. Wir werden sagen, wachsen. Mit anderen Worten, besetzen Sie den verfügbaren Platz. Füllen Sie jeden verfügbaren Speicherplatz aus, der nicht genutzt wird. Sie also wachsen, wird der Container so groß, dass er den verfügbaren Platz einnimmt. Jetzt, wo er gewachsen ist, müssen wir, solange er noch ausgewählt ist, nur noch zum Layout zurückkehren und den Inhalt so begründen, dass er Leerzeichen dazwischen hat. Das wird den Knopf nach unten drücken. Denken Sie daran, dass wir an diesem Außenbehälter eine Polsterung hatten, obere und eine untere Polsterung von 50. Deshalb geht das bis zu diesem Teil. Nachdem das erledigt ist, gehe ich zurück ziehe einen weiteren Container hierher. Ziehen Sie diese beiden in den Container. Und weil wir bereits Überschriften dafür hatten , werde ich ihn auswählen, kopieren, diesen anderen Container auswählen, rechten Maustaste klicken und den Stil einfügen Welche Stile wir auch immer darauf anwenden, sie werden auch darauf angewendet, und ich werde das auch tun. Das ist eine Überschrift, ein Container. Lass es dort fallen, zieh das da rein, zieh das da rein. Richtiges Leck, Kopieren, rechtes Leak-Paste-Format. Veröffentlichen Sie das. Und bevor wir es uns ansehen, wähle ich den Button aus. Ich gehe zu Button Normal. Geben wir dem eine blaue Farbe oder was auch immer Sie wollen, Ihre Markenfarbe, vielleicht Rot. Lassen Sie mich das sogar noch einmal auswählen. Solange es noch ausgewählt ist, gehe ich zu Hover Und bei Hover sollte die Hintergrundfarbe 29 29, 29 sein. Bei Hover ist es diese Farbe. Nun, solange es sich noch unter Hover befindet, gehen wir zu Hover Animation und ich wähle Bob Das ist der, den ich mag. Das ist Bob. Und jetzt, wo der Button aktualisiert ist, werde ich Leak Copy schreiben. Richtig, Leak, Stil einfügen, richtig, Leak, Einfügen-Stil. Aber jetzt mag ich diese rote Farbe nicht. Es ist zu schreiend. Ich werde es rückgängig machen, also wähle ich das aus. Oder ich werde das tatsächlich auswählen. Im Normalfall möchte ich diese rote Farbe kopieren, Maus darüber fahren und sie dort einfügen Und wenn es normal ist , dann wird es 29 , 29, 29 sein Auf Hover ist es rot. Ja. Also kopiere den Paste-Stil. Veröffentlichen Sie das, sehen Sie sich die Änderungen in der Vorschau an. Da haben wir's. Also ich denke, wir sollten die Größe dieses Teilers reduzieren, also wähle ich ihn aus und mache ihn vielleicht auf 50%, rechts undicht kopieren, rechts durchsickern, Stil einfügen, rechter Leak, Stil einfügen Veröffentlichen Sie das. Ich weiß nicht, ob noch etwas übrig ist. Ja, ich glaube, eine Sache ist noch übrig. Wir müssen einige Hover-Effekte hinzufügen, sodass ein Schlagschatten entsteht, wenn jemand mit dem Mauszeiger darüber Schlagschatten Wählen Sie also diesen ersten aus und gehen Sie zum Layout. Gehen wir nun zu Stil, Rahmen, Schatten beim Schweben Ich möchte ihm einen Box-Schatten geben. Einfach so. Jetzt können wir diese Dunkelheit ändern. Ich möchte, dass es weniger dunkel ist. Wenn ich also zu dieser Transparenz übergehe, kann ich die Schattenintensität reduzieren. Und jetzt, wo ich den Schlagschatten mag, rechtes Leck, Kopieren, rechtes Durchsickern, Einfügestil, rechtes Durchsickern, Einfügen-Stil, veröffentliche das. Und jetzt sehen wir uns eine Vorschau der Änderungen an. Da haben wir's. Also , wenn ich jetzt drüber gehe, los geht's. In Ordnung. Lassen Sie mich zum Schluss diese drei ändern, diesen Standard. Unternehmen. Und ich glaube, lassen Sie mich mit der rechten Maustaste auf diese Kopie klicken. Nein, lassen Sie mich mit der rechten Maustaste auf dieses Duplikat klicken und es dann direkt unter Basic ziehen. Und ich denke, das gilt für kleine persönliche Projekte. Projekte oder persönliche Projekte. Und ich werde zu Stil, Typografie übergehen. Ich werde den Buchstabenabstand vergrößern , aber die Schriftgröße reduzieren Und ich gehe zu „ Erweiterter Rand oben“, ihn bis zu diesem Punkt gehe dann zu „Grundlegender erweiterter Rand unten“. Bis zu dieser Stelle. Jetzt wähle ich das aus, klicke mit der rechten Maustaste auf Kopieren, Rechtsklick auf den Text hier, Einfügen, Rechtsklick auf dieses Einfügen. Und dafür steht, glaube ich, junge Startup-Projekte. Junge Startup-Projekte. Und schließlich Projekte auf Unternehmensebene. Veröffentlichen Sie das. Sonst noch etwas? Ja, das sind 19$ Und das sollte 49$ für die Veröffentlichung kosten. Und lassen Sie uns die Änderungen überprüfen. Nun, noch eine Sache, die mir aufgefallen ist, haben wir vergessen, aber lassen Sie uns zunächst einen Blick darauf werfen. Mir gefällt es wirklich. Aber eine weitere Sache, die wir vergessen haben hinzuzufügen, sind diese winzigen Linien genau hier. Diese dienen also nur dazu, dem, was wir bereits haben, etwas Würze zu verleihen . Wenn ich also die Icon-Liste auswähle, gehe ich zu Teiler und sage weiter, und wie Sie sehen können, sind sie zu lang Also mit, wir werden sie vielleicht an diese Stelle stellen. Ich ändere das in gepunktet oder sagen wir gestrichelt. Und ja, ich werde das einfach so lassen, richtig, undicht, durchsickern, kopieren, rechts, durchsickern, einfügen, richtig, wie dieser Einfügestil, und Gehen wir rüber, um es uns anzusehen. Und da haben wir's. Also im Grunde denke ich, dass dies ein guter Ort ist, um das zu beenden. Es war ein kurzes Beispiel dafür, wie man eine Preisliste erstellt, aber was noch wichtiger ist, wie man mit Containern in Elemental arbeitet denn sobald man Container in Elementor beherrscht, kann man praktisch alles entwerfen, was man sich vorstellen kann Also ich denke, das ist ein guter Ort, um dem ein Ende zu setzen. Wenn es dir gefallen hat, wenn du es hilfreich fandest, vergiss nicht, es zu mögen. Vergiss nicht, mir in Zukunft für weitere Tutorials zu folgen . Also bis zum nächsten Mal, bleib kreativ. Frieden. 7. Schlussgedanken: sich gerade einen modernen, übersichtlichen Preisbereich eingerichtet, indem nur die kostenlose Version von Elementor Im Laufe der Zeit haben Sie auch gelernt, sicher mit Containern und Flexbox-Containern zu arbeiten sicher mit Containern und Flexbox-Containern Nun, dieses Layout mag einfach aussehen, aber die Fähigkeiten, die Sie gerade geübt haben , nämlich mit verschachtelten Containern zu arbeiten, Abstände, Abstände, Ränder und Stilelemente zu verwalten , das sind die Grundlagen all das sind die Grundlagen aller großartigen Elementor-Designs, und jetzt wissen Sie, wie das alles geht. Und jetzt sind Sie dran. Ich würde gerne sehen, was du erschaffen konntest. Gehen Sie zur Registerkarte Projekte und Ressourcen direkt unter diesem Videoplayer und laden Sie Ihr Projekt hoch. Machen Sie einfach einen Screenshot Ihres Preisbereichs und laden Sie ihn hoch oder teilen Sie uns einen Link zu einer Live-Website auf der wir uns Ihren Preisbereich ansehen können. Ich schaue mir jedes Projekt an und würde gerne sehen, was Sie sich einfallen lassen konnten. Und wenn dir dieser Kurs gefällt, würde ich mich sehr, sehr freuen, wenn du eine kurze Bewertung hinterlassen könntest. Es hilft mir nicht nur verstehen, welche Auswirkungen meine Kurse haben, sondern es hilft auch anderen Schülern meine Kurse auf Skillshare zu entdecken Nehmen Sie sich also einen Moment Zeit, geben eine kurze Bewertung ab und teilen Sie mir , was Sie von dem Kurs halten Nochmals vielen Dank, dass Sie zu mir gekommen sind, und wir sehen uns in der nächsten Klasse. Frieden.