Verwendung von Elementor: Erstelle eine großartige WordPress-Website ohne Code

1. Einführung: Websites sind sehr wichtig. Wir benutzen sie für alles, nicht wahr? Wir verwenden sie für Nachrichten oder für Musik oder um unsere kreativen Fähigkeiten in unseren Portfolios unter Beweis zu stellen. Wenn Sie morgen eine Website erstellen möchten, nun, wo fangen Sie an? Welches Programm benutzt du? In diesem Kurs zeige ich Ihnen , wie Sie mit dem Elementor Page Builder eine Website erstellen mit dem Elementor Page Builder eine Website Es ist ein fantastisches Programm, das super einfach ist und es dir ermöglicht, super kreativ zu sein Hallo, ich bin John Wolfgang Miller. Ich bin jetzt seit 20 Jahren professioneller Designer und habe für einige große Kunden wie Fox TV hier in Australien gearbeitet . Wenn Sie nun Wordpress verwenden möchten, kann es ziemlich komplex werden. Ja, du kannst einfach ein Theme oder so etwas kaufen und es verwenden. Aber dann wirst du am Ende eine Website haben, die genauso aussieht wie die aller anderen. Wenn Sie jedoch Elemental verwenden, können Sie sehr kreativ sein Sie können bauen, was auch immer Sie bauen möchten. Es ist ein fantastisches Programm. Und in diesem Kurs zeige ich dir immer wie man die kostenlose Version des Programms benutzt, sodass du damit einfach all deine Fähigkeiten erweitern kannst. In diesem Kurs werde ich Sie durch den gesamten Prozess führen . Ich werde Ihnen zeigen , wie man es einrichtet, und dann werden wir eine ganze Website erstellen. Wir beginnen mit einem beeindruckenden Heldenbereich und gehen dann zu einigen Animationsteilen über , die die Besucher Ihrer Website wirklich beeindrucken werden . Dieser Kurs ist perfekt für Sie, wenn Sie ein Anfänger sind oder auch wenn Sie viel Erfahrung haben. Was Sie hier lernen, wird all Ihre Fähigkeiten im Bereich Website-Design massiv verbessern werden Sie eine wunderschön aussehende Website Und wenn Sie Ihre Karriere im Bereich Website-Design weiterführen möchten , müssen Sie Folgendes wissen. Lassen Sie uns also eine Website erstellen. Lass uns anfangen. 2. Kursprojekt: Das Hauptprojekt besteht darin, eine vollständige einseitige Website zu erstellen. In jeder Lektion erfahren Sie, wie Sie verschiedene Website-Teile in Element oder alle mit unterschiedlichen Widgets und verschiedenen Tools einrichten verschiedene Website-Teile in Element oder alle mit unterschiedlichen Widgets und verschiedenen Tools einrichten . Die Lektionen beginnen mit Ihrem ersten Heldenbereich Anschließend erstellen Sie einen Informationsbereich mit einem Bildschieberegler. Danach werden Sie zwei verschiedene Abschnitte über das Thema erstellen , die beide auf sehr coole animierte Weise funktionieren. Dann beenden Sie die Seite mit einer Fußzeile und einer Kopfzeile und installieren Elementor Und folgen Sie jeder Lektion und wiederholen Sie, was Sie Am Ende jeder Lektion kannst du entweder genau dieselben Bilder verwenden, die ich habe, und genau dieselbe Website erstellen Oder du kannst deine eigenen Bilder verwenden und ihr deinen eigenen kleinen Stil geben. Wenn Sie genau dieselben Bilder verwenden möchten, werden sie hier im Ressourcenbereich aufbewahrt. Laden Sie das herunter und fügen Sie alles zu Ihrer Medienbibliothek hinzu. Am Ende des Kurses werden Sie eine voll funktionsfähige Website haben. Sie werden viel mehr über Elementor gelernt haben, sodass Sie Ihre Fähigkeiten im Bereich Website-Design noch weiter ausbauen können Fähigkeiten im Bereich Website-Design noch weiter Für diesen Kurs und alle meine Kurse werde ich über viele verschiedene Dinge sprechen In all diesen Kursen gibt es viel zu behandeln. Ich kann es nur empfehlen, während Sie durchspielen und eine Pause einlegen. Wenn ich etwas Großes in einem Satz sage, pausiere es und probiere es selbst aus. Wenn du es noch einmal machen musst, starte es einfach zurück, 15 Sekunden zurückspulen, 15 Sekunden zurückspulen, und dann kannst du dir den ganzen Teil noch einmal ansehen Das wird dir helfen, zu verstehen, was ich gesagt habe, und es auszuprobieren Wenn Sie Probleme mit der Qualität des Videos haben, das Sie sich gerade ansehen, gehen Sie hier zu den Qualitätsstufen und ändern Sie die Einstellungen hier. Wenn es auf Auto eingestellt ist, sehen Sie es möglicherweise nicht so scharf wie gewünscht. Ändern Sie es also entweder auf 720 oder 1080 Pixel. 3. Das Einrichten von Elementor und Wordpress: Hier sind wir bei elementor.com Dies ist der erste Ort, an den Sie normalerweise kommen würden, wenn Sie versuchen, den Elementor Page Builder einzurichten Möglicherweise haben Sie dies bereits eingerichtet. Wenn Sie mit der nächsten Lektion fortfahren oder einfach ein paar Minuten hier bleiben möchten, stellen Sie sicher, dass Sie alles richtig eingerichtet haben. Jetzt wollen wir nur noch die kostenlose Version von Elementor für diesen Kurs verwenden die kostenlose Version von Elementor für diesen Kurs Das Problem ist jedoch, dass Sie bei jeder Website immer für das Hosting bezahlen müssen Hosting ist das Unternehmen, das Ihre Website für Sie speichert. Elementor macht das alles selbst, aber es gibt eine Gebühr. Da wir jedoch nur die kostenlose Version von Elementor verwenden möchten , zeige ich Ihnen jetzt eine Möglichkeit eine kostenlose Hosting-Option einzurichten Hier sind wir bei Word. Wordefi, bietet eine kostenlose Version von Wordpress Hosting an Wenn Sie hierher kommen und Produkte vergleichen, werden Sie feststellen, dass es kostenpflichtige Versionen und auch eine kostenlose Das ist für eine kostenlose Entwicklerseite. Das ist eine kostenlose Entwicklungsseite. Das heißt, wenn Sie nur mit Elementor herumspielen möchten, um sich an das Programm zu gewöhnen, wählen Sie dies „Über uns“ dieser Klasse gibt es einen Link Hier unten im Abschnitt „Über uns“ dieser Klasse gibt es einen Link zum Nachlesen Wenn Sie hierher kommen, klicken Sie auf Weitere Informationen und melden Sie sich dann an. Es ist kostenlos. Geben Sie hier Ihren Vor- und Nachnamen, Ihre E-Mail-Adresse , Ihr Passwort und klicken Sie dann auf Registrieren Als Erstes müssen Sie einfach Ihre E-Mail-Adresse überprüfen Dann komm hierher und klicke auf Neue Site erstellen. Beginnen Sie mit dem Site-Namen Gang Music Location. Ich bin hier in Australien ansässig, Temporäre URL. Nun, das ist sowieso nur aus einem vorübergehenden Grund, also können Sie es nennen, wie Sie wollen, aber lassen Sie uns einfach Ing. Musik Wählen Sie dann erneut den Typ der Site aus, wählen Sie einfach die Tiefenversion und gehen Sie zur Site. Du bekommst für etwa eine Minute ein kleines Spinnrad , während es alles einrichtet. Wenn das erledigt ist, komm einfach her und klicke auf das W, das Wordpress-Logo. Es wird dir ein Popup angezeigt, das dir den Benutzer für Wordpress und das Passwort zeigt. Klicken Sie einfach hier auf dieses kleine Symbol und das wird das Passwort für Sie kopieren. Und dann weiter zum WP-Administrator, geben Sie Word Fire und Passwort ein, klicken Sie, um sich das Passwort zu merken, und klicken Sie dann auf Anmelden. Hier sind wir jetzt im Wordpress-Dashboard. Von hier aus können wir jetzt anfangen , alles zu bauen. Wenn Sie Wordpress noch nie benutzt haben. Nun, ich werde dir schnell zeigen dass das Menü für alles hier im linken Element ist . Der Page Builder ist ein Plug-In Zuallererst müssen wir das installieren. Kommen Sie zu den Plug-ins hierher und klicken Sie auf Neue Such-Plug-ins hinzufügen. Hier bist du. Installieren Sie Element oder Website Builder jetzt und klicken Sie dann auf Aktivieren, damit Sie nicht zu dieser Seite weitergeleitet werden. Hier müssen Sie ein Elementar-Konto einrichten. Aber auch hier machen wir es einfach mit der kostenlosen Version Erstelle mein Konto und gib dann deine E-Mail-Adresse und dein Passwort ein. Dann heißt es, lass uns deine Site verbinden. Sie sind jetzt ein elementarer Kunde. Um mit einer Wordpress-Site zu beginnen, müssen Sie immer mit einem Thema beginnen Dies ist das Backend Ihrer gesamten Website. Creation Elementor hat ein eigenes Hauptthema, das Hello heißt Klicken Sie hier und fahren Sie mit dem Hello-Thema fort. Geben wir Ihrer Site nun einen Namen. Das haben wir bereits, weil wir es früher eingerichtet haben. Schauen wir uns ein Logo an, das können wir machen, aber das überspringen wir einfach. Für den Moment ist das erledigt. Jetzt überspringe das. Wir kommen zurück zum Element oder Editor. Bevor wir mit dem Aufbau unserer Website beginnen, müssen wir nur einige Einstellungen im Dashboard überprüfen . Wir müssen diese Seite verlassen. Um dies einzurichten, gehen wir zunächst zum Hamburger-Menü hier auf der linken Seite und wählen Benutzereinstellungen Hier unten heißt es Exit two, und Sie haben hier ein paar Optionen. Der, den wir wollen, ist dieser. P Dashboard, wähle das aus. Kehren Sie dann zu Ihrem Hamburger-Menü zurück und wählen Sie Beenden. Dann heißt es Seite verlassen. Klicken Sie einfach auf Verlassen. Oder wenn Sie bereits die neueste Version von Elementor installiert haben , finden Sie diese Optionen hier Gehe einfach hier zum Elementor-Logo und klicke darauf. Wählen Sie dann hier Benutzereinstellungen und stellen Sie sicher, dass das WP-Dashboard ausgewählt ist Klicken Sie zurück auf das Elementor-Logo und dann auf Wordpress Das bringt dich zurück zu deinem Dashboard. Jetzt müssen wir nur noch ein paar Einstellungen im Elementor überprüfen ein paar Einstellungen im Elementor Stecken Sie ein, kommen Sie hier links zu Elementor, bewegen Sie den Mauszeiger und wählen Sie Einstellungen Die erste, die wir auswählen möchten, befasst sich mit den Standardfarben und Standardschriftarten Elementor ist so eingerichtet , dass es die Farben und Schriftarten verwendet, die bereits im Hello Elementor-Thema eingerichtet Da wir sehr kreativ sein wollen, möchten wir dies einfach deaktivieren. Markieren Sie einfach dieses Sie dieses Kontrollkästchen und klicken Kommen Sie jetzt hier zu den Funktionen. Wenn Sie die neueste Version von Elementor haben, müssen Sie hier wahrscheinlich nichts ändern Wenn Sie jedoch eine ältere Version haben oder nur überprüfen möchten, ob die richtigen Elemente aktiv sind, Sie hier die Funktionen Scrollen Sie zunächst nach unten zum Grid-Container , dort steht Standard. Ändern Sie das einfach auf aktiv und klicken Sie oberen Leiste auf Nächsten Editor aktivieren. Dies ist die neueste Editor-Version von Elementor. Wenn Sie die neueste Version verwenden, ist diese wahrscheinlich bereits eingerichtet Aber komm trotzdem her und wähle Aktiv. Scrollen Sie dann in diesem Abschnitt nach unten, stabile Funktionen. Scrollen Sie nach unten zu dem Punkt mit der Aufschrift Flexbox-Container und stellen Sie sicher, dass dieser aktiv ist. Wenn Sie diese drei Elemente aktiv haben, scrollen Sie ganz nach unten und klicken Sie auf Änderungen speichern. Jetzt ist alles eingerichtet und wir können mit dem Aufbau Ihrer Website beginnen. 4. Elementor 101 - Menüs: Nun, das ist eingerichtet. Gehen Sie hier zu den Seiten und wählen Sie alle Seiten Wie Sie hier sehen können, werden einige Seiten automatisch mit dem Thema geliefert. Wir benötigen keine dieser Seiten, aber die ist live und wurde veröffentlicht, wie Sie hier sehen können. Lass uns das einfach ausschalten, weil es nur eine leere Seite ist, die nicht existieren muss. Wenn wir den Mauszeiger über die Schnellbearbeitung bewegen, hast du hier ein paar Optionen, aber die, die wir uns ansehen, ist der Status Wie Sie sehen können, ist es veröffentlicht. Sie können das in einen Entwurf ändern. Jetzt werden wir unsere eigene Live-Seite erstellen. Das ist sehr einfach. Klicken Sie auf „Neu hinzufügen“. Sie werden zum regulären Wordpress-Editor weitergeleitet. Scrollen Sie hier nach oben, um einen Titel hinzuzufügen und den Titel Ihrer Website einzugeben. Meins wird Wolf Gang sein. Musik Dann komm hier zur Zusammenfassung. auf der rechten Seite Klicken Sie auf der rechten Seite auf das Drop-down-Menü , in dem Vorlage steht. Klicken Sie auf Standardvorlage. Wählen Sie dann in diesem Drop-down-Menü Element oder Leinwand aus. Das ist es, was wir tun müssen, um eine übersichtliche Seite zu haben , auf der sich nichts anderes befindet, an dem wir arbeiten können. Dann geh hier hoch, um den Entwurf zu speichern. Wenn das gespeichert ist, komm hierher, um es mit Elementor zu bearbeiten Willkommen zurück im Elementor-Editor. Wie Sie sehen können, verwenden wir die neueste Menüversion. Es ist immer gut, einfach hierher zu kommen und mit allen Einstellungen hier herumzuspielen Einstellungen hier damit Sie wissen, wo sich alles befindet. Bevor du anfängst, werde ich hier schnell jeden Teil der Menüleiste oben durchgehen . Zuallererst dieses Elementor-Logo, das ist ein Drop-down-Menü Hier haben wir den Theme Builder. Sie sich keine Gedanken über nur ein Pro-Element, das wir heute nicht verwenden, Geschichte. Nun, wenn Sie einen Fehler machen, können Sie natürlich zu früheren Versionen und Tastenkombinationen zurückkehren . Das sagt Ihnen nur alle Abkürzungen, um den gesamten Vorgang zu beschleunigen. Ich denke schon. Dann das Plus-Symbol Element hinzufügen Hier sehen Sie die Elemente, alle Widgets, die wir auf dieser Website verwenden werden, dieses Drop-down-Menü, das in verschiedene Unterabschnitte, Layout, Container und Damit haben wir angefangen , alle Elemente jeden Bereich unserer Website zu erstellen Du hast deine Grundlagen, du hast auch deinen Profi-Bereich. Natürlich können Sie über all diesen Dingen ein kleines Vorhängeschloss sehen , aber machen Sie sich darüber keine Sorgen Wir können keins davon verwenden, aber nichts davon wird für irgendetwas benötigt , was wir bis heute bauen Wir nutzen nur die kostenlose Version vollständig. Wir können diesen Teil schließen. Und dann bekommst du alle allgemeinen Einstellungen, alles, was du brauchst, Bilderkarussells, Testimonials usw., sind die Elemente Dann haben wir die Seiteneinstellungen. Hier können Sie Einstellungen ändern, die für die gesamte gelten. Wenn Sie eine Website mit mehreren verschiedenen Seiten erstellen, jede Einstellung hier relevant. Jede einzelne Seite , die Sie erstellen. Wenn wir dann diese schließen und dann auf die Seite mit der Aufschrift Struktur klicken, erhalten Sie dieses kleine Popup-Fenster. Das wurde früher der Navigator genannt. Falls Sie mit älteren Versionen von Element vertraut sind, hieß es Navigator. Es heißt jetzt Structure, macht aber genau dasselbe. Ich werde das besprechen, wenn wir mit dem Aufbau Ihrer Website beginnen. Als Nächstes ist dies der Responsive-Bereich. Das ist sehr, sehr wichtig und wir werden später im Unterricht darauf eingehen. Hier können wir verschiedene Geräte auswählen, Desktop, Tablet und Handy. Dieser hier, Vorschau der Änderungen. Das ist großartig, denn während Sie an der Website arbeiten, können Sie auf Änderungen in der Vorschau anzeigen klicken. Und dann können Sie sehen, wie es für alle anderen aussehen würde , die sich Ihre Website ansehen, wenn sie live geht. Das ist alles. Jetzt können wir mit dem Aufbau Ihrer Website beginnen. 5. Eröffnungsheld NEU: Okay, fangen wir an, Ihre Website zu erstellen. Wir beginnen mit einer sehr leeren Seite. Wir müssen anfangen, unsere ersten paar Elemente hinzuzufügen. Dies ist der Abschnitt, den wir uns ansehen werden. Hier gibt es zwei Möglichkeiten. Zuallererst haben wir diese eine Vorlage zum Hinzufügen. Klicken Sie darauf und Sie werden sehen, was das bedeutet. Hier können Sie vorgefertigte Seiten, verschiedene Blöcke und Elemente einfügen, die Elemente selbst erstellt haben. Sie können jedoch immer das kleine Pro-Symbol über all diesen sehen . Diese sind nur in der Pro-Version verfügbar. Dies ist jedoch sowieso nicht relevant für das, was wir hier versuchen. Wir versuchen, unsere eigene einzigartige Website zu erstellen. Wir möchten nichts verwenden, das bereits von jemand anderem vorgefertigt wurde. Schließ einfach diesen. , das wir verwenden werden, ist das Plus-Symbol. Klicke darauf. Welches Layout möchtest du verwenden? Dies sind die beiden Optionen , die wir für Element haben. Ich zeige dir nur den Unterschied zwischen den ersten Rastern. Wie Sie hier sehen können, handelt es sich um unterschiedliche Strukturen. Jede Struktur hat jedoch eine festgelegte Breite für jedes Element darin. Das ist 50, 50 von links nach rechts, 50 von oben nach unten, und das ist eine gleichmäßige Aufteilung von drei Dritteln. Jeder Abschnitt innerhalb des Rasters hat immer exakt dieselbe Breite und Höhe. Wenn wir das schließen, klicken wir auf Flex Box Dort haben wir noch ein paar verschiedene kreative Optionen. Wie Sie hier sehen können, hat es fünf verschiedene Abschnitte, aber sie haben nicht alle die gleiche Breite und Höhe. Sie sind unterschiedlich breit und unterschiedlich hoch. Wie Sie hier sehen können, gleiche Breite. Die Höhe hier ist jedoch doppelt so hoch wie die Höhe dieser beiden Elemente. Hier im heutigen Cluster werden wir diese beiden verschiedenen Elemente verwenden. Wir werden Container, die Flexbox und das Grid verwenden . Aber für diesen Abschnitt, den Heldenbereich, werden wir einen Flexbox-Container verwenden. Wir wollen nur einen, der ein einziger Container ist. Mauszeiger hier hoch zum ersten, wobei der Pfeil nach unten zeigt. Und klicken Sie darauf Das wird in deinen ersten Behälter fallen, der sich in diesem rosafarbenen Bereich oben befindet. Ich zeige dir nur noch ein paar Elemente. Sie können hier oben sehen, dass wir ein weiteres Plus-Symbol haben, einen Behälter, der nur bedeutet, dass Sie dasselbe tun können, aber entweder oben oder unten. Lass uns das schließen. Dann haben wir das X, das heißt, den Container zu löschen. Wenn Sie einen Fehler machen oder nicht beabsichtigen, einen anderen Container hinzuzufügen, können Sie diesen einfach löschen. Dann haben wir die kleinen Punkte hier oben , wo Container bearbeiten steht. Wenn du darauf klickst, siehst du hier auf der linken Seite die Optionen , die automatisch angezeigt werden. Wir werden uns das in ein paar Minuten ansehen. Auf diese Weise können Sie den Container auch nach oben und unten ziehen. Wenn wir hier auf der Seite mehrere verschiedene Container haben , möchten Sie vielleicht einen über den anderen oder unter den anderen verschieben . Ziehen Sie sie so hin und her. Die andere Option, die wir jetzt haben , da wir einen Container eingerichtet haben, ist der Rechtsklick. Wenn ich hier klicken müsste, dann sind das die Optionen, die ich habe. Aber wir wollen auf den Container selbst klicken und wir haben all diese Optionen. Hier ist ziemlich klar, was jeder von ihnen tut. Wenn Sie einen bestimmten Container erstellt haben und die Aktion wiederholen möchten, können Sie ihn einfach duplizieren und er macht genau dasselbe wieder. Dann haben Sie die Möglichkeit, erneut zu kopieren und einzufügen. Wenn Sie etwas kopieren möchten, das Sie an anderer Stelle gemacht haben, können Sie es an einer anderen Stelle auf der Website einfügen. Oder Sie können sogar stylen, sagen wir einfach, Sie haben einen bestimmten Text auf eine bestimmte Weise eingerichtet und möchten, dass der nächste Text genauso funktioniert. Kopieren Sie den Text und fügen Sie den Stil ein. Der Wortlaut im Text wird dadurch nicht geändert, aber es wird seine Größe ändern Der wichtigste Aspekt, den ich mir hier ansehen möchte, ist die Struktur. Lass uns darauf klicken. Dies ist ein sehr gutes Tool , da es Ihre Website und jede Seite in verschiedene Abschnitte, verschiedene Container aufteilt Ihre Website und jede Seite in verschiedene Abschnitte, verschiedene Container Dann haben Sie ein Drop-down-Menü, Sie sehen können, was sich in jedem Container Wir werden sehen, wie das funktioniert, wenn wir immer wieder mehrere verschiedene Elemente auf der Seite erstellen und verschiedene Widgets im Container ablegen. Jetzt werden wir den Heldenbereich unserer Website erstellen. Wir nennen diesen Bereich den Helden, weil er der wichtigste Teil jeder Seite ist. Warum? Weil es der Eröffnungsabschnitt ist. Es ist das Erste, was die Leute sehen, wenn sie Ihre Website besuchen , und es ist Ihre erste Chance, sie zu beeindrucken. Was wir hier erstellen werden, ist ein ganzseitiger Eröffnungsbereich einem Hintergrundbild mit dem Firmenlogo oben. Dieses Bild gibt einen guten Eindruck davon , worum es auf der Website geht. Dann enthält das Firmenlogo auch den Firmennamen, damit die Leute wissen, wo sie sich befinden . Wenn sie auf der Baustelle auftauchen. Lass uns mit diesem Container herumspielen. Kommen Sie jetzt zu Ihrem Menü auf der linken Seite. Und Sie werden drei Unterabschnitte sehen. Es gibt Layoutstil und Fortgeschrittene. Ich werde während des gesamten Kurses verschiedene Teile davon durchgehen, um Ihnen einen guten Überblick darüber zu geben , wie das alles funktioniert und was im Element- oder Seitenersteller möglich ist. Schauen wir uns zunächst das Layout an. Hier entscheiden wir über die Breite und Höhe des gesamten Containers, des gesamten Heldenbereichs. Die Breite ist bereits auf eine Standardgröße mit einer Breite von 1.140 Pixeln eingestellt eine Standardgröße mit einer Breite von 1.140 Pixeln Ihre andere Option besteht darin, die volle Breite zu wählen. Wenn Sie sich diesen Abschnitt oben ansehen, werden Sie den Unterschied feststellen. Wenn ich die volle Breite wähle, deckt sie die gesamte Seite ab. Dies funktioniert für einige Container auf Ihrer Site, aber nicht für andere. Wenn Sie beispielsweise einen mit Text haben, möchten Sie nicht, dass dieser direkt am Rand der Seite liegt, da der Fluss der Website nicht wirklich funktioniert. Sie benötigen immer ein bisschen Leerraum, ein bisschen Leerraum um den Text herum. Lassen Sie uns das wieder auf „Boxed umstellen und es auf der Standardeinstellung belassen Sie können dies auf eine beliebige Größe ändern, aber ich empfehle dringend, die Standardbreite Jetzt wollen wir uns die Höhe ansehen. Wie ihr im Moment sehen könnt, hat der Behälter nur eine sehr geringe Höhe Es kommt nur bis hier runter, oder ihr seht den Rand der pinken Kiste. Wir wollen diesem Container sagen, dass er die gesamte Seite füllen soll. Gehen wir zur Mindesthöhe über. Wenn Sie auf das Drop-down-Menü klicken, werden hier verschiedene Optionen angezeigt. Die, nach der wir suchen, ist VH. Das steht für vertikale Höhe, wie Sie hier sehen können einen Container mit voller Höhe zu erreichen, verwenden Sie 100 H. Wählen wir H und geben 100 Das ist ein Prozentsatz. Wenn Sie möchten, dass es nur die Hälfte der Seite ausfüllt, natürlich 50%, aber wir möchten , dass es die gesamte Seite ausfüllt. Wählen wir 100. Wir haben jetzt einen leeren leeren Container eingerichtet. Was wir tun wollen, ist unser Hintergrundbild einzurichten. Bewegen Sie den Mauszeiger hier oben, um es zu stylen Hier sehen Sie Hintergrundoptionen. Sie haben viele verschiedene Typen. Sie können hier einen klassischen Farbverlauf oder eine Verlaufsfarbe eingeben. Sie können ein Video oder eine Diashow einfügen. Für das, was wir wollen, wir wollen nur einen klassischen Stil, klicken Sie hier auf den Pinsel. Zuallererst könntest du einfach eine einzelne Farbe wählen. Wenn Sie hier auf dieses leere Feld klicken, können Sie hier eine beliebige Farbe für den Hintergrund auswählen . Wir wollen nicht, dass es eine Farbe ist, wir wollen, dass es ein Bild ist. Was ich tun werde, ist hier oben auf die Schaltfläche Löschen zu klicken . Um dann ein Hintergrundbild zu verwenden, den Mauszeiger über dieses Feld und klicken Sie auf Bild auswählen Wenn ich die Medienbibliothek öffne, kann ich jedes einzelne Bild sehen, das ich hochgeladen habe Wenn du ein bisschen mehr über das Hochladen von Bildern erfahren möchtest , gehen wir zu meinem Profil auf Skill Share und suchen nach diesem Video, das dir schnell erklärt, was zu tun ist, wenn wir Bilder auf Wordpress hochladen Was zählt, ist das Verhältnis dieses Bildes, die Dateigröße und der Dateiname Schauen Sie sich dieses kurze Video an, Sie werden ein bisschen mehr verstehen. Wenn Sie alle Ihre Bilder zum Hochladen bereit haben, klicken wir hier und wählen Dateien aus. Was ist Wolfgang? Musik Nun, ich denke mir offensichtlich einen Namen für ein Musikgeschäft aus, aber es wird ein eher altmodischer Musikladen sein, so wie sie es vor 20 oder 30 Jahren waren Also, was wir hier verkaufen werden , sind eine Menge Schallplatten, eher Retro-Dinge wie Kassetten Aber wir werden auch eine Menge Instrumente und Musikausrüstung verkaufen , die die Leute benutzen können, wenn sie Musik aufnehmen oder live spielen Mein Hauptverkaufsargument werden jedoch die Schallplatten sein , weil ich denke , dass das die Art von Dingen ist, die Kunden gewinnen werden. Wir alle gehen gerne durch diese Geschäfte und schauen uns an, welche Musik erhältlich ist. Also werde ich dieses Bild hier als mein Hintergrundbild auswählen . Okay, und so sieht der Held mit diesem Bild als Hintergrund aus. Es sieht so aus, als ob es perfekt für diesen Hintergrund ist. Wenn ich jedoch nach unten scrolle, werden Sie feststellen, dass es hier unten ein kleines Problem gibt. Was passiert ist, dass es nicht genau zum Verhältnis des Hintergrunds passt genau zum Verhältnis des Hintergrunds und daher das Bild unten wiederholt. müssen wir ändern. Komm rüber zum Menü auf der linken Seite. Hier können Sie einige Änderungen vornehmen. Gehen wir hier rüber zur Position. Wie Sie an diesem Symbol sehen können, ist es so eingestellt, wie es auf dem Desktop angezeigt wird. Wir werden uns das später in der Klasse ansehen, aber hier kannst du die Einstellungen ändern, um zu sehen, wie es auf einem Tablet oder Handy aussehen würde. Im Moment schauen wir uns allerdings nur den Desktop an. Halten Sie es auf Desktop ausgewählt. Hier drüben heißt es, dass Position Standard ist. Ändern wir das in Center Center, weil ich möchte, dass es sich in der Mitte dieses Containers befindet. Es wiederholt immer noch das Bild unten. Gehen wir hierher, um es zu wiederholen und dann keine Wiederholung zu sagen. Dadurch verschwindet die zweite Version davon. Wie Sie sehen können, füllt es den Behälter jedoch immer noch nicht ganz aus. Und wir haben hier unten, zwischen dem Bild und dem Rand des Containers, einen winzigen weißen Bereich . Die rosafarbene Linie, um das zu ändern. Komm her, um die Größe anzuzeigen und wähle das Cover. Da haben wir's. Es dehnt sich jetzt leicht aus, sodass es genau diesen Abschnitt ausfüllt . Denken Sie also darüber nach. Wenn Sie Ihr Helden-Hintergrundbild auswählen, möchten Sie natürlich etwas mit einem Querformat. Möglicherweise möchten Sie ein quadratisches Bild oder ein Bild mit einem Verhältnis von eins zu eins wählen . Sie müssen jedoch bedenken, dass es dadurch gestreckt wird, sodass das, was oben und unten ist, möglicherweise nicht richtig angezeigt wird. Das alles sieht im Editor gut aus. Eine coole Möglichkeit, um zu überprüfen, wie es aussehen wird, wenn die Leute es ansehen ohne die Schaltfläche für die Vorschau der Änderungen zu verwenden , besteht darin, hier auf diesen kleinen Pfeil zu klicken. Dieser kleine Pfeil sagt, dass das Panel ausgeblendet wird. Das ist das ganze Panel hier auf der linken Seite. Und offensichtlich wird jeder, der die Live-Site besucht, das nicht sehen. Klicken Sie auf den kleinen Pfeil, um das Panel auszublenden. Dadurch wird auch das Strukturmenü hier auf der rechten Seite ausgeblendet . Was Sie jetzt sehen, was nur ein einfaches Bild ist, ist genau das, was die Leute sehen werden , wenn sie die Live-Site besuchen. Das wird Ihnen helfen, sicherzustellen, dass Sie die richtigen Verhältnisse angeben. Ihr Hintergrund funktioniert perfekt. Alles, was darauf steht, funktioniert auch perfekt. Wir müssen zurück zum Editor. Klicken Sie erneut auf den Pfeil. Okay, wenn wir ein bisschen nach unten scrollen, sehen wir nur den leeren weißen Bereich, aber hier wird das nächste Element erscheinen. Ich möchte jedoch eine Änderung an der Helden-Sektion vornehmen. ich so nach oben und unten scrolle, wirst du sehen, dass sich das Bild mit dem Scrollen bewegt Aber was ich hier eigentlich tun möchte, ist, das Hintergrundbild statisch zu machen , sodass es an derselben Stelle bleibt Aber alle Elemente, die darauf stehen, wie das Firmenlogo, sind genau das, was dazu bewegt. Es ist eine weitere Einstellung hier auf der linken Seite, und es ist diese , die Bindung bedeutet. Es ist auf Standard eingestellt und Sie haben zwei Optionen Eine ist Scrollen und eine ist fest. Die Standardeinstellung ist Scroll. Wenn ich scrolle, bewegt es sich. Aber ich möchte nur , dass das behoben wird. Lassen Sie uns das dann auf behoben ändern. ich auf und ab scrolle, wirst du sehen, dass das statisch bleibt. Es bewegt sich nicht. Die Elemente oben werden sich bewegen. Und dann kommen wir zum nächsten Container , der einfach darüber scrollt. Jetzt müssen wir das Firmenlogo über diesem Bild platzieren. Scrollen wir nach oben, damit wir den gesamten Hintergrund sehen können. Gehen wir zurück zum Plus-Symbol Element hinzufügen. Was wir hier tun wollen, ist ein Bild einfügen, ein Bild-Widget über dem Hintergrund des Containers. Die Einstellungen, die wir für den Hintergrundcontainer haben, unterscheiden sich jedoch den Hintergrundcontainer haben, unterscheiden sich von den Einstellungen, die wir für das Bild wünschen. Daher müssen wir einen Container in einen Container legen. Komm her und ziehe einen Container und lege ihn buchstäblich einfach auf den Hintergrund. Was Sie hier im Strukturbereich sehen werden, ist ein Hauptcontainer und dann ein Untercontainer, der sich in diesem Container befindet. Wir möchten unser Logo in diesen Container einfügen. Komm zurück, um ein Element hinzuzufügen. Wählen Sie das Bild und das Widget aus und legen Sie es im Untercontainer ab. Das Erste , was Sie hier immer sehen , ist nur ein graues Kästchen. Das liegt daran, dass kein Bild ausgewählt wurde und dies ist wie ein Platzierungsbild dafür. Das wollen wir jedoch ändern. Komm her, um Bild auszuwählen Klicke darauf, dann möchte ich die weiße Version meines Logos wählen. Ich habe ein paar verschiedene Versionen meines Logos hier oben, aber ich möchte die, bei der sich das Symbol über dem Text befindet, und ich möchte die weiße Version. Ich werde auf dieses klicken. Das Hauptproblem hier ist jedoch, wie Sie sehen können, das Bild unglaublich groß ist und Sie nicht einmal sehen können , was darauf steht, es sei denn, Sie scrollen nach unten müssen wir es nur viel kleiner machen, kommen Sie hier auf die linke Seite und klicken Sie auf Style Sie können mit den Prozentwerten des Bildes, dem Prozentsatz der Breite oder dem Prozentsatz der Höhe herumspielen Prozentsatz der Breite oder dem Prozentsatz der Höhe Lass uns einfach mit der Breite herumspielen. Wenn ich hier auf dieses kleine ziehbare Element klicke, kann ich einfach damit herumspielen bis ich die gewünschte Größe erreicht habe Ich würde sagen, vielleicht 15%. Das ist gut. Ich möchte jetzt, dass das Logo in der Mitte des Heldenbereichs steht. Wenn ich hier auf den Pfeil klicke, würde es für Besucher so aussehen. Ich möchte nicht, dass es ganz oben steht. Ich möchte, dass es in der Mitte ist. Lassen Sie uns einfach das Layout des Containers bearbeiten. Komm hier zu deinem Strukturbereich und klicke auf den Untercontainer, in dem sich das Bild befindet. Der Teil, den wir uns hier ansehen, dient der Rechtfertigung des Inhalts. Hier können wir sagen, dass jeder Inhalt in einem Container am Anfang, in der Mitte oder am Ende stehen kann . Was wir hier suchen, ist das Zentrum. Ich werde darauf klicken. Das hat keine Änderung bewirkt. Warum? Weil sich das Bild bereits in der Mitte dieses Untercontainers befindet. Es saß in der Mitte. Aber was ich Elemental sagen muss, ist, dieser Untercontainer auch im zentralen Teil dieses Containers sitzt, zurück zu Ihrem Hauptheldencontainer geht und dann wieder hierher zurückkehrt, um den Inhalt zu rechtfertigen Und dann klicken Sie auf Center. Da haben wir's. Das Logo befindet sich jetzt in der Mitte der Seite. Wenn ich hier rauf und runter scrolle, funktioniert der Heldenbereich jetzt so, wie ich es mir vorgestellt habe. Das Hintergrundbild bleibt statisch, aber das Logo bewegt sich nach unten , wenn ein Benutzer scrollt Das einzige Problem, das ich hier sehe, ist manchmal, wenn ein Benutzer auf und ab scrollt, man manchmal, wenn ein Benutzer auf und ab scrollt, das Logo über dem Hintergrundbild nicht wirklich lesen kann, auf dem Wolfgang Music steht . Wenn ich nach oben scrolle und dieser Text auf einer leichteren Schallplatte liegt, ist er nicht so lesbar, wie ich es gerne hätte Was ich hier eigentlich tun werde, ist dem Hintergrundbild ein Overlay hinzuzufügen Hintergrundbild ein Overlay hinzuzufügen Ich werde eine Farbüberlagerung hinzufügen , die sich über dem Bild befindet und daher den gesamten Hintergrund etwas dunkler macht und der Text daher leichter lesbar ist Sie dazu sicher, dass Ihr Hauptcontainer hier im Strukturbereich ausgewählt ist hier im Strukturbereich ausgewählt Und dann komm hier nach links und klicke auf Style. Wie Sie sehen können, ist der Hintergrund so eingerichtet , wie wir ihn zuvor mit dem Bild eingerichtet haben, aber wir schauen uns das Hintergrund-Overlay an Klicken Sie erneut darauf, Sie haben hier verschiedene Möglichkeiten. Sie können den Klassiker oder den Farbverlauf wählen. Spielen Sie damit herum und sehen Sie, was für Sie funktioniert. Aber ich will nur die klassische Farbe, eine Volltonfarbe. Ich werde auf Klassisch klicken, dann kannst du ein Bild darauf laufen lassen , aber das funktioniert nicht. Das wird nur ein Chaos übereinander sein. Also werde ich eine Farbe wählen. Ich werde hier drüben klicken. Sie können hier unten mit der Farbauswahl herumspielen , wenn Sie nach Rot, Orange oder Grün suchen . Aber mir gefällt, womit es angefangen hat, mit dem Rot. Ich glaube, ein dunkles Rot. Ich denke, das fasst ungefähr zusammen, wer wir sind. Ich denke, es gibt ihm einen schönen Retro-Stil Nimm das in der Mitte und drehe es dann einfach herum und spiele damit herum bis du einen findest, der dir gefällt Ich suche nach einem dunklen Rot. Ich denke, das verleiht ihm einen Retro-Stil. Ich gehe irgendwo zwischen Schwarz und Rot hin, ganz so. Es ist ein bisschen hell. Es ist nur ein bisschen dunkler geworden. Ja, das sieht toll aus. Wenn du das auswählst, kannst du sehen, was hier als Hexadezimalcode erscheint. Das ist der genaue Code für genau diese Farbe. Wenn Sie genau diese Farbe an einer anderen Stelle auf der Website verwenden möchten , notieren Sie sich einfach diesen Hex-Code. Später in der Klasse werde ich Ihnen jedoch zeigen, wie Sie Primärfarben einrichten. Dadurch werden im Grunde alle Farben aufgezeichnet, die Sie an anderer Stelle verwendet haben. Und Sie können es einfach aus einem Drop-down-Menü auswählen, aber im Moment bin ich mit dieser Farbe zufrieden. Lass uns wieder hier klicken, The Opacity, wo du auch damit herumspielen kannst Es ist automatisch auf 50% gesetzt Wenn ich es komplett rot haben möchte, kann ich eins oder fast alles wählen , ich kann es auf 0,05 reduzieren , dann kann ich das Logo immer noch nicht lesen Ich werde tatsächlich zu dem zurückkehren, wo es war, nämlich zu 50% ziehen und es auf 0,5 hochziehen. Ich finde, das ist perfekt Sie haben hier eine weitere Option, den Mischmodus. Wenn Sie ein Bildbearbeitungsprogramm wie Photoshop verwenden, werden Sie hier mit all diesen Optionen vertraut sein. Wenn Sie mit der Maus über sie fahren, können Sie sehen, was diese Optionen sind Multiplizieren, Bildschirmüberlagerung. Es bedeutet nur, dass die Farbe der hinteren Überlagerung anders über dem Bild liegt Spielen Sie also mit diesen herum und finden Sie eine, von der Sie glauben , dass sie für Sie geeignet ist und die am besten zu Ihrem Hintergrundbild passt Ich denke jedoch, dass nur ein normales Bild gut war. Ich glaube, das ist es, wonach ich suche. Wenn ich hier rüberscrolle, ja, das sieht perfekt aus. Ich klicke hier auf den Pfeil und ja, das sieht perfekt aus. Das ist es, wonach ich suche. Ich kann das Logo lesen. Ich mag diesen Hintergrund sehr und ich denke, die Farbe drückt aus, wer wir als Retro-Musikladen sind. Gehen wir einfach zurück und wenn ich auf und ab scrolle, wirst du sehen, wie das jetzt funktioniert. Und ja, das ist jetzt alles lesbar das kann jeder bei Wolfgang nachlesen. Musik Jetzt ist unser Held fertig und wir sind bereit, mit dem nächsten Abschnitt fortzufahren. Eine kleine Empfehlung für Sie finden Sie hier. Sie haben die Möglichkeit , die Seite zu veröffentlichen. wollen wir noch nicht tun, weil es noch nicht bereit ist, live zu gehen. Wenn du darauf klickst, öffnet sich ein Drop-down-Menü. Sie können sehen, dass Sie Speicheroptionen haben. Klicken Sie darauf, klicken Sie einfach auf Entwurf speichern. Das bedeutet nur, dass der Entwurf gespeichert wurde. Es bedeutet nur, dass Sie die neueste Version davon haben, wenn Ihr Computer abstürzt oder so . Ich würde empfehlen, einfach alle 5 Minuten darauf zu klicken oder jedes Mal, wenn Sie etwas Neues machen, müssen Sie zurückgehen und es wiederholen. 6. Informationsbereich: Jetzt ist dein Held bereit. Das reicht, um die Aufmerksamkeit aller zu erregen, wenn sie sehen, dass sie nach unten scrollen und mehr erfahren möchten. Das werden wir jetzt tun. Als Nächstes müssen Sie einen Einführungsabschnitt hinzufügen. Das ist ein kurzer Textabschnitt, einige wichtige Informationen darüber enthält , wer Sie sind und was Sie für alle Kunden tun können , die Ihre Website besuchen. Scrollen wir zum nächsten Abschnitt unter dem Helden und klicken wir dann auf das Plus. Wir werden einen weiteren Flexbox-Container hinzufügen. Ich möchte, dass Sie in diesem Container zwei verschiedene Abschnitte hinzufügen, von denen einer Text und der andere ein Bild sein wird. Sie werden den Text auf der linken Seite und das Bild auf der rechten Seite hinzufügen . Sie benötigen etwas mit zwei verschiedenen Spalten. Dieser ist 50, 50 sogar. Teilen Sie diesen hier auf, wo Sie links einen kleineren und rechts einen größeren haben auf, wo Sie links einen kleineren und . Wähle diesen. Jetzt haben Sie einen Container mit zwei Untercontainern im Container Kommen Sie wieder hierher zum Strukturbereich, Sie werden sehen, was ich meine Klicken Sie auf das Drop-down-Menü und Sie haben einen Container mit dem ersten kleineren Behälter darin und dann dem zweiten größeren Behälter. Jetzt wollen wir hier ein Bild und dort Text einfügen. Gehen wir zum Plus und fügen ein Element hinzu. Holen wir uns zunächst das Bild-Widget und ziehen es in den größeren Container auf der rechten Seite. Offensichtlich wird es nur als graues Standardfeld angegeben. Nochmals, wir werden in Kürze darauf zurückkommen. Auf der linken Seite, hier wollen wir, wir werden hier zwei verschiedene Arten von Text hinzufügen. Kehren Sie zu Ihrem Klick „Element hinzufügen“ zurück. Zunächst beginnen wir mit einer Überschrift. Wir werden das zuerst einwerfen. Wie Sie hier sehen können , wurden die Standardeinstellungen für Typografie und Farben nicht mehr die Standardeinstellungen für Typografie und Farben Im nächsten Teil dieses Kurses werden wir uns globale Farben und globale Schriften ansehen Und du wirst sehen, wie du diesen ändern kannst und ihn somit auf der gesamten Website ändern kannst. Aber das ist vorerst okay. Darunter werden wir ein normales Textfeld hinzufügen. Kehren Sie hierher zurück und klicken Sie auf Element hinzufügen. Wählen Sie dann in diesem Abschnitt den Texteditor. Und ziehen Sie es erneut unter die Überschrift. Als Nächstes möchte ich, dass Sie sich den Abstand und die Ausrichtung ansehen. Wie ihr sehen könnt, befindet sich dieser neue Abschnitt direkt unter dem Heldenbereich. Zwischen den beiden Dingen befindet sich ein winziger kleiner weißer Raum . Wenn ich auf den Pfeil klicke, wirst du sehen, was ich meine. Das ist nicht genug Platz. Eine wichtige Sache , an die Sie sich beim Webdesign erinnern sollten , ist die Atempause. Dies ist der Raum um jedes Element herum. Die Regel hier ist ziemlich einfach. Wenn zu viel auf einmal los ist, ist es zu voll. Wenn es zu voll ist, wissen die Benutzer nicht wirklich, wo sie suchen und wo sie mit dem Lesen beginnen sollen. Sie benötigen eine einfache Einrichtung von A nach B , damit alles klar und leicht lesbar ist. Sie benötigen einen leeren weißen Raum, um jeden Abschnitt herum eine Atempause. Was ich hier tun werde, ist die Ränder auf dem Hauptcontainer zu ändern . Lass uns hierher gehen und auf den Hauptcontainer hier auf der linken Seite klicken . In diesem Moment musst du auf den erweiterten Bereich klicken. In Bezug auf das Layout haben Sie zwei Optionen, mit denen Sie herumspielen können. Hier haben Sie den Rand und Sie haben die Polsterung. Der einfachste Weg, das zu betrachten, ist, dass der Rand der Raum draußen ist Die Polsterung ist der Raum auf der Innenseite. Wir brauchen keinen Platz im Inneren dieses Containers, wir brauchen nur Platz oben und unten Schauen wir uns den Rand an. Ich werde hier nach oben klicken. Ich werde eine Pixelmenge hinzufügen, die sich über und unter diesem Container befindet. Versuchen wir es vielleicht mit 100 Pixeln. Wie Sie sehen können, wurde bei meiner Arbeit jeder einzelne Abschnitt hier auf 100 Pixel geändert. Jetzt gibt es oben und unten, aber auch rechts und links einen Rand von 100 . Ich möchte nicht, dass sie da sind. Bei Elementor gibt es diese Einstellung automatisch hier, wo Werte miteinander verknüpft werden Was du tun musst, ist das auszuschalten. Klicken Sie einfach darauf und kehren Sie dann zu den beiden zurück , bei denen Sie auf Null und rechts in Null, links und rechts, zurückkehren wollten . Jetzt habe ich einen Rand von 100 Pixeln über diesem Container und einen Rand von 100 Pixeln unter diesem Container. Das heißt, wenn sie mit dem nächsten Abschnitt beginnen, gibt es einen geraden Abstand zwischen den einzelnen Abschnitten, 100 Pixel hier oben und 100 Pixel darunter. Als Nächstes sollten wir uns die Ausrichtung ansehen. Seite des Designs, wenn Sie eine Entscheidung darüber treffen müssen , wo sich alles im Verhältnis zu allem anderen befindet. Der Moment, in dem sich der Text oben im Container befindet. Das ist die Standardeinstellung von Elementor. Ich finde jedoch nicht, dass das so gut aussieht. Ich denke, es wäre besser, wenn der Text in der Mitte des Bildes auf der rechten Seite wäre. Wir müssen jetzt diesen Untercontainer auswählen, den ersten, der den Text enthält. Und Sie können entweder auf dieses kleine graue Symbol in der Ecke klicken oder Ihre Strukturnavigation verwenden. Offensichtlich waren wir im Hauptcontainer und wir wollen nur einen dieser Untercontainer bearbeiten. Wählen Sie den aus, in dem sich der Text befindet. Dann ist der Aufbau hier dem, was wir zuvor gemacht haben, sehr ähnlich. Wir müssen nur hierher gehen, um den Inhalt zu begründen und zu sagen, dass er im Mittelpunkt stehen soll. Da haben wir's. Auch was die Atempause angeht: Was Sie vermeiden möchten, Was Sie vermeiden möchten sind Dinge, die zu nahe beieinander liegen. Hier haben wir zum Beispiel Text. Es gibt keinen großen Abstand zwischen dem Text und dem Bild. Sie sind zu nahe beieinander, was das Lesen erschwert. Was wir wollen, ist ein bisschen Leerraum hier auf der rechten Seite dieses Containers. wir erneut sicher, dass wir uns in diesem Container befinden, und gehen wir zu Advanced. Hier werden wir statt des Randes Padding verwenden , weil ich Platz innerhalb des Containers haben möchte auf der rechten Seite zu diesem Symbol und schalten Sie Linkwerte zusammen aus, wodurch alles auf Null gesetzt Was wir dann sagen wollen, ist ein Leerzeichen auf der rechten Seite. Ich möchte nicht, dass dieser Raum irgendwo anders ist. Ich brauche keine Polsterung oben , unten oder links das ansehe, denke ich, dass 50 Pixel da vielleicht okay sein sollten Wie Sie sehen können, wurde dadurch der gesamte Text nach links verschoben und es gibt dort einen viel besseren Abstand dazwischen. Vielleicht braucht es nur ein bisschen mehr Platz. Also diese Überschrift, eine ist weiter weg. Runden wir es auf 75. Da haben wir's. Das ist perfekt. Schauen wir uns nun die Überschrift an, die wir hier haben. dies zu bearbeiten, klicken Sie erneut auf die Überschrift selbst oder hier in Ihrem Strukturbereich. Wählen Sie zuerst die Überschrift aus. Nun, ich möchte, dass hier ein anderer Titel steht. Ich werde einfach im Namen der Firma schreiben, die sehr gut funktioniert, aber ich muss mit der Typografie und den Farben, die hier verwendet werden, herumspielen Typografie und den Farben, die hier verwendet werden jedoch zunächst diesen hier unten an, Schauen Sie sich jedoch zunächst diesen hier unten an, auf dem HTML-Tag steht Und klicken Sie auf das Drop-down-Menü. Hier haben Sie mehrere verschiedene Optionen für ein Tag, das hinter dem Text steht. Ich werde im nächsten Teil des Kurses etwas mehr darüber erklären . Ich werde diesen jedoch auf H ändern. Das bedeutet Überschrift eins. Der Grund, warum ich H One gewählt habe, ist, dass Sie immer ein H One auf Ihrer Seite haben sollten . Das ist die Einführung in Ihre Seite und hilft den Leuten, Ihre Website in Google zu finden. Als allgemeine Spielregel gilt: Achte darauf, dass du nie mehr als ein H eins für die nächste Überschrift hast, mach aus dem H zwei. Um nun das Aussehen zu ändern, gehen wir zum Stil über. Zuallererst die Textfarbe, sie wird automatisch in dieses Blau gestrichen. Aber das gefällt mir nicht wirklich. Ich glaube nicht, dass es wirklich zu mir als Unternehmen passt. Ich mag das Dunkelrot, das wir hier oben haben , wirklich, ich möchte eine andere Farbe, die gut passt. Damit denke ich vielleicht an Gold, dunkles Fett, Gold. Was wir tun werden, ist auf dieses Blau hier drüben zu klicken. Dann ziehe ich diesen nach links. Wir gehen in den gelblicheren, goldeneren und orangefarbeneren Bereich. Ich finde, da sieht es gut aus. Dann zieh den hier herum. Spielen Sie einfach damit herum, bis Sie eine Farbe gefunden haben, von der Sie glauben, dass sie perfekt funktioniert. Ich muss mich daran erinnern, das ist farbiger Text auf weißem Hintergrund. Du willst also nicht, dass etwas zu hell ist, weil niemand es lesen kann. Wenn du nur reines Schwarz willst, kannst du das wählen. Aber auch hier möchte ich diese goldene Farbe für mich haben. Wählen Sie die Farbe, die Ihrer Meinung nach am besten zu Ihnen und dem Produkt passt, für das Sie werben möchten. Scrollen wir nach oben. Ich mag diesen. Ich denke, das ist dunkel genug und mutig genug. Hell genug. Ich werde ein bisschen mutiger. Da haben wir's. Ich denke, das funktioniert besser auf dem weißen Hintergrund. Auch hier geben sie dir die Hexadezimalfarbe, sag die. Notieren Sie sich das für später. Nun, Typografie, sie hat diese Schriftfamilie automatisch ausgewählt um sie für alle Überschriften zu verwenden Das ist eine nette Schrift. Ich finde, es ist gut für den Haupttext, aber ich will es nicht für die Überschrift. Ich möchte hier eine größere, mutigere Shouter-Schrift. Klicken Sie auf Ihr Drop-down-Menü. Was angezeigt wird, ist eine Liste aller Typografien, die Sie auf der gesamten Website verwenden können Hier gibt es Hunderte. Sie können einfach jeden einzelnen durchgehen und sie einzeln ausprobieren, aber das würde sehr lange dauern. Ich würde empfehlen, Typografie zu finden , die Ihnen gefällt, die Sie woanders verwendet haben und von der Sie glauben , dass am besten zu dem Service passt, den Sie hier bewerben möchten Ich habe es getan, und ich werde das einfach eingeben und sicherstellen, dass es eine der Optionen hier ist Ich mag den, zu dem man berufen ist, wirklich. Da haben wir's, es taucht auf. wähle ich aus. Ja, da haben wir's. Wie Sie sehen können, ist das viel mutiger. Und Shoelier steht nur für das, was wir mit diesem Service hier erreichen wollen Weitere Optionen können Sie hier vornehmen, oder Sie können mit der Größe herumspielen Auch hier ist dies auf Pixel eingestellt. Halten Sie es bei Pixeln und ziehen Sie es dann einfach vor und zurück, damit Sie sehen können , was für Sie funktionieren wird. Ich möchte, dass es groß und ziemlich fett ist, aber nicht auf zwei Zeilen steht. Gehen wir vielleicht bei 40 Pixeln und dann beim Gewicht an. Wie Sie hier sehen können, gibt es viele verschiedene Größenoptionen. Je größer die Zahl, desto fetter die Schrift, die Sie wählen, ist natürlich die Schrift, die Sie wählen, 100, das ist die dünnste Aber mir gefällt, was wir gerade mit der halbfett gedruckten Version hatten. Ich finde fett und schwarz ist zu fett, also lass uns halbfett Dann haben Sie noch ein paar Optionen. Sie können Groß - oder Kleinschreibung wählen. Ich möchte hier wirklich Großbuchstaben. Ich denke, das ist noch mutiger. Und Sheli, los geht's, Style. Sie können es normal oder kursiv haben, aber das gefällt mir nicht, weil es mich repräsentiert Aber das sieht cool aus. Es hat ein bisschen einen Retro-80-Sl-Stil, aber ich werde es einfach als normale Dekoration unter Linie über Linie behalten . Ich brauche nichts davon, also lasse ich es einfach als Standard stehen, was die Nicht-Version ist. Das ist fast perfekt. Ich habe nur das Gefühl, dass zwischen den einzelnen Buchstaben etwas Platz benötigt wird. Ich werde hier zum Buchstabenabstand gehen und damit herumspielen. Wenn ich es einfach von links nach rechts ziehe, können Sie sehen, dass der Raum dadurch viel größer und viel kleiner wird. Ich möchte, dass es nur ein bisschen größer ist, damit es lesbar ist, vielleicht zwei Pixel oder 2,5 Pixel, ich denke, 2,5. Ich denke , das ist genug Platz zwischen den einzelnen. Aber wenn ein Benutzer das sieht, kann er es sehen, da steht Wolfgang. Musik, die toll aussieht. Ich werde auf meinen Pfeil klicken und einfach sehen, wie das aussieht. Ja, ich finde, das ist ein netter Fluss von oben zu diesem Abschnitt hier. Natürlich brauchen wir hier ein bisschen mehr Informationen und Bilder. Ich möchte Ihnen erklären, wie Sie globalen Text und globale Farben auf der gesamten Website einrichten globale Farben auf der gesamten Website , sodass, wenn wir diese Überschrift erneut verwenden würden, sie in genau derselben Farbe und in genau derselben Schriftart erscheint . 7. Einstellung von Elementor Global: Als Nächstes möchte ich mir globale Farben und Typografie ansehen , die auf der gesamten Website verwendet werden Um das zu sehen, gehen Sie hier zum Menü und klicken Sie auf dieses Symbol hier, Seiteneinstellungen. Als Erstes werden wir uns die globalen Farben ansehen. Dies ist die Seite, die Sie sehen , wenn Sie globale Farben öffnen. Dies zeigt uns eine Vorschau. Das heißt, wenn Sie hier Änderungen vornehmen, werden diese hier angezeigt. Die andere Option ist ausgeschaltet, was bedeutet, dass Sie, wenn Sie hier eine Änderung vornehmen, die Änderungen dann auf Ihrer Live-Website sehen werden. Ich würde empfehlen , das für diese Phase zu verwenden. Aus gestalterischer Sicht ist es sehr klar. Hier haben wir eine Primärfarbe und eine Sekundärfarbe. Und die Haupttextfarbe. Die Akzentfarbe, naja, das ist wie die zusätzliche Farbe. Wenn Sie nicht die Primär- oder Sekundärfarbe verwenden möchten, können Sie die Akzentfarbe verwenden. Wir werden das auf dieser Website wahrscheinlich nicht benötigen, aber auf einer größeren Website möchten Sie vielleicht eine dritte zusätzliche Farbe, die nur in möchten Sie vielleicht eine dritte zusätzliche Farbe sehr geringer Menge verwendet wird. Nun möchte ich für die Primär- und Sekundärfarben die beiden Farben verwenden, die wir bisher auf der Website verwendet haben. Ich möchte die Primärfarbe Dunkelrot und die Sekundärfarbe Gold haben. Wenn Sie sich erinnern, als wir diese Bereiche eingerichtet haben, hatten wir einen Hex-Code. Wenn Sie von diesen brillanten Aufnahmen gemacht haben. Wenn nicht, gehen Sie zurück in den Editor, klicken Sie einfach auf das X hier oben und es heißt, möchten Sie die Änderungen speichern, die Sie vorgenommen haben? Wir haben noch keine Änderungen vorgenommen. Lege diese Karte jetzt einfach hin. Finden wir die Farben , die wir zuvor eingerichtet haben. Der erste war im Hauptcontainer von Hero. Klicken Sie in der Struktur darauf, gehen Sie zu Stil, gehen Sie zur Hintergrundüberlagerung und hier ist es Klicken Sie hier oben auf die Farbe und Sie sehen den Hex-Code unter Highlights. Kopieren Sie ihn Gehen wir nun zurück zu den Seiteneinstellungen und Global Colors, gehen wir zu Primary und fügen es dort ein. Wie Sie sehen können, hat sich die Primärfarbe jetzt in dieses Dunkelrot geändert . Klicken Sie auf Änderungen speichern und schließen Sie dieses Fenster erneut. Gehen wir nun zur Überschrift hier. Klicke auf die Farbe. Kopieren Sie den Hex-Code zurück zu Site Settings Global Colors. Machen wir das zur Sekundärfarbe. Jetzt können Sie sehen, wie die beiden Farben zusammenpassen und Sie können sehen , dass es einen guten Kontrast zwischen den beiden gibt. Die nächste, die ich ändern möchte, ist die Farbe des Textes. Das ist ein bisschen grau, da ich Live-Text auf der Seite habe. Lassen Sie uns diese Vorschau wieder ausschalten. Wie Sie sehen können, gibt es hier unten Text, genau diese Farbe verwendet, 777. Es ist ein bisschen zu hell, ich möchte es etwas dunkler machen. Klicken Sie auf die Farbe und spielen Sie dann mit diesem Farbwähler hier herum. Wenn du es komplett schwarz machen willst, ziehe es ganz nach unten in die hinterste Ecke und du erhältst den Hexadezimalcode 0000 Ich finde das jedoch ein bisschen zu dunkel und ein bisschen zu fett. Also werde ich es einfach ein bisschen nach oben bewegen , damit es ein bisschen heller ist. Also gehst du von einem Extrem zum anderen. Ich finde, das sieht toll aus. Nun, die Akzentfarbe, ich glaube nicht, dass ich die verwenden werde, aber wenn ich da eine dritte Farbe haben wollte, nun ja, ich denke, ich muss eine wählen, die gut zu Rot und Gold passen würde . Ich weiß es nicht. Vielleicht dunkelblau oder so. Lass uns einen Blick darauf werfen. Lila, glaube ich. Genau wie ein Dunkelblau. Ich werde das wahrscheinlich nicht verwenden, aber das ist eine ziemlich neutrale Farbe. Das funktioniert mit allem gut. Ich werde es einfach lassen. Wenn Sie in Ihrem Akzent weitere Farben als Ihren Primär- oder Sekundärtext benötigen , können Sie hier eine weitere hinzufügen. Nennen Sie es, wie Sie wollen, und wählen Sie dann Ihre Farbe. Aber mehr will ich nicht. Ich bin zufrieden mit den vier, die ich habe. Ich habe auf Löschen geklickt , weil ich es nicht verwende. Ich wähle Löschen. Jetzt, wo ich alle meine globalen Farben eingerichtet habe, werde ich diese Änderungen speichern. Jetzt zeige ich Ihnen nur, wie diese globalen Farben funktionieren , um die Konsistenz auf Ihrer gesamten Website zu gewährleisten. Nachdem wir gespeichert haben, klicken wir auf das X. Wählen wir einfach ein beliebiges Element Insight aus. Hier werde ich eine SMS schreiben. Und dann klicken wir hier auf den kleinen Stift , um die Überschrift zu bearbeiten. Jetzt haben wir eine zusätzliche Option. Wir können hier wählen , wo die Schriftfarbe steht. Jedes Mal, wenn Sie eine Farbe auswählen müssen, klicken Sie auf dieses kleine Globussymbol mit der Aufschrift Benutzerdefiniert. Daraufhin werden Ihnen die Primär-, Sekundär-, Text - und Akzentfarben angezeigt . Sagen wir einfach, eigentlich wünschte ich, das wäre in der Primärfarbe. Ich klicke darauf und es ändert sich zu dem. Es bedeutet nur, dass, wenn ich die gesamte Website durchgehe und den Text überall ändern möchte , ich ihn immer in die richtige Farbe ändere, die primäre oder sekundäre Farbe. Ich muss das nicht manuell machen. Es ist automatisch. Dafür. Schauen wir uns nun die Typografie an. Sie hier zu den Seiteneinstellungen zurück und gehen Sie zum Bereich Typografie Hier wählen wir die Typografie und die Schriftarten aus, die in allen Teilen der Website verwendet werden sollen Auch hier wird lediglich die Konsistenz gewährleistet, d. h. wenn es sich um die Größe und das Gewicht unserer H-One-Überschrift handelt, wird sie immer dieselbe sein, wann immer sie verwendet wird Schauen wir uns zunächst den Haupttext an. Dies ist nur der Haupttext. Wenn Sie große Textblöcke erstellen, klicken wir auf den Stift. Es wird einfach auf eine Standardeinstellung gesetzt. Wenn Sie das auf etwas anderes ändern möchten , klicken Sie hier. Vielleicht bist du wie Aerial als Schrift, oder vielleicht möchtest du, dass eine Sera-Schrift da reinpasst Schauen Sie sich auch hier andere Schriften an. Schauen Sie sich Google Fonts und solche Orte an, um zu sehen, ob Sie eine finden, von der Sie glauben, dass sie für Sie und den Dienst, den Sie anbieten möchten, geeignet ist. Ich werde eine weitere Google-Schriftart namens Roboto auswählen, die ich an anderer Stelle verwendet habe namens Roboto auswählen, die ich an anderer Stelle Roboto. Roboto. Schauen wir uns jetzt H one an. Das ist die Überschrift, die wir hier bereits eingerichtet haben. Lass uns einfach kopieren, was wir dafür gemacht haben, weil ich weiß, dass das dort funktioniert. Und das bedeutet nur, dass ich das auf der gesamten Website verwenden kann . Klicken Sie erneut auf das Stiftsymbol. dann anstelle der Standardeinstellung versuchen, Lassen Sie uns dann anstelle der Standardeinstellung versuchen, uns daran zu erinnern, was Sie zuvor getan haben. Natürlich können Sie einfach zurückgehen und sich dann die Überschrift ansehen , die Sie hier eingegeben haben. Aber wenn ich mich richtig erinnere, glaube ich, dass ich das auf 45 Pixel eingestellt habe. Dann war das Gewicht halbfett, transformiert Großbuchstaben. Und der andere, den ich geändert habe, war der Buchstabenraum, in ich 22,5 Pixel eingestellt habe Das ist mein. Jetzt kannst du damit herumspielen und 234 einrichten. Wenn Sie eine sehr textbasierte Website haben, möchten Sie mehrere verschiedene Überschriften haben, da es sich dann eine Überschrift mit einer Unterüberschrift und dann um eine Unterüberschrift Für diese Seite denke ich jedoch, dass ich mir nur die H eins und die H zwei ansehen werde die H eins und die H zwei Ich weiß, was ich für die H-One eingerichtet habe, und ich werde die H-Zwei genauso machen. Ich werde es jedoch nur etwas kleiner machen. wieder zu H zwei, klicken Sie auf Ihren kleinen Stift, wählen Sie die Familie und die Größe. Nun, der letzte, was haben wir? Wir hatten 45. Setzen wir das einfach auf, vielleicht auf 30. Aber das Gewicht, dieselbe Transformation, Abstand zwischen Großbuchstaben, 2,5 Spielen Sie damit herum, sehen Sie, was für Sie funktioniert, und Sie werden es später herausfinden Wenn Sie mit H eins und H zwei herumspielen und das Gefühl haben, dass es nicht die richtige Größe hat, brauchen Sie es ein bisschen größer oder ein bisschen kleiner Du kannst reinkommen und es ändern. Wenn Sie es einmal hier ändern, wird es sich auf der gesamten Website ändern. Spielen Sie also gut damit herum. Sorgen Sie dafür, dass Ihre Farben und Ihre Typografie so funktionieren , wie Sie es für Ihre Website möchten Und klicken Sie dann auf Änderungen speichern. Eine letzte Sache, die Sie überprüfen sollten, sind auch Ihre globalen Schriftarten. Ja, wir haben den Haupttext eingerichtet, und wir haben H eins und H zwei eingerichtet. Aber stellen Sie einfach sicher, dass Ihr Theme weiß , welche Schriftarten und welche Typografie Sie hier verwenden. Gehen wir zurück zu den Seiteneinstellungen und gehen wir zu Global Fonts Es ist nur dieser Abschnitt hier unten, wir sicherstellen müssen genauso funktioniert wie der Text, den wir im Bereich Typografie eingerichtet haben Klicken Sie auf eines davon oder in Ihrem Menü hier drüben, klicken Sie einfach auf den Stift Stellen Sie einfach sicher, dass sie der Typografie und den Schriftarten entsprechen, die wir an anderer Stelle auf der Website verwenden In diesem Fall wählen wir einfach Anton als primär, On für sekundär und dann Text Nun, das ist bereits für Roboto eingerichtet, ebenso wie Axon. Es bedeutet nur, dass das Theme sich der Tatsache bewusst ist, dass wir diese Schriftarten auf der gesamten Website verwenden Speichern wir diese Änderungen und kehren dann zum Editor zurück. 8. Bild-Slider-Galerie: Nun, da Typografie und globale Farben eingerichtet sind, wollen wir diesen Einführungsabschnitt beenden Zuallererst haben wir hier natürlich einen Titel, aber unser Körper ist kopierbar, es ist einfach Laurum Wir müssen hier unseren eigenen Text hinzufügen. den Mauszeiger über den Text, klicken Sie darauf, klicken Sie auf das Symbol oder verwenden Sie Ihre Struktur hier. Sie wissen jetzt, wie Sie mit all dem umgehen können. Dann bearbeiten wir im Pop-up hier auf der linken Seite den Inhalt. Jetzt wurde der Text, der hier reingegangen ist automatisch als Absatztext eingegeben. Sie können das ändern, wenn Sie verschiedene Elemente verwenden möchten. Wir könnten also die erste Überschrift wählen sie dann in die erste Überschrift ändern, die wir zuvor im Abschnitt Typografie eingerichtet haben , oder in Überschrift zwei Das haben wir auch dort eingerichtet. Wir wollen jedoch nur einen Absatz, weil wir wollen, dass hier nur der normale Fließtext verwendet wird. Wir haben die Typografie ausgewählt, die dafür verwendet werden soll, und wir haben die Farbe dafür ausgewählt Komm einfach rein, lösche den Text, der schon da ist, und fang dann einfach an, deinen Text einzuschreiben Schreiben Sie es am besten direkt hinein, denn dann gibt es keine weiteren Probleme mit Texten, die möglicherweise von woanders kopiert wurden. Aber ich zeige dir , was ich damit meine. Anstatt es aufzuschreiben, habe ich den gesamten Text bereits geschrieben und werde ihn kopieren und in dieses Feld einfügen , das tatsächlich herausgekommen ist. Okay, wenn Sie es sich ansehen, aber wenn Sie das in ein Word-Dokument geschrieben haben oder es für eine E-Mail verwendet haben, könnte es tatsächlich zusätzlichen HTML-Code enthalten haben, der hier nicht benötigt wird. Es könnte automatisch auf eine andere Typografie umgestellt oder an anderen Stellen eingefügt werden, wo sie nicht benötigt werden Wenn Sie dieses Problem haben oder wenn Sie Text haben und ihn löschen möchten, damit Sie ihn sicher hier verwenden können Nun, einfach Google, eine Seite wie diese, alles, was ein HTML-Stripper ist, offensichtlich gibt es hier jede Menge Werbung. Schließ die. Wenn Sie einfach eine Kopie, die Sie auf dieser Website verwenden möchten , auf der linken Seite einfügen und auf HTML entfernen klicken, werden Sie feststellen, dass die Ausgabe auf der rechten Seite jeglichen nicht benötigten HTML-Code gelöscht hat jeglichen nicht benötigten HTML-Code gelöscht Ich sagte, dieser sei sowieso schon in Ordnung, aber nur für den Fall, kopiere ich die Ausgabe und gehe zurück zu meiner Website und füge sie ein Das sieht alles toll aus. Ich bin bisher sehr zufrieden mit dieser Einrichtung. Wird auf meinen Pfeil klicken. Ich finde, das sieht toll aus, aber vielleicht möchte ich, dass das Bild auf der rechten Seite ein bisschen größer ist. Um das zu tun, muss ich nur die Größe der beiden Behälter ändern , die ich hier drin habe. Sie erinnern sich, als wir das eingerichtet haben, bevor wir uns für einen etwas kleineren auf der linken Seite und einen etwas größeren auf der rechten Seite entschieden einen etwas kleineren haben. Wenn Sie auf jeden dieser Container klicken, wählen Sie das Layout. Sie können die genaue Größe dieser Container sehen. Der kleinere ist 33,3 dann ist der größere 66,6, es ist ein dritter und 23. Wenn ich den Bildcontainer etwas größer machen möchte , klicken Sie einfach auf den Container in der Struktur, zur Breite und geben Sie eine andere Zahl ein Sagen wir 70, vielleicht sogar noch größer, vielleicht 75. Ich weiß, es ist kein großer Unterschied, aber ich denke, das funktioniert viel besser. Ich mag die Art und Weise, wie Wolfgang und Music jetzt in zwei Reihen sitzen. Der Text ist allerdings ein bisschen zu klein. Klicken Sie einfach hier auf das Symbol. Gehen Sie auf eine Typografie, klicken Sie auf Ihren Stift. Deshalb habe ich diesen Wert tatsächlich auf 40 gesetzt und dann in meinen Typografie-Einstellungen auf 45. Ich denke, in meinem Kopf hätte es 45 sein sollen, also werde ich diesen Wert einfach auf 45 ändern. Da haben wir's. Ich denke, das funktioniert wirklich, wirklich gut. Ich denke, das bedeutet, den Speicherplatz besser zu nutzen , wenn Sie anfangen, Ihre eigene Website zu erstellen Spielen Sie einfach damit herum. Es wird alles darauf ankommen, wie viel Text Sie hier haben, lang Ihre Überschrift ist, welche Art von Bild Sie verwenden möchten, Platz. Gehen wir zurück zum Editor wählen dann das Bild aus, das wir verwenden möchten. Hier auf der rechten Seite, klicken Sie einfach auf das Bild hier auf der linken Seite. Gehe zu Bild bearbeiten und dann zur Medienbibliothek. Ich suche hier nach etwas Eigenartigem, das zu meiner kleinen Einführung passt Ich mag diesen mit dem kleinen LED-Licht. Du bist, was du hörst. Lass uns das versuchen. Ja, ich finde, das sieht toll aus. Lass uns das Panel verstecken. Ich finde, das ist ein netter Übergang vom oberen Teil zu diesem Abschnitt, weil er das Schwarz und das Rot repräsentiert , die wir hier verwenden. Eine weitere Sache, die Sie überprüfen sollten, wenn Sie ein Bild einfügen, ist hier auf der linken Seite, wo „Bild bearbeiten“ steht , was die Bildauflösung ist. Klicken Sie auf dieses Drop-down-Menü und Sie werden viele verschiedene Optionen sehen. Der Grund, warum Sie damit herumspielen möchten , ist, dass Sie es auf die richtigen Seiten bringen möchten, nicht zu groß und nicht zu klein. Wenn es zu groß ist, verlangsamt es das Laden Ihrer Website. Wenn es zu klein ist, wird es einfach schlecht aussehen. Lass es mich dir einfach zeigen. Wenn ich ein Vorschaubild wähle, ist es winzig geworden. Das ist der Weg für diese Website. Wenn ich dann zu diesem gehe, ist die Auflösung über 2000 mal 2000 Pixel, es sieht absolut gut aus. Es ist jedoch einfach zu groß für diesen Abschnitt, denn wie Sie sich erinnern können, betrug die Breite unserer Website 1.140 Pixel Es muss nicht so groß sein. Tatsächlich war die Standardeinstellung, die es aktiviert hatte , groß 1024 mal 1024. Wählen Sie das einfach aus, wenn Sie mit diesem Abschnitt zufrieden sind. Es ist immer gut, hierher zu kommen und den Entwurf zu speichern. Ich denke, das funktioniert sehr gut als Einführung. Ich denke jedoch, dass es ein bisschen mehr braucht. Ich denke, es braucht eine zusätzliche Schicht. Ich glaube einfach nicht , dass ein Bild ausreicht , weil wir im Musikladen viele verschiedene Dinge machen. Ich möchte ein bisschen mehr angeben. Hier gibt es ein paar Optionen. Eine Möglichkeit besteht darin, einfach mehrere Bilder übereinander einzufügen , die vollständig gestapelt Ich mag jedoch den Raum, der dadurch gefüllt wird. Jetzt möchte ich nicht, dass es mehr Platz einnimmt als das einzelne Bild. Wir werden dieses einzelne Bild in ein Bilderkarussell umwandeln Das bedeutet, dass mehrere verschiedene Bilder von einem zum nächsten gleiten Um das zu tun, kommen Sie hier zu Ihrem Plus und fügen Sie ein Element hinzu. Scrollen Sie nach unten zum allgemeinen Bereich und wählen Sie den Bereich aus , bei dem es sich um ein Bildkarussell handelt Ziehen Sie das dann in den Container. Wenn Sie nun all diese Dinge rüber ziehen, werden Sie diese kleinen Linien sehen , die auftauchen, sodass Sie es über oder unter etwas dazwischen platzieren können . Nun, dieser soll das Bild ersetzen , das da ist. Achte nur darauf, dass du deine rosafarbene Linie oben oder unten siehst. Lass uns oben wählen. Willst du, dass das Karussell hier steht? Ich möchte eigentlich nicht mehr, dass dieses Bild da ist. Eine schnelle Möglichkeit, diesen Rechtsklick zu löschen , wählen Sie Löschen. Das können wir hier oben in der Struktur machen. Rechtsklick, löschen. Lassen Sie uns jetzt dieses Karussell bearbeiten. Klicken Sie auf das Karussell oder wählen Sie es hier in Ihrer Struktur Dadurch wird das Inhaltsmenü hier auf der linken Seite angezeigt Zuallererst müssen wir einige Bilder auswählen, nicht wahr? Klicken Sie auf Bilder hinzufügen Es wird Ihnen erneut die Medienbibliothek angezeigt, das Bild, das wir dort hatten. Ich habe dieses Bild immer noch geliebt und ich möchte, dass es mein erstes Bild ist. Ich werde dieses auswählen. Dann möchte ich ein paar Bilder hinzufügen, die die beiden wichtigsten Dinge zeigen, die wir in diesem Musikladen machen. Zuallererst Instrumente, wir verkaufen Gitarren. Das dritte, ich werde dieses Vinyl-Bild wählen , weil wir auch Musik im Laden verkaufen Ich denke, drei ist dafür eine gute Zahl. Spiel selbst damit herum. Überlegen Sie, wie viele Sie darin aufnehmen möchten. Du willst nicht zu viel. Du willst keine 100 Bilder. Du willst es kurz und knapp halten. Klicken Sie hier, erstellen Sie eine neue Galerie und klicken Sie dann auf Galerie einfügen. Wie Sie sehen können, sind die drei Bilder des Karussells hier erschienen. Scrollen wir einfach ein bisschen nach unten damit wir das besser sehen können Oder wenn Ihre Struktur im Weg ist , können Sie sie nach oben verschieben. Oder wenn du es loswerden willst, kannst du es hier schließen, aber vielleicht einfach auf eine Seite legen , wo es nicht im Weg ist. Vielleicht drüben auf dieser Seite, aber ich denke, dort ist es eigentlich okay. Ich glaube, ich habe genug Platz. Zuerst das Bild vergrößern, wieder zu klein für das, was wir hier haben. Vorschaubild, zu klein. Lassen Sie uns das auf das ändern, was wir zuvor hatten. Die große Version, 1024 mal 104, sie sind alle größer geworden. Ich möchte jedoch nicht, dass alle drei Bilder gleichzeitig angezeigt werden, ich möchte nur, dass eines angezeigt wird. Und dann möchte ich, dass es automatisch zum nächsten Bild hier drüben wechselt, wo es heißt, dass Folien angezeigt werden sollen. Stellen Sie sicher, dass wir auf dem Desktop sind. Dann wählen wir statt der Standardeinstellung eine aus. Ich möchte nur, dass jeweils ein einzelnes Bild angezeigt wird. Wie Sie hier sehen können, gleitet es automatisch von einem zum nächsten. Ich denke, das ist eigentlich perfekt die Geschwindigkeit und alles angeht. Wie Sie sehen können, gibt es hier auch kleine Pfeile. Das heißt, wenn ein Benutzer auf die Seite kommt, kann er sie in seiner eigenen Geschwindigkeit durchblättern. Es gibt ihnen beide Optionen, zeigt ihnen automatisch , dass es noch etwas anderes gibt, und ermöglicht es ihnen, durch sie zu blättern. In Bezug auf diese Pfeile und diese kleinen Punkte unten. Nun, spielen Sie hier ein bisschen mit der Navigation herum. Es ist automatisch auf Pfeile und Punkte eingestellt. Wenn du nur die Pfeile haben willst, wähle diesen. Und natürlich das Gleiche mit den Punkten, oder du kannst nichts haben. Aber ich mag die Pfeile und Punkte. Lass uns einfach auf diesen Pfeil klicken. Verstecke das Panel. Ich finde , das sieht toll aus. Ich glaube, wenn ich von hier oben nach unten scrolle, sehe ich dieses animierte Karussell, das mir verschiedene Dinge zeigt, die ich erwarten kann, wenn ich zu Wolfgang gehe verschiedene Dinge zeigt, die ich erwarten kann, wenn ich zu Musik Ich glaube, ich möchte hier nur ein zusätzliches Element hinzufügen Ich möchte dir nur zeigen, wie man eine weitere coole Kleinigkeit macht , um Text im Grunde so aufzuteilen , wie wir es hier haben. Wir haben den Header und dann haben wir den Haupttext. Ich möchte nur eine Linie zwischen den beiden setzen. Ich werde einen sogenannten Teiler einbauen. Das ist ein weiteres Element hier. Und das Element wählen Sie dann aus dem grundlegenden Abschnittsteiler und ziehen Sie es dann einfach darüber Und denken Sie auch hier daran, dass die rosafarbenen Linien Ihnen zeigen, wo es hinfallen Und ich will es zwischen den beiden Textteilen haben. Lass es da liegen, so sieht es aus. Es bedeutet nur, dass es eine zusätzliche Aufteilung zwischen den beiden Textabschnitten gibt. Aber ich weiß nicht, ich bin mit der Größe und dem Platz nicht so zufrieden. Ich spiele einfach wieder ein bisschen damit herum, klicken Sie einfach auf Ihre Trennwand, klicken Sie auf Ihr Stiftsymbol Dann ist das Erste, womit Sie hier herumspielen können das Stilelement oder es gibt mehrere verschiedene Stile, von denen einige etwas verrückter sind als andere, dass Sie eine lockige Linie haben können, Sie können gekrümmte Linien haben oder Sie können ganz verrückt werden und Ich weiß nicht, was sonst, Zigzags, da gibt es viele verschiedene Optionen. Wählen Sie eine, die Ihrer Meinung nach am besten zu Ihrem Service und Ihrem Produkt passt, das Sie verkaufen Aber ich denke, genau das Richtige, ich will nur das reguläre. Nur eine solide hat eine gute Breite, ich denke, sie ist einfach ein bisschen zu groß. Ich möchte nicht, dass es bis zum Rand des Haupttextes reicht. Also wird es auf 50% steigen. Das ist besser. Ein bisschen kleiner als Style. Lass uns hier rauf gehen. Zuallererst ist es ein bisschen dünn. Ich werde einfach so hoch legen, dass es auf einer einzigen Zeile steht. Im Moment könnte ich einfach damit herumspielen und auf einer einzigen Zeile steht. Im Moment könnte ich einfach damit herumspielen und es zu etwas Verrücktem machen, oder die größte ist zehn. Aber ich denke, da sind drei vielleicht gut. 3.5 Jetzt drei, ich mag drei. Meine erste Wahl dann finde ich einfach, dass einfach ein bisschen zu viel Platz zwischen den beiden Textteilen und der Zeile einfach ein bisschen zu viel Platz ist. Ich werde die Lücke ändern. Das ist nur der Raum um die Linie herum. Das ändern wir einfach auf fünf. Da haben wir's. Das gefällt mir. Das sieht jetzt viel stärker aus. Vielleicht ist es nur ein bisschen zu dunkelschwarz. Ich möchte, dass es ein bisschen heller ist, nicht stärker als der Text. Auch hier können Sie eine benutzerdefinierte Farbe wählen. Wählen Sie Ihre Primärfarbe, wenn Sie möchten. Ich möchte jedoch immer noch ein Schwarz. Also klicke ich einfach auf den Farbwähler und ziehe ihn einfach hierher Ja, ich finde das großartig. Ich liebe es. Ich denke, was wir jetzt brauchen sind einige weitere Informationen unter dieser ersten Einführung, weitere Informationen darüber, was wir im Geschäft machen. Gehen wir zurück zum Editor. Ich werde euch hier zeigen, wie man Grid macht . Denken Sie daran, dass wir in diesem oberen Bereich einen Container verwendet haben und wir hatten zwei Container in diesem Hauptcontainer. Dabei waren unterschiedliche, inkonsistente Breiten zwischen den beiden Containern zulässig unterschiedliche, inkonsistente Breiten zwischen den beiden Wir begannen mit einer Drei und dann mit 23, und dann konnte ich die Breite dieses Containers bearbeiten, wodurch die Breite dieser 12 automatisch geändert Für diesen nächsten Abschnitt benötige ich jedoch drei Spalten mit exakt derselben Breite. Daher würden wir uns nicht für einen Container, sondern für ein Raster entscheiden. Klicken Sie auf das Plus und wählen Sie Grid. Jetzt haben Sie hier verschiedene Strukturoptionen. Die, nach der ich suche, besteht aus drei Spalten, die auf diese Weise eingerichtet sind. Wenn das, was Sie wollen hier nicht zu sehen ist, machen Sie sich keine Sorgen, Sie können einfach eine beliebige Größe eingeben und es dann selbst bearbeiten Später werde ich einfach drei Spalten auswählen. Da haben wir's. Was wir jetzt hier haben, ist ein Raster. Innerhalb des Rasters befinden sich drei separate Spalten. Was wir tun wollen, ist, dasselbe zu drei davon hinzuzufügen . Ich möchte, dass es ein Bild mit Text darunter ist. Gehen wir zu Elemente hinzufügen über. Lassen Sie uns noch einmal mit dem folgenden Text beginnen , in dem ich gerne etwas Text hätte. Gehen wir zu Element hinzufügen. Und dann nimm deinen normalen Texteditor und lege ihn unter das Bild. Jetzt möchte ich, dass es nach unten geht, aber wie Sie gerade sehen können, es mir diese Option nicht. Wenn ich mir die rosafarbenen Linien ansehe, sind sie nur links und rechts. Wenn ich es irgendwo fallen lasse, wird es tatsächlich in die nächste Spalte verschoben. Das liegt daran, dass Sie in jedem Abschnitt des Rasters nur ein Element haben können. Wie haben wir zwei Dinge? Nun, das ist ziemlich einfach. Ziemlich einfach. Lassen Sie uns zunächst einfach diese beiden Elemente löschen. Was wir brauchen, ist, ähnlich wie zuvor, im Grunde ein Container . In jeder dieser Spalten habe ich einen Container abgelegt. Da es sich um einen Container handelt, bedeutet das, dass ich mehrere verschiedene Elemente in diesen Container legen kann . Das mag etwas verwirrend erscheinen, aber versuchen wir es einfach noch einmal, was wir zuvor versucht haben Ich habe zunächst auf Element hinzufügen geklickt Dann habe ich ein Bild eingefügt. Was ich hier mache, ist, wie Sie hier an der Struktur sehen können, wie Sie hier an der Struktur sehen können, dass ich ein Bild in einem Container abgelegt habe , der sich in einer einzigen Spalte des Rasters befindet. Jetzt unter diesem Bild möchte ich nur wieder den Texteditor haben. Klicken Sie auf ein Element und legen Sie es dann in den Texteditor. Da hast du's. Jetzt können Sie sehen, dass das funktioniert hat. Was wir jetzt tun werden, ist im Grunde zu kopieren, was wir hier drin haben. Ich werde einfach auf den Container klicken. Ich möchte, dass genau dieser Container dreimal erscheint , denn obwohl sie unterschiedliche Bilder und Texte haben werden, ist der Aufbau identisch. Schwebe mit der Maus über dich. Container mit der rechten Maustaste klicken. Wählen Sie einfach Duplizieren. Damit wurde der Container in der nächsten Spalte des Rasters abgelegt . Nochmals duplizieren und los geht's. Jetzt müssen wir nur noch das Bild auswählen, das Sie für jedes Bild verwenden möchten , und unseren Text aktualisieren. Fangen wir wieder mit Bildern an, sind einzelne Bildfelder. Klicken Sie einfach auf Ihr Bild und dann hier links, um das Bild zu bearbeiten. Auch hier dient meine Bildauswahl nur dazu, die Vielfalt der Dienstleistungen zu zeigen , die wir im Musikgeschäft anbieten. Ich werde versuchen, eine andere Variante als das zu bekommen , was wir zuvor hatten. Dieser ist sehr gut, weil das eher die technische Seite von Musikgeräten ist . Wählen wir diesen für die erste Spalte aus, dann für die nächste. Mal sehen, was wir sonst noch wählen können , das ein bisschen anders ist. Ich finde, der hier sieht toll aus. Das sind ein paar Kopfhörer. Das ist ein weiterer Service, den wir im Geschäft anbieten. Wählen wir das dann aus. die letzte Kolumne angeht, denke ich, vielleicht diese, die ein Live-Band-Image ist, da verkaufen wir keine Live-Bands. Aber ich denke, es ist einfach eine gute Darstellung dessen, was wir unseren Kunden anbieten können , um ihnen bei ihren Live-Shows zu helfen. Wählen wir das aus. Da haben wir's. Alle drei Bilder haben genau das gleiche Verhältnis, also drei mal zwei. Das funktioniert also perfekt. Jetzt muss ich nur noch meinen Text hinzufügen. Klicken Sie auf Text, klicken Sie auf das Stiftsymbol oder kommen Sie hier zu Ihrer Struktur. Wie Sie sehen können, haben wir ein Raster mit drei einzelnen Containern darin. Wenn Sie den Text in einem von ihnen haben möchten, öffnen diesen Container und wählen Sie den Texteditor. Aber ich denke einfach, dass es wahrscheinlich am einfachsten ist, einfach auf der Seite darauf zu klicken . Ich habe meinen Text bereits geschrieben und jeglichen HTML-Code entfernt Jeder Text wird hier eingefügt. In diesem Abschnitt ist die Ausrichtung sehr wichtig. Wir haben zwar bei allen drei Bildern das gleiche Verhältnis, die Textlänge ist für jedes Bild ungefähr gleich. Du willst keinen, das sind nur ein paar Worte. Und der nächste besteht aus 100 Wörtern. Versuchen Sie, sie ungefähr gleich lang zu halten dann wird es am Ende des Textes schön aufgereiht sein. Okay, schauen wir uns das an. Verstecken Sie das Panel. Ich finde , das sieht toll aus. Ich finde es perfekt , dass wir von diesem ersten Heldenabschnitt in das Slider-Bild hier unten mit der ersten Einführung übergehen. Dann gehen wir ins Grid. Nur eine winzige Kleinigkeit, die ich hier sehen kann, das wäre das Auge eines Designers , das es aufnimmt, wenn Sie es sehen. Gut gemacht. Nur der Raum, die Ausrichtung dieses Bildes hier und die Ausrichtung dieses Textes. Da ist ein bisschen mehr Platz. Ich werde das durchgehen und bearbeiten. Gehen wir zurück zum Editor. Wie Sie sehen können, wenn ich mit der Maus über den Container fahre, gibt es hier etwas mehr Platz. Das ist eine Standardeinstellung in Elementor. Es wird immer so eingerichtet , dass überall eine kleine Pixellücke entsteht Eine kleine Polsterung, wenn Sie so wollen. Was wir tun werden, ist diesen Container zu bearbeiten. Klicken Sie einfach auf den Container und dann auf Erweitert. Ich möchte nur sicherstellen, dass der Polsterbereich vollständig auf Null gesetzt ist Da hast du's. Ich kann in jedes einzelne gehen und es manuell einrichten, sodass es um jeden herum derselbe Raum gibt. Oder eine schnelle Möglichkeit, dies zu tun, Maus über den Container fahren, von dem Sie wissen , dass er korrekt ist Klicken Sie mit der rechten Maustaste auf Kopieren. Dann geht der Container , den Sie ändern möchten. Klicken Sie dort mit der rechten Maustaste und wählen Sie Stil einfügen. Sie können sehen, dass es automatisch geändert wurde, weil der Stil für diesen Container einen Panning-Wert von Null haben Das wurde in diesem Container gelesen, weil ich Stile kopiert und die Stile hier eingefügt habe , es ändert sich automatisch genau das Gleiche Spiel damit herum. Manchmal funktioniert das für dich, manchmal wird es nicht nur schauen, was du zum Laufen bringen kannst. Ich werde diese Struktur-Sache einfach auch hierher verschieben . Mir fiel ein, dass ich das in diesem oberen Teil nicht gemacht habe. Während dieser hier auf der linken Seite aufgereiht ist , hat dieser Platz Platz. Gehen wir also einfach zum Container bearbeiten oder fügen den Stil erneut ein. Und da hast du es. Es wurde nur die kleine Lücke da drüben entfernt. Und jetzt können Sie sehen, dass es dort perfekt ausgerichtet ist, dass es dort perfekt passt. Fantastisch. Lassen Sie uns die Struktur wieder hierher verschieben und den Entwurf speichern. 9. Animierter Abschnitt über NEU: Okay, deine Website sieht schon cool aus. Und das war ein sehr guter Einführungsabschnitt. Jetzt denke ich, dass wir näher auf Ihr Unternehmen und Ihren Service eingehen müssen . Ich fange an, einen Abschnitt zu erstellen, den ich den Abschnitt Über mich nenne. Was wir hier tun werden, wir werden anfangen, einen neuen Container hinzuzufügen Klicken Sie auf das Schild und wählen Sie Flexbox. Dafür gehe ich hier zu zwei Spalten. Das Einzige, was wir hier etwas anders machen werden, ist die Breite des Containers, des Hauptbehälters. Auch hier klicken Sie einfach auf Ihre kleinen Punkte in der Mitte , um den Container zu bearbeiten. Dann komm hier rüber zum Menü auf der linken Seite. Stellen Sie sicher, dass Sie Layouts ausgewählt haben. Der eine Teil, den wir hier ändern werden, ist der Teil, in dem die Inhaltsbreite steht. Es wird normalerweise automatisch als Box und als Box mit 1.140 Pixeln angezeigt , da dies die Standardeinstellung ist Was wir mit diesem machen werden, ist jedoch die volle Breite Wie Sie hier unten sehen können, haben sich diese internen Säulen bis zum Rand ausgedehnt, bevor sie hier endeten. Jetzt gehen sie bis zum äußersten Rand der Seite. Das wollen wir mit der Breite machen. Wir wollen, dass es die ganze Seite ausfüllt. Lass uns auch einfach mit der Höhe herumspielen. Versuchen wir einfach, dass es auch die gesamte Seite mit Höhe ausfüllt. Der beste Weg, das zu tun, besteht darin, in das Drop-down-Menü hier bei der Mindesthöhe zu kommen und die vertikale Höhe VH auszuwählen Geben Sie eines ein, da das 100% sein wird. Der Plan, den ich für diesen Abschnitt über mich habe, ist ein weiteres starkes Bild auf der rechten Seite und dann Text auf der linken Seite Was wir hier tun werden, ist den Hintergrund für beide internen Spalten zu ändern . Bringen wir das Strukturfenster zurück. Da haben wir's. Das ist unser Hauptcontainer und dann die beiden kleineren Innencontainer. Wählen wir zuerst den Container auf der rechten Seite aus, klicken wir darauf oder klicken wir auf den Container selbst oder auf das graue Feld links. Sie dann hier auf der linken Seite Wählen Sie dann hier auf der linken Seite den Stil im Hintergrund. Klicken Sie erneut auf das klassische Bild und wählen Sie ein Bild aus. Das Bild, das ich hier verwenden möchte, nun, ich möchte, dass es um den Kunden geht. Ich möchte einen unserer Kunden im Laden zeigen , wie er Gitarre spielt. Lass uns den reinwerfen. Da haben wir's. Lass uns die Struktur einfach da drüben verlegen. Das gleiche Problem wie zuvor hatten wir damit, wie es die Kiste füllt. Auch dies sind die Standardeinstellungen. Komm hier nach links, um den Container-Stil zu bearbeiten. Auch hier ändern wir einfach die Einstellungen an dieser Position, sagen wir Mitte, Mitte, Wiederholung, keine Wiederholung, und dann Größe des Mitte, Wiederholung, keine Wiederholung, Deckblatts anzeigen. Da haben wir's. Es füllt jetzt die gesamte Kiste. Das ist allerdings eine ziemlich merkwürdige Ernte. Ich denke jetzt, ich brauche nicht, dass die Höhe 100% beträgt. Das ist wahrscheinlich zu groß für die Textmenge, die ich auf der linken Seite ausführen möchte. Klicken wir auf die Punkte hier oben, um den Container zu bearbeiten, und stellen Sie sicher, dass das Layout ausgewählt ist. Und dann ändern wir vielleicht die vertikale Höhe auf 75%. Los geht's. Ich denke, das ist eine viel bessere Darstellung des Bildes, das ich hier verwendet habe . Lassen Sie uns nun Structure wieder auf diese Seite verschieben. Dann wählen wir diesen Container erneut aus. Wählen Sie ihn in Ihrem Strukturmenü oder klicken Sie einfach auf den Container hier auf der linken Seite und wählen Sie Style Classic. Was ich hier will, ist ein farbiger Hintergrund, denn das hilft bei der Aufteilung zwischen dem Abschnitt oben, der einen weißen Hintergrund haben wird , und dem Abschnitt darunter , der ebenfalls einen weißen Hintergrund haben wird. Wenn das ausgewählt ist, kommen Sie hierher und klicken Sie standardmäßig auf dieses Globussymbol. Und wähle die Grundfarbe. Wählen Sie hier die gewünschte Farbe, aber ich werde die Primärfarbe wählen Ich finde, das ist eine nette Abwechslung vom Weiß oben zu einem farbigen Teil Wie Sie nun von oben sehen können, scrollen wir von diesem farbigen Hintergrund zu einem weißen Bereich nach unten zu diesem fett gedruckten Abschnitt mit farbigem Hintergrund und einem angeschnittenen Bild Ein paar Dinge, die ich hier ändern muss, sind der Abstand zwischen dem obigen Abschnitt und diesem Abschnitt Und auch diese seltsam aussehenden Grenzen , die es hier gibt. Wenn ich auf den Pfeil klicke, schauen wir uns an, wie er in einer Live-Version der Seite aussehen würde . Ja, wie Sie sehen können, gibt es hier immer noch weiße Ränder um jeden Abschnitt. Mal sehen, ob wir die rausnehmen können. Schauen wir uns den Hauptcontainer an. Markieren Sie den Hauptcontainer und wählen Sie oben Ihre Punkte aus, oder wählen Sie ihn im Strukturmenü aus. Dann wählen wir hier auf der linken Seite Erweitert. Lassen Sie uns einfach den Rand und das Padding auf Null setzen. Es muss die Polsterung gewesen sein. Der Abstand wurde automatisch auf vielleicht zehn Pixel eingestellt. Jetzt, wo ich das auf Null gesetzt habe, lassen Sie uns das Panel ausblenden. Da haben wir's. Jetzt geht es an den Rand. Wir haben keinen weißen Bereich am Rand. Wenn Sie das jemals in einem Ihrer Setups sehen, spielen Sie einfach mit Rand und Polsterung im Container oder in den internen Containern herum Container oder in den internen Containern Was ich brauche, ist Platz über diesem Abschnitt, und ich brauche auch Platz unter dem Abschnitt Gehen wir hier rüber zum Rand. Auch bearbeite ich den Hauptcontainer. Lassen Sie uns die Werte verknüpfen dann 100 oben und 100 unten. Mal sehen, wie das jetzt aussieht. Ja, das ist ein viel besserer Abstand zwischen diesem weißen Bereich oben. Es ist auch konsistent in Bezug auf den Abstand hier, den Abstand hier und den Abstand hier , der wiederum unten verläuft. Meine einzige Sorge dabei ist, dass es funktioniert und cool aussieht, wenn ich unsere sehr kräftige Primärfarbe verwende . Aber ich denke, ich möchte, dass es ein bisschen heller ist. Ich möchte immer noch zwischen diesem Abschnitt und den weißen Abschnitten oben und unten aufteilen , aber ich werde einfach mit der Deckkraftfarbe, der Primärfarbe, herumspielen , die ich hier hinzugefügt habe Lassen Sie uns diesen Container erneut bearbeiten. Klicken Sie hier auf Struktur. Klicken Sie auf den Container selbst. Lass uns zu Style gehen. Das haben wir mit dem klassischen Hintergrundtyp mit dieser Primärfarbe eingerichtet . Klicken Sie hier auf die Farbe selbst, die rote Farbe. Dann dieser kleine Balken hier unten , der mit deiner sichtbaren Deckkraft herumspielt Sie können es einfach von links nach rechts ziehen. Dafür kannst du einfach hier oben mit dem Farbwähler herumspielen und eine etwas andere Farbe wählen, aber das geht von der Marke ab Wir ändern die Deckkraft dieser Farbe. Das ist immer noch die Primärfarbe, die wir eingerichtet haben. Es ist immer noch derselbe Hex-Code. Es sind nur die Zahlen, die sich daneben ändern Sie beziehen sich im Grunde auf einen Prozentsatz Ziehen wir es einfach weiter nach unten. Ich glaube, ich schaue mich bei den 20% um, vielleicht bei diesen 121, 21%. Lass mich sehen , wie das jetzt aussieht Ich denke, das ist ein netter Fluss von oben nach unten zu diesem Abschnitt, in den weißen Bereich und dann in diesen. Da reicht eine Aufteilung zwischen den beiden Farben, wie ein separater Bereich, aber es ist nicht zu intensiv, nicht zu voll. Lass uns zurückgehen. Was ich hier einfügen möchte, sind zwei separate Textspalten. der linken Spalte werde ich im nächsten Abschnitt die Nummer 01 haben , darunter werden wir Nummer zwei haben. Nummer drei. Nummer vier, darauf kommen wir später zurück. Hier drin brauche ich zwei Textspalten. Eine, die eine große, sehr fett gedruckte 01 hat, dann eine weitere Spalte daneben dann eine weitere Spalte daneben, die das Wort Gitarren enthält, und dann einige kurze Informationen über den Gitarrenservice Wir werden hier jetzt auf eine zusätzliche Ebene von Containern übergehen hier jetzt auf eine zusätzliche Ebene von Containern übergehen Wir haben zwei Container in einem Container. Ich möchte jetzt zwei weitere Behälter in diesen Behälter auf der linken Seite stellen. Gehen wir zurück zu unserem Plus hier oben und fügen ein Element hinzu. Lassen Sie uns einen Behälter in diesen ersten roten Behälter werfen , der dort oben steht. Fügen wir hier einen weiteren Container darunter hinzu, wir haben jetzt zwei Container in diesem Container. Das würde funktionieren, wenn du deinen Text so einrichten würdest, wie er gestapelt ist, so wie wir 01 oben haben und dann Gitarren und die Informationen unten Aber ich will es nicht so haben. Ich möchte, dass sie nebeneinander ausgerichtet sind. Ich hätte gerne eine Spalte links und eine Spalte rechts. Was wir hier tun müssen, ist den Container zu bearbeiten, in dem sich diese beiden Container befinden. Gehen wir wieder zu unserem Strukturmenü hier. Das ist dann der Hauptcontainer. Wie Sie sehen können, ist dies übrigens der Textcontainer, der hervorgehoben ist. Das ist der, den ich bearbeiten möchte , ich klicke hier. Es wird dann zum Layout übergehen. Ich schaue mir diesen Abschnitt hier an, Richtung. Das bedeutet, dass alles, was sich in Container befindet, entweder horizontal oder vertikal verläuft, da sie übereinander gestapelt sind Im Moment ist das vertikal, ich werde das horizontal ändern Da haben wir's. Sie können die Veränderung sehen, die dort stattgefunden hat. Die beiden Spalten befinden sich jetzt links und rechts voneinander. Jetzt füge ich 01 zu dieser Spalte auf der linken Seite und dann Gitarren und die Informationen zu dieser Spalte auf der rechten Seite Jetzt fangen wir an, den beiden Spalten , die wir hier haben , Text hinzuzufügen beiden Spalten , die wir hier haben , Beginnen wir mit der Spalte auf der rechten Seite. Das ist die einfachste. Wir wollen mit einer Rubrik Gitarren beginnen. Ich werfe das hier rein. Es wird automatisch auf H zwei gesetzt, und das ist es , wonach wir suchen. Schreiben wir einfach das Wort Gitarren in Bezug auf die Farbe dort hinein Ganz wie Rot, aber ich glaube, ich möchte nur , dass es die normale Textfarbe Ich gehe zu Stil und klicke dann auf diese primäre Schaltfläche und wähle dann Text. Das gefällt mir. Gehen wir jetzt hier oben wieder zu Element hinzufügen. Und geben Sie einfach einen normalen Texteditor ein. Auch das ist einfach im Standard-Lurum-Ipsen-Text Ich habe jedoch eine Kopie des gesamten Textes, den ich hier verwenden möchte Das HTML wurde natürlich aus diesem entfernt, ich werde es hier einfügen Was ich jetzt will, ist die Nummer eins oder 01 auf der linken Seite Wir werden das als weitere Überschrift hinzufügen. Gehen wir hier nach oben, um das Element oben hinzuzufügen. Und füge hier auf der linken Seite eine weitere Überschrift ein. Auch hier wird es in einer H-Zwei fallen gelassen, was in Ordnung ist. Und ich werde das auf 01 ändern. das Display angeht, das ich hier haben möchte, möchte ich, dass es näher am Text auf der rechten Seite platziert wird. Im Moment wurde es automatisch als linksbündiger Text eingegeben. Aber das kann ich ändern. Ich kann diesen Text, die 01, an der anderen Seite dieses Containers ausrichten. Um das zu tun, scrolle ich hier nach unten zu der Stelle, an der Ausrichtung steht und wähle die rechte Seite für dieses perfekte Bild aus. Jetzt mit Stil hier, ich möchte das bearbeiten. Ich werde zum Stil übergehen. Zuallererst die Textfarbe. Ich möchte auch nicht, dass sie durchgehend rot ist. Ich werde hier auf die Farbe klicken und den Farbwähler wählen Und ich werde dort tatsächlich reines Weiß in dieser Größe wählen dort tatsächlich reines Weiß in dieser Größe Es ist nicht besonders lesbar. Gehen wir zur Typografie. Klicken Sie hier auf das Stiftsymbol. Ich bin glücklich mit einem, ich bin glücklich mit dem Gewicht hier. Es ist nur die Größe. Das muss viel größer sein. Also werde ich das einfach eine Richtung nach oben ziehen. Ich werde ziemlich viel anfangen, vielleicht sogar 200, es scheint, als ob 200 das Maximum sind, das du erreichen kannst. Es geht um die Verwendung dieser Drag-in-Leiste. Wenn Sie viel größer werden möchten, können Sie einfach den Text hier markieren und eine Zahl eingeben. Schreiben wir 800 ein. Es wird 800 sein, wir wollen es eigentlich nicht in dieser Größe haben. 200 war in Ordnung, aber so können Sie die Textgröße beliebig ändern . Ändern wir das wieder auf 200. Das sieht toll aus. Ich denke, es braucht nur ein bisschen mehr Platz zwischen Null und Eins. Lassen Sie uns hier noch einmal mit dem Buchstabenabstand herumspielen. Ziehen Sie es ein wenig heraus. Ich glaube, ich werde auch hier ans Ende der Bar gehen. Zehn? Ja, ich finde , das sieht toll aus. Lass uns das Panel verstecken. Das gefällt mir wirklich. Mir gefällt die Art und Weise, wie wir hier 01 haben, und dann werden daraus Gitarren, und dann sehen wir das Bild Allerdings stimmen die Ausrichtung und der Abstand hier nicht ganz Gehen wir zurück zum Editor. Zuallererst möchte ich nicht, dass der Text ganz oben in diesem Container steht. Ich möchte, dass es in der Mitte steht. Nochmals, eine sehr schnelle Möglichkeit, das Problem zu lösen besteht darin, zu sagen, dass der gesamte rote Container zentralisiert werden sollte, oder der gesamte Inhalt in diesem Container sollte zentralisiert werden. Auch hier können wir einfach auf den roten Container klicken, auf das graue Feld oben links oder ihn hier in Structure auswählen. Dann möchte ich ganz einfach zu diesem Abschnitt hier gehen, wenn wir uns im Container-Layout bearbeiten befinden, und sagen: Elemente in der Mitte ausrichten. So einfach ist das. Schauen wir uns das an. Ja, ich finde es toll, wie das in der Mitte dieser Kiste sitzt. Das einzige Problem, das wir haben, ist, wie nah der Text hier am Bild rechts ist. Lassen Sie uns die Polsterung ändern. Lassen Sie uns die Polsterung in diesem internen Behälter ändern. Auch hier kann ich zu diesem Abschnitt gehen, auf das graue Feld klicken oder hier in Structure wählen Sie dann hier im linken Gehen Sie dann hier im linken Bearbeitungscontainer zu Erweitert. Lassen Sie uns all diese Abschnitte verknüpfen. Nehmen wir dann auf der rechten Seite an, wir wollen vielleicht 50 Pixel, vielleicht ein bisschen mehr, vielleicht 100. Schauen wir uns das an. Ich denke, das ist ein guter Abstand zwischen dem Text und dem Bild, und das alles passt wirklich gut zusammen. Ich denke, das ist ein toller Fluss von hier oben wo wir Bilder mit Text darunter gestapelt haben , zu diesem, wo wir links die Nummer und rechts das Bild mit dem Text für die Gitarren haben Bild mit dem Text für die Gitarren Das sieht toll aus. Nur noch zwei Dinge, die ich in diesem Abschnitt tun möchte. Eines davon ist wieder nur ein kleiner Vers von Designer-Kopfschmerzen. Ich habe einfach das Gefühl, dass zwischen den Titelgitarren zu viel Platz Und dann der folgende Text Öffnen Sie diesen Container und wir gehen zum Layout Das liegt daran, dass Elementor standardmäßig eine Lücke von 20 Pixeln zwischen jeder Spalte und Zeile einfügt zwischen jeder Spalte und Zeile Offensichtlich sind diese in Zeilen angeordnet. Sie können sehen, dass der Abstand zwischen den beiden Elementen hier 20 Pixel beträgt Ich denke, das ist ein bisschen zu viel. Ich würde es vorziehen, wenn es zehn Pixel wären. Geben wir zehn ein. Da haben wir's. Sieht nicht nach einer großen Veränderung aus, aber aus Sicht eines Designers sind das die Dinge, die uns stören. Das Einzige, was ich damit machen möchte, ist, den Text, den wir hier sehen können, die 01 und die Gitarreninformationen zu animieren 01 und die Gitarreninformationen Leute auf der Seite nach unten scrollen, möchte ich, dass jedes Element anders angezeigt wird, da wir uns hier im Haupttext-Container Lassen Sie uns das zuerst bearbeiten. Gehen wir hier hoch zu Erweitert und dann zu Bewegungseffekten. Hier können Sie auswählen, wie die Eingangsanimation für diese Container-Eingangsanimation aussehen soll . Das heißt, wenn Benutzer diesen Teil der Seite zum ersten Mal aufrufen, wird er so angezeigt. Im Moment ist es auf Standard eingestellt, was in diesem Drop-down-Menü im Grunde nichts Nun, Sie haben hier viele verschiedene Optionen, einige davon sind ein bisschen verrückt Wenn wir uns mit dieser Sache befassen, aufmerksamkeitssuchende Banken, ist das nicht allzu verrückt. Flash, aber dann kriegt man Dinge wie Kopfschütteln, Jello, das ist verrückt Alles, was ich für diesen will, ist ein einfaches Einblenden. Scrollen wir nach oben und sagen wir Einblenden. Und das ist alles, was es tun wird, ist jemand auf der Seite nach unten scrollt, der Text nicht da und dann wird er eingeblendet Sie können mit der Geschwindigkeit herumspielen, mit der das passiert. In diesem Abschnitt hier, Dauer der Animation. Es ist automatisch auf normal eingestellt, aber ich fand, dass das ein bisschen zu schnell war. Wenn ich mich für schnell entscheide , ist das superschnell. Ich möchte, dass es auf langsam eingestellt ist. Ich mag das. Ich denke, es dauert nur eine zusätzliche Sekunde, bis es auftaucht. Das ist die Animation, die ich für diesen Abschnitt hätte , aber ich möchte etwas anderes für den 01. Lassen Sie uns den Container hier in Structure erneut auswählen. Gehen Sie hier auf der linken Seite zu Advanced und dann zu Motion Effects. Ich möchte, dass dieser von der Seite aus angezeigt wird. diese Seite aus statischer Sicht eingeblendet wird, möchte ich, dass sie hineingleitet und angezeigt wird Gehen wir zu diesem Drop-down-Menü. Los geht's. Wir haben andere Einblendoptionen. Wir können Fade-In Down sagen. Wo es so herunterfällt. Links, rechts oben. Ich denke, da sich dieses Element auf der linken Seite des Haupttextes befindet, möchte ich, dass es von links eingeblendet wird. Ja, das gefällt mir. Nochmal, ein bisschen zu schnell. Ändern wir es auf langsam. Jetzt haben wir für jeden von ihnen unterschiedliche Einblendungen. Speichern wir diesen Entwurf und schauen uns dann eine Vorschau der Änderungen an, schauen uns dann eine Vorschau der Änderungen um zu sehen, wie das für Besucher aussehen würde. Dies ist unsere Haupteröffnungsseite. Wenn ein Benutzer nach unten scrollt, gelangt er zu diesem Abschnitt und los geht's Laden wir den einfach neu. So, Gitarren und der Text unten erscheinen. Und dann wird die 01 eingeblendet. Es ist subtil, aber es ist eine andere Möglichkeit, die Aufmerksamkeit Ihrer Besucher auf Ihre Website zu Lenken Sie ihre Aufmerksamkeit wirklich auf das, was Sie als Dienstleistung anbieten. 10. Kreativer animierter Text: Wenn Sie bisher alle Lektionen befolgt haben, haben Sie bereits eine sehr cool aussehende Website. Wir haben diesen coolen Helden, dann diesen tollen kleinen Einführungsabschnitt mit den Schiebebildern. Dann der Start unserer About-Sektion mit 01 Gitarren. Was ich jetzt tun möchte, ist 0,203.04 einrichten . Ich werde es etwas anders machen als das, was Ich werde Ihnen ein cooles Textanimationstool zeigen , das Sie vielleicht noch nie gesehen haben, aber auf Ihrer Website wirklich cool aussehen wird Gehen wir zurück zum Editor. Scrollen Sie hier nach unten. Lassen Sie uns einen neuen Flexbox-Container hinzufügen. Lass uns die 50, 50 wählen. Auch hier ist 50, 50 großartig weil es mit der Aufteilung zwischen Text und Bild übereinstimmt. Für dieses Bild möchte ich es jedoch nicht in voller Breite verwenden, ich möchte, dass es verpackt Wir werden es hier im Layoutbereich so belassen, wie es verpackt ist. Und 1.140 Pixel. Was wir in diesem Hauptcontainer haben , sind zwei Untercontainer Für jeden von ihnen werde ich eine Mindesthöhe in Pixeln einrichten eine Mindesthöhe in Pixeln einrichten Ich möchte, dass die Zeit mindestens 500 Pixel beträgt. Ich möchte, dass das auf beiden Containern ist. Ich klicke einfach mit der rechten Maustaste und kopiere diesen Container. Gehe zu meinem anderen Container, wähle das graue Feld und klicke mit der rechten Maustaste auf Stil einfügen. bedeutet nur, dass die Mindesthöhe automatisch geändert wird , 500 Pixel. Was ich hier für Abschnitt zwei, Abschnitt drei und Abschnitt vier haben möchte drei und Abschnitt vier ähnelt dem, was wir hier haben, wo wir ein Einführungsbild, eine Zahl, einen Titel und etwas Text haben , der darunter läuft. Um nun die Anzeige hier aufzuteilen, haben wir Text auf der linken Seite und ein Bild auf der rechten Seite. Ich möchte hier das Gegenteil tun. Fangen wir mit dem Bild auf der linken Seite an. Klicken wir erneut, um Container bearbeiten zu können. Klicken Sie auf den Container oder wählen Sie ihn hier in Ihrer Struktur aus. Und dann geh zurück zum Stil. Wir werden hier ein Hintergrundbild verwenden. Sie werden gleich sehen, warum, wenn ich anfange, die Zahlen hinzuzufügen. Wählen wir klassisch, wählen wir Bild. Ich werde mich für drei verschiedene Abschnitte entscheiden. In diesem zweiten Abschnitt werde ich über die Platten sprechen, die wir verkaufen, all die Vinyls Ich werde über Live-Shows sprechen und dann werde ich einfach über unsere allgemeine Old-School-Atmosphäre sprechen unsere allgemeine Old-School-Atmosphäre , die man bekommt, wenn man in unseren Laden kommt Die erste, die ich mir ansehen möchte, sind Schallplatten. Ich werde dieses Bild von dem Mädchen hinzufügen , das einige Schallplatten durchsucht. Lassen Sie uns das noch einmal auswählen, die üblichen Einstellungen hier mit Stil. Auf der linken Seite, Mitte, Mitte, Wiederholung, Wiederholung und Displaygröße des Deckblatts. Auch hier wird das Bild automatisch an den Container angepasst, unabhängig vom Verhältnis. Wenn es ein quadratisches Bild ist, wenn es drei mal 24 mal drei ist, passt es trotzdem hierher und alles ist zentralisiert, was für dieses Bild großartig ist, da das Mädchen in der Mitte der Aufnahme steht. Für die Spalte auf der rechten Seite werde ich wieder eine Hintergrundfarbe hinzufügen. Wählen Sie hier einen Container aus, um ihn klassisch zu gestalten. Und dann werde ich Farbe verwenden, ich werde unsere Sekundärfarbe verwenden, das Gold. Aber ich möchte es ähnlich machen wie das, was ich hier oben mit dem Rot gemacht habe , und zwar mit einer geringeren Deckkraft Klicken Sie hier auf die Farbe selbst, kommen Sie zum Farbwähler und ziehen Sie diese Farbe dann auf eine Ebene, mit der Sie zufrieden sind Ich denke, es ist ziemlich leicht, es ist zu eins geworden. Ich mag das. Ich finde das sieht cool aus. Jetzt möchte ich den Text hier rechts platzieren . Und um die Konsistenz zu gewährleisten, gehe ich hier hoch und kopiere, was wir haben. Ich kopiere den Titel Guitars und füge ihn hier ein, um sicherzugehen, dass er exakt die gleiche Größe hat und es wieder H zwei ist, exakt die gleiche Größe hat und es wieder H zwei ist, ich nenne das Album. Dann mache ich eine weitere Kopie des Textes hier und füge ihn unter den Word-Datensätzen ein Ich habe noch einmal den Text kopiert, aus dem ich den HTML-Code entfernt habe, also füge ich Jetzt die Anzeige davon. Ganz richtig, so wie hier in der Ecke alles eingerichtet ist. Ich möchte, dass es zentralisiert wird. Auch hier werde ich den Inhalt des Containers zentralisieren Klicken Sie auf Ihren Container, möglicherweise hier drüben in der Struktur. Gehen Sie zu Layout und lassen Sie uns den Inhalt dann so zentrieren. Und zentrieren Sie den Inhalt auf diese Weise. Das hat alles in die Mitte des Containers geschoben . Das Einzige, was ich noch zentralisieren muss , ist dieser Text hier drin. Ich klicke auf den Texteditor „Text bearbeiten“, gehe zu Stil und dann auf die Ausrichtung dieses Textes Ich möchte, dass das zentralisiert wird. Das sieht toll aus. Das Einzige ist, dass der Text auch hier ein bisschen nahe am Rand ist. Ich werde die Polsterung dieses Containers ändern. Klicken Sie auf Ihren Container und wählen Sie Erweitert. Gehe zu deiner Polsterung Ich denke, vielleicht sollte ein 50-Pixel-Rand für alles in Ordnung sein Diese wurden alle miteinander verknüpft, also fügen wir das auch oben und unten ein. Das ist in Ordnung, weil wir hier genug Platz haben. Es bedeutet nur, dass, wenn jemand den Bildschirm größer betrachtet, immer noch ein gerader Abstand zwischen oben, unten, links und rechts für die Zahl vorhanden ist. Also nochmal, ich gehe hier rauf und kopiere diesen. Ich möchte es über das Bild einfügen , das Sie hier sehen können. Deshalb habe ich ein Hintergrundbild für dieses Bild ausgewählt. Auch hier klicke ich einfach auf den Container oder auf das graue Feld hier oben. Dann füge hier hinein, was in der Zahl 01 steht. Ändern wir das auf 02, dann stellen wir einfach sicher, dass der Text zentralisiert ist. Dann innerhalb des Containers möchte ich, dass das alles zentralisiert ist. Gehen wir zum Layout, senden wir zum Inhalt, zum, alles ist zentriert. Nun aber diesen Text, naja , zwei Dinge möchte ich hier ändern. Erstens kann ich das Mädchen dahinter nicht wirklich erkennen. Lassen Sie uns das Textfeld bearbeiten. Klicken Sie hier auf Ihr Stiftsymbol. Gehen wir zu Style. Gehen wir zur Textfarbe. Klicken Sie auf das Farbsymbol auf der rechten Seite. Lassen Sie uns auch hier einfach die Opazität ändern. Ich werde es jetzt fallen lassen. Das sieht wirklich cool aus, weil wir eine Zahl sehen, aber wir sehen sie über dem Bild. So etwas funktioniert wirklich gut für eine Zahl. Die Zahl ist sehr klar, Sie würden keinen langen Textteil wie diesen machen wollen langen Textteil wie , weil er möglicherweise nicht sichtbar ist. Aber bei so etwas wie einer Zahl ist das nur ein Hinweis darauf , was als Nächstes kommt. Ich habe den Wert dort auf 73 gesenkt. Ich denke, das ist in Ordnung. Ich will nur es mehr Platz einnimmt. Gehen wir zur Typografie. Klicken Sie hier auf Ihr Stiftsymbol , das derzeit auf 200 eingestellt Wie ich bereits sagte, ist das der höchste Wert, den Sie hier mit dem Slider erreichen können. Aber lassen Sie uns das auf vielleicht 400 Pixel erhöhen. Ja, das sieht toll aus. Ich liebe das absolut. Ich denke, das ist eine sehr mutige Aussage. Es sagt den Besuchern, dass sie sich an der zweiten Kreuzung des Abschnitts „Über uns“ befinden , aber ich kann immer noch das Mädchen unten sehen und sehen, was sie tut. Das Einzige, was ich hier hinzufügen möchte, ist eine Animation für den Titel, auf der Records Again steht Klicken wir einfach auf die Überschrift. Wählen Sie es hier in Structure oder klicken Sie auf das rosafarbene Symbol. Dann gehen wir zu Advanced, gehen wir zu Motion Effects und machen dann einfach ein Fade-In. Lassen Sie uns ein Fade-In machen. Das gefällt mir wirklich. Hier möchte ich Ihnen jedoch etwas anderes zeigen. Es gibt eine sehr coole, skurrile Art, einen Titel animieren zu Benutzer zu diesem Teil der Seite nach unten scrollen, möchte ich den Titel in separate Buchstaben unterteilen Der Buchstabe, der Buchstabe und der Buchstabe C, und jeder von ihnen wird auf unterschiedliche Weise animiert Lassen Sie uns diesen Titel bearbeiten und ihn einfach in R ändern Ich habe die Überschrift ausgewählt und gehe hier zu Inhalt und ändere das R. Dann möchte ich den Titel duplizieren Ich schreibe den Klick und ich werde ihn duplizieren. Und ich möchte, dass das einzige Problem, das wir hier haben, in diesem Container ist. Wenn ich zum Layout gehe, werden Sie sehen, dass die Richtung eine vertikale Spalte ist. Aber ich brauche die Buchstaben so , dass sie nebeneinander liegen , damit sie horizontal verlaufen. Wenn ich die Richtung dieses Containers auf horizontal ändern würde, ja, sie sitzen nebeneinander, aber jetzt sitzen sie links neben dem Text, und ich möchte, dass sie übereinander liegen. Ändern wir es wieder auf vertikal. Und was wir hier tun werden , ist einen weiteren Untercontainer in diesen Container einzufügen einen weiteren Untercontainer in diesen Container einzufügen Klicken Sie hier oben auf ein Element und fügen Sie es dann hier Wenn Sie die rosafarbene Linie sehen , platzieren Sie sie über dem normalen Text. Was ich für diesen Container möchte ist , dass die Richtung horizontal ist. Dann habe ich diese Buchstaben schon erstellt. Ziehen wir sie einfach in diesen Container. Klicken Sie auf das Symbol und ziehen Sie nach unten, bis Sie die rosa Linie sehen. Und dann machen Sie dasselbe mit dem E. Oder eine andere schnellere Möglichkeit , dies zu tun, ist das Strukturmenü hier drüben zu verwenden. Weil ich weiß, dass ich diese Überschrift in diesen Container übernehmen möchte , also kannst du sie dort nach unten ziehen, dann ist es in der falschen Reihenfolge erledigt. Lassen Sie uns diesen unter diesen verschieben. Es sitzt so. Das sieht toll aus. Ich möchte jedoch immer noch, dass es zentralisiert wird. Und ich muss auch mit dem Raum herumspielen , der sich zwischen den einzelnen Elementen befindet. Hier, lass uns zum Container gehen. Dieser Subcontainer stellt wiederum sicher, dass alles zentralisiert ist Ebenfalls. Lass uns hier einfach mit den Lücken herumspielen. Auch hier ist die Standardeinstellung, sie auf 20 zu setzen. Wir haben es vorhin auf zehn geändert, nicht wahr? Ich finde immer noch, dass das ein zu großer Raum ist. Lass es uns einfach auf Null ändern. Da haben wir's. Jetzt stellen wir einfach sicher, dass wir die gesamten Wortdatensätze haben. Eine weitere schnelle Möglichkeit, das zu tun , ist hier zu Ihrer Struktur. Wählen Sie Ihren letzten Buchstaben und duplizieren Sie ihn dann. Dann schreib hier drüben den Brief hinein, den du haben möchtest. Tun Sie das oft genug, bis wir den ganzen Buchstaben buchstabiert haben , das ist der falsche Buchstabe Nun, da sagt alles Aufzeichnungen. Der Grund, warum ich mich dafür entschieden habe, daraus separate Buchstaben zu machen , ist , dass ich für jeden Buchstaben oder zumindest für jeden anderen Buchstaben eine etwas andere Animation haben möchte . Wenn wir uns ansehen, was wir auf dem R haben, klicken Sie auf Ihr R und gehen Sie zu Erweitert. Die Bewegungseffekte. Die Zeit wurde schwächer. Gehen wir jetzt zum zweiten Buchstaben und ändern ihn dann so, dass er ausgeblendet Dann nach unten verblassen, D, nach oben, unten. D, hoch. Jetzt speichern wir diesen Entwurf und schauen uns dann nochmal die Vorschau an, um zu sehen, wie, wie das funktioniert. Wenn wir nach unten scrollen, sehen wir dort die Animation, und dann ist das die Animation dort. Lassen Sie mich das für Sie neu laden und Sie werden sehen das Wort Datensätze so aussieht Ich finde, das sieht echt cool aus. Gehen wir jetzt einfach zurück zum Editor. Spielen Sie hier mit der Größe von allem herum. Jetzt, wo wir den gesamten Abschnitt 02 eingerichtet haben, können wir ihn duplizieren und genau dasselbe für Abschnitt drei und Abschnitt vier tun . Jetzt nur noch ein paar Änderungen durch den Designer. Das ist wieder die Art und Weise, wie mein Designer-Gehirn in Bezug auf Abstände und Größen arbeitet Das erste, was ich ändern möchte, ist nur der Abstand zwischen den Titeldatensätzen und dem Text darunter. Gehen wir zum Hauptcontainer, in dem sich das befindet, zu diesem hier. Dann lassen Sie uns die Lücken hier wieder auf zehn ändern. Da haben wir's. Das Einzige, was ich hier noch tun möchte, ist, das Wort Rekord ein bisschen größer und ein bisschen mutiger zu machen das Wort Rekord ein bisschen größer und ein bisschen mutiger Ich werde die Größe der Typografie ändern. Fangen wir einfach mit dem Buchstaben R an gehen dann zu Stil und Typografie Auch bei der Größe wird automatisch übernommen, was auch immer wir für H zwei eingestellt haben, aber das können wir hier manuell ändern Sagen wir vielleicht 45. Ja, ich denke, das ist eine viel bessere Größe. Nun, die einfache Methode, alle Buchstaben hier auf dieselbe Größe zu ändern , besteht darin, den Stil zu schreiben, zu klicken, zu kopieren und einzufügen. Wir möchten jedoch vermeiden , dass das bei allen Buchstaben der Fall ist, denn wenn wir das tun, wird auch der Stil der Eingangsanimation verloren gehen. Da wir einige haben, die oben und andere nach unten verblassen, müssen wir das nur bei jedem anderen tun Gehen wir von R zum Zahlungsstil, dann von C zum Zahlungsstil und von R zum Zahlungsstil Das sieht ehrlich gesagt ziemlich cool aus, wenn du das magst. Aus gestalterischer Sicht sollten Sie es dabei belassen. Aber ich möchte hier nur Konsistenz und dafür sorgen, dass die Wortdatensätze etwas leichter lesbar sind. Lass uns auf das E klicken und dann hier rauf gehen, um Typografie zu stylen Stellen Sie sicher, dass es auch 45 Pixel sind. Kopiere das und füge es in das O und das D ein. Los geht's. Jetzt bin ich mit diesem Abschnitt sehr zufrieden. Ich finde, das funktioniert super und funktioniert wirklich gut. Am 01. Februar macht es das Gleiche. Es listet all die Dinge auf, die wir in der Firma tun, aber es ist auf eine etwas andere, skurrile, coole Art gemacht Auf diese Weise werden wir die Aufmerksamkeit aller weiter unten auf der Seite Aber ich glaube, wir wiederholen genau diesen Stil für Nummer drei und Nummer vier. Das ist sehr einfach und sehr schnell zu machen. Wenn wir einfach den Hauptcontainer duplizieren , sind wir fertig. Ich habe das dort unten dupliziert. Ich mache daraus die Nummer drei und ändere dann den Titel und den Text unten Nur eine Sache, die mich hier stört, ist, dass wir uns verstecken sollten. Das Panel ist nur dieser kleine Raum dazwischen da wir uns im selben Bereich befinden Ich will keinen Platz. Ich will , dass sie sich berühren. Das sind wiederum die Standardeinstellungen, die dieses Element hat, wenn es um das Auffüllen eines Randes Lassen Sie uns diesen Container oben bearbeiten, klicken Sie oben auf Ihre Punkte Komm hier rüber zu Advanced und ändere beide auf Null. Ja, da haben wir's. Ja, das ist perfekt. Jetzt gibt es keinen Raum zwischen den beiden. Das Einzige, was ich hier machen möchte, ist hier mit dem Stil herumzuspielen. Das Problem ist, dass beide dieselbe Goldfarbe verwenden. Sie verschmelzen zu einem, sodass Sie nicht den gleichen Abstand erhalten , den Sie erhalten würden, wenn es eine Lücke gäbe. Was ich hier machen werde, ist eine weitere coole Designsache. Ich werde die beiden Container vertauschen. Gehen wir zu diesem Container und wie Sie sehen können, im Hauptcontainer, werde ich im Hauptcontainer, zwei Untercontainer, den zweiten nehmen und ihn hochstellen, sodass er der erste ist Da haben wir's. Das funktioniert so: Ich gehe 02-03 und dann folgt 04 genauso wie der oben Das wäre einfach eine wirklich schöne Aufteilung von Bildtext, Bildtext, Bildtext Lass uns zuerst 03 aktualisieren. In diesem wird es um Live-Shows gehen. Wählen Sie Ihren Container und ändern Sie dann Ihr Bild für Live-Shows. Ich denke, dieses Foto von dem Typen mit seiner Gitarre. Wählen Sie das aus, weil wir die Position, die Wiederholung und die Displaygröße für die vorherige Version bereits eingerichtet Wiederholung und die Displaygröße für die vorherige Das müssen wir nicht noch einmal machen, das sieht wirklich cool aus. Lassen Sie uns zunächst meinen Text hier hinzufügen . Es geht um Live-Auftritte. Dann muss ich das ändern, um Live-Shows zu sagen. Das alles muss manuell gemacht werden. Also lass uns hier reingehen und das Wort Live-Shows aufschreiben . Nun ein paar Probleme hier. Erstens gibt es nicht genug Buchstaben. Lassen Sie uns hier ein paar Buchstaben duplizieren. Ich brauche noch zwei. Lassen Sie uns diese beiden duplizieren, sie in W ändern. Und das Duplizieren des Buchstabens bedeutete nur, dass die Animation auf dem W jetzt falsch ist . Lassen Sie uns einfach die Überschrift bearbeiten Gehen Sie hier hoch zu Erweitert und ändern Sie es auf das Gegenteil Das sollte ausgeblendet werden. Jetzt sind sie alle richtig angeordnet. Ich denke, die andere Sache ist gut, Live-Shows könnten ein einzelnes Wort sein, aber ich behandle es hier als zwei separate Wörter. Ich brauche ein kleines Leerzeichen zwischen dem E und dem S. Das geht ganz einfach . Wählen Sie „Gehe zu a“. Die Verknüpfung der Werte aufheben und dann auf der rechten Seite dieses Buchstabens etwas Abstand hinzufügen , vielleicht zehn Pixel Da haben wir's. Das funktioniert perfekt. Lassen Sie uns jetzt einfach den obersten Container duplizieren. Rechtsklick auf Duplizieren. Offensichtlich wurde es dadurch über Nummer drei entfernt, aber ich werde die Punkte hier auswählen und sie nach unten ziehen, um darunter zu gelangen. Da haben wir's. Sie werden jetzt sehen, wie die Abschnitte von einem zum nächsten fließen. sie so aufteilen, Sie die Aufmerksamkeit der Leute viel besser Lassen Sie uns den letzten hier unten bearbeiten. Dann machen wir daraus 04. Das wird die Abteilung der alten Schule sein. Gehen wir als Container zum Stil und wählen Sie das Bild aus. Ich will dieses Bild von Kassetten. Das ist sehr altmodisch. Das sieht toll aus mit einer 04 oben drauf. Ich habe meinen Text kopiert. Lassen Sie mich das in den Texteditor einfügen. Dann muss ich diesen so ändern, dass er Old School sagt , genau wie wir es oben getan haben. Manuell ändern. Dann lassen Sie uns einfach den letzten Buchstaben duplizieren und daraus ein L machen. Und stellen Sie sicher, dass wir die Animation so ändern , dass sie in die entgegengesetzte Richtung zeigt. nach unten verblassen. Ändere das , sodass es wieder eingeblendet Alte Schule. Das könnte ein einzelnes Wort sein, ich bin mir nicht sicher, aber ich möchte, dass es zwei verschiedene Wörter sind. Lassen Sie uns erneut das D wählen. Gehe zu Erweitert. Trennen Sie die Verknüpfung der Werte und fügen Sie weitere zehn Pixel hinzu Nun, das sieht brillant aus. Lassen Sie uns den Entwurf speichern und dann eine Vorschau der Seite anzeigen. Scrollen wir nach unten. Wir gehen in den Slider-Bereich, dann haben wir die Animation von 01 Gitarren, und als wir hier runter rutschen, zwei Platten, 03 Live-Shows, 04 Old School Das sieht echt cool aus. Das Beste daran ist, dass die Animation erst startet, wenn ein Benutzer in diesen Abschnitt scrollt Anstatt Schallplatten, Live-Shows und Animationen der alten Schule auf einmal Sie werden animiert, wenn ein Besucher zu diesem Teil der Seite gelangt Das sieht wirklich gut aus. Wenn Sie all diese Lektionen befolgt haben, haben Sie jetzt Ihren Helden, Ihre Einführung und Ihren vollständigen Abschnitt über uns, in dem es heißt: Wir verkaufen Gitarren, wir verkaufen Platten Wir eignen uns hervorragend für Live-Shows und sind sehr altmodisch. 11. Kundenrezenssionen: Ich werde Ihnen jetzt nur zeigen, wie Sie drei weitere Teile hinzufügen Zuallererst wird der letzte Abschnitt der Seite einige Kundenreferenzen enthalten Dann schauen wir uns die Fußzeile und die Kopfzeile an , die beide für jede Website wichtig sind Fangen wir einfach mit den Testimonials an. Das ist dank eines Elements oder Widgets sehr einfach. Lassen Sie uns einen neuen Abschnitt als Raster einrichten. Und ich möchte, dass das drei Spalten sind. Dann stellen wir einfach sicher, dass wir hier oben einen Spielraum haben . Raster bearbeiten, Erweitert. Trennen Sie die Verknüpfung der Werte und sagen wir einfach 100 oben, 100 unten Nochmals, genau derselbe Abstand, den wir an anderer Stelle zwischen den Abschnitten haben anderer Stelle zwischen den Abschnitten Gehen wir dann nach oben, um den Elementtyp in den Testimonials hinzuzufügen , und ziehen wir ihn dann in die erste Spalte Das ist alles sehr einfach einzurichten. Ich zeige dir einfach den ersten, und dann können wir ihn einfach für die anderen beiden duplizieren. Fangen wir einfach mit dem ersten an. Fangen wir zuerst mit dem Bild Ich habe Bilder von den drei Musikern, die unseren Laden sehr hoch bewertet haben. Fangen wir mit diesem Typen an, sein Name ist Jimmy. Ich habe seinen Kommentar kopiert. Lass uns den hier drin einfach hinter uns lassen. Die Erfahrung ist immer großartig. Das Verkaufsteam ist immer sehr hilfsbereit und beantwortet immer alle Anfragen. Danke Jimmy. Jetzt müssen wir nur noch seinen Namen hinzufügen und vielleicht einfach den Stil dessen ändern, was wir hier haben. Lassen Sie uns zunächst zum Namen gehen. Die Textfarbe hier ist rot, aber ich glaube, ich möchte nur, dass das die normale Textfarbe dann der Titel, wo es im Moment heißt, Designer, wieder, ich mag es einfach, dass der schwarz ist. Ich finde, das sieht einfach nett und sauber aus. Wenn du selbst damit herumspielen willst, probiere dort verschiedene Farben aus. Probieren Sie Ihre primären Sekundärfarben aus. Fühlen Sie sich frei. Gehen wir einfach zurück zum Inhalt. Fügen wir seinen Namen hinzu, Jimmy Hendricks Titel. Nun, hier ist ein Gitarrist. Ist wirklich nicht so einfach. Lass uns das einfach zweimal duplizieren . Das sieht schon richtig cool aus, aber offensichtlich brauchen wir Zeugenaussagen von zwei verschiedenen Personen. Lass mich einfach zum zweiten gehen, das bearbeiten, das Bild ändern. Der Typ, der hier genannt wird, bringt ihn vorbei. Kopieren Sie seinen Kommentar und ändern Sie ihn in Guns and Roses. Danke. Und dann für die letzten 11 meiner Lieblingsmusiker, dieser Typ Wolfgang. Wolfgang Amadeus Mozart. Worüber wurde Wolfgang gesagt? Fügen wir das ein. Wolfgang hat gesagt, dass wir ein ausgezeichnetes Geschäft mit schneller Lieferung und sehr gutem Service und Aufmerksamkeit für die Kunden sind. Danke Wolf. Geben wir hier einfach Wolfgang ein und er ist unter seinem Titel ein klassischer Musiker. Ich denke, es braucht nur ein bisschen mehr Platz zwischen den einzelnen. Lass uns das Raster einfach noch einmal bearbeiten. Gehen wir wieder zum Layout. Die Lücken wurden auf eine automatische Anzahl von 20 Pixeln eingestellt . Ändern wir das auf 40. Das hat nur ein bisschen mehr Platz hinzugefügt. Vielleicht 50. Da haben wir's. Ich denke, das ist einfach ein besserer Abstand zwischen den einzelnen. Jetzt sind sie alle perfekt unten angeordnet. Ja. So einfach ist das. So einfach ist es, Testimonials hinzuzufügen. Ich denke, das ist eine großartige Möglichkeit, Ihre Seite durchzugehen , sodass Sie in den Bereich „Über uns“ gelangen Das machen wir und das sind Kunden, die uns geliebt haben. 12. Website-Fußzeile: Jetzt ist der Hauptbereich der Website abgeschlossen. Wir werden uns zwei letzte Teile ansehen, und das sind die Fußzeile und die Kopfzeile Normalerweise würde das in Elementor so funktionieren, dass wir hier zum Symbol gehen und den Theme Builder auswählen würden Das bedeutet, dass wir hier reingehen und einen Header und einen Fuß machen können Das bedeutet, dass das auf jeder einzelnen Seite unserer Website angezeigt jeder einzelnen Seite unserer wird und identisch sein wird. Wir haben jedoch sowieso nur eine einzige einseitige Website. Das andere Problem ist , dass es sich um eine Pro-Funktion handelt, sodass dies in der kostenlosen Version nicht möglich ist. Lass uns einfach diesen schließen und zurück zum Editor gehen. Jetzt werden wir einfach einen Fuß genauso erstellen , wie wir alles andere auf dieser Seite erstellen. Klicken Sie auf das Plus-Symbol. Lassen Sie uns Flexbox wählen, und ich denke, zweispaltig. Was ich hier will, ist eine Karte dem Standort des Ladens auf der linken Seite, und dann nur mehr Informationen, Kontaktdaten , Telefonnummer, E-Mail-Adresse, Sache, da dies das Ende der Seite ist, möchte ich es auf sehr mutige Weise abschließen. Ich werde einfach den gesamten Container, den Hintergrund des gesamten Containers, zu einem durchgehend schwarzen Hintergrundtyp im Bearbeitungscontainer-Stil machen Hintergrund des gesamten Containers . Lassen Sie uns dann, was unsere Farben angeht, die Farbe wählen. Da hast du's. Damit ist der gesamte Hintergrund gefüllt. Wenn ich zurückgehe, kannst du sehen, dass es da unten steht. Offensichtlich ist da jetzt nichts drin. Aber es ist einfach eine nette Art, die Seite zu beenden. Als Erstes möchte ich es auf einer Karte ablegen. Gehen wir in diesem Abschnitt nach oben, um ein Element hinzuzufügen. Geben Sie erneut map ein. Google Maps werden wir hier verwenden. Und ziehen Sie das buchstäblich in Ihre erste Box. Es ist automatisch so eingerichtet, dass dieser Standort angezeigt wird. Es ist das London Eye, das in London. müssen wir jedoch ändern, denn unser Musikgeschäft befindet sich hier in Sydney und es befindet sich an einer der Hauptstraßen im Zentrum von Sydney, die George Street heißt, und es ist die Nummer 100. Ich werde das einfach löschen. Und dann gebe ich 100 George Street, Sydney ein. Und lass uns sehen, was passiert. Hilf mir, Sydney zu buchstabieren. Genau da sind wir. Jetzt zeigt es die Karte zur 100 George Street. Benutzer können hierher kommen und auf die Wegbeschreibung klicken , wenn sie wissen möchten, wie sie zu uns kommen. Es ist jedoch ziemlich weit draußen. Das Gute daran ist, dass Sie mit dem Zoom herumspielen können , um eine Vorstellung davon zu bekommen, wo er sich befindet. Wie Sie hier sehen können, befinden wir uns ganz in der Nähe des Wassers und ganz in der Nähe des Museums für zeitgenössische Kunst. Du kannst hier auch mit der Höhe herumspielen, wenn du 400 Pixel willst, finde ich das super. Perfekt. Jetzt hier auf der rechten Seite, lassen Sie uns den Text eingeben. Fangen wir mit einer Kopfzeile an. Komm her, um eine Elementüberschrift hinzuzufügen. Was ich hier sagen möchte, schauen Sie sich uns an. Ich denke, das sollte weiß sein. Gehen wir zur Stilfarbe und ziehen den Farbwähler auf Weiß. Das ist großartig Dann gehen wir zum Element hinzufügen und fügen dann den Texteditor darunter hinzu. Auch hier habe ich gerade meinen gesamten Text kopiert, um ihn hier einzufügen . Er wird auf die übliche Weise angezeigt, aber der größte Teil des Textes ist schwarz. Gehen wir also zum Stil und verwenden das Farbbild, um es in Weiß umzuwandeln. Auch weil es weißer Text auf schwarzem Hintergrund ist. Ich denke, die Topographie muss nur ein bisschen älter sein Es nimmt die Standardeinstellung auf , die wir hier festgelegt haben, bei der es sich nur um das Normalgewicht handelt Ändern wir es vielleicht auf halbfett. Ja, das ist viel besser. Wie Sie sehen können, erscheint die E-Mail-Adresse, die ich hier eingegeben habe, rot. Das liegt daran, dass es sich um einen Link , der automatisch angezeigt werden kann , wenn Sie Ihre E-Mail-Adresse eingeben. Wenn nicht, hebt „Zurück zum Inhalt “ den Text hervor, den Sie in einen Link umwandeln möchten. Sagen wir einfach, ich möchte diese Adresse als Link verwenden, ich markiere den Text und klicke dann auf Einfügen. Link. Hier könnte ich eine beliebige Webseitenadresse eingeben, Facebook.com, und mich dann bewerben Es bedeutet nur, dass die Leute, wenn sie hier klicken, zu Facebook.com weitergeleitet werden Aber ich möchte nicht, dass das Das ist die, die wir uns wirklich ansehen, diese E-Mail-Adresse Wie Sie sehen können, wurde sie automatisch mit der E-Mail-Adresse eingegeben. Davor hatte es die Wörter Mail to Colon und dann die E-Mail-Adresse. Dies ist, was Sie benötigen, damit Benutzer, wenn sie sich das ansehen und darauf klicken, ihre E-Mail-App geöffnet wird. Das sieht alles toll aus. Nur eine kleine Änderung, die Sie daran vornehmen möchten, was wiederum die Designer-Sache ist. Ich werde mich mit Stil beschäftigen, mit Typografie. Ich denke, zwischen den einzelnen Zeilen ist zu viel Platz. Lassen Sie uns einfach die Zeilenhöhe auf 16 senken. Das ist besser. Dann nur noch eine letzte Sache hier, oder zwei letzte Dinge. Dieser Container, ich möchte zentralisiert werden. Ich brauche auch ein bisschen Platz, ein bisschen Polsterung links von diesem Ich werde hier reinkommen, um die Linkwerte gemeinsam auszuschalten, und dann füge ich zusätzliche 50 Pixel zu dieser Seite hinzu Das sieht toll aus. Das einzige, was der ganze Behälter benötigt, ist ein bisschen Platz oben und unten. Lass uns hier auf den Hauptcontainer klicken. Gehen wir zu Advanced, dann gehen wir zu Padding und heben die Verknüpfung der Und dann sagen wir an den oberen 100 und am unteren Rand von 100. Das hat nur etwas zusätzliche schwarze Polsterung um alles herum hinzugefügt um alles herum Lass uns einfach sehen, wie das aussieht. Das sieht soweit alles perfekt aus. Scrollen Sie vom Helden zur Einführung, zu den zahlreichen Abschnitten über das Thema, Zeugnissen und dann zum Fuß Das ist großartig. Jeder hat die Seite durchgelesen. Sie sind beeindruckt von dem , was wir anbieten. Sie lieben all die Zeugnisse und jetzt wissen sie, wo wir uns befinden, sodass sie rübergehen können 13. Website-Header NEU: Okay, jetzt fügen wir den Header zu unserer Website hinzu. Header kann einer der Abschnitte sein , mit denen Sie beginnen möchten. Es kann eines der ersten Dinge sein, die Sie tun. Ich persönlich bevorzuge es, dies bis zum Ende zu lassen , weil ich mich dann bereits für den Stil und die Struktur von allem anderen auf der Website entschieden den Stil und die Struktur habe. Ich weiß genau, welche Typografie ich verwende und welche Farben ich verwende Um das hinzuzufügen, müssen wir einen weiteren Abschnitt über dem Helden hinzufügen Gehen wir hier hoch, klicken wir darauf und fügen dann einen Flexbox-Container hinzu. Was ich für diesen Header möchte, ist eine ziemlich standardmäßige Einrichtung , so dass ich das Logo auf der linken Seite habe und dann die Navigationsleiste, alle Links und vielleicht meine Social-Media-Schaltflächen auf der rechten Seite. Ich werde eine auswählen, die eine kleine Spalte auf der linken Seite und eine größere auf der rechten Seite ist. Zunächst möchte ich mit diesem ganzen Container eine Mindesthöhe wählen. Ich gehe hier rüber zu Container bearbeiten, stelle sicher, dass ich im Layout bin, und füge eine Mindesthöhe in Pixeln von 100 Pixeln hinzu. Außerdem möchte ich zu Advanced wechseln. Ich möchte nur all diese auf Null setzen. Dort gibt es keinen leeren Raum um irgendetwas herum. Die Höhe ist gut, aber wie Sie sehen können, es in einer weißen Kiste, die direkt über dem Helden steht. Das will ich nicht. Ich möchte ein weißes Logo und weißen Text verwenden , um auf dem Helden zu sitzen. Wie mache ich das? Nun, wie Sie sehen können, haben wir diesen Container mit einer Höhe von 100 Pixeln eingerichtet . Was ich tun muss, ist den Container unter dem Hero-Container auszuwählen und den Rand dort zu ändern. Gehen wir hier rüber zu Advanced. Lassen Sie uns die verknüpften Werte ausschalten. Normalerweise würden wir in diesem Abschnitt, wenn wir 100 Pixel darüber hinzufügen wollten, genau 100 Pixel hinzufügen. Das würde passieren. Darüber hättest du einen leeren Raum von 100. Aber ich möchte das Gegenteil davon tun. Ich will -100. Das wirst du einschreiben. Setze ein Minuszeichen daneben. Und da hast du es. Jetzt sitzt der Container darüber drauf. Ja, du kannst einen kleinen weißen Bereich sehen, aber lass uns einfach auf diesen klicken. Du wirst sehen, dass das verschwindet. Das ist nur für unseren redaktionellen Zweck. Du kannst noch nichts sehen. Aber jetzt befindet sich der zusätzliche Container, den wir hinzugefügt haben , über dem Container darunter. Als erstes möchte ich am ersten Container im Header-Container arbeiten . Kommen wir hierher, um zu strukturieren. Wähle deinen oberen Container, wähle Untercontainer. Lassen Sie uns als Erstes einfach zu Advanced gehen und all das auf Null ändern Es gibt keinen leeren Raum um ihn herum. Ich möchte das Logo hier einfügen. Ich komme alle her, um ein Element hinzuzufügen, ein Bild einzufügen. Zuerst bekommen wir die graue Box. Lass uns das Bild wählen. Was ich hier machen möchte, ist mein Logo wieder hinzuzufügen. Jetzt haben wir bereits diesen verwendet , der eher vertikale Stil. Ich möchte den horizontalen Stil so haben, wie ich das Symbol links und dann den Wolfgang-Music-Text rechts habe. Lass uns das wählen. Das ist eingetroffen. Aber wo ist es hingegangen? Warum kann ich es nicht sehen? Der Grund, warum Sie es nicht sehen können , ist , dass der Container unter dem Hero-Container tatsächlich über dem Header-Container liegt . Alles was wir tun müssen, ist Elementor mitzuteilen , dass der Header darüber sitzen soll Komm her zu Structure. Also Container, komm hier rüber zu Bearbeiten, Container, klicke auf Erweitert. Der Abschnitt, den wir uns hier ansehen, heißt Z-Index. Was wir hier tun können, ist in verschiedenen Zahlen anzugeben, das heißt, je höher die Zahl, desto weiter oben wird sie im Layering-System stehen, da wir keinen der anderen Container darunter nummeriert haben. Ein einfacher Container wird hier genügen, der all das in den Vordergrund gerückt hat Gehen wir zurück zu diesem Abschnitt. Mein Logo, naja, es ist zu groß. Ich denke, der Behälter, in dem es ist, nimmt zu viel Platz ein. Ich glaube, ich brauche etwas mehr Platz für den Container auf der rechten Seite, hier drüben, was die Struktur angeht. Gehe zu deinem zweiten Container, dann komm hier zur Breite rüber, dann lass uns ihn ein bisschen größer machen. Vielleicht 75%, wie Sie sehen können , dadurch ist das Logo etwas kleiner geworden. Tatsächlich ist das immer noch zu groß. Gehen wir zu 80. Was wir hier tun, ist, dass wir in diesem Abschnitt einfach viel mehr Platz für viel mehr Inhalt zulassen . Ich finde jedoch immer noch, dass das Logo etwas zu groß ist. Ich werde das Bild entweder hier in der Struktur auswählen oder indem ich darauf klicke. Dann gehe ich hier zu Style. Und dann werde ich die Breite des Logos ändern. Wie Sie sehen können, ändere ich die Prozentsätze davon. Ich denke, 50% sind genug. Das einzige Problem ist, dass es einfach in der Mitte dieses Containers steht. Jetzt möchte ich, dass es links steht, damit alles zusammenpasst. Gehen wir zurück zum Inhalt und richten ihn dann einfach nach links aus Außerdem möchte ich, dass es zentraler auf diesen Container mit einer Höhe von 100 Pixeln ausgerichtet ist. Gehen wir einfach zu dem Subcontainer, in dem es sich befindet. Klicken Sie darauf, gehen Sie zu Layout und zentrieren Sie dann den Inhalt Wenn ich jetzt den Pfeil drücke, bist du fertig. Sie können sehen, wie das sitzt. Jetzt oben auf der Seite, Das ist alles perfekt. Keine leeren Leerzeichen. Ein Logo in perfekter Größe befand sich einfach auf der linken Seite. Jetzt muss ich nur noch meine Links und meine Social-Media-Buttons auf der rechten Seite platzieren . Wählen wir den Container hier auf der rechten Seite aus. Wähle das nochmal in der Struktur, lass uns einfach hier rein. müssen wir nicht immer tun , aber wie Sie sehen können, , als ich das gemacht habe der weiße Bereich oben entfernt, als ich das gemacht habe. Es stellt nur sicher, dass es im Backend keine zusätzlichen Abstände gibt denen Sie nicht wussten , dass sie da sind. Das kann die Ansicht für Ihre Benutzer durcheinander bringen. Als Nächstes möchte ich eine Navigationsleiste hinzufügen, das ist eine Navigationsleiste zur rechten Spalte Die Art und Weise, wie diese Dinge normalerweise auf Websites funktionieren, wenn es mehrere Seiten gibt ist, dass sie Sie auf eine andere Seite weiterleiten Aber da wir eine einzige Seite haben, funktionieren diese Schaltflächen so, dass sie Sie zu diesem Teil der führen. Sie werden das an anderer Stelle auf einseitigen Websites gesehen haben . Wir müssen lediglich Schaltflächen für jeden Bereich der Website hinzufügen für jeden Bereich der , den die Benutzer besuchen sollen. Wir werden uns für Gitarren, Schallplatten, Live-Shows und Old School entscheiden Schallplatten, Live-Shows und Old School Das ist sehr einfach zu bewerkstelligen. Gehen wir hier zum Plus-Add-Element über. Und wir wollen einen Button. Lass uns einfach unseren ersten Button hier reinlegen. Es ist wie ein kleines blaues Kästchen rausgekommen. Klicken Sie hier darauf. Nun, zuallererst wollen wir, dass hier Gitarren stehen. Was ich dann will, ist im Grunde kein blaues Kästchen oder Leerzeichen um das Wort Gitarren herum Gehen wir zum Stil über, dann gehen wir hier rein zur Normalversion und bewegen den Mauszeiger, bei den Buttons hat man natürlich immer eine normale Version, so wie die Leute sie sehen Wenn Sie dann mit der Maus darüber fahren, kann sich oft die Farbe ändern , die Sie oben sehen Was ich mit der normalen Version machen möchte , ist die blaue Farbe herauszunehmen Ich werde auf die Farbe klicken diese im Grunde auf 0% herunterziehen . Jetzt heißt es nur noch Gitarren von alleine Dann ist die andere Sache nur der Raum, der da war, was Sie mit einer einfarbigen Schaltfläche unten benötigen was Sie mit einer einfarbigen Schaltfläche unten benötigen, um die Polsterung auf Null zu setzen . Da haben wir's. Das Einzige, was ich möchte, was meiner Meinung nach auf Websites sehr gut funktioniert, ist, dass etwas anderes passiert, wenn ein Benutzer mit der Maus darüber fährt Im Moment ist es in weißem Text. Ich werde sagen, wenn ein Benutzer den Mauszeiger über den Text bewegt, ändert sich die Textfarbe Lassen Sie uns eine unserer globalen Farben wählen. Wählen wir sekundär. Sie gehen, wie Sie jetzt direkt unter dem grauen Feld sehen können, und wenn ich den Mauszeiger über das Wort Gitarren halte, wird es goldfarben Ich möchte diesen Button einfach dreimal duplizieren , um Live-Shows der alten Gehen wir also hier zur Struktur über. Klicken Sie mit der rechten Maustaste auf die Schaltfläche Duplizieren, Duplizieren, Duplizieren. Wie Sie jetzt sehen können, sitzen sie offensichtlich alle übereinander. Auch das funktioniert nicht perfekt. Gehen wir zu dem Subcontainer, in dem sie sich befinden. Gehen Sie zum Layout und ändern Sie die Richtung zur horizontalen Zeile. Jetzt sagen sie alle Gitarren. Die anderen Probleme, die Sie sehen können, sind, dass sie alle oben in der Box Ich möchte hier nach unten gehen, um die Elemente auszurichten und sicherzustellen, dass sie in der Mitte ausgerichtet sind. Die andere Sache ist, dass sie in der Mitte der Seite saßen. Aber um das Gleichgewicht zu halten, möchte ich, dass das Logo ganz links ist. Ich möchte, dass sich diese Schaltflächen ganz rechts befinden. Lassen Sie uns den Inhalt zwischen Anfang, Mitte und Ende begründen . Lass uns wählen. Und du kannst sehen, wenn ich das nach unten schiebe, sie sitzen jetzt alle da. Und das sieht perfekt aus. Das ist Ihre Standardanzeige für eine Navigationsleiste. Okay, jetzt gehen wir zurück. Lassen Sie uns den Namen jeder dieser Tasten ändern. Der erste, der zweite sollten Aufzeichnungen sein. Die dritte Live-Show, die letzte sollte Unsinn sein. Der letzte Gedanke, den es gibt, ich denke, jeder Knopf ist ein bisschen nah am nächsten Lass uns nochmal zum Container gehen. Gaps and Columns wird automatisch auf 20 gesetzt. Wenn ich die Null setzen möchte, die direkt nebeneinander liegen, denke ich, vielleicht 30. 30 sieht gut aus. Ich denke, das gibt nur ein bisschen mehr Atempause zwischen den einzelnen. Jetzt muss ich sagen, wo sich die einzelnen Schaltflächen auf der Seite befinden. Wenn ich auf die Schaltfläche klicke und zum Inhalt gehe, Link, wie Sie im Moment sehen können, ist der Link, wie Sie im Moment sehen können, nur ein Hashtag. Was wir auf dieser Seite tun müssen, ist einen Ankerlink einzurichten. So wie das funktioniert, wenn man auf diese Schaltfläche klickt, werden sie zu einem bestimmten Teil der Seite weitergeleitet, um einen Ankerlink hinzuzufügen. Komm her, um ein Element hinzuzufügen, gib Anker ein. Scrollen wir dann nach unten zu dem Bereich, in dem dieser Ankerlink stehen soll Wenn also jemand auf Gitarren klickt, wird er zu diesem Abschnitt weitergeleitet Wir nehmen den Text auf und ziehen ihn so, dass er über dem Wort Guitars steht, das in diesem kleinen grauen Feld gelandet ist Aber mach dir keine Gedanken darüber, wie das aussieht, denn das ist nicht wirklich da Das ist ein versteckter Code , sodass Sie auf dem Pfeil sehen werden, dass er verschwindet. Benutzer werden das nicht sehen. Was wir tun müssen, ist dem eine ID zu geben. Das bedeutet, dass wir der Schaltfläche oben mitteilen können , dass Benutzer zu dieser ID weitergeleitet werden sollen. Schreiben wir einfach das Wort Gitarren rein. So einfach ist das Dann lassen Sie uns zurück nach oben scrollen. Wählen Sie die Schaltfläche „Gitarren“, lassen Sie den Hashtag dort stehen, schreiben Sie Ihr Wort „Gitarren“ ein oder fügen Sie Lassen Sie uns das jetzt speichern, eine Vorschau der Seite anzeigen und Sie werden sehen, wie es funktioniert Wenn ein Benutzer auf unsere Seite kommt, bewegt er den Mauszeiger darüber und sie erhalten Gold Wenn sie auf die Seite klicken, die sie sich ansehen möchten, wenn es sich dabei um Gitarren handelt, wird es das tun Es führt sie hinunter zum Gitarrenbereich. Das einzige Problem, das ich hier sehe ist, dass es sie buchstäblich zu dem Wort bringt, Gitarren Das Problem dabei ist , dass dieser Text hier zentralisiert ist Als die Nutzer da unten waren, das Bild abgeschnitten und man kann das Gesicht des Mädchens nicht mehr sehen. Was ich eigentlich tun möchte, ist zu sagen, können Sie die Benutzer direkt über dieses Feld bringen , damit sie alles auf einmal sehen können. Gehen wir zurück zum Editor. Lasst uns den Anker bewegen. Eigentlich möchte ich, dass es über dieser Kiste sitzt. Wenn ich versuche, es dorthin zu ziehen, hat das Problem eigentlich nichts zu suchen. Lass es uns für eine Sekunde dort belassen. Was ich tun werde, ist einen weiteren leeren Raum über diesem Container zu erstellen . Also werde ich auf Container hinzufügen klicken. Klicken Sie auf das Plus-O-Feld und wählen Sie einfach die Single aus. Mach dein normales Ding in diesem Container. Gehen Sie zu Erweitert, geben Sie hier Null und hier Null ein. Ziehen Sie dann diesen Anker, Sie bereits eingerichtet haben, in diesen Abschnitt. Jetzt können Sie sehen, wo sich Platz über diesem Abschnitt befindet. Wenn ich diese Vorschau, die Seite, speichere , wirst du sehen, was der Unterschied ist. Ich klicke auf Gitarren, es bringt mich dorthin. Es bringt mich zu dem kleinen Bereich über diesem Abschnitt, sodass ich den gesamten Abschnitt auf einmal sehen kann Perfekt. Lassen Sie uns nun dasselbe für die drei anderen Abschnitte tun. Gehen wir zurück zum Editor. Da dieser Anker perfekt funktioniert, können wir einfach hierher kommen und eine Kopie dieses Containers machen. Dann lass uns hier bis zu diesem Punkt scrollen. Klicken Sie auf das Plus und fügen Sie dann diesen Container ein. Das wurde in genau demselben Behälter abgelegt , den wir für Gitarren hatten, ohne leeren Raum drum herum Gehen wir dann in das Menü Anchor und ändern es in Records Ich möchte über Records sitzen, möchte über Live-Shows sitzen und möchte über Old School sitzen. Lass uns den, den wir hier haben, einfach zweimal duplizieren. Und ziehen Sie sie dann nach unten, sodass sie über jedem dieser Abschnitte liegen. Nochmals, weil wir Ränder und Abstände von 0% eingerichtet haben, sodass zwischen den einzelnen Containern kein leerer Raum zwischen den einzelnen Containern Wir hatten Aufzeichnungen. Lass uns das hier bearbeiten. Live-Shows und stellen Sie sicher, dass das alles ein Wort ist , buchstabieren Sie es richtig. Das Gleiche gilt für die alte Schule hier. Gehen wir in dieses ein und ändern es Old School, alles ein Wort. Dann gehen wir zurück zum Seitenanfang, zum jetzigen Zeitpunkt, und stellen sicher, dass all diese Schaltflächen auf die gleiche Weise eingerichtet sind. Im ersten wollen wir, dass dort Hashtag Old School steht. Dieser eine Hashtag zeigt live diesen einen Hashtag und daher ist dieser Hashtag Guitars Lass uns den Entwurf speichern und eine Vorschau der Änderungen ansehen. Du wirst sehen, eine Vorschau der Änderungen ansehen. Du wenn ich auf eine dieser Gitarren klicke , bringt dich dorthin, nimmt dich auf, nimmt dich mit zu Live-Shows, bringt dich dorthin, eine alte Schule bringt dich dorthin Das ist perfekt. Und wie Sie hier sehen können, gibt es bei diesen beiden Dingen keinen leeren Raum, kein einziges Pixel, keine einzige weiße Zeile dazwischen. Wir haben das Logo eingerichtet, wir haben die Navigationsleiste eingerichtet. Jetzt müssen wir nur noch die Social-Media-Symbole hinzufügen. Gehen wir also zurück zum Editor. Okay, um Social-Media-Buttons nach einer Leiste hinzuzufügen. Gehen wir hier hoch zum Plus, um ein Element hinzuzufügen, geben Sie soziale Symbole ein. Das wollen wir und wir wollen, dass es nach der alten Schule weiterlebt. Lassen Sie uns die Struktur ein wenig nach unten verschieben. Standardmäßig werden diese drei Symbole angezeigt. Facebook, Twitter, Youtube. Sie sind in genau diesem Stil gekommen. Ich möchte nicht, dass es so aussieht , weil ich nicht glaube , dass das unsere Website repräsentiert. Ich möchte nur, dass es weiße Logos sind. Außerdem habe ich keine Twitter - oder Youtube-Seite. Ich habe nur Facebook und ich habe zuerst Instagram. Lassen Sie uns das Twitter-Konto löschen, indem wir das X drücken Gleiche gilt für Youtube. Dann füge einen Artikel hinzu, es erscheint ein Wordpress-Logo, ich möchte nicht, dass der Mauszeiger über das Symbol fährt Klicken Sie darauf, dann wird Ihnen die Icon-Bibliothek angezeigt. Und das sind die vielen verschiedenen Optionen, die du dafür haben kannst . Ich bin einfach auf Instagram und da ist es, dass du auf Einfügen klickst. Jetzt haben wir nur noch Buttons für Facebook und Instagram. Zuerst die Form, die dem entspricht, was da steht. Abgerundet, falls du das dort sehen kannst. Aber es ist wie ein abgerundetes Quadrat. Ich möchte nur, dass es ein gerader Kreis ist. Lass uns die Form nehmen und den Kreis viel besser wählen. Mein einziges anderes Problem hier ist , dass sie im Grunde zu groß sind. Gehen wir zum Stil, dann zur Größe und spielen wir hier mit der Drag-Leiste herum. Ich glaube 18. Ich denke, das ist groß genug, um ehrlich zu sein. Die Polsterung, das ist nur die Polsterung der Außenseite des Symbols Gehen wir jetzt zurück zum Inhalt und klicken wir dann auf Facebook Was die Farbe angeht, nun ja, ich möchte nicht, dass es die offizielle Farbe ist. Ich möchte, dass es eine benutzerdefinierte Farbe ist. Daher kann ich die Primärfarbe und die Sekundärfarbe wählen . Primärfarbe. Nun, dann stellen wir sicher, dass das weiß ist. Meine Sekundärfarbe, ich möchte, dass es unser Text schwarz ist. Es sieht so aus. Das Gleiche gilt für Instagram. Klicken Sie auf Instagram-Farbe, benutzerdefinierte Primärfarbe Weiß. Sekundärfarbe schwarz. Jetzt müssen wir nur noch den Link für Instagram eingeben. Ich füge einfach meine URL ein. Die andere Sache, die wir tun möchten, ist, auf Linkoptionen zu klicken und dann sicherzustellen Öffnen eines neuen Fensters ausgewählt ist , da dadurch ein separates Fenster für dieses Fenster geöffnet wird. Das heißt, die Leute verlassen Ihre Website nicht wirklich, sie schauen sich zwei separate Seiten an. Beide beziehen sich auf Ihr Unternehmen. Dann Facebook, das hier drin ist, dafür sorgen, dass es in einem neuen Fenster geöffnet wird und das war's. Speichern Sie jetzt den Entwurf und die Vorschau. Hier sind wir. Der Header funktioniert einwandfrei. Wir haben das Firmenlogo, wir haben den Navvar mit allen Ankerlinks und wir haben Links zu unseren beiden Social-Media-Seiten Die Desktop-Version Ihrer Website ist jetzt vollständig Sie haben Ihren Header. Du hast deinen Helden. Sie haben Ihren Einführungsabschnitt mit den Schiebebildern. Dann haben Sie die zwei verschiedenen Versionen des Abschnitts „Über uns“ mit zwei verschiedenen Versionen von animierten Textaufzeichnungen, Live-Shows und Old School. Sie haben Ihre drei Testimonials von den drei größten Musikern der Welt Und dann hast du deine Fußzeile mit der Karte und den Informationen, damit die Leute dich finden oder mit dir Kontakt aufnehmen Das sieht jetzt alles perfekt aus. Die Desktop-Version Ihrer Website ist fertig und sieht gut aus. Jetzt müssen wir nur noch dafür sorgen, dass es auf Tablet und Handy funktioniert. 14. Reaktionsfähig: Tablet: Sie haben jetzt eine Website, die perfekt aussieht und auf dem Desktop perfekt funktioniert. Wir müssen uns jedoch ansehen, wie es sowohl auf Tablets als auch auf Mobilgeräten angezeigt wird . Das ist sehr einfach zu bearbeiten, Elementor. Komm hier zur oberen Leiste Und Sie können zwischen Desktop-, Tablet- oder mobilen Editoren wählen , Tablet- oder mobilen Editoren Es ist sehr wichtig, dies in dieser Reihenfolge zu tun. Beginnen Sie mit dem Desktop, gehen Sie dann zum Tablet und dann zum Handy über. Mobilgerät erbt die auf dem Tablet vorgenommenen Änderungen, und das Tablet erbt die auf dem Desktop vorgenommenen Sie sollten dies immer in dieser Reihenfolge tun, da sonst Ihre Website beschädigt wird Jetzt haben wir es perfekt auf dem Desktop. Schauen wir uns das Tablet an. Wenn wir zum Tabelleneditor kommen, werden Sie feststellen, dass sich alles immer noch an derselben Position befindet, aber nicht alles richtig ausgerichtet ist. Wenn wir durchblättern, sieht dieser Held gut aus. Es ist nur diese Navbar, die Icons hier und das Logo da sind zu nah am Rand wir dann nach unten zu diesem Abschnitt scrollen, ist die Polsterung an den Rändern dieses Abschnitts wieder nicht ausreichend. Es ist also eine etwas seltsame Anzeige, wenn der Text so weit nach unten läuft und das Bild dort eingefügt wird Dieser sieht ziemlich gut aus. Auch hier braucht es nur ein bisschen mehr Polsterung. Offensichtlich sind diese Dinge , die man sehen kann, die Anker, nicht wirklich da Dieser funktioniert nicht ganz. Auch bei der Ausrichtung ist es vielleicht besser, wenn die Zahl in diesem Display über dem Wort Gitarren Der Brunnen, sie sind tatsächlich sehr nah dran. Ich denke, da sind einfach die Zahlen zu groß. Das ist wahrscheinlich die einzige Änderung, die wir in dieser Hinsicht benötigen. Aber ich denke, das funktioniert gut als Doppelspalten. Testimonials bestehen aus drei Spalten , da es sich um eine kurze Textmenge Ich muss nur an der Polsterung arbeiten. Und das Gleiche hier, die Polsterung. Es gibt nicht viele große Änderungen, aber ich zeige Ihnen nur einen guten Weg, dies zu tun, einen sehr schnellen Weg, dies zu tun Lass uns nach oben gehen. Das Hauptproblem, das wir hier haben, ist nur die Polsterung auf beiden Seiten dieses Containers, die Navigationsleiste, der Header Lass uns hier auf die Punkte klicken und den Container bearbeiten. Ich möchte mir hier nur die Polsterung ansehen. Gehen wir zu Advanced und wir gehen zum Padding Polsterung ist hier für oben, rechts, unten und links auf Null eingestellt für oben, rechts, unten und links auf Null Was ich möchte, ist eine gleiche Menge an Polsterung auf der linken und der rechten Seite Die Pixelgröße, die ich hier auswähle, sollte für jeden Abschnitt unten verwendet werden , nur um die Konsistenz zu gewährleisten Lassen Sie uns zunächst die Verknüpfung der Werte aufheben. Ich wähle 30 Pixel links und rechts. Sie können sehen, wenn ich auf den Pfeil klicke, dass der Abstand zwischen den beiden ausreicht. Es gibt ihm nur ein bisschen mehr Luft zum Atmen als in diesem Abschnitt hier, das sieht gut aus. Ich denke, das Logo ist einfach ein bisschen zu klein. Lass uns auf das Logo klicken. Komm her, um das Bild zu bearbeiten, gehe zum Stil. Lass uns es einfach vergrößern . Lassen Sie uns den Prozentsatz auf vielleicht 75% erhöhen. Mal sehen, wie das aussieht? Vielleicht ein bisschen zu groß, vielleicht. Ich denke, das ist eine gute Balance zwischen Logo-Navigationsleiste und den Schaltflächen für soziale Medien Cool, dieser Heldenbereich , der jetzt für mich funktioniert. Es füllt immer noch die gesamte Seite aus, da wir den Hauptheldencontainer so ausgewählt haben , dass er eine vertikale Höhe von 100% hat. Wie Sie sehen können, geht es in diesem Abschnitt direkt von oben nach unten. Okay, wir haben hier ein kleines Problem mit der Ausrichtung. Der Text geht hier ganz nach unten, und dann ist da unten ein großer leerer Bereich. Schauen wir uns zunächst die Polsterung an. Klicken wir hier erneut auf die Punkte, um den Container zu bearbeiten. Gehen Sie zu Erweitert, heben Sie die Verknüpfung der Werte und lassen Sie uns 30, rechts, 30 links gehen Auch das sieht gut aus. Aber das alles ist richtig angeordnet, die Wolfsbande, das passt nicht wirklich, es geht über das Bild und offensichtlich haben wir hier diese große Polsterfläche am Rand Womit ich hier herumspielen möchte , ist, die Größe der einzelnen internen Spalten so zu ändern , wie wir es zuvor eingerichtet hatten Es funktioniert gut, vielleicht 20% auf der linken Seite und 80% auf der rechten Seite. Versuchen wir es mit 50, 50. Lassen Sie uns unseren ersten internen Container wählen. Klicken Sie auf Container bearbeiten, oder wählen Sie dies in Ihrer Struktur aus. Dann gehen wir hier rüber zu der Stelle, an der Breite steht. Es ist derzeit auf Pixel eingestellt, ändere das in Prozent und ziehe das dann auf 100%, obwohl ich nur möchte, dass ziehe das dann 100%, obwohl es 50% des Platzes ausfüllt, wir brauchen immer noch nur, dass die Breite auf dem Tablet 100% beträgt. Dann komm zum anderen Container und mach dort dasselbe, 100% Jetzt ist das eine perfekte Ausrichtung. gibt es nur ein bisschen Hier unten gibt es nur ein bisschen zusätzlichen Leerraum . Das liegt nur an der Polsterung , die ich in der ersten Spalte habe Gehen wir zurück zum ersten Container. Gehen Sie zu Advanced und nehmen Sie diese 75 ab. Da haben wir's. Das sieht fast perfekt aus, ist aber immer noch zu nah am Bild an der Seite. Fügen wir vielleicht 25 Pixel hinzu , die es überall hinzugefügt haben. Lassen Sie mich das einfach löschen, die Verknüpfung Ihrer Werte aufheben und das auf 25 Pixel ändern Das sieht fast perfekt aus. Ich denke, es gibt immer noch ein Problem. Ich glaube nicht, dass diese kleine Zeile auf dem Tablet vorhanden sein muss . Ich denke, es würde besser aussehen, wenn der Text etwas weiter oben wäre. Gehen wir dann zurück zum Editor. Ich werde den Teiler auswählen. Wählen Sie ihn hier in Struktur oder klicken Sie darauf Gehe zu Erweitert und scrolle dann nach unten zum Wort responsiv. Wir verstecken es auf dem Tablet. Wenn ich darauf klicke, siehst du, dass es verschwunden ist. Wir haben dort die Lichtlinien. Aber wenn ich mich jetzt verstecke, das Panel verschwunden. Das sieht perfekt aus. Okay, lassen Sie uns mit dem folgenden Abschnitt fortfahren. Lassen Sie uns den Container bearbeiten. Lassen Sie uns die Verknüpfung der Werte aufheben und 30 nach rechts setzen. 30 nach links Das sieht toll aus. Ich denke nur, dass zwischen diesem oberen Abschnitt und dem Abschnitt darunter vielleicht etwas zu viel Platz ist. Ich denke, hier unten ist es in Ordnung, fast. Aber ich denke, diese Abschnitte sollten etwas näher beieinander liegen. Vielleicht liegt das daran, dass ich auf dem oberen Behälter einen Rand von 100 oben und 100 unten habe. Lassen Sie uns die Verknüpfung jetzt aufheben und sie einfach auf Null ändern. Gehen wir einfach zurück zu 100 oben und dann, glaube ich, vielleicht 50 unten . Perfekt. Da haben wir's. Das ist ein viel besseres Display. Jetzt passt das alles auf eine einzige Seite und alles passt perfekt zusammen. Hervorragend. Okay, lass uns zur Gitarrenabteilung übergehen. Das sieht toll aus. Ich denke , um es in zwei Spalten zu halten, es ist nur der Text hier, der nicht ganz funktioniert. Ich denke, das liegt daran, dass wir es in horizontaler Richtung eingerichtet haben . Ich möchte das in diesem internen Container in eine vertikale Richtung ändern . Lassen Sie uns diesen Container hervorheben. Klicken Sie darauf. Dann lass uns hier rüber zur Richtung gehen. Wie Sie sehen können, wurde dieses Symbol in ein Tablet geändert. Wenn Sie eine bestimmte Version bearbeiten möchten, können Sie dort klicken, ohne hier oben klicken zu müssen. Aber wir arbeiten an Tablets, also lassen wir es dabei. Wie Sie sehen können, ist die Richtung horizontal. Ich möchte es auf vertikal ändern. Lass uns einfach darauf klicken. Da haben wir's. Das passt jetzt tatsächlich viel besser rein. Ein paar andere Probleme nur in Bezug auf den Abstand, die Ausrichtung. Lassen Sie uns zunächst zu dieser Spalte gehen und hier etwas Abstand hinzufügen. Was ich hier möchte, ist dieselbe Polsterung, die ich links von allen oberen Elementen habe , 30 Pixel Ich würde es auf diesem internen Container tun, denn wenn ich es auf dem Hauptcontainer mache, wird ein Leerraum hinzugefügt Ich möchte es nicht dort machen, ich möchte es hier machen. Aber es hat immer noch eine gleichbleibende Tiefe mit allen Abschnitten über dem. Gehen wir in diesen Container, den, der die 01 hat. Lassen Sie uns einfach alle vorhandenen Polsterungen entfernen, dann auf den Text und die Überschrift klicken und die Ausrichtung nach links ändern Das sieht toll aus. Ich denke, wir müssen die Größe ändern. Ich denke, es muss etwas weniger Platz beanspruchen. Holen wir uns zuerst diesen Container. Gehe zu Layout. Wählen wir den Hauptcontainer aus und gehen wir dann zu Layout. Das haben wir. Das war es, wir haben dort eine Mindesthöhe von 75% festgelegt, lassen Sie uns das auf 50 ändern. Da haben wir's. Das ist ein viel besseres Display. Das passt fast perfekt. Ich denke, vielleicht ein bisschen größer, 60% ja. Lassen Sie uns nun zu diesem Container zurückkehren und sicherstellen, dass alles zentralisiert ist. Das sieht toll aus. Das ist keine große Veränderung. Es bedeutet nur, dass wir immer noch das vollständige Bild des Mädchens sehen können , das Gitarre spielt. Der gesamte Text ist drin. Ich würde hier vielleicht sogar einfach ein bisschen von der Polsterung neben dem Text herausnehmen hier vielleicht sogar einfach ein bisschen von der Polsterung neben dem Text Gehen wir zu diesem internen Container, gehen wir zu Advanced. Wie Sie sehen können, haben wir das als Link mit 100 Pixeln eingerichtet und es auf vielleicht 50 geändert. Da haben wir's. Ich denke, das hat uns nur ein bisschen mehr Platz gegeben. Oben, unten und rechts vom Text. Das sieht toll aus. Okay, das bringt uns zu diesem Abschnitt. Wie ich schon sagte, ich denke einfach groß, der Zahlentext über den Bildern. Gehen wir einfach von der Überschrift zum Stil und zur Typografie. Oh ja, wir haben es zu 400 gesagt. Lass uns das vielleicht auf die Hälfte der Größe ändern, 200. Etwas zu klein, 300. Das sieht toll aus. Ich möchte nur diesen Stil kopieren und die verbleibenden Zahlen einfügen. Klicken Sie mit der rechten Maustaste. Kopieren Sie Stil 03. Zahlungsart 04. Schauen wir uns jetzt einfach an, wie das alles aussieht. Das sieht toll aus. Ich denke, das funktioniert wirklich gut. Wir haben immer noch diesen Abschnitt im weiß umrandeten Bereich, diesen mit dem roten Hintergrund Und dann gehen wir weiter runter zu den Platten, Live-Shows der alten Schule Das sieht toll aus. Nur eine sehr schnelle Frage in diesem Abschnitt hier. Gehen wir zu Container bearbeiten. Denken Sie daran, dass es sich bei diesem um ein Raster handelt. Wir haben die Lücken zwischen jedem Pixel und 50 Pixeln zuvor eingerichtet . Ich denke jedoch, dass das wahrscheinlich zu groß für das ist, was wir auf Tablets haben. Ändern wir das auf 30. Das gibt uns nur ein bisschen mehr Platz zwischen den einzelnen. Dann geh natürlich hier oben zu Advanced. Trennen Sie die Verknüpfung Ihrer Werte, 30% 30 Pixel nach rechts, 30 Pixel nach links Das sieht toll aus. Und es gibt immer noch 100 oben und 100 unten. Dann klicken wir hier unten einfach wieder auf den Container muss nur aufgefüllt Der gesamte Container muss nur aufgefüllt werden, weitere 30 Pixel Alles, was ich dort getan habe, ist, dass ich die Verknüpfung der Werte aufgehoben habe , wodurch es auf Null zurückgesetzt Um ehrlich zu sein, das sieht meiner Meinung nach ganz nett aus, die Karte bis zum Rand zu haben, aber lassen Sie uns ihr einfach einen kleinen Rand geben , vielleicht 30 Pixel rundum Lass uns das verlinken. Ja, ich denke, das gibt ihm nur ein bisschen mehr Atempause rund um die Karte und den Text. Da haben wir's. Das ging sehr schnell und sehr einfach. Was wir hier gemacht haben, ist, dass wir die Desktop-Version der Website genommen und sie so bearbeitet haben, dass sie auf dem Tablet perfekt angezeigt wird. Aber es gibt noch eine andere coole Möglichkeit, dies zu überprüfen. Lass uns das einfach schließen. Speichern wir unseren Entwurf und uns dann eine Vorschau der Änderungen an. Ich empfehle hier, wenn Sie Google Chrome verwenden, in den Erweiterungsbereich des Chrome-Webstores zu gehen und diese zu suchen. Der mobile Simulator. Tippe das einfach ein. Es sollte das erste sein, das auftaucht. Es ist ein responsives Testtool. Finde das. Und dann steht auf der Schaltfläche hier „Installieren in“. Es bedeutet nur, dass Sie hier oben Ihre Erweiterungen haben. Wenn Sie sich die Seite so ansehen , wie sie von Ihren Benutzern angesehen wird, können Sie auf diese Seite klicken. Dann wird Ihnen angezeigt, wie sie auf vielen verschiedenen Geräten aussieht. Dies ist ein weiteres Tool mit einer Pro-Version, für die Sie bezahlen müssen. Wenn Sie jedoch nur die kostenlose Version verwenden möchten, sie sich hervorragend dafür, da sie eine ganze Reihe von Mobiltelefonen abdeckt, mindestens vier oder fünf Tablets und dann auch ein paar zusätzliche. Sogar eine Apple Watch der sechsten Serie. Der, den wir uns hier ansehen, ist der mobile. Das haben wir noch nicht bearbeitet. Gehen wir zum Tablet-Bereich und sehen wir uns an, wie es auf dem iPad Mini aussieht. Nun, das sieht perfekt aus. Ja, ich liebe es. Perfekt. Das rutscht immer noch rein. Die Animation funktioniert. Oh ja, das sieht toll aus. Das sieht absolut perfekt aus. Auf dem Tablet war das großartig. Ipad Mini vier. Ipad vier ist auch perfekt. Das Gleiche. Ipad Pro 11 ist auch perfekt. Das Gleiche. Dann ein Galaxy, Tab Seven. Das ist also eine Android-Version, sieht auch darauf perfekt aus. Es ist großartig, wenn Sie einfach in den Editor gehen es dort perfekt aussehen lassen, aber dann mit dieser Erweiterung herumspielen, nur um zu sehen dass sie auf einer Reihe von verschiedenen Geräten perfekt funktioniert. Wenn du dir so etwas ansiehst, okay, ich glaube nicht, dass ich genug von dem Mädchen hier auf dem Gerät sehe . Vielleicht möchtest du einfach reingehen und mit dem Abstand hier herumspielen, weil er hier anders aussieht als auf diesem Gerät. Verwenden Sie einfach die Erweiterung, um ein wenig herumzuspielen und sicherzustellen , dass sie auf allen Geräten, die Sie hier sehen können, einwandfrei funktioniert . 15. Reaktionsfähig: Handy: Gehen wir nun zurück in den Editor und schauen uns die mobile Version an. Klicken Sie hier oben. Nun, diese Navigationsleiste, diese hier sieht etwas schwieriger aus, damit zu spielen. Gehen wir zum Container. Lassen Sie uns zunächst mit dem Abstand herumspielen. Jetzt ist die Polsterung dort immer noch auf 30 links und 30 auf rechts eingestellt auf 30 links und 30 auf rechts Das ist auch gut für Handys. Lass uns das so lassen, wie es ist. Das Hauptproblem, das wir haben, ist nur, dass die Ausrichtung nicht mehr in eine gerade Linie passt. Ich denke, wir müssen es stapeln. Sagen wir einfach, wir haben das Logo oben, dann die Navigationsleiste darunter, dann die Social-Media-Buttons darunter Das werde ich tun. Zuallererst werde ich diesen Container nehmen, sowohl Navbar- als auch Social-Media-Buttons enthält, und ich werde ihn duplizieren Dann gehe ich zur zweiten Version über und lösche alle Schaltflächen, die wir hier eingefügt haben, weil sie oben bereits existieren Dann gehe ich in diesen Container und möchte, dass der Inhalt zentriert wird. Wir haben zwei, viele Social-Media-Buttons. Dieser erste wird nur auf Mobilgeräten erscheinen. Lassen Sie uns erneut auf Container bearbeiten klicken, zu Erweitert wechseln, zu Responsive wechseln und es ausschalten. Verstecken Sie es sowohl auf dem Desktop als auch auf dem Tablet. Das heißt einfach, wenn ich hierher gehe, ist es nicht da. Und wenn ich auf diesen Pfeil klicke, kehrt er zu dem zurück, was zuvor auf dem Tablet war. Ich sehe es dort im Editor, aber es ist nicht wirklich da. Und das werden Sie sehen, wenn Sie eine Vorschau der Seite anzeigen. Außerdem sollten diese Social-Media-Schaltflächen nicht mehr auf Mobilgeräten erscheinen. Klicken Sie auf die Schaltflächen für soziale Medien, gehen Sie zu Erweitert und verstecken Sie sich auf dem Handy. Jetzt haben wir nur noch den Text da drin. Offensichtlich ist es schwierig zu erkennen, wo sich im Moment alles befindet. Aber lass uns einfach reingehen, um diesen Container zu bearbeiten. Dann haben wir eine Lücke von 30 Pixeln zwischen den einzelnen Tasten. Lass uns das einfach schnell auf Null ändern. Jetzt gehst du. Jetzt können wir alles gleichzeitig sehen. Offensichtlich ist jeder von ihnen zu nahe beieinander. Sagen wir einfach fünf Pixel, vielleicht zehn Pixel. Ich denke, das ist genug Platz zwischen den einzelnen. Und nochmal, spiel einfach damit herum wenn du es dir auf verschiedenen Geräten ansiehst. Möglicherweise möchten Sie den Text etwas kleiner machen. Gehen wir einfach zur Typografie über. Stellen Sie es vielleicht auf 14 Pixel ein, das ist etwas kleiner Machen Sie dasselbe bei all dem , es kommt darauf an, welchen Inhalt Sie auf Ihrer Website haben. Spielen Sie einfach ein bisschen damit herum. Und wenn Sie Probleme haben, alles zusammenzufügen, schicken Sie mir einfach eine Nachricht und ich lasse Sie wissen, wie Sie es auf zwei verschiedenen Ebenen stapeln können. Ich möchte auch, dass der ganze Text hier gerechtfertigt ist . Im Grunde möchte ich, dass sich der Inhalt bis zum Rand erstreckt. Wie du siehst, Old School, geht das hier bis an den Rand der Box , Guitars aber nicht Ich kann es nicht links oder rechts ausrichten. Ich werde jetzt zu diesem Abschnitt übergehen. Ich bearbeite den Container. dann unter Inhalt rechtfertigen Klicken Sie dann unter Inhalt rechtfertigen auf das Feld mit der Aufschrift Leerzeichen dazwischen. Dann verteilt es alles. Sieht toll aus. Jetzt sieht das fast perfekt aus, dass wir den Text hier haben und dann haben wir die beiden Social-Media-Buttons unten. Es ist nur das Logo, das einfach ein bisschen zu groß ist. Ziemlich groß. Lassen Sie uns in der Tat entweder in der Struktur oder auf das Bild auf das Bild klicken. Ändern wir einfach die Größe von viel kleineren, vielleicht 35%, vielleicht ein bisschen großen 40%, dann sollte es zentralisiert werden. Wenn ich also zum Content Alignment Center gehe jetzt auf den Pfeil klicke, Stapeln angeht, funktioniert das alles wirklich, wirklich gut Ich habe das Logo, dann habe ich die Navigationsleiste und dann habe ich die Symbole Ich glaube, ich möchte hier nur diese Social-Media-Symbole etwas kleiner machen diese Social-Media-Symbole etwas kleiner Vielleicht ein bisschen Abstand zwischen ihnen haben, dann muss ich einfach mit dem Raum herumspielen , der alles hier umgibt. Offensichtlich ist das Logo zu nah an der Spitze. Zwischen der Logo-Navigationsleiste ist nicht genug Platz . Symbole für soziale Medien. Gehen wir zurück in den Editor. Schauen wir uns zunächst diese sozialen Symbole an. Gehen wir dann zum Stil über. Die Größe ist 18, lassen Sie uns das einfach auf 14 ändern, dann möchte ich nur mit dem Abstand zwischen den einzelnen herumspielen. Wahrscheinlich dieser eine Abstand, ja. Ich ziehe es einfach ein bisschen in die Länge. Ich werde das auch auf 14 setzen. Mal sehen, wie das aussieht. Ja, das ist viel besser, weil es sich um separate Tasten Sie müssen sie separat drücken. Lass uns nochmal den Container nehmen. Lass uns zu Advanced gehen. Lassen Sie uns einfach die gesamte Polsterung auf Null ändern. Jetzt möchte ich zusätzliche Polsterung hinzufügen. Vielleicht rundum 30, um ehrlich zu sein. Nehmen wir an, das ist oben, rechts und links, schauen wir mal, wie das aussieht. Das funktioniert räumlich viel besser. Oben gibt es jedoch einen weißen Bereich , an dem wir arbeiten können. Schauen wir uns auch den gesamten Behälter an den gesamten Behälter und ändern wir diese Lücken , die jetzt auf Null gesetzt sind. Lassen Sie uns zehn setzen und sehen, wie das aussieht. Ja, das ist perfekt. Wir haben jetzt zehn Pixel zwischen dem Logo und der Navigationsleiste und zwischen den Social-Media-Schaltflächen unten Es ist nur dieser weiße Bereich oben. Warum passiert das? Das passiert, weil wir die Mindesthöhe dieses Abschnitts auf 100 Pixel festgelegt haben. Es ist jedoch größer als das. Da wir nun alles stapeln, klicken wir auf den Hauptcontainer Gehen Sie zu Container bearbeiten, gehen Sie zu Layout und ändern Sie es auf 150 Pixel Dann lass den Behälter unter dem Heldencontainer stehen. Dieser hier. Lassen Sie uns das in Advanced ändern, 2.100,50 Stellen Sie sicher, dass nicht alle verknüpft sind 150 und dann lass uns -150 und schauen, ob das funktioniert. Das funktioniert. Da haben wir's. Das ist perfekt, nicht wahr? Jetzt haben wir einen schönen leeren Raum. Oben sehen wir das Logo, wir sehen all diese Navigationsleisten und wir sehen das Social-Media-Symbol. Das sieht toll aus. Nur zwei weitere Dinge , die mir hier aufgefallen sind. In dieser mobilen Ansicht das Problem in der Tablet-Ansicht oder in der Desktop-Ansicht nicht ist das Problem in der Tablet-Ansicht oder in der Desktop-Ansicht nicht die Position dieser beiden Kunden und die Position und Größe des Logos. Wenn ich auf das Handy gehe, ist ein Logo zu klein und man kann die Leute nicht wirklich sehen. Lass uns einfach mit diesen beiden Dingen herumspielen. Das heißt, im Hauptcontainer für den Helden sind wir im Container, wir zum Stil, gehen wir zum Hintergrund, und wir schauen uns das Bild hier an. Jetzt müssen wir uns positionieren. Wir haben die Wahl zwischen Zentrum, Zentrum, was wir hatten. Wir können die Mitte von links zu weit nach links und die Mitte von rechts viel zu weit wählen . Oder die beste Option, die wir hier wählen können, ist benutzerdefiniert. Denn damit können wir mit der X-Position und der Y-Position herumspielen . Lassen Sie uns mit dieser X-Position herumspielen und sie ein wenig verschieben. Natürlich möchte ich es nicht zu weit auf diese Seite verschieben, es muss nur hier drüben sein. Sagen wir einfach, auch wenn es -200 minus 150 ist. Tut mir leid, 250. Da haben wir's. Ich finde das großartig. Sie können also sehen, dass zwei Leute dort hinschauen und sich die Aufzeichnungen ansehen. Lassen Sie uns das Logo jetzt etwas größer machen. Also klicken Sie auf das Symbol, klicken Sie auf Stil und los geht's. Breite, wir haben es auf 15% eingestellt, vielleicht auf 25, 30. Mal sehen, wie das aussieht. Das sieht toll aus. Jetzt können wir sehen, dass sich Leute die Artikel im Laden ansehen. Unsere Navbar, unser Header funktioniert perfekt. Alles ist aufgereiht und wir können das Hauptsymbol des Unternehmens sehen Fantastisch, lass uns diesen Entwurf speichern, dann bin ich in die Erweiterung gekommen, und hier schaue ich mir Apple-Smartphones an. Das ist also das iPhone 13 Pro. Max sieht dort großartig aus. Regular Pro sieht auch gut aus. Alles ist in Ordnung. Ich kann alles lesen, ich kann mich in allem zurechtfinden. Und es füllt die ganze Seite für jede, die perfekt aussieht. solchen kleinen Änderungen stellen Sie sicher, dass Bei solchen kleinen Änderungen stellen Sie sicher, dass Sie in die Erweiterung kommen und sie dort zuerst einchecken. Okay, zurück zum Editor. Der obere Bereich funktioniert. Mal sehen, was wir jetzt hier haben. Okay, was mit diesem Abschnitt passiert ist , ist, dass er von der horizontalen Richtung in eine vertikale geändert wurde der horizontalen Richtung in , was perfekt ist. Ich denke, das funktioniert dort absolut perfekt. Anstatt zu versuchen, beide Dinge nebeneinander hineinzuquetschen . Der Titel Wolfgang Music und der Text befinden sich über dem Schiebebild. Ich glaube, ich möchte nur ein wenig Platz auf dieser Seite der Box ändern , damit der Text bis zum Rand reicht. Lass uns auf diesen Container hier drüben auf Container bearbeiten klicken . Gehe zu Erweitert und entferne den Abstand von 25 Pixeln. Da haben wir's. Keine große Änderung, bedeutet nur, dass der Text mit dem Bild unten übereinstimmt. Das funktioniert perfekt. Die unten sind eigentlich schon perfekt. Sie sind sowieso automatisch gestapelt. Element or kann lesen, was Sie vielleicht auf dem Handy tun möchten , und das automatisch erledigen. Das ist großartig. Dort muss keine Arbeit verrichtet werden. Jetzt dieser. Okay, das ist fast geschafft, aber nicht ganz. Es noch einmal zu stapeln, wie wir es oben gemacht haben, das ist perfekt. Ich denke, das funktioniert wirklich gut. Der Abstand stimmt jedoch nicht ganz. Ich kann das Bild unten nicht wirklich sehen. Das müssen wir reparieren. Wir gehen hier rein. Lass uns auf den Container klicken. Gehe zu Erweitert. Was wir hier haben, ist eine Polsterung von 30 auf der linken Seite. Lassen Sie uns sie alle verknüpfen und sie dort alle zu 30 machen. Wir bekommen nur ein bisschen mehr Platz über der 01 und ein bisschen Platz unter dem Text. Dann ist das Einzige, was ich für diesen Untercontainer tun möchte, den Abstand hier rechts wegzunehmen Klicken Sie auf dieses Feld Erweitert, nehmen Sie die 50 Pixel zu einfach ab Das funktioniert super. Das einzige , was offensichtlich nicht funktioniert, ist, dass ich das Bild nicht sehen kann. Es ist da und es ist der Hintergrund des Containers. Der Grund, warum es früher funktioniert hat, war, dass wir zwei Säulen hatten, die horizontal angeordnet waren. Daher wurde die Höhe einer der Spalten auch mit der Höhe der nächsten Spalte dargestellt. Das passiert jetzt nicht, weil sie gestapelt sind. Lass uns einfach die Mindesthöhe dieses Containers ändern. Klicken Sie auf Container bearbeiten, kommen Sie hierher, um die Mindesthöhe festzulegen . Und lassen Sie uns hier einfach mit den Pixeln herumspielen. Vielleicht 400 Pixel, vielleicht 500, vielleicht irgendwo in der Mitte, 450. Da haben wir's. Damit bin ich zufrieden. Es bedeutet nur, dass die Leute, wenn sie zur Gitarrenabteilung kommen , nach unten scrollen, darüber lesen und dann das Mädchen Gitarre spielen sehen. Perfekt. Jetzt diese, 02 Platten, Live-Shows 0304. Schau, ich denke, was den Abstand zwischen all diesen angeht, funktionieren sie wirklich perfekt Es gibt hier nur ein offensichtliches Problem, denn jetzt, wo ich möchte, dass es von 02 auf Datensätze läuft, dann möchte ich das Bild 03 hier sehen. Es ist sehr einfach zu beheben. Was wir hier haben, ist der gesamte Hauptcontainer, der den Text für Live-Shows und das Bild mit der 03 Sie sind auf reguläre Weise organisiert. Das heißt Zeile horizontal und es heißt von links nach rechts. Alles, was ich tun werde, ist zu diesem Pfeil auf der Seite zu gehen , auf der steht, dass die Spalte umgekehrt Und klicken Sie einfach darauf. Und dann sind wir da. Zu einfach. Der 03 ist an die Spitze gesprungen Der Anker , der sich immer noch darüber befindet , hat sich jedoch nicht bewegt, weil wir ihn nicht über dem Text Wenn jemand auf dem Handy auf den Anker klickt, wird er immer noch zu diesem 03 weitergeleitet. Schauen wir uns einfach an, wie dieser Abschnitt noch aussieht. Das fließt gut von 02 in Datensätze ein. 03 Live-Shows perfekt. Wie gesagt, das hat nur die Anzeige oder das Layout dieses Containers auf dem Handy geändert . Wenn ich zu Tablets gehe, immer noch genauso wie vorher. Gegenteil, Gegenteil. Desktop, genauso wie zuvor. Gegenteil, Gegenteil. Sie werden feststellen, wenn ich zurückgehe, um diese zu überprüfen, sich überhaupt keine Änderungen ergeben haben. Wie gesagt, sie sind dieser Reihenfolge inhärent. Was auf dem Desktop gemacht wurde, wird in die Tabelle aufgenommen. Was am Tisch erledigt wird, wird auf das Handy übertragen. Keine Änderungen, die ich auf dem Handy sollten sich auf irgendetwas auf dem Tisch oder Desktop auswirken. Stellen Sie sicher, dass Sie sie überprüfen , da sich Ihnen möglicherweise etwas nähert. Gehen wir zurück zum Handy. Fast fertig hier. Mal sehen, was wir haben. Lassen Sie mich ehrlich sein, die Zeugnisse sind perfekt Ich möchte nicht einmal damit herumspielen. Und dann dieser Abschnitt unten , der fast perfekt ist, nur der schwarze Raum rundum. Das ist wortwörtlich nur der Abstand, die Polsterung über dieser Seite und der Abstand darüber Gehen wir zu diesem Container, klicken auf Container bearbeiten und gehen wir zu Erweitert Sie wissen, wie das alles geht. Nehmen Sie jetzt die linke Polsterung ab und dann, sagen wir oben, sagen wir einfach 50. Das waren 65 und sie sind alle miteinander verknüpft. Habe da ein paar Dinge falsch gemacht. Lassen Sie uns die Verknüpfung aufheben und sagen wir einfach, oben waren 50. Da haben wir's. Wenn du dir das ansiehst, funktioniert das perfekt. Und das war ziemlich einfach zu beheben weil wir es auf dem Desktop so eingerichtet hatten , dass es einfach zu bearbeiten war, und dann konnten wir das auf dem Tablet schnell und einfach bearbeiten. Nehmen Sie dann die Änderungen vor, die wir vorgenommen haben Unser Tablet wird auch auf dem Handy genauso angezeigt . Speichern Sie es erneut lassen Sie uns dann eine Vorschau der Änderungen anzeigen. Mal sehen , wie das aussieht. Wir sind hier bereits in einer mobilen Version. Oberer Teil, perfekt. Scrollen Sie nach unten, Wolfgang. Musik Auch weil es ein dickeres Telefon ist, hat es es tatsächlich ausgebreitet. Die Worte Wolfgang. Und Musik , die toll aussieht. Perfekt. Perfekt. Perfekt. Das Bild von 01 Gitarren ist perfekt Ich kann sie sehen, ich kann die Schallplatten von Guitar 02 sehen. Ich habe die Animation auch hier immer noch drauf. Das ist von Desktop, zwei Tablets bis hin zu mobilen Live-Shows, Testimonials der alten Schule und dann der Fußzeile gefolgt Desktop, zwei Tablets bis hin zu mobilen Live-Shows, Testimonials der alten Schule und dann der Sie haben jetzt eine komplette Website. Etwas, bei dem jeder Abschnitt zusammengestellt ist und das auf Desktop, Tablet und Handy perfekt funktioniert . Lass es uns zum Leben erwecken. 16. Bereite deine Website für die Live-Schaltung vor: Okay, jetzt sind wir bereit , Ihre Website online zu stellen. Wie Sie hier oben sehen können, heißt es immer noch, dass es sich um einen Entwurf handelt, der das ändern soll. Komm einfach hier nach rechts und klicke auf Veröffentlichen. Wenn das erledigt ist, komm hier nach links, klicke auf das E und wähle Exit to Wordpress. Auf dieser Seite müssen Sie sich nichts ansehen, klicken Sie einfach auf das Wordpress-Logo. Dadurch gelangen Sie zurück zu den eingerichteten Seiten. Die Seite, die wir verwenden, Wolfgang Music Sie jetzt sehen werden, ist live. Am Ende befindet sich kein Entwurf mehr. Eine kleine Änderung müssen wir jedoch vornehmen. Dies wird die Startseite sein. Klicken Sie auf Quick Edit, The Slug, das ist der Name , der nach der URL kommt Wenn Sie mehrere Seiten auf Ihrer Website haben , wäre es eine URL Blog kontaktieren. Das ist das Zuhause. Wir wollen es einfach unser Zuhause nennen. Lass uns ein Update machen. Dann müssen wir sagen, dass dies die Startseite sein wird. Klicken Sie hier auf Aussehen und Anpassen. Wählen Sie dann Homepage-Einstellungen. Du hast hier die Wahl zwischen deinen neuesten Beiträgen oder einer statischen Seite. Wir wollen eine statische Seite , die Wolfgang Music sein wird. Das wird sich automatisch ändern. Das ist jetzt alles eingerichtet und das ist Ihre Startseite, die jeder besuchen wird, wenn er auf Ihre Website kommt. Sobald das alles erledigt ist, klicken Sie auf Veröffentlichen und schon können Sie loslegen. 17. Domänenname eingerichtet: Die Testversion Ihrer Website ist also eingerichtet. Wenn Sie es jetzt live machen möchten, zeige ich Ihnen, wie das in Word of Phi geht und wie Sie den Domainnamen ändern können. Kommen Sie also zurück zu Word of Phi, stellen Sie sicher, dass Sie auf Websites sind. Und dann klicke auf den kleinen Bleistift. Ich klicke hier um ein Upgrade durchzuführen. Da Sie nur eine einzige Website haben, wählen Sie diese Option aus. Da wir es sehr klein gemacht haben, benötigen Sie hier die kleine Option. Wählen Sie monatlich, jährlich, was immer Sie tun möchten. Und dann entscheide dich für ein Update. Wenn Sie dann die Kreditkartendaten hinzugefügt haben , ist es das. Ihre Website ist jetzt live. Und es verwendet die URL, die eingerichtet wurde, als wir unsere Sorgen eingerichtet haben , wenn ich Sie damit nicht glücklich machen kann , lassen Sie es so. Wenn Sie es jedoch ändern möchten, kommen Sie zu Hosting und Domains. Und hier können Sie eine neue Domain hinzufügen, jedoch woanders gekauft werden muss. Und es kann ein bisschen komplex werden, ein bisschen verwirrend, das einzurichten. Aber Wort, wenn ich große Unterstützung habe. Klicken Sie also auf dieses Icon. Möglicherweise haben sie hier Informationen darüber, was Sie benötigen. Wenn nicht, sende ihnen einfach eine Nachricht und sie werden dich darüber reden. In jedem Fall, wenn Sie diese URL oder Ihren eigenen persönlichen Domainnamen verwenden möchten , ist es das. Sie haben jetzt eine Live-Website. Also klicke auf diesen. Sie werden Ihre gesamte Website vollständig live sehen und Sie können es jedem auf der ganzen Welt zeigen. 18. Vielen Dank: Danke, dass du dir die Zeit genommen hast , dir den ganzen Kurs anzusehen. Wenn du jede Lektion verfolgt hast, hast du jetzt eine fantastisch aussehende Website und weißt du was, ich möchte diese Website sehen, du kannst sie hier im Projektbereich unten laden. Wenn du es dort eingibst, werde ich dir so schnell wie möglich mein vollständiges Feedback geben. Wenn Sie Fragen zu irgendwelchen Themen in einer dieser Lektionen haben, posten Sie diese im Diskussionsbereich, ebenfalls weiter unten hier. Wenn Sie den Kurs beendet haben, wäre es toll, wenn Sie mir eine Bewertung hinterlassen könnten. Gehen Sie hier zum Bewertungsbereich und klicken Sie auf Überprüfen. Das ist großartig. Da kannst du mir sagen, was dir an dem Kurs wirklich gefallen hat, aber auch, was verbessert werden kann. Und das wird mir helfen, jeden Teil des Kurses zu bearbeiten, von dem ich denke, dass er für meine nächsten Kunden besser sein wird. Und stellen Sie sicher, dass Sie unten auf meinen Namen klicken , um mein vollständiges Skill-Share-Profil zu sehen. Hier siehst du alle anderen Website-Kurse , die ich anbiete. Wir haben einen über den Aufbau eines Portfolios, auch mit Elementor, und einen anderen darüber, was man mit Bildern macht, wie man sie hochlädt und das Beste aus Ihrer Website herausholt Du kannst dir all diese ansehen und sicherstellen, dass du mir folgst So kannst du sehen, sobald ich neue Lektionen hochlade , und du kannst ein bisschen mehr lernen Fantastisch. Hab einen schönen Tag.