Website-Erstellung meistern: Von Grundlagen zu Fortgeschrittenen mit atemberaubenden Effekten und Animationen

1. Einführung: sich jemals gefragt, wie diese auffälligen Websites erstellt werden, oder sind Sie bereit, Ihre eigenen zu entwerfen und damit sogar Geld zu verdienen? Nun, Sie sind am richtigen Ort. Willkommen zu meinem ultimativen Wordpress- und Elementor-Kurs. In diesem Kurs beginnen wir mit einem Überblick über Elementor. Du erlernst alle Grundlagen Außerdem werde ich dir einige supercoole Tricks wie Textanimationen zeigen und darüber hinaus werden deine Designs auffallen lassen, aber wir hören damit nicht Zusammen werden wir drei echte Websites erstellen, jede Stufe höher als die letzte. Die erste ist eine einfache Website, perfekt, wenn Sie gerade erst anfangen. Dann werden wir ein Zwischenprojekt mit einigen fortgeschrittenen Funktionen in Angriff nehmen ein Zwischenprojekt mit einigen fortgeschrittenen Funktionen und schließlich eine Website auf Profi-Niveau erstellen , auf der Sie wie ein Webdesign-Genie aussehen. Hier ist ein aufregender Teil. Am Ende dieses Kurses verfügen Sie nicht nur über die Fähigkeiten, verfügen Sie nicht nur über um fantastische Websites zu erstellen, sondern auch über einen Plan, wie Sie diese Fähigkeiten in Einnahmen umwandeln Websites für Kunden entwerfen Wenn du also bereit bist, etwas Tolles zu kreieren und damit Geld zu verdienen, nimm an dem Kurs und lass uns anfangen 2. Elementor im Überblick: Erste Schritte: Hallo Freunde. Das ist also unser Wordpress AdinFennel oder Ich persönlich liebe es, in einer sauberen Umgebung zu arbeiten, deshalb werde ich dieses Tag schließen Okay, klicken Sie jetzt auf Bildschirmoptionen und kreuzen Sie uns an. Okay, das ist jetzt sauber. Das sieht toll aus. Jetzt erkläre ich Ihnen nacheinander diese Optionen. Zuallererst ist dies unser WordPress-Dashboard und zweitens die Update-Option. Wenn wir also in Zukunft Plugins und Updates installieren, wenn später ein Update für unsere Plugins und Updates kommt , die wir hier zeigen. Sie können also von hier aus aktualisieren. Als nächstes folgt unser Post-Bereich. Also poste auf alle Beiträge, wir können hier alle Beiträge sehen , wenn du ein Blogger bist und Beiträge schreibst. Von hier aus können Sie ihn bearbeiten und löschen. Du kannst deinen Beitrag hier schreiben. Als Nächstes fügen Sie also einen neuen Beitrag hinzu. Von hier aus können Sie einen neuen Beitrag hinzufügen. Wenn Sie darauf klicken, sodass ein Popup erscheint, klicken Sie auf die Schaltfläche Abbrechen. Hier kannst du einen Titel hinzufügen, als ob ich schreibe. Ich gebe dir nur ein Beispiel. Wie ist dein Name? Also zur Beschreibung, ich schreibe so etwas, mein Name ist Ti Hang. Okay, also klicken Sie auf der rechten Seite auf Veröffentlichen und Veröffentlichen. der rechten Maustaste klicken, öffnen wir es in einem neuen Tab und sehen es hier. So sieht unser Beitrag aus. Ich gehe wieder in den Wordpress-Dash-Modus. Also okay. Über Kategorien können Sie Ihre Beitragskategorie verwalten. Okay, als nächstes kommt unser Tag. Kategorien und Tags sind für uns nicht nützlich , da wir gerade unsere Website erstellen. Aber ich gebe nur eine Erklärung zu jeder Option, damit Sie mehr verstehen können. Dies ist unser Benutzerbereich, daher möchte ich mich damit vertraut machen. Ich nehme ein Profil an. Also hier kannst du die Admin-Farbeinstellung wählen . Wenn du also auf Licht klickst, so wie du sehen kannst, ändert sich die Admin-Tenolor-Einstellung Sie können es also nach Ihren Wünschen ändern, aber ich behalte es bei Defoy Von hier aus können Sie also neue Benutzer hinzufügen. In diesem Moment möchte ich Sie mit zwei grundlegenden Begriffen vertraut machen. Einer ist ein Bond oder das Dashboard einer Website, und ein anderer ist das Frontend einer Website. Im Moment ist dies an dieser Stelle also das Dashboard oder das Admin-Panel, weil nur wir es sehen können, so wie wir den Administrator dieser Website hatten. Wenn Sie nun die Website sehen möchten, müssen Sie nur noch Namen der Website wie eingeben. Das ist, wie Sie sehen können, hier ist die Widget-Seite. Ich öffne in einem neuen Tag. Klicke darauf. Hier siehst du das vordere Ende der Seite. Die ganze Welt kann diesen Teil unserer Seite sehen. Im Moment sieht unsere Website also so aus. Natürlich werden wir es so ändern, wie wir es wollen. Aber im Moment ist dies das Frontend unserer Website. Übrigens können wir diese schwarze obere Leiste hier sehen , wenn wir angemeldet sind. Aber andere Besucher können diesen schwarzen Balken nicht oben sehen. Übrigens, bevor ich etwas mache, möchte ich hier nur eine einfache Einstellung vornehmen, also gehe ich zurück. Ich möchte nur einfache Einstellungen vornehmen. Klicken wir also in den Einstellungen zunächst auf Geschlecht. Und hier kannst du deinen Seitentitel ändern , als ob ich hier schreibe. Zum Beispiel schreibe ich hier Wellen, also wenn wir Änderungen speichern, wenn Sie jetzt auf Ihre Frontend-Website gehen und diese aktualisieren, wenn wir das aktualisieren, wie Sie sehen können, dass unser Seitentitel hier angezeigt wird. Okay. Jetzt gehe ich zurück. Hier kannst du einen Slogan schreiben. Von hier aus können Sie ein Site-Symbol auswählen. Wählen Sie ein Site-Symbol und klicken Sie auf Dateien hochladen. Ich wähle stapelweise das Symbol aus, das du auswählen möchtest , z. B. ich dieses Symbol aus und klicke auf Hochladen Als Seitensymbol festlegen. Klicken Sie jetzt einfach auf Bild zuschneiden. Wie Sie sehen können, ist hier unser Symbol angewendet. Wie Sie sehen können, ist dies unser Symbol. Sie können das Site-Symbol von hier entfernen. Diese Einstellungen werde ich nicht ändern. Sie können die Sprache Ihrer Website von hier aus ändern. Okay, aber ich behalte es auf Englisch. Sie können das Datenformat nach Ihren Wünschen ändern , das Zeitformat. Sie können alle Einstellungen nach Ihren Wünschen ändern und dann auf Änderungen speichern klicken. Okay, diese Änderungen sind also Farbe, wie Sie sehen können. Also klicken Sie von hier aus auf Permalinks. Also hier ist die Selektorebene, aber ich werde empfehlen, Post Nick zu verwenden, weil das die A-Optimierung im Google-Ranking erhöht, weil es im Klartext Zahlen gibt, die schwer zu lesen oder zu merken sind , aber der Name des Beitrags ist leicht lesbar und leicht zu merken. Jetzt geht es runter und wir machen sichere Änderungen. Jetzt installieren wir die Themes und Plug-ins, die für unsere Websites wichtig sind , um das Theme zu installieren, gehen wir zum Bereich Design Theme Wie Sie sehen können, ist das Thema 2024 aktiviert. Dies ist die Standardeinstellung bei der Wortless-Installation. Sie können also ein neues Thema hinzufügen, indem Sie darauf klicken. Wie Sie sehen können, gibt es viele kostenlose Themen , die Sie verwenden können. Von hier aus können Sie ein Thema hochladen. Sie können Pile von Ihrem Computer aus auswählen. Aber ich suche das Thema von hier aus. Als ob ich das Thema Astra verwende. Also hier ist unser Astra-Theme, klicken Sie jetzt auf Installieren. Unser Astra-Theme ist installiert. Klicken Sie nun auf Aktivieren, um dieses Theme zu aktivieren. Okay, unser Astra-Theme ist also aktiviert. Wir löschen dieses 2024-Thema. also zunächst Klicken Sie also zunächst darauf und ich klicke auf Löschen und okay. Lassen Sie mich Ihnen erklären , was Themen sind. Themes sind das Layout Ihrer WordPress-Website. Sie bestimmen, wie Ihre Website aussieht und wie Ihre Inhalte den Besuchern angezeigt werden. Teams ändert das allgemeine Erscheinungsbild Ihrer Website, einschließlich Farben, Schriftarten und Layout, sodass Ihre Website attraktiv und benutzerfreundlich aussieht. Wenn ich hierher gehe, wenn ich die Seite jetzt neu lade, wie Sie hier sehen können, wird das nur angezeigt , weil wir die Astra-Themen installieren Das Aussehen unserer Website hat sich geändert. Ich weiß, das sieht langweilig aus. Gehen Sie jetzt zurück zu Ihrem Dashboard. Jetzt installiere ich das Plugin. Also mach weiter mit den Plugins. Unter Installiertes Plugin kannst du sehen, welche Plugins installiert sind, da kein Plugin installiert ist. Neues Plug-In hinzufügen können Sie also ein neues Plugin hinzufügen. Ich klicke darauf. Also schreibe ich in das Suchfeld Eleanor Stellen Sie sicher, dass Ihre Rechtschreibung korrigiert wurde. Das ist unser Aleaor Website Builder. Klicken Sie also auf Jetzt installieren. Klicken Sie auf Aktivieren, um dieses Plugin zu aktivieren. Okay, jetzt, wie du sehen kannst, wird unser Plugin hier angezeigt. Also, was sind Plugins im Grunde? Plug-ins erhöhen die Funktionalität Ihrer WordPress-Websites, fügen Plug-ins neue Funktionen hinzu, verbessern die Leistung und erhöhen die Sicherheit. Sie verbessern, was Ihre Website kann und wie sie abschneidet. Wir werden von hier aus ein neues Plugin hinzufügen. Von hier aus können Sie nach anderen Plugins suchen, wie ich gerade schreibe. Dies ist also unser Element-Sketch-Plugin Klicken Sie auf Jetzt installieren. Unser Plugin wurde also installiert. Klicken Sie auf Aktivieren , um dies zu aktivieren. Okay, also unsere beiden Plugins sind hier. Jetzt gebe ich dir das Beispiel eines beliebten Plugins. Element ist also auch ein sehr beliebtes Plugin. Das ist also ein Drag-and-Drop-Seiten-Wilter , um ein benutzerdefiniertes Layout zu erstellen Klicken Sie nun auf Neues Plugin hinzufügen. Ich suche nach UssussuPlug In ist auch ein Es hilft, Ihre Website für Suchmaschinen zu optimieren. Ich zeige es dir nur. Ich installiere das nicht. Ich zeige es dir nur. Als nächstes ist unser Plugin WooCommerce. Das ist also unser WooCommerce-Plugin. Es fügt Ihrer Website E-Commerce-Funktionen hinzu. Als nächstes folgt unser Kontaktformular sieben. Das ist also unser Kontaktformular sieben. Ich installiere es und es ermöglicht uns, das Kontaktformular zu erstellen und zu verwalten. Klicken Sie jetzt einfach auf Aktivieren, um dies zu aktivieren. Wir haben alle unsere Plugins und Themes installiert. Mithilfe von Teams und dem Plugin können Sie Ihre WordPress-Website so anpassen, dass sie genau so aussieht und funktioniert, wie Sie möchten, ohne Code schreiben zu müssen Also werden wir uns in unserer nächsten Klasse treffen. 3. Elementor im Überblick: Zweite Schritte: Installieren Sie nur das Plugin , das für Ihre Website wichtig ist Wenn Sie mehr Plugins installieren , die für Ihre Website nicht wichtig sind, verringert sich die Geschwindigkeit Ihrer Website Stellen Sie also sicher , dass Sie die Plugins hochladen, die für Ihre Website wichtig sind. Jetzt gehen wir zum Seitenbereich. Ich klicke auf alle Seiten. Datenschutz- und Beispielseiten sind also standardmäßig aktiviert. Also klicke darauf. Von Webth Action wechsle ich in den Papierkorb und bewerbe mich. Okay, jetzt sind zwei Seiten später. Jetzt werden wir eine neue Seite hinzufügen. Um also ein neues P hinzuzufügen, können Sie von hier aus oder von hier aus klicken. Okay. Also jetzt, klicken Sie darauf. Ich gebe meiner Seite als Beispielseite. Klicken Sie nun auf Veröffentlichen, erneut auf Veröffentlichen. Klicken Sie nun auf diese drei Punkte und von hier aus können Sie sehen, wie der Bildschirmmodus aufgerufen wird Und wenn wir darauf klicken, wie Sie sehen können, ist diese linke Leiste hier. Klicken Sie jetzt mit Eleanor darauf, um unsere Seite zu bearbeiten. Unsere Seite wird also geladen. Es wird ein Popup angezeigt, also klicken Sie auf Abbrechen. Klicken Sie nun auf die Schaltfläche Abbrechen. Das ist also unser Elementor-Seitenersteller oder unser Elementd-Dashboard Das ist also unser Elementd-Canvas. Und auf der linken Seite sind das alles unsere Elementor-Widgets oder -Elemente Also manchmal sage ich Element-Widget oder manchmal sage ich einfach Element, also verwechseln Sie es nicht mit Elements Widget und Elements sind beide Namen Sie können hier also sehen, dass es viele Element-Widgets gibt , mit denen Sie Ihre Website erstellen können Jetzt werden wir diese Symbole verstehen. Das ist jetzt unser Plus-Icon. Wenn wir also einen Container hinzufügen möchten, können Sie darauf klicken, und es werden uns zwei Layouts angezeigt. Die erste ist Flexbox und die zweite ist Grid. So tolles Layout Wir werden das nicht verwenden , weil es nicht stabil ist. Also klicken Sie jetzt auf Flexbox. Und Sie können sehen, dass es viele Strukturen gibt Sie nach Ihren Wünschen verwenden können Wir werden in wenigen Minuten über diese Struktur sprechen. Also gehe ich zurück, also klicke einfach auf Abbrechen. Das ist also eine zweite Option. Wenn wir darauf klicken, können Sie von hier aus eine Vorlage hinzufügen. Im Blockbereich können Sie also sehen, dass es viele Vorlagen gibt , aber diese sind für das Element P bestimmt . Deshalb werden wir diese Vorlagen nicht verwenden. Gehen Sie jetzt auf Seiten und Sie können sehen, dass hier viele Seiten für Elementor Pro sind viele Seiten für Elementor Pro Nächste Option, meine Vorlage. Sie können Ihre Vorlage hier speichern. Wir haben jedoch keine Vorlage gespeichert, weshalb sie leer ist. Jetzt gehen wir zurück und klicken auf Abbrechen. Das ist also unsere Element Kit-Option, wenn ich darauf klicke. Wie Sie sehen können, gibt es hier viele Seiten. Das liegt nur daran, dass wir Element Kit Plugging installieren. Deshalb zeigen sie es uns. Klicken Sie nun auf Abbrechen. Jetzt klicke ich einfach auf Dieses Plus-Symbol. Und ich wähle Flexbox und von hier aus wähle ich die erste Struktur, also die Richtungsspalte Wie Sie sehen können, ist dies unser übergeordneter Container Jetzt können Sie diese drei Optionen sehen. Was ist mit diesen? Wenn ich auf dieses Plus-Symbol klicke. Wenn Sie also einen Container über diesem Container hinzufügen möchten, damit Sie ein Formular hinzufügen können, klicke ich auf dieses Plussymbol, Flexbox, und wähle die erste Struktur Wie Sie sehen können, gibt es zwei Strukturen. Erstens ist das und zweitens das. Also lösche ich das einfach. Wenn wir darauf klicken, wird der übergeordnete Container ausgewählt. Es sind drei Abschnitte geöffnet. An erster Stelle steht also das Layout, zweiter Stelle der Stil und an dritter Stelle der Fortschritt. Jetzt werde ich Ihnen diese drei Abschnitte erklären. Okay, also zuerst ist Container dran. Wie Sie sehen können, werden wir uns daher immer für Flexbox entscheiden und an zweiter Stelle steht die Inhaltsbreite Wir werden den Inhalt so beibehalten, wie er verpackt ist, denn wenn Sie sich für verpackte Container entscheiden, wird unsere Website nicht gestreckt Sie können also anhand des Live-Beispiels sehen, wenn ich die Ansicht vergrößert und verkleinere, dass unser Inhalt nicht gestreckt wird Als nächstes kommt unsere Breite. So können Sie die Breite Ihres Containers erhöhen oder verringern. Als nächstes kommt unsere Mindesthöhe. So können Sie die Mindesthöhe Ihres Containers erhöhen oder verringern. Ich behalte es einfach bei 500, du kannst es auf diese Weise um eins verringern und von hier aus um eins erhöhen. Jetzt gehe ich zur Stilabteilung. Also hier ist unser Hintergrund. Von hier aus können Sie Ihren Hintergrundtyp im Hintergrundtyp ändern . Ich klicke auf Classic. Von hier aus kannst du eine beliebige Farbe wählen, als ob ich sie schwarz anpinge. Von hier aus können Sie die Transparenz Ihrer Farbe erhöhen oder verringern. Hier können Sie Ihren Farbcode direkt eingeben, und Sie können in diesen Optionen auch wählen , in welchen Sie sich wohl fühlen, Sie können wählen. Wenn ich diese Farbe zurücksetzen möchte, klicken Sie einfach auf Löschen, so wie ich Farbe beim Klicken habe, ich wähle dieses Schwarz also möchte ich diese schwarze Farbe speichern. Also einfach auf das Plus-Symbol klicken, wie Sie hier sehen können, ist die globale Farbe. Also, was ist globale Farbe? Wenn Sie Ihre Website erstellen, also wenn Sie denken , dass diese Farbe meiner Website immer wieder verwendet wird, Sie möchten diese Farbe also nicht immer wieder auswählen. Sie können diese Farbe also speichern. Diese Farbe wird also in unserer globalen Farbe gespeichert und von hier aus können Sie Ihre Farbe umbenennen, können Sie Ihre Farbe umbenennen so wie ich es hier schreibe. Dunkles Schwarz. Sie können Ihrem Namen eine beliebige Farbe geben, also klicke ich auf Erstellen. Also hier kannst du direkt aus dieser Farbe wählen. Also als nächstes kommt unser Bild. Wenn Sie Ihrem Hintergrund ein Bild hinzufügen möchten. Also, wie kannst du das machen? Also zuerst setze ich diese Farbe zurück. Um sie zurückzusetzen, klicke auf Löschen Jetzt möchte ich ein Hintergrundbild hinzufügen. Also werde ich darauf klicken. Wie ihr sehen könnt, kommt gleich Wahl auf Bild, also werde ich darauf klicken. Ihr könnt also hier ein Bild auswählen, so wie ich dieses auswähle, klickt auf Upload. Jetzt kannst du mit Picon Slack auch damit spielen wie mit Image Isolation, ich werde es so voll belassen Von der Position aus kannst du es wie in der Mitte wählen. Wie Sie sehen können, ändert sich unser Bild von hier aus wie Mitte links Sie können diese Optionen wie oben rechts erkunden , es wird so aussehen. Also benutze ich es in der Mitte und links. Als nächstes kommt der Anhang. Wenn wir also auf dieses Sacro klicken, wenn jemand auf unsere Website geht, sodass unser Bild scrollt, können Sie das in einem Live-Beispiel sehen Wenn ich jetzt auf das gefixt klicke, also wie du sehen kannst, wenn ich auf meine Website klicke, unser Bild jetzt gepixelt Ich wiederhole es, wir werden in anderen Klassen darüber sprechen. Als nächstes kommt unsere Displaygröße. Bei der Displaygröße wählen wir also das Cover aus, wenn wir auf das Cover klicken. Unser Bild wird also bis zum vollen Behälter abgedeckt. Also werden wir es immer als Deckung behalten. Als nächstes kommt unser Hintergrund-Overlay. Wenn Sie auf die Hintergrundüberlagerung klicken, klicken Sie bei Auswahl auf GlassC, damit Sie ein anderes Bild von hier auswählen können , wie ich es hier Klicken Sie also von hier auf Stapel hochladen und wählen Sie Stapel aus. Ich wähle dieses Bild. Klicke auf Upload. Also klicken Sie jetzt auf Set. Also wird unser Overlay hinzugefügt. Also, das sind jetzt die Einstellungen unseres Overlays. Sie können diese Einstellung also auch so ändern als würde ich sie in der Mitte halten Wie Sie jetzt sehen können, können wir die Überlagerung deutlich sehen. Aus Anhaftung werde ich es behalten, was vor Wiederholung, ich werde es behalten, bis keine Wiederholung, vor Verdrängung werde ich es vertuschen. Okay? Von hier aus können Sie also die Deckkraft Ihres Overlays erhöhen oder verringern Den Abschnitt, den ich nicht erkläre, werden wir sehen, wenn wir unsere Website erstellen, also mach dir darüber keine Sorgen Jetzt lösche ich diese Überlagerungen, damit Sie sie besser verstehen können Um dieses Overlay zu löschen, können Sie hier klicken, da Sie sehen können, dass unser Overlay Also geh jetzt an Bord. Hier ist der Grenztyp. Wenn ich darauf klicke, sind dies, wie Sie sehen können, die Randtypen. Wenn ich mich für solide entscheide. Wie Sie sehen können, wird Wasser hinzugefügt. Daraus können Sie ein Randstück hinzufügen, als ob ich fünf wählen würde. Wie Sie sehen können, ist unsere Burenintensität erhöht. Wenn ich nun den Wert um etwa zehn erhöhe, so wie Sie sehen können, wird die Intensität stärker erhöht Wenn ich Tense eintippe, gelten diese Werte also die vier Seiten. Ich will das nicht. Wenn Sie den Wert nur von einer Seite ändern möchten, also was Sie dafür tun können, klicken Sie einfach hier. Wie Sie sehen können, kommen nun die Linkwerte zusammen. Wenn wir also die Verknüpfung aufheben, können Sie die Werte einer Seite ändern, als ob ich 30 schreibe Wie Sie von oben sehen können, wurde unsere Rahmenbreite erhöht, aber von der anderen Seite bleibt sie gleich Von hier aus kannst du deinen BoderCLF hier hinzufügen, du kannst schreiben. Jetzt verknüpfe ich diese Werte, okay? Jetzt behalte ich es bei Null. Okay. Als nächstes ist unser Burenradius dran Sie können Ihrem Bild einen Wasserradius geben, als ob ich es bei 40 belassen Wie Sie sehen können, wird unser Grenzradius hinzugefügt. Als nächstes kommt unser Formteiler. Also hier ist oben ausgewählt. Und vom Typ, wenn du hier wie alles andere auswählst, wähle ich Cloud. Wie Sie auf der Oberseite sehen können, sind hier Wolken zu sehen. Wie Sie von hier aus anhand der Farbe sehen können, können Sie die Farbe so wählen, wie Sie sehen können. Die roten verfluchten Wolken von hier aus kannst du die Höhe so erhöhen Dreh um, wenn du auf klickst. Also, wie du siehst , drehen wir um. Als nächstes kannst du es auch so invertieren , wie du siehst, diese invertieren Okay, du kannst also von hier wählen. Als Nächstes bringen wir diese Option in den Vordergrund. Unser Bild wird zurückgehen und unser Design wie dieses wird auf der Vorderseite erscheinen. Als nächstes folgt unser unterer Abschnitt. Von hier aus können Sie also auch so wählen. Ich gehe im Zick-Zack. Die Änderungen werden also auf der Unterseite vorgenommen. Wenn Sie zum Beispiel die Breite erhöhen, wie Sie jetzt sehen können, werden wir eine andere Farbe wählen. Wenn du die Höhe erhöhst, wie du siehst, werden sie jetzt gut angezeigt, und dasselbe kannst du auch nach vorne bringen. Jetzt bewegen wir uns vorwärts. Ich behalte es bei n. Lassen Sie uns jetzt weitermachen. Also hier seht ihr das Layout und es gibt Randabstände. Also, was sind das? Wenn ich in Margin den Wert 40 eingebe, die Position unseres Continuers ändert sich die Position unseres Continuers aufgrund von Margin Wenn ich von allen Seiten Null mache, also wie Sie sehen können, befindet sich unser Container wieder an seiner ursprünglichen Position Was ist also Marge? Der Rand definiert den äußeren Raum eines Elements. Wenn wir das jetzt nicht gut verstehen, werde ich dir eine ausführliche Erklärung geben. Jetzt gebe ich nur einen Überblick. Wenn Sie also nicht wissen, was Margen und Verblassen sind , werden wir das in weiteren Kursen genauer verstehen Sehen Sie sich jetzt einfach den Unterschied zwischen Margin und Fading an. Also beim Padding, wenn ich den Wert 50 gebe. Wie Sie sehen können, hat unser Container seine Position nicht geändert, aber Sie sehen diese gepunktete Linie Also, was sind Dinge? Sie werden das besser verstehen , wenn wir damit die Überschrift streichen Jetzt konzentrieren Sie sich nur noch darauf , dass der Container seine Position nicht geändert hat, aber diese gepunktete Linie hat seine Position geändert Was die nächste Option angeht, werden wir in weiteren Kursen mehr über diese Optionen erfahren 4. Elementor im Überblick: Dritte Schritte: Hallo, Leute. Was ist los? In der heutigen Klasse möchte ich jetzt einen Container mitnehmen. Also notiere ich dieses Plus-Symbol in Flexbox, ich wähle unseren ersten Container Okay. Das ist also unser Container, und in diesen Container ziehe ich ein Überschriften-Widget Um das Widget zu löschen, können Sie auf dieses Plussymbol oder auf dieses Plussymbol klicken Also klicke ich darauf. Also ziehe ich jetzt das Überschriften-Widget. Wie Sie sehen können, ist unser Überschriften-Widget Drop, Sie können Ihren Titel von hier aus ändern oder Sie können Ihren Titel von hier auf Okay ändern, so wie ich hier schreibe. So wie Sie dazu neigen, hier ist unser Titel, ändern Sie ihn sofort. Hier ist ein Link. Sie können einen Link zu allem wie Ihrer Website erstellen. Jetzt gebe ich dir ein Beispiel. Ich habe den Link hier eingefügt. Jetzt veröffentliche ich das, klicke auf Veröffentlichen. Also hier ist ein Augapfelsymbol. Also klicke ich darauf. Hier können Sie unsere Rubrik Neuigkeiten sehen. Wenn ich also auf diesen Kopf klicke, werden wir zu dieser Website weitergeleitet. Also gehe ich zurück. Jetzt möchte ich mit diesem Text stylen. Deshalb werde ich mich für den Style-Tag entscheiden. Ab hier in der Überschrift gibt es also eine Ausrichtung. Wie Sie möchten, dass Ihre Überschrift so bleibt , wie ich sie in der Mitte halte, wie Sie sehen können, befindet sich unsere Überschrift jetzt in der Mitte. Als Nächstes kommt unsere Textfarbe. Von hier aus können Sie also die Textfarbe aus Ihrer Überschrift wie folgt auswählen . Als nächstes kommt unsere Typografie. Hier ist Familie. Hier können Sie also Ihre Textschrift wählen. Wie Sie sehen können, gibt es viele Schriftarten und alle sind sehr gut. Sie können diese Schriften erkunden als würde ich nach Papageientauchern suchen. Das ist auch eine sehr gute Schrift. Auf diese Weise können Sie die Größe wählen, wie Sie sehen können. Von hier aus können Sie das Gewicht wählen Wenn Sie es beispielsweise bei 100 behalten, können Sie hier sehen, wie das Gewicht abgenommen hat. Okay, wenn Sie hier also aus 500 wählen, können Sie die Änderung sehen. Also als nächstes kommt unsere Transformation. Also hier kannst du wählen, ob ich hier Großbuchstaben wähle, also wie du sehen kannst, sind alle Buchstaben in Großbuchstaben Wenn Sie also Kleinbuchstaben wählen, können Sie den Unterschied sehen Als nächstes kommt unsere Hauptstadt. Als nächstes kommt unser Stil. den Stil angeht, ist unser Text kursiv, wenn Sie es kursiv machen, wie Sie sehen können unser Text kursiv, sodass Sie alles wählen können. Als nächstes kommt unsere Langhöhe. Also dazu, ich werde es dir später erklären. Also behalte ich es einfach als Standard. Das wirst du jetzt nicht verstehen , okay? Als Nächstes folgt unser Buchstabenabstand. Wenn ich diesen Wert erhöhe, wie Sie sehen können, wird, wie Sie sehen können, der Abstand zwischen den einzelnen Buchstaben vergrößert. Okay. Also von hier aus kannst du es verringern. Also behalte ich es so. Wenn Sie von hier aus den Wortabstand vergrößern, so dass Sie zwischen Zehner und Vier sehen können, und wenn Sie zuschauen, wird der Abstand vergrößert. Sie können ihn entsprechend anpassen. Als nächstes kommt unser Textstrich. Dann klicke ich auf dieses Stiftsymbol Von hier aus können Sie den Textstrich vergrößern. Hier kannst du die Strichfarbe wie folgt wählen. Also gehe ich zurück, um alles zurückzusetzen, du musst hier klicken, um wieder auf Standard zu setzen. Als nächstes kommt unser Textschatten. Ich klicke auf diesen Stift. Von hier aus können Sie die Farbe wählen. Von hier aus können Sie den Wert der Unschärfe erhöhen, da Sie sehen können, wie verschwommen diese rote Farbe ist Jetzt klicke ich auf dieses Stiftsymbol. Jetzt werde ich unser Bild-Widget löschen. Also, wenn ich hier ein Bild fallen lasse, damit Sie sehen können, hier ist unser ausgewähltes Bild. Aus diesem panischen Klick auf dieses Bild kannst du dein Bild auswählen, so wie ich dieses auswähle Hier ist unsere Bildauflösung. Gehen wir jetzt zum Style-Tab. Daraus ergibt sich die Breite. Sie können die Größe Ihres Bildes auf diese Weise verringern oder erhöhen . Daraus können Sie die Ausrichtung wählen. Ich behalte es als Mittelpunkt. Sie können die maximale Breite nach Ihren Wünschen wählen. Sie können die Höhe und die Objektbreite wählen, ich lasse es so, wie es ist. Als Nächstes gibt es zwei Optionen: normal und höher. Sie können unsere Vergangenheit vergrößern oder verkleinern . Als Nächstes ist unser CSS-Filter dran. Wenn Sie von hier aus auf das Stiftsymbol klicken, können Sie die Unschärfe erhöhen, da Sie sehen können, wie unser Bild unscharf ist Sie können hier also einen beliebigen Wert wählen, so als ob ich ihn als Standard beibehalten Sie können die Helligkeit auf diese Weise erhöhen oder verringern. Den Kontrast kannst du ändern. Sie können die Änderungen also sehr gut sehen. Jetzt setze ich all diese Werte zurück. Also klicke ich darauf. Von hier aus können Sie den Randtyp wählen. Wenn Sie von hier aus die Option „ Durchgehend “ wählen, können Sie die Rahmenbreite wählen , wenn ich sie bei fünf belasse Wie Sie sehen können, wurde die Breite um fünf erhöht Sie können Brercolor so wählen. Jetzt kannst du von hier aus die Randfarbe deutlich sehen, du kannst den Randradius wählen, wenn ich ihn bei 20 belasse, wie du siehst, sind die Eckecken von vier Seiten abgerundet Als nächstes kommt unser Boxschatten. Wenn ich auf das Schablonensymbol klicke, kannst du den Schatten horizontal und kalkulieren, du kannst die Blindheit erhöhen oder verringern Du kannst es wie separat wählen. Als nächstes kommen unsere fortgeschrittenen Zehn. Über Advanced T werden wir in unseren weiteren Kursen darüber sprechen. Jetzt habt ihr also ein besseres Verständnis von Überschrift und unserem Bild 5. CSS-Einheiten verstehen: CSS-Einheit. Das sind also die Einheiten der HTML- und CSS-Codierungssprachen. Wenn wir mit Alementor eine Website auf WordPress erstellen, entwickeln wir eigentlich eine Es ist nur so, dass wir nicht programmieren, aber im Backend funktioniert das Codieren und Wordpress funktioniert hier für uns Das heißt aber nicht , dass wir jetzt HTML-CSS lernen müssen , um die CSS-Einheiten zu verstehen. Sie müssen zuerst die absolute und die alternative Einheit Also absolute Einheiten. Absolute Einheiten sind die Einheiten, die ihre Größe beibehalten oder festgelegt haben. Schauen wir uns also ein Beispiel an. Wenn ich nun die absolute Einheit verwende, um einer Überschrift eine Größe zuzuweisen, wird das auf unserem Desktop und Mobilgerät festgelegt. Zum Beispiel, jetzt nehme ich hier einen Container, klicke auf das Plus-Symbol Das ist unser Überschriften-Widget. Ich schaffe es zu Schwarz. Ich behalte die Größe auf 20, von der Zeile bis zum Satz. Wenn ich auf das Tablet gehe, kannst du sehen, dass es sich nicht an seine Größe angepasst hat. Und auf dem Handy können Sie sehen, dass es auf allen Geräten in seiner Größe beibehalten wurde Schauen wir uns nun die relative Einheit an. Relative Einheiten sind Einheiten , die sich automatisch an ihre Größe anpassen , abhängig von verschiedenen Faktoren wie der Bildschirmgröße. Lassen Sie uns nun die Pixeleinheit verstehen . Die Pixeleinheit ist also eine absolute Einheit. Also, um das zu verstehen, nehme ich einen Container. Zuallererst gebe ich dem die Mindesthöhe. Okay. Klicken Sie nun auf das Plus-Symbol und ziehen Sie eine Überschrift Und lass mich ihm eine schwarze Farbe geben. Okay. Also mir geht es gut. Also du kannst hier sehen, dass das Pixel schon ausgewählt ist und ich gebe die Größe hier 20. Wenn ich jetzt auf meinem Tablet-Gerät nachschaue, können Sie sehen, dass diese Größe festgelegt ist. Es hat sich nicht an seine Größe geändert. Wenn Sie also Pixel in einem beliebigen Widget verwenden, wird die Größe auf allen Geräten festgelegt. Bevor Sie relative Einheiten verstehen, müssen Sie zunächst die Beziehungen zwischen Eltern und Kindern verstehen. Das ist also unser Hauptcontainer. Lass mich ihm ein Aquarell geben. Okay. Also gebe ich diesem schwarzen Aquarell Sie können sehen, dass ich jetzt die Höhe erhöhe, indem ich auf das Plus-Symbol klicke, und ich ziehe einen Container hinein Lass es mich auch dem Aquarell widmen. Hey, Leute, seht mal, das ist unser übergeordneter Container, okay? Und das ist unser Kindercontainer. Jetzt Peco plus Symbol, ich ziehe ein Überschriften-Widget in diesen untergeordneten Container Ich erhöhe auch die Mindesthöhe. Okay, so. Wie ich dir gesagt habe, das ist unser übergeordneter Container. Das ist unser Kindercontainer, okay? Und das ist unser Überschriftenelement. Für dieses Überschriftenelement ist dies der übergeordnete Container. Okay. Und dafür ist dies der übergeordnete Container. Verstehst du , was ich sagen will? Das war eine Eltern-Kind-Beziehung. Relative Einheiten passen sich auf der Grundlage des übergeordneten Containers an seine Größe an. Okay, jetzt werden wir etwas über relative Einheiten verstehen. Nur Pixel sind eine absolute Einheit. Andere Einheiten sind relative Einheiten. Unsere erste relative Einheit ist also die Prozenteinheit. Lassen Sie uns das jetzt von der Inhaltsbreite bis zur vollen Breite verstehen. Hier ist der Prozentsatz ausgewählt, okay? Und ich werde hier Pixel wählen und 1.000 Pixel Breite angeben. Zu meinem übergeordneten Container oder zum Hauptbereich. Okay? Und ich gebe hier eine Mindesthöhe an. Geh unter Sita. Lass mich ihm eine schwarze Farbe geben. Okay. Klicken Sie nun auf das C-Plus-Symbol. Ich ziehe einen untergeordneten Container. Inhalt auf volle Breite. Lassen Sie mich ihm auch eine Hintergrundfarbe geben. Nun, das ist unser übergeordneter Container. Und das ist der untergeordnete Container. Zum besseren Verständnis habe ich meinen übergeordneten Container ausgewählt. Ich stelle begründeten Inhalt in die Mitte. Okay. Jetzt geh zurück. Ich habe meinen Kindercontainer ausgewählt. Sie können hier sehen, dass der Prozentsatz ausgewählt ist und ich die Breite auf 50% setze. Okay, Sie können also sehen, dass der untergeordnete Container den 50% -Bereich unseres übergeordneten Containers umfasste. untergeordnete Container behält 50% der Größe des übergeordneten Containers bei. Wenn ich die Größe des übergeordneten Containers vergrößere oder verringere. Sie können hier zum Beispiel sehen, dass die Breite des übergeordneten Containers 1.000 Pizza beträgt, oder? Wenn ich es hier schaffe, 500, damit Sie sehen können, hat unser untergeordneter Behälter immer noch die 50% der Fläche des übergeordneten Containers enthalten . Wenn ich hier 200 gebe, damit Sie sehen können, deckt das immer noch die 50% -Fläche unseres untergeordneten Containers ab. Ich hoffe, du verstehst es jetzt, also geh zurück. Jetzt sind die nächsten CSS-Einheiten VW und VH. Zuallererst, was bedeutet dieser VW und VH? VW bedeutet Viewport-Breite und VH bedeutet Lassen Sie uns das jetzt verstehen. Dadurch wird auch die Größe an das Element angepasst, es gibt jedoch kein übergeordnetes Element Wie in Prozent, passt es sich seiner Größe entsprechend dem übergeordneten Objekt an, aber die Breite und Höhe des Darstellungsfensters passen sich nicht an die Größe des übergeordneten Fensters an, also schauen wir mal, auf welcher Grundlage es sich an seiner Größe ändert Zuerst wird die Breite von dieser linken Seite zur rechten Dies ist unsere Einfüllbreite und von oben bis zu dieser Flasche. Das ist unsere Ablagehöhe und das Speichertablett von der linken Seite zur rechten Seite, Breite und von oben nach unten, wir geben die Höhe an. Gleiche gilt für Mobilgeräte, von links nach rechts, Topfbreite, von oben nach unten, Höhe des Viewports Okay. Lassen Sie uns das nun anhand eines Beispiels verstehen . Ich habe eine Breite in VW angegeben, Vpot-Breite. Okay, ich habe den Wind Hundert gegeben, mache Style Jetzt minimiere den Krieg. Sie können also sehen, dass ich die Breite hundert Vpu-UID gegeben habe, und deshalb deckt sie die gesamte Breite unseres gesamten Sie können hier auf dem Tablet sehen, dass es die gesamte Breite abdeckt Und das Gleiche auf dem Handy können Sie hier sehen. Sie sehen also, dass die Vpot-Breite die gesamte Breite unseres Bildschirms abdeckt Jetzt habe ich meinen Disc-Container ausgewählt. Von hier aus wähle ich die Mindesthöhe für die Höhe des Darstellungsfensters und stelle sie auf 50% Ich habe die Mindesthöhe von 50 für meinen übergeordneten Container angegeben. Wenn Sie das minimieren, können Sie sehen, dass es die Hälfte unseres gesamten Bildschirms abdeckt. Ganz gleich, wie hoch das Sakrene ist, es deckt immer die 50% unserer Größe ab Sie können es auf dem Handy sehen, es deckt den Bereich von 50% Ich habe meinem übergeordneten Container eine Hintergrundfarbe gegeben. Oh, ich brauche das nicht, ich lösche diesen Container. Okay. Also habe ich jetzt einfach einen untergeordneten Container in meinen übergeordneten Container genommen . Jetzt wähle ich diesen untergeordneten Container aus und gehe unter Siteb. Ich gebe ihm einen festen Rand. Jetzt ziehe ich ein Bild in meinen untergeordneten Container. Okay? Lass mich wählen. Ich wähle zum Beispiel dieses eine Bild, okay? Ab hier ist also eine Breite, und ich behalte sie bei Benutzerdefiniert, und ich wähle VOT-Breite und gebe ihr 100 Okay. Auf der Registerkarte Stil wähle ich VpotWidth und behalte den Wert auf 100 und die maximale Breite , wobei ich auch die Vpot-Breite beibehalte Und wenn ich den Wert auf 100% belasse, können Sie also sehen, dass dieses Bild den gesamten Bereich dieses Geheimnisses abdeckt Warum? Weil wir hier die Breite des Viewports angegeben haben Als wir ein Element oder ein Widget innerhalb eines Containers hinzugefügt haben , das diesen Container nicht verlässt, oder? Aber in diesem Fall passiert es. Warum? Weil wir hier den Viewport Wid verwenden Okay, jetzt hast du sehr gut verstanden, dass diese, wenn du Breite und Höhe eingibst sich nicht um ihr übergeordnetes Element kümmern Wie in diesem Fall das übergeordnete Element für ist das übergeordnete Element für dieses Bild dieser weiße Container, richtig Und diesem Bild war das egal, okay? Jetzt hoffe ich , dass ihr versteht, was ich euch sagen will , jetzt sind wir neben den Einheiten RAM und M. Okay. Im Grunde genommen werden diese RAM- und M-Einheiten für unsere Schriften verwendet. Lassen Sie uns zunächst etwas über M verstehen . Also nehme ich hier einen Container. Okay? Und lass mich ihm eine Hintergrundfarbe geben. Lass mich Schwarz wählen. Ich habe hier eine Überschrift hinzugefügt. Ich habe diese Überschrift hier hinzugefügt. Was bedeutet die Einheit N multipliziert mit der Schriftgröße des übergeordneten Elements Was bedeutet das? Also habe ich meine Überschrift ausgewählt und von hier aus, das ist die Größe der Überschrift und ich wähle sie aus, und ich gebe hier zum Beispiel eine, diese eine EM, die wir auf die Schriftgröße des übergeordneten Elements multiplizieren . Und das ist unser Elternteil, oder? Und es wird sich zu diesem einen EM vervielfachen. Okay, wenn ich hier zum Beispiel 3:00 Uhr gebe , jetzt denkst du , dass das der Container ist, wie er eine Schriftgröße haben wird. wie er eine Schriftgröße haben wird Also lasst mich euch zeigen, wo es ist? Gehen Sie von hier aus zu den Seiteneinstellungen und öffnen Sie von hier aus die Typografie Und wenn Sie die Typografie öffnen, können Sie hier Größen von 16 Pixeln sehen Okay? Also standardmäßig die Größe 16 Pixel. Also wenn ich hier 20 mache, kannst du sehen, dass die Überschrift vergrößert ist. Die Größe der Überschrift wurde vergrößert, weil ich der Überschrift die Größe drei Em richtig gegeben habe. Hier ist drei zu 20, das entspricht 60 Pixeln, oder? Und wenn ich hier zum Beispiel fünf Pixel mache, drei multipliziert mit fünf gleich 15 Pixeln Also bleibe ich jetzt bei dieser Größe von 16 Pixeln, weshalb ich standardmäßig vorgegangen wollte dir nur sagen, dass ich diesen Wert von hier aus nie geändert Gehen wir also zurück nach unten und klicken Sie jetzt auf Safe Genius. Okay. Also gehe ich zurück. Okay, also zum Beispiel, oh, ich gebe hier zwei RAM. Wie hier, wenn ich der Größe unseres Textes zwei RAM gebe, wird im Backend auch ein HTML-Code erstellt. Die Größe des TTML-Stammelements im HTML-Dokument wird mit der Pixelgröße multipliziert Dieser RAM wird verwendet, wenn jemand die Schriftgröße in seinem Browser geändert hat die Schriftgröße in , z. B. bei sehr großen oder anderen Optionen Dann wird dieser Wert automatisch Okay. Standardmäßig ist in allen Browsern die Größe mittel. Hier ist auch die Alternative dazu. Wir können einfach hinein - und herauszoomen, oder? Also benutze ich das meistens nicht. Wenn dafür eine spezielle Nachfrage besteht, können wir es verwenden. Okay, das war also unsere CSS-Einheit. Ich hoffe, du hast das sehr gut verstanden . Okay. Also, welche Geräte verwende ich und warum? Für Text verwende ich also meistens die Pixeleinheit. 6. Verwenden von Flexbox-Containern: Leute. In diesem Video werden wir also etwas über den Flexbox-Container erfahren Es gibt viele Schüler, die sich nicht sicher sind, wie man den Container benutzt und wie man mit Hilfe von Containern ein schönes Design kreiert mit Hilfe von Containern ein schönes Design Fangen wir also an. Also zuallererst, wir Leute, das ist unsere elementare Leinwand Mach dir keine Sorgen, wenn du nichts weißt. Ich werde dir im weiteren Verlauf alles erklären. In diesem Video werden wir jetzt nur etwas über Flexbox-Container lernen, was ein sehr wichtiges Thema ist, okay? Zuallererst nehme ich hier einen Container. Okay. Das ist also unser übergeordneter Container und klicken Sie auf das Plus-Symbol. Ich klicke auf dieses Widget und du kannst sehen, dass es hierher gezogen wird. Klicken Sie auf Dieses Plus-Symbol. Ich möchte auch ein Bild-Widget hierher ziehen. Wenn ich also auf dieses Bild ziehe, können Sie sehen, dass wir dieses Widget nach oben oder nach unten ziehen können. Also habe ich es hierher gezogen. Also wähle ich dieses Bild aus, also wähle zum Beispiel deinen übergeordneten Container aus, und von hier aus kannst du unter Richtung diesen Abwärtspfeil sehen Das bedeutet, egal welches Widget ich gerade in diesen Abschnitt ziehe, jedes Element wird standardmäßig immer unter dem anderen stehen Wenn ich diesen Pfeil wähle, können Sie jetzt sehen, dass unser Inhalt horizontal ausgerichtet ist. Klicken Sie nun auf dieses Plus-Symbol. Zum Beispiel möchte ich diese Schaltfläche nach unten ziehen . Sie können sehen, dass die rosa Linie nur auf der linken und rechten Seite erscheint. Aber sie kann jetzt nicht oben auf der Unterseite erscheinen. Wenn ich das hier verlasse, können Sie sehen, dass sich unser Button jetzt auf der rechten Seite befindet. Wählen Sie nun Ihren Pedant-Container aus, und von hier aus, wenn ich Spalte auswähle, können Sie sehen, dass der gesamte Inhalt spaltenweise ausgerichtet ist Jetzt ist die Richtungszeile ausgewählt, und was bedeutet das Sie können sehen, dass die kommende Reihe umgekehrt ist. Und wenn ich darauf klicke, befindet sich unser Button jetzt an der ersten Position und bewegt sich an der letzten Position Aber wenn ich auf diese umgekehrte Spalte klicke, unsere Schaltflächenposition oben geht unsere Schaltflächenposition oben und diese Überschrift nach unten Ich hoffe, Sie verstehen diese Anweisungen sehr gut. Jetzt werden wir uns diesen Optionen vertraut machen, und zunächst erhöhe ich die Mindesthöhe, um das Batn-Verständnis zu verbessern um das Batn-Verständnis zu Lassen Sie uns zunächst etwas über die Align-Elemente erfahren. Wenn ich Start wähle, können Sie sehen, dass sich alle Widgets an dieser Startposition befinden. Wenn Sie Ihren Inhalt in der Mitte ausrichten möchten, müssen Sie nur hier auf Senter klicken Sie können sehen, jetzt befindet sich unser Inhalt in dieser Mittelposition Ich hoffe also, dass du das Thema Einzelposten sehr gut verstehst. Und jetzt wollen wir uns darum kümmern. Hier ist der begründete Inhalt. Wenn ich Mitte auswähle, können Sie anhand von Zeileneinträgen erkennen, dass ich zentriert und bei ausgerichtetem Inhalt Mittelpunkte auswähle Deshalb ist unser Inhalt horizontal und vertikal zentriert. Wenn Sie jetzt „Start“ wählen, wird unser Inhalt jetzt vertikal an dieser Startposition angezeigt. Auf diese Weise können Sie wählen und sehen , wie Inhalt am Ende befindet , wenn Sie den Abstand zwischen unseren Widgets wählen Hier ist ein Leerzeichen zwischen unseren Widgets und wenn Sie den Bereich um die Widgets herum wählen, also wird hier Platz um die Widgets herum hinzugefügt. Auf diese Weise wird, wenn Sie den Abstand gleichmäßig verteilen, um Ihre Widgets herum die gleiche Menge an Abstand hinzugefügt. Okay. Ich hoffe, du verstehst das. Also, wenn ich jetzt hier die Reihe wähle, okay? Jetzt ist unser Inhalt horizontal an der Startposition, jetzt ist er horizontal zentriert, und den Abstand dazwischen können Sie jetzt sehen. Jetzt wird der Abstand zwischen dem Widget hinzugefügt. Und wenn Sie Leerzeichen auswählen, wird das Leerzeichen auch am Ende des Widgets hinzugefügt. Und wenn Sie einen gleichmäßigen Abstand zwischen den Widgets wählen , wird der gleiche Abstand hinzugefügt. Auf diese Weise befindet sich unser Inhalt jetzt horizontal und vertikal in der Mitte, wenn Sie Zeilenelemente auswählen befindet sich unser Inhalt jetzt horizontal , die zentriert werden sollen. Auf diese Weise ist es jetzt am Ende. Okay. Ich hoffe, Sie verstehen diese Optionen jetzt sehr gut . Okay, Leute, jetzt schaut mal, wann wir einen Container nehmen wollen, ihr könnt sehen, dass ihr von hier aus einen Container hinzufügen könnt, okay? Und auf der linken Seite könnt ihr sehen, dass hier auch ein Container ist. Sie kennen die Verwendung dieses Containers, aber was nützt dieser Container? Jetzt werden wir das in ein paar Minuten verstehen. Also zuerst nehme ich hier einen Container mit, okay? Und von hier aus entscheide ich mich dafür, zu rudern. Erhöhen Sie die Mindesthöhe auf diese Weise. Okay. Also ziehe ich ein Überschriften-Widget hierher. Nun, was ich will, ich möchte ein Bild auf der rechten Seite der Überschrift Ich möchte eine Schaltfläche am unteren Rand der Überschrift. Also ziehe ich mein Bild-Widget. Sie können also sehen, dass das Bild auf der rechten Seite einfach hinzugefügt wird. Okay. Und jetzt möchte ich meinen Button am Ende dieser Überschrift ziehen. Wie sehr ich es versuche, aber es passiert nicht. Diese Schaltfläche wird hierher gezogen, nicht an den unteren Rand dieses Überschriften-Widgets Hier kommt also die Verwendung dieses Containers. Mit diesem Container-Widget können wir alles machen. Jetzt löschen wir das Okay. Lassen Sie uns jetzt diesen Container verwenden. Und zuallererst lösche ich diese ganze Sache. Klicken Sie jetzt auf das Plus-Symbol und von hier aus wähle ich diese Struktur aus. Okay. Jetzt wähle ich diesen ersten untergeordneten Container auf der linken Seite aus und klicke auf das Plus-Symbol. Ich ziehe mein Überschriften-Widget hierher. Klicken Sie jetzt also auf Dieses Plus-Symbol. Ich ziehe diese Schaltfläche und Sie können sehen, dass diese Schaltfläche in dieses Überschriften-Widget gezogen wird Okay? Wählen Sie Ihren übergeordneten Container aus. Sie können hier sehen, dass die Richtungszeile ausgewählt ist. Okay? Und das ist der Grund, warum diese beiden Container reihenweise angeordnet sind. Okay? Und das ist unser erster untergeordneter Container , dessen Richtung Spalte ist. Wählen Sie nun zu diesem Container und hier wird die Richtung Spalte ausgewählt Deshalb wird diese Schaltfläche unter diese Überschrift gezogen Wenn ich hier die Richtung ausführe, können Sie sehen, dass diese Schaltfläche jetzt auf die rechte Seite gezogen wird Und wenn ich hier die Spalte mache, kannst du sehen, dass dieser Button jetzt hierher gezogen wird Lassen Sie uns jetzt das Bild hierher ziehen. Klicken Sie auf Dieses Plus-Symbol. Und wenn ich mein Widget ziehe, sodass Sie sehen können, wird ein Bild auf die rechte Seite der Überschrift gezogen, und diese Schaltfläche wird an den unteren Rand dieser Überschrift gezogen Und wie du weißt, will ich das und ich verstehe das 7. Globale Einstellungen erkunden: Also nehme ich hier einen Container. Jetzt möchte ich meine Widget-Überschrift ziehen. Okay. Ich ziehe meine Überschrift hierher. Also warum kommt diese Farbe immer und so, wenn ich meinen Editor ziehe. Man sieht also immer, dass diese Lichtfarbe kommt. Warum? Und auf diese Weise, wenn ich meine Taste ziehe, sodass du diesen grünen Hintergrund sehen kannst, warum es immer Auto ist, weil diese Farben global festgelegt sind und wir diese Farben ändern können. Schauen wir uns also an, wie wir das ändern können? Also um das zu ändern. Also hier sind die Einstellungen auf der Symbolseite. Ich klicke darauf. Hier ist eine globale Farboption. Also klicke ich darauf. Hier ist eine globale Anzeige, in der es heißt, ich deaktiviere das, damit wir die direkten Änderungen sehen werden Sie können diese Primärfarbe sehen, und das ist der Grund, warum, wenn wir unsere Überschrift ziehen, sie immer von dieser Farbe abweicht, oder? Auf diese Weise ist hier die Farbe auf sekundär eingestellt und Sie können diesen Texteditor sehen Wenn wir unseren Texteditor damit ziehen, ist diese Farbe für diese Aufstiegsfarbe für die Schaltfläche festgelegt, und das ist der Grund, warum dies die grüne Hintergrundfarbe ist. Sie können diese Farben ändern, als ob ich hier Schwarz machen würde. Okay, und ich ändere diesen Text zum Beispiel in Rot. Sie können also sehen, dass sich die Farben jetzt ändern. Auf diese Weise mache ich zu schwarzer Farbe. Hier ist eine benutzerdefinierte Farbe. Sie können von hier aus Farben hinzufügen , wenn Sie eine andere Farbe möchten Sie sehen, dass diese Farbe auf meiner Website immer wieder verwendet wird. Sie können es also von hier aus einstellen und von hier aus einfach löschen. Okay? Du kannst es einfach löschen. Also mache ich Cencil. Jetzt lege ich diese Farben global fest. Und jetzt werde ich mein Widget ziehen, sodass das Widget diese Farben hat. Nachdem Sie die Änderungen vorgenommen haben, klicken Sie auf Änderungen speichern. Sehen Sie jetzt, was passiert ist. Ich lösche das zuerst. Jetzt nehme ich einen neuen Behälter. Jetzt schau, was passiert ist. Ich ziehe mein Überschriften-Widget, sodass Sie jetzt sehen können, dass unsere Überschrift schwarz ist , weil wir diese Farbe global eingestellt haben Das heißt nicht, dass Sie diese Farbe jetzt nicht ändern können, Sie können diese Farbe ändern Zum Beispiel kannst du es von hier aus ändern, okay? Farbe, die du auf diese Weise willst. Ich hoffe, du verstehst , wie man die globalen Farben festlegt. Diese sind sehr hilfreich, weil wir den Code nicht immer wieder neu schreiben müssen, sodass er über die Arbeit gegangen ist. Jetzt werden wir uns mit globalen Schriftarten befassen. Und um zu verstehen, dass ich einen Container nehme und eine Überschrift hierher ziehe. Sie können sehen, dass standardmäßig Kante zwei eingestellt ist, also mache ich zwei, Kante eins, klicken Sie mit der rechten Maustaste und duplizieren Hier mache ich Kante zwei. Jetzt gehe ich in die Einstellungen. Von hier aus können Sie globale Schriftarten sehen und von hier aus können Sie die Schriftarten festlegen. Zum Beispiel können Sie hier die Familie für die Primärversion festlegen. Jetzt habe ich die Familie hinzugefügt, sodass Sie sehen können, dass alle Schriftarten jetzt in Pop-Ins enthalten sind. Auf diese Weise können Sie für jedes Land festlegen, wie zum Beispiel AlbaticaF-Text, Sie können das Zeichen absteigend einstellen. Ich stelle diese Schriftarten Nachdem Sie die Änderungen vorgenommen haben, klicken Sie auf Änderungen. Also jetzt schau, was passiert ist. Ich wähle diese Überschrift unter Starter aus. Jetzt müssen wir uns nicht mehr die Familie von hier aus aussuchen. Was wir tun können, können Sie einfach hier klicken. Wenn Sie auf Sekundär klicken. Jetzt können Sie sehen, dass dies unsere Helvetica-Schrift ist. Auf diese Weise können Sie also, wenn Sie Text auswählen, diese Now-Sinus-Schrift sehen. Hier ist nun eine Typografie. In der Typografie können Sie die Größe für jeden Kopf festlegen. In H one können Sie zum Beispiel sehen, dass Sie die Größe von hier aus bei 70 behalten können Und für H zwei mache ich 60. Auf diese Weise können Sie für alles sorgen . Wir können nicht für die Familie sorgen. Es wird nur die Größe für uns festlegen, nicht die anderen Dinge, okay. Also klicken Sie jetzt auf S ändert, gehen Sie zurück hierher. Und zuallererst lösche ich das. Jetzt sieh hier. Wenn ich meine Überschrift ziehe, ist es jetzt H zwei. Ihre Größe entspricht der, die wir in den globalen Einstellungen festgelegt haben. Gehen wir jetzt weiter. Ziehen Sie das Y-Bild, damit Sie die Änderungen sehen können , die wir in den Seiteneinstellungen vorgenommen haben. Auf diese Weise können Sie auch die globalen Änderungen für das Bild festlegen . Okay, das war's für dieses Video. Die anderen Einstellungen sind nicht wirklich wichtig, also mach dir darüber keine Gedanken. Wir sehen uns im nächsten. 8. Erstellen eines Wasser-Text-Effekts: In diesem Video machen wir einen coolen Wasser-Texteffekt. Die Wörter werden aussehen, als wären sie aus Wasser gemacht, was super cool ist. Lassen Sie uns also anfangen, diesen coolen Effekt zu erzielen. Ab sofort werden wir etwas über wunderschöne Animationen lernen und Sie können diese Animationen anwenden wenn Sie ein Elementor-Proverson haben Fangen wir also zunächst an, wir werden auf diese Seite „Neue hinzufügen“ klicken Ich gebe einer Seite den Namen Wasser-Texteffekt. Klicken wir also auf Veröffentlichen. Jetzt klicke ich mit Elementor auf diese Bearbeitung. Jetzt befinden wir uns in unserem elementaren Seitenersteller. Also lass uns jetzt anfangen. Zuallererst nehmen wir unseren Container. Von links gebe ich es N VH und ich behalte die Buport-Höhe bei 100 Bei begründeten Inhalten werden wir es in der Mitte machen, bei Einzelposten werden wir es als Mittelpunkt behalten Wir werden als Stil Band und als Hintergrundfarbe Schwarz wählen. Klicken Sie jetzt auf dieses Plus-Symbol, ich schreibe hier eine Überschrift. Gehen wir ins Innere von Style. Wir werden die Ausrichtung als Mittelpunkt beibehalten. Textfarbe, ich behalte es als Weiß aus Typografie und der Wahl der Schriftmittel Ich werde es bei der Größe 85 belassen und ab dem Gewicht werde ich es bei 800 belassen Jetzt werden wir einfach zu unserer Überschrift duplizieren. Klicken Sie jetzt mit der rechten Maustaste und duplizieren Sie es. Öffne jetzt den Navigator. Dies ist unsere erste Überschrift und dies ist unsere zweite Überschrift. Also wähle ich unsere erste Überschrift aus. Ich gehe weiter, scrolle nach unten und hier ist ein benutzerdefinierter Seriencode. Sie können diesen blauen Strich sehen. Gehen wir jetzt zur Registerkarte Stil und ändern diese weiße Farbe, sodass Sie eine beliebige Farbe auswählen können. Ich behalte die Transparenz bei Null. Das sieht jetzt wunderschön aus. Jetzt wählen wir hier unsere zweite Überschrift in der Textfarbe aus. Ich füge meinen Farbcode hier ein. Gehen wir weiter und scrollen wir nach unten. Ich erkläre ihre Position als absolut. Okay. Wählen Sie jetzt unsere erste Überschrift aus und lassen Sie uns hier weitermachen. Wir werden auch ihre absolute Position beibehalten. Wählen wir nun unsere zweite Überschrift aus. der Registerkarte „Erweitert“ Scrollen Sie auf der Registerkarte „Erweitert“ nach unten und hier ist ein benutzerdefinierter CSS-Code. Und hier werde ich meinen benutzerdefinierten CSS-Code einfügen. Wie Sie also diese wunderschöne wellenförmige Textanimation mit Wasser sehen können diese wunderschöne wellenförmige Textanimation mit Wasser Lassen Sie uns nun diesen veröffentlichten Button in Angriff nehmen. Die Wasseranimation dauert 4 Sekunden, also können Sie hier den Wert ändern, als ob wir einen auswählen würden, und hier werden wir auch einen Wert angeben. Wie Sie sehen können, läuft die Animation also sehr schnell ab. Also behalte ich es als zurück. Ich behalte es bei vier, und hier auch, weil du diesen Code nicht lernen musst. Ich habe diesen Code bereits für dich geschrieben, du brauchst dir also keine Sorgen zu machen. 9. Hintergrundbild-Hover-Effekte: Hallo, Leute. In diesem Video erfahren wir mehr über die Animation, bei der sich die Hintergrundbilder von Containern ändern, wenn Sie mit der Maus Hintergrundbilder von Containern ändern Was bedeutet das also? Lass uns sehen. Anfangs können Sie die Karten so sehen. Hier sind drei Karten. Das ist Karte eins. Das ist Karte zwei, und das ist Karte drei. Aber wenn ich mit der Maus über meine erste Karte fahre, , wie Sie sehen können bewegt sich der Inhalt, und die Hintergrundbilder ändern sich So, wenn ich mit der Maus über meine zweite Karte fahre, ändert sich das Bild und der Inhalt verirrt sich, und das Gleiche passiert mit der Gehen wir also weiter. Jetzt werde ich dir nicht sagen, wie du das machen kannst , weil ich es bereits für dich gemacht habe. Wenn Sie diese Animation also verwenden möchten, können Sie sie einfach in Ihre Website importieren. Ich habe Ihnen nur einen Überblick darüber gegeben , wie Sie die Textcodes und wie diese Hintergrundbilder nach Ihren Wünschen ändern können, und das wird Ihnen die Arbeit erleichtern. Schauen wir uns also an, wie Sie den Text ändern können. Also klicken Sie einfach darauf. Und wenn ich hier schreibe, wird diese Überschrift sofort geändert. Auf diese Weise können Sie all diese Dinge so ändern , unser Texteditor-Widget, Sie können diese Schaltfläche nach Ihren Wünschen gestalten. Zunächst können Sie dieses Sonnenblumenbild sehen. Wie kann man also ändern, ob man dieses Bild ändern möchte, also wie kann man das tun? Um dieses Sonnenblumen-Bild zu ändern, musst du diesen übergeordneten Container der Karte unter Stil von hier aus auswählen. Du kannst ein beliebiges Bild nach deinen Wünschen auswählen. Wenn ich zum Beispiel dieses Bild auswähle, sodass Sie jetzt sehen können, dass dieses Bild angezeigt wird, gehe ich zum Standardbild über. Gehen Sie jetzt zum Tag „Erweitert“. Hier kannst du diese CSS-ID sehen. Ändere oder lösche diese SS-ID nicht. Andernfalls funktioniert der Code nicht. Ich werde dir sagen, wo diese SS-ID und die Klassen im Code verwendet werden. Zuallererst, jetzt konzentriere dich einfach darauf. Ich wähle meine erste Karte aus. Registerkarte „Erweitert“ können Sie hier sehen, dass ich die erste CSS-ID-Karte und die CSS-Klasse auf eine einzelne Karte geschrieben habe . So habe ich auf der zweiten Karte die CSS-ID-Karte zwei und die CSS-Klasse auf eine einzelne Karte geschrieben . Die CSS-Klasse ist in allen Karten gleich, aber die CSS-ID für die erste Karte ist Karte eins. Und Karte zwei ist die Karte. Und das Gleiche können Sie auf Karte drei sehen . Ändern Sie diese CSS-ID und die CSS-Klassen jetzt nicht. Ich habe hier zwei Arten von Codes geschrieben. Also lass uns das sehen. Erster Code, den ich in den PInt-Container der Karten geschrieben habe , gehe unter benutzerdefinierter CSS-Code, und hier kannst du diesen Code sehen Sie müssen an diesem Code nichts ändern , wenn Sie etwas ändern möchten Sie können es also ändern. So wie zum Beispiel jetzt unser Button hier angezeigt wird. Wenn Sie einige Änderungen vornehmen möchten, z. B. ob Sie diese Butterposition an der oberen Seite oder an der unteren Seite ändern möchten diese Butterposition an . Also so, wenn ich genau hier bin, wenn ich zwei minus 1250 Pixel mache. Wenn ich jetzt mit der Maus drüber fahre, sodass du das sehen kannst, ändert sich die Position der Taste Auf diese Weise können Sie also die Position der Überschrift und des Textes ändern Position der Überschrift und des Textes All die Dinge, die Sie ändern können. Das war also unser erster Code. Lassen Sie uns nun über diesen zweiten Code sprechen. Ich füge den zweiten Code in den HTML-Code und das HTL-Widget wird hierher gezogen Also sieh mal hier, hier ist unser variables Bild eins. Wenn ich drüber auf meiner ersten Karte drüber gehe, dann kannst du dieses Rosenmotiv sehen. Dieses Rosenbild zeigt uns also, weil ich hier die URL dieses Rosenbildes eingegeben habe. Konzentriere dich auf meinen Cursor , wohin ich ihn bewege. Okay, jetzt wollen wir diesen Code verstehen. Karte eins ist die CSS-ID für die erste Karte, und sehen Sie hier, dass, wenn ich mit der Maus über meine erste Karte fahre, also Hintergrund im Hintergrund, im Bild eins geändert werden sollte Wie Sie sehen können, ist hier die URL für das erste Bild Wenn ich mit der Maus von meiner ersten Karte wegfahre, sollte sie ihre Ausgangsposition sein Das ist der Grund, warum diese Doppelcodes so umfangreich sind. Auf diese Weise, wenn ich mit der Maus über meine zweite Karte fahre, also Hintergrund, wechsle ich zu Bild zwei, und hier ist auch die URL für das Bild Und wenn ich den Mauszeiger auch von meinem Auto verlasse, sodass das Hintergrundbild seine ursprüngliche Position annimmt, werden Sie die anderen Also entferne einfach diesen Link. Also lösche es einfach und gehe unter die Medienoption. Also wähle ich zum Beispiel dieses eine Bild aus. Kopieren Sie also von hier aus die URL dieses Bildes und fügen Sie den Link einfach hier ein. Wenn ich jetzt auf meine erste Karte gehe, sodass Sie sehen können, dass dieses Hintergrundbild geändert wurde. Also auf diese Weise, lösche einfach diese URL, geh hier hin. Und zum Beispiel wähle ich dieses Bild, kopiere die URL. Und füge diese URL hier ein. Wenn ich jetzt mit der Maus über meine zweite Karte fahre, wird Bagardmage zu diesem Bild geändert Auf diese Weise können Sie also alles nach Ihren Wünschen ändern 10. Erstellen von Karten-Hover-Effekten: Hallo Leute. Was ist los? Im heutigen Video werden wir also über Animationen mit Card-Hover-Effekten sprechen Ich werde dir nicht sagen, wie man das macht, weil ich diesen Jungen schon gemacht Sie können es einfach in Ihre Website importieren. Konzentrieren wir uns also einfach darauf. Also zuerst können Sie hier vier Karten sehen und etwas Text ist geschrieben, und Sie können diese Zahlen eins, zwei, drei und vier sehen. Wenn ich mit der Maus über meine erste Karte fahre, kannst du diesen schönen Hintergrund sehen und du kannst sehen, wie der Text weiß wird und die Zahlen auch weiß Und auf diese Weise, wenn ich mit der Maus über meine zweite Karte fahre, sodass Sie diesen Effekt sehen können Wenn Sie also mit der Maus über eine Karte fahren, können Sie sehen, wie sich unser Hintergrundbild und unsere Textfarbe ändern Sie können diese Vorlage also einfach in Ihre Website importieren. Konzentrieren wir uns jetzt einfach auf unseren Code. Hier füge ich das Codierungs-HTML-Widget ein. Also klicke ich einfach auf Code. Also hier ist eine Hover-Textfarbe. Wenn ich mit der Maus über mein Auto fahre, kannst du diesen Farbtext sehen Hier kannst du also jede Farbe deiner Tipps ändern , als ob ich hier auf Schwarz schreibe Wenn ich jetzt mit der Maus über meine erste Karte fahre, ist unser Text jetzt schwarz Auf diese Weise können Sie also jede Farbe ändern. Dir zufolge gehe ich zurück. Du musst nichts anderes ändern. Sie können einfach die Textfarbe ändern. Ich hoffe, dir gefällt dieser wunderschöne Karten-Hoover-Effekt. 11. Erstellen einer Karten-Slide-Down-Animation: In diesem Video werden wir eine Animation mit verschiebbarer Karte erstellen verschiebbarer Karte Zuerst werden Sie die Karten einfach da sehen, aber wenn ich mit der Maus darüber fahre, rutscht der versteckte Inhalt nach unten und erscheint Lassen Sie uns also anfangen. Ich habe die Titelkarte mit der Folie nach unten verschoben. Klicken Sie also einfach auf Speichern. Okay, jetzt klicke ich mit Animator auf diese Bearbeitung. Lass uns auf dieses Plus-Symbol klicken. Lexox Ich wähle diese zweispaltige Struktur. Ich will drei Karten. Wählen Sie nun den übergeordneten Container oder den mittleren Bereich aus. von der linken Seite Lassen Sie uns von der linken Seite aus die Mindesthöhe auf 200 VH festlegen. Scrollen Sie nach unten und lassen Sie uns von den Zeileneinträgen aus beginnen Gehe unter das Style-Tag. Ich gebe ihm eine schwarze Farbe. Gehen Sie auf die Registerkarte „Erweitert“, heben Sie zuerst die Verbindung zum Ausblenden auf, und von oben gebe ich den Wert 200 Ich wähle diesen Container aus. Gehen wir zum Tab Stil. Geben wir ihm eine Hintergrundfarbe. Warum? Scrollen Sie nach unten, und hier ist eine Randoption. Ich gebe einen Randradius von zehn Pixeln an. Gehen Sie in die vorzeitige Zeit. Geben wir ihm von allen Seiten einen Rand von zehn Pixeln. Jetzt trennen wir den Rand von unten, ich belasse hier den Wert 50 und geben ihm einen Abstand von 25 von allen Seiten Ein C-Plus-Symbol. Lassen Sie uns das Bild hierher ziehen. Lass uns das Bild wählen. Gehen Sie zu „Erweitert“ und heben Sie die Randverknüpfung auf, und von oben gebe ich dem Wert -60 das Cplus-Symbol Ich schreibe einen Texteditor unter dieses Bild. Lassen Sie uns hier Überschrift schreiben, Karte eins, wählen Sie diese aus, und daraus mache ich Überschrift zwei unter Stilausrichtung, Mittelfarbe. Machen wir es schwarz und gehen unter „Erweitert“. Lass es uns einer CSS-Klasse geben, um Text zu inhaltlichem Inhalt. Lassen Sie uns diesen Container auswählen und hier benutzerdefinierten CSS-Code einfügen. Wie Sie sehen können, ist das jetzt unser Text, und wenn wir weitermachen, kommt er auf die obere Seite. Aber wir wollen diesen Text hinter dem Bild haben. Wählen wir also unser Bild aus. Und von hier aus erhöhen wir den nächsten Z-Wert. Ich gebe den Wert auf. Wie Sie jetzt sehen können, sieht es großartig aus. Lassen Sie uns die Messlatte minimieren. Und wann oder drüben. Dieser Effekt sieht also sehr toll aus. Also lass uns die Bar öffnen. Lassen Sie uns nun zuerst den Code verstehen. Ich wähle diesen Container aus. Hier ist unsere Größe. Du kannst es also nach Belieben ändern, Beispiel wenn ich hier 115 schreibe, da du sehen kannst, wie hoch dieser weiße Behälter so aussieht. Sie können sich also nach Ihren Wünschen ändern. Ich gehe zurück. Und von hier aus kannst du die Uhrzeit ändern. Also erhöhst du das, wenn ich hier schreibe, 500. Wenn Sie jetzt mit der Maus darüber fahren, können Sie sehen, dass die Länge dieser Karte erhöht wurde Du kannst das also ändern, aber ich gehe zurück. Sie können diese Werte also ändern. Wenn du jetzt glücklich bist, ändere ich diese Höhe um zwei, 250. Jetzt sieht das gut aus, finde ich. Okay, 240 sieht gut aus. Okay, also ich behalte diesen Wert. Jetzt duplizieren Sie es einfach. Duplizieren. Jetzt lösche ich diese beiden Container. Jetzt minimiere einfach den Krieg. Und wenn Sie mit der Maus über diese Autos fahren, können Sie sehen, dass dieser Inhalt sehr gut aussieht 12. Erstellen eines schiefen Karteneffekts: In diesem Video werden wir einen coolen Effekt mit schiefer Karte erzeugen Wenn ich mit der Maus über diese Karten fahre, ändern sich die Farben Lass uns anfangen und sehen, wie es funktioniert. Lass uns mit Elementor auf dt klicken. Lass uns einen Container nehmen. Mindesthöhe, ich behalte sie bei VH 100 VH, von der Richtung aus wähle ich eine Zeile aus ausgerichtetem Inhalt. Behalten wir es bei Mitte, Mitte, Lücken 40. Unter der Registerkarte „Stil“ und „ Hintergrundfarbe werde ich Schwarz beibehalten. Klicken wir auf dieses Plus-Symbol und ziehen einen Container Lass uns das duplizieren. Noch einmal, ich entscheide mich für diesen Container. Lassen Sie uns auf der Registerkarte „Erweitert“ einen Abstand von zehn beibehalten, auf das Plus-Symbol klicken und ich ziehe einen weiteren Container Auf der Registerkarte Stil behalten wir es bei. Hintergrundfarbe wie Schwarz. Auf der Registerkarte „Erweitert“ steht die Polsterung an erster Stelle. Lassen Sie uns die Polsterung von oben und 40 von rechts beibehalten. Lassen Sie uns 30 von unten und 40 von links als 30 beibehalten , klicken Sie auf das Plus-Symbol und ziehen Sie eine Überschrift Lass uns den Titel ändern. Gehen wir zu Style Tear Alignment Center. Die Textfarbe ist weiß. Typografie. Behalten wir es bei 35. Klicken Sie auf dieses Plus-Symbol. Ich ziehe einen Texteditor auf die Registerkarte Stil. Mittelpunkt der Ausrichtung, Textfarbe, ich lasse es weniger weiß auf diesem Plus-Symbol, ich ziehe eine Schaltfläche, positioniere die Position in der Mitte, Farbe transparent, Randtyp, einfarbig, Rahmenbreite eins Nun, hier müssen wir diesen äußeren Behälter wählen. Und für Fortgeschrittene gibt es hier eine benutzerdefinierte CSS-Option, und ich werde meinen Mantel einfügen. Weiß. So wie Sie diese weiße Farbe sehen können, aber ich behalte sie als Standard bei. Also so, du kannst jede Farbe ändern du kannst diese Farbe ändern, als ob ich hier gelb wäre. So wie Sie das sehen können, können Sie einen Farbverlauf eins, einen Farbverlauf zwei, einen Farbverlauf und drei Farben ändern . Also gehe ich zurück. Das ist wie dieser äußere Behälter, rechten Maustaste klicken und duplizieren. Noch einmal duplizieren. Jetzt benote ich diesen Container. Wenn Sie damit zufrieden sind, klicken Sie einfach auf diese Schaltfläche zum Veröffentlichen wenn ich den Balken minimiere, damit Sie diesen schönen Schrägfehler sehen können 13. Scroll-Triggered Content Reveal Effekte: Hallo Leute. Im heutigen Video seht ihr diese schönen Stating-Container auf einer Scroll-Animation, wenn ich zu meiner Website scrolle. Also, wie sich diese Container gegenseitig bedecken. Das sieht sehr gut aus. Also lass uns anfangen. Container auf einer Schriftrolle stapeln. Geben wir also einen Titel. Klicken Sie auf Veröffentlichen. Klicken Sie auf Mit Elemental bearbeiten. Lass uns einen neuen Container nehmen, indem wir auf dieses Plus-Symbol klicken. Von hier aus, mindestens 200 Vg-Inhalt mit zwei vollen Breiten, fixierten Inhalten bis zur Mitte Linie, klicken Sie auf das Plus-Symbol und ziehen Sie einen Container Jetzt ist dieser Container vertikal und horizontal zentriert Inhalt mit zwei vollen Breiten. Ich mache es mit einer Mindesthöhe von 75% Richtung von 70 VH. Ich schaffe es weil ich es horizontal schneiden möchte. Gehen Sie zur Registerkarte Stil. Geben wir ihm eine Hintergrundfarbe und schreiben einen Farbcode: zwei, vier, eins, Meere. Also okay, geh unter die Grenze. Geben wir ihm einen Rand von 20 Pixeln, minimieren wir den Balken. Das sieht also gut aus. Gehen wir zurück. Klicken Sie auf das Plus-Symbol. Jetzt werden wir unseren Inhalt ziehen. Lass es uns schnell machen. Ich wähle den Stiftbehälter für unsere Überschriften aus. Lass uns einfach klicken und duplizieren. Löschen Sie jetzt einfach den Inhalt von hier. Ich möchte ein Bild hierher ziehen, deshalb lösche ich einfach den Inhalt. Gehe zur Registerkarte Stil. Wählen wir Bild. Lass uns dieses Bild wählen. Klicken Sie auf die Position des Decks, um die Mitte zu zentrieren. Scrollen Sie im Anhang, wiederholen Sie den Vorgang, bis keine Wiederholung erfolgt, Bildschirmgröße des Deckblatts Jetzt wähle ich diesen Container von hier aus, mit ausgerichtetem Inhalt in der Mitte Okay. Wählen Sie jetzt diesen äußeren Behälter aus und gehen Sie unter „Erweitert“. Geben wir 50 eine Überschrift. Das sieht jetzt gut aus. Unser Bild und unsere Überschriften sehen jetzt gut aus. Ich wähle diesen Container aus. Von hier aus mache ich zwei Boxen daraus und lass uns einen Wert von 200% haben und die Elemente so ausrichten, dass sie zentriert Jetzt ist unser erster Container fertig. Lass uns das einfach duplizieren, duplizieren wir es noch einmal. Bevor ich etwas unternehme, möchte ich hier einen neuen Container hinzufügen. Ab hier, Mindesthöhe, schaffe ich es auf 50 H. Lassen Sie uns hier nur ein Bild machen. Der Container funktioniert nicht, aber das ist wichtig weil ich dir etwas sagen möchte. Also lass uns einfach dieses eine Bild hinzufügen. Okay. Ja, fertig. Jetzt ändere ich einfach schnell die Bilder und die Hintergrundfarbe Also mache ich es so schnell. Ich wähle jeden Container aus. Wir werden es im Detail Z belassen, also behalte ich hier eins. Gehen wir von „Sticky“ unter „ Bewegungseffekte “ zu „ oben“ und unter „Offset Ich gebe den Wert 50 an. Okay. Wenn ich also nach unten scrolle, weißt du die anderen Container gehen die anderen Container zurück zum ersten Container. Machen wir also dasselbe mit den anderen Containern. Hier setzen wir den Z-Index auf zwei. Wir müssen den höheren Wert des Z-Index als den ersten Container angeben . Okay, dieser. Also gebe ich auch hier den Z-Index an, und bei Bewegungseffekten von hier, klebrig nach oben, der Offset-Wert größer als bei unserem ersten Container. Wie im ersten Container wählen wir den Offsetwert als 50. Also hier werden wir es auf das Doppelte belassen. Okay, hier werden wir 200 behalten. Und im nächsten Container wählen wir diesen dritten Container, wobei der Z-Index um drei größer ist als diese beiden Container, vom Bewegungseffekt zum obersten Wert und zum Offset-Wert. Wir geben hier 150 an, wenn er auf meiner Website anfällt Siehst du, wow, das sieht so toll aus. Richtig? Unsere Container sind hier gestapelt. Nun, sehen Sie hier, wenn es auf meiner Website anfällt, gehen die anderen Dinge zurück in diesen Container, richtig Das ist also falsch, oder? Also, wie stellt man das ein? Lass uns einfach den Krieg öffnen und wir müssen das für jeden Container machen, diesen ersten Container verwenden, unter Bewegungseffekte müssen wir diese Option aktivieren, in der Spalte bleiben. Wählen wir unter Bewegungseffekte den zweiten Container aus. Wählen wir „Lasst uns diese Option aktivieren“. Wählen wir den dritten Container, Bewegungseffekte, und bleiben Sie in der Spalte. Okay. Jetzt schließ es. Jetzt, wenn du nach unten scrollst, sieht das sehr gut aus. 14. Erstellen eines Ripping-Paper-Effekts: Hallo Leute. In diesem Video werden wir also eine coole Animation mit eingetauchtem Papiereffekt machen Also lass uns anfangen. Effekt mit getauchtem Papier. Klicken wir auf Veröffentlichen. Klicken Sie mit Elementor auf diese Bearbeitung. Klicken Sie auf dieses Unschärfesymbol. Ich nehme diese zweispaltige Struktur. Lassen Sie uns zunächst die Mindesthöhe auf 200 VH festlegen. Von hier aus wird der Inhalt in der Mitte des Artikels in der Mitte ausgerichtet. Wählen Sie nun diesen Container auf der linken Seite aus. Ich stelle die Breite unter Erweitert auf 40% ein. Heben Sie zuerst die Verknüpfung der Polsterung auf Von links mache ich sie auf 10% der Polsterung aus. Wählen wir nun diesen Container auf der rechten Seite aus. Lassen Sie uns von hier aus auf 60% umstellen . Gehen wir jetzt wieder hierher zurück. Klicken Sie auf das Plus-Symbol, um einen Inhalt hierher zu ziehen. Wenn Sie auf der Registerkarte Stil Farbe wählen, ist es schwarz. Ich füge meinen Inhalt nicht ein, weil wir uns darauf konzentrieren, den Text perfekt zu gestalten, und nicht darauf, den Text zu dekorieren also einen Texteditor hierher ziehe, ich ihn an der Mitte des LconPlus-Symbols aus, ziehe eine Schaltfläche hier hinein, unter Stil, Textfarbe, lassen Sie uns Schwarz und Transparenz wählen, Null machen und Rand einfarbig, Bootsfahrerfarbe die Position, lassen Sie uns den Text mittig Wenn ich also einen Texteditor hierher ziehe, richte ich ihn an der Mitte des LconPlus-Symbols aus, ziehe eine Schaltfläche hier hinein, unter Stil, Textfarbe, lassen Sie uns Schwarz und Transparenz wählen, Null machen und Rand einfarbig, Bootsfahrerfarbe die Position, lassen Sie uns den Text mittig platzieren. Okay. Gehen wir jetzt auf die rechte Seite. Klicken Sie auf das Plus-Symbol, ziehen Sie das Bild hierher, wählen Sie das Bild aus und klicken Sie auf Löschen Das ist unser Bild. Gehen Sie in eine engere Ausrichtung. Machen wir es zentriert mit einer Höhe von 200%, ich bleibe bei 400 Pixeln Das Objekt passt zur Abdeckung. Jetzt duplizieren Sie einfach dieses Bild. Lassen Sie uns unser geripptes Bild auswählen, auf Auswählen klicken unter „Erweitert“ nach unten scrollen Hier ist die benutzerdefinierte CSS-Option. Lassen Sie uns einfach den Code hier einfügen, wie Sie sehen können Das sieht so toll aus. Klicken Sie also einfach auf Veröffentlichen. Klicken Sie auf das Cyber-Symbol. Wie Sie sehen können, sieht das sehr gut aus. 15. Alle Inhalte auf Scroll zeigen: Hallo, ich. Also heute werden wir eine coole Scroll-Animation machen Wenn ich auf der Seite nach unten scrolle, ändert sich das Bild. Neue Wörter werden auf der linken Seite angezeigt, und der Hintergrund ändert seine Farbe. Also lass uns anfangen. Also habe ich hier einen Titel angegeben. Lass uns das veröffentlichen. Klicken Sie auf Mit Alimenta hinzufügen. Lassen Sie uns einen Abschnitt mit den verfügbaren Mitteln auswählen, indem wir auf dieses Plus-Symbol klicken. von der linken Seite Lassen Sie uns von der linken Seite aus den Inhalt mit der Breite nach oben formatieren, und wir stellen sicher, dass er 100% sein sollte also unter „Erweiterte Zeit zuerst die Verknüpfung zum Padding, klicken Sie auf das Plus-Symbol ziehen Sie einen neuen Container von der linken Seite Lassen Sie uns von der linken Seite aus das Feld und dann auf 1.200 Pixel umschalten Aus der Richtung: Lass uns eine Reihe draus machen. Unter Sita gib ihr eine Farbe von Ich habe diese Farbe unter Advanced Tare genau hier gegeben , CSS-Klasse Achte darauf, dass du alle Klassen sehr genau schreibst. Klicken Sie auf PlusCon und ziehen Sie einen neuen Container, der zu 50% unter der fortgeschrittenen CSS-Klasse liegt Lass uns hier schreiben, links. Öffne den Navigator. Ich benenne diesen Container in links um. Schließe jetzt den Navigator. Klicken Sie auf Pluscon und lassen Sie uns einen neuen Container ziehen. Ich weiß, dass es in der Klasse Advanced CSS viele Container Klicken Sie auf das Plus-Symbol und ziehen Sie einen neuen Container mit Mindesthöhe. Machen wir hundert VH draus. Justify Content Center, AdvanctABFSS-Klasse, und Klicken Sie auf das Plus-Symbol. Ziehen Sie jetzt einfach den Inhalt. Ich ziehe eine Überschrift hierher. Gehen Sie auf die Registerkarte Stil, Farbe weiß, Ausrichtung in der Mitte, klicken Sie auf das Plus-Symbol ziehen Sie einen Texteditor hierher unter die Registerkarte Stil, Farbe Klicken Sie auf das Plus-Symbol. Lassen Sie uns eine Schaltfläche hierher ziehen. unter „Style Drab Alignment Stellen wir unter „Style Drab Alignment“ den Wert in die Mitte Farbe, ich mache es zu transparent, vom Typ Bootsfahrer. Geben wir Weiß eine Farbe. Ich dekoriere nicht nach Text. Veröffentlichen Sie Ihre Inhalte. Klicken Sie auf. Lassen Sie uns das Ausrichtungszentrum des Editors erstellen. Okay, jetzt ist es fertig. Minimiere den Krieg. Okay, jetzt ist es gut. Wählen Sie diese Überschrift aus und gehen Sie zu Erweitert. Stellen Sie sicher, dass Sie den Kurs hier schreiben. Sonst wird es nicht funktionieren. Ich schreibe hier, Revel. Okay, jetzt ist es erledigt. Jetzt öffnen wir den Navigator. Das ist unsere Linke. Also klicken Sie einfach mit der rechten Maustaste und klicken Sie in diesen Abschnitt. Wählen Sie nun diesen letzten Container aus. Ich schreibe hier, richtig. Gehen Sie von hier aus unter Erweitert, entfernen Sie die CSS-Klasse und wählen Sie diesen Container unter Layout aus. Lassen Sie es uns unter Erweitert einordnen und entfernen Sie die Klasse von hier. Gehen wir von hier aus auf Bewegungseffekt, lassen wir es an der oberen und fleckigen Säule kleben, schalten wir es ein Gehen wir nun unter diesem Container unter Erweitert, entfernen die CSS-Klasse von hier und fügen wir hier unsere neue CSS-Klasse hinzu. Gehen wir von „Klebrig“ zu Bewegungseffekt, wählen wir die obere Spalte, die Fleckenspalte und schalten sie ein. Okay, jetzt ist es erledigt. Jetzt lösche einfach den Inhalt von rechten Seite, weil wir hier unser Bild hinzufügen wollen. Klicken Sie auf „Veröffentlicht“, damit die Änderungen, die wir vorgenommen haben, klicken Sie auf das Plus-Symbol und fügen Sie einen neuen Container hinzu. Ich schalte diesen Navigator aus. Machen wir die Mindesthöhe auf 600 Pixel. Gehen Sie vom Hintergrundtyp zum Tag Erweitert. Ich wähle hier ein Bild aus. Ich wähle dieses Bild aus. Klicken Sie auf „Auswählen“. Lassen Sie uns die Einstellungen von hier aus vornehmen. Positionieren, mittig platzieren, anhängen, scrollen, wiederholen, bis keine Wiederholung erfolgt. Größe des Displays. Lass es uns abdecken. Scrollen Sie nach unten. Hier ist ein Grenzabschnitt. Geben wir einen Rand von 40 Pixeln an. Gehen Sie hier auf die Registerkarte Erweitert, CSS-Klasse. Desktop HTOposition Ich mache es absolut, schlendern Sie runter. Hier ist eine vertikale Ausrichtung. Entferne diesen Nullwert und mache ihn in Prozent. Okay, jetzt ist es erledigt. Klicken Sie auf das Plus-Symbol, suchen Sie nach dem HTML-Widget und ziehen Sie es darunter. Fügen Sie nun einfach die letzte Fortsetzung von links ein, klicken Sie rechten Maustaste und duplizieren Sie dies, klicken Sie rechten Maustaste und duplizieren noch einmal. Klicken und duplizieren Wie Sie jetzt sehen können, gibt es vier Abschnitte: eins, zwei, drei und vier. Okay. So, duplizieren Sie einfach von der rechten Seite und klicken Sie mit der rechten Maustaste auf Duplizieren. Gehen Sie zur Registerkarte Stil und ändern Sie das Bild. Ich wähle dieses eine Bild aus. Klicken Sie auf „Auswählen“, „Rechts“, „Klicken“, „Duplizieren“. Gehen Sie zur Registerkarte Stil und ändern Sie das Bild. Klicken Sie auf Auswählen, klicken Sie mit der rechten Maustaste und duplizieren Sie. Lassen Sie uns auf der Registerkarte Stil das Bild ändern. Ich wähle dieses eine Bild aus. Klicken Sie auf Conselect. Veröffentlichen Sie jetzt einfach den Inhalt Klicken Sie auf dieses Augapfelsymbol. Lassen Sie uns nun die Magie sehen. So können Sie diesen schönen Effekt sehen. Es ist großartig. Stimmt. Wenn Sie die Hintergrundfarben ändern möchten, wie können Sie dann diese Farbe ändern? Lass uns das sehen. Gehen Sie jetzt zurück und scrollen Sie nach unten. Hier ist unser HTML-Tag. Sie können die Farben von hier aus so ändern , als ob dies die erste Farbe, die zweite Farbe, die dritte, vierte usw. ist. Ich möchte zum Beispiel die dritte Farbe ändern. Also schreibe ich hier Code fünf, a, vier, acht, drei e. Klicke auf öffentlich. Schauen wir uns die Änderungen an. Wenn ich jetzt nach unten scrolle, wird diese Farbe, wie Sie sehen können, geändert. Auf diese Weise können Sie die gewünschte Farbe ändern. Sie können diese Bilder ändern, alles, was Sie können. 16. Erstellen eines magischen Karteneffekts: Hey, Leute in dem Streit, wo ihr diesen tollen magischen Cardifect kreieren werdet, seht euch diesen tollen magischen Cardifect kreieren werdet, seht an, wie cool diese Karten sind, wenn sie ihre Farbe ändern, auch wenn ihr nicht mit der Maus drüber schwebt Es sieht so toll aus. Lassen Sie uns also einsteigen und sehen, wie wir diese Magie verwirklichen können. Fangen wir jetzt an und klicken Sie auf das, was mit der Elemento-Schaltfläche hinzugefügt wurde Jetzt befinden wir uns in unserem elementaren Seitenersteller. Klicken wir auf das Plus-Symbol und ich gehe zu dieser Richtungsspalte Ab der Mindesthöhe behalte ich es bei H. Ich behalte die Mindesthöhe bei 50 H und von dieser Richtung aus behalte ich es als Reihe bei. Und bei berechtigtem Inhalt behalte ich es als Mittelpunkt. Lassen Sie uns bei „Elemente ausrichten“ den Mittelpunkt beibehalten. Klicken wir also auf das Splur-Symbol und ich ziehe einen Container hierher Lassen Sie uns diesen untergeordneten Container einfach mit der rechten Maustaste duplizieren und ich duplizieren ihn, lassen Sie uns ihn noch einmal duplizieren Wählen wir in Richtung dieses mittleren Bereichs und gehen wir zum Tab Stil Ich behalte ihn als Backdwnclor Jetzt wähle ich diesen mittleren Container und gehe zum Tab „Erweitert“. Ich behalte Ich behalte Ich nehme einen weiteren Container, also klicke auf das Plus-Symbol und ich führe hier einen Container Ich behalte die Mindesthöhe bei 400 Pixeln. Gerichteter Inhalt, ich behalte ihn als Mittelpunkt der Mittellinie, gehen wir zum Tab „Stil“ und ich behalte seine Hintergrundfarbe bei, genau wie bei unserem mittleren Abschnitt Also lasse ich es schwarz, scrolle nach unten und hier ist ein Rand Also, ich behalte den Rand fest, das Gewicht eines Bootsfahrers gebe ich ihm und die Farbe des Bootsfahrers Ich schreibe hier unseren Farbcode drei c67e3. Sein Grenzradius war fünf. Lassen Sie uns unter Randtyp auf diesen Hover-Status klicken, ich behalte ihn als einfarbig, Randbreite, ich behalte ihn zwei von boercolor, ich füge hier Okay. Also, jetzt behalte ich den Grenzradius bei fünf, beim Aquarell bleibe ich durchsichtig Gehen wir jetzt unter Erweitert. Ab hier behalte ich die Polsterung von allen Seiten bei zehn. Okay, jetzt minimiere es einfach und du kannst sehen, wenn ich mit der Maus drüber fahre, die Rahmenfarbe verschwindet Also lass uns die Bar öffnen. Und klicken Sie auf dieses Plus-Symbol. Ich ziehe eine Überschrift hierher. Hier ändere ich den Titel. Ich schreibe hier Karte eins. Gehen wir zum Tab Stil. Ich behalte die Ausrichtung als Mittelpunkt, die Textfarbe, ich behalte das Weiß aus der Typografie bei, lassen Sie uns die Größe 35 beibehalten Okay. Also jetzt klicken wir auf dieses Plus-Symbol. Ich ziehe einen Texteditor hierher. Gehen wir zum Style-Tab. Ich behalte die Ausrichtung als Mittelpunkt bei. Ich behalte die Schriftfarbe wie diese Farbe aus der Typografie bei, ich behalte die Größe bei 15. Klicken wir also auf dieses Plus-Symbol. Ich ziehe einen Button hierher. Gehen wir zur Position des Style-Tags. Ich behalte es als Mittelpunkt der Typografie und ändere nichts, weil unser Fokus darauf liegt , wie man das magische Artefakt erzeugt Ich dekoriere das nicht so sehr. Lassen wir die Transparenz bei Null belassen. Okay. Also wähle ich jetzt diesen inneren Behälter. Gehen wir zum Tag Advanced und hier ist eine Option für Customs sS. Ich füge meinen Code hier ein, also wähle ich den Abschnitt „ Mittel“ Lass uns unter Advancb gehen und von hier aus behalte ich es bei einem Zendxl-Code Lasst uns die Messlatte minimieren. Wenn ich mit der Maus drüber fahre, siehst du diese wunderschöne Verlaufsfarbe Lass uns jetzt die Bar öffnen. Lassen Sie uns benutzerdefinierten CSS-Code eingeben. Sie müssen nicht den ganzen Code lernen. Jetzt werde ich dir sagen, welche Variablen du ändern kannst. Hier ist die erste Farbe. Du kannst also die Farbe ganz nach deinem Geschmack ändern, wie hier, wenn ich hier blau schreibe. Wenn du also mit der Maus drüber fährst, kannst du diese blaue Farbe sehen Du kannst diese Farbe ändern, als ob ich hier schreibe, Orange. Wenn ich mit der Maus drüber fahre, kannst du hier diese orange Farbe sehen Okay, so kannst du auch diese dritte Farbe ändern, also wenn ich hier schreibe, Rot Wenn ich also mit der Maus drüber fahre, sieht diese rote Farbe so toll Auf diese Weise können Sie die Farbe entsprechend ändern. Ich wähle diesen äußeren Behälter aus, klicke mit der rechten Maustaste und lass uns das einfach duplizieren, rechten Maustaste klicken und lass uns das einfach duplizieren. Also vermiete ich diesen Container. Rechtsklick und löschen. So kannst du dieses wunderschöne magische Artefakt sehen. Wenn Sie damit zufrieden sind, können Sie auf die Schaltfläche Veröffentlichen klicken 17. Weichzeichner-Zoom-Hover-Effekte: Hallo Leute, in diesem Video werden wir einen supercoolen Blut-Zoom-Over-Effekt machen, sodass ihr eine Karte sehen werdet einfach da steht und ganz nett aussieht Aber wenn ich meine Maus über eine der Karten bewege, wird diese Karte gezoomt und die anderen beiden Karten werden verkleinert und sehen ähnlich aus. Es wird großartig, also lass uns anfangen. Also habe ich hier einen Titel angegeben und lass uns diesen veröffentlichen. Klicken Sie auf Mit Alienter hinzufügen Ich nehme einen neuen Abschnitt auf. Das ist unser Hosenbehälter. Nehmen wir seine Mindesthöhe 200 VH aus der Richtung. Ich mache es Reihe, Mitte und Mitte. Klicken Sie auf dieses Plus-Symbol, ziehen Sie den Container aus der Richtungszeile wählen Sie Mitte und Mitte. Okay, klicken Sie auf Dieses Plus-Symbol. Ich füge den neuen Container hier hinzu. Lass es uns noch einmal duplizieren. Okay. Jetzt wähle ich diesen mittleren Container aus. Gehen wir unter einen Style-Tab und geben ihm eine Hintergrundfarbe. Ich schreibe hier den Farbcode. FF 0000. Gehen wir unter der Registerkarte Erweitert zu den Überschriften Top 50, 20, Bite und 20 Con plus Symbol und ziehen eine Überschrift Geben wir ihm einen Titel. Ich schreibe hier, Karte eins unter dem Tab Stil, Alignment Center, Farbe weiß, Typografie Machen wir 800, vergrößern wir es. Machen wir 40 draus, con plus Icon, und ziehen einen Texteditor Registerkarte Stil geben wir ihm eine Farbe zu Weiß, Alignment Center, dem Cplus-Symbol, ziehen eine der Registerkarte Stil positionieren Sie die Position Mitte, Textfarbe, weiße Ich mache es zu transparent, minimiere den Balken. Ich möchte, dass die Ecke abgerundet wird, also lockere ich diesen Container auf der Registerkarte Stil Geben wir ihm einen Rand. Ich gebe ihm einen Wert von zehn und gebe dem Grenzradius zehn. Gehen wir zur Registerkarte Erweitert. Hier in CSS-Kursen schreibe ich hier Card Box. Denken Sie daran, dass dieser Text identisch sein sollte. Wenn du es nicht schreibst, wird der Who-Effekt nicht funktionieren. Lassen Sie uns jetzt einfach diesen Container duplizieren. Ich lösche diesen Container. Gehen wir zu diesem Container auf die Registerkarte Erweitert. Ich schreibe hier meinen benutzerdefinierten CSS-Code. Lass es uns hier einfügen. Okay, wie Sie sehen können, wenn ich mit der Maus über meine Karten fahre, zoomen die Karten und die anderen beiden Karten ziehen sich zusammen Ich möchte, dass, wenn ich mit der Maus über meine Karte fahre, ihre Farbe geändert wird. Also lass uns das machen Lass uns den Navigator von hier aus öffnen. Ich wähle von hier aus. Das ist unser äußerer Behälter. Also möchte ich diese Karte auswählen. Also habe ich diesen Container aus dem Navigator ausgewählt. Gehen wir beim Hover auf die Registerkarte Stil und geben wir ihm hier einen Farbcode. Wenn ich jetzt mit der Maus über meine erste Karte fahre, wird sie blau Fügen wir diesen Effekt also in zwei andere Container ein. Also klicke ich mit der rechten Maustaste und kopiere hier, klicke mit der rechten Maustaste und füge den Stil ein, klicke mit der rechten Maustaste und füge den Stil ein. Lassen Sie uns nun die Leiste schließen, wenn ich mit der Maus über meine Karte fahre, da Sie sehen können, dass die Farbe blau wird Also lass uns die Leiste öffnen. Lasst uns jetzt den Code hier verstehen. Also wähle ich diesen Container aus und öffne das benutzerdefinierte CSS. Hier ist ein Wert von Jumaane. Sie können den Wert hier ändern. Hier ist ein Verkleinerungswert, wenn Sie ihn ändern, z. B. wenn ich hier fünf mache Wenn ich also meine Karte verdecke, werden die anderen beiden Karten verkleinert Sie können den Wert also ändern. Das ist alles im Udo zwischen den nächsten v 18. Textkontureffekt: Hallo Leute, lasst uns in diesem Video über diese supercoole Textstrich-Animation sprechen. Es sieht so toll aus, wie sich der Strich von der linken Seite zur rechten Seite bewegt. Ich kann es kaum erwarten, dir zu zeigen, wie man das macht, also lass uns in Ting eintauchen. Nehmen Sie diese Bearbeitung mit Leaner an. Jetzt befinden wir uns in unserem elementaren Seitenersteller. Nehmen wir hier einen Container. Mindesthöhe, ich behalte sie bei VH, 50 VH. Ab hier behalte ich rechtmäßigen Inhalt als Mittelpunkt des Mittelpunkts bei. Lassen Sie uns auf dieses Plus-Symbol klicken und einen Kopf ziehen. Ich ändere den Titer. Ich umarme es. Gehen wir zu der Registerkarte Stil, Ausrichtung, Mitte, Textfarbe, Weiß, Typografie Ich behalte die Größe beim Gewicht bei 100, ich behalte 700 Ich wähle Großbuchstaben. Jetzt sind alle Buchstaben in Großbuchstaben. Gehen wir nun zu den erweiterten Tabs, scrollen wir nach unten, und hier ist eine Option für Zollarbeiten, und ich füge meinen Code hier Ich habe meinen Code hier eingefügt. Sie können diese Textstrich-Animation sehen. Gehen wir unter den Fliesenleger. Ich möchte diese weiße Farbe ändern, du kannst alles machen Du kannst jede Farbe so ändern, aber ich behalte sie als transparente Farbe. Also jetzt sieht das toll aus. Hier ist eines zu beachten, du bist strenger und dein Titel und Codetext sollten identisch sein Wenn diese unterschiedlich sind, dann wird es nicht funktionieren wenn du nicht verstehst, was ich sage, also gebe ich dir jetzt ein Beispiel wo ich meinen Titel ändere, so wie ich hier schreibe Hallo Freunde. Okay, also lass uns das einfach kopieren. Gehen wir im benutzerdefinierten CSS-Code unter „Fortgeschritten“. Sie müssen dieses Thema so einfügen, wie Sie es geschrieben haben. Wie Sie sehen können, spaltet sich unsere Text-Strich-Animation jetzt ab . Wenn Sie damit zufrieden sind, klicken wir einfach auf diese Veröffentlichung 19. Erstellen von 3D-Ebeneneffekten: In diesem Video werden wir einen coolen Drei-D-Ebenen-Effekt erzeugen. Wenn ich mit der Maus über das Bild fahre, siehst du eine wunderschöne Ebene. Schau dir an, wo die erste Ebene bei 100% Opazität vollständig sichtbar ist und jede Ebene danach allmählich Dieser Drei-D-Effekt sieht fantastisch aus, also lassen Sie uns näher darauf eingehen Lassen Sie uns also mit unseren drei Dlaer-Effekten beginnen. Also gebe ich dem Titan hier einen Drei-D-Lear-Effekt Drei-D-Lear-Effekt Lass uns auf Veröffentlichen klicken. Klicken Sie auf Mit Elementa hinzufügen. Lassen Sie uns hier einen Abschnitt über die Mittel aufrufen, indem wir auf das Plus-Symbol klicken. Ich wähle diese zweispaltige Struktur. Lassen Sie uns also diesen Behälter auf der rechten Seite lassen. Lassen Sie uns zunächst einen Inhalt hierher ziehen. Ich mache es schnell. Okay, das ist also erledigt. Jetzt lassen wir den Behälter auf der linken Seite stehen. Und lassen Sie uns eine Spalte hineinziehen. Klicken Sie auf das Plus-Symbol und ich ziehe den Container hierher. Klicken Sie auf das Plus-Symbol und ziehen Sie das Bild. Wählen Sie hier Ihr Bild aus und klicken Sie auf Slap. Das ist also unser Bild. Lass uns unter Si gehen. Ich schaffe es, ich mache es mit 200% Alignment Center. Öffnen Sie nun den Navigator, Sie mit der rechten Maustaste und klicken Sie auf Duplizieren Gehen Sie jetzt von hier aus unter Erweitert. Machen wir seine Position absolut. Nun, dieses Bild ist auf unserem ersten Bild. Lass es uns einfach noch einmal duplizieren. Okay. Jetzt gibt es drei Bilder, aber wir können nichts sehen. Mach dir keine Sorgen. Lassen Sie jetzt einfach diesen Container stehen, ok und gehen Sie hier hinter Ihrem benutzerdefinierten CSS-Code unter Erweitert. Okay, klicken Sie jetzt auf Veröffentlichen. Lassen Sie uns diesen Inhalt in die Mitte stellen. Also wähle ich diesen Container aus der ausgerichteten Inhaltsmittelzeile in der Mitte aus. Okay, jetzt veröffentliche es einfach und klicke auf dieses Augapfelsymbol und sieh dir die Änderungen an Jetzt, wenn ich mit der Maus über mein Bild fahre, damit Sie sehen können, wie schön es für uns den TDLar-Effekt macht Gehen wir jetzt zurück und öffnen den Navigator. Ich wähle diesen einen Container und das ist unser benutzerdefinierter CSS-Code. Hier kannst du den Wert der Entfernung ändern, zum Beispiel wenn du hier den Wert 50 schreibst, jetzt veröffentlichst und die Änderung siehst. Wenn ich mit der Maus darüber fahre, wurde, wie du siehst, der Abstand um 50 Pixel erhöht Sie können die Werte also hier nach Ihren Wünschen anpassen. Ich gehe zurück. Ich behalte es bei 30. Klicke auf Veröffentlichen 20. Glas-Effekt in Elementor: Hallo Leute. Heute werden wir also etwas über den Glaseffekt lernen. Also gebe ich hier den Titel an. Lass uns einfach auf Veröffentlichen klicken. Klicken Sie auf Mit Elementor hinzufügen. Geben Sie ihm eine Mindesthöhe von 200 Vg. Von hier aus, ausgerichtetes Inhaltszentrum, A Einzelpostenzentrum. Ich gehe Stilett. Ich wähle hier ein Bild. Klicken Sie auf „Löschen“. Lassen Sie uns von hier aus einige Anpassungen vornehmen Position zur Mitte, Befestigung zum Scrollen, Wiederholung bis ohne Wiederholung, Displaygröße, lassen Sie uns alles abdecken Das ist jetzt also so, dass unser Bild so dargestellt wird. Klicken Sie auf das Plus-Symbol und ziehen Sie ein weiteres Mal, um diesen Container zu ziehen Gehen Sie zur Registerkarte Erweitert. Geben wir einen Abstand von den oberen Hundert, von der rechten Seite, 50, unteren Hundert, der linken Seite, 50. Okay. Klicken Sie auf das Plus-Symbol und ziehen Sie eine Überschrift Ich mache es schnell, weil du weißt, wie das geht. Okay, das ist also erledigt. Okay, lass uns diesen Behälter mit einem Like versehen, dem Style-Klebeband versehen und von hier aus mache ich es zur weißen Farbe. Und ich verringere seine Transparenz ganz nach links. Das ist in Ordnung. Jetzt können Sie den Glaseffekt sehen, aber um ihm ein echtes Gefühl zu geben, fügen wir unseren Code ein. Gehen wir also unter Erweitert und fügen den benutzerdefinierten CSS-Code hier ein. Befehl. Ich füge meinen Code hier ein. Jetzt können Sie den Glaseffekt deutlich sehen. Jetzt ist mehr Blut. Und wenn Sie damit zufrieden sind, klicken Sie einfach auf Veröffentlichen. Dieser Glaseffekt war also sehr einfach. Ich hoffe du hast es sehr gut verstanden. 21. Button-Hover-Effekte: Hallo Leute, in diesem Video werden wir uns den wirklich coolen Button-Hover-Effekt ansehen wirklich coolen Button-Hover-Effekt Zuerst wirst du nur einen normalen Button sehen. Aber wenn Sie mit der Maus darüber fahren, einige tolle strahlende Farben beginnen sich einige tolle strahlende Farben zu verändern und sehen super hübsch Also lass uns anfangen und diese tolle Animation machen. Klicken Sie auf dieses Addukt mit Alimento. Nehmen wir einen Hauptabschnitt. Nehmen wir ab der Mindestgröße den Wert VH. Lassen Sie uns den Wert 50 bei berechtigtem Inhalt beibehalten. Behalten wir es als Mittelpunkt des Mittelpunktes bei. Registerkarte Stil behalten wir Hintergrundfarbe auf diesem Plus-Symbol schwarz bei Ziehen wir eine Schaltfläche auf die Registerkarte Stil, behalten wir sie als transparente Farbe bei , positionieren, behalten sie als Mittelpunkt, vor der Typografie Lassen Sie uns 25 beibehalten, damit Sie deutlich sehen können Ich verziere die Schaltfläche nicht, weil wir uns darauf konzentrieren, die Animation zu lernen, nicht das Design Gehen wir zu Advanced Sale und hier fügen wir unseren benutzerdefinierten CSS-Code ein. Ich füge meinen Code hier ein. Also wenn du drüber drüber drüber gehst, kannst du sehen, dass das nett überfüttert ist Also kannst du diese Farben ändern. Wenn du hier schreibst, kannst du diese Farbe ändern wie Farbverlauf eins, Farbverlauf zwei, Grad in drei, Farbverlauf vier, du kannst all diese Farben ändern. Also, wenn ich hier rot schreibe, dann kannst du diese roten Farben sehen. Also, wenn ich das übertreibe, ändern sich diese Farben. Lassen Sie uns seine Reaktionsfähigkeit überprüfen. Ich klicke auf dieses Tablet-Gerät. Das sieht toll aus hier. Lass uns auf Handy klicken. Hier ist noch eine Sache. Wenn du den Glüheffekt hier machen willst, denkst du, wenn ich mit der Maus drüber fahre, sollte hier ein wachsender Effekt entstehen. Also, wie du das machen kannst Also lass uns die Leiste öffnen und sie hier einfügen. Minimiere jetzt den Balken, und wenn ich mit der Maus darüber fahre, kannst du diesen schönen Leuchteffekt sehen Jetzt ist es fertig und klicken Sie auf die Schaltfläche Veröffentlichen. 22. Erste Container-Basis Website: Hallo, Leute. Lassen Sie uns jetzt unsere Website erstellen. Also werden wir sie zuerst installieren. Also installiere ich Astra TN. Lass es uns installieren und aktivieren. Ich lösche dieses 2024-Thema. Installieren wir nun unser Plugin und klicken Sie auf Neues Plugin hinzufügen. Zuerst werden wir unser Elementor-Plugin installieren. Unser zweites Plugin wird Element Skit sein. Stellen Sie sicher, dass Sie die Schreibweise korrigieren, installieren Sie es und aktivieren Sie es jetzt Jetzt werden wir unsere Seiten erstellen. Klicken Sie auf Neue Seite hinzufügen. Ich gebe den Titel hier nach Hause. Klicken Sie auf Veröffentlichen und Veröffentlichen. Klicken Sie hier, fügen Sie es mit Animator hinzu. Also lass uns jetzt anfangen. Hier wird unser Seitenname angezeigt. Gehen Sie also zunächst zu diesen Seiteneinstellungen und von hier aus wähle ich das Seitenlayout für Element oder Leinwand. Warum ich mich dafür entscheide, werde ich später erklären. Lassen Sie uns jetzt unsere Website erstellen. Klicken Sie also auf das Plus-Symbol und ich nehme die Struktur mit den zwei Spalten. Ich wähle diesen Container auf der linken Seite aus. Von hier aus wähle ich die Richtung der Reihe und klicke auf das Plus-Symbol. Ich werde meine Überschrift hierher ziehen. Lassen Sie uns das von hier aus entwerfen, Ausrichtung links, Textfarbe. 044f7. Ich habe meinem Text diese Farbe aus der Typografie Ich werde die Schriftart wählen. Das ist auch eine sehr gute Schrift. Ich werde es bei nass 600 belassen. Okay. Gehen Sie unter Erweitert und scrollen Sie nach unten. Hier finden Sie Bewegungseffekte. Also werde ich hier Animation verwenden, also wähle ich diese Animation aus und blende sie ab Klicken Sie auf das Plus-Symbol, ziehen Sie eine weitere Überschrift unter diese Überschrift und ändern Sie den Gehen Sie von hier aus zur Registerkarte Stil, Ausrichtung links. Bei der Textfarbe behalte ich Farbe Schwarz bei, unter Typografie, Familie Helvetica Und Größe, ich gebe es auf 73, lass es uns erhöhen. Okay, 74 ist okay, vom Gewicht auf 700. Ich möchte den Platz hier verkleinern. Um den Abstand zu verringern, gibt es hier eine Zeilenhöhe. Geben wir ihm den Wert 85. Okay, das ist jetzt in Ordnung. Gehen wir nun Registerkarte „ Erweitert“ und heben Sie die Randverknüpfung auf Nun sehen Sie hier, wenn ich den negativen Wert -20 gebe, damit Sie sehen können, dass hier der Abstand verkleinert wird Scrolldwn unter Bewegungseffekte, ich wähle hier, ich damit Sie sehen können, dass hier der Abstand verkleinert wird. Scrolldwn unter Bewegungseffekte, ich wähle hier, linkes Uvation ausfüllen. Sie sehen also, wie unser Text Wenn Sie Ihre Arbeit erledigen, also vergessen Sie nicht, Ihre Arbeit immer wieder zu veröffentlichen, klicken Sie auf das Plus-Symbol und ziehen Sie einen Container Richten Sie den Inhalt zunächst aus und richten Sie die Elemente zentriert Klicke auf das Plus-Symbol und ich ziehe eine Schaltfläche hinein Gehen Sie in der Typografie auf den Tab Stil und wählen Sie die Schriftart Textfarbe, Weiß, Hintergrundtyp auf Schwarz. Gehen Sie nun über die Textfarbe zu Schwarz und den Hintergrundtyp über zum Rangstift. Sehen Sie sich nun die Magie meines Buttons wenn ich mit der Maus über meinen Button fahre, und wie diese Animation funktioniert Ich wähle einen Randtyp, ich wähle Vollton, Rahmenbreite auf zwei, Rahmenfarbe, Schwarz, Randradius auf zehn Nun, weißt du, unsere Ecken sind abgerundet. Und von hier aus trennen wir die Verbindung von oben, geben wir ihr 20 von der rechten Seite, 30, 20 unten 30 von links. Okay. Minimiere jetzt die Leiste und sieh dir unseren Button an. Klicken Sie auf das Plus-Symbol, ziehen Sie eine Überschrift hierher und fügen Sie den Titel ein Registerkarte Stil die linke Textfarbe 43, vier, drei, vier, drei Unter Typografie, Familie Helvetica, Größe 20 von Gewicht bis 400, gehen Sie unter Fortgeschrittene, scrollen Sie nach unten, und hier ist ein Antrag zum Ausblenden in linker Nervation, Das ist also unsere linke Seite. Ich möchte diesen Button und diesen Text in einer Zeile haben. Also wähle ich diesen Container von hier aus, ich wähle die Richtung nach R. Ich möchte diese Schaltfläche „Hier klicken“ nur in einer Zeile haben. Also lass es uns anpassen. Lassen Sie uns das zunächst auswählen und von hier aus möchte ich den Text danach und das Wort, das in der nächsten Zeile stehen soll. Also, wie können wir das machen? Wir werden hier unseren HDMI-Tab verwenden. Wenn wir dieses Break-Tag verwenden. Wie Sie sehen können, ist unser Button jetzt korrigiert. Gehen wir jetzt auf die rechte Seite. Also lass das auf das Plus-Symbol klicken. Ziehen Sie von hier aus dieses Bildwort. Wählen Sie nun Bild. Ich entscheide mich für das. Klicken Sie auf „Auswählen“. Das ist also unser Bild. Auflösung des Bildes. Behalte es bis zum Fallen. Ab 200%, maximaler Wert 200%, gehen unter Bewegungseffekte unter Bewegungseffekte, wir wählen hier, Fernsehen einblenden Jetzt ist dieser erste Abschnitt abgeschlossen. Von hier aus können Sie die Vorschau Ihrer Website sehen. Schauen wir uns also an, wie schön diese Animation funktioniert. Aber ich möchte diesen Text in der Mitte haben. Gehen wir also zurück und wählen von hier aus diesen Container aus und wählen von hier aus ausgerichteter Inhalt als Mittelpunkt. Also klicken Sie jetzt auf Veröffentlichen. Jetzt können Sie sehen, dass unser Inhalt in der Mitte steht. 23. Zweiter Behälter: Lassen Sie uns jetzt unseren zweiten Abschnitt beginnen. Das ist also unser Container. Ich schlage das und aus der Breite behalte ich es bei 26% Und was die Richtung angeht, entscheide ich mich dafür, ausgerichtete Inhalte so anzuordnen, dass die Elemente zentriert werden Klicken Sie auf das Plus-Symbol und ziehen Sie das Bild hinein Lass uns das Bild auswählen. dieses auswählen, klicken Sie auf SletImagerSolution, um unter die Ausrichtung der Registerkarte „ Stil“ zu fallen . Ich behalte die Breite in der Mitte bei, lassen Sie uns sie bei 45% belassen Eine Überschrift hierher ziehen. Lass uns den Text ändern. Gehen Sie unter dem Tab Stil, Ausrichtung nach links, Textfarbe auf Schwarz, Typografie, Gewicht auf 400 und Familie wählen Sie Halitka Verkleinern wir es. Lassen Sie uns seine Größe auf 18 belassen. Ja. Das ist jetzt in Ordnung. Minimiere die Bar. Aber dieses Bild sieht sehr klein aus. Also wähle ich dieses Bild aus. Lassen Sie uns seine Breite erhöhen. 60 ist in Ordnung. Lassen Sie uns diesen Container nun unter der Registerkarte Stil platzieren. Lassen Sie uns von hier aus den Rahmen wählen. Und vom Grenzradius gebe ich den Wert 20 an, minimiere den Balken. Wir können die Grenze jetzt nicht sehen, aber mach dir keine Sorgen. Jetzt geben wir es Box Shadow, Blinus bis 20. Jetzt ist das mehr Blut und ein separater Wert von -50. Jetzt minimiere den Balken. Und jetzt kannst du dieses helle Wasser sehen. Gehen Sie unter Erweitert unter Bewegungseffekt. Geben wir dem Effekt eine Eingangsanimation, wählen Sie hier und blenden Sie die linke Animation ein. Das sieht also toll aus. Jetzt einfach mit der rechten Maustaste klicken und duplizieren, mit der rechten Maustaste klicken und duplizieren. Ich habe diesen Container dupliziert, und deshalb wird dieselbe Animation auch auf die anderen Container angewendet Also lass es uns ändern. Gehen Sie unter Bewegungseffekte auf Erweitert. Hier verblasst die linke Seite. Ich möchte hier benutzen. Wenn ich es hier verwende, lassen wir es beim Verblassen Ja. Wenn Sie diesen Container unter „ Erweitert“ sehen, wählen wir Fading Right Ja. Veröffentlichen Sie jetzt Ihre Inhalte. Sehen wir uns die Vorschau an. Ja. Du hast gesehen, wie all diese Animationen funktionieren. Lassen Sie uns das noch einmal aktualisieren, wie Sie sehen können. Das sieht wirklich toll aus. Ich habe die Animation auf der Schaltfläche nicht verwendet, also lass es uns machen. also gut, die Schaltfläche von hier aus unter Bewegungseffekte auszuwählen, wenn ich es bei der linken Animation belasse Veröffentlichen Sie das also und lassen Sie uns das hier überprüfen. Ja, da du siehst, wie schön das aussieht. Also lass uns weiter gehen. Klicken Sie auf das Plus-Symbol. Ich möchte hier eine Überschrift hinzufügen. Anstatt also ein Überschriften-Widget zu verwenden, werde ich es einfach mit der rechten Maustaste duplizieren, klicken und duplizieren. Also werde ich es einfach hierher bringen. Ja. Lassen Sie uns nun zunächst den Inhalt ändern. Aber ich will diese Animation nicht hier haben. Lassen Sie uns also zunächst die Animationen entfernen. Gehen Sie unter Bewegungseffekte auf Erweitert. Wählen Sie es auf „Keine“. Ja. Gehe in den Style-Tab. Ich möchte es verkleinern. Also hier bleibe ich bei 60. Ich möchte es nicht der Zeilenhöhe zuordnen, also löschen wir das. Dieser Inhalt ist nicht angeordnet, richtig. Wählen wir unter „Ausrichtung “ die Option „Zentrierung“. Ja, jetzt ist unser Inhalt in der Mitte, B der übergeordnete Container unter Erweitert, hebt die Verknüpfung zum Rand auf und von oben gebe ich dem Rand 80. Ja. Ja, das sieht perfekt aus. Klicken Sie nun auf das Plus-Symbol und ziehen Sie einen Texteditor Gehen Sie unter Style-Tag, Ausrichtung auf Santo und Farbcode 434343 Typografie Helvetica. Ich werde es nicht zuschneiden, weil das okay ist. Okay. Also jetzt sieht das toll aus. Ich ziehe ein Video-Widget hierher. Von hier aus können Sie eine beliebige Quelle auswählen. Ich entscheide mich für YouTube. Ich füge den Link ein. Scrollen Sie nach unten, und wenn Sie möchten, dass Ihr Video automatisch abgespielt wird, aktivieren Sie es, spielen Sie es auf dem Handy ab, schnappen Sie können diese Änderungen nach Ihren Wünschen vornehmen, wie Sie jetzt unser Video sehen können Klicken Sie jetzt auf Veröffentlichen Okay, das ist jetzt erledigt. Klicken Sie nun auf das Plus-Symbol. Klicken Sie auf das Plus-Symbol. Ziehen wir eine Überschrift hierher, ändern den Titel, gehen wir zur Registerkarte Stil, Ausrichtung zur Mitte, Textfarbe von Typografie zu Schwarz, Albatica von Stärke zu 400 Aber das ist weniger, aber dieses Gewicht ist geringer, also lassen wir es Ja, das ist okay. Klicken Sie auf das Plus-Symbol und suchen Sie nach dem Lobo-Widget. Dieses Widget stammt also von unserem Elements Kid Plug In. Lassen Sie uns das aus dem Folienstil ziehen, wir wählen hier zu einfach, gehen wir unter Titel. Löschen Sie also diesen Kundennamen und wählen Sie Ihre Bilder aus. Lassen Sie uns die Logos aus dem Kundennamen auswählen, dieses entfernen und das Bild auswählen. Wählen Sie unter Titel drei den Namen des Kunden aus Auf diese Weise können Sie den gesamten Titel eingeben, den Sie haben. Jetzt werden alle Logos hier angezeigt. Gehen Sie jetzt zu den Einstellungen. Sie können den Wert für den Abstand von links nach rechts eingeben. Slide to show, wir werden fünf Logos haben, also werde ich hier den Wert bei fünf belassen. Slide to Scroll, wie oft Sie Ihre Logos scrollen möchten Sie können dies aus der automatischen Wiedergabe auswählen, Ihre Logos werden automatisch verschoben, also aktivieren Sie diese Option Ich aktiviere das, damit du die Geschwindigkeit wählen kannst. Ich möchte nicht, dass sich die Logos nicht mehr bewegen, wenn ich mit der Maus darüber fahre Deshalb deaktiviere ich das und aktiviere diese Schleife Okay, geh da unter Style. Hier ist die Höhe dieser Logos sehr groß. Von hier aus kannst du deine Größe wählen, aber ich belasse sie bei Null. Gehen Sie zur Option Logos. Ich möchte damit nichts anfangen. Lass uns rüber gehen. Hier möchte ich eine Farbe hinzufügen. Geben wir ihm eine Farbe. Ich will die Lichtfarbe. Das ist immer noch zu viel, also verringere ich die Transparenz. Ja, das ist okay, denke ich. Ich behalte diese Farbe, minimiere sie. Wir fahren mit der Maus drüber. Also ja, diese Lichtfarbe sieht gut aus. Veröffentlichen Sie das jetzt einfach und sehen wir uns unsere Vorschau an. Also sieh dir das an. Wie schön sehen die denn aus? 24. Dritter Contanier: Beginnen wir also mit unserem nächsten Abschnitt, klicken Sie auf das Plus-Symbol. Ich wähle diese zweispaltige Struktur. Gehen wir zunächst zur Registerkarte Stil, weil ich ihm von hier aus eine Hintergrundfarbe geben möchte , indem ich den Farbcode 4f4f5 schreibe Ich habe dem Hintergrund diese helle Farbe gegeben. Und wie Sie hier sehen können, gibt es zwischen diesem Container und diesen Logos kein Leerzeichen. Gehen wir also unter Advance und heben die Verknüpfung zum Rand auf. Von oben füge ich den Wert Hundert hinzu Ja, dieser Platz ist genug. Gehen Sie unter Layout und geben wir ihm eine Mindesthöhe. Wir werden es später schaffen , wenn wir mehr Platz wollen. Danach werden wir den Wert erhöhen. Wählen Sie nun diesen Container aus. Lassen Sie uns nun den Inhalt ziehen. Klicken Sie also auf das Plus-Symbol. Ziehen Sie von hier aus die Überschrift und ändern Sie den Titel. Gehen Sie unter Stilausrichtung nach links. Auch die Textfarbe, ich gebe sie der blauen Farbe. Also schreiben wir den Code 044f7 unter Typografie Größe 14. Und ich möchte hier ein Leerzeichen hinzufügen. Geben wir ihm einen Wert von 1,5 Pixeln. Ja, sieht gut aus. Ja, ich möchte eine weitere Überschrift hinzufügen. Wir können hier eine Sache tun. Einfach mit der rechten Maustaste darauf klicken und kopieren, rechten Maustaste klicken und einfügen. Also lass uns jetzt den Inhalt schreiben. Gehe unter Stiletausrichtung auf weniger, und ab hier, Familien, behalte ich die Schriftgröße 238 und die Schriftstärke bei 700 Das ist also erledigt. Lassen Sie uns nun ein Texteditor-Widget ziehen. Korrigieren wir es also von der Textfarbe zu Schwarz unter Typografie, Font Alvetica und Okay, das ist also erledigt. Jetzt möchte ich hier zwei Buttons hinzufügen. Also lass uns sie einfach kopieren, rechten Maustaste klicken und kopieren und dann mit der rechten Maustaste klicken und das hier einfügen. Aber zuerst möchte ich die Animationen hier löschen. Wählen Sie also diese Schaltfläche unter Advanced Motion Facts aus und belassen Sie sie auf Keine. Die Animation wird also von der Schaltfläche entfernt. Ich will diesen Text nicht. Also einfach klicken und das löschen. Ich möchte noch eine Schaltfläche, also klicken Sie mit der rechten Maustaste und duplizieren Sie diese. Also lass uns das entwerfen, je enger wir es machen. Hier, ich will es schreiben. Wählen Sie jetzt diese Taste aus, ändern Sie die Taste und erfahren Sie mehr Okay. Gehen Sie auf den Tab Stil. Ich möchte einige Änderungen vornehmen. Also im normalen Zustand, Text Kohle, ich möchte Schwarz, und beim Hintergrundtyp lasse ich es zu transparent. Und wenn ich mit der Maus darüber fahre, möchte ich die Textfarbe auf Weiß und die Farbe auf Schwarz setzen Wenn ich jetzt mit der Maus drüber fahre, okay, das sieht jetzt gut Jetzt sehen beide Muster gut aus. Also der linke Teil ist jetzt fertig. Klicken Sie auf das Plus-Symbol, fügen Sie das Bild-Widget hinzu und wählen Sie Ihr Bild aus. Klicken Sie auf Auswählen. Das ist also unser Bild. Hauptauflösung 24 unter Style-Tape, ich behalte den Wert von 200% Maximal 200 und Höhe 500 Objekte , die es abzudecken gilt. Jetzt ist dieser ganze Abschnitt fertig. Lassen Sie uns nun unseren nächsten Abschnitt erstellen. Ich möchte dir etwas sagen. Anstatt einen neuen Abschnitt zu erstellen, können wir einfach eine Sache tun. Was wir tun können, ist, mit der rechten Maustaste auf diesen Abschnitt zu klicken und ihn zu duplizieren. Okay. Wir werden nur die Änderungen vornehmen. Jetzt werden wir nur noch unseren Inhalt ändern und dieser Abschnitt wird erstellt. Zuallererst möchte ich diese Lücke nicht haben. Klicken Sie also mit der rechten Maustaste hier und gehen Sie von hier aus auf die Registerkarte Erweitert Löschen Sie den Rand von oben. Jetzt müssen wir nur noch den Tab „Gehe unter Stil“ ändern. Ich möchte den gesamten Text in Kleinschreibung haben, also wähle ich bei der Transformation Großbuchstaben aus Ich will hier nur einen Button, also lösche ich diesen Wir wollen nur einen Knopf, deshalb brauchen wir das nicht weiter. Also ziehe diesen Container einfach hinein und klicke mit der rechten Maustaste und lösche diesen Container. Okay, es gibt viel Platz. Also möchte ich diesen Raum verkleinern. Wählen wir also diesen Container aus. Ich behalte den Lückenwert bei fünf. Das sieht toll aus, aber hier ist viel Platz. Wählen Sie die Schaltfläche aus, gehen Registerkarte „ Erweitert“ und heben Sie die Verknüpfung zum Rand Und von hier aus geben wir ihm Spielraum -20. Also ich möchte diesen Inhalt in der Mitte haben. Also genau wie bei diesem Container, von hier aus den Inhalt in die Mitte. Ja, das ist jetzt nett, und jetzt ändere einfach dein Bild. Ich möchte hier dieses Bild hinzufügen, wählen Sie es aus. Ja. Jetzt ist der ganze Abschnitt fertig. Ich möchte diesen rechten Abschnitt auf der linken Seite haben und diesen linken Abschnitt möchte ich auf der rechten Seite haben. Also wie können wir das machen? Also nur dieser Container, gehe unter Advanced dab und hier ist eine Bestelloption Also wähle ihn einfach beim Start aus. Sehen Sie sich an, wie einfach und wie schnell wir diesen Abschnitt erstellen. Jetzt einfach klicken und veröffentlichen. Auf diese Weise können wir auch unseren nächsten Abschnitt erstellen. Also lass uns das machen. Unser nächster Abschnitt ähnelt diesem Abschnitt, denn ich möchte auch diese Überschrift, diese beiden Buttons und das Bild auf der rechten Seite und diesen Inhalt auf der linken Seite mögen. Also werden wir diesen Container einfach kopieren. Also klicken Sie mit der rechten Maustaste und kopieren Sie einfach mit der rechten Maustaste und fügen Sie es ein. Wie Sie jetzt sehen können, möchte ich diesen Raum zunächst nicht haben. Also lass es uns schnell machen. Wir müssen nur den Inhalt und das Bild ändern. Jetzt muss ich nichts mehr erklären, weil du es jetzt verstanden hast. A Damit dieser Bereich auch fertig ist, veröffentlichen Sie einfach Ihre Inhalte. Okay, wie Sie sehen können, haben wir jetzt unsere drei Abschnitte erstellt, aber ich habe vergessen, hier Animationen auf Bilder anzuwenden. Also lass uns das machen. Also habe ich dieses Bild unter Erweitert ausgewählt, scrolle von hier aus Bewegungseffekte nach unten. Lassen Sie uns hier die richtige Animation verwenden. Wählen wir dieses Bild aus. Unter Bewegungseffekte verwende ich hier die Option „Linke Animation einblenden und hier wähle ich „Einblenden“. Richtig. Ja. Veröffentlichen Sie es jetzt. 25. Vierter Containor: Machen wir jetzt unseren nächsten Abschnitt. Klicken Sie auf das Plus-Symbol. Wählen wir diese Struktur aus. Ich möchte eine Überschrift hinzufügen. Anstatt also ein neues Widget zu nehmen, klicken Sie einfach mit der rechten Maustaste und kopieren Sie es und fügen Sie es ein, ändern Sie den Inhalt. Klicken Sie mit der rechten Maustaste und kopieren Sie. Rechtsklick und Einfügen. Ändern Sie den Inhalt. Hier möchte ich auch eine Überschrift hinzufügen. Also einfach mit der rechten Maustaste klicken und hier kopieren, einfügen. Veröffentlichen Sie einfach Ihre Inhalte. Ich möchte hier ein Leerzeichen hinzufügen. Lassen Sie uns also im Voraus vorgehen. Wenn ich die Polsterung von oben gebe, behalten wir den Wert 60 bei Ja, 60 ist okay. Ich möchte auch hier den Platz verkleinern, also wähle ich diesen Container aus. Ab hier behalte ich den Tab-Wert Null. Ja, das ist jetzt. Ich möchte den gesamten Inhalt in Centern machen. Wählen Sie also diesen übergeordneten Container unter Layout aus. Von hier aus führe ich Zeileneinträge bis zur Mitte durch. Ja, jetzt veröffentliche es einfach. Lassen Sie uns unseren nächsten Abschnitt erstellen, klicken Sie auf das Plus-Symbol. Wenn Sie diese Struktur auswählen, klicken Sie auf das Plus-Symbol. Ich möchte hier ein Bild hinzufügen, also wähle dein Bild aus. Ich füge dieses Bild hier hinzu. Klicke auf Auswählen. Ja. Also dieses Bild ist hier. Das ist zu groß. Ich behalte die Bildauflösung bei. So groß, weil, wenn ich sie voll ausnutze, die Größe dieses Bildes stark vergrößert wird, also werde ich es zu groß halten. Ja, das ist okay. Geh auf den Stalltisch. Ich will die Ecke runder machen. Geben wir dem Grenzradius also einen Radius von 20 Pixeln. Ja. Jetzt sind die Ecken abgerundet. Lass es uns Box Shadow hier geben. Hier wird Box Shadow hinzugefügt. zehn verwischen. Klicken Sie auf Veröffentlichen Dieser Abschnitt ist ebenfalls fertig. Wählen Sie zu Ihrem übergeordneten Container aus. Ich möchte hier auch einen Hintergrund geben. Gehen Sie also unter Start. Lass uns den Code hier schreiben. Schreiben Sie den Code hier. Vier F vier, F drei. Hier habe ich vergessen, den Hintergrund in diesem Abschnitt hinzuzufügen. Also lass uns das auch hier hinzufügen. Jetzt sind beide Abschnitte fertig Wählen Sie diesen Container aus und gehen Sie unter Layout. Ab hier, Mindesthöhe, ich behalte es so. Beschränken wir es auf sechs, 50 begründete Inhalte, stellen es in die Mitte und schicken es. Jetzt sieht unser Bild perfekt aus. Klicken Sie auf Veröffentlichen. Gehen wir jetzt weiter. Klicken Sie auf das Plus-Symbol, Flexbox, wählen Sie dieses aus und gehen Sie zum Tag Advanced Ich möchte hier eine Marge angeben, also behalte ich den Wert 80. Lass uns das sehen. Ja, es ist okay. Der Margenwert beträgt 80 von oben. Okay, klicken Sie auf das Plus-Symbol. Also wähle ich Kopieren. Kopiere das und probiere den Inhalt. Hier möchte ich, dass der Text danach in die nächste Zeile kommt. Um das zu tun, verwende ich hier den Break Tab. Gehen Sie also mit der Stichausrichtung zur Mitte über. Ich möchte die Größe vergrößern. Geben wir es auf 48, und ich möchte hier die Zeilenhöhe angeben. Also lass es uns bei 50 belassen. Ja. Lassen Sie uns dieses Text-Widget duplizieren, rechten Maustaste klicken und kopieren, rechten Maustaste klicken und einfügen. Lassen Sie uns es in der Mitte bis unter styletp Alignment to Klicken Sie nun auf das Plus-Symbol und ziehen Sie einen Container aus der Richtung, ich schaffe ihn in die Reihe und vom Inhalt in die Mitte Klicken Sie auf das Plus-Symbol und ziehen einen neuen Container hierher und duplizieren Sie ihn einfach Ich möchte mit diesem Container etwas Styling machen Tippen Sie dazu auf Stil Ich werde es Batter Radius 30 geben. Ich entscheide mich vom Typ Ber für solide. Geben wir ihm ein Aquarell. Ich gebe leichtes Wasser. Okay? Jetzt möchte ich in diesem Container den Abschnitt mit den Testimonials hinzufügen Okay? Suchen wir also nach Testimonials, und ich werde diesen Testimonial-Bereich wählen Fügen Sie hier unseren Inhalt ein. Von hier aus wähle ich das Bild aus. Lass uns dieses Bild wählen. Den Namen ändern Sie können die Bildposition wählen, wenn Sie möchten, dass das Bild oben angezeigt wird, aber ich halte es zur Seite und Sie können die Ausrichtung so wählen. Ich lasse es links unter der Registerkarte „Stil“. Lassen Sie uns zunächst die Textfarbe in Schwarz ändern. Unter Typografie, Familie wähle ich Helvetica, Größe gebe ich 20, Gewicht ist Okay. Öffne diesen Bildbereich. Von hier aus können Sie die Bildauflösung wie folgt wählen, also belasse ich sie bei 70. Lassen Sie uns einen Randtyp wählen, der wie folgt einfarbig sein soll. Sie können die Rahmenbreite, die Wasserfarbe und den Randradius anpassen , alles, was Sie von hier aus tun können Und als nächstes kommt der Name. Wählen Sie die Schriftfarbe Schwarz. Typografie Aus diesem Grund entscheide ich mich für das Helvetica-Telefon. Geben wir ihm nun die Textfarben 888 und acht. Okay. Jetzt schließen das und sehen Sie, dass es wunderschön aussieht, aber ich möchte noch etwas tun, diesen Container auswählen, unter „Erweitert“ gehen und die Verknüpfung der Polsterung aufheben Von oben füge ich 20 Werte hinzu, unten 25, links 30. Von der linken Seite behalte ich zehn. Klicken Sie einfach mit der rechten Maustaste und duplizieren diesen Abschnitt und löschen Sie diesen. Diese beiden Abschnitte sind also fertig. Ändere einfach den Inhalt. Sie können alle Namen von hier aus ändern , alle Bezeichnungen. Wie alles, was du ändern kannst. Klicken Sie jetzt einfach mit der rechten Maustaste und duplizieren Sie den gesamten Abschnitt. Und hier werden wir einfach unseren Inhalt ändern. Diese vier Abschnitte sind also auch sehr einfach fertig. Veröffentlichen Sie jetzt diesen ganzen Abschnitt. Okay, jetzt sind alle Dinge erledigt. Lassen Sie uns nun die Animationen auf alle vier Abschnitte wie diesen Container unter Bewegungseffekte anwenden alle vier Abschnitte wie . Lassen Sie uns hier die Animation „Links einpassen“ verwenden. Für diesen Container wähle ich die Animation „Fit in right“. 26. Fünfter Container: Lassen Sie uns also einen neuen Abschnitt erstellen. Ich wähle diese Struktur von hier aus, berechtigter Kontakt, um Punkte in der Mitte zu zentrieren. Ich setze die Mindesthöhe auf 600 vom Hintergrundtyp auf „Fortgeschritten“. Ich möchte hier einen Hintergrund hinzufügen. Also habe ich dieses Bild ausgewählt. Lassen Sie uns von hier aus einige Einstellungen vornehmen. Anlage zum Scrollen, Wiederholung, keine Wiederholung, Displaygröße bis Titelseite. Klicken Sie nun auf das Plus-Symbol und ziehen Sie einen Container. Von der Richtung aus werden wir es zur Zeile und vom ausgerichteten Inhalt zur Mitte halten . Und wir werden die Mindesthöhe auf 350 belassen. Wir werden es später anpassen , wenn Sie mehr Platz benötigen. Klicken Sie auf das Plus-Symbol, ziehen Sie einen weiteren Container, klicken Sie mit der rechten Maustaste und duplizieren Sie ihn. Zuallererst wähle ich von hier aus diesen Container auf der linken Seite aus. Richtiger Inhalt, wir werden ihn in der Mitte belassen und die Elemente zentriert ausrichten. Ich wähle diesen Container unter Style Tare aus. Ich möchte hier eine Hintergrundfarbe hinzufügen, Schwarz, und geben wir ihr einen Rahmen Ich gebe es auf 50 Minimalwerte. Ja, jetzt sieht das toll aus. Lassen Sie uns nun diesen Container auf der linken Seite öffnen und auf das Plus-Symbol klicken. Lassen Sie uns das Überschriften-Widget mit der rechten Maustaste kopieren und kopieren, rechten Maustaste klicken und einfügen. Gehen Sie zur Registerkarte Stil. Lassen Sie uns zunächst den Text ändern , damit wir die Änderungen sehen können. Jetzt Ausrichtung, ich mache es nach links, und unter Inhalt möchte ich dieses Erlebniswort in der nächsten Zeile haben. Also verwende ich hier unseren Break Tab, gehe zum Tab Style. Hier bin ich von hier, ich werde die Größe auf 47 halten und wir 600. Klicken Sie nun auf das Plus-Symbol und ändern Sie den Text. Ich habe diesen Text hier unter Stiltypausrichtung von der Textfarbe nach links eingefügt , ich habe die Farbe auf 838, 38 von Typografie geändert , Familie, ich Ich behalte die gleiche Schrift bei 19, ich habe die Schriftgröße Ich möchte hier eine Schaltfläche hinzufügen, also werde ich diese Schaltfläche einfach kopieren, schreiben und kopieren. Lass es uns einfach hier einfügen. Zuallererst ändere ich den Titel Sprechen Sie uns heute unter dem Tab Stil an. Lassen Sie uns zunächst die Farbe auf Weiß umstellen , damit wir die Änderungen sehen können. Lassen Sie uns von hier aus auf 17 kommen. Und die Hintergrundfarbe, ich behalte sie bei Weiß. Okay, jetzt können wir die Textfarbe auf Schwarz setzen. Auf Oper möchte ich Weiß eine Wasserfarbe hinzufügen. Wenn ich drüber gehe, ist das wunderschön, oder? Veröffentlichen Sie jetzt Ihre Inhalte. Okay, lassen Sie uns jetzt einige Änderungen mit dieser Schaltfläche vornehmen. Bei der Auswahl dieses Containers. Von ausgerichtetem Inhalt aus schaffe ich es , Objekte in der Mitte zu zentrieren. Das sieht jetzt so aus. Ich will diesen Knopf an dieser Position haben. Also lass uns das machen. Ich wähle meinen übergeordneten Container aus und von hier aus den Einzelposten werde ich einfach entfernen, sodass diese Schaltfläche jetzt da ist. Jetzt gebe ich nur noch die Polsterung an, also trenne die Verknüpfung der Und von oben schaffe ich es auf 45. Lassen Sie uns minimieren. Ja, jetzt ist das okay. Okay, also werde ich es so machen. Jetzt möchte ich diesen Inhalt in der Mitte haben. Um das zu tun, wähle ich diesen Container aus. Ich werde die Mindesthöhe auf 55 belassen. Jetzt befindet sich unsere Überschrift in der Mitte, dieser Texteditor jedoch nicht Deshalb wähle ich dies unter Erweitert aus und löse die Verknüpfung der Polsterung Hier gebe ich die Polsterung von der linken Seite an. Also jetzt ist unser Texteditor gut. Minimiere den Balken und sag das. Nun, das ist großartig. Also jetzt veröffentliche das. Also dieser Abschnitt ist auch fertig. Öffne die Leiste und klicke auf Veröffentlichen. Jetzt werden wir unseren letzten Abschnitt machen. Also lass es uns schnell machen. Also von hier aus möchte ich hier zunächst die Marge hinzufügen. Das ist also unsere Bezahlung und unser Container Gehen Sie zu „Erweiterter Schritt“. Von hier aus möchte ich ein Leerzeichen von oben hinzufügen. Ich möchte einen Rand von oben angeben. Also habe ich ihm 100 gegeben. Klicken Sie auf das Plus-Symbol und ziehen Sie Ihr Überschriften-Widget Abonnieren Sie unsere monatlichen Newsletter. Um die neuesten Nachrichten zu erhalten. Wählen Sie auf der Registerkarte „Stil“ die Position zur Mitte und Textfarbe zu Schwarz. Typografie-Schriftart hier wählen Sie al tica Wenn ich es auf 25 schaffe, ist 25 okay Der Cplus kann einen Texteditor hierher ziehen. Lass uns den Text ändern. Kein Sam unter Stil Ausrichtung zur Mitte, Textfarbe von Typografie-Schrift Helvetica zu Schwarz, Gewicht normal und Größe 16. Okay. Klicken Sie nun auf das Plus-Symbol. Wir werden hier einen Container hinzufügen, Zeile auswählen, auf das Plus-Symbol klicken, den Container ziehen, mit der rechten Maustaste klicken und duplizieren, mit der rechten Maustaste klicken und duplizieren, rechten Maustaste klicken und duplizieren, rechten Maustaste klicken und duplizieren Also nehme ich hier vier Abschnitte. Also hier, lass uns diesen auswählen, unser Bild hier hinzufügen. Groß zu voll, wähle dein Bild. Gehen Sie unter Stilausrichtung nach links. Machen wir zwei draus. 22 ist okay. Also mit diesem Logo mit diesem Bild möchte ich hier Text zwei schreiben. Klicken Sie also auf das Plus-Symbol und fügen Sie hier Ihr Überschriften-Widget hinzu. Ändern Sie also zunächst den Titel. Schriftfarbe auf Schwarz unter Typografie-Fond-Größe 25. Jetzt möchte ich diese Überschrift mit diesem Bild haben. Wählen Sie also diesen Container aus und von hier aus, Richtung, wählen Sie ihn aus, um ihn zu reihen. Jetzt ist hier viel Platz. Zuallererst möchte ich hier eine Lücke als Null haben. Wählen Sie diese Überschrift jetzt unter Erweitert aus. Hier füge ich einen Rand hinzu, hebe die Verknüpfung zum Rand auf und gebe hier den Rand von der linken Seite 100 an und wähle nun dieses Bild Lassen Sie uns die Größe auf 26 erhöhen. Ja, minimiere das und ich finde das gut. Nun, in dieser Fortsetzung werden wir unseren Text hinzufügen. Klicken Sie auf das Plus-Symbol, eine Überschrift. Geben wir den Titer hier Firma unter Stil, Bandausrichtung nach links, Textfarbe nach Schwarz Familie Helvetica und Größe, ich gebe es bis 18. Anstatt immer wieder eine neue Überschrift zu erstellen, werden wir diese einfach duplizieren und unsere Änderungen vornehmen Also hier werde ich über uns schreiben, unter Stiltyp werde ich meinen Mantel einkleben. Ich mache es weniger weiß. Unter Typografie gebe ich hier die Größe 18 an, aber ab dem Gewicht werde ich es bei 400 belassen Ja. Ja, aber ich möchte es auf Größe 19 belassen. Jetzt werden wir das einfach kopieren, rechten Maustaste klicken und duplizieren, rechten Maustaste klicken und duplizieren. Ja. Ändere hier einfach die Preise für den Inhalt, Inhalt. Also jetzt ist dieser Abschnitt fertig. Jetzt klicken wir einfach mit der rechten Maustaste und duplizieren es, klicken mit der rechten Maustaste und duplizieren es. Also werde ich diese Container verzögern. Jetzt werde ich mich von hier aus beeilen , weil ich nur den Inhalt ändern werde. Geben wir den Wert hier auf 50. Geben wir ihm hier 50. Geben wir hier 50. Jetzt ist unsere gesamte Website Mt. Jetzt schauen wir uns die Vorschau an. Wie Sie sehen können, wie diese schönen Animationen funktionieren. Und wie unsere Bilder von links und rechts kommen. Ich 27. Kopf- und Fußzeile: Lass uns anfangen und unseren Header erstellen. Klicke darauf. Hier wähle ich die Struktur dieses Containers, und ich möchte, dass die Richtung 20% beträgt. Ich entscheide mich dafür , dass der Inhalt in der Mitte des Elements in der Mitte der Linie angeordnet wird. Klicken Sie auf das Plus-Symbol und fügen Sie Ihr Bild hinzu. Ich wähle dieses Logo aus. Unter Ausrichtung des Stylets nach links, W 227 plus Symbol Ich füge jetzt hier ein Widget hinzu, rechts deinen Titel, Solar One Unter Stil, Textfarbe zwei, Schwarz und Typografie, hier ist die Halitic-Größe, ich mache 222 Jetzt unter „Erweitert“ heben Sie die Verknüpfung zwischen Rand und Rand links Hey, jetzt ist das in Ordnung, also klicke auf öffentlich, minimiere es und sieh es dir Ja, das ist cool. Klicken Sie nun auf dieses elementare Logo und hier ist der Ausgang zu den Wordpress-Optionen Also klicken Sie mit der rechten Maustaste und ich öffne das in einem neuen Tab. Es wird zum Admin-Panel weitergeleitet. Jetzt werden wir unsere Menüs machen. Gehen Sie also vom Aussehen aus zu den Menüs. Geben Sie hier Ihren Menünamen ein. Sie können einen beliebigen Namen angeben, z. B. Ich schreibe das Hauptmenü, Standort anzeigen, das Hauptmenü auswählen und auf Menü erstellen klicken. Öffnen Sie jetzt diese benutzerdefinierten Links. Hier müssen Sie die URL für jeden Abschnitt einfügen. Wie viele Menüs Sie möchten, müssen Sie die URL hier einfügen. Also ich schreibe hier, nach Hause, Linktext. Lass uns hier nach Hause schreiben. Klicken Sie auf At to Menu about Link Text to about to menu. Klicken Sie auf Atoman. Jetzt können Sie hier Ihre Menüs sehen. Klicken Sie auf Menü speichern. Gehen wir nun zurück zum Elementor-Website-Schweißer. Laden Sie zunächst Ihre Site jetzt neu. Suchen Sie hier nach dem Widget-Navigationsmenü. Ziehe das. Hier ist ein Auswahlmenü von hier aus wählen Sie das Mittelmenü aus. Sehen Sie sich das Menü an, das wir jetzt erstellt haben und das hier gezeigt wird. Und hier ist eine horizontale Menüposition. Ich werde es nicht in der Mitte belassen. Wie Sie sehen können, befinden sich unsere Menüs jetzt in der Mitte. Von hier aus werden wir nichts ändern, gehen jetzt unter Stil und von hier aus können Sie die Menühöhe anpassen. Ich behalte es auf 50. Scrollen Sie nach unten. Wir werden nichts ändern. Öffnen Sie den Menüpunkt Style. Wenn Sie etwas ändern möchten, können Sie das tun. Okay? Hier ist ein Menüelement-Stil. Öffnen Sie also die Typografie und wählen Sie die Familie aus. Was ich hier mache, Sie können die Änderungen im Navigationsmenü sehen Okay? Also Vatica-Schrift Ich wähle Größe. Lassen wir es bei 70 belassen, damit es blau gefärbt werden soll. Also lass uns den Code schreiben. 044f von sieben, lass es uns blauer machen. Wenn ich jetzt mit der Maus drüber fahre, sehe ich, wie sich die Farbe ändert Unsere Menüs sind erstellt. Jetzt möchte ich hier zwei Buttons hinzufügen. Also lass uns diese Buttons einfach von hier aus duplizieren. Klicken Sie mit der rechten Maustaste und kopieren Sie es und fügen Sie es so ein, klicken Sie mit der rechten Maustaste und klicken Sie mit der rechten Maustaste und drücken Sie diese Schaltfläche hier. Lassen Sie uns zunächst den Inhalt hier ändern, melden Sie sich an und hier werde ich schreiben, um loszulegen, zu veröffentlichen und zu sehen. Es gibt kein Leerzeichen, also schauen wir uns unseren übergeordneten Container an. Hier sind die Lücken Null, also vergrößern wir sie. Ich schaffe es auf 20. Ja. Jetzt sieht der Weltraum auch toll aus. Unser Header ist erstellt. Und Sie können sehen, wie schön dieser Header aussieht. Jetzt möchte ich hier eine Sache machen. Wenn ich zum Beispiel auf diesen Dienst klicke, möchte ich, dass er zu mir diesen Abschnitt weiterleitet. Also lass uns das Ding machen. Um das zu tun, möchte ich dieses Zuhause hinzufügen aber zu diesem Abschnitt wechseln und dieses für Fortgeschrittene auswählen. Hier müssen wir die CSS-ID dafür schreiben. Von dieser CSS-ID musst du sie kopieren. Wir müssen diese CSS-ID von hier kopieren. Befehl S, kopiere diesen Hash nicht. Und füge ihn hier ein. Veröffentlichen Sie das. Nun, dieser Abschnitt „Über uns“, geben Sie diese VSS-ID hier ein, öffnen Sie sie und kopieren Sie Füge es hier ein. Jetzt Servicebereich. Veröffentlichen Sie das jetzt und sehen Sie sich die Vorschau an. Ja, zuerst siehst du, wie gut unsere Website aussieht. Also lasst uns sehen, dass diese Männer arbeiten. Wenn ich auf Home klicke. Ja, wenn ich auf „Über mich“ klicke, erreicht es mich in den entsprechenden Abschnitten. Wenn ich auf Bewertungen klicke, kannst du es sehen. Also lass uns zurückgehen. Klicken Sie auf dieses Plus-Symbol. Ich werde diesen Abschnitt wählen. Mindesthöhe, ich behalte sie bei 120 und Richtung zum Rudern. Richtiger Inhalt, beginnen Sie mit einer Zeile in der Mitte. Klicken Sie jetzt auf das Plus-Symbol und ich ziehe einen Container hierher Die Breite dieses Containers beträgt 70 und die Richtung der Zeile. Teilen Sie den Inhalt einfach in die Mitte auf. Klicken Sie auf das Plus-Symbol. Ziehen wir mit der Maus über die Überschrift. Hier werde ich meinen Text 2024 Solar One schreiben. Gehen Sie zur Registerkarte Si. Schreiben wir den Farbcode und öffnen die Typografie, wählen Familie, Weg zu 400 Buchstabenraum. Ich gebe es einem, dupliziere es und ändere einfach den Titel. Dupliziere es. Und genau hier möchte ich hier einige soziale Symbole hinzufügen. Klicken Sie also auf das Plus-Symbol, fügen Sie einen Container hinzu und ich behalte die Breite dieses Containers bei 30. Nur um Inhalte hinzuzufügen, um zu beginnen. Klicken Sie auf das Plus-Symbol, suchen Sie nach den Widget-Symbolen für soziale Netzwerke und ich wähle diese einfachen sozialen Symbole aus. Ich schaffe es dort nach rechts. Offizielle Farbe, ich wähle benutzerdefinierte Farbe und Primärfarbe, ich mache es transparent und Sekundärfarbe, ich mache es zu Schwarz. Ich hoffe, ihr habt Verständnis für die primäre Wandleuchte und ihre Größe Ich mache es auf 20 und einen Abstand von fünf Randradien, ich mache es auf 50. Öffnen Sie nun das Symbol neben der Primärfarbe Ich wähle die blaue Farbe und schreibe den Code dafür Und Sekundärfarbe, machen wir es zu Weiß. Und Hover-Animation, ich schaffe es zu Gleichaltrigen. Wenn ich jetzt mit der Maus über meine Symbole fahre, können Sie diesen schönen Effekt sehen Veröffentlichen Sie das jetzt und sehen wir uns unsere Vorschau an. Unsere gesamte Website ist jetzt fertig. Jetzt, wenn ich mit der Maus drüber fahre, wie schön die aussehen 28. Reaktionsfreudig: Jetzt werden wir unsere Website für Tablets responsiv machen. Dafür müssen wir also hier klicken. Wie Sie sehen können, sieht unsere Website auf einem Tablet-Porträt wie folgt aus. Also lass uns das entwerfen. Wir werden die Größe dieser Überschrift verkleinern. das zu tun, gehen Sie zum Tab „Stil“, und von hier aus werden wir den Wert auf 45 belassen. Also 45 ist okay. Also wähle jetzt unseren Button. Auf der Registerkarte Stil passen wir hier die Polsterung an. Wir werden es auf zehn von oben, 20 von rechts, zehn von unten und 20 von links schaffen 20 von rechts, zehn von unten und 20 von links Wir werden es so machen. Und zu dieser Überschrift, hier werden wir unser Break-Tag entfernen. Ja, das ist jetzt okay. In diesem Bild werden wir die Breite auf 75 und die maximale Breite auf 200% erhöhen Lassen Sie uns nun die Lücke hier vergrößern. Hier möchte ich es bei 20 belassen, Abstand von 20 Pixeln ist okay. Wir werden uns hier an unser Bild unter dem Style-Tag anpassen, lassen Sie uns seine Größe auf 100% erhöhen, aber 100%, ich denke, es ist größer, also machen wir es auf 90. Klicken Sie mit der rechten Maustaste und kopieren Sie den Stil und fügen Sie ihn ein. Lass uns das kleiner machen. Also hier werde ich es so groß halten, dass es erhalten bleibt. Ja. Also lass uns einfach kopieren und mit der rechten Maustaste klicken, einfügen, mit der rechten Maustaste klicken und es versuchen Das ist okay, ja. Das ist auch. Diese Logos sehen auch gut aus wie diese Überschrift unter der Registerkarte „Stil“ Lassen Sie uns die Größe auf 35 ändern. Ja. Andere Dinge sind okay. Ich werde sie nicht ändern. Ich werde die Bilder ändern. Hier werden wir seine Höhe auf 300 ändern. Okay, das ist okay. Und von hier aus wählst du das Cover. Hier gibt es eine Menge Platz, also werde ich ihn verkleinern, diesen auswählen und ihn auf 400 Minimierungen belassen und jetzt dieser Platz, ich glaube, es ist immer noch zu viel Platz, also werde ich ihn auf 350 belassen Schließ das und sieh, jetzt ist das okay Wählen Sie nun dieses Bild auf der Registerkarte Stil aus. Hier werde ich es auf 300 schaffen. Wählen Sie nun diese Überschrift auf der Registerkarte Stil aus. Ich werde es auf Größe 35 machen. Wählen Sie nun diesen Inhalt aus. Ich möchte dieses Bild in der Mitte haben. Richten Sie den Inhalt also zentriert aus, richten Sie die Elemente zentriert aus. Ja. Jetzt mach das in der Nähe. Und ja, das sieht gut aus. Ändere diese Überschrift, mach diese Überschrift auch klein, aber das ist zu groß. Ja. Hier werde ich die Größe 31 beibehalten und bei diesem Bild werde ich es auf 300 machen. Wählen Sie diesen Container und den ausgerichteten Inhalt zum Zentrieren aus. Schließen Sie jetzt die Leiste, aber es gibt viel Platz von oben und unten. Wählen Sie also diesen Container aus. Ab hier werde ich es auf 370 hoch halten. Sie können es nach Ihren Wünschen anpassen, aber ich gebe Ihnen nur eine Vorstellung davon, dass, was Sie ändern können, ich vergesse, Ihnen eine Sache zu sagen. Du kannst diese Dinge einfach nur dort ändern , wo dieses Zeichen steht. Wenn dieses Zeichen nicht angezeigt wird, bedeutet dies, dass Sie diese Eigenschaft auf einem Tablet oder Mobilgerät nicht ändern können . Ab hier werde ich die Größe auf 600, 600 belassen , ich denke, das ist zu viel. Also werde ich es bei fünf, 80 belassen. Ja, das ist gut. Ja, ich gebe, 40 sind okay. Dieser Abschnitt sieht hier großartig aus. Passen wir diese Überschrift an. 42 ist hier in Ordnung. Wählen Sie dies unter „Erweiterter Stern“ aus. Trennen Sie die Verbindung zur Polsterung. Ja, das ist okay. Und für diese Taste stellen wir einfach die Polsterung Ab hier bleibe ich also bei 15, 20, 15 und 20. Lassen Sie uns einfach die Größe dieses Containers verringern. Also hier, wenn ich bei 500 bleibe, ist das okay. Diese sehen im Tablet-Modus gut aus. Wir müssen das nicht ändern. Jetzt ist unser Tablet-Modus bereit. Jetzt werden wir uns an unsere Menüs anpassen. Zuallererst, wie Sie hier sehen können , werden unsere Menüs nicht angezeigt. Von hier aus, schnelle Aufschlüsselung, werden wir es auf dem Handy belassen. Jetzt werden unsere Menüs auf dem Tablet-Gerät angezeigt, auf Mobilgeräten jedoch nicht da wir unter der Registerkarte „Stil“ diese Option ausgewählt haben. Von hier aus werden wir die Größe verringern. das zu tun, wählen wir den Stil des Menüelements von hier aus. Lassen Sie uns die Größe beibehalten, wenn ich bei 12 bleibe. Unsere Menüs sind jetzt also in einer Reihe. Ich möchte diese Schaltflächen auf der rechten Seite haben Wählen Sie diesen übergeordneten Container von hier aus, Richtung, wählen Sie die Zeile aus. Aber jetzt, weißt du, werden unsere Menüs in zwei Zeilen aus der Typografie angezeigt. Wenn ich es schaffe, lass uns die Größe auf 11 einstellen. Wählen Sie diese Schaltflächen auf der Registerkarte Stil aus. Ich werde es auf 15 von rechts auf 25 belassen , hier auf 15 und von rechts auf 25. Also ja, das sieht jetzt gut aus, klicken Sie mit der rechten Maustaste und kopieren Sie. Rechtsklick und Stückstil. Ja. Ja, die sehen gut aus. Jetzt schicken wir nur diese eine Sache. also zunächst Wählen Sie also zunächst unter Erweitert den Rand von hier aus, wenn ich den Rand von links auf 100 setze Aber das berührt das immer noch. Also lass uns das einfach so machen. Das sieht jetzt gut aus. Ich denke, es gibt immer noch zwei Leerzeichen, also werde ich es von oben belassen, ich werde zehn geben, und von unten werde ich es auf zehn belassen. Also das Gleiche, ich werde diesen Stil hier einfügen und jetzt veröffentlichen. Lassen Sie uns jetzt sehen, dass unser Tablet-Modus bereit ist. Alle Dinge sehen sehr gut aus. Gehen wir nun zum Tab Mobil. Um das hier zu sehen, klicken Sie hier. Sehen Sie hier, wie es auf dem Handy aussieht. Menüs, wir werden sie danach erstellen. Wir werden nur die Größe der Überschriften verringern. Dieses Bild sieht okay aus. Hier werde ich die Größe auf 50 belassen. Ja. Genau richtig, klicken Sie auf Kopieren und Paytyle Rechtsklick und Paytyle. Veröffentlichen Sie Ihre Inhalte. Ja. Die sehen hier gut aus. Wählen Sie diese Überschrift aus, stellen Sie sie auf die Größe 235 ein und wählen Sie diese Überschrift auf der Registerkarte Stil aus. Ich werde die Größe auf 20 belassen und diese Logos auswählen. Und aus den geöffneten Einstellungen wähle ich hier Folien aus, wähle ich hier Folien die angezeigt werden sollen. Hier setze ich den Wert drei. Ja, jetzt werden hier drei Logos ausgewählt. Okay, die sehen also gut aus. Machen Sie es jetzt kleiner, 30, wählen Sie das aus. Wählen Sie auf der Registerkarte Stil den Wert 215 aus. Lassen Sie uns die Größe der Schaltfläche verkleinern. Trennen Sie die Verknüpfung und setzen Sie sie auf 15, 20, 15 und hier 20. Ja, Rechtsklick, Kopieren, Rechtsklick und Bezahlstil Ja, die Bilder sehen gut aus. Ich möchte diesen Text auf der Oberseite und dieses Bild auf der Unterseite. Wählen Sie also dieses Bild hier unter „Erweitert“ aus, um die Bestellung zu beenden. Ja. Ja, das ist okay. Wählen Sie die Überschrift aus und stellen Sie die Größe auf 30 ein. Ja, wähle dieses Style-Tag aus. Es hat eine Größe von bis 15. Fügen Sie einfach den Stil der Schaltfläche hier ein, rechts Clay, Copy, C Tube Button, klicken Sie mit der rechten Maustaste und fügen Sie den Stil ein. Ich denke, diese Schaltflächen sind diesem Text sehr ähnlich. Also lass uns das vorschlagen. Wählen Sie den Container unter Erweitert aus. Ich gebe hier den Wert zehn an, wähle den Container unter Layout aus. Ich werde es auf zehn schaffen. Hier werde ich die Größe auf 30 belassen. Wählen Sie diese 15 aus. Jetzt möchte ich zunächst die Größe des Containers verringern. Lass es uns auf 270 reduzieren. Wählen Sie das jetzt aus. Hier werde ich 29 behalten, aber da ist zu viel Platz, also will ich das nicht. Stellen Sie also auch die Zeilenhöhe ein, also machen wir es auf 1,3 Uhr morgens. Diese Abschnitte sehen gut aus, aber wenn Sie die Größe ändern möchten, können Sie das tun. Also lass uns das anpassen. Ich möchte es kleiner machen. Ich möchte diesen Text in zwei Zeilen haben. Ja, 26 ist okay. Lassen Sie uns die Zeilenhöhe auf 1,5 belassen und auch hier die Größe verringern. 15. Ja. Ja, ich will diesen Knopf hier haben. Wählen wir dies also unter Erweitert aus, um die Verknüpfung der Polsterung aufzuheben. Wählen Sie nun diesen Container unter Erweitertes Trennen aus und heben Sie die Randverknüpfung auf Geben wir zunächst den Rand von den oberen Seiten und die Zeilenelemente an Wählen wir dies hier unter Stil t aus, behalten wir die Größe bei 20 und verringern wir den Rand von der oberen Seite aus. Wählen Sie also diesen Container unter Erweitert aus und heben Sie die Randverknüpfung auf, und von oben gebe ich ihm den Wert 50. Jetzt will ich all diese Dinge in der Mitte haben. Platzieren Sie diesen Container, richten Sie den Inhalt so aus, dass er mittig ausgerichtet ist, ein Einzelpostenzentrum, ein Einzelpostenzentrum Wählen Sie diesen Container aus, wobei die Einzelposten zentriert werden sollen. Also ja. Jetzt sind all diese Dinge in der Mitte Wählen Sie diese Überschrift unter Style Tech aus, Zeile in der Mitte. Ja, also all diese Dinge stehen im Mittelpunkt. Wählen Sie jetzt das aus und von hier aus Zeilenelemente in der Mitte. Veröffentlichen Sie jetzt Ihre Inhalte. Lassen Sie uns jetzt unser Menü gestalten. Also öffne die Bar. Zuallererst möchte ich diese Schaltflächen nicht auf Mobilgeräten anzeigen. Wählen Sie also von hier aus die Schaltfläche unter Erweitert aus Hier ist eine ansprechende Schaltfläche. Hier können Sie das Portrait „ Auf dem Handy verstecken“ sehen. Also werde ich diese Option aktivieren. Ich werde das Gleiche mit diesem Knopf machen. Jetzt wird diese Schaltfläche auf dem Mobilgerät nicht angezeigt. Wenn Sie diese Schaltflächen auf Tablets nicht anzeigen möchten, können Sie dies von hier aus tun. Dies sind Dinge, die Sie nach Ihren Wünschen anpassen können. Jetzt dieses Logo und dieser Button, ich will es in einer Reihe haben. Also lass uns das machen. Wählen wir dort dieses Bild unter Stil aus. Ich möchte Größe 225 haben, aber 25 sieht sehr groß aus, also mache ich es 223. Und zu dieser Überschrift zuerst die Verknüpfung mit dem Rand Von der linken Seite möchte ich den Wert auf -100 setzen. Wenn ich es auf -100 gebe, ist das immer noch so. Lassen Sie uns das jetzt verringern. Also gebe ich den Rand von der linken Seite minus 129 an. Nun wähle diesen Container von hier aus, richte den Inhalt aus, lass uns ihn verkleinern, also auf diese Weise, wähle diesen Container von hier aus, ich mache ihn auf 50 Pixel. Also, jetzt sind sie in einer Zeile, minimiere den Balken. Okay, die sehen auf Mobilgeräten großartig aus. Wenn Sie das öffnen, können Sie sehen, wie unsere Menüs aussehen. Wenn Sie also auf einen Abschnitt klicken, werden Sie zu diesem Abschnitt weitergeleitet. So können Sie sehen, wie schön diese aussehen. Unsere Website ist jetzt fertig, also werden wir uns im nächsten Video treffen. Ich hoffe, dir hat der heutige Kurs gefallen. 29. Erste Container-Zwischen-Website: Hallo, Leute. Fangen wir also an, unsere zweite Website zu erstellen. Zuallererst werden wir unser Theme installieren. Auf der Suche nach einem zusätzlichen Thema. Klicken Sie auf Installieren. Vergiss nicht , das Theme zu aktivieren. Lösche das jetzt. Gehen Sie nun in die Plugins und klicken Sie auf Neues Plugin hinzufügen. Unser erstes Plugin wird Element sein, klicken Sie auf Jetzt installieren. Vergiss nicht, das Plugin zu aktivieren. Klicken Sie auf Neues Plugin hinzufügen. Jetzt werden wir Elements, das Plugin, installieren. Klicken Sie auf Jetzt installieren, klicken Sie auf Aktivieren. Um diese Website zu erstellen, benötigen wir die Elementor Pro-Version da wir unsere benutzerdefinierte CSS-Option verwenden werden Um diese Option nutzen zu können, sollten wir Elementor Pro haben Also lass uns das machen. Klicken Sie auf Neues Plugin hinzufügen. Hier wird das Upload-Plugin angezeigt. Klicken Sie darauf und wählen Sie Pile auswählen. Suchen Sie hier nach Elementor Pro. Klicken Sie darauf, klicken Sie auf Hochladen, klicken Sie auf Jetzt installieren Also jetzt unser Plugin. Jetzt ist unser Plugin installiert. Klicke auf Plugin aktivieren. Okay, das waren also unsere Plugins. Jetzt werden wir unsere Seiten erstellen. Löschen Sie zunächst diese beiden Seiten. Gehen Sie nun zu Neue Seite hinzufügen, brechen Sie dieses Pop-up ab, geben Sie die Titelnamen an die Startseite und klicken Sie auf Veröffentlichen. Klicken Sie nun auf Addit with Elementor. Brechen Sie dieses Popup ab. Lassen Sie uns jetzt mit der Erstellung unserer Website beginnen. Das ist also unsere zweispaltige Struktur. Jetzt wähle ich diesen Abschnitt auf der linken Seite aus. Klicken Sie auf das Plus-Symbol. Hier ziehe ich mein Überschriften-Widget. Klicken Sie unter Stid Now auf das Plus-Symbol ziehen Sie eine weitere Überschrift unter diese Überschrift Auf der Registerkarte Stil. Oh, tut mir leid, ich habe vergessen, den Hintergrund hier hinzuzufügen. Wenn Sie dieses Bild auswählen, klicken Sie auf „Unter Layout auswählen“. Stellen wir zunächst Mindesthöhe auf 650 auf der Registerkarte Stil, Position zur Mitte und Scrollen im Anhang ein. Und bei der Displaygröße wählen wir das Cover aus. Klicken Sie nun auf Familien-Popins veröffentlichen Größe 250, Gewicht 700, klicken Sie auf das Plus-Symbol und ziehen Sie den Texteditor Größe 15, CLConPlus-Symbol, Ziehen einer Schaltfläche Family Pop bedeutet. In normalem Zustand, Schriftfarbe weiß, ich schreibe Farbcode. Grenzradius 50. Polsterung 20. Jetzt entferne ich die Verknüpfung und von links und rechts schaffe ich es unter Inhalt auf 30. Hier siehst du die Icon-Option. Von hier aus können Sie ein VIGI hochladen und daraus beliebiges Symbol aus der Bibliothek auswählen Ich suche nach dem Einfügen eines Bitcoin-Symbols. Von hier aus können Sie die Position des Symbols auf zehn einstellen . Klicken Sie auf Veröffentlichen. Ich möchte, dass der gesamte Inhalt in der Mitte steht. zu tun, wählen Sie diesen Container von ausgerichtetem Inhalt zur Mitte aus. Hier ist viel Platz zwischen der Schaltfläche und diesem Text. Lassen Sie uns einfach da sein, wählen Sie diese Schaltfläche aus und gehen Sie zur Registerkarte Erweitert. Ab hier gebe ich den Rand von oben an. Ich schaffe es auf 20. Unser linkes Set ist fertig. Lassen Sie uns nun hierher springen und auf das Plus-Symbol klicken. Ziehen Sie das Bild-Widget. Wählen Sie das Bild aus, wählen Sie dieses klicken Sie auf Vollständige Bildauflösung auswählen. Klicken Sie nun auf das Plus-Symbol und ziehen Sie das Bild-Widget an diese Position. Wähle dein Bild. Ich habe das ausgewählt. Klicken Sie auf Vollständige Bildauflösung auswählen. Gehen Sie zur Registerkarte Erweitert. Jetzt zur Anpassung, ich möchte dieses Bild auf diesem Bild haben. Du weißt schon, also wie man das von der Position zum Absoluten macht. Und von hier aus bin ich vertikal ausgerichtet gebe den Wert auf 105. Ich möchte, dass dieses Bild auf die Website verschoben wird. Ja, minus zehn ist okay. Jetzt klicken Sie mit der rechten Maustaste und duplizieren Sie dieses Bild. Ich habe dieses ausgewählt und auf Kosten geklickt. Hier werde ich den Wert ändern. Eine vertikale Ausrichtung. Ich wähle unten. Ich habe den Wert 150 angegeben. Ja, das ist nett. Veröffentlichen Sie jetzt Ihren Inhalt, klicken Sie mit der rechten Maustaste und duplizieren ihn noch einmal, ändern Sie das Bild. Das Symbol wählen Sie unter Erweiterte horizontale Ausrichtung nach rechts aus. Ändern Sie diesen Wert. Geben wir es auf 80, erhöhen es weiter, minimieren wir den Balken. Und das kannst du sehen. Ich möchte den Abstand zwischen diesen beiden Abschnitten vergrößern. Also lass uns das anpassen. Öffnen Sie den übergeordneten Container. Lücken, ich schaffe es von beiden Seiten auf 60. Also minimiere es. Wie Sie jetzt sehen können, hat sich diese Lücke vergrößert. Diese Bilder werden jedoch häufiger auf die Website verschoben. Lassen Sie uns also vorschlagen, dass ich hier mache. Wenn ich es auf 50 schaffe, ist das jetzt, es ist wie dieses Bild, es auf -40 zu bringen ist das jetzt, es ist wie dieses Bild, es auf -40 zu Ja. Also jetzt sind die gut. Klicken Sie auf Veröffentlichen. Jetzt verwende ich den Code hier, wähle diesen Container von hier aus und öffne die benutzerdefinierte CSS-Option. Lassen Sie uns den benutzerdefinierten CSS-Code hier einfügen. Wie Sie sehen können, als ich meinen Code eingefügt habe, ist dieses Bild jetzt verschoben Ich werde diesen Code auch in dieses Bild einfügen Sie können also sehen, wie schön das jetzt aussieht, wie dieses Bild Unter benutzerdefiniertem CSS-Code. Veröffentlichen Sie jetzt Ihren Inhalt, minimieren Sie ihn. Wie Sie sehen können, wie schön diese Animationen funktionieren. Lassen Sie uns auch die Animation in diesem Abschnitt hinzufügen. Also gebe ich auf der Registerkarte „Erweitert“ unter Bewegungseffekte die Animation so an, dass sie links eingeblendet wird, genauso wie hier, genauso mit dieser Überschrift, genauso mit diesem Texteditor und auch mit der Schaltfläche Klicken Sie nun auf Veröffentlichen und um die Vorschau zu sehen, klicken Sie darauf, wie schön und einfach wir unseren ersten Abschnitt gestaltet haben. Jetzt geh zurück 30. Zweiter Behälter: Lassen Sie uns jetzt unseren zweiten Abschnitt beginnen. Also nehme ich diese zweispaltige Struktur. Zuerst gebe ich eine Hintergrundfarbe an. Ich schreibe den Farbcode 060531. Ich habe dieser dunklen Hintergrundfarbe gegeben. Also lass uns einfach diese Farbe nehmen. Ich schreibe hier, dunkelblau. Klicken Sie auf Erstellen. Klicken Sie nun auf dieses Plus-Symbol fügen Sie hier ein Bild hinzu. Wähle dein Bild. Ich nehme dieses, klicke auf Slack. Stellen Sie die volle Bildauflösung auf der Registerkarte Stil ein. Das Bild sieht so groß aus, dass ich es 85% wert mache. Klicken Sie auf das Plus-Symbol und ziehen Sie das Überschriften-Widget Auf der Registerkarte Stil. Farbcode eins, E sechs, E, F, Typografie, Familiengröße 218, Gewicht 500, Symbol Tlicon plus Anstatt ein Widget zu ziehen, kopieren wir einfach den Text Rechtsklick und Einfügen. Ich möchte diese Animation nicht hier haben, also lassen Sie uns sie einfach entfernen. Okay. Gehen Sie jetzt zurück und fügen Sie den Titel unter das Style-Tag ein. Lassen Sie uns die Schriftgröße weiter verringern. 39 ist also okay. Acht, um Ihre Inhalte zu veröffentlichen, klicken Sie auf das Plus-Symbol. Lassen Sie uns einfach in diesen Text kopieren und ihn hier einfügen, um die Animation zu entfernen. Klicken Sie nun auf das Plus-Symbol, suchen Sie nach der Symbolliste Witt und sehen Sie sich das Sie werden unseren Text hier einfügen. Ich werde diesen Artikel einfach verzieren. Also lösche ich diesen ihn zu löschen, können Sie einfach auf die Schaltfläche Abbrechen klicken. Und wenn du duplizieren möchtest, kannst du einfach darauf klicken um zu sehen, ob du jetzt noch mehr hinzufügen möchtest, also klicke einfach darauf. Lassen Sie uns das zunächst einfach duplizieren, weil ich Ihnen etwas zeigen möchte. Also geh unter Stilett. Hier ist ein Leerzeichen dazwischen. Schau einfach, wann ich den Wert eingebe. Also wird hier der Abstand vergrößert und die Ausrichtung nach links unter den Symbolen, Farbe, die ich wähle, ich schreibe den Farbcode so, dass er AFF acht sagt. Also die Farbe des Icons hat sich geändert, Größe ich mache 15, Lücke, fünf, horizontale Ausrichtung. Auf diese Weise können Sie sehen, dass sich die Position des Symbols ändert. Also mache ich die vertikale Ausrichtung der Mitte unter der Textoption zu Weiß. Gehen Sie jetzt zurück und von hier aus öffnen Sie das, und ich werde einfach meinen Text ändern, diesen öffnen und den Text hier einfügen. Kopieren Sie jetzt einfach diese Schaltfläche, klicken Sie mit der rechten Maustaste und fügen Sie sie ein. Die Animation wird entfernt. Ich gebe Rand acht von oben an. Minimiere jetzt den Balken, und dieser Abschnitt ist auch fertig, aber wie du siehst, ist hier viel Platz, also will ich das nicht. Lassen Sie uns das einfach verringern. Wählen Sie diesen Container aus. Ich werde den Wert auf zehn belassen. Minimiere es. Und ja, jetzt ist der Platz kleiner geworden, aber hier ist immer noch viel Platz. Um das zu verringern, wähle dieses Widget unter Advancab aus und entferne den Rand, und von der unteren Seite mache ich es auf -20 Minimiere diesen Balken und C. Jetzt ist dieser Abstand ausreichend Veröffentlichen Sie jetzt Ihre Inhalte. Wählen Sie nun diesen Container auf der Registerkarte Erweitert aus. Hier gebe ich die Animation so an, dass sie nach links passt. Nein, ich gebe es so , dass es nach rechts passt. Und zu diesem Abschnitt gebe ich links ein, veröffentliche deine Inhalte. Dieser Abschnitt ist jetzt also fertig. Lassen Sie uns zum dritten Abschnitt springen. 31. Dritter Container: C-Plus-Symbol. Ich wähle diese erste Struktur unter Stil und dann Hintergrundfarbe. Wir haben diese Farbe bereits gespeichert. Hier ist es in dunkelblau. Jetzt einfach mit der rechten Maustaste klicken und kopieren. Rechtsklick und Einfügen. unter Ausrichtung der Registerkarte Stil Mitte Wählen Sie unter Ausrichtung der Registerkarte Stil zunächst den übergeordneten Container in der aus. Lassen Sie uns von hier aus die Mindesthöhe so beibehalten. Ändern Sie den Inhalt, klicken Sie mit der rechten Maustaste und kopieren Sie ihn. Klicken Sie mit der rechten Maustaste und fügen Sie es unter Stil TV-Ausrichtung zur Mitte ein, rechten Maustaste und kopieren Sie, klicken Sie mit der rechten Maustaste auf Einfügen. Tippen Sie unter Stil zunächst Ich möchte diesen Text in zwei Zeilen haben. Also verwende ich das Break-Tag nach Inward. Stellen Sie sicher, dass Sie das Beak-Tag im Texturbereich verwenden Beak-Tag im Texturbereich wenn Sie hier das Break-Tag verwenden Das Break-Ta wird hier also als Text unter „ Ausrichtung zur Mitte des Style-Tags“ angezeigt Text unter „ Ausrichtung zur Mitte des Style-Tags Klicken Sie auf das Com-Plus-Symbol ziehen Sie einen Container aus der gewünschten Richtung in eine Zeile. Klicken Sie auf das Symbol Com plus und ziehen Sie einen weiteren Container. Rechtsklick und duplizieren, Rechtsklick und duplizieren. Gerichteter Inhalt zur Mitte hin. Suchen Sie nach dem Symbolfeld. Dieses Widget stammt von Elements Kit Plugging. Von hier aus ist der Icon-Typ. Sie können hier bis keines wählen, und von hier aus können Sie das Symbol wählen. Ich wähle hier ein Bild aus. Jetzt können wir also das Bild wählen. Lassen Sie uns dieses Bild auswählen, den Titel ändern, die Beschreibung ändern. Gehen Sie also auf die Registerkarte Stil und geben Sie im Hintergrund 0d15 Also wähle ich diese Farbe. Rahmenbreite, ich mache es zur Standardeinstellung. Ich will keinen Rand. Grenzradius, ich schaffe es auf zehn. Unter Inhalt sind hier die Inhaltsfarben. So weiß. Und bei Over will ich auch, dass es weiß wird. Und anhand der Beschreibung von Poppins Typografie geben wir einfach B eins, B eins, B eins ihre Farbe B eins Von hier, von der Typografie bis zur Größe der Popins, mache ich 240. Und von Symbol, Symbol, Hintergrundfarbe, was den Farbcode fd86, b603 Die Hintergrundfarbe des Symbols ist gelb und der Randtyp ist durchgehend, Rahmenbreite 22. Ich möchte keine Rahmenfarbe. Und den Grenzradius mache ich auf 50. Jetzt bei Hover, Hintergrundfarbe, ich mache es beim Hover zu weiß Ich möchte keine Hover-Animation oder irgendetwas anderes. Nun, hier ist eine Sache mit dem Weltraum. Wenn Sie den Wert von der unteren Seite trennen, gebe ich 25 und padding 25 von allen Und jetzt können Sie sehen, wie schön das Ganze abgerundet ist, und hier ist eine ausreichende Polsterung Ich möchte von hier aus nichts ändern. Öffnen Sie jetzt diese Option für die Hintergrundüberlagerung. Aktivieren Sie von hier aus das Overlay. Wenn Sie die Bildüberlagerung aktivieren, können Sie das Bild unter dem Hover-Hintergrundtyp hinzufügen Wie Sie nun sehen können, funktioniert unsere Hover-Animation von links, wenn ich mit der Maus darüber funktioniert unsere Hover-Animation weil hier links ausgewählt ist, aber ich mache es von aber ich mache es Wenn ich jetzt mit der Maus auf Jetzt zeige, veröffentliche das. Was wir nun tun werden, rechten Maustaste klicken und duplizieren, rechten Maustaste klicken und duplizieren und jetzt diese Container löschen, rechten Maustaste klicken und den ganzen Abschnitt duplizieren , weil ich die sechs Boxen hier haben möchte Veröffentlichen Sie also Ihre Inhalte. Ich möchte diese gelbe Hintergrundfarbe auf der ganzen Karte haben. Also lass uns das einfach ändern. Ich ändere einfach die Überschrift. 32. Vierter Behälter: Fangen wir also mit unserem nächsten Abschnitt an. Ich nehme diese Struktur Mindesthöhe von 750 unter der Registerkarte „Stil“ wähle Dunkelblau. Scrollen Sie nach unten, klicken Sie mit der rechten Maustaste und kopieren Sie, klicken Sie mit der rechten Maustaste und fügen Sie es ein, und wechseln Sie zu straffer Scrollen Sie nach unten, klicken Sie mit der rechten Maustaste und kopieren Sie. Rechtsklick und Einfügen. Ändern Sie den Titel. Klicken Sie mit der rechten Maustaste und kopieren Sie. Rechtsklick und Einfügen. Ab hier nach dem Banking-Wort werde ich Break Tag verwenden. Wie Sie sehen können, ist hier viel Platz. Ich möchte das nicht, wählen Sie Ihren übergeordneten Container unter Layout aus. Ich mache die Lücke fünf. Ja, jetzt ist es okay. Klicken Sie nun auf das Plus-Symbol, ziehen Sie einen Container und die Richtung zur Zeile Klicken Sie nun auf das Plus-Symbol. Und hier ziehe ich einen weiteren Container und klicke mit der rechten Maustaste und dupliziere ihn in diesen Container. Klicken Sie auf das O-Plus-Symbol und ziehen Sie einen weiteren Container und die Richtung in die Zeile. Ich weiß, dass es viele Container gibt. Klicken Sie auf das O-Plus-Symbol, ziehen Sie einen weiteren Container, klicken Sie mit der rechten Maustaste und duplizieren Sie ihn. Wählen Sie nun diesen Container auf der linken Seite aus. Gehe unter Stil. Hier gebe ich die Hintergrundfarbe an, schreibe den Farbcode Null und Eins. Jetzt klicke ich auf das CO-Plus-Symbol, ziehe eine Überschrift, ändere den Titel und den Wechselkurs Ausrichtung links, Farbe weiß. Family Popons Größe 18, Gewicht 500, klicken Sie auf das CO-Plus-Symbol und suchen Sie nach der Überschrift Ich werde diese Überschrift wählen: geschweifte Klammern, ein ETH. Wenn du diese blaue Linie sehen kannst. Ich möchte nicht, dass das die Separator-Option öffnet und von hier aus das deaktiviert. Gehen Sie zur Registerkarte Stil. Öffnen Sie die Titeloption für den Titel. Ich werde die Farbe für Overcolor White wählen. Öffnen Sie die Typografie, Family Popins, Größe 15, Gewicht 400 Schließen Sie das nun, öffnen Sie den Fokustitel für Farbe und schreiben Sie den Farbcode Überfarbe weiß. Typografie, Pop-ins für Familien, Größe 15, Gewicht 400 Ich gebe hier die Polsterung an, also wähle diesen Container auf der Registerkarte Erweitert, unverknüpfte Innenabstände oben 25, rechts und unten 14, und unten 14, Jetzt sieht unser Text also gut aus. Jetzt einfach mit der rechten Maustaste klicken und duplizieren. Lösche diesen Container. Wählen Sie nun den gesamten Abschnitt aus, rechten Maustaste und duplizieren Sie, klicken rechten Maustaste und duplizieren Sie. Veröffentlichen Sie zuerst Ihre Inhalte. Jetzt werde ich nur noch den Text ändern. Jetzt werde ich dir nichts erklären. Ich werde einfach die Änderungen vornehmen. Du kannst das oder andere Dinge sehen. Jetzt ist es wie bei Discontainer, unter dem Style-Tag von hier aus, Rand zehn, unter erweiterte Bewegungseffekte Ich wähle „Animation links einblenden“, „ Rechtsklick und Kopieren“, Rechtsklick und Einfügen“, „ Rechtsklick“ und „Stil einfügen “. Gehen Sie zu Advanced Tf und öffnen Sie die Bewegungseffekte Hier wähle ich die rechte Animation einblenden, gehe zu Style TV, öffne die Rahmenoption und dann Border Dus Ten. Klicken Sie jetzt mit der rechten Maustaste und kopieren Sie, klicken Sie mit der rechten Maustaste und fügen Sie den Stil ein. Klicken Sie mit der rechten Maustaste und fügen Sie den Stil ein. Wählen Sie nun diesen Container unter Lücke aus, ich mache hier Null, und jetzt können Sie sehen, dass der Speicherplatz verringert ist Unser linker Seitenteil ist fertig. Jetzt werden wir unseren rechten Seitenteil machen. Kopieren Sie in diese Überschrift und klicken Sie mit der rechten Maustaste und fügen Ändern Sie zuerst den Titel. Gehen Sie nun unter Stil, öffnen Sie die Typografie, Größe 25, Gewicht 500, klicken Sie nun auf das Plus-Symbol und suchen Sie nach Zähler Hier werden wir den Lementkit-Countdown-Timer verwenden, und Sie können sehen, dass es hier viel Design gibt Also werde ich das wählen. Damit du sehen kannst, wie es aussieht. Scrollen Sie nun nach unten und öffnen Sie die Timer-Einstellungen. Wir werden das Fälligkeitsdatum des Countdowns ändern. Von hier aus können Sie benutzerdefinierte Labels auswählen, und bei der nächsten Option können Sie die Option „Aktion ablaufen“ auswählen, alles, was Sie ändern können Gehen Sie jetzt zur Registerkarte Stil. Und ab hier werde ich die Höhe auf 175 halten. Öffnen Sie jetzt die Option Tage. Öffnen Sie die Typografie, Familien-Popins, Stärke 500, von der Etikettenfarbe Schwarz, öffnen Sie die Typografie, Familien-Popins, Stärke 500 und den Hintergrundtyp Weiß von Randtyp zu Brerc oder schwarz. Scrollen Sie im Allgemeinen nach unten, vom Randtyp Sie können also diesen leichten Rand sehen. Öffnen Sie nun die Option Os unter Typografie, Familien-Pop-Ins, Stärke 500, unter Etikett, öffnen Sie die Typografie, Familien-Popins, Stärke 500, Randtyp auf Vollton, Rahmenfarbe auf Schwarz Scrollen Sie nun generell nach unten. Hintergrundtyp zum Schreiben des Farbcodes. Geben Sie den Rand ein, öffnen Sie nun die Minuten unter Ziffern, öffnen Sie die Typografie und gewichten Sie 500 unter der Label-Typografie Randtyp wird zu durchgehend, Rahmenfarbe wird allgemein zu Schwarz, Hintergrundtyp schreibt den Farbcode Der Rahmentyp ist durchgehend, öffnet jetzt Sekunden, Farbe wird weiß, Typografie unter dem Etikett Typografie Hintergrundtyp auf Weiß, Randtyp auf Vollton, Rahmenfarbe auf Schwarz, Scrollen nach unten und generell Hintergrundtyp, Farbcode Geben Sie den Text auf Vollton ein. Jetzt ist der Countdown-Timer abgeschlossen. Sie können sehen, wie schön diese aussehen. Veröffentlichen Sie jetzt zuerst Ihre Inhalte. Jetzt mit Plus-Symbol, Ziehen eines Containers, Richtung zur Zeile, Richten Inhalt auf diese Weise nach Leerzeichen Kopieren Sie nun in diese Überschrift und fügen Sie sie hier ein, ändern Sie den Inhalt Öffnen Sie auf der Registerkarte Stil die Typografie. Duplizieren Sie nun zu dieser Überschrift und ändern Sie den Inhalt. Klicken Sie nun auf das Plus-Symbol. Ich suche nach dem Fortschrittsbalken. Ich werde diesen Fortschrittsbalken wählen. Entfernen Sie zuerst den Titel. Ich will das nicht. Von Prozent gebe ich den Wert auf 70 und zeige den Prozentsatz an, deaktiviere ihn und entferne den inneren Text unter Stil und tippe auf Farbcode. Für die Hintergrundfarbe, wenn den Farbcode aus der Höhe schreibe, behalte ich den Wert bei zehn, den Randradius 50. Ich werde von hier aus nichts ändern, die erweiterte Version öffnen, Verknüpfung der Polsterung aufheben, rechte Seite 40, linke Seite, 40, jetzt con plus Symbol, einen Container ziehen Unter dieser Absenderrichtung wähle ich zwischen den Zeilen ausgerichtete Inhaltsmitte, klicke auf das Plus-Symbol und ziehe sie Ich wähle dieses Bild aus, klicke auf „ Bildauflösung für Umfrage auswählen“, klicke mit der rechten Maustaste und dupliziere es. Mit der rechten Maustaste klicken und duplizieren. Noch einmal. Jetzt ändere ich einfach die Bilder. Jetzt sind alle Dinge erledigt, genau wie in diesem Container. Gehen Sie zur Registerkarte Stil. Von hier aus wähle ich den Hintergrundtyp und schreibe den Farbcode. Gehen Sie unter Fortgeschrittene und entfernen Sie die Polsterung von den oberen 40. Sie können sehen, dass hier viel Platz ist, also reduzieren wir ihn einfach Wähle diesen Behälter aus, verbinde die Polsterung unter Advanced Tear , und von rechts und links gebe ich ihm den Wert 40. Wählen Sie nun diesen Container aus. Lass es uns an die Grenze bringen. Gehen Sie unter Stil abreißen, öffnen Sie den Rand, den Randtyp auf durchgehend, Rahmenbreite auf eins, Rahmenfarbe, den Randradius auf zehn, gehen Sie zu Erweiterter öffnen Sie den Bewegungseffekt. Eingangsnuss passt rein, richtig. Machen wir jetzt unseren dritten Abschnitt. 33. Fünfter Container: Fangen wir mit unserem nächsten Abschnitt an. Gehen Sie unter Titel und geben Sie ihm eine Hintergrundfarbe. Der Farbcode ist dunkelblau. Scrollen Sie jetzt nach unten. Ich werde in diese Überschrift duplizieren und sie hier einfügen. Ändere den Titel. Klicken Sie nun auf das Com-Plus-Symbol ziehen Sie einen Container in Richtung Zeile Klicken Sie auf das Com Plus-Symbol und ziehen Sie einen neuen Container Klicken Sie mit der rechten Maustaste und duplizieren Sie. Wählen Sie nun diesen Container auf der linken Seite aus. Gerichteter Inhalt zur Mitte. ClioPlus-Symbol, Bild-Widget zum Ziehen. Wählen Sie Ihr Bild aus. Bildauflösung auf vier. Klicken Sie nun auf das Plus-Symbol und suchen Sie nach dem Fortschrittsbalken. Ich werde Element Skit Progress Bar wählen. Beim Stil können Sie alles wählen. Ich entscheide mich für Bar Shadow. Ändern Sie den Titel-Prozentsatz auf 46, Animationsdauer 1.500. Gehen Sie zu den Farbcodes für den Hintergrundtyp Stitb. Stellen Sie die Höhe auf eins, Randradius auf fünf, Polsterung auf Null. Scrollen Sie nach unten und öffnen Sie den Track Typ des Hintergrunds. Der Farbcode ist jetzt im Titel geöffnet, Farbe weiß. Typografie-Popins, den Prozentsatz öffnen, Farbe auf Weiß, Typografie auf Pop-Ins, Rechtsklick und Jetzt ändere ich nur den Inhalt, Farbe und den Prozentsatz Also lass es uns einfach schnell machen. A wähle nun unter Lücken diesen Container aus, ich vergrößere den Abstand hier um 30, gehe unter Advancp runter scrolle und öffne die Bewegungseffekte Hier wähle ich die Animation rechts einblenden. Lassen Sie uns die Animation also auch hier anwenden. Wählen Sie also für diesen Container aus. Scrollen Sie nach unten, öffnen Sie die Bewegungseffekte und wählen Sie hier „Links einblenden“. Veröffentlichen Sie jetzt Ihre Inhalte. 34. Sechster Container: Klicken Sie auf das Plus-Symbol. Mindesthöhe, ich behalte 800. Geh unter den DVAsterunlin in der Polsterung von oben 18. Klicken Sie auf das Plus-Symbol. Ich werde drei Container ziehen. Okay. Wählen Sie jetzt also zuerst „Richtung zur Zeile enthalten“. Klicken Sie nun auf das O-Plus-Symbol, ziehen Sie ein Überschriften-Widget, ändern Sie den Titel, gehen Sie unter Stil auf Ausrichtung nach links, Farbe weiß, Typografie-Familien-Popins, mit 500 Klicken Sie nun auf Pluscon und ziehen Sie ein Button-Widget. Ändern Sie jetzt den Titel. Wählen Sie das Symbol aus der Symbolbibliothek. Ich suche nach BTQingLkon Insert. Das Leerzeichen aus dem Symbol zehn machen. Gehen Sie nun auf die Registerkarte Stil, tippen Sie zwei Pop-Ins und gewichten Sie 500 Textfarben auf Weiß Hintergrundfarbcode ist ein Randradius bis 50, trennen Sie die Verknüpfung mit der Polsterung und ich gebe 20, 30, 2030 Wählen Sie nun diesen Container aus, den Inhalt bis zum Leerraum aus, richten Sie die Elemente zentriert aus, klicken Sie nun auf das Com-Plus-Symbol, ziehen Sie eine Überschrift und schreiben Gehen Sie zur Registerkarte Stil, Textfarbe 201b, Family Popins, Größe 15, Gewicht 400 Gehen Sie nun auf die Registerkarte „Erweitert“, heben Sie die Verknüpfung der oberen fünf, rechts zehn auf und scrollen Sie nun nach unten Öffnen Sie die Option Hintergrund. Von hier aus können Sie anhand des Farbcodes sehen, dass diese grüne Hintergrundfarbe separat ist. Öffnen Sie nun das Layout von hier aus, beginnen Sie mit dem Aligner und minimieren Sie nun den Balken Sie können also sehen, dass wir die Polsterung auch von unten vornehmen müssen . Also von unten schaffe ich es auf fünf. Wählen Sie diesen Container von hier Richtung zu Zeile aus und klicken Sie auf das COM-Plus-Symbol. Ziehen Sie jetzt einen Texteditor mit. Ändern Sie den Titel. Tippen Sie unter Stil auf. Auch die nächste Farbe. Gehe jetzt zu einem dritten Container. Ich habe diesen Container ausgewählt. Tippen Sie auf Stil, öffnen Sie den Rahmen und wählen Sie von hier aus den Randtyp, mit dem Sie den Rand fest verknüpfen möchten. Von links und rechts gebe ich einem Pixel die Randfarbe. Ich habe BrerColorG auf der Registerkarte „ Erweitert“ angegeben und die Polsterung auf Null Klicken Sie nun auf das Com-Plus-Symbol und suchen Sie nach der Tabelle. Ich möchte das Tabellen-Widget des XP-Plugins verwenden, also habe ich es nicht installiert. Also lass es uns einfach installieren. Klicken Sie auf das Simental-Logo. Hier ist ein Ausgang zu Wordpress. Ich öffne in einem neuen Tab. Gehen Sie zu Plugins, um ein neues Plug-In hinzuzufügen, und suchen Sie nach Expro. Ich installiere das. Aktiviere jetzt dieses Plugin. Jetzt ist dieses Plugin installiert und aktiviert. Gehen Sie jetzt zurück, veröffentlichen Sie zuerst Ihre Inhalte und laden Sie jetzt Ihre Website neu Suchen Sie jetzt nach dem Tabellen-Widget und ich werde diese Expropluge-Tabelle auswählen Jetzt ist hier die Serie. Sie können das sehen, wie es aussieht. Klicken Sie jetzt hier. Gehe zu Stil und tippe auf die Textfarbe auf Weiß. Der Farbcode für den Hintergrundtyp lautet. Jetzt schließe ich das und lösche alles. Jetzt duplizieren Sie einfach das. Jetzt werde ich einfach die Strumpfhose wechseln. A Jetzt ist unser Tischkopf fertig Gehen Sie jetzt zur Tabellenzeile. Hier ist ein Zeilenanfang. Von hier aus wähle ich die Reihenfolge, gehe zur Sra-Textfarbe zu Weiß Hintergrund, ich werde es zu transparent halten. Jetzt schließ das. Jetzt werde ich das alles löschen und ich werde es einfach duplizieren. Hier ist eine Medienoption. Von hier aus wähle ich Image. Wählen Sie hier Ihr Bild aus. Ich wähle dieses Bild aus. Klicke auf Bildauflösung auswählen, um es abzurufen. Die anderen Änderungen werden wir in wenigen Minuten vornehmen. Jetzt ändere ich einfach zuerst den Titel. Wir wollen die nächste Zeile. Scrollen Sie dazu nach unten und duplizieren Sie zu diesem Zeilenanfangsabschnitt und verschieben Sie ihn an das Ende. Auf diese Weise auf alle duplizieren Jetzt den Titel ändern. Also ist unser Tisch jetzt fertig. Ich habe alle Titel und Bilder geändert. Hier ist die Ausrichtung. Ich mache es nach links. Öffnen Sie den Kopf des Tisches und richten Sie ihn von hier aus nach links aus. Gehen Sie jetzt zum Style-Tag Typografie Family Pop-Ins Größe 15. Wir ändern den Tabellenhut und die Farbe des Texts auf Weiß, den Rahmentyp auf durchgehend und heben die Verknüpfung mit auf. Ich gebe nur die Breite von oben und unten als ein Pixel an, die Randfarbe Öffnen Sie nun die Tabellenzeilenoption von hier aus, Typografie, Pop-in-Größe 14 und Gewicht 2300, Textfarbe, Weiß und sogar Textfarbe Ich möchte den gesamten Text in weißer Farbe behalten Hier ist eine Hintergrundfarbe für ungerade, also möchte ich sie zu transparent halten und die Hintergrundfarbe, ich schreibe den Farbcode dafür Jetzt können Sie sehen die Hintergrundfarbe für gerade Zahlen geändert wurde. Umrandungstyp auf durchgehend. Trennen Sie zunächst die Randbreite und die Rahmenfarbe, damit Sie diese leichte Randlinie und die obere Seite sehen können Und hier sind die Medien. Und ich werde die Größe hier beibehalten 20. Sie können jetzt sehen, dass diese Bilder klein sind, und Sie können die Position wählen. Ich werde es auf der linken Seite belassen. Ja, jetzt sehen alle Bilder gut aus. Jetzt minimiere die Leiste. Und Sie können sehen, wie schön unser Tisch aussieht. Öffne es jetzt. Jetzt werde ich hier die Animation anwenden. Ich habe diesen Container unter Advanced ausgewählt, öffne den Motion Eff. Hier wähle ich Fad in einer Animation aus. So kannst du sehen, wie schön es von der Unterseite kommt Veröffentlichen Sie jetzt Ihre Inhalte. Jetzt ist auch dieser Abschnitt fertig Lassen Sie uns einen nächsten Abschnitt erstellen. 35. Siebter Behälter: Symbol plus Symbol, und von hier aus wähle ich diese Struktur, Mindesthöhe auf 550 Pizza, gehe unter Stil auf die Registerkarte Stil, Hintergrundfarbe auf Dunkelblau. Scrollen Sie von Rahmen, Rahmentyp bis Vollton nach unten. Hier möchte ich den leichten Rand angeben. Trennen Sie also die Rahmenbreite. Von oben und unten wähle ich ein Pixel oder eine Randfarbe, Farbcode ist E five Wählen Sie nun diesen Container mit ausgerichtetem Inhalt zur Mitte aus. Klicken Sie auf das Com-Plus-Symbol und ziehen Sie das Bild. Wählen Sie Ihr Bild aus. Ich wähle dieses eine Bild aus und klicke auf Cosletimage resolution 24. Dieses Bild sieht sehr groß aus. Gehen Sie also zu einem Style-Tab mit einer Zeitmessung von 85%. Kommen Sie jetzt hierher und ich wähle „In diese Überschrift kopieren und füge es hier ein. Kopieren Sie auf diese Weise in diese Überschrift, fügen Sie sie hier ein, gehen Sie unter Stil und Ausrichtung nach links. Okay. Kopieren Sie jetzt in dieses Texteditor-Widget und fügen Sie es hier ein. Ändern Sie Ihren Titel und gehen Sie unter Stilet-Ausrichtung nach links. Klicken Sie nun auf das Symbol CO plus und suchen Sie nach dem Widget „Symbolliste“ Ich ziehe es hierher. Jetzt lösche diesen, ändere den Text Das Symbol ändern. Ich suche nach Benutzern. Ich entscheide mich für diesen. Klicken Sie auf Auf diese Weise einfügen und wechseln Sie zu diesem Artikel. Gehen Sie nun zum Stilbereich zwischen 220, Ausrichtung nach links und zum Symbol. A Ich wähle diese Farbe für Icons. Größe, ich behalte 30 Abstand, zehn, horizontale und vertikale Ausrichtung zur Mitte. Öffne den Text unter Typografie, Familien-Popins, Größe auf 19, Farbe auf Weiß Jetzt ziehe ich die Schaltfläche, also kopiere ich einfach die Schaltfläche dorthin und füge sie hier Jetzt ändere einfach den Inhalt. Icon, ich suche nach Downloads. Ich entscheide mich für diesen. Klicken Sie auf Einfügen. Ja, das sieht gut aus. Wählen Sie also diesen Container aus und gehen Sie zur Layout-Option. Ich schaffe es auf fünf und richte den Inhalt in die Mitte. Wählen Sie nun diese Überschrift aus und gehen Sie unter Srta. Ich richte es nach links aus. Hier ist sehr wenig Platz, also wähle ich meine Schaltfläche aus, gehe zu Erweitert und erhöhe von hier aus den Abstand auf 12. Machen wir also unseren nächsten Abschnitt. Ich wähle diese Struktur. Gehen Sie zur Registerkarte Stil. Ab hier behalte ich die dunkelblaue Farbe. Wählen Sie einen der Container aus. Also wähle ich diesen Container aus, klicke auf das Plus-Symbol und ziehe einen weiteren Container hierher. Und bei der Mindesthöhe kippe ich auf 350 Pixel. Gehen Sie zur Registerkarte Stil. Ich werde hier eine Hintergrundfarbe angeben. Der Farbcode ist so, dass ich diese Farbe wähle, Tab „Erweitert“ gehe, die Verknüpfung der Polsterung aufhebe und von oben gebe ich 30 Füllungen an gebe ich 30 Klicken Sie nun auf das Com-Plus-Symbol. Ich ziehe ein Bild hierher und wähle das Bild aus. Ich entscheide mich für dieses. Klicken Sie auf Bildauflösung auf vier auswählen, gehen Sie unter Startbreite Ich belasse auf 40%, klicken Sie auf das Symbol Com plus, ziehen Sie ein Überschriften-Widget und ändern Sie die Titel Gehe unter Starter, Ausrichtung zur Mitte, Farbe zu Weiß, Familie, um einzublenden Okay, das sieht also gut aus. Ich dupliziere einfach zu dieser Überschrift und ändere den Text. Gehen Sie unter Stater-Textfarbe zu und wir bis 400 gehen Sie unter Erweitert, klicken Sie auf den Rand und ich gebe zwei minus zehn Crontp , jetzt klicken Sie auf das Symbol jetzt Ich suche nach Symbolen für soziale Netzwerke. Zuallererst zu Facebook, Twitter und YouTube. Ich möchte noch ein soziales Symbol verwenden. Also suche ich nach Skype. Nimm es an und serviere Okay. Von Form zu Kreis, jetzt gehe zu Schritt. Farbe auf Benutzerdefiniert und Primärfarbe, ich mache es auf transparent, Größe auf 20 und Abstand, ich mache es auf 15. Klicken Sie auf das Symbol Von hier aus, Primärfarbe, um den Farbcode zu schreiben. Wenn ich jetzt mit der Maus über meine sozialen Symbole fahre, kannst du das sehen Anstatt Animation wähle ich Buzz. Wenn ich jetzt mit der Maus über mein soziales Symbol fahre, kannst du diese wunderschöne Animation sehen Gehen Sie jetzt zur Vorwärtsposition, die ich zur absoluten Position mache, und ich möchte die vertikale Ausrichtung nach unten Egal, wie viele Inhalte Sie schreiben, soziale Symbole bleiben immer am Ende des Inhalts Jetzt ist es ein Scrollen nach unten. Hier ist der Hintergrund. Ich werde sozialen Symbolen eine Hintergrundfarbe geben. Also okay, das ist jetzt unsere Karte. Jetzt werde ich hier einen benutzerdefinierten CSS-Code hinzufügen. Also wähle ich diesen Container aus, scrolle nach unten und öffne die benutzerdefinierte CSS-Option und füge deinen Code hier ein. Ich habe meinen Code hier eingefügt. Wenn ich jetzt mit der Maus über meine Karte fahre, kannst du dieses wunderschöne Set sehen Ich möchte es rund machen. Wählen Sie dafür Ihr Bild und den Randradius aus, ich mache es 200. Wenn ich jetzt mit der Maus über meine Karte fahre, kannst du diesen schönen Effekt sehen Jetzt ist das runder. Sie können diese Farbe ändern, wenn Sie möchten. Wie hier kannst du jede Farbe ändern, wenn ich hier zum Beispiel Gelb mache. Jetzt kannst du sehen, dass das jetzt gelb ist. Also gehe ich zurück. Also jetzt ist unsere erste Karte Fleisch. Jetzt kopiere ich einfach auf diese Karte. Jetzt werde ich Ihre Inhalte einfach kopieren und einfügen und veröffentlichen. Jetzt werde ich nur noch die Bilder und diesen Inhalt ändern. Also lass es uns schnell machen. Also, jetzt sind unsere Karten fertig. Wenn ich mit der Maus über meine Karte fahre, siehst du vielleicht diese wunderschöne Flosse Also dieser Abschnitt ist jetzt auch fertig. Lassen Sie uns diesen Karten nun die Animationen geben. Also wähle ich diesen Container aus, gehe unter „Erweitert“ und öffne den Bewegungseffekt. Hier gebe ich nach links ab. Hier werde ich eine Modeerscheinung aufgeben. Und auch hier gebe ich das Ausblenden von Animationen auf, und hier werde ich richtig nachgeben Okay. Veröffentlichen Sie jetzt Ihre Inhalte. Ich habe vergessen, die Animationen hier anzugeben, also machen wir es. Bewegungseffekte werden links eingeblendet. Und zu diesem Abschnitt gebe ich es, um es nach rechts einzublenden Also, okay, jetzt sind diese Abschnitte auch fertig. Gehen wir jetzt weiter. 36. Eigth-Container: Fangen wir mit unserem nächsten Abschnitt an. Klicken Sie also auf das Plus-Symbol. Ich wähle diese Struktur. Und von hier aus gehen Sie zum Stil. Hintergrundfarbe wie immer dunkelblau, gehe zum Layout. Minimale Höchstzeit bei 75 Pinseln. Rechtsklick und Kopieren, Rechtsklick und Einfügen Im Text unter Stil die Ausrichtung zur Mitte. Kopieren Sie auf diese Weise in diese Überschrift und fügen Sie sie hier ein, ändern Sie den Titel. Rechtsklick und Kopieren, Rechtsklick und Einfügen. Ändern Sie den Titel, bleiben Sie in der Mitte der Ausrichtung, gehen Sie zurück unter Text und scrollen Sie nach unten. Nach dem Bankgeschäft verwende ich Break Path. Ja, jetzt sieht der Text gut aus. Scrollen Sie nach unten und klicken Sie mit der rechten Maustaste und kopieren Sie, klicken Sie mit der rechten Maustaste und fügen Zuallererst das Layout, das ich hier zeile, um den Text zu ändern. Und wenn ich nach mir suche, wähle ich dieses Symbol. Klicken Sie auf Einfügen. Icon-Telefon. Lass uns hier diesen benutzen. Klicken Sie auf Einfügen. Symbol hinzufügen, das technische Tenigramm ändern . Nehmen wir diesen. Gehen Sie jetzt zum Stil Pasi und machen Sie hier 50, Ausrichtung zur Mitte. Gehen wir jetzt weiter. Klicken Sie auf das C-Plus-Symbol, ziehen Sie den Container hierher, Richtung Zeile. Klicken Sie auf das Plus-Symbol, ziehen Sie einen Container, klicken Sie mit der rechten Maustaste und duplizieren Sie ihn. Wählen Sie nun auf dieser linken Seite aus und richten Sie die Elemente von hier aus zentriert aus. Klicken Sie nun mit der rechten Maustaste und kopieren Sie, klicken Sie mit der rechten Maustaste und setzen Sie die Maustaste, ändern Sie den Titel und wechseln Sie zu Stil, sodass er auf 30 und dann auf 500 gesetzt Ja, veröffentlichen Sie zuerst Ihre Inhalte, klicken Sie auf das Com-Plus-Symbol, suchen Sie nach dem Kontaktformular und ich ziehe dieses Kontaktformular Hier ist eine Option zum Anzeigen des Labels. Ich deaktiviere das. Ich möchte hier noch einen Abschnitt haben, also dupliziere ich ihn und ziehe ihn hierher, und hier wähle ich Telefon und tippe zwei, wir können es in Zahlen machen Also öffne jetzt diese Option. Hier kannst du das alles sehen. Hier ist der Button. Ich schreibe hier , um eine Nachricht zu senden. Gehen Sie jetzt zu Style Tap und Columns Gap, ich mache es auf 25, Rose Gap auf 20. Hier ist der Rand, also gebe ich ihn von allen Seiten auf zehn, und ich werde von hier aus nichts ändern. Öffne die Option Felder, Typografie für Familien-Popins und Größe auf 15 und Platzhalterfarbe, ich mache daraus Weiß Von hier aus mache ich Farbe zu Weiß und Hintergrundfarbe zu transparent Wenn ich jetzt schreibe, wird es die transparente Hintergrundfarbe sein. Wenn jemand etwas eingibt, dann ist die Textfarbe weiß und die Hintergrundfarbe transparent. Und Randtyp zwei einfarbig, Rahmen mit Tim macht eins, und Randfarbe, machen wir es so, dass ich diesem hellen Rand und Randradius zehn gebe. Öffnen Sie nun die Benachrichtigungen, Familienfenster und dann die Schaltfläche Typografie wird eingeblendet, nein. Die Textfarbe ist bereits weiß und die Hintergrundfarbe, ich schaffe es jetzt, den Randradius auf 50 zu setzen, ohne den Abstand. Von oben mache ich 220, rechts 25, unten 20 und links Jetzt ist auch unser Kontakt zu Hause bereit. Wählen Sie nun diesen Container aus. Gehe zur Site. Hier schreibe ich den Farbcode. Okay, das sieht jetzt gut aus. Gehen Sie jetzt zu Erweitert und von Bewegungseffekt aus schaffe ich es, links einzuspeisen. Ja. Jetzt sieht unser Kontaktformular sehr schön aus. Klicken Sie nun auf das Plus-Symbol, ziehen Sie das Bild und wählen Sie das Bild aus Ich entscheide mich für dieses. Bildauflösung zum Narren, geh zu Sita. Dieses Bild sieht sehr groß aus. Also mache ich Breite auf 80% und Höhe auf 350 Stück voreingestellt auf Objekt, passend zur Abdeckung, wähle diesen Wählen Sie nun diesen Container und den ausgerichteten Inhalt zur Mitte aus, gehen Sie zu „Weiter“, „ Bewegungseffekt“, „Einpassen“, „rechts Okay, dieser Abschnitt ist jetzt auch fertig. Veröffentlichen Sie es jetzt. Okay. Also lass uns jetzt unseren nächsten Abschnitt beginnen. 37. Neunter Container: Lassen Sie uns jetzt unseren nächsten Abschnitt sprechen. Also nehme ich diese Struktur. Gehe zu Style. Hintergrundfarbe. Ich mache eine Röhre. Gehe zum Layout und zur Mindesthöhe auf 300 Zoll. Gehe zu Vorne , löse die Verbindung der Bettwäsche, und von oben mache ich es Wählen Sie nun diesen Container aus, klicken Sie auf das Plus-Symbol und ziehen Sie ein Bild-Widget hierher. Wählen Sie Ihr Bild mit einer Bildauflösung von vier. Klicken Sie jetzt mit der rechten Maustaste und kopieren Sie. Klicken Sie mit der rechten Maustaste und fügen Sie ihn ein, ändern Sie den Inhalt. Gehe zur Stilausrichtung nach links. Klicken Sie auf das Com-Plus-Symbol und suchen Sie nach Symbolen für soziale Netzwerke. Ich ziehe da drunter. Nehmen wir noch ein soziales Symbol, suchen wir nach Interesse. Gehen Sie zu Stilfarbe auf Benutzerdefiniert. Primärfarbe, ich mache transparent und Größe 15. Sekundäre Farbe, Weiß, gehe zum Inhalt, und ich möchte, dass die Ausrichtung nach und ich möchte, dass die Ausrichtung Ja, jetzt sieht es wunderschön aus. Und Grenzradius bis 50. Und wenn Sie mit dem Mauszeiger über das Symbol für Primär- und Sekundärfarbe fahren, stellen Sie es auf Weiß um Und übers Sehen, Bob. Und wenn ich auf meine sozialen Symbole gehe, kannst du sehen, wie toll sie aussehen. Nun, Sie können sehen, dass hier viel Platz ist. Gehen Sie also weiter und heben Sie die Verknüpfung des Randes auf. Und von oben mache ich zwei -30 daraus und wähle diese Überschrift aus, das ist Ausrichtung Außerdem mache ich nach links. Gehen Sie jetzt hierher, wählen Sie diesen aus. Und Breite, ich mache 20% und klicke mit der rechten Maustaste und kopiere. Klicken Sie mit der rechten Maustaste und fügen Sie ihn ein, ändern Sie den Titel. Kategorien, gehe zur Sitzausrichtung nach links. Ab hier, Größe, mache ich 20 und wiege 600. Ja, jetzt sieht das gut aus. Jetzt einfach mit der rechten Maustaste klicken und duplizieren, den Inhalt ändern. Was ist ICU, gehe zur Registerkarte Stil unter Typografie, Größe Ich behalte 15 und Gewicht 400 Ja. Jetzt genau richtig, klicken und duplizieren. Rechts klicken und duplizieren. Rechts klicken und duplizieren. Noch einmal. Ja, jetzt ändere einfach den Inhalt. Jetzt ist dieser ganze Abschnitt fertig. Stellen Sie das jetzt einfach ein und klicken Sie mit der rechten Maustaste und duplizieren und löschen Sie diesen Abschnitt. Jetzt hier, ändere einfach den Inhalt. Ich mache es schnell. Jetzt ist dieser Container, und hier werde ich den Wert auf 40% belassen. Rechtsklick und Kopieren, Rechtsklick und Einfügen, den Inhalt in Newsletter ändern, rechten Maustaste klicken und kopieren. Klicken Sie auf das Plus-Symbol. Ich suche nach einem Suchformular und verwende diese einfache Suche nach. Hier ist ein Skin. Du kannst das TTH wählen. Ich behalte es als Standard, und bitte halten Sie es Ich schreibe hier. Und tippe, ich mache es zu einem Text, und ich werde hier schreiben. Größe, ich werde es bei 50 Pixeln belassen. Gehen Sie jetzt unter Typografie, Family Pops und Textfarbe zur Registerkarte Stil Family Pops und Textfarbe Ich werde es unverändert lassen mir erstellte Textfarbe und die Hintergrundfarbe weiß, die Rahmenbreite, ich mache fünf Pixel und der Rand ist 50. Öffnen Sie die Schaltfläche und das Blatt erscheint, die Textfarbe weiß. Grundfarbe, ich schaffe es zu blauer Farbe. Und der Farbcode dafür ist Breite, ich habe 2,5 gemacht. Okay, jetzt ist das fertig. Aber ich wähle meinen übergeordneten Container unter Layout aus. Ich möchte die Lücken hier vergrößern, und ich mache es auf 40 Pixel. Ja, jetzt ist Platz genug. Wenden wir nun die Animationen auf diese vier Abschnitte Wählen Sie diesen Container unter Erweitert aus, Bewegungseffekte, um ihn links einzublenden. Wie dieser unter Erweitertes Ausblenden. Das Gleiche gilt hier für das Abblenden der Animation . Hier wähle ich Fading Write Animation. Veröffentlichen Sie jetzt Ihre Inhalte. Alle Abschnitte sind jetzt fertig. Schauen wir uns also die Vorschau an. Sie können sehen, wie schön unsere Website aussieht. Ja, alle Dinge sehen sehr gut aus. Ich möchte hier die Polsterung von oben geben. Also geh her. Wählen Sie unter „ Erweitertes Abreißen der Polsterung“ den Behälter für den Anhänger aus Und von oben mache ich 50. Ja, 50 ist okay. Und hier ist ein sehr kleines Stück. Gehen wir vom Layout aus, ich erhöhe die Mindesthöhe und wie bei diesem Container unter der Registerkarte „Erweitert gebe ich der Polsterung von oben 50 und unter der Registerkarte „Layout“, wodurch die Mindesthöhe erhöht Also schaffe ich es auf 550. Ich sehe die Veränderungen. Ja. Jetzt ist hier ausreichend Platz. Ja. Ja, das sieht gut aus. Okay. Ja, jetzt sieht alles perfekt aus. Okay, unsere Website sieht also sehr, sehr schön aus. Jetzt werden wir im nächsten Video unsere Kopf - und Fußzeile erstellen. 38. Kopf- und Fußzeile: Die Website ist fertig. Jetzt werden wir unsere Kopf- und Fußzeile erstellen. Jetzt werden wir unseren Header erstellen. Um unseren Header zu erstellen, werden wir zunächst unsere Menüs erstellen. Klicken Sie also auf dieses mentale Logo und gehen Sie zu Wordpress. Gehen Sie von hier aus zu Darstellung Menüs und geben Sie Ihnen einen Menünamen Sie können ihm einen beliebigen Namen geben, z. B. Menü, den Speicherort des Hauptmenüs anzeigen und auf Menü erstellen klicken. Öffnen Sie von hier aus diese benutzerdefinierten Links und geben Sie hier, rechts, Hallo zu Hause und Linktext zu ein. Klicken Sie auf at, um das Menü aufzurufen. Die URL hier hat Funktionen. Klicken Sie auf „Zum Menü“. SL Sales klicken Sie auf AT-Menü. Klicken Sie neben URN auf at zum Menü. Jetzt sind unsere Menüs also da. Wenn Ihre Menüs nicht zusammengestellt sind, so können Sie es arrangieren. Okay, jetzt klicken Sie auf Menü speichern. Jetzt sind unsere Menüs gespeichert. Also, was ich jetzt tun werde klicken Sie auf Template Tooth Builder. Jetzt werden wir unseren Header erstellen. Klicken Sie von hier aus auf den Header und dann auf Anu. Wenn Sie über Profis verfügen, können Sie die Header auch von hier aus einfügen Aber ich werde hier nicht wählen, also stornieren Sie das einfach Also klicken Sie jetzt auf PlusCo und von hier aus werde ich diese Struktur wählen Gehen Sie zur Registerkarte Stil. Ich möchte eine Hintergrundfarbe angeben, also klickt Droove jetzt auf das Plus-Symbol und zieht Bild-Widget, um das Bild auszuwählen Ich werde dieses Bild wählen. Wählen Sie diesen Container aus, Inhalt aus, um ihn zu zentrieren, und richten Sie die Elemente zunächst aus. auf diese Weise jetzt diesen Container aus und Wählen Sie auf diese Weise jetzt diesen Container aus und richten Sie den Inhalt aus, um zu beginnen. Klicken Sie nun auf das Plus-Symbol. Auf der Suche nach Menüs. Ich werde dieses Widget ziehen. Weißt du, wir haben das Menü bereits erstellt, sodass die Menüs hier angezeigt werden. Du kannst jetzt nicht sitzen. Lassen Sie uns zunächst einfach die Farbe ändern. Also geh zur Sita-Textfarbe, ich mache sie weiß. Jetzt können Sie die Änderungen deutlich sehen. Alignment, ich schaffe es auf die rechte Seite. Hier werde ich das Gebot erhöhen Okay. Jetzt sind meine Menüs in einer Reihe. Dieser positive Breakpoint, ich entscheide mich nur für Mobilgeräte. Gehe unter Style te hin. Layout, ich wähle Underline Center. Sie können sehen, dass Sie alle Layouts erkunden können. Ich wähle das Layout Underline Center. Wenn ich jetzt mit der Maus über Menüs fahre, siehst du diese rosafarbene Linie Ich werde auch die Farbe ändern. Aber lassen Sie uns zunächst die anderen Änderungen sehen. Öffne die Typografie. Familie, ich entscheide mich für Pop-Pints und behalte die Größe bei 50. Ich wähle bereits die Farbe des Textes und für wen ich die blauen Farben haben möchte, also schreibe ich den Code Wenn ich jetzt mit der Maus darüber fahre, können Sie sehen, dass die Menüs blau werden Und ich möchte auch, dass die Linienfarbe blau wird. Also habe ich den gleichen Code hier eingefügt. Wenn ich jetzt mit der Maus über meine Menüs fahre, können Sie diesen schönen Effekt sehen, und ich werde dieselbe Farbe hier einfügen Unsere Menüs sind also auch fertig. Jetzt werde ich einen Knopf machen. Jetzt werde ich das Button-Widget hierher ziehen, also suche nach der Schaltfläche. Ziehen Sie es hierher, ändern Sie den Inhalt und gehen Sie zur Registerkarte Stil. Von hier aus werde ich die Hintergrundfarbe als transparent und den Rand als einfarbig, Rand mit einem Pixel und die Rahmenfarbe als weiß festlegen. Okay, also diese Änderungen, die ich hier vorgenommen habe, den Container lockern, den Inhalt zentriert ausrichten Jetzt ist also alles in der Mitte. Unser Header ist jetzt fertig. Ich möchte einen Sticky-Header erstellen. Wie können Sie das so machen, dass Sie diesen übergeordneten Container auswählen, zu Advance gehen und von hier aus auf Motion Ificky klicken, um nach oben zu Sie können hier die Bedingungen auswählen z. B. ich möchte einen Sticky-Header auf allen Geräten haben, also werde ich das einfach ändern Veröffentlichen Sie jetzt Ihren Header. Fügen Sie die Bedingung für die gesamte Site hinzu, Sie können Anti wählen. Ich werde es auf der gesamten Seite belassen. Klicken Sie auf Speichern und schließen , um Ihre Website neu zu laden. Sie können sehen, dass unsere Menüs hier sind. Jetzt kannst du sehen, dass unser Header klebrig ist und ich scrolle zu meiner Website, sodass unser Header klebrig ist Was ich jetzt machen werde, jetzt werde ich zu den Menüs mit den Abschnitten verlinken. Also lass es uns machen, gehe zu Advanced. Hier müssen wir unsere CSS-ID einfügen, und diese CSS-ID müssen Sie von hier kopieren. Stellen Sie sicher, dass Sie nicht in diesen Hash kopieren. Gehen Sie jetzt zu Elementary Page Ader und fügen Sie Ihre ID hier ein. Okay, auf diese Weise. Okay , Leute, ich habe den ganzen Abschnitt mit diesen Menüs verknüpft. Also schau jetzt. Sehen wir uns die Vorschau an. Und jetzt, wenn ich auf Home klicke , werden wir zu diesem Abschnitt weitergeleitet. Okay. Lassen Sie uns jetzt unsere Fußzeile erstellen Um also eine Fußzeile aus Vorlagen zu erstellen, gehen Sie zu Theme Builder Und hier können Sie die Fußzeile sehen, klicken Sie auf Fußzeile, klicken Sie auf Sie können die Fußzeile von hier aus auswählen, aber ich werde es von hier aus nicht tun Lassen Sie uns jetzt unsere Fußzeile hier erstellen. Also nehme ich diesen Abschnitt. Richtung, ich mache es so, dass es unter dem Style-Tag reiht, gebe ihm eine Hintergrundfarbe. Ich schreibe den Farbcode Null, Eins, Null, Null, 25. Also gebe ich dem Hintergrund diese Farbe , gehe zur Layoutoption und wähle hier den Abstand zwischen Okay und richte die Elemente zentriert aus. Klicken Sie nun auf das C-Plus-Symbol, ziehen Sie ein Überschriften-Widget und ändern Sie den Titel Gehen Sie zu Sa, Ausrichtung nach links, Textfarbe weiß und Typografie wird angezeigt Größe, ich mache 15, Gewicht 500. Klicken Sie jetzt auf das Plus-Symbol. Ich ziehe ein Bild-Widget hierher. Okay, also wähle ich das Bild aus. Klicken Sie auf die linke Bildauflösung, Auswahl zum übergeordneten Container abzuschließen Hier möchte ich die Mindesthöhe erhöhen . Ich behalte es auf 120. Okay, jetzt ist unser Töpfer auch bereit. Klicken Sie jetzt auf Veröffentlichen. Sie können die Bedingung von hier aus hinzufügen. Ich wähle die gesamte Website aus. Klicken Sie auf Speichern und schließen. Gehen Sie jetzt auf Ihre Website. Wenn Sie auf Ihre Website neu laden. Scrollen Sie jetzt nach unten und sehen Sie, wie unsere Website bei Ihnen aussieht. Ihr könnt also hier in unserer Fußzeile sehen, wie schön sie aussieht Schauen wir uns jetzt die Vorschau an. Sehen Sie sich zunächst unseren Header und Ihre Website an. Unsere Website ist jetzt vollständig fertig. So können Sie sehen, wie schön unsere Fußzeile aussieht. 39. Tablet- und Mobilgeräte: Hallo Leute, sehen Sie hier, wie unsere Website auf einem Tablet-Gerät aussieht Lassen Sie uns jetzt unsere Website erstellen, die auf Tablets reagiert. Also habe ich diese Überschrift ausgewählt. Ich mache hier die Größe 34. Also jetzt ist das erledigt. Jetzt wähle ich meinen übergeordneten Container und gehe auf die Registerkarte „Erweitert“, um den Abstand aufzuheben. Von oben gebe ich 50 Pixel von oben Lass uns jetzt hierher springen. Also habe ich mein Bild unter der Registerkarte Stil ausgewählt. Ich mache es mit 75%. Ich habe dieses Bild jetzt unter Style-Tap ausgewählt, 70%. Gehen Sie von hier aus auf die Registerkarte „Erweitert“, horizontale Ausrichtung, ich stelle es auf -30 und die vertikale Ausrichtung auf 80. Wählen Sie nun dieses Bild unter Stil aus und tippen Sie mit 70% auf, gehen Sie unter Erweitertes Tag, horizontale Ausrichtung , ich mache es auf -50 und vertikale Ausrichtung auf Tube 100 Wählen Sie nun dieses Bild unter Style-Tape aus. Breite auf 70% unter der Registerkarte „Erweitert“, horizontale Ausrichtung auf Null Pixel. Vertikale Ausrichtung, ich schaffe es auf 160 Pixel. Okay. Also jetzt ist dieser Abschnitt fertig. Lass uns weiter springen. Zuallererst habe ich diesen übergeordneten Container ausgewählt, und hier mache ich die Mindesthöhe auf 500 Pixel. Wählen Sie diese Überschrift auf der Registerkarte „Stil“ aus. Ich mache die Größe auf 27. Dieser Abschnitt sieht bereits gut aus, wir müssen ihn also nicht ändern. Okay, also lass uns jetzt hierher springen. Hier, die linke Seite sieht schon gut aus. Lassen Sie uns jetzt Änderungen auf der rechten Seite vornehmen. Unter der Stehhöhe mache ich es auf 100 Breite, ich mache 90. Ich habe diesen Behälter unter dem oberen Rand ausgewählt , ich gebe 20 Okay. Ich wähle meinen Disparen aus. Polsterung, ich meine Null. Ich werde die Größe unter dem Tab Stil auf 30 belassen. Auch hier bleibe ich bei 30, wähle dies unter dem Reiter „Erweitert“, Abstand Null aus Okay. Gehen wir jetzt weiter. Dieser Abschnitt sieht schon wunderschön aus. Wählen Sie nun unter Advanced Tear diesen Container aus und trennen Sie die Verbindung zur Polsterung Von der rechten Seite gebe ich 20 und von der linken Seite 20, klücke diesen Behälter unter Advanced Tear ab, löse die Verbindung zur Polsterung und von der linken Seite ich Ja, jetzt ist das fertig. Dieser Abschnitt sieht schon gut aus. Wir müssen hier keine Änderungen vornehmen. Jetzt komm her. Ich wähle diese Überschrift unter Sita aus. Ich sage, machen wir es auf 30. Wählen Sie jetzt den übergeordneten Container aus, und hier mache ich 450. Lassen Sie diese sozialen Symbole unter die Stilgröße fallen. Ich mache 15. Und das Tempo, ich habe acht Pixel auf diese Karte geklickt und mindestens 250 Pixel angeklickt, Rechtsklick und Kopieren, Rechtsklick und PATyler klicken und PaStyler klicken und PaStyler klicken und kopieren, Rechtsklick und P-Stil, Rechtsklick und Patyle, damit Sie sehen können, dass unsere Wachen jetzt damit Sie sehen können Gehen wir jetzt weiter. Wählen Sie zunächst den übergeordneten Container aus. Ich behalte den Abstand hier bei fünf Pixeln. Wählen Sie jetzt das aus. Gehe unter Text. Unter Typografie. Ich verringere die Größe. Lass es uns auf 15 belassen. Okay, öffne jetzt die Icon-Option und mache die Größe auf 25. Okay, jetzt sehen die gut aus. Hier, Kontakt, wir müssen hier nichts ändern. Wählen Sie nun dieses Bild aus. Auf der Registerkarte Stil. Breite, ich werde hier 100% machen. Okay, jetzt sieht das gut aus. Dieser Abschnitt ist auch fertig. Wählen Sie auf der Registerkarte Stil diese Überschrift aus. Ich mache die Größe auf 80. Lassen Sie uns hier auch 80 machen und auch hier mache ich eine Größe von 16 Pixeln wie hier. Machen wir hier eine Größe von 13 Pixeln, klicken Sie mit der rechten Maustaste und kopieren Sie diesen Stil und fügen Sie ihn in den gesamten Text hier ein. Okay, das ist jetzt fertig. Dieses Bild sieht immer noch nicht gut aus, also mache ich es auf eine Höhe von 300, und von hier aus wählen wir das Cover. Okay, jetzt sieht das Bild besser aus. Damit du all die Dinge sehen kannst. Diese Karten sehen wunderschön aus. Wir müssen uns nicht ändern. Unsere Website ist Tablet-responsiv gestaltet. Jetzt werden wir unsere Menüs entsprechend gestalten. Lassen Sie uns das jetzt entwerfen. Ich wähle meinen CD-Container und mache ihn auf die volle Breite, gehe unter Site. Ich werde die Größe bei 15 Pixeln belassen. Ich habe meinen leeren Container ausgewählt, unter „Erweitert die Verknüpfung der Seitenabstände aufgehoben und von der rechten Seite habe ich es auf 20 gebracht Jetzt wähle ich meinen Button aus. Gehe zum Style-Tag und von hier aus ändere ich die Größe zur Eingabe und entferne die Verknüpfung zwischen der oberen, der zehnten und der unteren Seite Rechte Seite, ich gebe 15, linke Seite 15. Also jetzt sehen alle Dinge gut aus. Jetzt sieht unsere Website auf Tablet-Geräten großartig aus. Gehen wir jetzt unter Mobilgerät. Gehe unter Mobilgerät. Lassen Sie uns jetzt unsere Website für Mobilgeräte anpassen. Jetzt können Sie hier sehen, wie unsere Website auf Mobilgeräten aussieht. Das sieht also so aus. Also lass es uns jetzt schaffen. Wählen Sie diese Überschrift aus und gehen Sie zu Style Tear. Lassen Sie uns diese Größe auf 30 Pixel erhöhen. Okay, wie diese Überschrift unter Style Tear, 13. Wählen Sie nun dieses Bild unter Style Tear aus. Ich lasse es auf 60% umstellen. Okay, also wähle jetzt dieses Bild aus. Ist es jetzt bereit? Und ein Stern, 22 Pixel. Andere Dinge sehen gut aus. Wählen Sie unter der Registerkarte „Stil“ diesen aufregenden Artikel, Größe zwei, 25 Pinsel Aber diese Karten sehen auf unserem Mobilgerät gut aus. Wir müssen also nichts ändern. Wählen Sie auf der Registerkarte „Stil“ zu diesem aufregenden Thema aus. Ich habe diese Überschrift auf der Registerkarte Stil ausgewählt. Ich mache die Größe auf 14 Pixel. Diese Boxen sehen auf Mobilgeräten sehr gut aus, sodass wir nichts ändern müssen. Lassen Sie uns hier einige Änderungen vornehmen. Also wähle ich das und mache 100. Höhe, ich bleibe bei 20, Rand unten 90. Jetzt sieht es also so aus. Lass es zu diesem Container, löse die Verknüpfung und von rechts und links gebe ich es auf 20 Pixel Wählen Sie nun diese Überschrift aus. Lassen Sie uns ihre Größe verringern. Also mache ich es auf 25 Pixel. Dieses Bild sieht sehr groß aus. Also unter Sita sollten wir es auf 80% bringen, Slack Dictainer erhöhen die Mindesthöhe um 650 Gehen Sie jetzt zu diesem Container und wir werden diesen Abschnitt auf Mobilgeräten ausblenden Öffnen Sie also diese Reaktionsfähigkeit und verstecken Sie sich im mobilen Portrait, aktivieren Sie diese Option, und jetzt wird dieser Abschnitt auf Mobilgeräten nicht mehr angezeigt Jetzt wird dieser Abschnitt also nicht auf Mobilgeräten angezeigt. Dieser Abschnitt sieht gut aus. Wählen Sie diese Überschrift unter „Stil“ aus, sodass sie auf 30 gesetzt wird, aber sie ist immer noch sehr groß. Ich möchte es in zwei Zeilen machen. Also ja, eine Größe von 26 Pixeln ist okay. Ich mag diesen Text und mache ihn auf 13 Pixel. Wählen Sie nun diese Symbolliste unter SytpPece zwischen Ich mache sie auf zehn Pixel und ich möchte ihre Textgröße verringern Öffnen Sie also den Text, und von hier aus möchte ich ihn auf 15 Pixel erhöhen, und lassen Sie uns die Höhe der Symbole auf 25 Pixel verringern auf 25 Pixel Ja. Jetzt ist das okay. L Diese Überschrift bleibt stehen, ich mache sie auf 25 Pixel groß. Dieser Texteditor, machen wir ihn auf 14 Pixel. Ich wähle diesen Container, diesen äußeren Container und 40 von der Website aus. Wählen Sie jetzt diesen inneren Einkaufswagen aus. Und ab hier werden wir die Mindesthöhe auf 300 belassen. Richten Sie die Elemente zentriert aus. Okay, wähle dieses Bild aus. Und Breite mache ich 50%. Wählen Sie jetzt die sozialen Symbole unter der Größe aus, die ich mache 18 Pixel Okay, jetzt sehen die gut aus. Okay, jetzt können Sie sehen, dass diese Karte fertig ist. Okay. Also jetzt, Rechtsklick und kopiere. Klicken Sie hier auf den Stil und fügen Sie ihn ein, wählen Sie diesen äußeren Container kopieren Sie ihn in diesen Container. Wählen Sie nun Ihren äußeren Behälter aus und fügen Sie den Stil ein. Wählen Sie nun „In soziale Netzwerke kopieren“ und „Pastyle Sie können jedoch sehen, dass zwischen den Karten kein Leerzeichen vorhanden ist Wählen Sie also diesen übergeordneten Container aus, und von hier aus mache ich eine Lücke von 20 Pixeln Gehen wir nun weiter, verkleinern Größe um 30 Pixel, wählen Sie dies aus, um es zu diesem Wettbewerbsformular zu machen, diesem Wettbewerbsformular zu machen um es zu diesem Wettbewerbsformular auf Mobilgeräten gut aussieht , zu diesem Bild, unter Stil. Ich schaffe es zu 200%. Ich mache eine Höhe von 220 Pixeln und die abzudeckenden Objekte. Ja, das ist jetzt okay. Ja, das ist okay, aber hier ist zu viel Abstand, also aus diesem Container mache ich zehn Pixel. Okay, die sehen jetzt schon toll aus. Jetzt ist unsere Website auch für Mobilgeräte optimiert. Lassen Sie uns nun auf dieses Menü reagieren. Ich möchte diese Schaltfläche nicht, also wählen Sie in diesem Container unter dem Tag „Erweitert“, „ Responsiv “ und „Im mobilen Portrait ausblenden“ aus. Okay, jetzt wird dieser Abschnitt nicht auf Mobilgeräten angezeigt. Wählen Sie nun diesen Container aus und machen Sie ihn zu 30 Pixeln. Wählen Sie nun diesen Container und machen wir ihn zu einem T-Pixel. Wählen Sie unter Layout diesen Container aus. Von hier aus schaffe ich es bis zum Bereich dazwischen. Wir haben unsere Website für Mobilgeräte und Tablets fertiggestellt . Ich hoffe, du hast heute etwas Neues gelernt. Danke. 40. First container Advanced Website: Hallo Leute, lasst uns anfangen, unsere dritte Website zu erstellen, die Advanced-Website. Deshalb werden wir heute diesen schönen Abschnitt erstellen, damit ihr sehen könnt, wie sich diese schönen Bilder verändern, wie sich diese Wand bewegt, dieser Farbverlaufstext, dieser Farbverlaufscontainer, alles wird es sehr einfach machen. also ohne weitere Umschweife Lassen Sie uns also ohne weitere Umschweife mit der Erstellung unserer Website beginnen. Also werden wir zunächst unser Astra-Theme installieren zum Erscheinungsbild der Themes übergehen. Also hier ist das Astra-Theme schon installiert. Lass es uns einfach aktivieren. Jetzt hole ich mir das. Jetzt installiere ich unsere Plugins. Unser erstes Plugin ist elementd Das zweite Plugin ist expro Install it Aktiviere es jetzt. Übernimm das Hinzufügen eines neuen Plugins. Wir werden die Element Pro-Version verwenden, klicken Sie auf ein Plot-Plugin. Wählen Sie Datei. Klicken Sie auf einen Plot und dann auf Jetzt installieren. Aktiviere jetzt dein Plugin. Okay, unsere Themes und Plugins sind also installiert. Lassen Sie uns jetzt unsere Seiten durchsuchen. Brechen Sie das Pop-up ab. Titel Home, Veröffentlichen, Veröffentlichen. Klicken Sie auf Mit Aliment hinzufügen oder das Pop-up abbrechen. Also lass uns jetzt anfangen. Ich nehme hier diese Struktur. Ich habe eine Mindestgröße von 800 unter Sita. Der Hintergrundfarbcode ist, dass ich diese Farbe speichere. Okay, gehen Sie zu Erweitert und heben Sie die Verknüpfung der Polsterung auf. Und von oben gebe ich 100. Gehen Sie jetzt zurück zum Layout. Und auf dieser geschnittenen Seite behalte ich meinen ersten Abschnitt in voller Breite bei. Jetzt wähle ich diesen Container aus, bei dem der Inhalt zu 40% so ausgerichtet ist, dass die Objekte mittig ausgerichtet werden. Klicken Sie auf das Plus-Symbol und suchen Sie nach dem Bildkarussell Wählen Sie also Ihre Bilder aus. Ich wähle diese drei Bilder aus. Klicke auf Neue Galerie erstellen. Du kannst es einfach von hier löschen, ok. Aber ich möchte es sofort zur Galerie hinzufügen. Ich speichere diesen. Also kannst du es von hier löschen, okay. Und von hier aus können Sie weitere Bilder hinzufügen, wenn Sie möchten. Klicken Sie jetzt auf Galerie einfügen. Bildauflösung bis zur vollständigen Folie zum Anzeigen. Ich möchte jetzt eine Folie mit den vorherigen Pfeilsymbolen. Ich weiß nichts von hier, also nichts. Klicken Sie auf zusätzliche Optionen. Autoplay, ich wähle s, pausiere beim Hover und deaktiviere das Du kannst dich auf alle Dinge einstellen. Autoplay-Geschwindigkeit, ich gebe einen Wert an, und Sie können jetzt sehen, dass hier Effekt ist, Folie ist ausgewählt, und das ist der Grund, warum Bilder gleiten Und ich wähle den Fade-Effekt. Jetzt sehen Sie, Sie können sehen, dass das gut aussieht. Okay, jetzt ist das erledigt. Gehen Sie jetzt zu Style Tap. Grenzradius, ich gebe einen Grenzradius von 300 Pixeln an. Und jetzt können Sie sehen, dass die Ecken um 300 Pixel abgerundet sind. Wählen Sie nun diesen Container auf der rechten Seite mit dem KCN-Plus-Symbol von 60% aus, ziehen Sie eine Überschrift, ändern Sie die Überschrift und tippen Sie auf Stil Textfarbe weiß, Typografie, Größe, ich mache 102 Pixel und Und Sie können sehen, wie toll diese Überschrift aussieht. Klicken Sie jetzt einfach mit der rechten Maustaste und duplizieren Sie zu dieser Überschrift. Ändern Sie den Inhalt. Zukunft der KI, denke ich an den Stil und die Typografie, ich mache eine Größe von 120 Pixeln Gehen Sie in der CSS-Klasse zum Tab „Erweitert“. CSS-Klasse, ich habe einen Gradientenstrich hinzugefügt. Scrollen Sie nach unten und öffnen Sie den benutzerdefinierten CSS-Code. Ich werde hier meinen Code einfügen. Ich habe meinen Code eingefügt, und Sie können diesen schönen Farbverlauf sehen . Klicken Sie jetzt auf das Com-Plus-Symbol ziehen Sie dieses Widget unter diese Überschrift Ich habe meinen Text hier eingefügt, gehe zu Stil und tippe auf „ Farbe weiß“ und „Typografie Größe 15, gehe unter Inhalt aus Text, ich verwende hier Breaking Tag, veröffentliche deinen Klicken Sie nun auf das Plus-Symbol fügen Sie den Container und die Richtung hinzu. Klicken Sie auf das Plussymbol, nehmen Sie einen weiteren Container nach rechts und duplizieren Sie ihn. Wählen Sie nun diesen Container auf der linken Seite und Breite aus. Ich mache 60% Richtung zur Zeile, ausgerichteter Inhalt Mitte und Mitte und Lücken mache ich Null. Gehe zu Starter, B-Grundfarbe Ich mache Schwarz. Klicken Sie nun auf das Plus-Symbol, ziehen Sie einen weiteren Container und gehen Sie mit 45% zu Starter Typ Bgroun, ich füge ein Bild hinzu. Klicken Sie auf „ Bildauflösung auf volle Auflösung einstellen“. Klicken Sie nun auf das Plus-Symbol ziehen Sie eine Überschrift auf die rechte Seite des Bildes Ja. Jetzt ändere einfach den Stil, tippe auf die Schriftfarbe Weiß, Größe 24, Gewicht 900. Jetzt wähle ich diesen äußeren Behälter und gebe den Rand an. 20 Pixel unter dem Layout. Ich gebe der Lücke hier 20 Pixel. Also minimiert es jetzt. Und hier, jetzt sieht es gut aus. Wir müssen nichts anderes ändern Wählen Sie jetzt diesen Container mit 75% aus, klicken Sie auf das Plus-Symbol suchen Sie nach der Symbolliste. Ich habe es hierher gezogen. Ich werde den Titel ändern, meinen zweiten Titel einfügen Jetzt wähle ich das Symbol. Ich wähle dieses Symbol. Einfügen, zweitens öffnen, nach Scheck suchen. Ich werde in allen Titeln dasselbe Symbol wählen . Gehe zum Stil. Sie können den Abstand dazwischen anpassen. Ich behalte zehn Pixel, Ausrichtung links. Sie können den Teiler hinzufügen, das Symbol öffnen, Weiß einfärben, Größe 18 und Abstand, ich gebe fünf Pixel, horizontale Ausrichtung mittig, vertikale Ausrichtung mittig, Text öffnen, Typografie öffnen Größe 15, Gewicht, 300 und Farbe Ich mache Weiß. Jetzt wähle ich diesen Behälter mit ausgerichtetem Inhalt und Einzelposten in der Mitte aus. Also minimiere das jetzt. Sie können sehen, dass es viel Platz gibt. Also werde ich das jetzt anpassen, es öffnen, diese Überschrift unter dem Tab „Erweitert“ auswählen , am Rand entlang, und von unten mache ich 55 Pixel. Auf diese Weise habe ich diese Überschrift unter „Erweitert “ ausgewählt und habe ich diese Überschrift unter „Erweitert “ ausgewählt ihr den Rand gegeben, und von oben habe ich ihr -30 gegeben Gehen Sie also unter Typografie und Zeilenhöhe zu Stil. Okay. Also minimiere das und der linke Teil ist fertig. Ich ziehe diesen Container. Richtung Zeile, ausgerichteter Inhalt Mitte und Mitte und Lücke, die ich hier mache, Null Jetzt Picom-Symbol. Ich suche nach Search Guard. Ich ziehe diesen Exprosearch-Teil. Layout, ich wähle Classic. Sie können auch diese anderen Optionen erkunden. Platzhalter. Ich entferne das und schreibe hier. Gehen Sie unter Sita unter Typografie, Familie öffnet sich und Gewicht 300 Breite Oberschenkel ergibt 1.000 Höhe, 100 Hintergrundfarbe, ich mache es reinweiß. Und was den Fokus angeht, ich möchte nichts ändern. Okay, also jetzt Randradius 101 von allen, trennen Sie die Verbindung zur Polsterung Und von der linken Seite mache ich 50. Öffne die Button-Option. Hier, Schriftfarbe, ich mache Schwarz. Die Textfarbe ist das. Also mache ich es schwarz. Und die Hintergrundfarbe, ich mache es weiß bei Hover-Text, weiß, und der Hintergrundfarbcode ist drei CCC Wenn ich jetzt mit der Maus drüber fahre, kannst du diesen schönen Effekt sehen Größe des Symbols. Hintergrundgröße können Sie von hier aus auf diese Weise anpassen, die Verknüpfung der Polsterung aufheben und von der rechten Seite aus gebe ich ihr 40 Pixel Gehen Sie jetzt zu Advanced Tech und passen Sie den Rand an und von links mache ich Jetzt können Sie sehen, dass wir unsere Suchleiste hier nicht sehen können. Also gebe ich dem Zentax eins. Okay, jetzt kannst du es sehen, und von der rechten Seite mache ich -20 Klicken Sie jetzt auf das Plus-Symbol, ziehen Sie einen Container hierher, Richtung, Zeile, Start und Start, gehen Sie zu Advancter Ich mag hier CSS-Klasse, Zutatencontainer, scrollen Sie nach unten und unter benutzerdefinierte CSS-Option füge ich meinen füge ich Sie können also diese schönen leeren Farben sehen und die Farben von hier aus anpassen Okay. Öffne jetzt die Layoutoption, löse die Verknüpfung zum Rand und von oben gebe ich -55 Hier sehen Sie die Farbverlaufscontainer auf der Rückseite der Suchleiste Dafür gebe ich den Z-Indexwerten eins, klicke jetzt mit der rechten Maustaste und kopiere sie mit der rechten Maustaste und füge sie in diese Symbolliste ein. Ich lösche diese beiden. Hier schreibe ich den Textfülltext und das Symbol, das ich hier kalt verwenden werde. Wir konzertieren. Gehen Sie nun unter der Symboloption zu Style Tech. Farbe, ich wähle hier Schwarz. Öffnen Sie den Text unter Typografie und warten Sie um 900 Uhr und klicken Sie auf Farbe Klicken Sie nun auf das Plus-Symbol. Eine Überschrift auf die rechte Seite ziehen. Ich tippe unter Stil auf X Farbe Schwarz, unter Typografie, Cam the Pop-Ins, Größe, 15 Pixel, wähle diesen Container von hier aus aus, ich lasse hier beginnen , dass ausgerichteter Inhalt beginnt, weil ich diese Überschrift an der Startposition haben möchte Klicken Sie jetzt auf das Plus-Symbol, um nach einem Zähler zu suchen, und ich verwende diesen Zähler Endnummer zwei und dem Zahlensuffix. Hier werde ich das K-Suffix verwenden. Gehen Sie zu Stil und tippen Sie auf Titelposition. Also wähle ich die Titelposition danach, wenn du vorher wählst, damit du sehen kannst, dass unser Titel jetzt ganz oben steht. Also wähle ich die horizontale Ausrichtung des Titels als Start und die Titelposition danach und die Nummernposition Ich wähle Start, um die Nummer zu öffnen. Textfarbe weiß, unter Typografie, Pop-Ins und Größe 70 Pixel und Gewicht 900 und Titel unter Typografie, Familien-Popins und Größe 20 unter Erweitertes Scrollen nach unten, öffnen Sie die benutzerdefinierte CSS-Option Ich möchte den Text auf der Rückseite des Spiels als Farbverlauf haben. Also lass uns unseren Code hier einfügen. Zuallererst werde ich die Farben ändern. A Das ist okay, ich denke, klicken Sie mit der rechten Maustaste auf Duplizieren. Also werde ich dafür einen Container verwenden. Ich ziehe einen Container hierher und die Richtung, in der ich eine Reihe mache Und ich ziehe diesen Zähler und ziehe ihn hierher. Auf diese Weise ziehe ich diesen Zähler hierher, klicke mit der rechten Maustaste und dupliziere und Lücken mache ich ihn um 30 Pixel Und von hier aus mache ich Platz dazwischen. Okay. Und jetzt ändere ich einfach den Text und die Zahlen. Also lass es uns schnell machen. Okay. Nun, wenn du das minimierst, aber es gibt viel Platz, also werde ich diesen Platz verkleinern, um den Container zu verkleinern Ich gebe hier einen Abstand von 40 Pixeln an. Okay. Sehen Sie sich jetzt hier die linke Seite an. Klicken Sie auf das Plus-Symbol, und ich mache hier ein Bild und wähle ein Bild aus. Ich wähle dieses aus, klicke auf Auswählen. Gehen Sie mit 85% unter Stil. Gehen Sie unter Stylta auf den Link Rand. Und von oben gebe ich hier -200. Okay. Und von der linken Seite, 410 Pixel, kann ich den Ball hier nicht sehen. Also werde ich Zyntax hier als eins geben. Jetzt können wir es also sehen. nun die CSS-Klasse hier wie jetzt unter der benutzerdefinierten CSS-Option ein. Vergewissern Sie sich, dass Sie die CSS-Klasse korrekt geschrieben haben. Also kopiere ich diese CSS-Klasse und füge sie hier ein. Sie können jetzt sehen, dass sich dieser Ball bewegt, weil in meiner CSS-Klasse ein Fehler aufgetreten ist bewegt, weil in meiner CSS-Klasse ein Fehler aufgetreten Veröffentlichen Sie jetzt also Ihre Inhalte. Schauen wir uns die Vorschau an. Sie können also sehen, wie schön unser erster Abschnitt aussieht. 41. Zweiter Behälter: Hallo, Leute. Deshalb werden wir heute einen zweiten Abschnitt erstellen. Also lass uns anfangen. Mindesthöhe, ich mache 800 Pixel unter der Registerkarte Stil, Hintergrundfarbe, Dunkelgrau. Okay. Gehen Sie auf die Registerkarte „Erweitert“, heben Sie die Verknüpfung der Seitenabstände auf und von oben gebe ich 80 Pixel unter der Layoutoption Ich werde diesen Abschnitt zum Posteingang machen Klicken Sie jetzt auf das Oplus-Symbol, ziehen Sie eine Überschrift Unter Star Santa werde ich diesen Text als Verlaufsfarbe erstellen und den Code dafür einfügen Jetzt wiegen die Pop-ins der Familie 400 unter der erweiterten CSS-Klasse Text eins Scrollen Sie unter der Option „ Benutzerdefiniertes CSS“ nach unten. Ich habe meinen Code hier eingefügt. Zu Beginn gebe ich hier die Größe 20 Pixel an. Klicken Sie auf „In diese Überschrift kopieren“ und fügen Sie sie hier ein. Ich habe hier Break Tag unter dem Tab Stil, Alignment Center, Typografiegröße 65 Fixer, Zeilenhöhe verwendet unter dem Tab Stil, Alignment Center, Typografiegröße 65 Fixer, , ich mache 70 Pixel, jetzt gehe Ich entferne diesen Rand. Klicken Sie nun auf PlusCon und ziehen Sie den Container in die Richtung der Zeile. Klicken Sie nun auf das Plus-Symbol, nehmen Sie einen weiteren Container, rechten Maustaste Ich wähle diesen Container unter „Gestaltet“ aus, öffne den Rahmen und den Randtyp auf Vollton, aber die Breite auf drei Pixel und Ich gebe dieses Aquarell und speichere diese Farbe. Und Grenzradius 15 Pixel. Gehen Sie zu Advance Option und heben Sie die Verknüpfung zwischen den oberen 50 und den unteren 50 auf. Von der rechten und linken Seite gebe ich 40 Pixel Klicken Sie nun auf das MPlus-Symbol und suchen Sie nach dem Symbol Box. Klicken Sie auf das Symbol und suchen Sie nach Ich nehme das Symbol. Wenn Sie hier klicken, werde ich den Stapel und die Form als abgerundet ändern und die Überschrift ändern Gehe auf die Startausrichtung links und das Icon Space, ich gebe 30 pro Pixel Öffnen Sie die Icon-Option. Primärfarbe, ich wähle hier Schwarz und später werde ich als Primärfarbe Schwarz wählen. Gehen Sie zurück und Größe 35 Pixel, öffnen Sie die Inhaltsoption, Farbe, Sie können Ihrem Titel eine Farbe geben, also mache ich ihn weiß und typografisches Familien-Popping, Größe 25 Fixer und Typografie, Pop-Pints und Pizza in Größe 17. Sie können hier sehen, dass die Hintergrundfarbe des Symbols schwarz ist. Also möchte ich es mit einem Farbverlauf versehen. Gehen Sie also unter Erweitert, öffnen Sie die benutzerdefinierte CSS-Option und ich füge meinen Code hier ein. Sie können hier also den Farbverlauf unter der Option „Symbol“ auf der Registerkarte „ Stil“ sehen . Sekundärfarbe, Sie können die Farbe des Symbols ändern, also mache ich es schwarz. Und auf Hop mache ich Schwarz. Ich reduziere es, weil es so groß ist. Ich mache 30 Schweine draus. Klicken Sie jetzt auf das Plus-Symbol. Es wird nach dem Button-Widget gesucht. Ich ziehe diese Schaltfläche und ändere die Textur. Icon, suche nach rechts. Lass uns wählen. Wählen wir dieses RO, klicken wir auf Concert und Icon-Position und Icon-Abstand zehn Pixel, gehen wir zur Srta-Position links und Typografie Pop-Up in Größe 17 Pixel Text, Textfarbe im Normalzustand, Weiß und Hintergrundfarbe, ich mache es rein transparent Jetzt ist dieser Abschnitt fertig. Ich werde das einfach duplizieren und jetzt diesen Slack This Button löschen diesen Slack , und ab hier gebe ich den Abstand auf Null Pixel Jetzt ändere ich nur noch den Text und die Icons. Also lass uns schnell werden. Ich finde hier nicht das Symbol, das ich will. Dafür brauche ich also einen Plugin-Element-Sketch. Also lass uns das einfach herunterladen. Gehe zu Plugins. Sie können hier sehen, ich vergessen habe, das Plugin zu installieren. Lade deine Seite jetzt neu. Also wenn ich jetzt hier anfange, Such-Widget, wenn ich hier nach Suchbegriffen suche, werde ich wählen diesen Tipp Stil kopieren und einfügen. Okay. Veröffentlichen Sie jetzt, minimieren Sie die Leiste. Okay. Ich möchte den Platz hier verkleinern, also wähle ich meinen übergeordneten Container unter „ Erweitert“ aus und entferne die Randverknüpfung und von unten mache ich hier -15, okay 42. Dritter Container: Hallo, Leute. In diesem Video werden wir also unseren dritten Abschnitt erstellen. Sie können sehen, wann ich auf meine Website neu lade. So können Sie diesen schönen Effekt sehen. Und wenn ich mit der Maus über meinen Button fahre, kannst du diese wunderschöne Verlaufsfarbe sehen Also lass es uns schaffen. Mindesthöhe, ich mache 650 Pixel unter Styletap. Geben wir ihm eine Hintergrundfarbe. Dunkelgrau. Jetzt das ClickPlus-Symbol, das hier einen Container hinzufügt Ich mache es 630, tippe auf Stil, öffne die Rahmenoption, setze den Randtyp auf Vollton und die Rahmenbreite, ich mache Pre Pixel, Randfarbe Ich gebe Radios für Verfärbung und Rahmen. Geben wir ihm 15 Pixel von allen Seiten. Gehen Sie unter Fortgeschrittene zur Handhabung der Polsterung. Von oben mache ich 80 Pixel, unten 90 und links 60 Pixel Jetzt PC plus Symbol, und ich kopiere diese Überschrift, füge sie hier ein. Unter „Erweitert“ entferne ich zunächst die Ränder und unter Ausrichtung starten, links ausrichten, mit der rechten Maustaste klicken und einfügen, gehe zur Registerkarte Stil, Ausrichtung links, öffne ich die Typografie Ich möchte nichts ändern, gehe zum Tab Inhalt und werde Pre-Tag hier auf diese Weise verwenden Kopieren Sie es jetzt hierher, fügen Sie es zunächst hier ein und entfernen Sie den Rand. Teil des Titels hier. Ich wähle hier Text aus, und hier verwende ich das Baking-Tag, gehe zu Sitab und öffne die Typografie Ich werde diese Zeilenhöhe entfernen und erweiterte Größe setzen. Ich mache hier 18. Okay. Klicken Sie nun auf das Las-Symbol und fügen Sie hier einen Container hinzu. Ich nehme diesen Container hier, Richtung, Zeile, ausgerichteter Inhaltsanfang und Zeilenmitte. Ich mache hier jetzt 60% Breite, klicke auf das Plus-Symbol. Ich dupliziere nur diese Liste, rechtsklicken und kopieren, rechten Maustaste klicken und einfügen Ich werde nur den Text ändern. Ich suche nach einem Symbol. Jetzt suche ich nach einem Video. Lass uns diesen nehmen. Klicken Sie auf Konzert. Ich verwende dieses Go unter Sitab hier mache ich Leerzeichen 15 Pixel, öffne die Icon-Option, Größe mache ich 20 und Lücke zehn Pixel, öffne die Textoption, Größe mache ich 17 Pixel und Gewicht 500 und Farbe weiß Fügen wir einfach den Code hier ein. Runterrollen. Klicken Sie jetzt einfach mit der rechten Maustaste und duplizieren Sie in den Abschnitt. Und ich ändere den Text. Hier vergrößere ich die Lücke. Hier behalte ich einen Abstand von 70 Pixeln. Also werden wir jetzt unseren tollen Button erstellen. Lass uns das erstellen. Ich habe hier meinen Knopf geknackt Wir werden den tollen Button erstellen. Also lass mich hier den Titel schreiben, erstelle ein kostenloses KI-Video. Hier werde ich das Symbol wählen. Nehmen wir dieses eine Symbol und positionieren es auf der Registerkarte Stil, öffnen wir die Typografie , die Pop-ins und Größe 15 Pier, Gewicht, ich mache 600 Textfarben, lassen Sie uns es schwarz machen Bei einem Randradius von 15 Pixeln wird der Abstand von oben aufgehoben. Ich gebe 25, rechts, 30 Pixel, unten 25 und links wird der Abstand von oben aufgehoben. Ich gebe 25, rechts, 30 Pixel, unten 25 Okay. Gehen Sie jetzt weiter. Ich werde den Hintergrund mit Farbverlauf machen. Deshalb habe ich dem Hintergrund keine Farbe gegeben. Ich gebe den Rand von oben und das Pixel an, scrolle nach unten und füge unter der Option „Benutzerdefiniertes CSS“ meinen Mantel ein, um ihm eine Verlaufsfarbe zu geben Sehen Sie hier, wenn ich mit der Maus über meinen Button fahre, wie schön sich diese Farben bewegen Dieser Button sieht wirklich Ich mag ihn wirklich. Klicken Sie auf das Com Plus-Symbol. Ich ziehe einen Container. Ich mache die Breite 15% und die Richtung der Zeile klicke auf das Symbol Com plus und ziehe das Bild-Widget hierher Die Bildauflösung ist voll. Wählen wir das Bild aus. Dieses Bild, Gehe zu Style, tippe auf Breite, Zug, maximale Breite des Pools und Höhe des Reifens, was 420 Pixel ergibt. Objekt als Deckblatt geeignet, dann unter „Erweitert“. Jetzt gebe ich hier die Marge an. Trennen Sie also zunächst die Verknüpfung mit der Marge. Von der oberen Seite mache ich 120 und von der linken Seite machen wir 301 Pixel Gehen Sie jetzt zu Style Tap. Ich möchte ihm eine Grenze geben. Lass es uns mit einem Rand von zehn Pixeln machen. Lass uns ein anderes Bild ziehen. Wähle dein Bild. Dieses Bild, cslecTigerSolution, Pole Under Style Dag-Breite Ich mache sie 50% und maximale Breite auf 30% und Höhe 550 Pixel und Objektbreite unter Vorlaufzeit, die Verknüpfung zum Rand aufheben Und von der oberen Seite gebe ich 55 Pixel und von der linken Seite minus 250 gebe ich 55 Pixel und von der linken Seite minus 250, gehe ich zur Registerkarte Stil. Geben wir ihm einen Rand von ebenfalls zehn Pixeln. Okay, jetzt sieht dieser Abschnitt sehr gut aus. Klicken Sie jetzt auf Veröffentlichen, ich wähle dieses Bild aus. Lassen Sie uns die Animationen hier anwenden. Lassen Sie uns das hier anwenden, das Fading nach rechts und Animationsdauer langsam machen Okay, und das Gleiche gilt für dieses Bild , rechts einfügen und langsam Okay, jetzt veröffentlichen. Also du kannst sehen, dass es wirklich gut aussieht, oder? Sie können sehen, wie schön diese Wand aussieht. Lassen Sie uns hier den Abstand vergrößern, zur Registerkarte Erweitert zurückkehren und die Polsterung aufheben Von oben mache ich 30 Pixel. Veröffentlichen Sie jetzt Ihre Inhalte. 43. Vierter Behälter: Hallo Leute, im heutigen Video werden wir diesen Abschnitt erstellen. Sie können diesen schönen Hintergrund mit Farbverlauf sehen. Und wenn ich mit der Maus über mein Bild fahre, dreht es sich, oder? Also lass es uns erstellen. Ich wähle diese erste Struktur und Mindesthöhe, ich mache 950 Pixel. Gehe zu unformatiert Jetzt gebe ich einen Hintergrund mit Farbverlauf an. Ich wähle Farbverlauf und Farbe. Geben wir an, Sie können die Position auf diese Weise so einstellen Okay. Ich mache 30% der Position meiner ersten Farbe und meines zweiten Farbcodes. Also gebe ich diese Farbe. Sie können die Position der zweiten Farbe anpassen, und ich mache sie zu 50%. Okay. Von hier aus können Sie den Winkel auf diese Weise einstellen, und Sie können den Typ wählen, wenn ich hier Radio wähle, damit Sie sehen können. Und auf diese Weise kannst du sehen, wie sich diese Farben verhalten, wenn du so wählst sehen, wie sich diese Farben verhalten, wenn du Also wähle ich die Position oben rechts, gehe auf den Tab „Erweitert“, hebe die Verknüpfung zwischen den Seitenabständen auf und von oben habe ich 60 Pixel, jetzt Picom plus Symbol, und kopiere in diese Überschrift und füge sie hier unter Seitenabständen auf und von oben habe ich 60 Pixel, jetzt Picom plus Symbol, und kopiere in diese Überschrift und der Stilausrichtung Und kopiere in diese Überschrift, füge sie hier ein und ändere den ändere Tippen Sie unter Stil auf Ausrichtung in der Mitte, ich mache 800, neige den Rand von oben an, ich mache -15, jetzt PC plus Symbol, ziehe Wählen wir dieses eine Bild aus, klicken Sie auf Conslectimage resolution full unter der Registerkarte Stil, Rand Radio, ich mache 30 Pixel unter der Registerkarte Erweitert, öffnen Sie die Transformationsoption, und wenn Sie den Mauszeiger bewegen, gebe ich den Drehungswert als eins an , und jetzt bewege ich den Mauszeiger über mein Bild, sodass Sie sehen können, dass unser Bild um eins rotiert. Ich kopiere es in meine Suchleiste und füge es hier ein. Gehen Sie unter Sita, Breite ich mache hier 600 und Höhe 70 Textfarbe, ich mache Weiß und Hintergrundfarbe ich mache Schwarz und öffne die Button-Option Hier werde ich nichts ändern. Ich möchte hier einige Änderungen vornehmen, zurück gehen und die Button-Option öffnen. Ich entferne die Polsterung. Okay. Und wenn ich mit der Maus darüber fahre, mache ich es rein schwarz Und jetzt, wenn ich mit der Maus drüber fahre, ja, es sieht jetzt gut aus Jetzt ist auch dieses Suchpad fertig Veröffentlichen Sie es und sehen Sie sich die Vorschau an Ich möchte den Platz hier vergrößern. Wählen Sie also dieses Bild aus. mache den Rand und von oben mache ich 20 Pixel, minimiere es Ich denke, wir sollten mehr Platz brauchen. Okay. Veröffentlichen Sie es jetzt. Also ja, 44. Fünfter Container: Hallo Leute, im heutigen Video werden wir diesen Abschnitt erstellen. Wir werden lernen, wie man diese coolen Knöpfe macht. Und wenn ich mit der Maus über meine Icons fahre, kannst du sehen, wie schön das aussieht Also lass uns anfangen. Fangen wir jetzt mit unserem nächsten Abschnitt an. Ich entscheide mich für diese Struktur. Auf der Registerkarte „Stil“ möchte ich den Hintergrund mit Farbverlauf verwenden. Also zuerst Farbe, ich schreibe den Farbcode. Erhöhen Sie die Mindesthöhe. Sie können den Standort auf diese Weise wie folgt anpassen. Ich mache 55%, und für den zweiten, Farbcode ist Ort, ich wähle 80% Typ Radio Position, machen wir es oben rechts. Sie können die anderen Optionen erkunden. Ich hoffe, Sie haben Verständnis. Gehen Sie zu Advanced, entfernen Sie die Polsterung und gehen Sie von oben auf 60 Pixel, 790, zu Style Tech Ich wähle diese Bildposition, Mitte, Anhangzeile, Wiederholung, keine Wiederholung, Displaygröße, Titelbild Ich möchte etwas Text hinzufügen, also klicke auf das Coplus-Symbol und ziehe das Überschriften-Widget Gehen Sie zum Style Tech Alignment Center. Größe 30 und Gewicht 500, ich dupliziere diese Überschrift, füge sie hier ein, ändere den Text Gehe zu Syla 35 und wiege 700. Ich entferne diesen Zeilenhöhenwert. Ich entferne diesen Rand, kopiere ihn in diese Überschrift, füge ihn hier ein, ändere den Inhalt. Gehe zu Srta. Ich mache 600 und Größe 22. Wählen Sie nun diesen Container unter Layout aus. Gerechtfertigter Inhalt, den ich gerade mache und damit Sie in der Mitte der Zeile sehen können , suche ich nach einem Abstandhalter Wenn du irgendwo Platz haben möchtest, so kannst du dieses Widget verwenden Ich mache seinen Wert auf 35 Pixel. Klicken Sie jetzt auf das Coplus-Symbol, suchen Sie nach der Schaltfläche und jetzt werde ich diese Pro-Plugins-Schaltfläche verwenden Ändern Sie den Text hier. Alignment Center, gehe zu Starter mit, lass es uns 150 machen und unter Typografie Poppins Größe 15, x-Farbe weiß und Und wenn ich mit der Maus über die Textfarbe Schwarz und die Hintergrundfarbe fahre, wenn ich mit der Maus über meine Schaltfläche fahre, damit Das sieht gut aus, aber ich möchte es attraktiver machen Wenn ich darauf klicke, siehst du hier verschiedene Animationstypen , wenn du zwei D auswählst, also kannst du hier Animationstypen auswählen und es gibt eine Menge Hintergründe, aus denen du hier wählen kannst. Einzigartig, du kannst wählen. Sie können es also nach Ihrer Wahl anpassen. Ich möchte es vom Animationstyp machen, auf der anderen Seite. Also jetzt, wenn ich mit der Maus über meinen Button fahre, damit du sehen kannst, dass das wirklich gut aussieht Randtyp, ich möchte ihn einfarbig machen, aber WD, ein Pixel und Randfarbe Aber die Schaltfläche mit dem Radius 50 und dem Auffüllen von 20 ist jetzt fertig Klicken Sie nun auf das Plus-Symbol und legen Sie diese Schaltfläche im Container Zuallererst die Richtung der Mitte und Mitte dieser Containerreihe. Lücken zwischen den Tasten, ich mache 30 Pixel. Ziehen Sie jetzt diesen Button hierher. Und duplizieren Sie es noch einmal. Ändern Sie jetzt einfach sofort den Text und hier können Sie sehen, dass unser Text auf diesem Bild nicht deutlich sichtbar ist. Wählen Sie also eingestellt, gehen Sie zum Style-Tag und öffnen Sie die Option für die Hintergrundüberlagerung Hier füge ich ein Bild hinzu. Ich wähle diesen Hintergrund. Ich wähle dieses Bild als Overlay. Sie können hier sehen, dass sich unten eine schwarze Ebene befindet. Und Sie können jetzt sehen, dass unser Text deutlich sichtbar ist, aber um ihn dunkler zu machen, können wir seine Opazität erhöhen, also mache ich ihn auf 0,72 Okay, Sie können jetzt sehen, dass sowohl unser Text als auch unser Bild deutlich sichtbar sind Wählen Sie nun diesen Container aus, gehen Sie zu Erweitert, füllen Sie von allen Seiten 30 aus, klicken Sie auf das Plus-Symbol, klicken Sie rechten Maustaste und kopieren diese Überschrift und fügen Sie sie hier ein, ändern Sie den Text Ich werde die Größe um 45 und das Gewicht um 900 erhöhen und in dieses Texteditor-Widget kopieren Und füge es hier ein, ändere den Text, gehe zu Sita Es ist Farbe. Ich mache. Unter Typografie Größe 16 Pixel und Gewicht 500. Klicken Sie auf das Plus-Symbol, ziehen Sie einen Container suchen Sie in der Zeile nach dem Symbol-Widget Ziehe es hierher. Wählen Sie das Symbol Ida und ich wählen dieses Symbol und sehen die Stapelform abgerundet an. Gehe zu Sita, Primärfarbe Ich wähle diese helle transparente Farbe und die Sekundärfarbe Weiß und weiter über der Sekundärfarbe Schwarz, wenn ich mit der Maus darüber fahre, damit du sehen kannst, gehe von hier zu Erweitert, CSS-Klasse, ich füge ein Gradient-Hover-Symbol hinzu Benutzerdefinierte CSS-Option. Ich füge meinen Code ein. Also jetzt, wenn ich auf mein Symbol gehe, damit du den Hintergrund mit Farbverlauf sehen kannst Jetzt kopiere, dupliziere jetzt dieses Symbol. Jetzt ändere sie einfach. Okay, klicken Sie jetzt auf das Plus-Symbol. Ziehen Sie das Bild-Widget und wählen Sie das Bild aus. Geben wir ihm einen Rand von 15 Pixeln, kopieren diese Schaltfläche und fügen sie hier ein. Gehe zu Advanced und Rand von oben, ich gebe -55. Es sieht jetzt gut aus. Wählen Sie nun diesen Container aus, gehen Sie zu Ser Ber default solid, Randradius 20, und geben Sie dort die Rahmenfarbe Jetzt können Sie sehen, dass es keine Lücke gibt Wählen Sie also den übergeordneten Container aus und verknüpfen Sie ihn mit 40 Pixeln Sie können also sehen, dass dieser Abschnitt jetzt auch fertig ist. Lassen Sie uns auch hier eine Grenze setzen, so gut. Also weniger, mach es auch 20 Pixel. Okay. Veröffentlichen Sie Ihre Inhalte und sehen wir uns die Vorschau an. Wenn du mit der Maus drüber fährst, kannst du sehen, wie schön das aussieht, oder? 45. Sechster Container: Hallo, Leute. Heute werden wir diesen Abschnitt machen. Sie können sehen, wie schön diese Karten angeordnet sind. Es gibt uns drei Fehler. Es sieht wirklich nett aus. Also lasst uns anfangen und diesen Abschnitt erstellen. Also nehme ich eine zweispaltige Struktur und Mindesthöhe, die ich auf diese Weise erhöhe, gehe unter Stil. Ich wähle diese Bildposition, Anhang in der Mitte, Scrollen, Wiederholen, keine Wiederholung, Displaygröße, Titelbild, kopiere in diese Überschrift und füge es hier ein. Kopieren Sie in diese Überschrift und fügen Sie sie hier ein, ändern Sie den Inhalt, fügen Sie Ihren Inhalt hier ein. Ich verwende hier nach fünf Wörtern Dita. Gehe unter Stilausrichtung, linke Größe, ich behalte 60. Richten Sie diese Überschrift ebenfalls linksbündig aus. Jetzt duplizieren, dorthin kopieren und hier einfügen , in die Schaltfläche kopieren. Fügen Sie es hier ein, gehen Sie zum Tag Advanced und entfernen Sie diesen Rand. Ich gebe hier -15. Der linke Seitenteil ist fertig. Lass uns jetzt auf die rechte Seite springen. Auf der Suche nach Carousol ziehe ich dieses Medienkarussell hierher. Sie können den Skin so wählen, wie wenn Sie jetzt auswählen, dass Arousol ausgewählt ist, und wenn Sie Diashow wählen, können Sie es jetzt auf diese Weise sehen jetzt Und wenn Sie Cover Flow wählen, können Sie die Bilder so sehen Also wähle ich hier den Skin aus, Cover Flow und wähle die Bilder aus und wenn ich dieses auswähle, öffne ich den zweiten Punkt. Du kannst den Link auch hier angeben. Jetzt wähle ich diesen Punkt drei, Folien pro Ansicht, zwei, und Folien zum Scrollen um fünf und die Höhe. Ich werde 520 Breite beibehalten, ich mache es zu 100%. Gehe unter Sta. Sie können das Leerzeichen so angeben, aber ich mache es Null, Rahmenbreite drei Pixel, Randradius 50, Randfarbe, ich mache es Öffnen Sie das Navigations-Tag. Navigation sind diese Pfeile. Sie können jetzt sehen, dass es schwarz ist, aber ich mache es weiß. Wenn du diese Pfeile nicht willst, können wir sie von hier aus deaktivieren. Pfeile, Tagnannne. Okay, also mach weiter, ich deaktiviere diese Option. Also habe ich es so entworfen, dass es unsere Medienkaruse ist Ich aktiviere diese Pfeiloption. Wir können nach rechts oder nach links scrollen. Also ich denke, das ist eine gute Option, also habe ich es nie getan. Okay, jetzt ist dieser Abschnitt auch fertig, aber ich wähle diesen Container aus und mache ihn mit ausgerichtetem Inhalt in den Mittelpunkt. Wählen Sie auf diese Weise zu diesem Container das ausgerichtete Inhaltszentrum aus. Jetzt ist dieser Abschnitt auch fertig. Nachdem Sie etwas getan haben, vergessen Sie nicht , auf Publish Burton zu klicken Sehen wir uns jetzt die Vorschau an. Dieser Abschnitt ist also auch fertig. Ich möchte hier eine Lücke machen, also machen wir es auf der Registerkarte „Erweitert“ richtig Ich werde die Polsterung hier von unten angeben. Okay, jetzt veröffentlichen. Und lass uns hier sehen. Okay, jetzt sieht das gut aus. Sie können sehen, wie schön das aussieht, oder? 46. Siebter Behälter: Hallo Leute, im heutigen Video werden wir diesen schönen Abschnitt mit Testimonials erstellen Also lass uns anfangen. Gehe zu Style Gap. Hintergrundtyp Gradient. Position 40% und zweite Farbe. Und Position 70% und Winkel, ich mache hier 165. Okay. Jetzt kopiere, füge, kopiere und füge das Ganze in Schwung, ändere den Text Gut unter der Registerkarte „Stil“, Größe 65, platzieren Sie es in der Mitte, um den übergeordneten Container unter dem Tab „ Erweitert“ auszuwählen , Padding, ich gebe der obersten Seite 50 Pixel, suche nach Referenzen und fügen Sie Ihren Text Auf diese Weise lösche ich diese beiden Elemente und dupliziere Ändere das Bild. Ich habe hier drei Artikel mitgenommen. Lass es uns duplizieren. Ich habe hier vier Elemente genommen und die Haut im Darm, so dass Sie mit naja sehen können, Bildposition mache ich links, Ausrichtung links, Folien pro Ansicht, zwei, aber machen wir es zu 100% unter den zusätzlichen Optionen. Arrows, ich deaktiviere es, Taginierung. Okay. Gehen Sie unter Stil, tippen Sie auf ein Tempo zwischen diesen 30 und der Hintergrundfarbe, Sie können die Hintergrundfarbe sehen. Ich mache Schwarz und den Randradius, ich gebe 15 Pixel. Sie können hier die Flasche sehen. Padding 30, Inhaltsoption öffnen , Lücke, 25 Fixer, Textfarbe Ich mache Schwarz und Größe 250 und Lücke 15. Das ist die Lücke zwischen dem Bild und diesem Text. Sie können den Rand also so aktivieren. Sie können die Grenze angeben, aber ich will sie nicht, also deaktiviere ich sie Rand beträgt zehn Pixel, öffnen Sie jetzt die Bubble-Option Also gebe ich hier die Farbe an. Trennen Sie die Polsterung von oben, ich mache 30, rechts, 25, unten 20 und links 25, und Randradius 15 Piserve hier, ich Rahmenfarbe, ich mache Weiß und Rahmenbreite zwei Piserve Jetzt öffne ich die Registerkarte Inhalt und die Textfarbe Wählen Sie nun diesen übergeordneten Container aus. Und erhöhen Sie die Mindesthöhe 665. Veröffentlichen Sie Ihre Inhalte. 47. Acht Behälter: Hallo Leute. Also im heutigen Video werden wir diesen schönen Abschnitt machen. So kannst du sehen, wie schön der Tapi aussieht. Wenn ich das öffne, kannst du sehen, wie sich die Schriftfarbe verändert hat Die Hintergrundfarbe ist geändert. Das sieht gut aus. Also lasst uns anfangen, es zu machen. Struktur mit zwei Spalten, Mindesthöhe auf diese Weise. Geh unter Starter. Typ des Hintergrunds. Stellen Sie sich vor, Sie wählen das. Sie können sehen, dass sich dieses Bild wiederholt. Also keine Wiederholung, Displaygröße, Titelseite, Scrollposition, Mitte. Okay. Klicken Sie auf das Plussymbol und ziehen Sie ein Bild-Widget Wähle dein Bild. Dieser. Jetzt der richtige Abschnitt, machen wir es schnell. Also kopiere in diese Vergangenheit, kopiere in diese, füge das ein, ändere den Titel. Ich verwende Breakdan hier nach Perfect Word unter der Registerkarte Stil Größe 54 Pixel und 900 Zeilenhöhe, 60 Pixel, klicken Sie auf das Plus-Symbol und suchen Sie nach Accordion Also verwende ich dieses Element-Kit, das Akkordeon-Widget, öffne das, ändere deine Größe und füge die Beschreibung Wenn Sie das deaktivieren, werden all diese Folien so angezeigt Und wenn Sie das aktivieren, immer die erste Folie, öffnet die zweite Folie, ändert den Text, fügt meine Beschreibung ein. Ich lösche das und dupliziere es zu diesem und dem Stil, den ich hier wähle, und los geht's Schau hier, wie schön das aussieht. Gehen Sie jetzt zur Sitab-Typografie, Poppins. Ich muss die Größe nicht ändern, Farbe weiß. Randradius beträgt 40 Pixel die Abstände oben 20, unten 20 und links 35 sowie den unteren Rand auf diese Weise entfernen, können Sie anpassen, sodass ich daraus zehn mache . Öffnen Sie die Beschreibung Sie können also die Farbe ändern. Ich mache die Beschreibung weiß. Und die Familie fügt eine Hintergrundfarbe wie diese ein und gibt dem Rand 40 Pixel öffnet die Rahmenoption. Das ist also auch erledigt. Ich möchte hier eine Sache machen, die Titeloption öffnen und schließen, ich möchte die Farbe in Schwarz und die Hintergrundfarbe Wenn wir also den Tab schließen, ist die Farbe schwarz. Und wenn wir den Tab öffnen, können Sie diese blaue Farbe sehen. Es sieht also gut aus. Und beim Hover-Borderradius möchte ich auch auf 40 Pixel setzen Okay. Also dieser Abschnitt ist auch fertig. Wählen Sie nun diesen übergeordneten Container aus. Wird 60 Pixel groß geschrieben, unter „Erweitert die Verknüpfung der Seitenabstände aufgehoben, und von oben mache ich 50 Slack zu diesem Container und dem ausgerichteten Inhaltscenter . Veröffentlichen Sie jetzt Ihre 48. Neunter Container: Das heutige Video, wir werden eine Preistabelle erstellen. So können Sie sehen, wie diese schönen aussehen. Lassen Sie uns also ohne weitere Umschweife beginnen. Erhöhen Sie die Mindesthöhe unter dem Style-Tag. unter dem Tag „Erweitert“ mit 50 Seitenabständen von oben Kopieren Sie unter dem Tag „Erweitert“ mit 50 Seitenabständen von oben die Option Einfügen Jetzt Symbol plus Symbol, Einen Container ziehen, Zeile Richtung Klicken Sie auf das C-Plus-Symbol. Ich habe noch einen Container gezogen. Jetzt duplizieren Sie es, gehen Sie zur SDA-Hintergrundfarbe. Öffnen Sie die Rahmenoption, standardmäßig ist sie durchgezogen und haben einen Rahmen mit drei Aber für den Radius 15, Pixel, gehen Sie weiter, kümmern sich um die Polsterung und von oben 40, rechts, 45, unten 50 und links Jetzt das LConPL-Symbol und das Überschriften-Widget ziehen . Gehen Sie zu Srta-Ausrichtung und dann unter Typografie eine Plakette mit der Schriftfarbe , um Ihnen deutlich zu zeigen, dass ich es zunächst weiß Wir werden später Schwarz machen, 12 Pixel groß machen und Großbuchstaben transformieren Okay, gehen Sie jetzt unter dem Tag „Erweitert heben Sie die Verknüpfung zwischen den oberen zehn, rechten, 15, unteren zehn und linken Öffne die benutzerdefinierte CSS-Option und füge meinen Code hier ein, damit du den Hintergrund mit Farbverlauf sehen kannst Öffnen Sie jetzt die Layout-Option und Zeile selbst, die ich mache, und Sie können jetzt sagen. Gehen Sie jetzt zur Registerkarte Stil und die Textfarbe, die ich schwarz mache. Also sieh mal hier, das sieht gut aus. Klicken Sie nun auf das Plus-Symbol und nehmen Sie einen Container unter dieser Überschrift. Warten Sie, wählen Sie diesen Container und die Richtung, in der ich die Spalte erstelle. Ziehen Sie nun diesen Container hierher. Klicken Sie auf das Plus-Symbol und ziehen Sie eine Überschrift mit dem Titel Dollar unter die Siletac-Textfarbe Weiß Duplizieren Sie dies und ändern Sie den Titel auf 99 bei Sitec-Größe 55 Wählen Sie nun zu diesem Container und dieser Richtung Zeile Lücken aus und kopieren Sie sie nun in diese, fügen Sie sie hier Ändern Sie den Inhalt unter der Registerkarte „ Kachel“, „Ausrichtung“, „Labor“ und „Familie“, Größe 27, Bleistiftstärke 600. Kopieren Sie nun in diesen Texteditor, fügen Sie ihn hier ein und ändern Sie den Inhalt. Unter dem Style-Tag mache ich das farbig und die Typografiestärke 600 Jetzt verwenden wir die Symbolliste. Anstatt also eine neue Liste zu erstellen, kopiere ich sie einfach hierher, das spart uns Zeit. Jetzt ändere ich nur den Inhalt. Okay. Jetzt werden wir auch den Button duplizieren. Wir werden auch auf die Schaltfläche kopieren, den Inhalt auf der Registerkarte „ Erweitert“ ändern und diesen Rand entfernen. Ich gebe sogar den Abstand zu den Top Ten an. Jetzt können Sie sehen, dass unsere erste Preisliste fertig ist. Dupliziere das und lösche es. Okay, veröffentlichen Sie, wählen Sie diesen Container und das Layout aus, erhöhen Sie hier die Mindesthöhe. Jetzt ist das okay. Veröffentlichen Sie es. Wählen Sie diesen äußeren Behälter aus. Lass uns hier den Abstand vergrößern, 30 px veröffentlichen und dir jetzt die Vorschau ansehen. 49. Zehnter Behälter: Hey, Leute, was ist los? Ich hoffe es gefällt euch. Fangen wir mit unserem nächsten Abschnitt an. Erhöhen Sie die Mindesthöhe auf der Registerkarte Stil. Hintergrundfarbe. Ich habe meinen Mantel geklebt. Kopieren Sie das hier. Füge es ein. Kopieren Sie das hier, fügen Sie es ein. Ändere den Inhalt. Registerkarte „Stil“, Größe 55 Pixel, TCN plus Symbol Ziehen Sie auf der Registerkarte „Stil“, Größe 55 Pixel, TCN plus Symbol einen Container in Richtung Zeile Jetzt PCN plus Symbol, auf Suche nach einer Bildbox Ich nehme das Bildfeld des Elements damit ihr sehen könnt, wenn ich zoome, wenn ich mein Gewicht übersteige, sodass ihr den Zoom-Effekt sehen könnt Also wähle ich dieses Bild aus und dupliziere es. Okay, wählen Sie jetzt diesen und den Inhaltsbereich aus, ich nehme eine schwebende Box All diese Optionen sind sehr gut. Du kannst das erkunden. Du kannst also sehen, wenn ich mit der Maus über mein Bild fahre, der andere Inhalt öffnet den Hauptteil und den Titel und ich will keine Icons, also deaktiviere es, bitte die Beschreibung Ich lösche das , weil wir es nicht sehen können , wir können es nicht richtig sehen Du kannst also sehen, wie schön das aussieht, oder? Eine solche Ausrichtung kannst du anpassen, aber ich mache die Mitte. Öffnen Sie jetzt die Button-Option. Ich deaktiviere das, gehe zur Registerkarte Stil, Höhe, ich mache 80, Breite, ich mache 80. Hintergrundfarbe schwarz. Öffnen Sie die Bildoption, Randradius 20. Sie können jetzt abgerundete Bilder sehen, öffnen Sie die Option Körper, Randart einfarbig, Aquarell Jetzt Titel. Also den Abstand, den du sehen kannst. Jetzt mache ich zehn, öffne die Typografie, pops, 20 weiße Schweinefarben, öffne den schwebenden Stil und bei Over machen wir eins zu eins Wenn ich jetzt mit der Maus drüber fahre, sodass du sehen kannst, dass die Höhe okay ist Jetzt werden wir das einfach duplizieren und dieser Abschnitt ist auch fertig Lösche das jetzt, ich ändere nur die Bilder. Schieben Sie das unter das Layout und erhöhen Sie die Höhe. 50. Elfter Behälter: Hey Leute, in diesem Video werden wir diese beiden schönen Abschnitte machen. Lass uns anfangen. Ein Style-Tab, Hintergrundfarbe und Kopieren in diese Paste, Op und Paste. Ändere den Titel unter Style Tear Size I make 65. Klicken Sie nun auf das Plus-Symbol, ziehen Sie einen Container und klicken Sie in der Richtungszeile auf das O-Plus-Symbol, ziehen Sie einen weiteren Container und duplizieren Sie diesen. Ich ziehe dieses Widget auf Image this one, Bildauflösung, volle Dieta Machen wir es zu einem vollständigen Standardobjekt mit Cover Ja, das ist okay. Der Grenzradius beträgt ein Pixel. Wählen Sie zunächst diesen Container aus und legen Sie seine Richtungszeile fest. Jetzt KCN plus Symbol, auf Suche nach dem Symbolfeld. Ich nehme das Elements C-Symbolfeld, dieses hier. Ich möchte keine Symbole, also deaktiviere ich das Den Titel ändern, die Beschreibung ändern, in den Lesemodus und ich will die Schaltfläche, also aktiviere die Bezeichnung, ändere den Titel, ich schreibe Und das Symbol deaktiviert es, öffne die Einstellungen. Gehen Sie jetzt zu Sita, der Grundfarbe, und machen Sie sie transparent, Padding Null Ich möchte nicht, dass jemand standardmäßig die Werte löscht, die Inhaltsoption jetzt öffnet, also die Textfarbe, die Titelfarbe, weiß machen und angeben, wer der Farbcode ist, also wenn ich jetzt mit der Maus über mein Symbolfeld fahre, damit Sie sehen können, dass die Titelfarbe blau wird, wenn Sie den Mauszeiger darüber bewegen mein Symbolfeld fahre, damit Sie sehen können, dass die Titelfarbe blau wird, wenn Sie sehen können, dass die Titelfarbe blau wird Also jetzt unter Typografie Poppins Größe 45, Gewicht 700, jetzt Beschreibung, Beschreibung, Farbe Okay, und ich kopiere den Farbcode und füge ihn auf O ein. Okay. Und unter Typografie hat Poppins eine Größe von 17 Pixeln. Öffne die Button-Option, Padding, ich gebe 20 jetzt die Verknüpfung von der rechten Seite auf, 40 und von der linken Seite ebenfalls 40, löse die Verknüpfung zum Rand, von oben gebe ich 12 Pixel ich gebe 20 jetzt die Verknüpfung von der rechten Seite auf, 40 und von der linken Seite ebenfalls 40, löse die Verknüpfung zum Rand, von oben gebe ich 12 Pixel. Öffne die Typografie und warte, ich habe 600 Textfarben, ich mache Schwarz Hintergrundfarbe, ich mache Greint und Border Duo. Geben wir ihm 40 Pixel. Gehen Sie jetzt zu Erweitert und fügen Sie den Code für die Bewertung des Hintergrunds für die Schaltfläche ein, damit Sie wunderschöne Farben sehen können Duplizieren Sie jetzt den gesamten Abschnitt. Wir werden nur kleine Änderungen vornehmen. Also lass uns das machen. Zuallererst habe ich meinen Prent-Container gebeugt, gehe unter Advanced und gebe dem Abstand von oben 50, ich will diese Überschriften nicht, ich will diese Überschriften nicht Okay. Ich werde die Reihenfolge jetzt ändern. Ich habe diesen Container ausgewählt, gehe unter Erweitert und bestelle, starte. Jetzt ändere ich einfach den Text hier, ändere das Bild, dieses, wähle und zu diesem Container, gehe unter Erweitert und Ordnung, StartT-Container jetzt kann ich ihn nicht auswählen, öffne den Navigator und von hier aus habe ich diesen Container ausgewählt Gehe unter Erweitert und ich gebe die horizontale Ausrichtung plus 60. Jetzt ist das an der richtigen Stelle. Okay, Sie können also sehen, wie einfach wir diesen Abschnitt gemacht haben. Klicken Sie nun auf das Plus-Symbol. Ich nehme hier einen Container und die Breite, ich mache 26%. Jetzt Picon plus Symbol, nimm einen weiteren Container in diesem Container, richte Inhaltszentrum aus und gehe unter Erweitert Ich gebe einen Abstand von zehn Pixeln von außen an und die Position entspricht dem absoluten Offset, der horizontalen Ausrichtung -55 und dem Offsetwert der vertikalen Ausrichtung 45 Also klicken Sie jetzt auf das Plus-Symbol. Fügen Sie eine Überschrift hinzu, ändern Sie den Titel am 25. Dezember, brennen Sie die TIA-Farbe schwarz, Ausrichtung Mitte, Pop-Pins Größe 25. Jetzt mache ich die Farbe weiß, Gewicht 700. Jetzt mach dich langsam an diesen Container. Ich möchte den Hintergrund mit Farbverlauf erstellen. Ich füge meinen Code hier ein. Okay, wählen Sie die Überschrift aus und machen Sie sie jetzt schwarz. Okay. Also, jetzt ist dieser Abschnitt fertig. 51. Ihre Website reaktionsschnell machen: Video, wir werden unsere Website für Tablets und Handys responsiv gestalten . Lassen Sie uns also zum Tablet-Porträt springen. Ihr könnt also sehen, Leute, das sieht auf dem Tablet so aus. Lassen Sie uns zuerst zu diesem Bereich auf der rechten Seite korrigieren, also habe ich meine Überschrift ausgewählt. Installieren Sie die Tab-Größe mit einer Obergrenze von 65 Pixeln. Gehen Sie jetzt zur Registerkarte Erweitert und entfernen Sie den Rand. Okay. Wählen Sie nun diese Überschrift aus. Ich behalte die Größe bei 70 Pixeln. Wählen Sie nun dieses Texteditor-Widget aus und entfernen Sie den Rand. Gehen Sie unter Style-Tag, ich werde die Standardgröße beibehalten und die Zeilenhöhe erhöhen. Ich habe die Zeilenhöhe von 1,3 Uhr beibehalten. Wählen Sie nun zu diesem äußeren Behälter und seiner Richtung, in der ich bleibe , die Spalte aus und entfernen Sie die Cent-Aline-Elemente , die hier beginnen. Wählen Sie diese Überschrift aus und gehen Sie zum Tab Stil. Ich behalte die Größe von 23 Pixeln bei. Zwischen diesen beiden Texten ist zu viel Platz . Wählen wir das aus. Wenn ich einen Rand von unten gebe, gebe ich einen Rand von unten -40 Wählen Sie nun diesen Texteditor aus, und hier geben wir dem Rand von oben -20 an. Okay. Wählen Sie nun für diese Suche aus. Und gehe zu Style Tech. Ich behalte seine Höhe 70 bei. Ich habe mein erstes Zähler-Widget ausgewählt und das Style-Tag von dieser Nummer aus eingegeben, und lassen Sie uns die Größe festlegen. Ich mache es in der Größe Potty Piger Copy und im PaseTypePast-Stil, wähle dieses Widget aus, gehe enger rein und von hier aus verringere ich die Zeilenhöhe ich Behalten wir es bei 1.1 am Kopieren und Einfügen, Einfügen im Stil. Wählen Sie nun das aus. Ich behalte die Größe 50 Pixeln und die Zeilenhöhe, verringern wir sie. Ich habe die Zeilenhöhe von 1,2 m beibehalten. Hier sehen diese Karten gut aus, aber ich verringere den Abstand. Ich habe meinen CD-Behälter ausgewählt, gehe zu Advanced und von oben, ich mache 30, ich habe 30 Padding von allen Seiten beibehalten Ich habe 20 Pixel von allen Seiten behalten. Also kopiere in diesen Container und füge den Stil ein. Stil einfügen. Okay. Jetzt sehen diese drei Karten sehr schön aus. Also habe ich meinen übergeordneten Container ausgewählt und verringere die Mindesthöhe. Behalten wir es bei 710 Pixeln. Ich habe mein Style-Tag „Diese Überschrift, gehe in“ ausgewählt . Lassen Sie uns von hier aus die Größe 50 Pixel beibehalten . Wählen Sie dieses Texteditor-Widget aus. Seine Größe behalte ich bei 15 Pixeln. Jetzt wähle ich meinen Disc-Container aus, gehe in Advanctag und lasse den Pelikan von oben laufen, ich mache 50 und auf der linken Seite 20 Pixel oder lass uns 30 Pixel daraus machen Okay. Jetzt habe ich dieses Bild ausgewählt. Vielleicht geh nach Sta. Ich behalte die Höhe hier bei 500. Dieser Behälter ist jetzt okay. Wählen Sie jetzt diese Überschrift aus und Sie unter Sta auf Größe. Lassen Sie uns 55 Pixel beibehalten, diesen übergeordneten Container auswählen und seine Mindesthöhe auf 25 Pixel verringern. Jetzt wähle ich diesen Container und die Lücke aus, indem ich 15 Pixel mache Okay. Jetzt ist dieser linke Teil okay. Gehen Sie zu dieser Überschrift wechseln Sie in den Tab „Stil“ Unter Typografie stelle ich eine Größe von 40 Pixeln Slack bis zu diesem Text-Widget geben wir hier Okay, jetzt müssen wir nichts ändern. Gehe zu dieser Überschrift und tippe dann auf Stil Hier mache ich die Größe auf 45 Pixel und die Zeilenhöhe auf 1,4 Uhr Slack zu diesem Medien-Alzo-Widget, Höhe mache ich 400 ist okay. Slack zu diesem übergeordneten Container, verringere die Mindesthöhe. Das ist okay. Slack zu diesem Testimonial-Karussell Breite, machen wir es 520 Pixel und Slide pro View, wir Und jetzt machen wir es mit dem Tab 955 Style und öffnen die Bubble-Option. Und die Polsterung, ich mache hier zehn Pixel. Ja, das ist okay. Okay, jetzt ist dieser Abschnitt mit den Testimonials auch für weniger Spielraum auf den übergeordneten Container Verringern Sie die Mindesthöhe, 620 ist Hier müssen wir nichts ändern, wir müssen einfach auf diese Überschrift beschränken und sie verkleinern Ich verringere die Zeilenhöhe, die ich um 1.3 Uhr begrenzt habe, um 40 Pixel Zeilenhöhe, die ich um 1.3 Uhr begrenzt habe Okay, dieser Abschnitt ist also auch fertig. Wählen Sie diese Überschrift aus, gehen Sie zur Registerkarte Stil, Größe, ich mache 45 Pixel. Okay, hier, wählen Sie zu diesem äußeren Container gehen Sie zur Registerkarte „Erweitert“. Wir werden hier die Polsterung geben. Auf der rechten Seite mache ich 150 Pixel aus der Richtung, ich mache eine Spalte Gehen Sie jetzt zur Registerkarte Erweitert und heben Sie die Verknüpfung der Polsterung auf. Von der linken Seite mache ich 200, das ist okay und das Gleiche gilt für die Jetzt sieht diese Karte so aus, aber ich denke, ich sollte mehr Polsterung geben, also mache ich 250 Pixel von links und rechts Okay. Jetzt ist das okay. Slack zu diesem Container. Gehe unter Fortgeschritten Ab hier gebe ich dem Padding auch 30 Pixel von allen Seiten Jetzt sieht diese Karte gut aus. Kopieren Sie einfach den Stil und fügen Sie den Stil ein. Stil einfügen. Dieser Abschnitt ist also auch fertig. Lassen Sie uns nun zu diesem Abschnitt springen. Wählen Sie diese Container-Richtung aus. Ich mache eine Spalte und gehe zu den Mitarbeitern im Vorhinein, um die Verknüpfung der Polsterung aufzuheben Hier geben wir auch den Abstand von links und rechts zum Ti-Pixel links und rechts zum Ti-Pixel Jetzt kannst du also sehen, dass das auch fertig ist. Von oben gebe ich die Polsterung bei. Okay, dieser Abschnitt sieht jetzt auch gut aus. Wählen Sie dieses Bild und diese Höhe aus. Lassen Sie uns sagen, 370 Pixel sind okay, Höhe. Wählen Sie diesen Container aus, und hier mache ich 210 Pixel. Okay. Ja, das ist okay. Wählen Sie das aus, öffnen Sie die Inhaltsoption und ich mache 35 Okay. Hier machen wir auch 35 Fixer und wählen diesen Container Machen Sie es auf 210 Pixel und wählen Sie es für dieses Bild Wir werden es auch bei 370 Pixeln behalten. Okay. Also dieser Abschnitt ist jetzt auch fertig. Lassen Sie uns jetzt unsere Website für Mobilgeräte anpassen. So können Sie sehen, wie unsere Website auf unserem Mobilgerät aussieht. Zuallererst Zuallererst Slack diesen Container, gehe in den Bereich Advanced und bestelle Make it Gehe zu dieser Überschrift und tippe unter Stil Ich repariere es um 45. Machen Sie sich jetzt langsam mit dieser Überschrift vertraut. Tippen Sie unter Stil auf. Lassen Sie uns das Ganze um 45 verbessern. Wählen Sie nun den generativen Text aus und heben Sie die Verknüpfung zum Rand auf. Von unten gebe ich -25. Wählen Sie dieses Text-Widget aus, gehen Sie zu Style t und stellen Sie es auf eine Größe von 13 Pixeln Wählen Sie dann diesen Container Hier mache ich die Lücke auf Null, wähle den Text aus. Hier mache ich es auf eine Größe von 20 Pixeln. Wählen Sie zu diesem Such-Widget und gehen Sie zum Stern-Tab. Größe, ich mache 50. Wählen Sie diesen Container aus, gehen Sie zur Registerkarte „Erweitert“ und heben Sie die Verknüpfung zum Rand Und von oben machen wir es auf -40. Wählen Sie diesen Container aus, gehen Sie zum Layout und machen Sie die Lücke auf Null. Okay. Wählen Sie zu diesem äußeren Behälter. Okay. Lassen Sie uns jetzt zum zweiten Abschnitt übergehen, diese Überschrift etwas lockerer angehen und ihr die Größe anpassen Wir müssen an Karten nichts ändern. Okay? Wir müssen uns hier nicht ändern. Verkleinern Sie diesen Text auch einfach. Also mach Pizza der Größe 35. Zeilenhöhe 1,3 Uhr, lockere zu diesem Behälter, mach die Lücken hier Pizza. Wählen Sie den Container aus, trennen Sie den Abstand von oben 40 und von unten, geben wir ihm 40 Pixel und von links 20 Nun, dieser Abschnitt ist auch hier fertig. Slack dieses Bild. Gehen Sie zu Erweitert und heben Sie die Verknüpfung der Polsterung auf. Ich habe dieses Bild ausgewählt, gehe zu „Erweitert“ und öffne den Antwortmodus Hier werden wir uns auf einem mobilen Portrait verstecken. Okay. Also dieses Bild ist okay , weil wir den Rand verschieben. Wählen Sie nun diese Überschrift aus, vergrößern Sie sie um 50 Pixel und verringern Sie die Zeilenhöhe. 1.3 Uhr, es gibt viel Platz. Wählen Sie also den untergeordneten Container aus, verringern Sie die Höhe um 490, wählen Sie diese Überschrift aus, gehen Sie zur Registerkarte „Stil“, stellen Sie ihre Größe auf 25 Pixel ein, wählen Sie diese Überschrift aus, legen Sie ihre Größe auf 20 Pixel fest und wählen Sie den Abstandshalter wählen Sie diese Überschrift aus, legen Sie ihre Größe auf 20 Pixel fest und wählen Sie den Abstandshalter Für die Größe werde ich 20 Pixel machen. Okay, wähle den Container aus und erhöhe seine Mindesthöhe. 700 Pixel. Slack zu dieser Überschrift. Stellen Sie die Größe hier auf 30 Pixel ein, schlaffe bis zum Container Lücke, ich nehme zu. Hier, 32 Pixel und ausgerichteter Inhalt, machen wir ihn zentriert. Ja, jetzt, die sehen gut aus. Okay. Lassen Sie uns nun zu diesem Abschnitt springen und Größe der Überschrift auswählen. Lassen Sie uns es weiter reduzieren. Also 38 Pixel, wähle den Text aus. Ich mache es auf eine Größe von 11 Pixeln. Okay? Und führte zu dieser Überschrift, mach sie kleiner. Machen wir 45 Pizza draus, bleiben dabei, gehen wir unter Inhalt und ziehen pro Ansicht eine Folie heraus. Okay. Und da ich hier 340 mache, müssen wir hier einige Änderungen vornehmen, in den Stil gehen und die Inhaltsoption unter Typografie öffnen Ich mache Pizza der Größe 12. Okay, öffne die Bildoption. Ich mache die Größe hier, 160 Pixel. Okay. Also dieser Abschnitt ist auch fertig. Klicken Sie auf den übergeordneten Container. Verringern Sie die Höhe um 510 Pixel und wählen Sie die Größe dieser Überschrift aus. Ich mache 30 Pixel. Wir müssen nichts mit diesem Adfigus zu tun haben. Okay, also wähle das jetzt aus. Lassen Sie uns die Größe auf 30 Pixel festlegen und die Zeilenhöhe um 1,3 Pixel verringern. Okay. Wählen Sie nun den Souter-Container Verbindung zur Polsterung. Okay. Also trennen wir einfach die Verbindung zu dieser Polsterung und diese Preiskarten sehen auf unserem mobilen Portrait auf unserem Mobilgerät sehr schön unserem mobilen Portrait auf unserem Mobilgerät Wählen Sie nun diese Überschrift aus. Lassen Sie uns hier eine Zeilenhöhe von 40 Pixeln einstellen, um 1.2 Uhr, den äußeren Container auswählen und die Verknüpfung der Polsterung aufheben Okay, du kannst also sehen, dass sie auch wirklich gut aussehen. Wählen Sie diese Überschrift aus, vergrößern Sie sie um 50 Pixel, verringern Sie die Zeilenhöhe, 1:00 Uhr und verstecken Sie sie auch hier, wählen Sie den Container aus. Gehen Sie zu „Erweitert“, „Responsive versteckt“ im Hochformat, wählen Sie „Zu diesem Container“ und gehen Sie zu „ Erweitertes responsives Hyden-Porträt Okay, minimiere das und sieh mal. Das sieht gut aus. Sehen Sie also, wie schön unsere Website auf Mobilgeräten aussieht. O. Ich hoffe, Ihnen hat der heutige Vortrag gefallen. Das war unser heutiges Video. Im nächsten Video werden wir die Menüs erstellen und darauf reagieren. Danke. 52. Kopf- und Fußzeile: Jetzt werden wir unsere Kopf- und Fußzeile erstellen. Lassen Sie uns also zuerst unseren Header erstellen. Zunächst werden wir Menüs erstellen. Dazu gehen wir also zum Erscheinen der Menüs über. Geben Sie Ihren Menünamen, Anzeigeort und das Hauptmenü ein und klicken Sie auf Menü erstellen. Öffnen Sie die Option für benutzerdefinierte Links. Geben Sie von hier aus die URL, den Hash und Startseite ein. Klicken Sie im Text Home auf Zum Menü hinzufügen. Hash Auf diese Weise können Sie mit Offs umgehen. Erstellen Sie auf diese Weise auch andere Menüs Jetzt werden wir unsere Header erstellen, also fordern wir Vorlagen gehen zum Theme Builder Klicken Sie auf die Kopfzeile. Klicken Sie auf Nein hinzufügen Sie können hier auswählen, aber ich werde meine eigene Kopfzeile erstellen, auf das Plus-Symbol klicken und ich wähle diese Struktur von hier aus, Justified Content Center, Aline Items Center, unter SDA Die Grundfarbe behalte ich dunkelgrau. Wählen Sie nun für diesen Container Justified Content Center, Line Item Center aus. Klicken Sie auf das Plus-Symbol, Drager-Bild-Widget. Wählen Sie von hier aus das Bild aus. Ich wähle dieses Bild aus und klicke auf Konsulat. Das ist also mein Logo. Bildauflösung unter Stilbreite 100%, maximale Breite 100%. Okay. In der Mitte des Containers klicken Sie auf das Plus-Symbol und suchen Sie nach Navigationsmenüs. Ich wähle dieses Element-Kit, Navigationsmenüs, wähle Menü. Menü. Okay, das sind die Menüs, denen wir begegnen, und ab hier wählen wir Responsive Breakpoint Wir wählen die Menüeinstellungen für Mobilgeräte und wählen von hier aus. Ich wähle Line, also wähle ich dieses One-Click-Konzert. Okay. Diese Hamburger-Ikone Auf dem Handy anzeigen. Geh jetzt unter Srta. Ich mache die weiße Farbe des Menüs. Also für das Öffnen der Menüelemente, Stil, Element, Farbe, ich mache Weiß. Okay. Jetzt können wir die Änderungen sehen. Hintergrundfarbe, die ich so mache, Sie können die Hintergrundfarbe auswählen, aber ich mache sie transparent. Grenzradius, ich mache zehn Pixel. Okay, jetzt klicken Sie auf Hover. Hintergrundfarbe beim Hover, ich möchte die gelbe Wenn ich also mit der Maus über mein Menü fahre, können Sie es so sehen, aber ich werde es attraktiver machen Ich möchte, dass die Textfarbe schwarz ist, wenn ich mit der Maus darüber fahre. Okay, jetzt können Sie sehen, klicken Sie auf aktive B-Hintergrundfarbe an der aktiven Position Ich kopiere diesen Code. Ich habe diese Farbe beim Schweben belassen und diese Farbe bei Aktiv kopiert Hintergrundfarbe, die ich mache, und Textfarbe schwarz. Von hier aus der Typografie kommt die Familie ins Spiel. Öffnen Sie jetzt den Menü-Wrapper. Sie können die Menühöhe anpassen. Also behalte ich es bei 70 70 Pizza. Okay. Ich möchte nichts ändern. Wählen Sie nun diesen Container aus. Mitte und Mitte. Klicken Sie auf das Plus-Symbol und suchen Sie nach dem Symbolfeld. Ich nehme diesen. Wähle das Symbol. Dieser. Klicken Sie auf Konzert. Okay, und stapeln Sie Form, Kreis. Okay. Und Titel, Ruf um Hilfe. Okay, das ist also die Telefonnummer. Gehen Sie unter Style-Tag, Icon-Position, Linksausrichtung , vertikale Ausrichtung mittig und Icon-Abstand 14 Pixel, damit Sie es wie folgt anpassen können. Ich mache also 14 Pixel, öffne das Icon-Tag. Primärfarbe, also keine. Ich möchte den Hintergrund transparent machen. Okay. Also ich mache nichts mit Primärfarbe, sondern mit Sekundärfarbe, ich mache Größe 20 Pixel. Gehe jetzt zum Inhalts-Tag. Die Farbe Cyto, ich mache diese Farbe Die Typografie öffnen, Pop-Ins, Größe 15 Pixel. Okay, und öffne die Beschreibung. Beschreibung, ich verwende reinweiße Farbe und Typografie Bit 700. Okay. Lassen Sie uns jetzt den Hintergrund transparent machen. Also benutzerdefinierte CSS-Option, damit Sie den Hintergrund mit Farbverlauf sehen können. Nun, das ist unser Header. Lassen Sie uns nun unser Header-Tablet und unser Handy responsiv machen. Auf Talt sieht unser Header so aus. Wir müssen das Logo nicht ändern, aber lassen Sie uns den Unterstil der Menüs dort korrigieren Öffne den Stil des Menüelements in normalem Captic White. Darin können Sie oder Sie können die Farbe ändern. Ich mache Schwarz drüber, okay. Und das Gleiche gilt für das aktive Okay. Öffne die Typografie. Ich mache die Größe meiner Menüs auf 11 Pixel. Okay. Unsere Menüs sehen gut aus. Minimiere es. Und ja, unser Header sieht auf dem Tablet wunderschön aus. Hier möchte ich eine Sache tun, den Container auswählen, unter „Erweitert“ gehen, die Polsterung aufheben, diesen Container auswählen, die Polsterung aufheben, diesen Container auswählen, die Polsterung aufheben Okay. Ich minimiere es. Und ja, jetzt ist es okay. Gehen Sie jetzt in den mobilen Modus. Lassen Sie uns nun unseren Header für Mobilgeräte anpassen. Zuallererst wähle ich diesen Container aus. Öffnen Sie die Responsive-Option hoch auf dem Handy Portrd. Okay? Wählen Sie nun diesen Container aus und gehen Sie zur Registerkarte Layout. Begründeter Inhalt, damit es losgeht. Ab hier beginnen die Einzelposten. Und Lücke Null. Okay. Und Mindesthöhe ergibt Breite Ich mache 200 Pixel. Okay. Ich habe den übergeordneten Container des Hamburger-Symbols ausgewählt Die Layoutbreite von Go under beträgt bereits 100 Pixel. Von hier aus schaffen es die Einzelposten am Ende. Jetzt ist diese Hamburger-Ikone also am Ende. Okay. Breite, ich mache 100 Pixel. Okay, jetzt kannst du unser Hamburger-Symbol sehen und diese Lok ist in der einen Reihe Klappen Sie den übergeordneten Container, gehen Sie zum Layout-Tab und heben Sie die Verknüpfung der Lücke Spaltenlücke, ich mache 20 Pixel. Wählen Sie jetzt das Hamburger-Symbol und wählen Sie den Stil. Öffne den Hamburger-Stil. Zuallererst die Farbe des Hamburger-Symbols. Lass es uns weiß machen. Okay. Jetzt können wir die Änderungen sehen was wir brauchen. Symbolgröße 20. Okay, Howard, Hover, ich will es weiß machen Sie können sehen, dass es beim Hover immer noch weiß und in der Hintergrundfarbe ist , lassen Sie es uns schwarz machen Klamotten auf Hover schalten, Sie können sehen, dass unser Menü sehr mobil ist, also sieht das sehr gut Und wenn Sie mit der Maus darüber fahren, können Sie diese blaue Linie und den schwarzen Hintergrund sehen, was sehr gut aussieht Gehen wir jetzt zurück. Unser Kopf ist ruhig. Importiere es jetzt einfach. Klicken Sie auf Veröffentlichen. Fügen Sie die Bedingung für die gesamte Site hinzu, klicken Sie auf Speichern und schließen. Okay. Öffnen Sie jetzt die Website, veröffentlichen Sie Ihre Website und laden Sie sie erneut Ihr könnt also sehen, wie schön unser Header aussieht. Ich will das beim Scrollen haben. Unser Header sollte klebrig sein. Klicken Sie also auf den Header, laden Sie den übergeordneten Container herunter und gehen Sie zum Tab Erweitert Öffnen Sie von hier aus die Bewegungseffekte, Sticky Top. Okay. Minimiere jetzt die Messlatte. Wenn ich zu meiner Website scrolle, können Sie sehen, dass unser Header oben klebrig ist. Und wenn ich mit der Maus über meine Menüs fahre, sehen diese fantastisch aus Okay, unsere Website sieht also sehr schön aus, oder? Was ich jetzt will, wenn ich auf mein Zuhause klicke, sollte es zu mir in diesem Bereich weiterleiten. Um dies zu tun, klicken Sie auf AdditPage, kopieren Sie die URL und stellen Sie sicher, dass Sie nicht zu diesem Hash kopieren Stellen Sie sicher, dass Sie den übergeordneten Container unter Erweitert und fügen Sie die CSS-ID ein Wählen Sie nun diesen Container aus, gehen Sie zu Advancab, fügen Sie die CSS-ID hier ein, gehen Sie also hierher, öffnen Sie den Abschnitt Aber, kopieren Sie die URL und fügen Sie sie hier Okay? Das ist der Servicebereich. Ein Okay. Veröffentlichen Sie jetzt Ihre Website. Sehen Sie sich eine Vorschau an. Wir erstellen unseren Header und wir erstellen den Header-Sticky. Wir haben unsere Menüs mit den Seiten verknüpft, wie Sie hier sehen können. Das sieht also sehr schön aus. Also lassen Sie uns jetzt unsere Fußzeile erstellen. Also gehe ich zurück und von hier aus Vorlagen zu TheIlderFro hier, klicke auf Footer Klicken Sie auf Neu hinzufügen. Sie können hier je nach Bedarf auswählen. Ich sage das ab. Okay. Das ist unser Header, und jetzt werden wir hier unsere Fußzeile erstellen Für Footer wähle ich diese eine Struktur. Gehen Sie zunächst unter das Style-Tag und ich mache die Hintergrundfarbe unter dem Layout dunkelgrau Wählen Sie nun diesen Container, ausgerichtete Inhaltszentrum und einen Zeilenanfang aus. Klicken Sie hier auf das Plus-Symbol und das Dagi-Überschriften-Widget. Wählen Sie nun zu diesem Container ausgerichtete Inhalte in der Mitte und klicken Sie auf Percon, um nach sozialen Symbolen zu suchen, und ich nehme diese pro sozialen Symbole, gehe unter Syap Column Gap, ich mache Row Gap 15, wähle 15 und die Farbe, die ich hier mache, du kannst sie wählen Ich mache Weiß. Und die Hintergrundfarbe ist transparent und auf der Farbe Schwarz kann man sehen, dass ich mit der Maus über meine Icons fahre. Die Icons sind schwarz und die Hintergrundfarbe weiß, Icons sind schwarz und die Hintergrundfarbe und wenn ich mit der Maus darüber fahre, wähle ich „einzigartig“ und „ Animation“, ich mache Sehen Sie hier diesen schönen Effekt. Das sieht toll aus. Okay, öffne jetzt das Symbol. Größe des Symbols, ich mache 18 Pixel und Hintergrundgröße, Sie können die Hintergrundgröße sehen. Also mache ich hier 45. Also runter, wenn ich mit der Maus drüber fahre. Also die sind jetzt klein. Okay, das ist also erledigt. Jetzt werden wir unsere Header-, Handy- und Tablet-Antworten geben . Auf TagtPortrait sieht unsere Fußzeile also fantastisch aus. Gehen Sie jetzt unter Mobiles Porträt. Wählen Sie zu diesem Container aus. Richten Sie die Elemente aus, die wir hier zentrieren werden. Unsere Fußzeile ist jetzt auch für Mobilgeräte geeignet. Danach können wir die gesamte Website als Bedingung hinzufügen veröffentlichen und auf Speichern und schließen klicken Sehen Sie sich jetzt unsere Website an. Sie können hier also die Fußzeile am Ende sehen. Das ist nett. Nachdem Sie alles erledigt haben, veröffentlichen Sie einfach Ihre Website und lassen Sie uns auf unsere Website schauen. Sie können hier sehen, wie schön unsere Website gemacht ist und am Ende können Sie die Fußzeile sehen