Der komplette Elementor Masterclass 2022

1. Einführung in die Course: In Ordnung, also willkommen offiziell zum Kurs. Und bevor wir anfangen, geben Lambdas Ihnen ein paar Punkte, hat und Tipps, was Sie bei der Teilnahme am Kurs erwarten können. Nun, das wird die Website sein, die wir zusammen erstellen werden. Es nennt sich unsere Reisepassreise. Es ist für ein fiktives Reisebüro. Sie helfen Touristen im Grunde genommen bei der Planung ihres Traumurlaubs, wenn Sie so wollen. Wie Sie jetzt auf der Homepage sehen können, haben wir das Logo auf der linken Seite, das Hauptmenü auf der rechten Seite. Ich werde auch das Hintergrundband jetzt in den Header einfügen lassen. Hier haben wir ein statisches Bild. Ich zeige Ihnen jedoch eine Alternative zur Verwendung des Videos, stattdessen unseren Hintergrund. Wenn Sie lieber Videos verwenden, zeige ich Ihnen, wie das geht. Für den Rest der Homepage werde ich verschiedene Abschnitte mit verschiedenen Arten von Inhalten haben . Ich werde den Bereich „ Dienste“ haben. Es wird einen Galeriebereich mit Bildern aus der ganzen Welt geben, einen Blog-Bereich, der Tilde-Lithos-Posts aus dem Blog hervorhebt . Aber ich muss auch einen Paketbereich machen , den wir benutzt haben Abschnitt. Und dann haben wir endlich die Fußzeile. Wir werden auch zwei zusätzliche Seiten erstellen. Neben der Homepage. Ich zeige dir, wie man die Begrenzer für die Blogseite erstellt , um alles hier zu bekommen. Wir haben die Artikel alle die Blog-Seite summieren. Hier wirst du die Blogbeiträge haben. Also zeige ich Ihnen, wie Sie diese Art von Design erstellen, wo Sie haben, lassen Sie uns zwei und oben annehmen. Und dann hast du die verschiedenen Beiträge aus den verschiedenen Kategorien. Und schließlich zeige ich Ihnen auch, wie Sie die Kontaktseite erstellen , die ein sehr einfaches Kontaktformular hat. Lass es mich dir einfach zeigen. Dies wird das Kontaktformular sein. Also werden wir zunächst die kostenlose Version von elemental verwenden und weil sie nicht eine ganze Reihe von Funktionen hat , die die kostenpflichtige Version von elemental hat. Wir werden drei zusätzliche Plug-Ins als Entschädigung verwenden . Eine davon ist das Element oder Kopf- und Fußzeile durch Brainstorm-Force, um unsere Kopf- und Fußzeile zu erstellen. Wir werden die wesentlichen Add-On-Plugins verwenden , um uns einige zusätzliche Elemente zur Verfügung zu stellen , die zum Erstellen bestimmter Arten von Inhalten verwendet werden . Und dann verwenden wir auch das WP Formular-Plug-In für unser Kontaktformular. Aber sobald wir den Elementarpool verwenden, brauchen wir keines dieser Plug-Ins mehr. Mit elemental pool können wir so viele Dinge tun und ich zeige Ihnen, wie Sie sie nutzen können. Außerdem geht es nicht nur um das Styling und den Zan. Ich zeige Ihnen, wie Sie die Website auch reaktionsschnell machen können. Wenn es also auf einem Mobilgerät oder auf einem Tablet angezeigt wird, reagiert es. Wie Sie sehen können, ist dies für Mobilgeräte geeignet und reagiert. Jetzt biete ich dir auch alle Videos und Bilder an, die ich benutzt habe. Und tatsächlich wurden alle Bilder mit Ausnahme dieser Bilder gerade eliminiert. All diese anderen Bilder, diese Bilder, die sie tatsächlich selbst aufgenommen haben, weil ich viel unterwegs bin. Und wenn Sie die Bilder nutzen möchten, können Sie das. Aber wenn Sie es für kommerzielle Zwecke verwenden möchten, geben Sie bitte an, dass sie dann für mein Instagram-Konto mein Instagram-Account Xander ausgewählt wird, ich habe eine sehr, sehr kleine Fangemeinde, aber ich habe eine sehr, sehr kleine Fangemeinde, aber ich versuche meine Fangemeinde auf Instagram zu vergrößern weil ich viele Bilder denke. Wenn Sie also gerne um die Welt reisen, sind ein paar Bilder aus der ganzen Welt. Folgen Sie mir unbedingt auf Instagram-Schaufeln von Sandra. Willkommen nochmal zum Kurs. Ich hoffe und glaube aufrichtig, dass Sie diesen Kurs über elementar genießen werden . Und der Kurs ist in mehrere Abschnitte unterteilt, wie gesagt, der erste Abschnitt. Bevor wir selbst in elementare Propria einsteigen, gehe ich davon aus, dass Sie ganz neu im Aufbau Websites sind und nichts über das Webhosting von Web-Domains wissen . Im nächsten Abschnitt zeige ich Ihnen, wie Sie sich auch einen Webhost und die Web-Domain besorgen können . Wenn Sie diese bereits haben oder mit diesem Thema vertraut sind, überspringen Sie mit diesem Thema vertraut sind, diesen Abschnitt und gehen direkt zu dem Abschnitt, in dem wir Erstellen der Website mit der kostenlosen Version von Elementor beginnen . Und dann konzentrieren wir uns im nächsten Abschnitt auf das responsive Design, wie man diese reaktionsschnell macht. Und dann haben wir die kostenpflichtige Version des Elementar-Elementar-Pools. Auch Sie, wie Sie mit Elementar-Pool arbeiten, um die Funktionalität und das Design Ihrer Website zu verbessern. Und dann enthält der allerletzte Abschnitt dieses Kurses die Updates sind zusätzliche Inhalte, bei denen gezielt verschiedene Arten von Elementen verschiedener Arten von Elementarmerkmalen ausgewählt verschiedene Arten von Elementen verschiedener Arten von werden. Und expandieren Sie weiter und zeigen Sie wie der Weg in vollen Zügen ist. Ich hoffe wirklich, dass Sie diesen Kurs genießen und lieben werden . Vielen Dank fürs Zuschauen. Lasst uns jetzt anfangen. 2. Erste Dinge zuerst: Alles klar. Das Wichtigste zuerst, bevor wir anfangen, gibt es ein paar Dinge, die ich gerne tun würde. Zunächst einmal, und das erste, was hier ist, möchte ich, dass Sie ein Theme namens Halo-Theme installieren. Dies ist ein Simulator. Es ist eigentlich von Elemental von sich selbst. Wir werden mit diesem Thema willkommen geheißen. Also bitte installiere und aktiviere das Theme. Und dann möchte ich, dass Sie weitermachen und einige Posts erstellen, mit denen Sie eingehen werden. Ich habe hier bereits ungefähr neun Beiträge erstellt . Sie können sehen, dass ich drei verschiedene Kategorien von Asien, Europa und Südamerika habe. Und jede dieser Kategorien hat drei verschiedene Beiträge. Jetzt werde ich Ihnen tatsächlich die XML-Datei zur Verfügung stellen. Sie werden all diese Beiträge enthalten. Sie können sie einfach auf Ihre Website importieren. Und dann werde ich auch für die Bilder wahrscheinlich auch einen Link zu Dropbox bereitstellen. Sie haben Zugriff auf all diese Bilder , die Sie verwenden können. Viele dieser Bilder sind eigentlich für mein eigenes Instagram-Konto, aber Sie können sie gerne auf Ihrer eigenen Website verwenden. Das einzige, worum ich bitte , ist, dass, wenn wir meine Bilder auf Ihrer Website verwenden und Sie Geld verdienen, lustige Website, bitte erwähnen Sie dass Sie diese Bilder von meinem Instagram-Konto haben, also bitte mach das. Bomb Levite für dich alle Beiträge Inhalte über eine XML-Datei und auch die Bilder, die ich benutzt habe. Jetzt habe ich auch ein paar Seiten erstellt. Ich habe die About-Seite, die Artikelseite, die wie die Blogseite wäre, eine Kontaktseite, eine vorgestellte Taube, natürlich die Homepage. Auch. Wenn du fertig bist, komm hier zu Einstellungen, gehe zum Einlesen und setze dann deine Homepage auf die Startseite. Wählen Sie also im Grunde eine statische Seite gleich hier aus. Und dann sagte Homepage, ich soll zu Hause sein. guter Letzt habe ich auch ein Menü erstellt. Gehe hier runter zu Erscheinungsmenüs und erstelle dann dein Hauptmenü. Kann sagen, ich habe meine vielen, vielen Namenlosen namens MainMenu. Und ich habe zu Hause über Artikel hinzugefügt , die vorgestellt werden und Kontakte. Das ist also eine kleine Aufgabe für dich. Auch hier stelle ich Ihnen die XML-Datei für die Beiträge und Seiten sowie einen Link zu Dropbox für die verwendeten Bilder zur Verfügung. 3. Installieren von Elementor und allgemeine Einstellungen: Jetzt, da Sie Ihrer Wissenschaft alle notwendigen Inhalte hinzugefügt haben , versuchen Sie nun, einige Plugins zu installieren. Und natürlich wird das allererste Plugin, das wir installieren werden, Elemente sein, bevor ich das tue Ich habe bereits drei Plugins auf meiner Website aktiv, Saigon-Optimierer und Sicherheit weil ich mit hostet SiteGround. Und dann WordPress-Importeur, wenn Sie die XML-Datei importiert haben , die ich im vorherigen Video für Sie bereitgestellt habe, hätten Sie höchstwahrscheinlich die WordPress-Eingabe unseres Plugins verwendet . Also habe ich genau das Gleiche für mich selbst getan. Deshalb habe ich das Plugin dort aktiv. Aber wir werden es jetzt tun, wenn wir drei verschiedene Plugins hinzufügen werden. Und der erste wird offensichtlich elementar sein. Das ist das Haupt-Plug-In, mit dem wir arbeiten werden. Es ist derjenige hier. Und natürlich ist es die kostenlose Version von elemental. Da es sich jedoch um die kostenlose Version von Elementor handelt, ist es in Bezug auf die verfügbaren Funktionen etwas eingeschränkt . Um dies zu kompensieren, werden wir zwei weitere Plug-Ins auf dem allerersten installieren , das hier direkt neben elemental liegt. Es sind die wesentlichen Atome für Elementar von WPF-Entwicklern. Ich werde auch das Plug-In installieren. Und dann werden wir schließlich den hier unten installieren, das ist der elementare Aufbau von Kopf- und Fußzeilen durch Brainstormkraft. Lassen Sie uns also das Plug-In installieren. Und ja, ich gehe jetzt weiter und jetzt zu Installierte Plugins. Dies wird weitergehen und sie einzeln aktivieren . Aktiviert den Kopf- und Fußzeilen-Builder und aktiviert dann essentielle Adams for air. Mentor. Sobald Sie jetzt die wesentlichen Atome für Elementor aktiviert haben, wird möglicherweise eine Seite angezeigt. Lassen Sie mich tatsächlich weitermachen und klicken Sie hier auf den Link. Weil dies nicht das erste Mal ist, dass ich das Essential Atoms-Plugin auf meiner Seite installiert habe. Das bist du nicht, ich sehe die Begrüßungsseite nicht. Es ist also sehr wahrscheinlich , dass Sie eine andere Seite gesehen haben , auf der sie sagen werden: Hey, willkommen. Wähle aus, mit welchen Elementen du laufen möchtest. Klicken Sie einfach auf Next, Next, Next, Next, Next, Next. Sie bieten Ihnen auch das Upgrade an, um die kostenpflichtige Version der wesentlichen Atome zu bezahlen . Ignoriere das einfach. Klicken Sie einfach auf Weiter, Weiter, Weiter und dann auf Fertig stellen. Und dann wäre dies im Grunde die Seite, die Sie sehen würden. Aber dazu etwas später mehr. Werfen wir einen Blick auf Elemente sind vor allem Einstellungen. Was genau haben wir hier drin? Das erste, was hier ist, werden die Post-Typen sein. Wenn Sie mit benutzerdefinierten Beitragstypen arbeiten, haben Sie die Möglichkeit, diese auch hier einzuchecken. Aber ich arbeite nur mit Posts und Seiten. Also werde ich das behalten, um es zu überprüfen. Jetzt heißt es deaktivierte Standardfarben. Wenn Sie dieses Kästchen aktivieren, werden die Standardfarben der Elemente deaktiviert und Elementar die Farben von Ihrem Thema erben. Wenn Sie nun ein erweitertes Thema wie Astra oder Ocean, WP und so weiter verwenden. Und du möchtest die Farben deines Themas verwenden. Du wirst diese beiden Kästchen gleich hier deaktivieren. Da wir jedoch das Halo-Thema verwenden, das ein sehr, sehr leichtes Thema ist, wird Elementor all das schwere Heben in Bezug auf Stil, Design und Funktionalität durchführen all das schwere Heben . Was ich also tun werde, ist, dass ich diese beiden Kästchen ankreuze. Es tut mir leid. Ich deaktiviere diese beiden Kästchen weil wir tatsächlich die Standardfarben verwenden möchten von unserem Elementar bereitgestellt werden, also lasse ich diese beiden Felder deaktiviert. Und schließlich verbessern Sie das Element. Oder wenn Sie zu Elementor beitragen möchten, können Sie hier reinkommen und das Kästchen ankreuzen. Das werde ich nicht machen. Lassen Sie uns mit dem Stil fortfahren. Wir werden etwas später darüber sprechen. Tatsächlich, Integrationen, wenn Sie mit Google Maps arbeiten und den API-Schlüssel installieren müssen , würden Sie ihn genau dort installieren. Wenn Sie am Ende andere Plug-Ins wie PayPal oder Stripe oder ähnliches installieren. Und du musst sie mit Elementar integrieren. Auf dieser Seite finden Sie die Möglichkeiten, dies zu tun. Sie haben die Registerkarte „Erweitert“. Wir müssen hier drin nichts ändern. Grundsätzlich dienen die meisten davon für die Sicherheit und für unsere Geschwindigkeit. Wenn Sie ein Problem mit Elementar bemerken, wird Ihre Website möglicherweise sehr, sehr, sehr langsam. Sie können jetzt hier reinkommen und die CSS-Druckmethode von externen Dateien mit interner Einbettung wechseln die CSS-Druckmethode von . Aber tun Sie das nur, wenn Sie Probleme mit Ihrer Geschwindigkeit haben. Und das liegt nicht daran, dass Sie ein anderes aufgeblähtes Plug-In verwenden oder Ihr Webhost nicht gut genug ist oder solche Dinge dies nur als letztes Mittel geändert haben. Gleiches gilt für den Switch, unsere Editor-Loader-Methode. Wenn Sie Probleme auf Ihrer Website beheben möchten, kommen Sie hierher und aktivieren dies. Die ungefilterte Datei, die Elementar hochlädt , hat eine Art integrierte Sicherheit bei der wir, wenn Sie versuchen, Bilder in das Elementarsystem hochzuladen , elementar, schauen und sehen, ob Sie versuchen, Bilder in das Elementarsystem hochzuladen oder nicht Die Datei ist tatsächlich sicher mit der man arbeiten kann, indem diese Funktion aktiviert wird , um ungefilterte Datei-Uploads zu ermöglichen. Sie möchten das Risiko Dateien auf Ihre Website hochzuladen. Also würde ich empfehlen, dass Sie diese deaktiviert lassen. Gleiche Ziele mit Google Fonts werden wieder geladen, Sie müssen hier nichts ändern. Behalten Sie das einfach auf Standardeinstellung. Wenn Sie mit Font Awesome For arbeiten möchten, können Sie jetzt hier reinkommen und diese Funktion aktivieren. Und schließlich hast du Experimente. Hier haben Sie Zugriff auf die neuesten Funktionen, an denen Elementar gerade arbeitet. Sie können sehen, dass der Status der meisten davon auf Beta, Beta, Alpha, Beta usw. festgelegt ist . In den meisten Fällen möchten Sie diese Standardeinstellung beibehalten. Aber es gibt einen akademischen Befehl, den Sie aktivieren. Und als verbesserte Asset-Loading soll dies die Menge an Code auf jeder Seite reduzieren , die mit elementar erstellt wurde. Das bedeutet, dass Ihre Seiten in der Regel schneller geladen werden , obwohl es in der Beta ist, verwende ich dies seit geraumer Zeit und es scheint zu funktionieren. Also werde ich jetzt weitermachen und das verbesserte Asset-Loading aktivieren. Ich werde auch das verbesserte CSS-Loading aktivieren , bitte auch die Zukunft. Auf dieser Website, an der Sie gearbeitet haben, stellen Sie fest, dass ein Problem, das Sie möglicherweise auch hier aufrufen und diese deaktivieren möchten, aber ich glaube, es sollte in Ordnung sein. Also komme ich hier runter und speichere diese Änderungen. Okay, eine Sache, die ich sehr schnell erwähnen möchte , ist, dass Sie Regelmanager haben. Wenn Sie verschiedene Arten von Benutzern auf Ihrer Website mit verschiedenen Arten von Rollen haben. Hier können Sie feststellen, wer tatsächlich elementarspezifisches Beispiel verwenden kann. Sie möchten nicht, dass ein Benutzer mit der Rolle des Mitwirkenden hier mit elementaren Gemeinsamkeiten arbeitet , um alles beizutragen und einfach keinen Zugriff auf das Bearbeitungswerkzeug zu überprüfen. Mit der kostenpflichtigen Version von Elementen haben Sie Zugriff auf weitere Funktionen. Und dann sind unsere Tools hier drin. Dieser ist eigentlich sehr, sehr, sehr, sehr wichtig, CSS und Daten zu regenerieren. Wenn Sie Änderungen wie die Farbe Ihres Textes vornehmen , die besagt, ob ein Text Sie diese Änderungen speichern , und Sie sehen nicht, dass diese Änderungen auf Ihre Wissenschaft wirksam werden, solange dies nicht der zwischenspeichern von Ihrem Computer oder von Ihrem Server aus. Vielleicht möchten Sie hierher kommen und versuchen , Dateien und Daten neu zu generieren. Nun, das wird tun, dass es das CSS-Stylesheet neu erstellt , und hoffentlich sollte das das Problem beheben und Sie können Ihre Änderungen sehen. Debug-Leiste der Synchronisierungsbibliothek im abgesicherten Modus ignoriert diese vorerst, die URL ersetzt. Wenn Sie auf Ihrer Website defekte Links sind, möchten Sie sie auf neue Links verweisen. Du kommst hier unter dem alten Link rein, gehst zum zweiten Feld, füge den neuen Link hinzu und ich klicke einfach auf die Polizei-URL. Und Sie haben die Versionskontrolle für Buch und Link behoben. Wenn Sie aus irgendeinem Grund in Zukunft auf die neueste Version von Elementor upgraden die neueste Version von Elementor und etwas auf Ihrer Seite kaputt geht, funktioniert Ihre Website möglicherweise nicht so gut wie U22. Sie können jetzt hier reinkommen und einfach zur vorherigen Version zurückkehren. Dafür ist seine Zukunft hier drin. Wenn Sie ein besserer Verkoster werden und mit den inoffiziellen Versionen von Elementar arbeiten inoffiziellen Versionen möchten, die noch in Arbeit sind. Dies hat normalerweise viele Moore und Probleme. Wenn Sie also daran interessiert sind, ein Bulk-Hörner zu sein , sind vier Elemente oder Sie können jetzt hier reinkommen und aktivieren. Und dann wieder Wartungsmodus. Wenn sich Ihre Website im Aufbau befindet oder Sie sofortige Änderungen vornehmen, möchten Sie nicht, dass während dieser Zeit jemand auf Ihre Website zugreifen kann . Sie können sofort reinkommen und wählen, demnächst kommen oder sich für die Wartung entscheiden. Und dann müssen Sie eine Seite erstellen, die Dolby für Wartung oder Kommentare angezeigt wird, wenn Sie diese Vorlage genau hier auswählen. Und während sich Ihre Seiten der Wartung befinden oder in Kürze verfügbar sind, können Sie auswählen, wer zu diesem Zeitpunkt Zugriff auf Ihre Website hat. Dann schließlich importieren, exportieren Sie Kinder. Sie können Ihre Vorlagenkits exportieren, um sie auf, auf, auf einer anderen Website zu verwenden . Oder Sie können es sogar importieren, was von einer XML-Site betroffen ist , wenn Sie möchten. Sie klicken also einfach auf die Input-Kits und dann genau hier können Sie dies tun. Ich zeige dir vielleicht etwas später im Kurs, wie das geht . Und schließlich schließlich Systeminformationen. Wenn Sie Ihre Website beheben müssen und zur elementaren Unterstützung der SEC gehen und sie sagen: Hey, können Sie uns die Informationen Ihres Setups zur Verfügung stellen ? Hier können Sie alle notwendigen Informationen bereitstellen . Es kommt einfach hier rein und lade Systeminformationen herunter, sendet sie an die Unterstützung von Leuten bei elemental, und dann können sie dir helfen. Das ist also im Wesentlichen für die Haupteinstellungen für Elementar. Danke fürs Zuschauen und wir sehen uns in der nächsten Klasse. 4. Elementor Übersicht: Alles klar, also wenn all das langweilige Zeug aus dem Weg ist, Lemon, zeige ich Ihnen die Benutzeroberfläche für Elementar der Benutzeroberfläche und wie Elemente tatsächlich funktionieren. Jetzt bin ich auf meinen Seiten genau hier und ich werde die Homepage bearbeiten. Was du tun wirst, ist das, was du hier oben leuchten sehen wirst. Du siehst „Bearbeiten mit Elementor“. Es wird genau hier dieser große blaue Knopf sein. Also lasst uns weitermachen und darauf klicken. Und was hier passieren wird, ist, dass Elementar gestartet wird , um auf dieser speziellen Seite zu laufen. Okay, das ist die Homepage. Auf der linken Seite sehen Sie offensichtlich die Box für Elementar, die Benutzeroberfläche. Das allererste, was ich dir hier zeigen möchte die drei Schaltflächen hier, das Menü, das du da hineinklickst. Sie haben Zugriff auf Dinge wie die Site-Einstellungen, FIM-Aufbau, über die wir später sprechen werden. Aber sehr schnell, kommen wir hierher , um Referenzen zu verbrauchen. Und ich weiß nicht, wie es dir geht. Vielleicht gefällt dir das Lichtthema. Ich mag das dunkle Thema. Was ich hier machen werde, ist für das UI-Thema, ich werde das Formular wechseln, automatisch erkennen. Zu dunkel. Ich bevorzuge nur einen schwarzen Hintergrund und weißer Text ist einfach so viel cooler. Meiner Meinung nach ist das wieder völlig subjektiv, aber ich werde es so dunkel halten. Lass uns zurückgehen. Hier drin. Sie können etwas innerhalb von Element zu überall finden. Wie auch immer, Elemente, wenn Sie möchten, können Sie die Seite anzeigen und dann das Dashboard verlassen . Aber lass uns zurückgehen. Jetzt. Genau hier haben Sie Elemente und dann haben Sie global. Global funktioniert nur mit der kostenpflichtigen Version des Elements. Und dann möchten Sie Ihren speziellen Inhaltsblock speichern und denselben Block auf einer anderen Seite irgendwo auf Ihrer Website verwenden . Darauf bezieht sich global im Grunde genommen. Aber keine Sorge, wir reden später weiter. Aber das sind Ihre Elemente. Sie haben Grundelemente wie Ihre Kreuzung. Sie gehen in den Bildtexteditor. Nehmen wir zum Beispiel an, Sie wollten Ihrer Seite ein Bild hinzufügen. Sie würden einfach auf das Bildelement klicken und es dann einfach in die Box legen. Und dann können Sie von hier aus das Bild auswählen, mit dem Sie arbeiten möchten. mich also als Beispiel Lassen Sie mich also als Beispiel das Bild dieses Mädchens wählen die brasilianische Flagge hält. Und da ist es. Die Sache ist die meisten Elemente, die es mit typischerweise 3,5 Hauptfächern willkommen heißen wird . Wenn ich fertig bin, überwiegen Sie, haben Sie den Inhaltsbereich. In diesem Fall können Sie hier entweder Texte, Bilder, Videodateien, Audio usw. hinzufügen . Dann haben Sie einen Stil, in dem Sie Dinge tun können, wie vielleicht das Kohlegesetz geändert, die Größe ändern, ein Hintergrundbild seit der Höhe hinzufügen und so weiter. Und dann haben Sie die Registerkarte „Erweitert“. Aber Sie können Dinge wie Ränder, Muster und keinen Abstand hinzufügen . Sie könnten auch einige Bewegungseffekte hinzufügen, sind einige Grenzen und so weiter. Normalerweise haben die meisten Elemente, mit denen Sie gearbeitet haben, diese drei verschiedenen Registerkarten oder Fächer. Gehen Sie also zurück und klicken Sie hier oben auf den Button, damit Sie auf alle Elemente zugreifen können. Sie können also sehen, dass wir die Grundelemente hier haben, Videotaste, Abstandshalter und so weiter. Jetzt können Sie diejenigen auf Bewährung unter der kostenpflichtigen Version der Portfolio-Galerie für Elementarbeiträge sehen. So viele von ihnen. Sie können also jetzt sehen, da wir die kostenpflichtige Version von elemental nicht verwenden, haben wir keinen Zugriff auf all diese Elemente. , haben wir zum Glück Da wir jedoch mit dem wesentlichen Add-On-Plug-In arbeiten , kostenlos Zugriff auf ziemlich viele zusätzliche Elemente. Sie können genau hier die wesentlichen Atome sehen. Sie haben Dinge wie das fortschrittliche Akkordeon, Call to Action, den unteren kreativen Knopf und so weiter. Also werden wir mit einigen dieser Elemente reinkommen. Aber wenn wir zu Elementen oder unter Allgemein zurückkehren, haben wir auch Zugriff auf mehr Blöcke. Ich bin nur nah an dieser Koordinate. Also der General mit der kostenlosen Version von Elementen , auf die wir Zugriff haben, mehr Elemente wie die Symbolbox, Testimonial, soziale Icons und so weiter. Lass mich das schließen. Und dann hast du eine Seite. Leider sind diese Elemente nur mit der kostenpflichtigen Version von elemental verfügbar. Sie haben WooCommerce wieder nur mit der kostenpflichtigen Version von elemental verfügbar. Wir haben über die wesentlichen Atome gesprochen. Das ist also das andere Plug-In. Wir haben die Kopf- und Fußzeile installiert. Dieses Plugin ermöglicht es uns, eine benutzerdefinierte Kopfzeile zu erstellen , und die benutzerdefinierte Fußzeile für unsere Website hat Zugriff auf Elemente wie die Elemente des Navigationsmenüs, den Seitentitel, den Seitentitel, Website-Logo und so weiter. Und nicht zuletzt haben wir Zugriff auf die WordPress-Widgets wie Ihre Seiten, Callender-Audio hat unsere Suche durchgeführt und so weiter. Okay, das ist das für die Elemente. Jetzt, hier unten, haben Sie Zugriff auf ein paar weitere Einstellungen. Es mag irgendwie überwältigend klingen, aber keine Sorge, sobald Sie mit Elementar willkommen sind, ist es eigentlich nicht so überwältigend. Es ist eigentlich sehr, sehr einfach zu arbeiten. Hier unter Einstellungen. Hier können Sie Dinge tun, wie den Titel der Seite ändern, den Status von veröffentlicht in Penn ändern und überprüfen, Sie können Ihr vorgestelltes Bild hinzufügen. Sie können auch den Titel ausblenden, was wir tatsächlich tun. Okay, ich verstecke den Titel. Ich meine, wie oft gehst du auf eine Website und dann auf der Homepage heißt es zu Hause dreiwertig, mach das. Lassen Sie uns also einfach den Titel und dann das Seitenlayout ausblenden . Ich erkläre das etwas später während wir im Kurs vorankommen. Dann hast du den Alarm, Entschuldigung, du hast den Lesefortschrittsbalken. Dies wird durch das wesentliche Add-Ons Plug-In bereitgestellt. Grundsätzlich ist der Punkt hier, dass Sie vielleicht in einigen Episoden gesehen haben , wo es beginnt, auf der Seite nach unten zu scrollen, sehen Sie wie eine Leiste sich horizontal oder vertikal bewegt angibt, wie viel von der tatsächlich gelesenen Menge und wie viel mehr Inhalt Sie noch essen müssen. Sie haben also diese zukünftige Einatmung. Wir schauen uns das etwas später an. Und dann gehe das Inhaltsverzeichnis nach oben. Keine Sorge, wir reden später darüber. Und dann können Sie unter Stil genau hier den Körpertyp ändern. Sie können eine Hintergrundfarbe hinzufügen, wenn Sie möchten. Du kommst gerade hier rein, wähle wie die Grundfarbe von Blau und so weiter. Aber im Moment werde ich einfach weitermachen und das Häkchen abschalten. Und schließlich haben Sie die Fortgeschrittenen, wo Sie Ihr eigenes Kostüm, unseren JavaScript-Code oder einen benutzerdefinierten CSS-Code hinzufügen können Ihr eigenes Kostüm, unseren JavaScript-Code , der leider nur mit der kostenpflichtigen Version verfügbar ist von elementar. Okay, lass uns weitermachen. Neben dem Satz. Du, du hast den Navigator. Nun navigieren Sie zu, dass Sie, sobald Sie beginnen, Elemente und Inhalte zu Ihrer Seite hinzuzufügen, können Sie mit dem Navigatorboden die gesamte Struktur im Wesentlichen in einem hierarchischen Format sehen die gesamte Struktur im Wesentlichen in Ihrer gesamten Seite. Es kann also sehr, sehr einfach für uns sein, schnell nach einem bestimmten Element oder Buch zu suchen , mit dem Sie arbeiten möchten. Das ist es, was die Navigation oder Navigation wichtig ist. Deshalb ist Next die Geschichte. Wenn Sie also Dinge wie die Farbe ändern oder im Grunde genommen etwas tun, befindet sich dies auf der Registerkarte Verlauf und Sie können es direkt hier sehen, von Anfang an, als wir mit der Bearbeitung begonnen haben Wenn wir die Benutzereinstellung für das UI-Thema von hell, von unserem Auto zu dunkel geändert für das UI-Thema von hell, haben, können Sie sehen, dass es genau dort ist. Wir haben ein Bild hinzugefügt, wir haben den Seitentitel erreicht damit Sie sofort hier reinkommen und eine dieser Aktionen rückgängig machen können . Und dann hast du Revisionen. Revisionen sind ein bisschen mehr, was ist jetzt? Ein bisschen robuster. der Regel werden bei den Revisionen diese Ihrer Vision beendet, sobald Sie Ihre Seite aktualisiert und gespeichert haben Änderungen an Ihrer Vision beendet, sobald Sie Ihre Seite aktualisiert und gespeichert haben. Er ist also ein bisschen robuster und handhabt. Das ist also das Fett. Und dann hier drin hast du den Responsive-Modus. Du klickst hier rein. Jetzt können Sie entweder die Desktop-Ansicht, Tablet-Ansicht oder die mobile Ansicht wählen. Und das dünne ist, dass Sie sogar sehr, sehr, sehr spezifisch mit der Breite Ihres Bildschirms werden können. Sagen Sie zum Beispiel, wenn ich die Tabelle hier gewählt habe , sehen Sie diese Griffe links und rechts. Sie können tatsächlich zu einer bestimmten Dimension wechseln. Und natürlich haben Sie OPIA die Breite und die Höhe. Wenn Sie eine bestimmte Art von Gerät haben, das Sie sehen möchten , wie Sie eingestellt haben, wird es auf dem jeweiligen Gerät aussehen. Wir haben ganz konkrete Dimensionen. Sie können hier reinkommen und die Maße sowohl für die Breite als auch die Höhe ändern die Maße sowohl für die Breite . Aber ich gehe zurück, wechsle zum Desktop und teile dann hier. Sie können eine Vorschau Ihrer Änderungen anzeigen, sobald Sie sie vorgenommen haben. Und schließlich können Sie unter Speicheroptionen alles Licht aktualisieren . Sie können als Entwurf speichern oder als Vorlagenstrang speichern. Als Vorlage bedeutet , dass Sie genau denselben Inhalt auf einer anderen Seite wiederverwenden können. Dies ist also im Grunde eine Aufschlüsselung darüber, wie Elementar hinter den Kulissen geht, die Benutzeroberfläche, wie Elemente hinzugefügt werden. Auch hier, mach dir keine Sorgen, wenn es sehr, sehr überwältigend erscheint , Azure beginnt mit Elementar zu laufen. Es wird sehr einfach für dich, mit dir zu arbeiten. Das war im Grunde ein Crashkurs auf der elementaren Benutzeroberfläche. Danke fürs Zuschauen. Begleite mich in der nächsten Klasse, wir werden nun anfangen, unsere globalen Variablen zu setzen . Wir sehen uns dann. 5. Abschnitte Columns Margen und Paddings: Ich möchte nur noch ein paar Minuten damit verbringen Sie durch die allgemeinen Konzepte von Abschnitten, Spalten sowie Elementen, Mustern und Rändern zu führen. Wie ich es dir zuvor gezeigt habe. Wenn Sie ein Element hinzufügen möchten, können Sie einfach von der linken Seite ziehen und es dann einfach in die Folie fallen. Jetzt ist das Ding automatisch, wenn Sie Elemente mit Elementor hinzufügen, ein Abschnitt und eine Wirtschaft für dieses bestimmte Element erstellt. Wir haben gerade die Texteditor-Elemente eingeworfen. Und jetzt würden Sie feststellen, wir diese blaue Linie hier haben. Dies wird dieser Abschnitt sein, der die Spalte enthält, in der die Textbearbeitung enthalten ist. Alles. Beachten Sie genau hier, dass Sie diesen braunen Knopf genau hier haben. Und wenn ich den Mauszeiger darüber fahre, heißt es „Spalte bearbeiten“. Jetzt ist dies das eigentliche Element selbst, das eigentliche Textbearbeitungswerkzeug. Wieder einmal, so wie Elementarwandern da ist, haben Sie ein Element, egal ob Bild, Video oder Button. Und dann wird eine Spalte gehalten, die dieses Element enthält. Sowohl in der Spalte als auch in den Elementen befinden sich in einem Abschnitt. Es ist irgendwie wie eine hierarchische Strukturabschnittsspalte und dann das eigentliche Element. Nun, genau wie beim Bearbeiten, das Element, in dem Sie Zugriff auf den Inhaltsstil haben , erweitert. Sie können auch die Spalte bearbeiten, die dieses Element enthält. Sie können sehen, dass ich unten auf der Seite geschoben bin, es heißt „Spalte bearbeiten“. Du klickst da rein. Und dann haben Sie Zugriff auf Layoutstil und Advanced. Mit dem Layout können Sie Dinge tun, wie z. B. die Länge der Spalte reduzieren. Sie können die Ausrichtung ändern. Sie können ein HTML-Tag-Fluide hinzufügen. Sie können die Spalte stylen und wir möchten einen schwarzen Hintergrund wie in einem roten Hintergrund hinzufügen. Und du willst ein Bild hinzufügen, solche Dinge. Damit viele Dinge du alles mit der Kolumne machen kannst. Wenn Sie jetzt mit der rechten Maustaste auf die Schaltfläche Spalte bearbeiten klicken, können Sie Dinge wie das Hinzufügen einer neuen Spalte und einer duplizierten Spalte tun . Sie könnten den Stil sogar kopieren und einfügen. Vielleicht haben Sie einen schwarzen Hintergrund hinzugefügt, Sie ändern den Schriftstil des Textes und möchten diesen Stil wiederverwenden, kopieren Sie einfach den Stil und dann können Sie seinen Stil anderswo durchbohren. Das Gleiche gilt auch für diesen Abschnitt hier drin. Wenn ich hier oben auf den Button „ Abschnitt bearbeiten“ klicke. Jetzt sehen Sie, dass ich Zugriff auf den Layoutstil erweitert habe. Wie beim Layout kann ich dies auf volle Breite ändern. Ich kann vielleicht die Größe oder die Länge der Breite nackt ändern , sehr, sehr breite Verfügbarkeit jetzt werde ich, ich kann auch die Höhe ändern, wenn ich wollte. Ich kann eine Menge Dinge machen. Das Gleiche gilt für seinen Stil. Auch hier kann ich eine Hintergrundfarbe hinzufügen. Wenn ich wollte. Ich kann mehrere Dinge tun, wie Bewegungseffekte hinzufügen und so weiter. genau wie bei der Spaltenumgebung Klicken Sie genau wie bei der Spaltenumgebung auf die Schaltfläche „Abschnitt bearbeiten“. Sie können sitzen und Dinge wie Abschnitt bearbeiten und ich kann duplizieren. Ich kann sogar als Vorlage speichern, über die wir sprechen werden , wenn wir Elementor Pro verwenden. Lassen Sie mich jetzt schnell mit Ihnen über das Konzept der Ränder und Muster sprechen , denn dies wird sehr, sehr, sehr wichtig sein. Jetzt habe ich hier einen Abschnitt, der diesen Texteditor schreibt. Was ich tun werde, ist, dass ich ein Bild in einen anderen Abschnitt einfüge . Lambdas wählen schnell ein Bild aus, mit dem Sie gehen möchten. Lass mich in meine Mediathek gehen. Lassen Sie mich dieses Bild genau hier wählen. Jetzt sieh dir das an. Lassen Sie mich dem Abschnitt hier eine Hintergrundfarbe hinzufügen. Keine Sorge, ich zeige dir das alles ein bisschen später. Alles klar. Was genau sind Margen? Ränder werden verwendet, um Abstand zwischen Abschnitten hinzuzufügen. Im Moment haben wir einen Abschnitt diesen Texteditor mit rotem Hintergrund enthält, hätte hier einen weiteren Abschnitt, der das Bild enthält. Wenn ich zwischen diesen beiden viel Platz schaffen wollte, könnte ich hier tatsächlich ein Element verwenden , das als Spacer-Element bezeichnet wird. Sie können den konjugierten Abstandhalter sagen und ihn dann zwischen diesen beiden Abschnitten fallen lassen . Eine andere Möglichkeit, dies zu tun, wäre jedoch , zu einem dieser Abschnitte zu gehen. Ich gehe zum ersten Abschnitt hier drin. Ich gehe zu Advanced und eine Vielzahl von gehobenen Margen. Beachten Sie nun, dass Sie standardmäßig Ränder und Muster zu allen vier Seiten eines Abschnitts links, rechts, oben und unten, rechts hinzufügen können allen vier Seiten eines Abschnitts links, rechts, . Wenn ich nun entweder oben oder unten einen Rand hinzufügen wollte, können Sie sehen, dass sie angekettet sind, was bedeutet, dass alles, was Sie oben hinzufügen , auch unten hinzugefügt wird. Wenn Sie Werte für eine bestimmte Seite hinzufügen möchten , möchten Sie bei 0 beginnen. Zuallererst Zero. Du kommst hier rein und dann kannst du sehen, dass du die Verknüpfung der Werte aufheben kannst. Im Moment können Sie also einfach hinzufügen, denn oben sind rechte und linke Ränder für elementar standardmäßig auf auto eingestellt, Sie können dort keinen genialen erstellen. Beachten Sie jedoch, dass, wenn ich anfange Ränder am unteren Rand des ersten Abschnitts hinzuzufügen, beachten Sie, dass es sich um einen Abschnitt handelt, der das Bild enthält, nicht nach unten geschoben wird. liegt daran, dass ich zwischen diesem ersten Abschnitt und diesem zweiten Abschnitt Raum schaffe . Wenn ich wollte, könnte ich auch den Rückwärtsgang für den zweiten Abschnitt machen. Ich kann zum zweiten Abschnitt hier in der Nähe gehen, gehe zu Advanced. Unlink entwickelt sich. Und jetzt kann ich anstelle eines vorgestellten unten oben hinzufügen. Jetzt können Sie sehen, dass wir diesen Abschnitt drücken und das Bild vom ersten Abschnitt aus nach unten halten das Bild vom ersten Abschnitt aus nach unten , der besagt, welche Ränder nützlich sind. Sie sind nützlich, um Abstände zwischen Abschnitten zu erstellen. Eines von Mustern, weil sie Muster haben. Muster werden verwendet, um Abstand zwischen einem Element und seinem Rand oder seiner Spalte zu schaffen. Als Beispiel verwende ich den Texteditor hier. Alles klar, also gehe ich da rein. Ich gehe nach Advanced. Und jetzt können Sie sehen, dass ich das Muster zur Verfügung habe. Ich werde die Verknüpfung der Werte aufheben. Und wenn ich jetzt gleich hier mit dem Hinzufügen von Padding beginne, können Sie sehen, dass ich hier oben Platz zwischen dem Texteditor und seinem eigenen Abschnitt erstelle dem Texteditor und . Ich kann nach unten gehen, genau das Gleiche machen. Sie können also jetzt sehen, dass ich im Grunde Raum für meine Texte schaffe, ein Tool innerhalb eines eigenen Abschnitts. Dafür werden Muster verwendet. Sie verwenden, um Platz für Elemente innerhalb einer eigenen Spalte oder ihres Abschnitts zu schaffen. Das ist im Grunde das, was Muster nützlich sind. Das ist also der Unterschied zwischen Rändern sind Muster. Ränder werden verwendet, um Abstand zwischen Abschnitten zu schaffen. Muster werden verwendet, um Abstand zwischen einem Abschnitt und dem darin enthaltenen Element zu schaffen. Hoffentlich haben Sie jetzt ein gutes Verständnis dafür, wie hoch unsere Ränder und Polsterungen sind. Noch ein schneller Thin, Sie können Abschnitte auch durch einfaches Klicken und Ziehen neu anordnen . Wenn ich den Abschnitt mit dem Rand verschieben wollte, halte ich das Bild auch nach oben. Ich klicke einfach auf die Schaltfläche „Abschnitt bearbeiten“ und halte sie gedrückt. Jetzt kannst du sehen, dass es mir erlaubt, mich zu bewegen. Ich kann es dir ganz nach oben bewegen. Warten Sie, bis der blaue Strich oder die BlueLine angezeigt wird, und lassen Sie dann einfach ein Intro des Bildlichttages los. Sie haben diese Option hier mit elementwise, was es Ihnen ermöglicht, unsere Abschnitte neu anzuordnen. Sie könnten auch Spalten neu anordnen und ich dupliziere diese Spalte einfach hier drin. Lassen Sie mich dieses Bild schnell ändern , nur um Ihnen eine sehr, sehr schnelle Demonstration zu geben , lassen Sie mich dieses Bild wählen. Also kann ich einfach anklicken, wo Sie die Schaltfläche Spalte bearbeiten haben. Und dann arrangieren wir es. Sie können sehen, wo Sie sehen, wo Sie sehen können. Diese Option steht Ihnen also auch mit elementar zur Verfügung. Sie sich also keine Sorgen, wenn wir anfangen, mit Elementen zu gehen oder Sie beginnen, es beginnt, viel mehr Funktionen und Funktionalitäten von Elementen zu entdecken . Und danke fürs Zuschauen. Wir sehen uns in der nächsten Klasse. 6. Einrichten unserer globalen Werte: Willkommen zurück. Jetzt, da ich Ihnen eine kurze Einführung in die Benutzeroberfläche von Elementor gezeigt habe . Werfen wir einen Blick auf die globalen Variablen und wie Sie die Arten von Schriftfamilien, die Sie verwenden möchten, die Farben und so weiter festlegen können die Arten von Schriftfamilien, die Sie verwenden möchten, die Farben und so weiter festlegen . Jetzt, auf derselben Benutzeroberfläche hier, gehen Sie hier oben zur Menüschaltfläche und gehen dann zu Ihren Site-Einstellungen. Stimmt's? Jetzt hier ist der dünne. Wir könnten globale Farben und Farben festlegen, die auf unserer gesamten Website verwendet werden können , klicken Sie auf globale Farben. Nun wäre dies die Standardklausel, dass Sie ein blaues, dunkelgraues, hellgrau und dann Limette hätten. Das wäre also für Ihren primären unser Kopf macht Ihre sekundären Header, Ihre Texte, dies wäre ein normaler Körper, der einen Akzent annimmt , der normalerweise für wie Links oder Schaltflächen verwendet wird. Was ich tun werde, ist, dass ich diese tatsächlich in ein paar Klamotten umwandle , die ich hier habe. Um sie zu ändern, klicke ich hinein. Und wenn eine Primarvereinigung, gehe ich mit White. Okay, warum es also fff sein wird, FFF sechs Fs ist im Grunde für White Album mein Primär. Und dann werden wir das für die Sekundarstufe tatsächlich so behalten, wie es ist. Aber dann gehen wir für SMS mit Schwarz. Schwarz wird sechs Nullen sein. Also 123456, das nennen wir die Hexadezimalwerte. Okay, also sechs Nullen für Schwarz, sechs Fs für Weiß. Und schließlich für die Akzente, die für die Links wären. Ich hab meine Farbe hier drin. Lassen Sie mich einfach schnell die Farbe für meinen anderen Bildschirm schnappen. Komm gleich her und füge das ein. Es ist also ein Orangeton, es ist im Grunde ein DECA 570. Jetzt können Sie sich entscheiden, auch Ihre eigenen benutzerdefinierten Farben hinzuzufügen. Es kann hier reinkommen, klicken Sie auf Farbe hinzufügen. Man kann diesen so nennen könnte alles etwas geben oder sagen wir mal die spezielle Sonderfarbe. Ich zeige dir etwas später, wie das funktioniert. Nennen wir das einen besonderen Colo. Und hier drin klicke ich auf das Kästchen. Und lass uns einfach etwas Rötliches wählen. Also habe ich meine eigene benutzerdefinierte Farbe namens Special Column. Ich gehe jetzt weiter und aktualisiere einfach. Wir haben unsere globale Klausel festgelegt, die wir auf der gesamten Website verwenden können. Aber dann haben wir auch Zugriff auf globale Schriften. Schriftfamilien sind sehr, sehr, sehr wichtig. Also sieh dir diesen Artikel an. Ich gehe globale Schriften runter. Der erste hier wird primär sein. Dies wäre für Ihre primären Header. Werfen wir jetzt einfach einen Blick auf meinen anderen Bildschirm hier drin, denn ich habe mich für die Schriftfamilie der Bürger entschieden , die mit Oswald gehen. Oswald ist eine bestimmte Google-Schriftart, die mir gefällt. Ich entscheide mich für Oswald für die Font-Familie. Das Gewicht hier wird 700s betragen, es wird ein bisschen schwerer. Dann werde ich diese beiden Großbuchstaben umwandeln. Und dann lasse ich die anderen Zeilenhöhe, den Buchstabenabstand, welchen Abstand und so weiter auf dem Schlupf diese, wenn sie oben sind. Als nächstes wird die Sekundarstufe sein. Und dann nochmal zweitrangig gehe ich mit Oswald. Auch alles für Sekundär. Und dann die Größe hier, ich werde tatsächlich zu unseren 20 Pixeln gehen weil es ein bisschen kleinere Pixel geben wird. Und dann wären die Gewichte hier unsere 600. Und da gehst du. Das ist für die Sekundarstufe. Und dann Text, dies wird unser regulärer Text sein. Ich werde tatsächlich von Familien unserer beiden neuen D2 Sands wechseln . Also lasst uns nach einer neuen Tür suchen. Ich sagte, es tut mir leid, ist kein neues Veto Nieto. Es tut mir leid. Trag sogar meine Brille. Ich kann immer noch nicht richtig sehen. Millionen von Sensoren werden Volltext sein. Und dann wäre die Größe hier 18 Pixel und die Breite wird 500 betragen. Und das ist nicht zuletzt, wir haben die Akzente. Akzente werden Roboto sein. Bleiben wir bei Roboto und warten Sie dann, bis es 500 ist. Also ändern wir hier drin nichts. Ich werde jetzt weitermachen und updaten. Der Punkt hier ist , dass wir diese Schriftfamilien tatsächlich verwenden können , diese Schriftfarben überall auf unserer Website. Als Beispiel. Lass mich das schließen und lass mich jetzt weitermachen und eine Überschrift hinzufügen. Also klicke ich auf Drag, Drop den Kopf und die Elemente hier rein. Jetzt sieh dir das mal an. Wenn ich zu Style gehen wollte, in Ordnung, genau hier können Sie sehen, dass wir die Typografie-Option haben, um auszuwählen, welche Art von Topographie mit der gesamten Textfarbe arbeiten wollte . Werfen Sie einen Blick auf die. Wenn ich auf dieses Icon hier klicke, dieses global aussehende Icon, klicke ich dort hinein. Jetzt sehen wir, dass wir aus den fünf Optionen wählen können, Primär-, Sekundärtexten, Akzent und sogar der speziellen Farbe, die wir hinzugefügt haben. So können Sie die globale verursachte Oktave nutzen , indem Sie sich die gleichen Ziele setzen , indem Sie erneut hier klicken. Und jetzt kann ich wählen, ob ich entweder zu den Primärtexten, Sekundärtexten, regulären Texten oder dem Akzent passt. So würden die funktionieren. Aber lass mich dir etwas noch Interessanteres zeigen. Wenn ich zu den Site-Einstellungen zurückkehre, direkt unter dem Designsystem, hast du deinen Themenstil. Wenn ich hier auf Typografie klicke, können wir jetzt bestimmte Schriftfamilien, Farben und Größen für unser H1- oder H2-Tag, h3 usw. festlegen bestimmte Schriftfamilien, Farben Größen für unser H1- oder H2-Tag, . Damit wir dieses spezielle System nutzen können , müssen wir die Standardfarben und -schriften auf der Einstellungsseite deaktivieren . Denken Sie daran, lassen Sie mich das einfach schnell aktualisieren. Ich zeige, wovon ich rede. Wenn wir zurück zum Backend gehen, lassen Sie mich gleich hierher kommen gehen Sie zu Exit to Dashboard. Wenn Sie in den Elementor-Einstellungen zu Ihren Elementor-Sets zurückkehren , genau hier müssen wir genau hier die Standardfarben und -schriften deaktivieren , um diesen neuen Designstil-Editor nutzen zu können. Also überprüfe ich diese beiden Kästchen. Speichern Sie diese Änderungen. Und jetzt lass mich das schließen. Lassen Sie mich diese Seite noch einmal aktualisieren. Jetzt sieh dir das mal an. Wenn ich hier wieder reingehe, gehe zu Site-Einstellungen und begleite die native Topographie. Jetzt kann ich eine bestimmte Textfarbe für den Körper, technische Größe, für die Links usw. festlegen. Auch wenn ich zurückgehe, wenn ich zurück zum normalen Labor-Back-End gehe und dann einfach schließe und dann meine Überschrift hier wieder hinzufüge. Wenn ich zum Stil gehe , bist du nicht zur Textfarbe gegangen. Ich habe immer noch Zugang zu den Farben, die Alia verärgert haben. Und dann habe ich auch für die Typografie immer noch Zugriff auf die Sekundärtexte. Grundsätzlich dieselben Optionen. Ich sagte, wir haben Zugang zu ihnen. So grundlegend streitig. Geh noch einmal zum Set zurück und dann wollte ich es nur behandeln. Ich habe immer noch Zugriff auf diese Optionen. Gehen wir zurück zur Typografie des Themenstils. Ich habe meine Optionen hier, die ich bereits eingestellt habe. Also was ich hier machen werde, ist das. Okay, lasst uns zuerst die Typografie für unseren Körper wählen . Also hier wegen der Leiche gehe ich hier rüber zur Textspalte. Wir werden unser Schwarz wählen , das für den Text sein wird. Für die Typografie. Ich gehe einfach mit SMS. Denken Sie daran, dass wir sagten, dass Texte Newton zu Sand sind, Größe von 18 Pixeln und dann das Gewicht von 500. Das wird für die Leiche sein. Gut. Jetzt zum Link. Und überprüfe einfach, was ich hier habe für den Link. Ich gehe mit Farbe, der Akzentfarben-Typografie. Ich gehe auch mit Akzent. Nun, für das Alter warnt, okay, das wird für die F1's ein bisschen anders sein. Was ich hier gemacht habe, ist für die Familienaufregung, die ich in Verzug bringen möchte. Aber die Größe wird hier 100 Pixel betragen. Sehr, sehr, sehr, sehr, sehr massiv. Und dann wird das Gewicht hier 600 betragen. Wir werden kaum H auf unserer Website verwenden, also machen Sie sich keine Sorgen um die enorme Größe. Ich behalte das bei 100. Lasst uns jetzt zur H2 gehen. Für H2 habe ich die Größe hier. Ich klicke auf Typografie. Die Größe hier habe ich auf 32 Pixel eingestellt . 32 Pixel, und dann habe ich das Gewicht hier auf 700. Im Grunde ist dies der Haupt-Header mit dem wir arbeiten werden. Eigentlich entschuldigte ich mich, ich habe es zu 36 gesagt, tut mir leid, sechs mal sechs Pixel für H2. Dann schau dir das für das Alter von drei Jahren an. Im Alter von drei Jahren wird die Farbe hier die Akzentfarbe sein , die orange Farbe. Dann wird die Größe hier 22 Pixel betragen. Dann wird die Familie hier primär sein, was auch alt sein würde, sagte auch, die primäre Schriftfamilie hier unser Oswald sein werde. Ich werde für die H12 sein. Also im Grunde zwei, wir wären 36 Größe und Pixel, die Familie von Oswald. Es wird Großbuchstaben geben und dann 708 und wartet. Und schließlich habe ich auch für den H4 gesagt, dass die gleiche Farbe die Axonfarbe sein würde. Und dann wird die Größe hier unsere 18 Pixel betragen. Okay, also lasst uns nochmal Oswald wählen. Dann wäre die Größe hier unsere 18 Pixel, die gleiche Größe wie unsere Körpertexte haben. Und dann noch eins. Der allerletzte wird das fünfte Lebensjahr sein, dem ich glaube nicht wirklich, dass wir mit diesem mehrfachen gesetzlichen H5 gehen werden, und dann wäre die Topographie dieselbe sekundäre oder primäre, wenn Sie wollen. Und dann wäre die Größe hier 16 Pixel. Da gehst du. Also werde ich jetzt weitermachen und das einfach aktualisieren. Und das war's jetzt, ich weiß, dass dies ein sehr, sehr langes Video war , in dem ich nur über Autokredite und so sprach. Aber es deutet darauf hin, dass auf unserer Website, wenn überall ein H2 automatisch hinzugefügt wird, die Werte von hier erben wird. So ist unser H2 gerade, hätte die Schriftfamilie Oswald, Größe von 36 Pixel und dann ein Gewicht von 700. Und dann gilt das Gleiche mit den Dreiern, Vieren und so weiter. Mou hat im Grunde genommen den globalen Wertefall eingerichtet oder ich traf uns sowie unsere Körpertexte. Aber wir haben auch gesagt , dass globale Farben, die wir immer wieder verwenden können. Wir haben gesagt, dass fünf von ihnen primäre, sekundäre Texte Akzent, besonders wenn ich keinen speziellen Ökologen In verwende, Ihnen zeigen wollten, wie Sie zusätzliche benutzerdefinierte Farben hören können , wenn Sie möchten. Aber im Grunde genommen richten wir unsere globalen Schriftfamilien, Farben und Größen ein. Deutschland, das nächste Video, in dem wir jetzt anfangen werden, den Header voller Website aufzubauen . 7. Erstellen unserer benutzerdefinierten Headers: Okay, jetzt lasst uns weitermachen und den Header für unsere Website erstellen. Und genau so sieht es gerade aus, und es sieht überhaupt nicht gut aus. Das ist es, was wir erreichen wollen. Sie können die Kopfzeile hier sehen, wir haben das Logo auf der linken Seite und dann haben wir das Hauptmenü auf der rechten Seite. jedoch Zeigen Sie Ihnen jedoch etwas wie wenn ich auf eine andere Seite gehen würde, sagen wir als Beispiel die About-Seite, genau hier können Sie sehen, dass die Kopfzeile anders ist. Dieser hat einen schwarzen Hintergrund, während der Header auf der Homepage überhaupt keinen Hintergrund hat, fügt sich hier einfach in das Hintergrundbild ein, im Grunde müssen wir 82 verschiedene Header erstellen. Eine speziell für die Homepage und dann die andere für den Rest unserer Seiten. Wie machen wir das jetzt? Bevor ich dir das zeige, lass mich einfach die Demo-Website wegziehen. Bevor ich dir jetzt zeige, wie das geht, möchte ich dir etwas anderes zeigen. Wenn ich mit Elementor zu Edit gehen sollte, ging ich zu den Site-Einstellungen. Neben der Möglichkeit, Ihre globalen Telefone und Ihre Farben und all das einzustellen , können Sie auch Änderungen an der Site-Identität vornehmen , genau hier haben wir Einstellungen. Wenn ich hier auf die Dichte klicke, können wir auch den Site-Namen ändern. Ich rufe meine Reisepassreise an. Das ist der Name der Website. Und dann wird der Slogan sein , wenn Reisen auf Abenteuer trifft. Für das Logo wähle ich genau hier das Logo aus. Lasst uns das einfügen. Und dann wähle ich für das Phi of Icon das Bild der IT mit dem grünen Hintergrund aus. füge ich ein. Und los geht's, wir haben unsere Site-Identität. Jetzt können Sie auch hier zur Kopfzeile kommen und verschiedene Änderungen vornehmen, die Sie auswählen können, um das Logo auszublenden, den Slogan anzuzeigen, die Inhaltsbreite zu erhöhen oder die Inhaltsbreite zu reduzieren liegt alles an dir. Da wir jedoch unsere eigenen benutzerdefinierten Header erstellen werden, müssen wir hier überhaupt nichts ändern. Also werde ich jetzt weitermachen und einfach updaten. Und dann überprüfe ich das. Okay, ich gehe zurück zum Backend Exit to Dashboard. Und jetzt erstellen wir unseren Header. Ich komme hier runter zu unseren Eltern. Hier sehen Sie Elemente oder Headon-Lebensmittel sind Baumeister. Dies ist vom Plugin. Ich klicke da rein. Und jetzt klicke ich auf Neu hinzufügen. Und jetzt nennen wir das den Homepage-Header. Dann genau hier, wo Sie eine Art von Vorlage haben. Wir werden den Header wählen, und dann können wir wählen, okay, wo möchten wir diesen Header anzeigen? Da es sich speziell um die Titelseite handelt, werde ich hier unten wählen, dass Sie bestimmte Ziele haben. Ich wähle bestimmte Seiten aus und lade hier einfach nach Hause ein. Und da gehst du. Jetzt wird bei diesem speziellen Header nur auf der Homepage angezeigt. Und dann können Sie für Benutzerrollen genau hier wählen, okay, vielleicht möchten Sie diese Kopfzeile nur anzeigen, um angemeldete Benutzer sind ausgeloggte Benutzer oder Bearbeitungen oder Sie haben viel Flexibilität. Ich werde das einfach leer lassen, weil wir für alle da sein wollten. Jetzt haben Sie diese Option aktiviert Layout für uns Vorlage. Jetzt ist die Sache mit Elementor, dass Sie neben der Standardvorlage und einer von Ihrem Theme bereitgestellten Elemente auch zwei benutzerdefinierte Vorlagen erhalten. Einer wird als elementare Canvas-Daten bezeichnet, volle Breite, einfacher in voller Breite bedeutet, dass Ihre Inhalte bis zu den Rändern Ihres Bildschirms erstrecken können. Also geht im Grunde die volle Breite, dass ich so bin wie keine Ränder Muster sind. Elemental Canada als Implementierungen, dass Sie keine Kopf- oder Fußzeile haben werden. Es ist im Grunde ein leeres Element oder unsere Vorlagen, wir gehen nicht mit einer Canvas-Vorlage. Es ist also wirklich nicht nötig, dieses Layout zu aktivieren, aber ich werde die Elemente der Vorlage voller Breite auswählen . Lass uns jetzt weitermachen und auf „Veröffentlichen“ klicken. Jetzt klicke ich auf Bearbeiten mit Elementor. Was wir hier erreichen wollen, ist das, lassen Sie mich die Demo-Seite zurückbringen. Es wird im Grunde ein Abschnitt mit zwei Spalten sein. Die linke, die linke Spalte, wir haben das Logo, während die Spalte auf der rechten Seite das Hauptmenü hat und wir möchten auch, dass die Spalte auf der hellen mit dem Hauptmenü mehr Breite hat . Also sieh dir das an. Okay, genau hier klicke ich hier auf den Plus-Button. Und jetzt können wir unsere Struktur wählen. Und ich werde diese eine Kluft hier wählen. Diese wird haben, die erste Spalte wird ein Drittel des gesamten Abschnitts haben, während die zweite Spalte zwei Drittel haben wird. Da wir den Abschnitt, wie Sie sehen können, für die Inhaltsbreite bearbeiten , könnten wir tatsächlich die volle Breite erreichen, wenn Sie möchten. Aber ich gehe mit Box und ich wähle 1240 Pixel. Dies ist nur meine persönliche Präferenz. Ich habe Menschen geliebt 1240 Pixel. Jetzt, hier für die allererste Spalte, klicke ich hinein. Ich scrolle den ganzen Weg hier runter. Und wir versuchen das Logo hinzuzufügen. Also füge ich das Website-Logo hinzu. Klicken Sie auf, legen Sie es hinein. Und jetzt haben wir unser Logo. Jetzt können Sie sehen , weil das Logo weißen Text hat und dies ein weißer Hintergrund ist. Aber ertrag es einfach mit mir. Okay, ich entscheide mich. Die Bildgröße hier gehe ich vorerst voll aus. Dann lasst uns fortfahren und auf die Schaltfläche Bearbeiten für diesen Abschnitt klicken. Alles klar, also habe ich da reingeklickt. Ich gehe wieder zum Style. Und dann ist er dorthin gegangen, wo du angefangen hast zu tippen. Ich entscheide mich für Klassiker. Jetzt wähle ich die Farbe Schwarz. Jetzt kannst du das Logo tatsächlich sehen, oder? Okay. Gehen wir nun zur zweiten Spalte. Wir werden unsere Navigationselemente hinzufügen. Schreiben Sie also gegen das Navigationsmenü, klicken Sie auf ziehen, drogen Sie das Innere. Und dann können Sie sehen, dass das Hauptmenü standardmäßig ausgewählt ist. Wenn Sie jedoch eine Reihe von Änderungen vornehmen müssen, beachten Sie genau hier, dass das Hauptmenü verbleibt. Der Text ist in Großbuchstaben, er ist weiß. Es ist auch nach rechts und auch in der Mitte ausgerichtet. Also müssen wir für Verdünner tun. Lasst uns wieder hier rein gehen. Als erstes werde ich beim Bearbeiten des Navigationsmenüs genau hier das Layout klicken. Und jetzt entscheiden wir uns für „Ausrichten“ nach rechts. Wie Sie gerade sehen können, ist es auf der rechten Seite. Jetzt lasst uns zum Stil übergehen. Und wir werden zur Typografie herkommen. Klicken Sie auf die Schaltfläche „Bearbeiten“. Com nicht-haarige Transformation, wählen Sie Großbuchstaben. Okay? Und dann klicken wir für die Textfarbe auf das globale Symbol und wählen dann hauptsächlich für Weiß. Gut. Aber wie richten wir die Menüpunkte in der Mitte vertikal aus? Was Sie hier tun möchten, ist, dass Sie hier auf die Spaltenpotenz bearbeiten klicken , diese spezielle Schaltfläche hier klicken. Und jetzt können Sie sehen, dass wir Vertical Align haben. Wir entscheiden uns für „Middle“. Da gehst du. Das ist es. Aber wir sind noch nicht fertig. Für das Logo. Klicken wir auf die Schaltfläche Bearbeiten für das Website-Logo. Und dann werden wir die Ausrichtung hier nach links gehen. Als könntest du den Unterschied noch nicht wirklich erkennen, aber ertrage einfach mit mir. Wir werden das nach links wählen. Okay, lass uns jetzt weitermachen und Updates. Jetzt schauen wir uns einfach an, was wir haben. Sehen Sie sich die Seite an. Und da gehst du. Jetzt können Sie sehen unsere Homepage genau hier diesen speziellen Header hat, aber dann entwickelt sich weiter, um zu gehen sagen wir als Beispiel die About-Seite. Sie können sehen, dass wir diesen Header überhaupt nicht haben. Wenn es zur Kontaktseite gehen möchte. Als Beispiel können Sie sehen, dass wir diesen Header nicht haben. Genau hier hat die Homepage jetzt dieses spezielle Handout mit dem schwarzen Hintergrund, dem Logo und dann den Menüpunkten. Um das abzurunden, werde ich tatsächlich ein paar Änderungen vornehmen. Gehen wir zurück zur Rubrik. Okay, und ich weiß, dass ich gesagt dass die Inhaltsbreite 1240 Pixel beträgt, aber ich habe einige weitere Tests gemacht, und ich denke, es ist am besten, dass wir mit der vollen Breite gehen. Also lasst uns vorerst mit voller Breite gehen. Dann werden wir diese Spalte, die das Logo trägt, auf 2525% Prozent reduzieren . Während die Spalte, die die manuellen Elemente enthält, 75% haben wird. Nehmen wir dann auch eine Änderung am Logo vor. Ich klicke auf Logo bearbeiten. Lass uns zum Stil gehen. Und dann setzen wir dies für die maximale Breite auf 75%. Und eine Frage, die Sie vielleicht haben, ist warum offensichtlich die maximale Breite und nicht die tatsächliche Breite. Hier ist das Ding. Wenn Sie die Breite für das Logo festlegen, das Logo immer diese Breite. Wir gottlos, von der Bildschirmgröße. Du arbeitest mit Max-Breite. Sie sagen im Grunde genommen: Hey, das Logo sollte diese Breite niemals überschreiten. Dann in Situationen, in denen die Bildschirmgröße nicht groß genug ist, dokumentiert die volle Breite des Logos die Größe der maximalen Breite ist viel besser für reaktionsschnelles Design. Und du willst immer reaktionsschnell sein. Also stellen wir das auf 75 Pixel ein. Und wenn wir jetzt aktualisieren, wenn wir uns unseren Header ansehen, können Sie jetzt sehen, dass ähnelt, was wir hier auf der Demo-Website haben. Das Letzte, was zu tun ist, ist, dass wir diesen Header für den zweiten Header duplizieren werden. Also hat er im Grunde das, was wir tun werden. Okay, ich gehe zurück ins Backend. Anstatt den zweiten Header für den Rest der Website zu erstellen , werden wir einfach hierher kommen und dann sehen Sie EA-Duplikate oder das die wesentlichen Atomduplikate. Ich mache jetzt weiter und dupliziere einfach den Homepage-Header. Jetzt sehen Sie Entwürfe Elementor. Lass uns weitermachen und ich klicke auf Bearbeiten. Und dann schauen wir uns hier ein paar Änderungen an. Wir nennen dies den globalen Header. Sie können ihm einen anderen Namen geben, den Sie wollen, aber ich nenne dies einen globalen Header. Und dann genau hier, pep von Vorlagen, ja, es ist der Header. Dann ist das Display eingeschaltet. Wir werden mit der ganzen Website gehen. Aber um auf der sicheren Seite zu sein, komme ich hierher und sage „Ausschlussregel hinzufügen“. Wir sagen, Hey, zeige das hier unten nicht auf der Homepage an. Er hat eine bestimmte Seite. Ich komme hierher und tippe einfach nach Hause ein, um sicherzustellen, dass dieser Header niemals auf der Homepage angezeigt wird . Es wird nur auf der gesamten Website angezeigt. Und da gehst du. Also Vorlage auch volle Breite. Lass uns jetzt weitermachen und auf „Veröffentlichen“ klicken. Und da gehst du. Um also wieder hier reinzugehen, lasst uns diese Seite aktualisieren. Das ist also der Header für die Homepage. Aber jetzt sieh dir das an. Okay, wenn ich auf eine andere Seite gehen wollte, sagen wir als Beispiel die About-Seite. Jetzt werden Sie sehen, dass der doppelte Header nicht angezeigt wird. Gehen wir auch zur Artikelseite. Sie können noch einmal sehen, dass der doppelte Header nicht angezeigt wird, obwohl wir gesagt haben, dass der doppelte Header auf jeder Seite außer der Homepage angezeigt wird, was genau hier vor sich geht. Und vertrau mir, es hat mehrere Stunden gedauert. Nur China findet genau heraus warum das nicht funktioniert hat, aber ich habe es herausgefunden. Was Sie tun möchten, ist einfach hier zur doppelten Kopfzeile zurückzukehren . Dies ist der doppelte Treffer, der jeder erstellt wurde. Was du tun willst, ist das, okay, versuche einfach zu initiieren, lass uns tatsächlich zurück zum Back-End gehen , damit du nicht verwirrt bist. Alles klar, von hier aus klicke einfach auf Bearbeiten mit Elementor. Bearbeiten Sie mit Elementor. Und was Sie dann tun werden, ist genau hier, initiieren Sie einfach jede Art von Veränderung. Angenommen, Sie fügen die Überschriftenelemente hier hinzu, zum Beispiel, okay, lassen Sie das dort hinein. Siehst du jetzt, dass der Update-Button verfügbar ist? Okay, ich gehe wieder rein und schließe das. Der springende Punkt hier ist, dass Sie eine Art Änderung an der Kopfzeile vornehmen möchten eine Art Änderung an der Kopfzeile vornehmen , damit dieser Update-Button bergab ausgelöst wird. Jetzt können wir updaten. Und jetzt sollte es klappen. Wenn Sie also aufgefordert werden, hier zu meiner Artikelseite zurückzukehren und jetzt zu aktualisieren. Jetzt können Sie sehen, dass der doppelte Header jetzt zeigt, dass ich zurück zur Homepage gehe, genau dieselbe Kopfzeile ist. Ich gehe auf die About Seite. Und natürlich ist es auch genau derselbe Header. Genau das sollten Sie tun , wenn Sie versuchen Ihre Kopf- und Fußzeilen auf den Duplikaten zu duplizieren. Gehen Sie einfach mit Elementor in die Bearbeitung, fügen Sie ein Element hinzu, entfernen Sie dieses Element, nur um den Update-Button auszulösen. Aktualisieren. Und jetzt wird die neue doppelte Kopf - oder Fußzeile jetzt voll wirksam sein. Das war's also für das Video, das wir unsere beiden Header erstellt haben. Danke fürs Zuschauen und wir sehen uns in der nächsten Klasse. 8. Aufbau unseres globalen Footer: Im vorherigen Video haben wir erfolgreich unsere beiden Header erstellt, einen für die Homepage und den anderen für den Rest der Website. Aber jetzt werden wir unseren Global Footer erstellen. Und die gute Nachricht hier ist, dass wir nur eine der Footer erstellen müssen , und genau das versuchen wir zu erstellen. Wir werden dieses Bild hier auf der linken Seite haben und dann ein paar Kontaktinformationen, Social-Media-Symbole. Und dann ist die Seite grundsätzlich hier unten urheberrechtlich geschützt . Lass uns weitermachen und das schnell machen. Ich klicke auf „Neu hinzufügen“. Und wir nennen dies die globale Fußzeile. Wählen Sie die Option hier ist Footer und natürlich angezeigt , da die gesamte Website. Und wir ändern die Vorlage auf volle Breite. Und da sind wir los. Lass uns weitermachen Veröffentlichen. Und jetzt lasst uns mit Elementor bearbeiten. Jetzt möchte ich, dass Sie sehr genau auf einen massiven Unterschied zwischen der Kopf- und Fußzeile und der Kopfzeile achten auf einen massiven Unterschied zwischen der Kopf- und Fußzeile und , die wir hier haben. Wir haben im Grunde nur zwei Spalten. Derjenige auf der linken Seite, der das Logo hält, das auf der rechten Seite mit dem Code, das Hauptmenü. Beachten Sie jedoch für die Fußzeile, dass es ein bisschen anders ist. Ja, wir haben immer noch zwei Spalten, denen eine dieses Bild enthält, die andere enthält die Kontaktinformationen. Aber hier unten ist dieser Copyright-Text tatsächlich eine dritte Spalte. Es ist nicht unter dieser ersten Kolumne hier. Es ist eigentlich eine separate Spalte für sich allein. Um diese Art von mehrspaltigen Abschnitt zu erstellen, verwenden wir ein neues Element, das als E-Mail-Abschnitt in der Umfrage bezeichnet wird. Es ist eigentlich das allererste Element, das Sie haben, dieses hier in einem Abschnitt. Ich klicke auf Drag und lege es dann hinein. Okay, also zuerst das Wichtigste ist, dass ich den allerersten Abschnitt bearbeiten werde. Wenn Sie Probleme haben, auf den Abschnitt der Eltern zu klicken, können Sie Ihren Navigator grundsätzlich immer genau hier verwenden und Sie können genau hier sehen , dass wir diese Abschnittsspalte und dann Kreuzung haben . Also klicke ich jetzt auf den Abschnitt. Wir werden die Inhaltsbreite genau hier auf volle Breite ändern . Und dann Spalten Lücke. Wir werden keine Lücke wählen. Der Grund dafür ist, dass Sie, wenn Sie genau aufpassen, jetzt sehen können, wie Sie das Bild haben, es gibt keinen Platz, es gibt keinerlei Polsterränder. Das Bild befindet sich direkt dort am unteren Rand. Dort wählen wir hier unsere Knotenlücke. Wir wollen überhaupt keine Lücken haben. Dasselbe gilt auch für den inneren Abschnitt. Aber bevor wir da reinspringen, fügen wir eine Hintergrundfarbe hinzu. Ich gehe zum Hintergrundetyp. Und natürlich werden wir uns entscheiden, dass sie schwarz sind. Also werde ich einen schwarzen Hintergrund für die Fußzeile haben. Als nächstes wird jetzt die Ina-Abschnitte sein. Ich klicke hier von der Navigation nach wieder auf den inneren Bereich , wir werden die volle Breite erreichen. Und dann Spalten, Spalten Lücke hier. Wir werden auch keine Lücke sagen. Okay, genial. Lassen Sie uns nun die allererste Spalte hier behandeln, die unser Image haben wird. Also lasse ich das Bildelement dort drin fallen. Wähle dieses Bild gleich hier aus. Und falls Sie sich fragen, dass dies tatsächlich in Peru ist. Es ist ein Ort namens Horeca Kina oder wer ist Cocina. Ich bin mir nicht genau sicher, wie es auf Finanzen basiert, im Grunde wie ein Wüstengebiet. Sie können Soundboard machen und so weiter. Ziemlich toller Ort zum Auschecken. Und ich werde es zum Narren umstellen. Aber dann ist hier der dünner, oder? Wir werden die Spaltenbreiten ändern. Wir machen die erste Kolumne hier drin. Wir werden es tatsächlich ein bisschen breiter machen. Wir werden also bis zu 63 Pixel gehen, eigentlich 63%, also 63% und dann 37% für die zweite Spalte. Aber wir werden das Bild ändern. Das Bild ist viel zu groß. Also lasst uns weitermachen und das Bild bearbeiten. Und dann werden wir hier rüber gehen, um zu stylen und sind hier, ich werde 450 Pixel wählen. Es ist also fast groß genug und breit genug. Okay, das ist das Bild genau dort. Jetzt schließe ich gerade den Navigator. Für die zweite Spalte fügen wir eine Reihe verschiedener Elemente hinzu. Das allererste hier wäre das Überschriftenelement, und dieses wird unsere Kontakte sein. Ich gebe alles in Großbuchstaben ein. Kontakt. Es wird ein H2 sein. Für den Stil der Weisheit. Wir gehen zur Textfarbe und wählen einfach Primär aus. Jetzt wählen wir eine andere Überschrift aus. Schon wieder. Ich werde es direkt unter den Kontakt fallen lassen . Dieser wird ein Telefon sein. Wieder Großbuchstaben an Telefon. Wir werden diesen jedoch ein Alter von drei Jahren machen. Eigentlich machen wir es zu einem H4. Wir werden es zu einem H4 machen und wir werden einige Informationen hinzufügen. Was ich hier machen werde, ist, dass ich einfach mit der rechten Maustaste klicken und dann einfach dupliziere. Und jetzt machen wir das ein Alter von fünf Jahren. Die tatsächliche Telefonnummer wird eine h5 sein. Ändern wir also die Zahl hier auf 090 Leerzeichen 645, Raum 3417. Das wird die Telefonnummer sein. Und ich gehe zurück zu Style und Topografie. Lasst uns tatsächlich Texte wählen. Ich bevorzuge dieses Textmuster, also wählen wir dieses aus. Dann duplizieren wir auch das Telefon. Ziehen Sie es wieder unter der Telefonnummer hierher . Wir werden auch die Telefonnummer selbst duplizieren . Okay, und ziehen Sie dann das NIF-Telefon an. Nun, ups, tut mir leid, das ist den ganzen Weg da oben gegangen. Bringen wir es wieder hier runter. Okay, jetzt bearbeiten wir das Telefon, das zweite Telefon genau hier. Wir ändern das in E-Mail. So läuft man im Grunde klug. Duplizieren Sie einfach, wann immer Sie können, und nehmen Sie einfach die notwendigen Änderungen vor. Jetzt bearbeiten wir die Telefonnummer. Wir werden die E-Mail ändern. Meine E-Mail ist Alex. Pass-Ports werden sieht nicht richtig aus. Alex bei Passport travel.com. Okay. Jep. Das ist richtig. Und nicht zuletzt haben wir eine Adresse. Lassen Sie uns auch die E-Mail duplizieren noch einmal hinzufügen. Lasst uns ziehen, lassen Sie das hier rein. Ändern Sie auch die E-Mail. IP-Adresse. Für die eigentliche Adresse verwenden wir einen Texteditor im Gegensatz zu einem ausgeblendeten, da es mehrere Textzeilen geben wird, die den Texteditor direkt dort löschen werden . Ich habe hier eine sehr interessierte Adresse. Ich weiß nicht, ob das eigentlich eine echte Adresse ist . Ich weiß es nicht mehr. Aber es passt in R2, Emile Zola. Jetzt drücke ich die Umschalttaste, nicht nur gegen die Eingabetaste, denn wenn Sie die Eingabetaste drücken, verwenden Sie , die Umschalttaste und geben Sie dann die Eingabetaste ein. Sie haben also einen einzigen Zeilenabstand. Und jetzt tippe ich noch einmal 609002, Leon, Shift Enter ein. Und dann tippen wir ganz in Frankreich und wir werden zur Style-Typografie übergehen. Wir werden mit SMS gehen. Und natürlich wird die Textfarbe primär sein. Und da gehst du. Und zu guter Letzt werden wir unsere Social-Media-Icons haben. Sehr, sehr, sehr wichtig. Die sozialen Medien werden hier unten im General sein. Lassen Sie uns ein Social Media hinzufügen. Und natürlich werden wir für Facebook die Farbe von effizientem Code zu Custom ändern . Die Grundfarbe hier wäre Weiß, die Sekundärfarbe wäre schwarz. Grundsätzlich haben Sie den weißen Hintergrund und dann wird das eigentliche Symbol selbst schwarz sein. Wenn dies eine echte Website ist, die Sie erstellen, würden Sie hier den Link zu Ihrer Facebook-Seite hinzufügen . Das ist für Facebook. Lassen Sie uns genau das Gleiche auch für Twitter tun. Warum wird es die Parameterfarbe Schwarz als Sekundärfarbe sein. Das letzte Banale ist YouTube oder Fuchsia Color Kostüm. Die Primärfarbe ist weiß, sekundäre Doppelpunkt ist schwarz. Und dann die Form hier, wir werden ihre Form ändern, um Kreis, rechts, und dann Ausrichtung, ich werde sie tatsächlich links ausrichten. Wir sind fast da. Beachten Sie dann jedoch, dass es einen gewissen Abstand gibt, die tatsächlichen Kontaktinformationen und dann das Bild. Was Sie hier tun werden ist, dass wir direkt hier zu der Spalte gehen , die all diese Kontaktinformationen enthält, klicken Sie dort hinein. Gehen Sie zuerst über, Vertikal ausrichten, lassen Sie uns zur Mitte ausrichten. Dann geh zu Fortgeschritten und dann hast du schließlich Padding. Ich werde diese Werte miteinander aufheben , weil die Sache dabei standardmäßig ist, egal welchen Wert Sie Ihrem Padding hinzufügen, oben, rechts, unten oder links. Es wird einen Kurs der restlichen drei Seiten duplizieren. Wir wollen das also nicht, wir möchten nur eine Padding auf einer Seite hinzufügen. Also klicke ich hier auf diese Schaltfläche, um die Verknüpfung der Werte aufzuheben, für den Fall, dass Sie es nicht wissen, Pattern ist im Grunde eine Möglichkeit, Platz zwischen Ihrem Inhalt und seiner Grenze zu schaffen . Sie sehen können, fügen wir links eine Polsterung Wie Sie sehen können, fügen wir links eine Polsterung hinzu und sehen schon viel besser aus. Und ich gehe bis zu 40 Pixel. Wir sind fast da. Einer von ihnen, den wir gerade hinzufügen werden, werden die Copyright-Texte sein. Also scrolle ich den ganzen Weg hier runter. Genau hier unter deiner elementaren Kopf- und Fußzeile siehst du Copyright-Texte. Klicken Sie auf Ziehen. Und ich werde sehr, sehr vorsichtig sein. Wir lassen es nicht in der ersten Spalte fallen , die das Bild enthält. Wir lassen es in eine separate Klinik fallen, die als blaue Linie betrachtet wird , was das bedeutet, okay. Dies wird eine separate Spalte sein. Beachten Sie jetzt , dass sich die BlueLine nur unter dem Bild unter der Spalte befindet, die das Bild enthält. Aber wenn ich meine Maus jetzt nur ein bisschen weiter nach unten sieht man die blaue Linie, die sich über beide Spalten erstreckt. Jetzt werde ich den Copyright-Text dort ablegen. Und da ist es. Die Textfarbe hier drin wird offensichtlich primäre Typografie sein. Wir werden mit Text gehen, der an der Mitte ausgerichtet ist. Und wir werden tatsächlich zur Typografie übergehen , ein Gewinn. Und lassen Sie uns das nur ein bisschen kleiner machen als sonst. Ich denke, 16 Pixel sind ungefähr richtig. Aber wir möchten auch etwas Polsterung hinzufügen. Lasst uns also zu Fortgeschritten gehen. Auch hier werden wir die Verknüpfung der Werte aufheben. Wir werden auch für die unteren zehn Pixel eine Polsterung von 20 Pixeln für die obersten zehn Pixel hinzufügen . Wir haben ziemlich viel getan. Lass uns jetzt weitermachen und Updates. Mal sehen, wie es aussieht. Also gehe ich hier rüber und aktualisiere die Seite. Und da gehst du. Das ist unsere Fußzeile genau dort. Jetzt weiß ich, dass Sie hier unten Leerzeichen sehen können, aber das liegt einfach daran, dass wir noch keinen Inhalt auf der Homepage haben . Deshalb hast du diesen Leerraum. Ich habe der About-Seite bereits einige Inhalte hinzugefügt. So sieht es eher so aus, wie es jetzt aussehen wird. Sie können sehen, dass kein Leerzeichen mehr auf einem int vorhanden ist , da wir tatsächlich etwas Inhalt auf der Seite haben, aber da ist er. Wir haben jetzt unsere Fußzeile mit dem Bild aus Peru, urheberrechtlichen Texten sowie einigen Kontaktinformationen gut ausgebaut . Danke fürs Zuschauen, und natürlich sehen wir uns in der nächsten Klasse. 9. Hinzufügen des Homepage Banner: Jetzt, da wir die Kopf- und Fußzeilen erstellt haben, ist es jetzt an der Zeit, unsere Homepage zu erstellen. Und der allererste Abschnitt, den wir bauen werden, wird das Banner sein, das Sie sehen können . Wir haben das Hintergrundbild mit den tropischen Bäumen, Palmen und dem Strand. Und dann natürlich die Texte, wir reisen mit Abenteuer und dann der Button, auf dem unser Buch steht, jetzt deine Reise. Natürlich hätten Sie auch bemerkt, dass der Hintergrund grundsätzlich in den Header einfügt. Wie machen wir das? Nun, wir werden fortfahren und die Homepage bearbeiten. Ich sage Edit with Elementor. Genau hier. Sie können feststellen, dass wir im Grunde zwei Spalten haben, eine oben, die enthält, wo gereist ist ist, bedeutet Abenteuer. Und dann haben wir eine weitere Spalte die das Button-Buch enthält, Ihre Reise. Was ich hier einfach machen werde, ist das. Wir haben hier einen Überschriftentext, aber falls Sie nichts sehen, ziehen Sie einfach das Überschriftenelement und legen Sie es in Ihr Feld hier ab. Und ich werde einfach sagen, wo wir reisen trifft auf Abenteuer. Das ist der wichtigste Slogan für die All Website. Und ich mache das eins zu eins. Aber wir werden einige Änderungen an der eigentlichen Topographie selbst vornehmen. Also lasst uns zum Stil gehen. Und für die Typografie hier drin werde ich die Transformation in Großbuchstaben umwandeln. Und wir werden auch das Gewicht 900 machen , nur um es sehr, sehr dick zu machen. Und dann wird der Stil es auch kursiv machen. Das war's vorerst für den Text. Lassen Sie uns jetzt weitermachen und das Hintergrundbild für diesen Abschnitt hinzufügen . Also klicke ich hier auf den Button „ Abschnitt bearbeiten“. Die Inhaltsbreite, wir behalten dieses eine Feld bei, aber dann machen wir die Breite hier 1240 Pixel. Und unsere Checkliste befürwortet die Höhe, wir werden sie auf eine Mindesthöhe von tausend Pixeln einstellen , weil wir wirklich so viel von diesem Hintergrundbild wie möglich zeigen wollten . Also lass mich das 1 Tausend machen. Und jetzt gehen wir zum Stil, Hintergrundtyp Klassiker. Und ich wähle das Bild aus. Und es wird so sein, ich entschuldige mich. Eigentlich haben Sie vorerst zwei separate hier drin. Ich werde die Frau löschen, die benutzt wird, wir werden die große Version verwenden. Dieser ist nur 859 Pixel hoch, aber dieser ist 1274. Also werden wir von diesem Gebrauch machen. Also füge ich das ein. Und da gehst du. Lassen Sie mich Ihnen nun einige Tricks zur Positionierung Ihres Hintergrundbildes zeigen . Sie haben verschiedene Arten von Positionen in Mitte, Mitte, Mitte links, Mitte, rechts und so weiter. Es liegt also wirklich an Ihnen, die idealen Positionswinkel für Ihr Hintergrundbild zu wählen . Meiner hier, den ich gewählt habe , wird unten in der Mitte sein. Hier sieht man tatsächlich die Palmen, den Strand. Es ist also bekannt, dass die beste Position ist. Und dann haben Sie für die Größe mehrere Möglichkeiten hier drin ich gehe mit Cava. Der Unterschied zwischen Kovach und enthalten ist die einschließbare Darstellung des gesamten Bildes. Inhalt ist nicht immer die beste Option , denn wenn Sie das gesamte Bild anzeigen das Bild nicht groß genug für den gesamten Bildschirm ist, wird es wiederholt studiert. Sie können hier im Hintergrund sehen, dass sich das Bild irgendwie wieder wiederholt. Aber mit COVID sagen Sie im Grunde genommen: Hey, versuchen Sie sicherzustellen, dass das Bild den gesamten Bildschirm abdeckt. Deshalb habe ich mich entschieden, hier behandelt zu werden, aber auch ein Hintergrund-Overlay hinzuzufügen. Also sieh dir das noch einmal an. Ich gehe wieder auf Overlay. Ich klicke da rein. Ich will, ich werde es tun, dass ich wie gewohnt zum Hintergrundtyp gehe , wir wählen ein schwarzes Overlay. Und dann ist die Deckkraft hier drin, ich bin tatsächlich mit der 0.23 gegangen. Natürlich kannst du das ändern wenn du Zope und 23 nicht benutzen willst . Aber jetzt gehen wir zurück zu den eigentlichen Texten. Lass uns wieder hier rein gehen. Und natürlich, die Textfarbe, werden wir diese weiß machen. Und da ist es, okay. Wir werden auch die Größe ändern. Also gehe ich bis zu 120 Pixeln. Und wieder ist dies ein völlig subjektives. Du kannst deine etwas größer machen, ein bisschen kleiner. Aber wir werden auch die Ausrichtung ändern. Gehen wir zum Inhalt. Wir werden es an der Mitte ausrichten. Und da ist es, wir reisen uns letztendlich treffen. Und was wir jetzt tun werden, wäre , unseren Button hinzuzufügen. Ich ziehe den Button genau hier, Element und ich springe ihn direkt unter die Überschrift. Natürlich sagen wir genau hier, buchen Sie Ihre Reise. Jetzt. Natürlich würden Sie hier den Link zu einer Seite oder einer XNOR-Website wie einem Golden oder Booking.com hinzufügen den Link zu einer Seite oder einer . Wenn ich sieben wäre, mach das und wir könnten einfach „ book kin dot com“ sagen . Lass uns das einfach machen. Wir können .com nur zum Spaß daran haben. Und natürlich richten wir es an der Mitte aus. Die Größe hier wird mittel sein. Fügen wir auch ein Icon hinzu. Okay, also wähle ich die Icon-Bibliothek hier aus. Lass uns nach einem Flugzeug suchen. Ich werde viel wählen, meinen Bäreneinsatz. Sie haben die Möglichkeit, die Symbolposition nach oder vor dem Text auf zu ändern . Das wollen wir schon mal weitermachen. Und dann der Icon-Abstand. Sie können auch einen Abstand zwischen dem Symbol und dem Bild hinzufügen . Also werde ich mit Hilfe gehen , nur um es ein wenig Abstand zu geben. Jetzt werden wir zum Stil übergehen. Hier werden wir einige wichtige Änderungen vornehmen. Die erste, die wir hier machen werden, wäre die Topographie, die Gewichte der Texte. Es wird 600 geben und dann in Großbuchstaben umwandeln. Da dies ein Link ist, würden Sie feststellen, dass es die unterstreichende Idee gibt, aber das wollen wir nicht. Also gehe ich zu Style, ich gehe, ich gehe zur Deklaration und wähle dann keine aus. Wir wollen keinen der Texte in einem der zugrunde liegenden Texte da drin. Alles klar, Typografie, Farbe, Text, Farbe genau hier. Wir werden mit dem Weißen gehen. In Ordnung? Dann haben Sie für den Button selbst hier den Hintergrundtyp und klicken wir dort hinein. Und wir werden mit klassischer Farbe hier gehen , wäre Orange. Jetzt setzen wir sowohl eine Grenze als auch eine solide. Was wir dann für die Grenze tun werden , ist, dass wir auch die Randfarbe in die orange Farbe ändern werden . Und dann fügen wir einen Randradius nur um die Kreise zu machen, die Kanten nur ein bisschen kreisförmig. Wir werden mit zehn gehen, tut mir leid, wir werden hier mit 12 Pixeln fahren. Und das war's. Ich werde jetzt weitermachen und Updates. Und mal sehen, wie es aussieht. Gehen wir zum Dashboard. Klicken wir hier rein, gehen zur Homepage und da ist es. also letztendlich gereist haben wir natürlich den Button hier, der auf unser booking.com verlinken würde. Aber wie erreichen wir das dann? Wo man den Hintergrund hat, der sich grundsätzlich in das Head Up Deutschland einfügt. Ganz nächstes Video, in dem ich dir zeigen werde, wie das geht. 10. Mischen des Kopfzeigers und des Homepage Banner: Wie mischen wir jetzt das Homepage-Banner in unseren Header ein? Nun, genau wie das, was wir hier haben, was wir hier machen werden, ist das wieder, wir werden wieder hier reingehen und die Homepage Hadar bearbeiten. Zunächst einmal werde ich einfach den schwarzen Hintergrund entfernen, den wir nicht mehr brauchten. Also gehe ich zum Stil und klicke dann einfach erneut auf den klassischen Button um ihn im Grunde wieder auf den Standardhintergrund zurückzusetzen , der im Grunde nur die weiße Farbe ist. Ich werde das Update machen. Alles klar, schauen wir uns die Seite an. Gehen wir zurück zum Homepage-Profil. Alles klar, jetzt werde ich jetzt die eigentliche Homepage selbst bearbeiten. Also klicke ich auf Bearbeiten mit Elementor, dem allerersten Link dort oben. Lassen Sie mich Ihnen nun die Stärke negativer Ränder zeigen , um diesen Abschnitt mit dem Banner zu bearbeiten. Kommen Sie hierher zu Advanced, heben Sie die Verknüpfung der Werte für die Ränder auf. Und jetzt gehe ich einfach bis zu negativen 222 Pixeln. Und da gehst du. Genau so konnten wir den Header mit unserem Homepage-Banner verbinden . Lass mich updaten. Sehen wir uns die Seite an, nur um sicherzustellen, dass sie da ist. Das ist unser brandneues Homepage-Banner und Heather, einfach so. Das ist also im Grunde die Macht , negative Margen hinzuzufügen. Lassen Sie mich jedoch darauf hinweisen, dass dies nur in Ihrer Desktop-Ansicht gut funktioniert. Die Sache ist, wenn ich zur reaktionsschnellen Ansicht gehen würde, werden Sie sehen, dass sich negative Margen zeigen werden. Und es ist ziemlich hässlich. Hier unten, wo Sie den Responsive-Modus haben. Wenn ich dieses auf Tablet umstelle, ist es immer noch oder ki , obwohl Sie jetzt sehen können, dass das Menü, das Hamburger-Symbol hier nicht nach Noten sucht. Aber wenn man dann aufs Handy geht, wird es wirklich, richtig schlecht. Du siehst jetzt, dass du es nicht tust. Das Logo ist grundsätzlich mit dem Text-to-Speech-Reisen trifft Abenteuer. Und du kannst bauen sogar sehen, dass die Bescheidenen viele Seele bekommen hat. Wir müssen offensichtlich mehrere Änderungen für das Responsive Design vornehmen . Es wird für später geben, aber im Moment bewirbt sich Dexter. Das sieht ziemlich gut aus. Also Deutschland, das nächste Video, in dem ich dir ein alternatives Homepage-Banner zeige . 11. Alternativer Video-Hintergrund: Es heißt Prämisse, ich möchte Ihnen zeigen ein alternatives Homepage-Banner nicht gerade ein Banner ist, es ist eher ein Video. Sie haben also einen Videohintergrund im Gegensatz zum traditionellen Hintergrundbild. Es ist also ganz einfach. Dies ist das Video, das ich dem Hintergrund hinzufügen möchte . Es ist ein für mich selbst gemachter Zwang, im Grunde genommen Selbstzwang, meine Reisen um die Wand. Also werde ich weitermachen und einfach diesen Link hier schnappen. Und wir werden diesen Abschnitt bearbeiten. Aufgrund der negativen Ränder können Sie die Schaltfläche „Abschnitt bearbeiten“ möglicherweise hier oben nicht sehen . Oder was Sie tun möchten, ist einfach den Navigator zu benutzen. Okay, also komm hier runter, klicke auf navigieren, um auf den Abschnitt zu klicken, und jetzt kannst du den Abschnitt bearbeiten. Also nochmal, der navigiert alle unsere Schaltfläche ist sehr, sehr nützlich. Wir werden jetzt eher zum Layoutstil gehen. Und dann hast du genau hier Hintergrund. Wir werden mit dem Video gehen. Du klickst auf Video und bist hier drin. Ich füge den Link zum YouTube-Video ein. Sie können den Link aber auch von Vimeo aus einfügen. Und dann können Sie die Startzeit, die Endzeit auswählen. Sie können wählen, ob Sie einmalig spielen oder mobil im Datenschutzmodus aktiviert sind. Wenn Sie mit dem Hintergrundvideo arbeiten, würde ich dringend empfehlen, dass Sie sich für einen Rückfall im Hintergrund entscheiden. Für den Rückfall des Hintergrunds verwende ich einfach das gleiche Bild. Der Grund ist, dass es ein Video ist, manchmal wird es nicht abgespielt und weil es von YouTube stammt, vielleicht YouTube als Problem oder aus dem einen oder anderen Grund, das Video nicht abgespielt. Elementar würde den Hintergrund als Fallback-Optionen verwenden. Ich fahre jetzt weiter und aktualisiere es. Werfen wir einen Blick auf unsere Seite. Sie hierher kommen, aktualisieren Sie die Seite. Und da gehst du. Jetzt können Sie sehen, dass wir das Hintergrundvideo haben. Jetzt spiel ein Ende. Natürlich werde ich nicht leugnen, dass die Videos nicht leistungsfähiger sind als ein Bild. Offensichtlich sind Videos viel interessanter. Aber bitte beachten Sie, dass Videos bestimmte Nachteile haben, okay, es kann Ihre Website verlangsamen. Wenn Sie also ein Video verwenden, versuchen Sie bitte sicherzustellen, dass das Video nicht so lang ist, maximal zehn Sekunden, denn je länger das Video ist, der Längengrad geladen wird der Längengrad geladen und das verlangsamt sich runter auf deiner Website. Also mach die Videos bitte sehr, sehr, sehr kurz. Stellen Sie sicher, dass Sie ein Hintergrundbild als Rückfall-klug hinzufügen ein Hintergrundbild als Rückfall-klug falls das Video nicht geladen wird. Aber das ist die Alternative für Ihre Homepage. Aber ich danke dir fürs Zuschauen und natürlich sehe ich dich in der nächsten Klasse. 12. Aufbau der Homepage Teil 1: Willkommen zurück. Lassen Sie uns mit dem Aufbau der Homepage fortfahren. Und wie Sie sehen können, bin ich wieder auf das traditionelle Hintergrundbild gewechselt . Aber wie gesagt, wenn du das Video benutzen willst , ist das in Ordnung. Der nächste Abschnitt, den wir erstellen werden der Abschnitt mit zwei Spalten, der links einige Texte enthält, ein Bild auf der rechten Seite. Und dann ist der dritte Abschnitt hier sehr, sehr ähnlich. Es sind nur die Spalten umgekehrt. Im dritten Abschnitt haben wir das Bild auf der linken Seite und dann den Text rechts. Wie genau werden wir das erreichen? Das ist sehr, sehr, sehr einfach. Wir gehen auf eine Homepage. Lasst uns bearbeiten. Und Sie können jetzt sehen, dass es im Grunde zwei Spalten sind, 5050. So einfach werden wir hierher kommen einen neuen Abschnitt mit zwei Spalten erstellen, 5050. Ich bearbeite den Abschnitt und stelle sicher, dass er in voller Breite ist. Und dann werden die Spalten GAAP keine Lücke sagen. Alles klar, also der erste Abschnitt hier drin wird ein paar Texte enthalten. Lassen Sie mich den Texteditor hier einzeichnen. Lambda kopiert den Lorem Ipsum Dummy-Text den ich hier habe. Lass mich einfach weitermachen und das einfügen. Und dann haben wir auch den Header. Lassen Sie mich das fallen, indem ich mich traue. Es ist ein H2. Hier. Ich habe eigentlich keinen tatsächlichen Header erstellt , keinen echten Titel. Also lass mich einfach eintippen. Wir würden gerne reisen. Einfach irgendwas. Das war's. Und dann fügen wir für die zweite Spalte hier das Bild hinzu und ich füge dieses Bild hinzu, das ich in Istanbul aufgenommen habe. Dies war eine Gruppe unserer College-Studenten. Ich bin herumgelaufen und sagte: Hey, möchtest du, dass ich ein Foto von dieser Idee mache? Also habe ich das Foto gemacht. Stellen Sie also sicher, dass Sie dieses Bild zum Narren setzen. Denn auch hier möchten wir, dass das Bild die volle Breite und Höhe seiner Spalte belegt . Aber dann müssen wir auch den Button Mehr erfahren hinzufügen. Was ich natürlich machen werde, ist, hier wieder rein zu gehen, den Button zu ziehen, ihn hier reinzulegen. Und dann sage ich lerne, lerne mehr. Dann kann dieser Link vielleicht zur About-Seite gehen. Also sage ich einfach Vorwärtsschrägstrich über. Und da ist es. Ich werde mich an der Mitte ausrichten. Nehmen wir ein paar Änderungen vor. Typografie im Stil. Ich sage „ Transformation in Großbuchstaben“. Die Erklärung über nicht innerhalb was für eine Integration. Und dann die Textfarbe. Ich schalte das auf Schwarz um. Nun, für den eigentlichen Button selbst wird eine Hintergrundfarbe von Weiß verwendet. Hintergrundeingabe wird hier Farbe Weiß sein. Aber dann setzen wir einen festen Rand , damit wir den Knopf tatsächlich sehen können. Und wenn du willst, könntest du auch ein paar Grenzvideos hinzufügen. Aber das werde ich nicht machen. Eine letzte Sache, die zu tun ist , wäre , unseren Inhalt in der Mitte auszurichten. Also klicke ich auf die Schaltfläche Spalte bearbeiten, Kommentare, Vertikal ausrichten, setzt Mitte. Und dann ist noch eine Sache, die wir tun, um links und rechts etwas Platz zu haben , dagegen ist der Text nicht genau am Rand der Spalte, also müssen wir etwas Abstand hinzufügen. Also gehe ich wieder hier rein. Was wir tun werden, ist sehr, sehr einfach, dass wir für dieselbe Kolumne weiterentwickelt werden. Genau hier. Wir werden die Verknüpfung der Werte für das Muster aufheben. Und dann gebe ich links 50 Pixel mal 50 Pixel. Und da ist es. Wir haben unseren zweiten Abschnitt sehr einfach aufgebaut, da der dritte Abschnitt im Design sehr, sehr ähnlich ist im Design sehr, sehr ähnlich Wir können einfach mit der rechten Maustaste auf das Editierabschnitt-Protein klicken und dann duplizieren. Und jetzt ziehe ich diese erste Spalte hier rein, ziehe sie ganz hierher, ziehe sie ganz hierher, wechsle die Spalten. Und jetzt ganz einfach, lasst uns dieses Bild bearbeiten. Ich werde mich für dieses entscheiden , das ich in Argentinien aufgenommen habe. Halterung passt in L, Farbe fettig. Und dann habe ich natürlich für die Texte hier drin alles hinzugefügt, was an die besten Orte als Header gereist ist ist, okay, also lass mich einfach den Header hier wechseln und sagen , zu den besten Orten zu reisen. Da gehst du. Alles klar, lass uns jetzt Updates machen. Sagen wir, wie die Seite aussieht. Komm schon, lass uns gehen. Ertrage es mit mir. Leider sind dies die beruflichen Gefahren eines Lehrers, eines Lehrers. Manchmal fängt Ihr Vorfall an zu vermasseln und schließlich wird er aktualisiert. Okay, danke. Jetzt sehen wir uns die Seite an. Scrollen wir nach unten und da ist es. Okay, eine Sache noch. Genau als Bonus könnten wir einige Animationen hinzufügen , damit die Bilder diese Folie von links und rechts mögen . Was wir also tun können, ist einfach zurückzugehen und diese Allegorie für das erste Bild zu überprüfen, das mit den Schülern hier drin, ich werde das Bild bearbeiten. Gehe zu Advanced Lighter, du hast Bewegungseffekte. Ich sage „ Eintrittsanimation“. Lasst uns von den Lichtern reinrutschen. Okay, also leicht von rechts rein, also von rechts schneiden. Und dann war für dieses Bild einfach das entgegengesetzte Einschieben von links. Bewegungseffekte. Verlangsamt, informiert oder geliebt. Okay, das war irgendwie komisch. Ich bin mir nicht sicher, was genau sie gemacht haben. Lass mich das einfach nochmal machen. Okay. Aus irgendeinem Grund wird das Bildfenster zur zweiten Spalte übergehen. Ich weiß nicht warum das passiert ist, aber in Ordnung, ich werde einfach weitermachen und updaten. Da sind wir los. Sehen wir uns die Seite an. Scrollen wir nach unten. Es macht Gleiten von links, irregeführt und erfreut, und da ist es. Und einfach so beginnt unsere Homepage in Kraft zu treten. Begleiten Sie mich also im nächsten Video, in dem wir uns jetzt ansehen werden, wie wir den nächsten Abschnitt aufbauen werden, der das einzigartige Reise-Design wäre. 13. Aufbau der Homepage Teil 2: Alles klar, also machen wir weiter. Und der nächste Abschnitt wird der einzigartige Bereich für das bereiste Design sein , der ein bisschen knifflig aussehen wird, aber es ist nicht so schwieriger. Wir haben im Grunde einen sehr großen Abschnitt mit mehreren Spalten. In einer Spalte wird die Kopfzeile enthalten. Einzigartiges allgemeines Design und wir werden das Trennelement haben einige Texte und dann haben wir ein inneres Abschnittselement mit drei Spalten mit drei verschiedenen Überschriften, Diagramme und einige Texte. Also lasst uns fortfahren und die Homepage noch einmal bearbeiten. Und ich scrolle den ganzen Weg hier runter. Und der erste Knoten ist einfach nur den Header hierher zu ziehen. Und ich werde die Bearbeitung hinzufügen, die alle einzigartigen, einzigartigen Reisedesigner sagt . Natürlich werde ich diesen auf das Decenter ausrichten. Da wir jetzt Inhalte in unserer Rubrik haben, werde ich diesen Abschnitt bearbeiten. Wir werden die Breite auf 1240 Pixel einstellen. Dann style, wir fügen eine Hintergrundfarbe von FATF Acht hinzu. Es ist also diese Art von gräulich-weißer Farbe. Ich weiß wirklich nicht die genaue Farbe, wie sie heißt. Aber der Punkt hier ist, dass wir versuchen, den Abschnitt direkt darüber von dem neuen Abschnitt zu unterscheiden den Abschnitt direkt darüber , den wir erstellen. Eine der besten Möglichkeiten, Abschnitte zu unterscheiden und zu unterscheiden, besteht darin unterschiedlich farbige Hintergründe hinzuzufügen. Also denke ich, Trüffeldesign, ich werde auch wieder vorankommen. Füge etwas Polsterung hinzu. Also 50 Pixel oben, 50 Pixel unten auch. Und da ist es. Das nächste Element werden die Trennelemente , die direkt unter unserem einzigartigen Reise-Design liegen. Schauen Sie in das Zentrum von Atlanta und dann wäre die Breite hier ungefähr, lass uns mit 50% gehen. Vielleicht ist das ein bisschen zu viel. Wie wär's mit 40%? Ordnung, also für den Prozentsatz, als nächstes werden die Texte hier drin sein, Schlösser, bei denen es nicht darum geht, dass die Sterne diese Texte tatsächlich von einer Website gestohlen haben. Ich weiß nicht mehr, aber ich habe mir diesen Text nicht ausgedacht. Okay. Ich bin auch nicht, ich bin nicht so klug, also lasse ich den Texteditor alle direkt unter den Teiler fallen und fügen diesen Text genau dort ein. Und natürlich werden wir es an der Mitte ausrichten dann sind wir zuletzt aber nicht zuletzt, wir haben unseren Abschnitt mit drei Spalten hier drin. Also werden wir die Ina, Sektion benutzen. Wir werden wieder schlau laufen. Grundsätzlich hat jede Spalte genau das gleiche Design. Sie haben ein Diagramm, Sie haben einen Header und dann haben Sie ein paar Texte. Also machen wir es einfach, wir entwerfen hier das allererste Jabbar-Bild der Spalte. Und es ist das Bild mit dem Weltflugzeug kann Täter genau hier, diese Medien einsetzen, es in voller Größe machen. Dann fügen wir einen Header hinzu. Bewegen Sie einfach das Bild. Wir werden das zu einem h3 machen. Ich habe hier etwas Text und es heißt, dieser muss vorgestellt werden. Destinationen, die die Überschrift zukünftiger Destinationen sein werden . Nehmen wir eine Änderung vor. Okay, ich werde mich an die Mitte richten, aber dann werden wir für den Stil die Typografie von Großbuchstaben zu normalem Licht ändern . Und nicht zuletzt haben wir das Textbearbeitungstool. Ziehen wir das da rein. Lassen Sie mich also einfach diesen Text hier schnappen. Ähnlich ihnen Ipsum Dummy-Text. Ich mache weiter und füge das ein. Ich denke, es sind eigentlich genau dieselben Texte, anders, albern ich. Okay. Nun, sein Stil, der auf die Mitte ausgerichtet war. Da ist es. Was jetzt einfach getan werden muss, ist, hierher zu kommen, mit der rechten Maustaste auf die Schaltfläche Spalte bearbeiten und einfach zu duplizieren und dann noch einmal zu duplizieren. Und dann kommen wir hier rein und löschen die vierte Spalte. Das ist es. Also das wird jetzt hier reinkommen, dieses Bild in das Einkaufszentrum mit der Karte ändern. Und ich habe die Texte hier drin, auf denen Reiseführer steht. Neben der Möglichkeit, ihren Kunden bestimmte Ziele zur Verfügung zu stellen, sondern auch Angebote für Reiseleiter sind auch Reiseleiter. Und dann das letzte hier drin, werde ich das Bild auf das mit den Flugtickets umstellen . Ich habe den Header hier , der „erschwinglich“ steht. Weiterer bool. Um es zu kriegen ist es. Da gehst du. Also werde ich jetzt weitermachen und das einfach aktualisieren. Und lasst uns die Seite ansehen. Und voila ionisches Reise-Design. Da gehst du. Hoffentlich hat Ihnen diese spezielle Lektion, Jimmy, in der nächsten gefallen , in der wir unsere Homepage weiter ausbauen werden. Wir sehen uns dann. 14. Hinzufügen der Homepage Gallery: Lass uns jetzt weitermachen und die Galerie zu unserer Homepage hinzufügen. Jetzt weiß ich, dass Sie auf einer Demo-Site hier sehen können, dass ich einen Dienstabschnitt erstellt habe, aber plötzlich nicht dasselbe mache weil es tatsächlich sehr, sehr einfach ist und ich nicht möchte verschwende zu viel Zeit dir immer und immer wieder dasselbe beizubringen. Wenn Sie diese Art von Abschnitt erstellen möchten, haben Sie grundsätzlich diese Art von Abschnitt erstellen möchten, Ihren weißen Hintergrund und Sie haben drei Spalten. Die erste Spalte hier wäre alles Überschrift oder Dienste. Sie haben die nächste Spalte, die das innere Abschnittelement für die drei Spalten verwendet . Und dann können Sie einfach denselben Abschnitt für die Geldspalten hier unten wiederholen . Jetzt hat das Element, das ich benutzt habe, das das Bild genau hier, die Überschrift, es ist die Infobox. Sie finden es in den wichtigen Add-Ons der Vereinten Nationen. Es ist also genau hier auf den Social Add-Ons, die Sie in voller Box sehen werden. Und es ist die einzige Sorte, also ziehen Sie sie einfach hinein. Und jetzt kannst du hier dein Bild auswählen. Sie fügen das Gezeiten-Tool, den Inhalt dort und so weiter hinzu. Sie können sich dies also als Aufgabe vorstellen wenn Sie eine ähnliche Struktur aufbauen möchten. Aber ich mache jetzt weiter und erstelle stattdessen unsere Galerie. Für die Galerie ist es eigentlich keine Galerie, sondern eher ein Bildkarussell. Also gehe ich gleich hier zu General. Und dann siehst du, wir haben das Bildkarussell genau hier. Klicken Sie auf Drag, legen Sie es hinein. Und ich entscheide mich für Bilder. Und dann habe ich sechs Bilder, die ich ausgewählt habe. Lassen Sie mich hier einen kurzen Blick auf meinen anderen Bildschirm werfen. Ich habe dieses Bild, dieses Bild, dieses Bild auch hier drin, dieses ist vier. Ich habe auch dieses von Cengage und dieses von Verbit lot J oder K. Lassen Sie mich jetzt weitermachen und eine Galerie erstellen. Der Trick hier ist, dass alle diese Bilder genau die gleiche Höhe von 800 Pixeln haben , wie Sie sehen können, und auch die Breite von 1200 Pixeln. Wenn Sie also Bilder zu Ihrer Galerie oder Ihrem Karussell hinzufügen , sollten Sie sicherstellen, dass sie in Bezug auf die Abmessungen so nah wie möglich sind . Sie mussten nicht genau sein, aber sie sollten sich nicht um mehr unterscheiden als, sagen wir fünf oder zehn Pixel, geben oder nehmen. Versuchen Sie also die Bilder so groß wie möglich zu machen. Also fügen wir das in die Galerie ein. Und wir werden uns für eine volle Größe entscheiden. Sklaven, die gezeigt werden sollten, wären zwei gleichzeitig. Slice zum Scrollen wären auch zwei. Sie möchten keine Bilder strecken, da dies dazu führen könnte, dass sie verschwommen sind. Also behalten wir das an keinen unterstützten Navigationsstunden? Ja. Oder du könntest einfach mit Punkten gehen. Sie werden hier unten auftauchen, was auch möglich ist. Dann könntest du sie mit einer Mediendatei verknüpfen , wenn du willst. Aber ich werde sie nicht verknüpfen. Ich lasse sie einfach an. Die Beschriftung wird mit Titeln versehen. Es werden also die Titel jedes Bildes angezeigt. Und da ist es. In Ordnung, also werde ich diese Sitzung jetzt bearbeiten. Wählen Sie eine volle Breite und dann Spaltenlücke, keine Lücke. Und da gehst du. Ich mache weiter und ich werde einfach Updates machen. Und lasst uns unsere Seite ansehen. Ich kann hier runter scrollen. Und da gehst du. Das ist unser Galerie-Licht dort. Eine Sache, die Sie auch tun könnten, können Sie sich das als Aufgabe vorstellen. Du könntest den Boden für Instagram hinzufügen. Was Sie also im Grunde wieder tun könnten, ist, Sie hier rüber gehen, um mit Elementor zu bearbeiten. Wenn Sie eine Instagram-Seite auf Instagram-Link haben, könnten Sie einfach hier reinkommen. Ziehen Sie einfach Ihren Button, lassen Sie ihn hier fallen und passen Sie einfach unsere Bilder auf Instagram an und sagen Sie, und passen Sie einfach unsere Bilder auf Instagram an und sagen sehen Sie sich diese an. Und dann, wenn du den Link zu Instagram hinzufügen kannst , wenn du das willst. Auch hier haben Sie die Möglichkeit, dies auch zu tun. Wir werden fortfahren und löschen. Eine weitere Sache, die Sie sicherstellen müssen, ist, dass Sie für Ihr Bildkarussell genau hier die zusätzlichen Optionen für das Autoplay haben. Pause auf Havas, pausieren Sie bei der Interaktion. Also pausiere beim Schweben. Sie können wissen dafür entscheiden, nur um sicherzustellen, dass die Energien immer Doppelpunkt sind. Natürlich kannst du deine Endlosschleife einstellen. Ihre Richtung kann links sein oder vielleicht nach rechts gehen. Stattdessen. Sie haben all diese Möglichkeiten und es ist wirklich alles sehr subjektiv. Okay, also bleib ich bei links, nur Updates. Und da ist es. Das war's also, um unsere Galerie Deutschland hinzuzufügen. Wenn das nächste Video jetzt verfügbar ist, füge unseren Blog hinzu. Wir sehen uns dann. 15. Hinzufügen des Blog: Lass uns jetzt weitermachen und den Blog-Bereich auf unserer Homepage hinzufügen . Und Sie können sehen, dass wir das erreichen wollen. Wir werden unsere Überschrift, einen Teiler und zwei Blogbeiträge haben, die das vorgestellte Bild, den Titel des Beitrags, den Auszug sowie einen Link zum Lesen Sie mehr haben. Und dann sind die unten gelesenen Posts tatsächlich mit der Blog-Seite verknüpft. Aber hier ist das Ding. Lassen Sie mich dieselbe Demo-Site hier ziehen, aber mit dem Backend werden Sie sehen, dass ich hier Zugriff auf bestimmte Elemente habe, wie das Pulsraster sowie die Post-Zeitlinie. Aber wenn du gebeten wirst, hier auf meine eigene Seite zu gehen. Und wenn ich nach unten zum Abschnitt „ Wesentliche Atome“ scrolle, werden Sie sehen, dass ich keinen Zugriff auf diese Elemente habe und Sie sie auch nicht sehen werden. Und das liegt daran, dass wir sie im Back-End aktivieren müssen. Wovon rede ich? Lassen Sie mich zuerst diese Seite wegziehen. Gehen wir zum Backend, dem eigentlichen WordPress-Backend, und Sie werden hier wichtige Add-Ons sehen. Mach weiter und klicke darauf. Und jetzt hier wo du Elemente hast , klickst du da rein. Und genau hier können Sie Elemente aktivieren oder deaktivieren , die Sie in der Breite laufen. Also lasst uns das machen. Okay, ich werde tatsächlich jedes einzelne Element oder eine Aldose deaktivieren , ein paar aktivieren, diejenigen, die wir wahrscheinlich verwenden würden. Ich aktiviere das Testimonial-Element genau hier und aktiviere dann genau hier unter deinen dynamischen Inhaltselementen deinen dynamischen Inhaltselementen das Post-Raster sowie die Post-Zeitzeile. Lass uns weitermachen und unsere Einstellungen speichern. Jetzt gehen wir zurück zur Homepage-Bearbeitung mit Elementor I. Wenn ich zum wesentlichen Add-Ons Abschnitt scrolle, werden Sie sehen, dass wir jetzt Zugriff auf einige der Elemente haben , die ich nicht zeige. Sind wir noch, während Sie noch eine bessere Zahlung sehen können, einfache Jobs, Transporteurseiten, Elemente, ich weiß nicht warum, aber es ist in Ordnung. Zumindest haben wir jetzt Zugriff auf das Post-Grid sowie die Post-Timeline. Also hier ist genau das , was wir tun werden. Zuallererst ziehen wir unseren Header, der sagen würde , dass wir unseren Blog besuchen würden. Also ziehe ich die Überschrift genau hierher. Also sage ich Besuche Blog. Richten wir es an der Mitte aus. Als nächstes wird der Teiler sein. Also lasst uns auch hinzufügen. Ich werde mich mit einer sehr, sehr kurzen Breite von etwa an der Mitte ausrichten , sagen wir, 20% sollten in Ordnung sein. Jetzt wird hier die Hauptsache sein . Wir werden zurückgehen. Wir werden das Post-Raster benutzen, Post-Timeline. Ich zeige dir, wie das funktioniert, wenn wir auf der Blog-Seite aufbauen. Aber ich ziehe das Pole Raster genau hier, unter den Trennwand. Lass es uns da reinlegen. Okay. Jetzt, Beiträge pro Seite, schalte ich diesen auf zwei um. Wir haben nur zwei Seiten hier drin. Und ein dünner ist, dass du vielleicht vom Autor beziehen kannst. Sie können auch gezielt nach Kategorien auswählen und einfach hierher kommen und den Namen der Kategorie eingeben , deren Beiträge Sie anzeigen möchten. können Sie also um vielleicht einen Beitrag versetzen, den Sie nach dem Datum absteigend bestellen können und so weiter. Sie haben Zugriff auf all diese Einstellungen. Aber der wichtigste, mit dem eigentlich gehen möchte , sind die Layout-Einstellungen genau hier. Hier haben Sie nur ein Vorlagenlayout, das die Standardbeleuchtung ist, was in Ordnung ist. Aber dann werden die Spalten auch das machen. Jetzt genau hier, die Bildgröße, werden wir mit voll gehen. Und da gehst du. Jetzt sehen die Dinge viel besser aus. Aber dann können wir natürlich auch Dinge wie die Show unseren Herrn mehr tun , wenn Sie wollen. Wenn du dies also aktivierst, siehst du genau hier diesen Button auch weitere Blogbeiträge lädt, aber das werden wir nicht tun. Sie haben Zugriff auf einen Rasterstil , der keinen großen Unterschied zwischen Gut und Missionar darstellt. Ich schätze, wenn Sie, wenn Sie mehr Posts schießen und mit mehr Spalten willkommen sind , werden Sie sehen, dass der Unterschied, den Ball vorerst mit Mauerwerk aufnehmen würde . Okay. Du hast einen Titel gezeigt? Ja. Wir wollen den Titel zeigen. Sollten sie ja akzeptieren, aber wir werden die außer auf 50 Wörter erweitern. Okay, also los geht's, eher 50 und dann 50 Buchstaben. Und dann hier drin die Show we'd More Button, ja, das wollen wir machen. Zeige die Bedingungen für den Beitrag. Wir können das zeigen. Dies wären Dinge wie Ihre Tags, Ihre Kategorien und so weiter. Aber das machen wir nicht, also verbergen wir das einfach. Jetzt. Zähler anzeigen. Dies wird für den Autor sein, das Datum, an dem er veröffentlicht wurde. Ich verstecke das. Aber das ist natürlich völlig subjektiv. Sie können gerne anzeigen. Sie benötigen die Informationen, wenn Sie möchten. Okay, Links genau hier. Sie können Dinge wie Target leer machen Ihre Bilder sind nicht voll davon wären für SEO-Zwecke, sind und so weiter. Alles klar, lass uns zum Stil gehen und mal sehen, was wir hier haben. Die Standardeinstellung für den Postrasterstil, zu dem Sie Stil haben, der die Daten haben würde. Sie haben hier Stil drei, nicht das Datum hat, das dem Standardwert ähnlich ist. Ich schätze, es gab keinen großen Unterschied. Und natürlich können Sie hier Dinge tun, wie die Hintergrundfarbe der Beiträge ändern, wenn Sie möchten, etwas mehr Abstand hinzufügen. Wir werden hierher kommen, um Typografie und Stil zu färben. Wenn Sie also den Mauszeiger auf den Titel bewegen, können Sie genau hier sehen, dass er diese Farbe genau hier hat. Wir können das einfach in Schwarz ändern, also gibt es keine Änderung, ist im Grunde nur ein Link. Es wird sich nicht ändern. Aber wieder sehr, sehr subjektiv. Sie können täglich einen Link hinzufügen, wenn Sie den Stil angehen möchten. Ich komme zur Typografie her. Für die Erklärung. Wir können mit keinem gehen, also ist es nicht auf dem Spiel, aber wieder, bis Sie subjektiv oder stilvoll sind, können wir mit kursiver Glühbirne gehen. Ich bleibe einfach bei der Standardeinstellung. Alles klar, das ist was für eine Typografie. Und dann hier unten hast du den Hover-Cut-Stil. Wenn Sie den Mauszeiger auf das vorgestellte Bild bewegen, haben Sie diese Animation, diese verblassende Animation. Und dann können Sie mit dem schwarzen Hintergrund dort hineinklicken. Hier können Sie die Animation ändern. Anstatt also zu verblassen, können Sie vielleicht wie ein Zoomen machen , wo es hineinzoomt. Oder du kannst eine Rutsche nach oben machen, damit du das sehen kannst. Und dann kann man natürlich die Hintergrundfarbe ändern war gut, vielleicht machen Sie es etwas weniger dunkles mich, so etwas. Sie können das Symbol auch ändern, sie werden angezeigt. Sie haben alle diese Optionen für Sie verfügbar. Aber ich lasse das einfach so wie es ist. Ich habe gerade die Farbe wieder in etwas dunkleres geändert . Und das ist okay, das ist vollkommen in Ordnung. Und das war's. In Ordnung, schließlich werden wir es tun, einfach den Button „Mehr lesen“ hinzuzufügen. Ziehen wir also einen Knopf hier rein. Und ich sage mehr lesen. Und jetzt wird dieser Link zur Blog-Seite gehen, also weiter. Großer Blog, der auf die Mitte ausgerichtet ist. Und wir werden einige Änderungen vornehmen, die so gut zum Stylen sind. Der Hintergrund. Für den unteren Rand wird die orange Farbe sein, und dann wäre die Textfarbe natürlich weiß. Gehen wir zur Topographie , die Großbuchstaben transformiert. Und sagen wir tatsächlich mehr Beiträge lesen. Lesen Sie mehr Beiträge, ich glaube, sie werfen einfach einen Blick darauf. Ja, es heißt mehr Beiträge lesen. Also würden wir noch mehr Beiträge machen. Und das war's. Gehen wir wieder zum Stylen zurück. Für die Typografie werden wir hier wieder in Stil gehen , die Kuration non. Wir haben also keinen auf dem Zeilenknopf da drin. Und das war's. Sie können Ihre Grenzen hinzufügen und auch andere Dinge tun, aber ich denke, das sollte vorerst in Ordnung sein. Also lasst uns weitermachen und aktualisieren. Und das war's. Sie sind also herzlich eingeladen, dies zu stylen. Wie auch immer, Sie möchten, Sie müssen nicht unbedingt genau dieselben Farben oder genau dieselben Texte verwenden und so weiter. Und das war's. Eine weitere Sache, eine weitere Sache, die wir tun sollten bevor ich das abrunde, ist, etwas Platz zwischen dem Galeriebereich und einem Blog sowie dem Block und der FUTA hinzuzufügen , etwas Platz zwischen dem Galeriebereich und einem Blog . Lass uns ganz schnell zurückgehen. Und natürlich werden wir diesen Abschnitt für unseren Blog bearbeiten diesen Abschnitt für unseren Blog und etwas Polsterung hinzufügen. Gehen wir also hier rein und es ist Abschnitt gehen Sie zu Erweitert und trennen Sie diese Werte. Also oben, fügen wir 50 hinzu. Dann unten werden wir 15 hinzufügen. Und dann sollte das reichen. Lasst uns das Update fortsetzen. Noch ein Mal. Sehen Sie sich die Seite an. Scrollen Sie nach unten und das war's. Also haben wir die Blog-Seite, German vin, das nächste Video erstellt, in dem wir den Abschnitt „Angebote und Pakete“ ausbauen werden . 16. Hinzufügen unseres Anrufs zu Aktionen: Lassen Sie uns den nächsten Abschnitt hinzufügen, die Angebote und Pakete sein wird. Und das wird sehr, sehr einfach und sehr einfach sein. Wir werden den Call-to-Action-Button für die wesentlichen Atome nutzen . Also geh bitte zu deinem essentiellen Atom-Backend. Und Sie würden den Button und Ihre Marketingelemente finden . Machen Sie weiter und aktivieren Sie den Call to Action. Lasst uns weitermachen und Einstellungen speichern. Das war's. Ich gehe zurück zu meiner Homepage-Aktualisierung. Scrollen wir jetzt den ganzen Weg hier runter. Lassen Sie uns tatsächlich zuerst mit Elementor bearbeiten , bevor wir nach unten scrollen. Okay, lasst uns den ganzen Weg hier runter scrollen. Und jetzt gehe ich zu meinen wesentlichen Add-Ons. Und wo ist unser Call-to-Action-Button genau hier. Aufruf zum Handeln. Das werde ich da drin fallen lassen. Und es ist sehr, sehr einfach. Alles, was wir hier tun werden, ist einfach den Inhaltsstil von Basic zu Flex Grid zu ändern. So hast du jetzt den Button auf dem Weiß und dann den Text links. Und natürlich ändern wir einfach den Titel hier. Zwei Deals, Pakete. Pakete. Ich ändere das in ein H3 mit den orangefarbenen Texten. Sie können dies natürlich in Weiß oder Schwarz ändern. Und für die Textur genau hier, tut mir leid, ich werde x kein Kostüm zur Verfügung stellen. Wir lassen es einfach so wie es ist. Und dann der Buttontext selbst, wir können den hier ändern, wo Sie primäre Button-Texte haben , wird diesen einfach in unseren Shop ändern. Shoppen Sie jetzt. Und dies würde auf eine externe Website oder vielleicht auch eine andere Seite auf Ihrer Website verlinken. Wir werden rübergehen, um Licht zu stylen. Und dann klicke ich dort hinein, wo Sie den primären Button-Stil haben . Was Sie hier machen möchten, ist, dass es wieder ein gibt, wenn Sie jetzt auf Shop Now schweben können Sie sehen, dass er zum blauen Kragen wechselt. Persönlich gefällt mir das nicht. Was ich also tun werde, ist, dass ich rübergehe, um auf deinem wichtigen Dauerwelle zu schweben. Dann eine Sorte, bei der Sie die Hintergrundfarbe haben. Ich werde das einfach in Orange umwandeln. Jetzt kannst du sehen, dass es orange ist und nicht die blaue Farbe. Wir versuchen also, mit dem Colo-Muster, das wir auf unserer Seite haben, in Einklang zu halten . Das ist die einzige Änderung, die ich vornehmen werde. Lasst uns jetzt weitermachen Update. Sehen wir uns die Seite an. Scrolle nach unten. Da ist es, Deals und Pakete. Jetzt weiß ich natürlich, dass wir einen gewissen Abstand zwischen den Angeboten für Pakete sowie der Fußzeilenbirne brauchen . Wir werden immer noch den Review-Bereich hinzufügen. Dort fügen wir den Speicherplatz und das ist es zum Hinzufügen des Abschnitts für Pakete. Danke fürs Zuschauen. Wir sehen uns in der nächsten Klasse. 17. Hinzufügen des Teilchens: guter Letzt fügen wir den Review-Bereich hinzu. Und natürlich ist dies sehr oft ein sehr wichtiger Teil jeder Website, da Kunden oder potenzielle Kunden wissen möchten, dass andere Personen mit Ihrem Unternehmen Geschäfte gemacht haben und dass ihnen Ihr gefallen hat service. Wir werden also drei Bewertungen von jenseits der Sünde hinzufügen , Vanessa Carlton und Raul Gonzalez. Die Sache liegt daran, dass wir das Testimonial-Element bereits mit dem essentiellen Adams-Plug-In aktiviert haben. Wir haben zwei Möglichkeiten, wenn es darum geht, Testimonials hinzuzufügen. Die Version von elemental bietet Ihnen eine. Sie würden es auf dem General finden, die allgemeine Idee, Sie werden es sehen. Es ist genau hier, Testimonial direkt neben Tabs. Aber es gab ihre sozialen Add-Ons. Wir haben auch das Testimonial-Element. Lassen Sie mich Ihnen also kurz den Unterschied zu dem von den wesentlichen Add-Ons zeigen . Sie haben direkt hier Zugriff auf den Warte-Button. Der Stil ist ein bisschen anders. Sie können mit dem sehen, dass dies aus der kostenlosen Version von elemental ist. Hier können Sie die Miniaturansicht oder den Avatar der Person haben , die das Testimonial unter dem eigentlichen Testimonial selbst bereitstellt . Aber mit dem für essentielle Atome ist es ein bisschen anders. Bohrung. Sie haben hier Zugriff auf die geschriebene Schaltfläche und Sie können mehrere Dinge tun, wie nein, natürlich nicht wie gewohnt, die Layoutausrichtungen ändern, damit Ihr Stil ausgewählt wird. Du kannst sogar Dinge wie das Testimonial hier oben haben , du hast das Icon und dann das Bild. Sie haben all diese Möglichkeiten hier drin. Und es gibt Ihnen viel mehr Optionen als die von der kostenlosen Version von Elementor bereitgestellte. Aber da dies gesagt wird, werde ich die kostenlose Version von elemental verwenden , nur um genau diese Art von Struktur zu erhalten. Okay, also lasst uns weitermachen und das machen. Ich entferne das Element und wir fügen einen Header hinzu. Und es wird Bewertungen, Bewertungen früherer Kunden sagen . Und natürlich richten wir uns an der Mitte aus. Und wir werden unseren Teiler wie gewohnt hinzufügen. Also lasst uns den Teiler hinzufügen. Ich denke, sie sollten ungefähr 25 Jahre alt sein. Schleifen sind nicht 25 Volt, 45% für die 5%. Jetzt fügen wir das ina, section -Element hinzu, weil wir mit drei Spalten arbeiten werden. Also werde ich das da drin fallen lassen. Genau wie zuvor. Was hier einfach gemacht wurde, ist, dass wir die erste Testimonialform jenseits von Anderson liefern werden . Und sie werden einfach die Namen sowie den Ort und andere Aufgaben für den Rest der Testimonials duplizieren die Namen sowie den Ort und andere Aufgaben für den und ändern. Also sehr schnell, lass uns hierher gehen, zum General gehen. Und lasst uns das erste Testimonial hier hinzufügen. Und das ist darüber hinaus, jenseits von Anderson. Nun, für das Typ-Tool, können Sie stattdessen einfach das Land hinzufügen, das sie haben, okay, statt der Berufsbezeichnung der Person können Sie einfach das Land hinzufügen. Deswegen kommt Anderson aus Island. Und genau hier wähle ich das Bild aus. Während unser Freund jenseits von Bereichen sehen kann , ist alles Smiley, sehr, sehr glücklich. Und da ist es. Alles klar, damit Sie sehen können die Textgröße hier ziemlich klein ist. Was wir also genau hier für den Inhalt tun werden , ist, dass wir zum Stil gehen. Und wo muss man hier vorankommen. Lass uns weitermachen und dann den Topographie-Button wählen. Jetzt für die Größe werden wir mit 18 Pixel entfernt gehen. Und was sonst noch? Das ist so ziemlich genau das. Wir werden also einfach diesen Abschnitt oder diese Spalte duplizieren und noch einmal duplizieren. Löscht die letzte Spalte. Und dann ist es immer einfach, hier gerade jetzt zu wechseln, über Anderson hinaus zu Vanessa Carlton Laken, was lächelt. Sie ist sehr glücklich. Vanessa Carlton. Und Vanessa kommt aus den USA. Und dann haben wir unser letztes Zeugnis von Gonzalez und Roll ist ja, es lächelt irgendwie genau, aber er ist auch nicht wütend. Also Gonzalez und er sind aus Spanien espanol. Wie buchstabiert man Spin? Spin ist SPA IN? Okay. Da ist es. Wir sind fertig. Eine Sache noch. Fügen wir unsere Polsterung zu diesem Abschnitt hinzu. So fortgeschritten, werden wir auch mit 50 und Top 50 gehen , unten. Aktualisierungen. Und voila, lasst uns die Seite ansehen. Und los geht's, genau da unten. So können Sie Ihrer Website ziemlich Testimonials hinzufügen . Danke fürs Zuschauen und wie immer sehe ich dich in der nächsten Klasse. 18. Home Page Review: Nun, willkommen zurück, Felicitas Sian. Wir haben erfolgreich auf der Titelseite einschließlich der Kopf- und Fußzeile erstellt . Und ich hoffe, dass Ihnen der Kurs bisher gefällt. Jetzt erstellen wir zwei weitere Seiten, die Blogseite und dann die Kontaktseite. Und jetzt weiß ich, dass wir im Hauptmenü sowohl die Features-Seite als auch die About-Seite haben , aber ich werde diese nicht erstellen, nur um Zeit zu sparen. Ich möchte diese Kosten nicht viel zu lang machen. Und auch weil Sie an dieser Stelle bereits eine Vorstellung davon haben, wie elementar funktioniert. Alles, was gerade übrig ist, ist nur, dass Sie sich vorstellen können, wie Ihre About-Seite aussehen soll. Willst du ein großes Banner haben? Möchten Sie einen Abschnitt mit drei Spalten haben? Eine Spalte hat ein Bild, eine andere hat einige Texte, eine andere hat ein Video. kannst du alles machen. Also fordere ich Sie auf, eine kreative Kredit zu entwickeln, um Ihre eigene About-Seite der fetalen Seite oder einer anderen Art von Seite zu erstellen, die Sie möglicherweise auf Ihrer eigenen Website erstellen. Aber wir werden die Blog-Seite speziell erstellen , weil sie sich ein wenig von Ihren traditionellen statischen Seiten unterscheidet. Die Blogseite enthält alle Ihre Beiträge. Ich zeige dir die verschiedenen Möglichkeiten wie du eine Blog-Seite erstellen kannst. Und dann wird die Kontaktseite erstellt, weil es nicht darum ein Plugin namens WP Forms-Plugin zu verwenden, das viele Leute nicht verwenden können. Hoffentlich hoffe ich, dass Ihnen der Kurs bisher gefällt, Sie haben selbst eine wunderbare Homepage. Lassen Sie uns nicht damit fortfahren, den Rest unserer Seiten aufzubauen . Lasst uns weitermachen. 19. Erstelle die Blog-Seite: In Ordnung, also lasst uns jetzt die Blog-Seite erstellen, auf der wir die Artikelseite im Hauptmenü benannt haben, aber es ist tatsächlich die Blog-Seite. Das erste, was wir hier tun werden, ist, dass wir noch nicht direkt mit Elementor bearbeiten können noch nicht direkt mit Elementor bearbeiten weil wir die Seite tatsächlich zuerst vom Backend aus bearbeiten müssen , von der traditionellen Arbeit ist Back-End. Genau hier. Wir können jetzt auf Edit with Elementor klicken. Dies gibt uns nun Zugriff auf die elementare Schnittstelle für die Seite. Das erste, was ich tun werde, ist dass ich hierher komme, um Sit-Ins zu machen und einfach den Seitentitel auszublenden. Dann benutzen wir einfach unsere eigene Überschrift. Und das nennen wir unseren Blog. Wir verkaufen es als H1, gehen zum Stil. Eigentlich richten wir uns zuerst an der Mitte aus und gehen Sie zum Stil. Und dann werden wir sie für die Typografie als unsere primäre festlegen. Wenn Sie nicht mit den globalen Schriftarten arbeiten, können Sie dies auf etwa 60 Pixel oder ähnliches einstellen . Stellen Sie sicher, dass es ziemlich groß ist, oder? Als Nächstes fügen wir unseren Teiler für den Blog und richten ihn an der Mitte aus. Stellen Sie das auf Passungen ein. Jetzt sieh dir das an. Okay, wir werden Beiträge aus verschiedenen Kategorien hinzufügen. Wir werden unser Posts-Raster aus den wesentlichen Add-Ons hier unten nutzen . Jetzt haben Sie eine Post-Timeline, die eigentlich sehr daran interessiert ist , was dies tun wird, ist, dass Ihre Beiträge in einer vertikalen Zeitleiste angezeigt werden Ihre Beiträge in einer vertikalen Zeitleiste angezeigt und es sich um einen anderen Stil handelt. Persönlich bin ich kein großer Fan davon, aber Sie haben diese Option, wenn Sie möchten. Aber ich werde nicht damit laufen. Ich benutze einfach das Post-Raster. Okay, also ziehe ich das Posenraster, springe Grate unter den Teiler. Und jetzt sieh dir das an. Die Quelle wird offensichtlich unsere Beiträge sein, aber wir können basierend auf dem Autor, der Steuer Fermat und so weiter abfragen . Aber wir werden mit Kategorien arbeiten. Hier. Ich tippe in Europa ein. In Ordnung. Wir werden Posten aus Europa abrufen. Die Postpaid-Seite wird hier auf drei eingestellt, und dann wird das Layout eingefügt. Also gehen wir mit drei Spalten für die Bildgröße. Wir werden wie gewohnt voll gehen. Nun würden Sie feststellen, dass es eine Fehlausrichtung in Bezug auf die Höhen gibt, da ich verschiedene Größen meiner Bilder für die Beiträge verwende die Höhen gibt, da ich verschiedene Größen meiner Bilder für die Beiträge . Wie offensichtlich hat die Mode in Istanbul das größere Image. Und dann haben Posts für ihre Sünden in Pittsburgh und Glasgow kürzere Bilder. Es gibt einen Weg um das herum und Sie werden es genau hier sehen. Sie haben Bildhöhe. Sie können einfach eine feste Höhe für Ihre Bilder festlegen. Der einzige Nachteil dabei ist, dass Sie manchmal nicht die besten Blickwinkel erhalten. Wie zum Beispiel wissen Sie, wenn Sie diesen größer als gemacht haben, verpassen Sie möglicherweise den besten Winkel in Ihren Bildern und so weiter. Das ist also der einzige Nachteil. Idealerweise möchten Sie Bilder mit derselben Breite und Höhe verwenden derselben Breite und , wenn es um vorgestellte Bilder geht, aber das ist kein Problem. Es ist okay. Okay, also haben wir das. Was sonst noch einfach tun, ist eine Überschrift hinzuzufügen, um darauf hinzuweisen, dass dies unsere Beiträge aus Europa sind. Also komme ich her und sage Europa. Okay, jetzt machen wir einige Änderungen an der eigentlichen Pose Good selbst. Layout-Einstellungen. Hier drin. Die akzeptieren Worte, die wir mit 15 gehen werden. Zeig mehr lesen. Ja, zeig Metta. Ja, Bot Loves. Geh rüber zum Stil. Was ich hier mache ist, dass ich Stil Nummer zwei auswähle. Dieser zeigt uns das Datum an, an dem A2 den Avatar oder den Namen des Autors sicherstellt . Also bevorzuge ich diesen besonderen Stil. Jetzt, wenn wir uns selbst verstehen, werden wir zur Farbtypografie und dem Abstand übergehen. Hey, nochmal, du hast den Titel Hover-Farbe. Wir haben das früher gemacht, ich werde diesen in Orange ändern. Wenn sie also auf den Beitrags-Link schweben, wird es zu orange. Dann werden wir für die Typografie auch hier einige Änderungen vornehmen. Ich werde das ein bisschen kleiner machen, nur damit die majestätische Stadt Glasgow einer einzigen Linie liegen kann. Der Stil, ich werde mit kursivem Dekor gehen, keine. Für die Schaltfläche „Mehr lesen“. Lasst uns auch ändern. Ich werde es hier unten mit Mo-Button-Style, der Textfarbe, herausfinden . Wir werden mit Orange gehen, nur um die Dinge konstant zu halten. Und dann klicke ich natürlich für die Typografie hier rein, klicke ich natürlich für die Typografie hier rein, gehe zur Deklaration und setze mich dann zu keiner hin. Und das war's. Wir haben es eingerichtet. Europa, wir haben drei Posts. Was ich jetzt sonst noch tun möchte, ist Europa einfach zu duplizieren, die Postgres genau hier zu duplizieren. Ich werde Europa, das zweite, ziehen, es hierher fallen lassen und dieses dann nach Asien setzen. Das wird die nächste Kategorie sein. Jetzt für den eigentlichen Postgres selbst werden wir die Kategorien hier in Asien ändern. Also lass mich Gia tippen da es ist. Da gehst du. Und dann lassen Sie uns nicht zuletzt noch einmal genau dasselbe machen, Duplikate, Duplikate. Jetzt ziehe ich Asia. Veränderungen wollten nach Südamerika, kommen Sie hier zu den Postgres. Änderungen, eine nach Amerika. Erinnert euch an Südamerika. Und da ist es. Eine weitere Sache, die wir tun könnten, ist, etwas Platz zwischen den Pole Gittern hinzuzufügen . Also sieh dir das an. Okay, ich gehe zu meiner Postgraduiertenarbeit, entweder für Europa, gehe zu fortgeschritten, um die Werte zu verknüpfen und dann setze ich das untere Muster. Sagen wir 25 Pixel. Nichts zu drastisches, wird auch für Asien den Satz bewirken. Liegt unten 25 Pixel. Und dann tun wir nicht zuletzt auch für Südamerika, wenn 25 Pixel unten legen. Lasst uns jetzt weitermachen Updates. Und lasst uns die Seite ansehen. Da ist es. Okay, also fügen wir etwas Abstand für den selbst gekauften Blog-Titel hinzu. Sieh dir das mal an. Das sieht ziemlich ordentlich aus und es ist eigentlich ziemlich cool. Lassen Sie mich schnell diese schnelle Änderung am Blogtitel vornehmen . Lassen Sie uns etwas Abstand hinzufügen. Also werden wir gehen, tatsächlich gehen wir zur Abschnittsschaltfläche hier, wenn der gesamte Inhalt gedrückt wird , wird auf Link erweitert und sie werden einfach 50 Pixel für die Oberseite einstellen und dann 50 Pixel für den unteren Teil als gut. Ok, ODER Tore. Jetzt, noch einmal, schauen wir uns die Seite an. Und voila Gesetz, los geht's. Das ist die Blog-Seite, die alle ausgebaut ist. Ich möchte dich jedoch herausfordern. Um die Dinge interessanter zu machen. Ich zeige dir ein Beispiel dafür, wovon ich rede. Sowohl mit elementaren mit den wesentlichen Atomen sind Plugin. Sie haben Zugriff auf so viele Elemente, um Ihre Seiten spannender und dynamischer aussehen zu lassen. Zum Beispiel haben die wesentlichen Atome noch ein anderes Element aktiviert. Und es ist das Bild-Akkordeon. Sie finden es auf den kreativen Elementen genau hier sehen Sie Bild-Akkordeon. Los, aktiviere es. Gehen wir nun zurück zur Seite hier drin und lass mich dir eins zeigen, was wir tun können. Ich bearbeite mit Elementor. Wir werden das Bild-Akkordeon benutzen . Jetzt sieh dir das noch einmal an. Ich scrolle hier runter. Sind essentielle Atome. Wir haben das Bild-Akkordeon-Element genau hier. Ich klicke auf Drag & Drop es direkt über dir. Alles klar. Bevor ich jetzt anfange, dies zu bearbeiten, füge ich eine weitere Überschrift direkt über dem Bild-Akkordeon hinzu. Und wir können diesen einen neuesten Posts nennen. Als Beispiel füge ich tatsächlich etwas Polsterung von oben hinzu. Lass uns 25 Pixel gehen. Nur um dir etwas Abstand zwischen dem eigentlichen Blocktitel zu geben und uns Beiträge zu lassen. Und ich schaue mir das noch mal an. Ich gehe zu meinem Image-Akkordeon und lade hier ein. Wir können so viele Dinge zum ersten Mal tun , hier drin klicke ich hinein, ändere das Bild hier, um einer der Beiträge zu sein. Dieses hier, die Sankt-Petersburger Beiträge, werde ich das vorgestellte Bild auswählen. Füge das ein. Und jetzt wirst du sehen, dass du es aktiv machst. Ja, wir wollen das machen, ich konnte nicht aktiv sein, damit es jetzt tatsächlich mit den Posts hier verlinkt wird, ich werde diesen Titel ändern. Zwei Besuche in St. Petersburg. Das wird der Titel sein. Und dann wären hier die Auszüge. Dies wäre der außer dem Text, wir jetzt hier ändern können , wo Sie ihr die Verknüpfung ermöglicht haben, Sie möchten dies zeigen und jetzt genau hier, hier würden Sie den Link hinzufügen der Beitrag. Lassen Sie mich das einfach schnell machen. Lassen Sie mich die Seite ganz schnell ansehen. Tagelang in St. Petersburg. Also hier hole ich mir diesen Link genau hier. Beachten Sie erneut, dass Sie den Domainnamen selbst nicht kopieren müssen . Gehe einfach mit dem Schrägstrich und dann dem Namen des Beitrags oder der URL der Beiträge. Ich kopiere das. Geh genau hier, geh zurück zu Bearbeiten. Klicken Sie hier auf das allererste Bild-Akkordeon. Und jetzt hier unten, Titellink. Ich mache jetzt weiter und füge das einfach ein. Dies wird nun auf die Post oder vier Tage in St. Petersburg verweisen . Auch hier könnte ich das Gleiche für die Sekunde tun. Laut auch hier drin. Unsere Liste wählt die für den Rainbow Mountain. Und dann kann ich wieder hier reinkommen und den Titel in den Rainbow Mountain ändern . Etwas schnell, Rainbow Mountain und so weiter. Das ist für das zweite dementsprechend das dritte Quartal. Und ich werde das einfach zu demjenigen ändern, der Rapa Nui. Und dann natürlich, nicht zuletzt, lass uns mit dem für Türkei, Mode und Mode in Istanbul gehen . Füge das ein. Das ist es. Ich werde weitermachen und jetzt Updates. Und jetzt werfen wir einen Blick auf die verbesserte Blog-Seite. Jetzt sieh dir das an. Sie haben zum Beispiel Blogbeiträge in Pittsburgh, Sie werden diesen Regenbogenberg haben. Sie können auf dieses für Rapa Nui klicken, dieses für Mode und Istanbul. Und wenn sie nicht interessiert sind, können sie jetzt einfach nach unten scrollen, um sich die Beiträge aus Europa, Asien, Südamerika usw. anzusehen . Dies ist also eine Möglichkeit , wie Sie Ihre Seiten interaktiver und dynamischer gestalten können . Sie können auch Animationen hinzufügen, wie Sie sie so einrichten können, dass Sie vielleicht von links oder von rechts hineinschieben. Wie das geht, habe ich dir auf der Homepage gezeigt. Also versuche einfach kreativ zu sein. Wenn Sie nicht zufrieden sind, wie statisch sich Ihre Seite anfühlt, können Sie die Dinge immer aufpeppen, indem Sie kreative Elemente verwenden und Animationen hinzufügen. Und Sie werden eine massive Verbesserung darin feststellen , wie dynamisch Ihre Seiten sind. Das war's zum Ausbauen der Blog-Seite. Vielen Dank fürs Zuschauen. Wir sehen uns in der nächsten Klasse. 20. Aufbau der Kontakt-Seite: Ich habe einfach die Blog-Seite aufgebaut und jetzt eine weitere sehr wichtige Seite erstellen lassen, und das wird die Kontaktseite sein. Jetzt möchten Sie im Idealfall natürlich auf Ihrer Kontaktseite ein Kontaktformular haben, vielleicht sogar eine Google-Map. Wenn Sie einen physischen Standort haben. Oder wir haben keinen physischen Standort, aber wir fügen ein Kontaktformular hinzu. Jetzt gibt es mehrere Plugins zum Erstellen von Kontaktformularen. Und tatsächlich, wenn Sie die kostenpflichtige Version von elemental verwenden , haben Sie das Formularelement. Aber wir verwenden die kostenlose Version von elemental. Also werden wir ein anderes Plugin installieren. Und dieses Plugin heißt WP Forms Plugins. Lassen Sie mich also WP-Formulare eintippen. Und es ist der hier. Okay, also lasst uns weiterinstallieren. Und wir werden jetzt das Plugin aktivieren. Alles klar, also klicken wir einfach auf Erstellen Sie Ihr erstes Formular hier. Das Gute an diesem speziellen Plugin ist, dass es sich sehr gut in Elementar integriert. Ich gebe hier einen Namen ein. Das wird also das Kontaktformular sein. Das wird der Name dieses Formulars sein. Kontaktformular ist hier drin. Sie haben unsere verschiedenen Vorlagen, wählen den einfachen Kontaktformularfaktor. Wir können uns die Demo hier ansehen. Sie können sehen, dass dies die Demo ist genau hier. Sehr, sehr einfach. Sie haben die Felder Name, E-Mail und dann die Nachrichtenfelder. Damit das unseren Zwecken entsprechen sollte, klicke ich einfach auf Vorlage verwenden. Das ist selbst, aber ich werde nur ein paar Änderungen vornehmen, wie das Plug-In funktioniert, da es genau hier ist, Sie haben die Felder mit der kostenlosen Version für Sie verfügbar , es gibt eine kostenpflichtige Version wo Sie Zugriff auf diese ausgefallenen Felder und die Zahlungsfelder usw. haben, aber wir brauchen sie nicht. Der Ingwer, den ich hier machen werde, wäre also das Namensfeld zu bearbeiten. Also klicke ich einfach hinein. Und genau hier hast du das Format. Ich bevorzuge das einfache Format, in dem Sie nur eine einzige Zeile für den Namen haben. Aber du hast mittlere, letzte und zuerst, letzte und so weiter gezwungen . Im Advanced können Sie die Feldgröße ändern , um zwei kleine zu starten, je nach Geschmack und was Sie bevorzugen. Sie können Ihre CSS-Brille hier hineinlegen. Du hast auch kluge Logik, was mir leid tut. Ich hab's vergessen. Dies ist sowieso nur mit der kostenpflichtigen Version verfügbar, für die Feldoptionen. Das war's. Sie können also hier wieder reingehen und zusätzliche Felder wie ein Dropdown-Kontrollkästchen hinzufügen. Wenn du wolltest. Unter Setup hier drin tut es mir leid, unter Einstellungen, ob hier, hier können Sie Dinge wie den tatsächlichen Formularnamen selbst ändern. Sie können den Text für die Schaltfläche ändern und Anwendungen beeinflussen. Hier können Sie die Art von Benachrichtigungen einrichten, die Sie erhalten möchten , wenn jemand das Kontaktformular ausfüllt. Wir möchten hier standardmäßig benachrichtigt werden, die mit Ihrer WordPress-Website verknüpfte Admin-E-Mail befindet sich hier, Sie können jedoch Ihre eigenen benutzerdefinierten E-Mail-Elemente hinzufügen. Zeig dir was, okay, genau hier, wo du von Namen hast. Standardmäßig wird es auf den Namen Ihrer Website festgelegt, aber es ist viel sinnvoller, diese auf den tatsächlichen Namen der Person festzulegen , die die Nachricht sendet. Also klicke ich hier auf Smarttags anzeigen. Wählen Sie einfach das Namensfeld oder Ihren FirstName, LastName, je nachdem, welches Gefühl Sie für den Namen haben. Und dann auch für per E-Mail. Wir wählen einfach das E-Mail-Feld aus. Und ich werde weitermachen und einfach sparen. Sie haben die Konformationen auch hier drin wie okay, was passiert, wenn sie das Kontaktformular ausgefüllt haben? Bekommen sie eine Nachricht? Wenn ja, können Sie die Nachricht hier bearbeiten. Sie können sie auf einer bestimmten Seite zeigen und es wird eine besondere Schönheit von geschaffenen allen sein. Sie können sie einfach an eine externe URL umleiten , wenn Sie gehen möchten. Wir werden nichts davon machen. Lassen Sie uns jetzt einfach weitermachen, um noch einmal zu sparen, schließen Sie dies. Jetzt gehen wir zur Kontaktseite. Lassen Sie uns die Seite zuerst aus dem WordPress-Backend bearbeiten . Dann klicke ich von hier aus auf Edit with Elementor, damit wir jetzt die Elementor-Schnittstelle verwenden und das anschauen können . In Ordnung, ups, ich hab vergessen, eine dünne zu machen. Ich entschuldige mich. Wir müssen die WP-Formulare aktivieren , die Add-On für die wesentlichen Elemente Plugins sind. Also lasst uns das schnell machen. Ich gehe hier zu wichtigen Atomen. Gehen wir zu Elementen. Und dann haben Sie hier unten die Formular-Styling-Elemente. Sie werden WP Forms sehen. Lasst uns weitermachen und jetzt das aktivieren. Sie können sehen, dass Sie Zugriff auf andere Arten von Formen haben , wie fließende Formen, Gravity Forms, was eigentlich sehr, sehr gute Ninja Forms ist und so weiter. Wie auch immer, lasst uns unsere Einstellungen speichern. Und ich werde das schließen. Aktualisieren wir diese Seite noch einmal. Okay, also die Sache mit WE-Formularen ist, dass Sie selbst mit der kostenlosen Version von elemental Zugriff auf das Element haben. Sobald Sie das Plugin installiert und aktiviert haben, können Sie es direkt hier im Basic sehen, Sie haben WP-Formulare von Elementar. Ich klicke hier hinein. Und ich zeige Ihnen den Unterschied zwischen diesem und dem von wichtigen Add-Ons bereitgestellten. Gehen wir zurück und scrollen den ganzen Weg hier runter. Fügen wir das für wichtige Add-Ons in einen anderen Abschnitt hinzu. Jetzt wirst du den Hauptunterschied sehen, okay? Dies ist das für die wesentlichen Atome. Ich wähle den Kontakt für die Sterblichkeitsrate. Es heißt „Formular auswählen“. Lasst uns das wählen. Jetzt genau hier. Vergleiche diesen mit dem hier oben. Gehen wir mit dem für Elemente von First. Wählen wir auch das Kontaktformular aus. Die Sache ist, dass Sie nur Zugriff auf die Art von Formular haben, das Sie wählen können. Die Anzeigeoptionen sind gut. Sie möchten den Namen des Formulars, die Beschreibung und dann den erweiterten Text aufnehmen . Es ist nichts mehr dran. Für diejenigen mit wichtigen Add-Ons haben Sie jedoch Zugriff auf viel mehr. Sie können die Beschreibungsbeschriftungen anzeigen, bitte halten Sie sie fest. Sie haben sogar unsere Fehlermeldungen. Sie möchten Fehlermeldungen anzeigen oder möchten Sie sie ausblenden? Wenn zum Beispiel jemand das Namensfeld nicht ausgefüllt hat und dann die Taste „Senden“ drücken, möchten Sie die Fehlermeldung anzeigen oder nicht. Sie haben Zugriff auf viele Styling-Optionen. Sie können eine Hintergrundfarbe des Formulars hinzufügen. Sie können das Formular an Ihren Breitenrändern ausrichten. Sie haben alle möglichen Styling-Optionen für die Titel- und Beschreibungsbeschriftungen und so weiter. Während dieser Zeit erhalten Sie sie nicht mit demjenigen mit dem Element, das von der kostenlosen Version von elemental bereitgestellt wird . Deshalb verwende ich lieber das von essentiellen Atomen bereitgestellte. Also werde ich weitermachen und diese von Elemental schließen. Lasst uns das machen. Sehr, sehr einfach. Wir werden hier keine großen Änderungen vornehmen, außer dass wir einfach den Titel des Telefonbuchs ausblenden. Jeder weiß, dass es sich um ein Kontaktformular handelt, also müssen Sie hier nichts ändern. Eine Sache, die wir jedoch tun werden, ist, den Seitentitel auszublenden. Und dann fügen wir unsere eigene Überschrift hinzu. In Ordnung, und wir werden einfach dieses hier als H1 wählen , um Typografie zu Stil zu gehen , die primär ist. Und wir werden einfach kältesten Swan unsere Kontaktiere uns. Das war's. Wir fügen den Abschnittslink-Werten etwas Polsterung hinzu. Wir werden mit 50 oben und dann 50 unten gehen. Denken Sie tatsächlich darüber nach. Das Contact Us ist eigentlich ein sehr, sehr großes Buch. Es ist okay, richten wir das einfach in die Mitte aus. Und wir fügen einfach ein Muster für das eigentliche Formular selbst hinzu. Ich klicke auf das Formularelement. Lass uns zu Advanced gehen. Und wir fügen auch etwas Polsterung hinzu. Gib ihm einfach etwas Abstand zwischen dem tatsächlichen Titel und dem Formular selbst. Also mach weiter und aktualisiere es. Das gehe ich jetzt weiter und schaue mir die Seite an. Und das war's für die Kontaktseite. Jetzt kannst du das wieder ein bisschen spannender machen. Sie können mit vielleicht zwei Spalten im Gegensatz zu Abschnitt gehen . der ersten Spalte können Sie ein Bild von jemandem hinzufügen, der vielleicht anruft oder jemand eine E-Mail sendet, solche Sachen. Es gibt also verschiedene Möglichkeiten, die Kontaktseite zu ändern und sie aufregender zu gestalten , wenn Sie möchten. Aber das ist sehr, sehr einfach, sehr einfach und entspricht unseren Zwecken. Also danke fürs Zuschauen und wir sehen uns in der nächsten Klasse. 21. Einführung in das responsive Design Elementor: Okay, ist so technisch gesehen, dass wir unsere Website fertig erstellt haben . Wir haben die Homepage, wir haben die Blog-Seite und wir haben auch eine Kontaktseite sowie die Kopf- und Fußzeile. Aber es gibt eine sehr, sehr wichtige Sache, um die wir uns kümmern müssen , und das wird ansprechendes Design sein. Denken Sie immer daran , dass heutzutage so viele Menschen ihre Mobiltelefone benutzen, um im Internet zu surfen. Und wenn jemand stolpert, stolpern Sie mit dem Mobiltelefon über Ihre Website, Sie möchten sicherstellen, dass es gut aussieht. Was wir also im Rest dieses Abschnitts tun werden , ist, dass ich Ihnen zeige, wie Sie die Kopfzeile, die Homepage, die Fußzeile und die anderen Seiten rekonstruieren können , um reaktionsschnell auszusehen. Wenn es also auf einem Tablet-Gerät oder auf einem mobilen Gerät angezeigt wird, sieht es gut aus. Lambdas gibt Ihnen derzeit eine sehr, sehr schnelle Demonstration dies ist für die Tablet-Ansicht. Sie können sehen, dass ich die Größe meines Bildschirms auf die eines Tablets reduziert habe. Und Sie können jetzt sehen, dass es immer noch sehr, sehr, sehr gut aussieht. Wir haben keine Probleme mit dem Speicherplatz in der Kopfzeile. Sieht gut aus. Abschnitt „Zeugennotizen“ sieht gut aus. Das Foto sieht gut aus. Aber wenn ich jetzt bis zur kleinsten Bildschirmgröße scrolle , die normalerweise Ihr Mobiltelefon ist. Lassen Sie mich zurück nach oben gehen, jetzt können Sie sehen, dass der Header anders aussieht. Wir haben einen schwarzen Hintergrund. Wir haben unser Logo. Wir haben genau hier das Hauptmenü, das jetzt das Hamburgermenü ist, das Sie schon oft gesehen haben. Und wenn ich dann wieder nach unten scrolle, sieht man, dass es hier bis zur Fußzeile gut aussieht . Responsive Design ist daher äußerst wichtig. Ich zeige Ihnen also, wie Sie Änderungen an Ihrer Website vornehmen können , damit sie auf jedem mobilen Gerät gut aussieht. Lambda erwähnt auch schnell , dass es bei einem ansprechenden Design einige Konzepte gibt, die beachtet werden sollten. Man würde bedeuten, Dinge wie das Reduzieren von Rändern zu tun , sind Muster, die Sie in der Desktop-Version hinzugefügt haben . Zum Beispiel erinnern Sie sich dort mit dem Homepage-Banner. Für diesen Abschnitt mussten wir eine unverschämte negative Marge hinzufügen eine unverschämte , und ich denke, es war minus zwei bis zwei Pixel, wenn es um mobile Versionen geht. So reaktionsschnelle Versionen müssen Sie möglicherweise diese Größe oder Mabou reduzieren oder vielleicht sogar in bestimmten Situationen die Größe erhöhen. Eine Anpassung an Imagines oder Muster ist notwendig. Es gibt auch Zeiten, in denen Sie nur Einstellungsarten von Elementen ausblenden müssen Einstellungsarten von Elementen ausblenden wenn sie auf einem mobilen Gerät angezeigt werden, da dies auf dem Desktop möglicherweise gut aussieht. Ein Beispiel wäre, dass ein Videoeditor auf dem Desktop gut aussehen wird. Aber auf einem mobilen Gerät ist es möglicherweise nicht unbedingt so großartig. Dasselbe gilt auch für Animationen. Und die Maßnahmen werden auf einem Desktop, den Gehwegen auf einem Desktop, gut aussehen , aber das Mobiltelefon könnte Probleme haben , diese Animation anzuzeigen. Der springende Punkt dieses massiven Designs ist also das Opfer. Sie nehmen Änderungen vor, entfernen bestimmte Funktionen, so dass bei der Anzeige auf einem Mobilgerät das Uber-Grid angezeigt wird. Das war's also für die sehr schnelle Einführung in das Responsive Design. Lasst uns jetzt damit anfangen. 22. Responsive Header Teil 1: Alles klar, also lasst uns anfangen, unseren Header so zu gestalten, dass er reagiert und Lambda zeigt Ihnen die Staaten so, wie er gerade ist. Der Desktop ist ziemlich fertig. Wenn wir beginnen, den Bildschirm unseres Browsers zu minimieren. Sie können jetzt sehen , dass dies zu diesem Zeitpunkt die Tablet-Ansicht sein würde. Und Sie können sehen, dass das Logo viel kleiner wird. Die Speisekarte hat sich auch in das traditionelle Hamburgermenü verwandelt . Und es ist okay, aber es kann definitiv verbessert werden. Aber wenn wir jetzt ein bisschen kleiner werden, können Sie sehen, dass die Dinge hier wirklich, richtig schlecht aussehen. Dies ist die mobile Ansicht, die für das Mobiltelefon. Also mussten wir hier einige Änderungen vornehmen. Ich mach weiter. Und bevor ich das mache, lass mich dir den anderen Header zeigen, den globalen Header. Gehen wir zur Kontaktseite und Sie werden feststellen, dass diese ein bisschen besser ist. Wir haben den schwarzen Hintergrund und dann in der mobilen Ansicht, obwohl das Hamburgermenü falsch mit dem Logo abgestimmt ist, ist es immer noch viel besser, da wir oben keinen Leerraum haben . Okay, ich werde die Homepage-Header bearbeiten. Gehen wir zu Edit with Elementor und dann zur Homepage nach oben. Jetzt wechseln wir hier unten in den Responsive-Modus. Reaktionsmodus, Wechseln wir zuerst zur Tabelle. Jetzt möchte ich dir schnell etwas zeigen. In Ordnung, lass mich zurück zu responsive gehen. Standardmäßig wurde Ihr Hauptmenü oder ein aktiviertes Feature-Menü in der Tablet-Ansicht in das Hamburger-Menü umgewandelt . Beachten Sie jedoch, dass Sie nicht immer den Standardeinstellungen folgen müssen. Wenn ich jetzt zum Tisch wechsle, wie Sie sehen können, hat es sich an das Hamburgermenü gewandt. Und das liegt daran, dass Sie, wenn ich auf das Hauptmenü des Layouts klicken und bearbeiten sollte , die Bildschirmgrößen des positiven Haltepunkt-Tablets von 1025 Pixeln und darunter sehen Bildschirmgrößen des positiven Haltepunkt-Tablets . Klar, der Hamburger-Menü-Blot. Wenn wir das nicht wollen, wechsle ich stattdessen diese in die mobile Ansicht. Eine Tablet-Ansicht. Wir werden immer noch das Hauptmenü zeigen und wir wandeln uns erst in das Hamburgermenü um wenn wir die mobile Ansicht erreicht haben. Lasst uns das Update fortsetzen. Und mal sehen, was diese kleine, kleine Veränderung für uns bewirkt hat. Sehen Sie sich die Seite an. Gehe zurück zur Homepage oder zum Fall. An dieser Stelle ist dies die Tablet-Ansicht. Und man sieht, dass es eigentlich nicht so schlimm ist. Sie müssen nicht einmal auf das Handy wechseln, zum Hamburgermenü, also Tablets. Wenn Sie viele Menüpunkte haben, sagen wir 678 Artikel als Jahre, haben Sie natürlich nicht genug Platz. Aber Institutionen , in denen Sie vier oder fünf Menüpunkte haben , ist es vollkommen in Ordnung für die Anzeige. Sie wie sie sich im Tablet-Modus befinden. Es gibt zwei Änderungen, die ich hier machen werde. Man wäre, die Größe des Logos nur ein wenig zu vergrößern . Und dann könnten wir auch versuchen, die Größe der Menüpunkte nur ein wenig zu reduzieren . Lass uns das ganz schnell machen. Ich gehe zurück zur Homepage-Kopfzeile. Wir wechseln zu antwortendem SUV, Trink-Tablet. In Ordnung. Ich klicke auf das Menü. Es tut mir leid, das Logo entweder hier bei UT-Logo geht zu Style. Beachten Sie jetzt , dass die Dimension hier drin auf Tablet eingestellt wurde. Wie Sie sehen können, ist es alles SASE Tablet, Tablet. Also hier schalte ich die Größe auf 100% um. Wir zeigen die volle Größe des Logos an. Jetzt für das Hauptmenü weiß ich, dass es alles in Weiß ist. Du kannst es nicht sehen, aber ertrage es einfach mit mir. Ich klicke auf Bearbeiten, das Hauptmenü, gehe zu Style. Dann gehen wir gleich hier zur Typografie. Sehen Sie sich das an und stellen Sie sicher, dass die Größe hier auf Tablet eingestellt ist. Wir werden diese 114 Pixel nur ein bisschen kleiner als gewöhnlich machen . Lasst uns Updates machen. Jetzt schauen wir uns mal an. Fügen Sie den neuen Homepage-Header und den Reaktionsmodus hinzu. Und da gehst du. Da gehst du. Bis zu diesem Zeitpunkt sieht es also ziemlich gut aus. Offensichtlich werden wir einige wichtige Änderungen an der Schlagzeile des Banners vornehmen , dem Gewinner, den wir reisen, Es ist Abenteuer. Wir werden die Größe reduzieren, aber achten Sie einfach auf den tatsächlichen Header. Okay, es sieht gut aus bis zur mobilen Ansicht, die jetzt weiterlaufen muss. Aber im Moment maßgeschneidert sieht das ziemlich gut aus. Werfen wir nun einen Blick auf den Header für den globalen, globalen Header. Wählen wir eine Seite aus, wählen wir die Artikelseite aus. Und von hier aus werden wir den Global Header bearbeiten. Wir werden zuerst den Tablet-Modus erledigen. Kommen wir also zu Ihrem Responsive hierher. Gehe zum Tablet. Okay, wir kümmern uns um die Brotpunkte. Wir werden das auf Handy umstellen. Und es wird auch genau das Gleiche für den Stil tun . Wir richten uns nach rechts aus, für das Hauptmenü, die Ausrichtung auf das Weiß und dann den Stil. Wir werden zur Typografie herkommen. Stellen Sie sicher, dass dies auf Tablet eingestellt ist. Also gehen wir auch mit 14 Pixeln. Und da ist es. Okay, Next wird das Logo sein. Vergessen wir nicht, wir müssen das Logo oder 100% machen. Stellen Sie sicher, dass dies auf Tablets eingestellt ist. 100%, in Ordnung. Jetzt wechseln wir zur mobilen Ansicht. Das einzige, was wir hier tun müssen, wäre, das Navigationsmenü in die Mitte zu skizzieren. Eigentlich hätten wir die Ausrichtungen im Tablet-Modus nicht berühren sollen, also ist es okay, wir werden das einfach zurücksetzen. Ich gehe zum Inhalts-Layout und dann zur Ausrichtung hier. Lass es uns einfach in der Mitte behalten. Ich glaube, es wird ihnen besser gehen. Alles klar. Das ist es. Ich mach weiter und ich werde es aktualisieren. Werfen wir einen Blick darauf, was wir haben. Sehen wir uns die Seite an. Wählen wir die Artikelseite aus. Reduzieren Sie die Größe. Was haben wir hier drin? Alles klar, ist Tablet, das Tablet sieht gut aus. Und jetzt wird dies die mobile Ansicht sein, aber es scheint eine Fehlausrichtung mit dem Logo und dann dem Menü selbst zu geben . Also lasst uns das schnell beheben. Lass uns zurückgehen. Wir müssen das Logo vielleicht ein bisschen kleiner machen . Ich denke, es ist auch ein bisschen zu groß. Nehmen wir diese Änderungen also vor. Gehe zurück zum responsiven Handy. Okay, lasst uns die erste Ausrichtung des Logos hier bearbeiten, lassen Sie es uns in die Mitte setzen. Sagen wir, dieser ist ein Dissenter. Und dann ist vielleicht die Größe, vielleicht ein 100%, ein bisschen zu groß und denkt nicht darüber nach. Lasst uns das auf 75% senken. Lass uns weitermachen und Verabredungen. Und mal sehen, wie das aussehen wird. Gehen wir zurück, schauen wir uns die Seite an. Artikel. Ich minimiere, okay, viel besser jetzt und jetzt kannst du sehen, dass die Ausrichtung in der Mitte steht. Und da ist es. Sieht also viel besser aus, jetzt viel besser. Natürlich wird es noch ein paar mehr vornehmen, ein paar weitere Änderungen an den Headern, aber im Moment sieht es zumindest viel besser aus als das, was wir ursprünglich hatten. Sowohl der Homepage-Header der Global Header sehen besser aus. Wir werden den Leerraum in der Homepage-Header im nächsten Video behandeln . 23. Responsive Header Teil 2: Willkommen im zweiten Teil der Neugestaltung des responsiven Headers. Und ich habe vergessen, in einem früheren Video zu erwähnen als ich die Zeichen der Menüpunkte hier geändert habe, aus irgendeinem Grund scheint es die Desktop-Version beeinflusst zu haben . Sie können jetzt sehen, dass die Texte und nicht mehr Großbuchstaben, wenn so etwas passiert, einfach zurück zur Bearbeitung der Homepage-Header gehen. Was Sie tun möchten, ist einfach nur zum Menüelement zu gehen . Also klicke ich hier auf viele Elemente. Gehe zu Style, gehe hier zur Typografie und klicke einfach darauf. Das ist alles, was du hier sehen kannst. Es heißt „In Großbuchstaben transformieren“. Also bekräftigen wir im Grunde nur, Hey, wir wollen, dass das Lass uns in Großbuchstaben sein. Also werde ich wieder Updates machen und lass uns einfach zurückgehen, die Seite ansehen. Lasst uns auf die Homepage gehen. Okay. Und da gehst du. Ehrlich gesagt bin ich mir nicht ganz sicher, warum das passiert, aber für den Fall, dass es dir passiert, tu einfach das, was ich gerade getan habe. Okay. Vorher konnten wir die Tablet-Ansicht so aussehen lassen, was überhaupt nicht schlecht ist. Aber jetzt ist es an der Zeit , dass wir uns die mobile Ansicht ansehen. Und Sie können sehen, dass es wirklich aussieht, wirklich schlecht ist viel Leerzeichen und das Logo und das Menü, das Hamburgermenü online, aber wir müssen den Leerraum reparieren. Eigentlich ist dies das zweite Mal, dass ich dieses Video aufnehme , weil ich im vorherigen Video tatsächlich den mobilen Header reparieren konnte , um dort genau den gleichen Stil zu haben Sie werden das Banner in den Hintergrund einfügen lassen. Ich habe mich jedoch entschieden, eine andere Route zu wählen und stattdessen die gleiche Art von Header zu verwenden , die wir für den Rest der Seiten haben, wie die hier, auf der Sie den schwarzen Hintergrund haben, beschlossen, diese zu verwenden Header für die Homepage gehen Sie in der mobilen Ansicht heraus. Der Grund dafür ist, dass ich diese Gelegenheit tatsächlich nutzen wollte , um Ihnen einen sehr coolen Trick zu zeigen , den Sie verwenden können, wenn Sie mit Responsive Design arbeiten. Gehen wir zurück zur Homepage. Und ich möchte dir was zeigen, oder? Ich gehe zu Edit with Elementor, indem ich den Header der Homepage editiere. Hier ist das Ding. Okay, ich werde diesen Header-Bereich duplizieren. Ich klicke mit der rechten Maustaste hier rein. Duplikate. Im Grunde haben wir jetzt zwei Header. Der Unterschied ist, dass ich hier reinkomme zu diesem Abschnitt „Bearbeiten“ gehe. Ich gehe zu Stil, Hintergrundtyp, gebe ihm eine Farbe Schwarz. Okay, jetzt schau dir das an. Ich gehe zu Advanced, komme hier runter zu Responsive und lade dann ein, dass du Sichtbarkeitsoptionen hast. Wann genau möchten Sie diesen Abschnitt basierend auf einer Bildschirmgröße anzeigen ? Ich verstecke es auf dem Desktop. Ja. Wir möchten es noch nicht auf dem Desktop aufnehmen da wir immer noch den Homepage-Header auf dem Tablet verwenden . Wir wollen es auch bis dahin verstecken. Aber dann wollen wir es zeigen , wenn es zur mobilen Ansicht kommt. Als solches gehe ich jetzt zu unserem ursprünglichen Header und mache das Gegenteil. Gehen Sie zu Fortgeschritten, beruhigen Sie sich hetero responsive und verstecken Sie sich dann auf dem Desktop. Niemand will zeigen, wir wollen bis dahin zeigen. Aber wenn ich zu Hide on Mobile gehe, lass mich weitermachen und jetzt Updates. Und sieh dir das mal an. Lass uns jetzt weitermachen, schau dir die Seite an. Lass uns auf die Homepage gehen. Okay, damit du siehst, dass wir immer noch denselben Header haben. Aber jetzt können Sie für die Tablet-Ansicht sehen, dass wir immer noch denselben Header haben, denselben Header im selben Header. Jetzt, sobald es zur mobilen Ansicht kommt, haben wir jetzt den schwarzen Hintergrund mit der Logo-Idee des Zentrums und dann dem Hamburgermenü da unten. Und dann haben wir das Homepage-Banner. Und da gehst du. Dies ist also ein Trick, den Sie verwenden können, wenn Sie mit Responsive Design arbeiten. Sie können wählen, ob Sie einen bestimmten Abschnitt speziell auf dem Desktop anzeigen möchten . Und Sie können wählen, ob Sie bestimmte Abschnitte nur auf dem Tablet oder auf Mobilgeräten speziell anzeigen möchten . Eine Frage, die ich vielleicht noch habe, ist in Ordnung, warum habe ich diesen speziellen Header nicht einfach dupliziert und dann einfach diesen Header auf der Homepage benutzt diesen Header auf der Homepage und ihn dann einfach auf dem Desktop ausgeblendet und Tablet und dann auf Mobilgeräten angezeigt. Sie können zwei Head auf jeder Seite mit elemental angezeigt werden, zumindest funktioniert dieses Plug-In. Okay, also wenn du nachdenkst, ich dupliziere einfach diesen Header und zeige zwei Header auf derselben Seite an, verstecke einen auf Desktops oder sie wollen kein Handy, es wird nicht funktionieren, weil habe es tatsächlich versucht. Deshalb musste ich zur Homepage-Header gehen . Sie dann in derselben Kopfzeile einen zweiten Abschnitt, Erstellen Sie dann in derselben Kopfzeile einen zweiten Abschnitt, der jetzt speziell in der mobilen Ansicht angezeigt wird . Aber wir sind noch nicht fertig. Eigentlich möchte ich etwas anderes machen. Siehst du, du musst nicht immer mit dieser Tomate gehen. Sie haben das Logo und die Mitte oben und dann das Hamburgermenü oder darunter. Wir können hier immer noch zwei Spalten verwenden. So melden Sie sich auf der linken Seite an und lassen Sie das Menü ans Licht. Lasst uns das machen. Ich werde wieder mit Elementor bearbeiten, der Homepage-Kopfzeile und Paletten, damit diese Seite geladen werden kann, okay, etwas Bearbeitung. Der zweite Header gerade. Aber ich gehe jetzt in den Responsive-Modus um. Gehen wir zur mobilen Ansicht. Alles Kn hat genau das, was wir haben. Genau hier. Ich mach das. Ich klicke auf die Spalte mit dem Logo. Genau hier. Ich sage 50. Dann komme ich hier zur Logo-Spalte mit dem Logo, tut mir leid, auch alles im Menü. Und dann ändere das auch auf 50 , damit sie Seite an Seite stehen. Nehmen wir nun ein paar Änderungen vor. Ich klicke auf das Menü Bearbeiten, Icon, komm runter, treffe das Layout. Versuchen wir uns auf das Weiß auszurichten. Und dann werden wir es groß machen. Lassen Sie uns zum Stil übergehen. Hier unten haben Sie den Menüauslöser und schließen Sie das Symbol hinein. Und jetzt Icon Size mache ich das über 40 Pixel. Keda sollte groß genug sein. Und dann für das Logo, Bearbeiten wir auch das Logo. Bildgröße ist auf voll eingestellt links ausgerichtet. Gehen wir zu Style Max mit einem 100%. Okay, lass uns jetzt weitermachen. Aktualisierungen. Bevor wir es tun, lasst uns eigentlich halten. Lasst uns das auch machen. Wenn Sie auf das Hamburger-Menü klicken. Das wird der geleistete Job sein. Aber Sie können jetzt sehen , dass wir den Text sehen können. Der Text ist ganz weiß, daher müssen wir hier einige Änderungen vornehmen. Hier ist genau das , was ich tun werde. Ich gehe gleich hier auf das Schild-Drop-down-Menü. Und dann Hintergrundfarbe. Wir gehen mit Schwarz, Textfarbe, wir gehen mit Weiß. Und das sollte das sein. Ich weiß nicht warum wir es hier noch nicht sehen, aber es ist okay. Ich werde mit Updates fortfahren. Gehen wir zurück und schauen uns die Seite an. Gehe zurück zur Startseite, minimiere das Fenster. Alles klar, jetzt kannst du sagen: Okay, wir haben das Logo auf der linken Seite, das Menü auf dem Weiß. Wenn wir jetzt hier auf das Menü klicken, öffnet es sich. Bobby kann den Text, der interessiert ist, immer noch nicht sehen. Okay, lass uns zurückgehen und sehen , was passiert sein könnte. Und das wird sich sehr interessieren. Ich bin mir nicht ganz sicher, warum wir die Texte nicht sehen. Alles klar. Keine Sorge. Ich komme in den Responsive-Modus wechsle zurück zu Mobile. Klicken Sie auf das Menü direkt hier klicken Sie auf das Dropdown-Menü. Warum sehen wir den Text nicht? Lass uns zum Stil gehen. Kommen wir hier zur Typografie und Wow, ich bin mir nicht ganz sicher, warum die Größe hier statt eins ist, aber es sollte keine sein. Es sollte ein bisschen größer als einer sein. Das ist wahrscheinlich ein Fehler in Pixeln. Also entschuldige ich, ich werde das Problem erzählen, warum ich ein Pixel, manchmal habe ich das Gefühl, dass Element versucht, mich daran zu hindern, gute Videos zu machen. Ich weiß ehrlich gesagt nicht warum. Es hieß, ich werde nicht pixeln. Das ist nur, das ist einfach bizarr. immer, Sie können sehen, dass zumindest die Menüpunkte jetzt angezeigt werden, Wow, das ist sehr, sehr interessiert, ich sage Ihnen, Webdesign kann sehr seltsame, sehr seltsame Berufe sein. Manchmal fühlt man sich, man das Gefühl, dass all diese Elemente im Hinterkopf haben , dass sie nicht zurückkehren werden. Alles klar, also klicke ich jetzt hier rein. Da geht es. Jetzt kannst du sehen, dass ich die Menüpunkte habe und natürlich kannst du jetzt schließen. Das ist also im Grunde genommen um den responsiven Header neu zu gestalten. Ich werde tatsächlich das Gleiche für den globalen Header für die mobile Ansicht machen Gleiche für den globalen Header für , wo ich die erste Spalte zu 50% mache und dann die zweite Spalte mit dem Menüpunkt mache sind auch 50%. Und machen Sie auch das Menü-Hamburger-Symbol ein bisschen größer. Sie können also auch weitermachen und das tun. Aber das ist es zum Erstellen der Responsive oder Header für die Website. Vielen Dank, dass Sie sich das nächste Video der deutschen Veranstaltung angesehen haben, in dem wir uns nun die Neugestaltung der Fußzeile ansehen , um etwas verantwortungsvoller zu sein. Also du dann. 24. Responsive Footer: Werfen wir jetzt einen Blick auf die Fußzeile und versuchen, sie ansprechend zu machen. Und lass mich zuerst zur Tablet-Ansicht gehen. Und von hier aus hat es tatsächlich zwei. Sieht ziemlich gut aus. Ich glaube nicht, dass wir Änderungen in der Tablet-Ansicht vornehmen müssen . Aber sobald wir zur mobilen Ansicht kommen, haben wir hier etwas Platz und das Problem kann sehen die Kontaktüberschrift etwas zu nahe am Bild ist. Wenn wir wirklich klein werden, dann ist es das Gleiche. Außer das Bild sieht gerade sehr, sehr blau aus. Vielleicht wäre die beste Option für uns in der mobilen Ansicht dieses Bild einfach zu entfernen. Lassen Sie uns weitermachen und mit Elementor, der globalen Fußzeile, bearbeiten . Ich werde zuerst zum responsiven Tablet wechseln , nur um es zu bestätigen. So reaktionsschneller Modus, ich war gut im Tablet. Tablet sieht gut aus. Es sieht gut aus. Ich glaube nicht, dass wir etwas ändern müssen, außer vielleicht wirklich, weißt du was? Aus der Vorlagenansicht sieht das Bild Jody irgendwie verschwommen aus. Das liegt daran, dass es ein bisschen zu groß ist. Was wir tun können, ist das. Wir können die Größe der ersten Spalte reduzieren und die Spalte außerhalb der zweiten Spalte erhöhen . Mal sehen, was 50 wir machen werden. Es ist 50 und dann wird auch der rechts 50 sein. Aber das Bild ist immer noch ein bisschen verschwommen. Das ist also nicht so toll. Alles klar, lass uns wieder reingehen. Versuchen wir, einige Anpassungen vorzunehmen. Vielleicht mach das hier. Sagen wir 66. Ich denke, 66 ist Ordnung und sie werden die zweite Spalte, 33, ergänzen , damit sie in derselben Zeile sein könnte. Das ist immer noch in Ordnung, schätze ich. Aber was ist mit der mobilen Ansicht oder dem Schlüssel? Jetzt kann er sehen, dass das Bild einfach viel zu verschwommen ist. Und manchmal ist es am besten , dass wir uns einfach bewegen und bestimmte Arten von Elementen in der mobilen Ansicht nicht sicher sind. Also immer einfach hier ist das okay? Wir klicken auf die Spalte Bearbeiten Spalte wird zu Erweitert gehen. Und genau wie zuvor werden wir uns auf dem Handy verstecken und das war's. Also lasst uns weitermachen und aktualisieren. Werfen wir einen Blick darauf, was wir haben werden, um die Seite zu sehen. Gehe zur Homepage. Scrollen wir nach unten. Okay, also das einzige, was wir tun müssen, um etwas Polsterung für die Kontaktüberschrift hinzuzufügen . Lambdas gehen zurück zur Tablet-Ansicht, um zu bestätigen, dass es in Ordnung ist. Also ja, Vorlagenansichten sind in Ordnung. Es ist die mobile Ansicht , in der wir etwas Platz in den Kontakten unserer Schaltfläche hinzufügen müssen . Also lasst uns das schnell machen. Wir werden wieder mit Elementor Global Footer bearbeiten. Wir fügen dem einfach ein Muster zur Fußzeile selbst hinzu. Das machen wir einfach. In Ordnung, lass uns in den Responsive-Modus gehen, mobil. Okay, also werden wir diesen Abschnitt genau hier bearbeiten Abschnitt weiter bearbeiten. Und wir fügen einfach etwas Polsterung hinzu. Ich denke, das Muster von den Top 25 Pixeln sollte vernünftig sein. Nicht von oben, sondern sind eigentlich von oben. Ja, von oben. Entschuldigung. Geh weiter. Bates Seite. Seite minimieren scrollen Sie nach unten. Und das ist jetzt der Essenschwanz sieht viel, viel besser aus. Okay, also begleite mich im nächsten Video, in dem wir uns jetzt ansehen werden, wie wir die Homepage ansprechen. Und insbesondere das Homepage-Banner. 25. Responsive Homepage: Alles klar, also schauen wir uns die Homepage an oder reaktionsschnell. Und in den meisten Teilen ist es eigentlich nicht so schlimm. Dies ist für die Tablet-Ansicht. Offensichtlich können wir die Überschrift ein bisschen kleiner machen. Machen Sie die Banane auch etwas kürzer in der Höhe. Genau hier. Natürlich können wir dem Ball etwas Polsterung zum Reise-Abschnitt hinzufügen und lehrbar sein, um auch den Abschnitt am besten fortzusetzen. Aber ich denke, das ist alles, was wir tun müssen, weil der Rest tatsächlich ziemlich gut ist. Die einzigartige Kanaldesign-Abteilung sieht gut aus. Die Galerie ist in Ordnung. Besuche, unser Blog-Bereich ist in Ordnung. Es packt keine Bewertungen, alles in Ordnung. Für die mobile Ansicht, die wir hier angekommen sind, müssen wir den Text natürlich viel, viel, viel kleiner machen , wie Sie sehen können. Fügen Sie auch hier auch Polsterung für den Reisebereich hinzu. Und wir müssen etwas dagegen tun , dass wir die beiden Bilder für den zweiten Abschnitt nebeneinander stehen , idealerweise sein sollten, ich werde gerne reisen. Dann dieses Bild und dann unsere Kinder, die besten Orte und dann das Bild dieses Berges. Also müssen wir auch etwas dagegen unternehmen. Abgesehen davon sieht der Rest der Seite ziemlich gut aus. Die Galerie ist jetzt eine einzige Reihe, was in Ordnung ist. Der Blog-Bereich ist ebenfalls eine einzige Zeile. Ich will 22 Reihen, tut mir leid. Dann packt es jetzt nicht alle Bewertungen und die eigene separate Spalte und produziert dann auch, wie Sie sehen können, das bei. Alles. Richtig, also lasst uns weitermachen und anfangen, die Änderungen vorzunehmen. Also lasst uns mit Elementor bearbeiten. Wir werden zuerst mit dem Banner umgehen, denn das ist das Wichtigste Das ist das Hauptproblem. In Ordnung. Responsive Tablets. Was haben wir hier? Wir werden jetzt weitermachen und den Text bearbeiten. Und der Text war ungefähr 120 Pixel. Wie du siehst. Wir werden zwei große Zusammenbruch haben, nur ein bisschen viel kleiner. Sagen wir also 88 Pixel breit. Aber vergessen Sie nicht, dass wir eine Höhe für den Abschnitt festgelegt haben. Gehen wir jetzt zu diesem Abschnitt. Wir haben hier die Mindesthöhe. Wir werden das so weit wie möglich reduzieren. Sie sich keine Sorgen darüber, dass der Text vorerst die Kopfzeile überlappt . Aber versuchen wir, Ihnen eine angemessene Höhe für den Tisch zu geben. Und ich denke 519, mein Baby, zu klein, sagen wir siebenhundert. Siebenhundert scheinen in Ordnung genug zu sein. Vergessen Sie dann von hier aus nicht, dass wir ihm auch negative Margen geben. Jetzt, da wir die Größe von einhundert, zehnhundert auf 700 Frauen reduziert haben , gehen auch hier zur Advanced Einladung. Lassen Sie sich nicht von der Tatsache täuschen, dass Sie in den Randboxen nichts sehen . Es erbt tatsächlich die Ränder von der Desktop-Ansicht. Also lasst uns jetzt weitermachen und versuchen, dies zu reduzieren. Oh tut mir leid, ich hab vergessen, die Verbindung aufzuheben. Lass uns diese 10 machen. Alles klar. Ich gehe wieder nach oben. Es sollte darum gehen, lass mich einfach 150 minus geben , okay, das kann ich nicht tun. Lass mich das einfach versuchen. Minus 150. Okay? Ich denke, das ist ein bisschen zu viel. Lass uns runter gehen. Lass uns runter gehen. Okay, also sollte es etwa 123 Freizeitlautsprecher eins fünfundzwanzig, fünfundzwanzig Pixel sein. Für den Text selbst oder die Kopfzeile könnten wir das wieder ein bisschen kleiner machen. Und das war's. Was denkst du? Ich denke, das ist in Ordnung. 80 Pixel für den Header. Reduzieren Sie die Höhe dieses Abschnitts auf 700 Pixel, wodurch auch die negative Marge reduziert wird. Und ich denke, das ist in Ordnung, obwohl seien Sie vorsichtig, sehen Sie jetzt, dass, wenn wir die Tabelle auf die maximale Bildschirmgröße erweitern , sehen können, dass jetzt der Leerraum angezeigt wird. Das sollte uns jetzt sagen , dass alles in Ordnung ist, halt eine Sekunde. Wir müssen die negativen Vorstellungen erhöhen, eigentlich ist das eine andere Sache, die Sie wohlhabend sein sollten. Wenn Sie negative Ränder und den Responsive-Modus anwenden, stellen Sie sicher, dass Sie negative Ränder auf die größtmögliche Bildschirmgröße anwenden. Dies ist die größte Prägnanz wie möglich für die geneigte Ansicht bei 1024 um 878, wir werden die negative Marge erhöhen oder vielmehr in diesem Fall reduzieren. Denn wenn du negativ bist, reduzieren wir das. Es ist alles 158. Genau das ist es, also wenn wir das jetzt auf die kleinste Größe für das Tablet reduzieren, werden wir immer noch keinen Leerraum sehen. Und das war's. Okay, ich denke, das ist in Ordnung für das Tablet. Nehmen wir nun einige Änderungen am ersten oder zweiten Abschnitt vor. Und das gibt jetzt, was müssen wir tun? Für die Tablets? Wir können etwas Polsterung hinzufügen. Okay, wir gehen hier rein und es ist ein Abschnitt. Lass uns zu Advanced gehen. Und genau hier fügen wir einfach etwas Polsterung hinzu. Wir können zu den üblichen 25 Pixel und dann auch zu Effektpixeln für den Boden wechseln. Lass uns hier unten abkühlen. Wir machen genau das Gleiche auch hier drin. Ich zeige dir was wirklich Cooles. 25 Pixel von oben und dann 25 Pixel von unten. Wenn du dir das ansiehst, wirst du erkennen, dass es eigentlich nicht so gut aussieht. Ich meine, du hast ein Bild genau hier Ball, die Texte, die Textsspalte ist ein bisschen zu groß. Es ist ein bisschen zu groß. Awesome gehört auch zum zweiten Abschnitt. Was genau können wir also tun? Das einfachste, was wir tun könnten, wäre, dass jede Spalte einfach eine Breite von 100% hat. Anstatt also zwei Spalten zu haben, müssen sie Seite an Seite kommen. Wir haben zwei Spalten übereinander. also diese erste Kolumne hier Wenn ich also diese erste Kolumne hier drin gebe, geben wir diese nur ein oder einhunderteinhundert. Und dann geben wir diese Kolumne und auch 100. Und da ist es. Im Moment, selbst wenn wir auf einem Tablet auf die größtmögliche Größe expandieren , denke ich, dass es in Ordnung aussieht. Das sieht bei einem Tipp gut aus, aber stellen Sie sicher, dass die Bilder groß genug sind. Eine Änderung müsste nur genau hier sein, um dieser Schaltfläche „ Weitere Informationen“ etwas aufzufüllen. Ich klicke dort hinein, gehe zum erweiterten Muster und die Buddhisten fügen unten hinzu. Wir fügen hier etwas Polsterung hinzu. Lassen Sie mich sagen, 25 Pixel könnten ein bisschen zu viel sein. In diesem Fall vielleicht 15 Pixel. 15 Pixel sind in Ordnung. Und da ist es. Okay, lasst uns auch hier genau das gleiche Themensymptom machen. Ich klicke hier auf diese Kolumne. Der goto, die Spaltenbreite. Ich gebe ihm eine 100. Und dann auch die zweite Spalte hier drin, 100. Okay, und dann sieh dir das an. Idealerweise möchten wir diese Spalte direkt oben in dieser Spalte haben. Wie machen wir das? Nun, wir werden einfach zu diesem Abschnitt gehen, diese beiden Spalten halten, diese beiden Spalten halten zum Abschnitt gehen und hier zu Advanced gehen. Irgendwelche genau hier auf der Responsive. Diese Option wird angezeigt, um die Spalten umzukehren. machen wir auf dem Tablet. Wir werden das machen und auch mobil. Jetzt können Sie sehen, dass sich das Kind, die beste gegens-Säule, jetzt auf dem Berg befindet. Und genau so geht das. Ich mache einfach weiter und füge dem Vermieter Button hier drin etwas Polsterung hinzu . Polsterung unten, 2515 Pixel. Ich glaube, es war ein M & A ist okay, also lass uns wieder an die Spitze gehen. Scrolle nach unten. K. Wir haben viele Räume. Alles in Ordnung. Okay, sieht gut aus, sieht gut aus. Versuchen wir nun, die Größe auf die kleinste zu reduzieren und zu sehen, ob wir hier etwas tun müssen. Sieht in Ordnung aus. Sieht vollkommen gut aus. Und da ist es. Okay. Das war's für die Tablet-Ansicht. Was ist mit der mobilen Ansicht? Wechseln wir zum Handy. Okay, also offensichtlich müssen wir die Banane hier drin reparieren. Nun, ich scrolle einfach schnell hier rein und sehe den Rest der Seite. Der Rest der Seite sieht eigentlich ziemlich gut aus. Ja, das sieht gut aus. Alles befindet sich jetzt in einer einzigen Spalte , in der wir in einer Spalte und dann auf der Kontaktseite verwendet haben . Alles, was wir jetzt tun müssen, wäre, mit dem Banner umzugehen. Also lass uns das machen. Ich scrolle hier hoch. Gehen wir zur Rubrik. Alles klar, das erste, was wir jetzt tun werden ist für die Höhen. Es ist eine Mindesthöhe von 700 Pixel. Dies wird natürlich von der Tablet-Ansicht geerbt . Mal sehen, ob wir die Größe vielleicht ein wenig vergrößern können . Eigentlich. Ich denke 879, Versuchen wir etwas zu bekommen, sogar wie 870 Pixel vielleicht. Versuchen wir, die Größe ein wenig auf die größte Größe für die mobile Ansicht zu erhöhen . Jetzt würden Sie feststellen, dass es ein bisschen zu viel negativer Rand da Sie die blaue Linie sehen können und Sie sehen können, dass das Logo oben angezeigt wird. Was wir jetzt tun müssen, ist zu Advanced zu gehen. Und dann versuchen wir für die negativen Margen, dass wir es tatsächlich nicht in irgendwelchen negativen Margen brauchen. Eigentlich wollte es 0 schaffen. Ja, machen wir es einfach 0, da wir sowieso einen Blackout-Hintergrund haben. Was bedeutet McDonald's 0? Das ist für Mobilgeräte. Okay, also lasst uns von hier aus die Höhen reduzieren. Wir werden jetzt die Höhe von der Seite des Banners reduzieren , eher etwas Vernünftiges. Mal sehen. Ich glaube 535. Was ist mit 530? Ich denke, das ist in Ordnung. Fünf-Drittel-Hügel sieht gut aus. Scrolle nach unten. Okay. Ja. Ich glaube, es würde dir gut gehen. Das macht sehr klein. Und siehst du. Okay, also können die Texte werden, ist eigentlich ein bisschen zu groß. Also lass uns das machen. Ich gehe zurück, um die Überschrift Epigraphie zu bearbeiten. Wir werden versuchen, das so klein wie möglich zu machen. Und wenn wir jetzt die größte für die mobile Ansicht erweitern, haben Sie hier, okay, das bringt uns zu einer neuen Diskussion. Silicon ist genau hier auf der größten Größe für Mobilgeräte, das Texas, es wäre zu klein. Wenn wir versuchen, die Größe hier zu erhöhen, sieht es auf der höchstmöglichen Bildschirmgröße für das Handy gut aus . Das Problem, das ich weiß, ist, dass wenn wir die Bildschirmgröße so reduzieren die kleinstmögliche Größe für Mobilgeräte ist , dass die kleinstmögliche Größe für Mobilgeräte ist , da der Text jetzt etwas zu groß ist, was Sie in diesem Szenario tun können, den Stil zu wechseln Größeneinheit von Pixeln bis zum bewerteten Viewport überprüfen Sie den VW oder die Option hier, der VW ist die Breite des Darstellungsfensters. Was wir versuchen werden, ist zu versuchen, die Größe des Textes basierend auf der Breite der Bildschirmgröße anzupassen . Also sieh dir das an. Ich wechsle jetzt zu VW. Und lasst uns versuchen, mit einer Größe von zehn zu gehen. Für den Höchsten. Dies ist die höchste Größe, Bildschirmgröße für Mobilgeräte. Und wenn wir dann die Größe auf die kleinste reduzieren, können Sie sehen, dass der Text tatsächlich auch reduziert wird. Da reduzieren wir die Größe des Bildschirms. Das ist ein Tipp, den ich dir jetzt geben kann Wechseln Sie einfach zu VW im Gegensatz zu Pixeln oder K. Also vielleicht vielleicht eine Kleinigkeit, die wir tun könnten. Eine letzte Sache, die wir noch einmal tun könnten die Höhe etwas weiter zu reduzieren. Sagen wir 450 Pixel. Das sollte die letzte Änderung sein. Versuchen wir, diesen zu verkleinern. Und da gehst du. Okay, ich denke das ist, das ist in Ordnung. Das ist an dieser Stelle in Ordnung. Alles klar. Da gehst du. Scrollen wir einfach nach unten und sehen, was wir sonst noch tun können. Das ist so ziemlich genau das. Ich glaube, es geht uns gut. Lass mich das einfach ganz klein machen. Beweise, eine Spalte. Und da ist es, okay, eine letzte Sache, wir tun könnten, ist vielleicht die Größe des Knopfes hier nur ein bisschen zu reduzieren . Also lasst uns weitermachen und unten rechts hier bearbeiten , wir werden zum Stil gehen. Eigentlich werde ich zum Style gehen. Dann lassen Sie uns für die Typografie genau hier schnell in ihrer Größenmischung eingehen. Natürlich ist das auf Mobil eingestellt, und dann machen wir einfach weiter und machen es vielleicht. Mal sehen. Fehler und Pixel, vielleicht 14 Pixel, oder was können wir sonst noch ändern? Natürlich können wir auch den Grenzradius ändern. Lassen Sie uns dieses auf fünf Pixel reduzieren. Und da ist es. Okay, jetzt könnten wir versuchen , die Größe zu klein zu machen. Habe das eigentlich nicht getestet. Ich bin mir nicht sicher, ob sich dies auf die Tablet-Ansicht auswirken würde. Wird sich auf die Tablet-Ansicht auswirken und selbst die Desktop-Ansicht wird immer klein sein. Das liegt an der Sache, dass Sie sich entscheiden könnten, den Knopf einfach zu machen, klein zu machen. Alle drei sind Bildschirmgrößen. Oder du könntest einfach mit einem Medium gehen. Ich denke, Medium wird für Mobilgeräte gut sein. Alles klar. Das war's. Ich werde jetzt weitermachen Updates. Und da ist es. Wir haben unsere Homepage erfolgreich in einer Responsive aufgebaut . Danke fürs Zuschauen und natürlich sehen wir uns in der nächsten Klasse. 26. Erstellen des Homepage Header mit Elementor Pro: Okay, also fangen wir an, mit Elementen zu arbeiten, die durch den Wiederaufbau unseres Headers genehmigt wurden. Und ich zeige Ihnen, wie Vorlagen mit Elementen arbeiten, professionell sind. Das erste, was ich mache, ist, dass ich zum Backend gehe und den elementaren Kopf- und Fußzeilen-Builder deaktiviere. brauchen wir nicht mehr. Also deaktiviere ich und lass uns einfach einen Blick auf den nicht existierenden Header werfen, wir nicht mehr haben, und natürlich keine Fußzeile. Jetzt können Sie immer noch die Ungeschicke einer Schaufel sehen die Ungeschicke einer Schaufel und dann die Unternehmenstexte hier drin, das ist das Hallo Thema diese Lebensmittel zeigt, sind für uns. Alles klar, lass uns wieder reingehen. Und sobald Sie Elementor Pro installiert und aktiviert haben, sehen Sie genau hier, wo Sie eine Vorlage für das LM-Elementar haben, Sie sehen den Theme-Builder. Also mach weiter, klicke hier rein. Und jetzt können Sie die verschiedenen Arten von Vorlagen sehen , die wir erstellen können. Wir bauen den Header aus. Also klicke ich auf Plus, um den Header hinzuzufügen. Das Gute an Elementor Pro ist, dass Sie Zugriff auf eine Vielzahl von Vorlagen haben , die Sie verwenden können. Du kannst sie genau hier sehen. Verschiedene Stile für den Header. Sie können einige sehen, wissen Sie, Sie haben das Logo auf der linken Seite, die Social-Media-Symbole auf der rechten Seite, das Hauptmenü unten. So können Sie einfach eine dieser Vorlagen einfügen , die genau zu der gewünschten Art von Design passt. Aber ich baue uns einfach von Grund auf neu, weil ich dir zeigen möchte, wie das mit dem Elementar pro Elemente funktioniert. Also schließe ich das. Wir werden einfach wie zuvor wieder aufbauen. Ich komme sofort her erstelle unsere beiden Kolumnen. Abschnitt. Eine davon wird es etwa 30% geben, der andere etwa 70%. Und wenn ich jetzt zum elementaren Backend gehe, und jetzt kannst du sehen, dass wir das Site-Logo genau hier haben . Also ziehe ich das und lasse es hinein. Eine andere Sache ist, dass Sie möglicherweise eine Änderung mit dem elemental Pro-Logo-Element bemerken . Das ist die Tatsache, dass Sie tatsächlich Zugang zu den Höhen haben . Das Logo auf dem Stil mit dem Logo-Element, das vom elementaren Header- und Footer Builder-Plug-In bereitgestellt wird. Sie haben diese Optionen nicht, sodass Sie die Höhe des Logos von hier aus steuern können. Aber das werden wir noch nicht anfassen. Ich gehe wieder zum Back-End, wähle die Navigationsmenü-Elemente genau hier lass es hier rein. Und natürlich wird das Hauptmenü wählen. Richten wir uns an den richtigen großen Punkten aus. Wir stellen das auf Handy ein. Denken Sie daran, lasst uns unsere Typografie gestalten. Wir machen das in Großbuchstaben. Kehren wir zur Hauptsitzung selbst zurück, die beide Spalten enthält. Lass es uns in voller Breite machen. Für das Logo füge ich einfach einen schwarzen Hintergrund hinzu. So können wir zumindest vorübergehend das Logo sehen. Okay, so viel zu groß. Lasst uns wieder hier rein gehen. Für die maximale Breite wählen wir einfach 75% aus, genau wie zuvor. Wissen Sie, erstickt, um die Höhe in diesem Fall zu verwenden , noch eine Änderung. Richten wir die Menüpunkte vertikal richten sie an der Mitte aus. Und da gehst du. Und natürlich auch die Farbe. Das hab ich vergessen. Lasst uns die Farbe ändern. Tickt Clo2 primär. Und das ist das. Jetzt sieh dir das an. Hier unten hast du veröffentlicht. Wenn Sie auf Veröffentlichen klicken, sind Elemente hier Pool und ich sage: hey, wo möchten Sie diese bestimmte Vorlage anzeigen? Wir werden die Bedingung hinzufügen, nicht das Antazida, weil dies für die Homepage sein wird. Ich komme sofort her und wähle Singular. Und dann wird für Singlets sagen, okay, alle einzelnen Seiten, nein, wollten sich speziell auf der Titelseite teilen. Also wähle ich das aus. Und das ist, ich werde weitermachen und ich werde einfach speichern und schließen. Und das war's. Lass uns jetzt weitermachen und aktualisieren. Und ich zeige dir etwas sehr, sehr Interessantes. In Ordnung, lass mich eine harte Aktualisierung machen. Also hier ist eine dünnere Linie. Sie können sehen, dass die Menüpunkte genau hier angezeigt werden. Oh, übrigens, der Hover-Effekt, den er sehen kann, der Bindestrich, der auf dem Altersmenüpunkt sichtbar ist, der standardmäßig von Elementar-Pool, Menü und Menüelement bereitgestellt wird. So können Sie das beim Hover-Effekt ändern, wenn Sie den Manager hier langweilen möchten den Manager hier langweilen , ist, dass wir das Logo nicht mehr sehen. Wir können die Menüpunkte sehen, aber wir sehen das Logo nicht. Was passiert hier? Hier möchte ich Ihnen das Konzept des Z-Index vorstellen . Jetzt lasst uns wieder hier rein gehen. Zunächst verschieben wir die Hintergrundfarbe für den Header. Wir brauchten es nicht mehr. Aber sieh dir das an. Ich gehe rüber zu Fortgeschrittenen. Genau hier hast du das. Option aber sehr, sehr wichtig, sehr mächtig genannt Z-Index. Ich gebe diesem einen Wert von zwei Updates. Lasst uns wieder hier rein gehen. Machen wir eine sehr harte Aktualisierung. Und einfach so. Jetzt können Sie sehen, dass das Logo erscheint. Vorstand. Halte eine Sekunde fest. Was genau ist gerade passiert? Sehen Sie sich diesen Z-Indexwert genau hier an. Wann immer Sie ein Element haben, ein Abschnitt, der einen anderen Abschnitt überlappt, möchten Sie vielleicht Elemental mitteilen können , welches dieser Elemente Sie zuerst anzeigen möchten, was nicht der Fall ist. Du willst das andere vor den anderen bringen? In diesem Fall überlappt gerade das Binärbild unseren Header. Wir möchten, dass der Header beeinflusst wird, damit wir das Logo und das Hauptmenü sehen können . Daher müssen Sie dem Element, vor dem Sie erscheinen möchten, eine höhere Z-Indexzahl geben eine höhere Z-Indexzahl . Da wir dem Header den Z-Indexwert von zwei gegeben haben. Lassen Sie mich tatsächlich in die Sektion gehen, die unsere Banane hält. Lassen Sie mich also mit Elementar bearbeiten. Gehen wir hier zum Navigator-Bereich, fortgeschritten. Sie können genau hier sehen, dass wir keinen Wert für den Z-Index für den Abschnitt haben , der das Banner enthält. Aber wenn ich jetzt hier reinkomme und ich ihm einen Wert von drei gebe. Jetzt können Sie sehen, dass wir das Logo nicht mehr sehen, wir sehen auch das Hauptmenü nicht mehr. liegt daran, dass der Xin-Indexwert dieses Abschnitts, der die Banane enthält, jetzt größer als zwei ist. Aber wenn ich es jetzt gebe, siehst du, dass wir das Hauptmenü und das Logo haben . Genau so funktioniert der Z-Index. Nun, eine Frage, die Sie vielleicht haben, eine sehr gute Frage ist, Alex, halten Sie eine Sekunde fest. Bevor wir den Wert dieses Index von zwei an den Header gegeben haben. Wie können wir das Hauptmenü immer noch lösen? Aber wir haben das Logo nicht gesehen. Ich werde zu 100% ehrlich zu dir sein. Ich bin mir nicht genau sicher, warum das passiert ist. Ich schätze, vielleicht gibt es einen Code in Elementen , der dem Hauptmenü immer Priorität einräumt, um es immer anzuzeigen. Auch hier könnte es etwas sehr, sehr Einfaches sein, das ich einfach vermisse. Ich bin mir nicht ganz sicher. Entschuldige dich dafür, aber ich möchte ehrlich zu dir sein. Aber nimm es einfach für das, was es ist. Wann immer Sie eine Situation einführen möchten, in der ein Element das andere überlappt und Sie möchten, dass automatischen Elemente hinter der Show vorne einfach einen höheren Z-Indexwert geben. Eine Sache, die Sie vielleicht bemerkt haben, ist der plötzliche Leerraum der hier ganz oben nicht erscheint. Und das passiert, weil in vielen Fällen standardmäßig elementar wir in vielen Fällen standardmäßig elementar ein Muster von zehn Pixeln um die Elemente hinzufügen. Eine Möglichkeit, diese Art von Problem zu umgehen, ist es einfach, den Abschnitt zu bearbeiten , der in diesem Fall den Leerraum hat , es ist mein Header. Lassen Sie mich also weitermachen und den Elementar-Header bearbeiten. Ich werde selbst zu diesem Abschnitt gehen. Bearbeiten Sie also den Abschnitt und laden Sie dann hier ein, wo Sie die Spaltenlücke haben. Ich sage keine Lücke, überhaupt keine Lücke. Lassen Sie uns im Grunde aktualisieren, indem wir keine Lücke sagen. Wir sagen, Hey, wir wollen nirgends irgendwelche Muster. Jetzt wird das vom Leerzeichen abgelesen. Aber jetzt beachte das, weil wir Nein gesagt haben, überhaupt keine Lücken. Jetzt hat die Spalte, die ein Logo enthält, kein Muster mehr zwischen dem Logo und dem oberen Rand unseres Bildschirms. Gehe also einfach zu der Spalte mit dem Logo. Gehen Sie genau hier zum erweiterten Muster, wir sagen es nur, zehn Pixel Polsterung oben. Updates, die das Problem oder die Vorfälle lösen. Dies sind also einige der sehr kleinen nervigen Probleme, auf die Sie stoßen könnten , wenn Sie Elementar verwenden und wie Sie sie umgehen können. Aber fast fertig. Lassen Sie uns lieber den mobilen Header für unseren Header für die Titelseite erstellen . Und ist genau das Gleiche wie zuvor. Wir werden jetzt hier reinkommen den gesamten Abschnitt duplizieren. Und kommen wir raus, komm hier runter zum Bearbeitungsbereich für mobile Header. Wir werden die klassische Farbe Schwarz stylen. Und was brauchen wir dann? Was müssen wir sonst noch tun? Wir müssen in den Responsive-Modus wechseln. Gehe zum Handy. Und jetzt genau hier, editiere die Spalte, wir sagen 50%. Machen Sie dasselbe für die Spalte, die das Hauptmenü enthält. Und dann sag 50%. Wir können das Menü hier rechts ausgerichtet bearbeiten . Vielleicht mach es ein bisschen größer. Also lasst uns zum Stil gehen. Komm hier runter zum Toggle-Button. Die Größe, mach es ein bisschen groß. Auch für das Logo. Gehe zu Stil, maximale Breite, 100%. Ja, wir müssen auch die Optionen zum Ausblenden oder Ausblenden machen , also fortgeschritten. Gehen wir zum Responsive. Für diesen Abschnitt und diesen Abschnitt, der das Logo- und Nachfragemenü enthält. Wir gehen hier zu Advanced und reagieren dann. Ich sage „An Deck verstecken“, „Stop“, Auf dem Tablet verstecken“, aber dann auf dem Handy anzeigen. Gehen wir nun zur alten ursprünglichen Kopfzeile bearbeiten Sie diesen Abschnitt. Gehe zu Erweitert, gehe zu responsive. Versteck dich einfach auf dem Handy und das war's. Also lasst uns weitermachen und aktualisieren. Hoffentlich habe ich nichts vergessen , was hier zurückgekommen ist. Aktualisieren Sie die Seite. Mal sehen, was wir haben. Okay, so originell voraus oder ich wage es. Und das ist schräge Sicht, die gut aussieht. Und dann wird das jetzt die mobile Ansicht sein. Und David ist also genau so, wie man genau dasselbe auf dem Elementor-Produkt macht , das wir mit dem Elementor Kopf - und Fußzeile gemacht haben. Eine letzte Sache, bevor ich dieses Video schließe, lass uns zum Back-End gehen. Jetzt auf den Vorlagen. Es tut mir leid, dass Sie unter dem Theme-Builder anstelle unserer Vorlagen in einem Theme-Builder hier den neuen Header sehen, anstelle unserer Vorlagen in einem Theme-Builder hier den neuen Header sehen, den Sie erstellt haben. Sie können nach innen klicken, um es zu bearbeiten. Noch einmal. Wenn Sie dann den Namen ändern möchten, ist es sehr, sehr einfach. Du kommst hier runter zum Einstellungen-Button und dann direkt hier können wir diesen den Home-Header nennen. Wir können es zu Hause, zu Hause, den Home-Header im Grunde nennen . Und dann können wir dem Auftragskopf den Namen Global geben. Wenn Sie die Bedingungen für diese Ebene ändern möchten, möchten Sie den Kopf oder vielleicht denselben Header auf einer anderen Seite verwenden . Hier unten haben Sie die Speicheroptionen, die Sie dort hineinklicken. Jetzt haben Sie hier Zugriff auf das Display. Unsere Option für Bedingungen. Hier können Sie jetzt hineingehen, jetzt wechseln Sie vielleicht zu einer anderen Seite und so weiter. Und das ist es im Grunde genommen, um den Homepage-Header sowohl auf den Desktop - als auch auf mobilen Versionen mit Elementor Pro zu erstellen sowohl auf den Desktop - als auch auf mobilen Versionen . Danke fürs Zuschauen. Wir sehen uns in der nächsten Klasse. 27. Aufbau der Kontaktseite: Elementor Pro: Illumina zeigt Ihnen, wie Sie die Kontaktseite mit Elementor Pro neu erstellen können. Und konkret werden wir mit dem elementaren Pro-Formelement arbeiten . Ich gehe ins Backend. Und zuallererst werde ich das WP Forms-Plug-In deaktivieren , das wir nicht mehr benötigt haben. Also deaktiviere ich. Und gehen wir zurück zur Kontaktseite. Und natürlich, wenn sie noch irgendein Kontaktformular sagen werden . Aber ich gehe jetzt mit Elementor zu Edit. Da wir natürlich elements are pro verwenden, haben wir das Formelement, was absolut fantastisch ist. Du findest es auf dem Profi, du siehst hier das Formular. Ich lasse mich hier hineinklicken und diesen Block tatsächlich entfernen weil wir die Lipidformen nicht mehr hatten. Nehmen Sie jedoch kein Formular an und legen Sie es dann einfach auf den Titel „Kontakt“ ab. Genau wie beim WP Forms-Plugin haben Sie standardmäßig ein sehr, sehr einfaches Kontaktformular das hier drei Felder mit Namen, E-Mail und Nachricht enthält. Dies sind die Felder, die Sie hinzufügen können. einem anderen Feld, wie Sie auf Artikel hinzufügen klicken , wo Sie einen Typ haben, haben Sie verschiedene Arten von Brennstoffen. Sie können Tageszeit hinzufügen. Es kann sogar Datei-Uploads hinzufügen. Wenn Sie also möchten, dass Ihre potenziellen Abonnenten oder Kunden Dateien anhängen, die an Sie gesendet werden sollen, haben Sie dieses Feld. Sie können Elementar auch in Google Capture integrieren. Und dann können Sie die Recapture-Version eins und Version drei hier aus Sicherheitsgründen verwenden. Und dann hast du auch wie den Honeypot und so weiter, keine zusätzlichen Felder hinzuzufügen. Also lasse ich diese drei einfach. Dies ist jedoch natürlich sehr subjektiv, aber ich bevorzuge es, die Etiketten nicht zu haben. Ich bevorzuge es, nur Platzhalter anstelle jedes Feldes anzugeben, was für ein Feld das ist. Also verstecke ich das Label. Also habe einfach eine Namen-E-Mail-Nachricht. Um nun die tatsächlichen Brennstoffe selbst zu bearbeiten, klicken Sie in jeden bestimmten Beispielnamen. Ich klicke auf Name und lade hier ein, dass ich das Label selbst ändern kann, den Platzhalter ändern kann. Und natürlich werden wir es erforderlich machen. Und dann werden Sie unter Fortgeschritten Dinge wie die ID sowie den Kurzcode haben , den wir sehr, sehr bald verwenden werden . Das Gleiche gilt für E-Mail hier drin. Es ist erforderlich und dann senden Sie natürlich alle die Nachricht bei Bedarf auch. Sie können dieses Feld je nach Geschmack kleiner oder größer machen , und das war's. Okay? Hier haben Sie die Eingabegröße für den tatsächlichen Impuls für jedes Feld. Du kannst es klein, mittel, groß machen. Es liegt ganz an dir. Du hast Knöpfe. Möchten Sie die Tasten mittelgroß und groß machen, aber das ist nur der Sende-Button selbst. Sie können den Text direkt hier für den Absende-Button selbst ändern und so weiter. Nun, hier werden die Dinge sehr, sehr scharf. Aktionen nach dem Senden, was passiert wenn der Benutzer auf Senden geklickt hat? Genau hier? Standardmäßig wurden Aktionen bereits aktiviert. Sammle Einreichungen, die ich dir in nur einer Sekunde zeigen werde. Und dann per E-Mail, da diese beiden standardmäßig aktiv sind, haben Sie direkt hier auf Einsendungen geklickt und dann haben Sie E-Mail. Sammelt jetzt Einreichungen, die Sie tatsächlich im Backend sehen würden . Lass mich es dir einfach schnell zeigen. Sie werden im Backend sehen, sobald die Leute beginnen, das Kontaktformular hier einzureichen , wo Sie Elementar bei UCI-Einreichungen haben könnten Sie Einreichungen haben. Und hier fangen Sie an, den Namen der Person zu sehen und so weiter werden in der Tat sehr, sehr, sehr bald ein Experiment durchführen . Aber das war's für die Einreichungen. Jetzt mailen Sie gleich hier. Sie möchten eine E-Mail erhalten, dass jemand ein Kontaktformular auf Ihrer Website eingereicht hat. Genau hier können Sie die E-Mail-Adresse auswählen, um einen Ausweis zu erhalten. Natürlich stelle ich mein eigenes Admin-E-Mail-Licht dort hin. Und dann müssen Sie natürlich standardmäßig eine neue Nachricht von und dann den Namen Ihrer Website senden. Sie können dies natürlich anpassen. Dann enthält die Nachricht alle Felder. Hier haben Sie jedoch die von E-Mail, aus dem Namen, den Sie verwenden möchten, oder wählen Sie die vom Benutzer bereitgestellten Daten aus. Grundsätzlich sollte die von E-Mail die E-Mail sein, der gesamte Benutzer. Was du hier machen willst ist das, okay? Sie würden zu den Formularfeldern gehen, zu E-Mail gehen, zu Erweitert und dann hier einladen, sich den Kurzcode holen. Also kopiere den Kurzcode und komm wieder hierher, um eine E-Mail zu senden. Und irgendjemand hier von der E-Mail. Es war nicht einfach die E-Mail-ID einzufügen , damit Sie die E-Mail der Person tatsächlich sehen können , und dann auch vom Namen aus genau dasselbe tun, zum Feld Name Erweitert gehen und dann einfach schnappen Sie sich die Verknüpfung für das Namensfeld. Gehe zurück zur E-Mail und gib hier von name an. Füge das einfach ein. Und dann antworten sie natürlich, um auf die E-Mail eingestellt zu werden , weil Sie auf die E-Mail-Adresse der Person antworten möchten . Und das war's. Du kannst deinen CC hinzufügen, du bist blind, bist blind, kopierst und so weiter. Sie können die Metadaten auch hier hinzufügen, z. B. die Seite, die Sie als echte Person besucht haben, Datum, Uhrzeit usw. Sünde als HTML oder Flugzeug. Das ist sehr, sehr, sehr subjektiv. Es hängt von Ihrem E-Mail-Dienstanbieter ab. Wenn auch Schritte Satz Lambda squiggly bekommen , zeig dir, was das ist. Wenn Sie zu Ihren Formularfeldern zurückkehren, möchten Sie vielleicht erstellen als würden Sie das Formular aus irgendeinem Grund tatsächlich sehr, sehr lang und Sie möchten es aufschlüsseln. Wenn Sie Ihren Artikel für den Typ hinzufügen, haben Sie einen Schritt. Sobald Sie jetzt Schritt haben, haben Sie den nächsten. Nach dem Schritt können Sie also wieder weitere Felder hinzufügen. Was also passiert, ist, wenn sie die falschen Brennstoffe im ersten Abschnitt ausfüllen und auf Weiter klicken. Sie werden zum nächsten Abschnitt für das Formular führen, das sind im Grunde genommen die Schritte, wie Sie sehen können, dies ist Schritt eins genau hier. Und dann sieht man rechts Schritt zwei. Dafür wird das benutzt. Das sind Ihre Schritte sind Einstellungen. Und dann hast du auch die zusätzlichen Optionen wie Hey, willst du Nachrichten anpassen wie, okay, der Thermo-Sinn erfolgreich, du wirst dich in 24 Stunden bei dir melden, solche Dinge. Sie haben diese Option hier drin. Aber sie lassen mich vergessen, nach dem Absenden zu den Aktionen zurückzukehren , Sie haben viele, abgesehen von angeklickten Einreichungen, E-Mails, können Sie eine E-Mail an Sie senden, können Sie sie an eine separate Seite. Du hast einen Webhook. Und wenn Sie E-Mail-Verwaltungssoftware wie unsere aktive Mailchimp Kampagne verwenden, können Sie sie natürlich E-Mail-Verwaltungssoftware wie unsere aktive Mailchimp auch hier verbinden. Du kannst sie mit Slack Discord verbinden, öffne auch eine Popup-Nachricht bereitstellen. Sie haben also viele Optionen zu konfigurieren. Alternative Wende. Was passiert, nachdem der Benutzer das Formular abgeschickt hat? Das ist es im Grunde. Lasst uns weitermachen und das schließen. Und das ist, ich werde jetzt weitermachen und einfach aktualisieren. Und natürlich schauen wir uns die neue Seite gleich hier an . Ups, mein Internet benimmt sich schlecht. Noch einmal. Ich entschuldige mich. Okay. Das ist gerade Jetzt können Sie das neue Kontaktformular sehen , das mit Elementen von Pro Arte Lemon erstellt wurde. Ich zeige Ihnen ein Beispiel für die Einreichungen. Ich pausiere das Video und sende einfach eine Nachricht und dann siehst du die Ergebnisse hier drin. Willkommen zurück. Und wie Sie gerade sehen können, habe ich tatsächlich an Kontaktformulare gesendet , die ausgefüllt wurden, um von einem bis sieben Browsern Kontakt aufzunehmen. Einer von John James und dann einer von Bob Billy bei yahoo.com. Nun hätte ich das vorher darauf hinweisen sollen. Für das Kontaktformular können Sie den Namen genau hier ändern, können Sie den Namen genau hier ändern wo Sie den Formularnamen haben. Du siehst also, dass ich einfach meins in das Kontaktformular ändern muss. Und das ist mir aufgefallen, als ich das erste Formular aus John Fitnessstudios schicke . Sie können das Formular richtig sehen, Nemos neues Formular. Deshalb neues Formular, weil wir den Namen nicht geändert haben. Das zweite Mal habe ich den Namen in Kontaktformular geändert, ein neues Formular von Mobility eingereicht und dort kann jetzt gesagt werden, dass im Herbst jetzt unser Kontaktformular steht. Das war's im Grunde genommen. Sie haben die IDs, Sie haben die Seite, auf der das formelle Programm eingereicht wurde. Und natürlich können Sie die eigentliche Nachricht selbst sehen. Also klickst du gleich hier auf Ansicht. Sie können den vollständigen Namen, die E-Mail und dann die tatsächliche Nachricht des Benutzers sehen und eingeladen werden. Sie haben die zusätzlichen Metadateninformationen wenn die Nachricht gesendet wurde, welcher Browser verwendet wurde und so weiter. So ist das Kontaktformular mit Elementor Pro Walks im Grunde genommen . Danke fürs Zuschauen. Wir sehen uns in der nächsten Klasse. 28. Erstellen der Single: Lassen Sie mich Ihnen nun eines der coolsten Dinge zeigen, die Sie mit Elementen von Pro machen können , und das ist das Erstellen einer Vorlage für Ihre einzelnen Beiträge. Bevor ich das mache, lass mich dir einfach sehr schnell zeigen , wie du die Blog-Seite neu aufbauen kannst. Denken Sie daran, dass wir das Posts -Element der wesentlichen Add-Ons für diese Seite verwendet haben. Beide Elemente sind natürlich pro, Sie haben die Elemente speziell für die Anzeige Ihrer Beiträge. Ich zeige dir nur sehr schnell, wie es funktioniert. Du wirst es unter Pro finden, das ist es genau hier, Posts. Du wirfst es da rein. Und natürlich können Sie die Skin-Anzahl der Beiträge auswählen, Bild, Höhe und Bild anzeigen. Sie haben all diese Möglichkeiten da drin. Sie haben die Abfrage, die Sie von Beiträgen abrufen möchten , sind darauf fällig, Pool aus einer manuellen Auswahl oder Seiten. Möchten Sie nach Begriff einschließen? Auf diese Weise können Sie jetzt Dinge wie Kategorien, Tags usw. hinzufügen . Sie haben Ihre Paginierungsoptionen. Du könntest einfach Optionen und all das coole Zeug ausprobieren, aber dafür sind wir nicht da. Lassen Sie mich Ihnen zeigen , wie Sie die Vorlage für erste Winkelbeiträge erstellen. Jetzt lass mich einen auswählen, der genau hier Mode in Istanbul veröffentlicht wurde . Dies ist es, was wir standardmäßig haben. Und du kannst sehen, dass es überhaupt nicht gut aussieht. liegt daran, dass das Hello Theme das ist, das verwendet wurde, um diesen Beitrag anzuzeigen. Und es ist jetzt sehr, sehr, sehr hässlich, ich habe den Inhaltsbereich für diesen Beitrag sehr, sehr lange gestaltet, wie Sie sehen können. Aber dafür gibt es einen Grund. Ich zeige dir genau, warum ich mich dafür entschieden habe. Lassen Sie mich zunächst die Vorlage für unsere Beiträge erstellen . Also lasst uns zu elementar gehen, tut mir leid, Vorlagen. Und dann genau hier, Theme Builder. Und wir werden den Builder für einen einzelnen Beitrag direkt hier hinzufügen und dort klicken. keine Vorlagen gefunden, die eine erstellen möchten. Ja, also klicke ich auf Neues hinzufügen, als ob sie natürlich mit Elementen schlecht sind. Sie haben Zugriff auf eine Vielzahl von Vorlagen. Du kannst sie genau hier sehen. Alle vier Einzelbeiträge, so viele, aber ich werde das schließen. Bauen wir unsere Vorlage aus. Da wir die Vorlage für einen einzelnen Beitrag erstellen, haben Sie standardmäßig die Vorlage für einen einzelnen Beitrag erstellen, Zugriff auf diese Elemente unter der einzelnen Kategorie. Diese sind für Ihre Beiträge, daher wird der Beitragstitel offensichtlich nicht angezeigt, also werde ich ihn dort für den Beitragstitel fallen lassen. Jetzt zieht elemental standardmäßig die neuesten Beiträge ein, die als Beispiel beim Anzeigen des Vorlageninhalts verwendet werden sollen . Wenn Sie die Auswahl ändern lassen, gehen Sie hier zu den Einstellungen. Genau hier hast du den vorherigen Satz, du klickst dort rein. Und genau hier kann ich einfach in Mode tippen. Und stattdessen wird es tun, denn dies ist die, die ich alle Mode in Instanbul verwenden möchte . Klicken Sie auf Anwenden und Vorschau. Jetzt wird elemental den Inhalt dieses Beitrags für unser Beispiel verwenden . Okay, lass mich ein paar Änderungen vornehmen. Inhalatoren machen diese und H2 auf die Mitte ausgerichtet. Lassen Sie uns den Text ein bisschen größer machen. Vielleicht 58 Pixel, 56 Pixel so gut. Lassen Sie uns etwas Polsterung hinzufügen. Oben 25 Pixel, zwei Pixel unten ebenfalls. Alles klar, was ist das nächste vorgestellte Bild? Ziehen wir das da rein. Mach das eine f2. Und natürlich können Sie das vorgestellte Bild von der Post-Session und Istanbul sehen. Was kommt als Nächstes? Sie haben die Post-Info. kannst du da reinlegen. Standardmäßig zeigt es dem Autor das Datum und die Uhrzeitkommentare an. Ich möchte den Autor nicht anzeigen. Ich möchte den Namen und auch die Uhrzeit nicht anzeigen, also verschieben wir diese. Es hinterlässt Datum und Kommentare. Sie können diese beiden natürlich ändern, einfach auf Daten als Beispiel klicken und zum Beispiel das Symbol sagen, ich kann einfach das Symbol entfernen, eins ausfüllen. Sie können zusätzliche Metadaten hinzufügen, also klicken Sie auf Element hinzufügen. Und genau hier kannst du Dinge wie die Begriffe wie die Kategorie hinzufügen und so weiter, Kostüm und so weiter. Alles klar, ich werde das schließen. Wir haben also nur Datum und Kommentare. Gehen wir gleich hier zu unseren Elementen zurück. nächste Mal, wenn wir hinzufügen, wird der Beitrag unserer Inhalte sein. Also werden wir dort unten in den Post-Inhalt springen, direkt unter den Informationen. Lassen Sie mich einfach bestätigen, warum das ausgegraut zu sein scheint. Mir geht's einfach gut. Es wird hier angezeigt, wir haben den Post-Inhalt sehr, sehr, sehr lang oder breit. Was kommt als Nächstes? Was zeigen wir gerne an? Wir können die Nach-Navigation anzeigen. Wir haben Beitrags-Navigation. Lassen Sie uns das da rein lassen. Jetzt haben wir den vorherigen Beitrag, den nächsten Beitrag, natürlich kannst du sie so oft stylen wie du willst. Und schließlich können wir unsere Beitragskommentare hinzufügen. Poste also Kommentare ganz unten. Und das war's. Dies wird unsere Vorlage sein. Warum habe ich den Inhaltsbereich sehr, sehr lang gemacht? Ich möchte Ihnen zeigen, wie Sie ein sehr, sehr cooles neues Element namens Fortschritts-Tracker nutzen können. Möglicherweise haben Sie dies in einem bestimmten Blog gesehen, in dem Sie eine Bar haben in der Sie erfahren, wie viel des Inhalts konsumiert wurde oder wie viel Inhalt Sie noch lesen müssen , bevor Sie die artikel. Das ist der Fortschritts-Tracker genau hier. Also was ich tun werde, ist das, okay, ich werde es hier oben fallen lassen, direkt über dem Titel. Lassen Sie mich einfach mitteilen, wie es gerade funktioniert, Sie können sehen, wie sich die Fortschrittsbalkenidee bewegt, wir bewegen uns. Aber das Problem ist, dass wir, sobald wir die Bar passiert haben, sie nicht mehr sehen. Was ist der Sinn, das zu haben wenn Sie hier nach unten scrollen und nicht einmal gesehen haben, wie viel Inhalt noch übrig ist. Nun, lass mich dir einen sehr, sehr coolen Trick zeigen . Gehe zu Fortgeschritten. Wir bearbeiten den Fortschritts-Tracker übrigens Waren zu erweiterten Bewegungseffekten. Genau hier haben wir klebrig. Sag ja, wir stecken es ganz oben. Was das gerade bedeutet, ist, dass Sie, sobald wir scrollen, sehen werden, dass der Bogen immer da sein wird. Und du kannst jetzt sehen, bis wir ganz unten sind , dann ist die Bar fertig. Genau so macht man das als sehr, sehr, sehr coolen Effekt. Das kannst du auch für den Boden machen. Was ich glaube nicht, dass es funktionieren würde, weil Sie tatsächlich in der Unterluft nach unten scrollen müssen . Nein, es funktioniert eigentlich nicht. Ich hatte es nie ausprobiert. Also geh einfach mit Top. Geh mit oben. Und natürlich können Sie in Bezug auf den Stil das Fortschrittsgespräch ändern. Sie können einen Rahmen hinzufügen, Sie können einen Randradius ausblenden und so weiter. Für die eigentliche Fortschrittsüberprüfung selbst wird der Fortschritt immer relativ zum POSTAR-Inhalt sein . Wechseln Sie dies also, um Inhalte zu veröffentlichen und keine Inhalte für Anti-Seitenbeiträge. Sie müssen unsere Typen überprüfen, sogenannte oder horizontale. Dies ist der kreisförmige Stil , der sehen kann, dass ich das nicht persönlich mag, also gehe ich einfach mit der Horizontalen. Sie können den Prozentsatz hinzufügen , wenn Sie möchten. Es wird also fünfundzwanzig Prozent, dreiunddreißig Prozent und so weiter sagen. Du hast all diese Optionen für dich da drin. Das war's. Ich gehe weiter und klicke jetzt auf „Veröffentlichen“. Und genau wie bei einer Vorlage müssen Sie auswählen, wo Sie diese speziellen Vorlagen anzeigen möchten . Fügen wir die Bedingung jetzt standardmäßig hinzu, sie wird alles Singular sagen. Seien Sie vorsichtig, alle einzelnen Stunden beziehen sich auf alle Einzelseiten, die in Ihrer Titelseite enthalten sind. Es ist also nicht alles Singular. Klicken Sie hier auf den Dropdown-Pfeil. Jetzt siehst du Beiträge. Wähle einfach Posts aus. Das war's. Das war's. Das ist alles was du brauchst. Mach weiter und klicke jetzt auf Speichern und Schließen. Und das war's. Gehen wir also zuerst zur Titelseite, Titelseite zu bestätigen, was zu den Artikeln geht. Und lassen Sie uns wählen, sagen wir, die majestätische Stadt Glasgow muss diese Seite aktualisieren. Und da ist es. Okay. Scrolle nach unten. Scrolle nach unten. Jetzt bewegt sich die Bildlaufleiste offensichtlich sehr, sehr schnell, da der Inhaltsbereich hier sehr, sehr, sehr kurz ist. Wie Sie sehen können, sind es im Grunde nur ein oder zwei Absätze. Vielleicht nicht das beste Beispiel. Lass uns mit der Mode in Istanbul gehen. Auch hier muss ich diese Seite aktualisieren, um die Cache-Mode in Istanbul zu löschen . Und du gehst, das ist die Vorlage für unsere einzelnen Beiträge. Wir haben das TI-Tool, wir haben das vorgestellte Bild, wir haben die Informationen über die Pose, die Daten veröffentlicht wurden, Anzahl der Kommentare, den Inhaltsbereich, die Post-Navigation für der vorherige Beitrag und der nächste Beitrag. Und natürlich der Kommentarbereich. So erstellen mit Elementor Pro eine Post-Vorlage für Ihre Beiträge. 29. Elementor Pro Tipps: In Ordnung, also sind wir praktisch am Ende des Kurses. Und bevor ich abschließe, geben Ihnen Lambdas ein paar allgemeinere Tipps und Ratschläge, wie Sie mit der kostenpflichtigen Version von elemental arbeiten können. Jetzt haben Sie offensichtlich Zugriff auf so viel mehr Pro-Elemente , die wir nicht abdecken können. Aber es gibt eine, die ich wirklich in den Vorlagen für einzelne Beiträge hätte hinzufügen sollen, und das sind die Schaltflächen zum Teilen. Sie finden es direkt unter dem Inhaltsverzeichnis durch einen zusätzlichen Countdown- und Blockcodes, die Share-Schaltflächen. Dies bedeutet, dass es Ihren Nutzern oder Ihren Abonnenten ermöglicht , Ihre Artikel grundsätzlich in sozialen Medien zu teilen . Wenn Sie das also dort ablegen, können Sie die Plattformen auswählen. Vielleicht möchten Sie, dass sie auf Facebook, Twitter oder sogar per E-Mail teilen können . Sie haben diese Option da drin. Es ist sehr, sehr einfach zu bedienen, schauen Sie es sich unbedingt an. Jetzt haben Sie mit Elementor Pro auch Zugriff auf Dinge wie das Speichern von Vorlagen und das Speichern von Widgets oder Elementen als Global. Ein Beispiel hier ist das. Okay? Sagen wir zum Beispiel, lassen Sie mich für diesen gesamten Abschnitt den Navigator-Button direkt hier verwenden. Für diesen Abschnitt, der sowohl die Banane als auch die Überschrift enthält . Wenn ich diesen Abschnitt an anderer Stelle wiederverwenden möchte, könnte ich mit der rechten Maustaste klicken und dann einfach als Vorlage speichern. Ich speichere es als Vorlage. Ich kann ihm einen Namen geben, sagen wir die globale Bana, nur um sie auf einer anderen Seite wiederzuverwenden, kann ich die Seite speichern. Und es wird zusätzlich zu den Kopf- und Fußzeilen, die wir zuvor erstellt haben , unter Vorlagen sein. Aber jetzt sieh dir das an. Okay, wenn ich diese Vorlage woanders wiederverwenden wollte, lass mich diese Seite ansehen und eine weitere Seite öffnen. Sagen Sie zum Beispiel die Kontaktseite. Wenn ich das wiederverwenden wollte , wenn ich nicht hier bin, gehe einfach zu Edit with Elementor. Dann benutze das Template-Element, das du unten in Pro findest. Ich glaube, wenn ich mich nicht irre, ist es genau hier. Du siehst eine Vorlage genau hier. Ziehen Sie einfach den Job diese Vorlage dort hinein. Und jetzt werden Sie aufgefordert, die Vorlage auszuwählen , die Sie verwenden möchten, da wir unser globales Banner genannt haben. Jetzt können Sie inzwischen global sehen. Ich habe es hinzugefügt und los geht's. Jetzt hast du also die Header-Idee oder dass die banale Idee mit der Landzunge wo Reisen Abenteuer bedeutet. So können Sie Abschnitte auf Ihrer Website immer und immer wieder verwenden . Wir könnten aber auch einzelne Elemente oder sogar Spalten als globale Widgets speichern . Als Beispiel: Nehmen wir an, ich wollte, sagen wir diesen speziellen, unseren Aufruf zum Handeln oder zur Idee durch diese Angebote und Pakete wiederverwenden wir diesen speziellen, . Ich klicke hinein. Und ich könnte mit der rechten Maustaste auf das Dosierungs- und Paketelement selbst klicken und dann hier teilen, sehen Sie speichern als global. Klicken Sie auf Als Global speichern. Und ich kann dieses als „Call to Action“ -Widget bezeichnen. Nur als Beispiel kann ich das speichern. Eine andere Sache ist, wenn wir aufgefordert werden, erneut auf eine andere Seite zu gehen, sagen wir noch einmal die Kontaktseite. Und ich wollte genau dieselben Elemente verwenden. Alles nur zu tun ist, hier auf Global zu gehen. Und jetzt können Sie sehen , dass die Aufrufe, um es tatsächlich zu lesen, jetzt verfügbar sind. Ich kann einfach auf Drag klicken und es dann trotzdem einfach ablegen, ich möchte es ablegen, also nur kleine kleine Unterschiede. Sie können sie als Vorlagen sagen und wir verwenden, aber die tatsächlichen Elemente selbst können Sie diese verwenden. Sie können sie als globale Widgets sehen. Und wir verwenden sie auf Ihrer Website so oft Sie möchten. Dies sind also weitere zusätzliche Funktionen , die Ihnen mit Elementen von Probit zur Verfügung stehen. Auch hier haben Sie Zugriff auf so viele andere sehr interessante Elemente, Folien, Galerie, sogar auf die Anmeldeelemente. Sie möchten also Ihre Anmeldeseite mit Elementor Pro anpassen . Sie haben das Element für diese animierte Überschriftenanwendungsliste. 30. Course: Nun, das war's. Wir sind am Ende dieser Kursunterlagen und zeigen Ihnen, wie Sie eine voll funktionsfähige Website erstellen eine voll funktionsfähige Website erstellen können, die sowohl die kostenlosen als auch die kostenpflichtigen Versionen von Elementor verwendet. Es war mir ein Vergnügen. Ich hoffe, Ihnen hat der Kurs gefallen, wenn Sie es getan haben , bitte konstruieren Sie, wenn Sie eine Fünf-Sterne-Bewertung, eine schriftliche Rezension haben, lassen Sie die Leute wissen wie sehr Sie den Kurs genossen haben und alles. Also nur für den Fall, dass Sie kein Sondenelement gekauft haben, das reichlich dazu gibt. Bitte benutze meinen Affiliate-Link. Das bedeutet, dass ich eine kleine Provision bekomme. Wenn du meinen Link zu Elementor verwendest, ist es eine großartige Möglichkeit, mich zu unterstützen und zu unterstützen, was ich mache. Hier. Schließlich, im nächsten Abschnitt, werden wir Aktualisierungen des Kurses, unserer Spezialthemen, Sonderlektionen inhaltlich machen . Wenn Sie also daran interessiert sind, mehr über Elemente zu erfahren oder schauen Sie sich unbedingt an. Der nächste Abschnitt ist unten unten. Mein Name ist Alex, es war mir ein Vergnügen. Ich hoffe, Sie auch in einem meiner anderen Kurse zu sehen. Ich denke, wenn alles Fragen oder Kommentare zu irgendetwas, das in diesem Kurs behandelt wird, natürlich immer das Gefühl haben mich zu kontaktieren. Wenden Sie sich an mich. Wir freuen uns, all Ihre Fragen, Stühle und alles Gute zu beantworten . Bis bald.