Transkripte
1. EINFÜHRUNG: Willkommen zurück zu einer anderen großartigen Elementarklasse mit mir, kann Besser ein WordPress-Experte sein, und ich benutze Elementor seit 4,5 Jahren, um
meine Webseiten zu erstellen . Und ich zeige Leuten gerne, wie sie dieselben Fähigkeiten nutzen können , um Landingpages für
ihre Websites und für ihre Kunden zu erstellen . In diesem Kurs bringe ich Ihnen bei, wie man eine Zielseite für Fotografen
entwirft. Wenn Sie also ein Fotograf sind und wissen möchten, wie
Sie eine Zielseite für Ihre Website erstellen können. Dieser Kurs ist für Sie, aber nur Fall, dass Sie kein Fotograf sind, aber dennoch lernen möchten, wie Sie Elementor verwenden um großartige Landingpages zu erstellen. Dieser Kurs ist für dich. Wenn Sie diese Klasse beenden, haben
Sie die Fähigkeiten erworben, die Sie benötigen, um mit Elementor
erstklassige Landingpages erstellen zu können . , ohne mehr Zeit zu verschwenden Lassen Sie mich Ihnen also die Zielseite zeigen, die Sie in
der Klasse entwerfen werden , und dann loslegen. Nur drei. Das entwerfen wir also. Wenn du bereit bist und aufgeregt bist loszulegen, weiß
ich, dass ich es bin. Lasst uns gleich eintauchen.
2. Installieren des Themas: Das erste, was wir tun möchten, ist in unser Dashboard zu
springen und das Thema zu installieren, das steuert, wie unsere Website aussieht. Und das Thema ist das, was definiert, wie Ihre Website aussieht und funktioniert. Gehen wir also in das Dashboard und wenn Sie mehr über das Thema erfahren möchten, Cisco voraus und suchen Sie nach Tutorials einem WordPress-Theme auf YouTube oder einfach nur Google. In unserem Dashboard möchten
wir also in die Erscheinungsthemen eingehen. Und wenn Sie
WordPress zum ersten Mal installieren , wird standardmäßig ein Standardthema installiert. Und je nach Jahr wird
der Schmerz den Namen desselben Jahres erhalten. Moment sind wir im Jahr 2020 eins, mein Thema ist 2021, aber Sie haben auch 2019 und 2020 für Sie
verfügbar, nur für den Fall, dass Sie sie verwenden möchten. Aber was wir tun wollen, ist
ein anderes Thema namens Astra zu installieren . Und wie Sie sehen können, ist Astra eines der
hier aufgeführten Themen , da es eines der Themen ist, die ich am häufigsten verwende. Es muss für mich zu den Top gehören. Aber für den Fall, dass Sie es nicht sehen können, geben
Sie Astra hier in die Suchleiste ein. Astra-Überschreibung. Also werde ich es am Freitag installieren. Also lasst uns weitermachen und aktivieren. Klicken Sie also auf Aktivieren. Und jetzt ist unser aktives Thema Astra, wie Sie hier in diesem Pop-up sehen können. Und sie haben diese Nachricht, mit der Astro geliefert wird nicht so bereit, Startervorlagen zu verwenden und all das. Aber wir lernen,
unsere eigenen Webseiten von Grund auf neu zu erstellen . Also schließe ich das und schließe die Nachricht genau dort. Jetzt, da wir jetzt
das Astra-Theme verkauft und aktiviert wurden , können wir, wenn wir bereit sind, etwas über Elementor zu erfahren, elementor zu installieren und einen Überblick über den elementaren Arbeitsbereich zu
haben. Also lasst uns das in der nächsten Klasse machen. Wir sehen uns in Kürze.
3. Schnelles Update – Der neue Elementor: Willkommen zurück. Diese Lektion ist nun
eine kurze Randnotiz oder eine kurze Aktualisierung des
Elementor-Installationsprozesses. Wenn Sie an diesem Kurs
im Mai 2022 und darüber hinaus teilnehmen, werden
Sie feststellen, dass die
Elementor-Aktivierung jetzt
über einen Setup-Assistenten verfügt , der
aus mehreren Schritten besteht, die Sie ausführen müssen , der
aus mehreren Schritten besteht, die Sie ausführen müssen, um die grundlegenden
Teile von deine Webseite. Während ich diese
Klasse vor einigen Monaten erstellt habe, hatte
Elementor
diesen Setup-Assistenten nicht. Also möchte ich nur, dass wir den Setup-Assistenten
durchgehen. Aber alles andere, was
du in
diesem Kurs lernst , ändert sich nicht. Es ist immer noch derselbe
Prozess. Die einzige Ergänzung ist
der Setup-Assistent. Wie Sie jetzt sehen können, habe ich eine brandneue Installation von WordPress und
wir sind bei Version 6. Und was ich tun möchte, ist
zu Plugins, Add New. So können wir Elementor hinzufügen und diesen Prozess
durchlaufen. Ich suche jetzt nach
Elementor-Installation. Und jetzt, wenn ich auf Aktivieren klicke werde ich zu
diesem Setup-Assistenten weitergeleitet. Und wir können es zusammen
durchstehen. Also hier sind wir. Ich zoome nur ein bisschen heraus damit wir mehr Details sehen können. In Ordnung, jetzt werden Sie feststellen dass das erste, was
Elemental von uns verlangt ist, ein Konto zu erstellen, um das Beste aus Elementor
herauszuholen. Dies sind also einige der
Vorteile, die sich aus der
Anmeldung für ein Konto
bei Elementor ergeben. Aber die Sache ist, dass du kein Konto bei
Elementor haben
musst , um Elementor nutzen zu können. Also überspringe ich diesen Teil einfach. Der zweite Schritt besteht
darin, das heilige Thema, das
Elementor für uns gemacht hat, zu akzeptieren und fortzusetzen . Dies wurde von Elementor erstellt, aber wir verwenden das Astra-Thema, also überspringen wir einfach. Astra ist ein mächtigeres Thema. Der dritte Schritt besteht darin, unserer Website
einen Namen zu geben. Während du
dein WordPress installiert hast. Sie haben der Website einen Namen gegeben. Das ist der Name, der hier auftauchen
wird. Dies gibt uns jedoch die
Möglichkeit, den Namen in einen
anderen Namen zu
ändern, den wir möchten. Meine Website, und dann klicken
wir auf Weiter. Und wenn Sie ein Logo für
Ihre Website haben und es jetzt im Voraus
hinzufügen möchten. Sie können einfach die Medienbibliothek
öffnen
und sie aus
der Medienbibliothek auswählen oder von Ihrem Computer hochladen. Aber das werden
wir jetzt nicht tun. Also behalte ich diesen Schritt einfach bei. Und natürlich
können wir das Logo
später hinzufügen und ich zeige
Ihnen, wie das geht. Klicken wir auf „Überspringen“. Und jetzt kommen wir
zum allerletzten Schritt bei dem wir zwei Möglichkeiten haben. dem
Elementor-Editor können wir
unsere Homepage von
einer leeren Leinwand aus bearbeiten Mit dem
Elementor-Editor können wir
unsere Homepage von
einer leeren Leinwand aus bearbeiten. Oder wir können in Hunderten
von
Vorlagen stöbern oder unsere eigenen
Vorlagen importieren, wenn wir sie haben. Aber ich mache weiter und überspringe. Das. Wird auf
die Leinwand umgeleitet, wo wir jetzt
mit dem Aufbau einer Website beginnen können. Und los geht's. Also im Grunde war
das alles, was ich dir zeigen wollte. Es ist ein neues Update. Es war vor ein
paar Monaten nicht da. Jetzt ist es da. Aber alles andere in den kommenden Lektionen
bleibt gleich. Der Prozess zum Erstellen einer Landingpage bleibt immer noch derselbe. Also,
ohne weitere Zeit zu verschwenden, fahren
wir mit
der nächsten Lektion fort. Ich gehe zu diesem Burger-Menü
und klicke auf Exit to Dashboard. Verlassen wir diese Seite. Jetzt befinden wir uns im
Dashboard und können mit dem
Aufbau der Website beginnen.
4. Die Elementor: Willkommen zurück. In der vorherigen Lektion haben wir das Astra-Theme installiert und aktiviert. Wir sind jetzt bereit elementor zu installieren und haben einen schnellen Überblick über die Elemente sind Workspace. So können wir uns mit den Tools und Funktionen
vertraut machen mit denen
wir uns beim Aufbau unserer Zielseite befassen . Also lasst uns weitermachen und das machen. Lasst uns Elementor installieren. Also gehe ich rein, ich gehe einfach weiter und klicke zunächst auf Plugins. Und da dies eine
brandneue Installation von WordPress ist , muss
ich bereits Standard-Plugins installiert haben. Also gehe ich einfach weiter und wähle beide aus. Und in diesem Dropdown-Menü wähle
ich Löschen aus und wende es dann an. Lasst uns sie löschen. Und jetzt haben wir eine saubere Weste, mit der wir arbeiten können. Also klicke ich weiter und klicke auf Neu hinzufügen. Und wir werden zum WordPress-Plugin-Repository , wo wir nach Elementor suchen können. Es sollte das erste Ergebnis bei
über 5 Millionen aktiver Installation sein. Ich fahre fort und klicke auf Jetzt installieren. Und Sie werden feststellen, dass wir hier
viele andere Plug-Ins haben
, die den Namen Elementor enthalten. Warum ist das also? Andere Entwickler können Funktionen,
Tools und Funktionalitäten erstellen , um die Leistungsfähigkeit von Elementor zu erweitern. Und diese Leute haben das getan, weil
Elementor selbst, wie Sie sehen können , von Elemental.com erstellt wird, aber diese anderen Plugins von Drittanbietern werden von Drittanbietern entwickelt. Wir werden also einige dieser Plugins
genau hier verwenden ,
während wir unsere Zielseite erstellen, und Sie werden wissen, welches Plug-In spielt, welche Zeile. Aktivieren wir Elementor jetzt, wo es installiert ist. In Ordnung, jetzt haben wir nur ein Plugin installiert und dieses Elementor. Lassen Sie uns also eine Seite erstellen, damit wir den elementaren Workspace öffnen
können. Also gehe ich in die Seiten, alle Seiten. Und wie ich bereits erwähnt hatte, ist
dies eine brandneue Installation von WordPress. Also muss ich hier bereits Standardseiten erstellt haben, aber ich brauche diese beiden nicht, also wähle ich die beiden aus. Und in diesem Dropdown-Menü gehe
ich in den Papierkorb und wende das an. Jetzt haben wir keine Seite, also sage ich „Neu hinzufügen“. Und wir können unserer Seite einen Namen geben. Sagen wir also zu Hause. Nehmen wir an, das ist unsere Homepage. Genau hier ganz rechts. Unter Vorlage wähle ich im Dropdown-Menü Elementor volle Breite aus. Dann klicke ich auf „Veröffentlichen“. Und jetzt ist unsere Seite veröffentlicht. Und jetzt, da wir unsere Seite bereit haben, klicken
wir auf Bearbeiten mit Elementor wird
zum Frontend weitergeleitet , wo wir die Seite bearbeiten werden. Also hier sind wir im Frontend. Und wenn wir die Seite bearbeiten, wird sie genau so aussehen. Also bearbeiten wir
die Seite tatsächlich und sehen die Ergebnisse in Echtzeit. links, genau hier, haben
wir diesen unteren Bereich genau hier. Dieser untere Bereich hier hat ein paar Optionen. Wir haben den Update-Button, da wir hier
Änderungen vornehmen , klicken wir auf Aktualisieren. Und wir klicken hier auf das Symbol für die Vorschauänderungen , um die Seite mit den Änderungen
und ohne diese Tools anzuzeigen . Und hier haben wir den Responsive-Modus. Hier klicken wir, wenn wir
unsere Seite auf verschiedene Bildschirmgrößen,
Smartphones, Tablets und Desktops reagieren möchten unsere Seite auf verschiedene Bildschirmgrößen,
Smartphones, Tablets und Desktops reagieren . Und das machen wir so wie wir, während wir diese Zielseite ansprechen. Und das Nächste hier ist der Verlaufsbereich in dem wir hier
eine Liste aller Schritte haben, mit denen wir vorgenommen wurden, alle Änderungen, die wir vorgenommen haben, wenn wir unserer Seite in dieser Sitzung
Elemente hinzufügen . Wenn
ich zum Beispiel einen zweispaltigen Abschnitt wie diesen hinzufüge und dann vielleicht
einen dreispaltigen Abschnitt wie diesen hinzufüge. Jetzt haben wir zwei Dinge hinzugefügt. Wenn wir also in den Verlauf eingehen, werden
Sie feststellen, dass wir
diesen Abschnitt zuerst hinzugefügt haben und dann diesen Abschnitt hinzugefügt haben. Und wir können direkt hier klicken, um zu dem Zeitpunkt
zurückzukehren , an dem wir nur diesen Abschnitt hatten. Dies ist also wie ein Zeitreisegebiet, in
dem Sie zu einem bestimmten Zeitpunkt
gehen können in
dem Sie zu einem bestimmten Zeitpunkt
gehen Sie bestimmte Änderungen hatten, als Sie nur bestimmte Elemente auf eine bestimmte Art und Weise aussahen. Und wir werden sehen, wofür all diese anderen Optionen es gibt. Aber der Teil wird mit
dem meisten interagieren , ist dieser Bereich hier. Und dies ist der Bereich, der uns
alle Tools und Funktionen bietet , die wir hinzufügen möchten, alle Elemente, die wir unserer Website hinzufügen möchten. Wenn Alco zum Beispiel dieses Panel reduziert hat, werden
Sie feststellen, dass wir ein anderes Panel haben, auf dem Pro steht. Die Tools im Basic-Panel sind also kostenlos. Wenn wir das reduzieren und in das Panel gehen, werden
Sie feststellen, dass sie die kleine Sperre
genau hier haben , um zu zeigen, dass diese Tools nicht dorthin
gezogen und abgelegt werden können,
wenn Sie versuchen zu ziehen . Dieses Popup, das besagt, dass Sie es müssen, müssen Sie die Pro-Version von
Elementor haben , um diese verwenden zu können. Und dann lasst uns das zusammenbrechen. Dann haben wir mehr unter den allgemeinen und viele andere Tools unter all diesen Panels
eingebettet. Wir werden also mit den Panels arbeiten, die
die freien Elemente haben, weil sie
mehr als genug sind , um die Dinge zu erreichen, die wir benötigen, um diese Zielseite genau hier zu erreichen. Die andere Sache, die ich hier erwähnen wollte
, ist , dass wir beim Hinzufügen von Plugins an die Plugins von Drittanbietern erinnern,
die wir hinzugefügt haben mich in das Dashboard gehen lassen
und in Plugins gehen lassen. Sagen wir „Neu hinzufügen“. Lass mich nach elementaren suchen. Denken Sie also an diese Plugins von Drittanbietern über die
wir gerade gesprochen haben. Wenn wir ein Plugin von Drittanbietern installieren, das erstellt
wurde, um die Leistungsfähigkeit von Elementor zu erweitern, wie wichtige Add-Ons für Elementor, werden wir dies später installieren. Es wird genau hier als Panel auftauchen. So wichtige Add-Ons für elementar, wir mit
all den zusätzlichen Tools auftauchen werden dass
wir mit
all den zusätzlichen Tools auftauchen werden, die es in Elementor einbringt. Und Sie werden feststellen, dass einige
dieser Funktionen, die mit
diesem neuen Plugin kostenlos sind diesem neuen Plugin kostenlos sind hier in der Elementor Pro-Version aufgeführt sind. Während Elementor selbst diese Tools auflädt, haben
diese Leute
Tools erstellt , die dasselbe tun, aber kostenlos zur Verfügung gestellt werden. Und noch etwas, sagen wir, wir sind drin. Wir sind hier drin und bearbeiten Sachen und wir möchten etwas hinzufügen. Wir wollten ein Tool,
ein Element, von hier aus ziehen , aber wir können es nicht sehen, weil wir im Moment was wir diese Einstellungen für diesen Abschnitt haben, fortfahren und genau dort auf dieses Menü klicken können. Und es werden diese Panels aufrufen, die Werkzeuge haben. Wenn Sie diese Tools nicht sehen können, klicken Sie auf dieses winzige Symbol genau hier und es werden die Tools angezeigt. Dann haben wir hier mehr Einstellungen, mit denen wir interagieren können, während wir Fortschritte machen. Das ist also ein schneller Überblick über den elementaren Arbeitsbereich. Und um mit dem Erstellen einer Webseite zu beginnen, müssen wir nur einen Abschnitt erstellen. Und die Abschnitte sind
nach den verschiedenen gängigen Anwendungsfällen strukturiert . So können wir eine doppelte Spalte wie diese haben. Und jetzt ist dies ein zweispaltiger Abschnitt. Die Spalten sind durch diese gebrochenen schwarzen Linien abgegrenzt. Und der Abschnitt ist durch diese blaue Grenze abgegrenzt. Und wir können die Größe ändern, und wir können
die Spalten einfach ziehen , um die Größe zu ändern, wenn wir möchten. Und wir können auch mit der rechten Maustaste klicken und eine Spalte duplizieren. Und jetzt haben wir drei Spalten. Um Elemente innerhalb einer Webseite hinzuzufügen, müssen wir nur auf das Pluszeichen klicken
oder darauf klicken, um die Tools anzuzeigen. Wenn ich also klicke, werden die Elemente angezeigt und wir können jetzt nacheinander mit dem
Ziehen beginnen . Und jetzt, wenn wir ein Element aktiv haben, wie jetzt ist es das Bild, das wir bearbeiten, der Elementname ist, der hier erscheinen wird. Welches Element auch immer
hier ausgewählt wird , ist das Element, das hier oben angezeigt wird. Wenn ich diesen Abschnitt
auswähle, bearbeiten wir jetzt den Abschnitt. Wenn ich dieses Bild auswähle, bearbeiten wir
jetzt das Bild, was bedeutet, dass diese Einstellungen für das Bild oder rechts gelten, also ist das nur ein schneller
Überblick über die Elemente, die Workspace sind. Ich hoffe, Sie kennen jetzt einige der Tools und Funktionen von Elementor, mit denen Sie interagieren werden. Aber natürlich werden Sie verstehen, wie meisten dieser anderen Dinge
verwenden können, die wir beim Erstellen
einer Landingpage nicht berührt haben, denn das ist tatsächlich der Grund warum wir diese Klasse haben der erste Ort, damit Sie sich an die Arbeit mit Elementor
gewöhnen können. Das nächste, was wir jetzt tun wollen, wenn ich zu unserem Bezugspunkt springen könnte ist die Navigationsleiste zu bauen. Und die Navbar besteht aus zwei Dingen, dem Logo und dem Website-Menü. Beginnen wir also damit, das Website-Logo hinzuzufügen. Lass uns das in der nächsten Klasse machen. Wir sehen uns in Kürze.
5. Das Adding hinzufügen: Willkommen zurück zu einer weiteren fantastischen Lektion. Es ist also an der Zeit, unsere Website-Navigationsleiste hinzuzufügen. Und wir möchten mit unserem Logo beginnen. Aber hier ist das Ding. Wir müssen ein Plugin hinzufügen, das uns hilft,
diese Napa zu erstellen , da es nur ein eigenständiges Element ist. Also möchten wir ein Plugin installieren. Also gehen wir in Plug-Ins im Dashboard ein. Plugins fügen eine neue Suche nach Elementor hinzu. Und das wird
diese elementaren Plugins genau hier aufrufen . Und wir suchen nach Header-Ordner-Builder für Elementor so oder Jahr genau hier, wird
Elementor Header Footer Builder jetzt mitgeteilt. Und lasst uns das aktivieren. Jetzt ist Elementor Kopf- und Fußzeilengenerator
aktiviert und wir können über das Erscheinungsbild darauf zugreifen. Elemente sind Kopf- und Fußzeilen-Builder. Lasst uns weitermachen und darauf klicken. Und da wir noch keine Kopf- oder Fußzeile erstellt haben, haben
wir hier keine aufgeführt, also lasst uns fortfahren und erstellen, Neu hinzufügen. Und wir können das überspringen. Das brauchen wir nicht. Und wir geben unserem Nav-Header einen Namen. Also lass uns weitermachen und es
nennen, nenne es wie du willst. Also nenne ich es einfach mein Navi. Es ist eine Nav-Bar. Und wir haben all diese Möglichkeiten direkt vor uns. Als Nächstes möchten wir den Vorlagentyp auswählen. Es ist ein Header. Und das wird diese Optionen direkt
hier unter dem Display aufrufen . Wo sollten wir entscheiden, ob
die Navbar auf der gesamten Website angezeigt werden soll , unabhängig davon, welche Webseite
Sie besitzen, sollten Sie
die Navigationsleiste weiterhin in den Top-Benutzerrollen haben können . Lass uns weitermachen und alles sagen. Das heißt, wenn Sie ein Administrator sind und Personen
unter sich haben , die auch die Website bearbeiten. Sie können einschränken, wer
Ihre Navigationsleiste bearbeiten kann, damit jeder sie bearbeiten kann. Ich lasse es überhaupt. Und dann mal sehen, genau hier ganz rechts möchte
ich in die Vorlage gehen, die Fehler ändern das in Elementor volle Breite. Und unter den Astro-Einstellungen möchte
ich unter die Seitenleiste gehen und
kein Seitenleisten-Inhaltslayout sagen , volle Breite gestreckt. Und lassen Sie uns diese Standardeinstellungen deaktivieren, die
mit Astra primär geliefert werden, und sagen wir „Veröffentlichen“. Jetzt ist unsere Navigationsleiste veröffentlicht. Wir wollen ins Frontend gehen und anfangen, es so auszusehen. Was wir also tun müssen, ist mit Elementor bearbeiten zu klicken. Aber bevor wir das tun, möchte
ich nur ins Aussehen gehen Elementor, Kopf- und Fußzeilenbauer. Und Sie werden feststellen, dass wir es jetzt hier aufgelistet haben. Wir haben es gerade erstellt und jetzt ist es unter unserem Plugin
aufgeführt. Wenn ich also auf Bearbeiten klicke, wird es zu
dieser Seite zurückgeführt und wir können jederzeit Änderungen an diesen Einstellungen
vornehmen. Dann klicken wir auf Edit with Elementor. Und jetzt wurden wir ans Frontend gebracht, wo wir
jetzt mit dem Bau der Nav-Bar beginnen können . Gehen wir also hinein, sagen
wir „Neu hinzufügen“ und wir fügen einen zweispaltigen Abschnitt hinzu. Und jetzt können wir
diese Spalte so ziehen , dass sie kleiner als die rechte Spalte da diese Spalte natürlich länger
ist als die dann die Logo-Spalte. also wieder reingehe, klicke
ich auf das Pluszeichen. Und dann ziehen wir ein Bildelement da rein. Und jetzt können wir unser Logo hier reinlegen. Und denken Sie daran, denn dies ist unser aktives Element das wir hier bearbeiten und wir können dort
hineinklicken und unser Logo hinzufügen. Und da ich noch keine Bilder hinzugefügt habe, wähle
ich Dateien hochladen aus und wähle Dateien aus. Und ich hatte diesen Assets-Ordner bereits hier vorbereitet. Wenn Sie es öffnen, enthält es alle Elemente, die auf der Website verwendet werden. Das bedeutet, Bilder einzuschließen. Alle Bilder sind da. Nur wenn du mitmachen willst, kannst
du dieselben Bilder verwenden, die in meiner Arbeit verwendet werden. Wir haben auch die fertigen Ergebnisse genau hier. Sie können diese Landingpages also importieren und sie
sehen genau wie unser Land, unsere letzte Landingpage und wir haben das Logo. Also importiere ich den Login vorerst. Doppelklicken Sie darauf. Und jetzt, da es importiert wurde, klicke
ich auf Medien einfügen. Und jetzt ist unser Image wichtig, aber weil diese Hälfte des Namens weiß ist, können
wir es vorerst sehen. Lassen Sie uns also etwas gegen die Hintergrundfarbe unternehmen. Also klicke ich zuerst auf Update the. Und jetzt geh in dieses Burger-Menü. Klicken Sie auf die Einstellungen der Burger-Menüseite. Und ich geh rein. Hintergrund, Hintergrundtyp. Klicke das an. Und in diesem kleinen Feld hier ziehen Sie das
einfach und ändern Sie die Hintergrundfarbe in Schwarz und aktualisieren Sie es dann. Damals hat die gesamte Website einen schwarzen Hintergrund. Schließen Sie diesen blauen Bereich und kehren Sie zu unserem Bearbeitungsbereich zurück. Überschreiben. Lassen Sie uns also eine Vorschau der Änderungen anzeigen. In. So sieht unser Logo aus. Das nächste, was wir tun wollen, ist unser Website-Navigationsmenü hinzuzufügen, und das machen wir in der nächsten Klasse. Wir sehen uns in Kürze.
6. Das Navigationsmenü hinzufügen: Willkommen zurück. Es ist jetzt an der Zeit, ein Navigationsmenü der Website hinzuzufügen. Springen Sie also wieder in unseren Arbeitsbereich. Was wir also tun wollen, ist
in dieses Feld zu gehen und auf das Pluszeichen genau dort zu klicken. Und hier drin tippen wir nav. Und wir haben hier ein paar Navigationsmöglichkeiten. Aber denken Sie an eines der Plugins, wir haben gerade den
IIS-Header-Footer-Builder für Elementor installiert , und dafür haben wir HF hier. Also ziehen wir das und lassen es genau dort fallen. Jetzt erwarten wir ein Menü, aber es gibt kein Menü. Lassen Sie uns also eine Vorschau anzeigen, um die Änderungen zu sehen. Keine Speisekarte hier. Was passiert also? Nun, das ist immer noch ausgewählt. Wenn Sie sich diesen Bereich hier ansehen, werden
Sie feststellen, dass es
keine Menüs auf Ihrer Website gibt . Gehe zum Menübildschirm, um einen zu erstellen. Also müssen wir in das WordPress-Dashboard gehen und ein Menü
erstellen, das wir hier in diesem Feld
anzeigen werden . Was ich tun möchte, ist in einer anderen Registerkarte, gehe in das Dashboard. Also klicke ich darauf und
gehe zurück ins Dashboard, gehe zurück ins Dashboard solange dieser Tab noch geöffnet ist. Und ich möchte in die Optikmenüs gehen. Und jetzt hier drin werden Sie feststellen, dass das erste, was ganz oben hier
ist, die Bearbeitungsmenüs des Menüs stehen. Erstellen Sie unten Ihr erstes Menü. Und wir können weitermachen und ein Menü erstellen. Also geben wir ihm einen Namen. Meine Speisekarte. Und machen wir es zum Hauptmenü und dann zum Menü Erstellen. So erstellen Sie ein WordPress-Menü, das dann im Frontend angezeigt werden kann. Beachten Sie jetzt, dass wir das Menü bereit haben, es heißt Menüelemente aus der linken Spalte hinzufügen, diese Spalte hier. Dies sind unsere Menüpunkte. Dies sind Menüpunkte 1, 2, 3, 4, 5, 6 Menüpunkte. Dann können die Menüelemente Webseiten sein, können Blogbeiträge
sein, benutzerdefinierte Links, die Sie erstellt haben. Sie können Inhaltskategorien sein. Was wir also erstellen müssen, Sie können jeden dieser Arten von Inhalten erstellen und als Menüpunkte in Ihrem Menü
anzeigen. Ich möchte vorerst nur benutzerdefinierte Links erstellen, wir konzentrieren uns auf die Landing Page sodass wir keine Seiten mehr benötigen. Also erstelle ich eine benutzerdefinierte URL. Ich füge einfach einen Hashtag ein. Ich kann verwenden, dass Hashtag ein Platzhalter für
eine imaginäre URL ist , auf die dieser Link verweisen könnte. Aber jetzt sagen wir einfach über Zum Menü hinzufügen. Und jetzt ist es ein Menüpunkt. Ich füge eine weitere, eine
weitere URL hinzu, nur einen weiteren Hash. Nennen wir diesen Blog. Aber natürlich wäre
dies in einem realen Szenario etwas wie der HTTP-Schrägstrich www dot. Vielleicht, wenn Sie ein YouTube-Video haben ,
das Sie als Menüpunkt mit
jemandem teilen möchten . Aber natürlich lassen wir es uns jetzt einfach als Hash belassen. Zum Menü hinzufügen. Und das mache ich noch zwei Mal. Noch ein Mal. Zum Menü hinzufügen. Und jetzt haben wir vier Menüpunkte. Also gehe ich weiter und speichere das Menü. Und weil wir unser Menü gespeichert haben,
wenn wir jetzt in
unseren elementaren Arbeitsbereich gehen , in dem wir unseren Header erstellt haben, wenn wir diese Seite aktualisieren, drücke
ich Control R oder wenn Sie auf einem Mac sind Befehl R. Ordnung, Jetzt werden
unsere vier Menüpunkte
in
diesem Element angezeigt , das vom Hetero Folder Builder für Elementor,
dem von uns installierten Plug-In, eingebracht wurde , das vom Hetero Folder Builder für Elementor,
dem von uns installierten Plug-In, . Und weil es jetzt ausgewählt ist. Wenn Sie sich den Ort anschauen,
der die Nachricht hatte , dass wir kein Menü hatten. Jetzt haben wir dieses Dropdown-Menü und es listet unser Hauptmenü als eines der Menüs auf. Wenn wir vier Menüs
hatten, werden diese in diesem Dropdown-Menü aufgeführt. Und Sie können hier auswählen, welche vielen Sie zeigen möchten. Das war's also. Also aktualisiere das. Und obwohl dies noch ausgewählt ist, können
Sie es auswählen, indem beliebige Stelle innerhalb dieses blauen Rahmens klicken. Also klicke ich irgendwo da drin. Und obwohl es noch ausgewählt ist, gehe
ich ins Layout. Unter Achsen klicke ich auf Rechte, um das Menü auf
die rechte Seite zu schieben . Und dann sage ich, hey da. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Und jetzt nimmt unsere Speisekarte jetzt Gestalt an. Aber natürlich müssen wir einige Änderungen vornehmen, wie diesen Hover-Effekt. Und dieser letzte Gegenstand muss ein Button sein. Also lasst uns sehen, wie das geht. Geht hier rein. Während dies noch ausgewählt ist, reduzieren Sie das Layout und gehen Sie in das Menü und wir haben den letzten Menüpunkt. Ich gehe weiter und drücke den letzten Item-Button. Und das wird es in einen solchen Knopf ändern. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Da haben wir es also. Das nächste, was wir tun wollen, ist die Schwebefarbe zu ändern. Zuallererst zeigen die Standardfarbe der Links und dann ihre Hoverfarbe und die Schaltflächen das Verhalten. Gehen wir also hier rein und sehen wie sich unsere Referenz verhält. Wenn es aktiv ist, ist es beim Schweben gelb, es ist gelb, aber standardmäßig ist es breit. Also lasst uns hier rein gehen. Während das Navigationsmenü noch ausgewählt ist, gehe
ich in den Stil. Und das erste, was wir tun wollen, ist das Hauptmenü einzuklappen. Sie werden feststellen, dass wir
hier vier Panels für Dropdown-Menüs haben. Fangen wir mit einem Knopf an. Klicken Sie auf die Schaltfläche. Und zuerst ändern
wir die Textfarbe genau hier in Weiß. Und dann ändern wir den Hintergrundtyp der Schaltfläche von diesem Grün. Also lasst uns diese Farbe ändern. Und ich möchte diese Farben hochziehen. Ich habe diese Farben in diesem Dokument genau hier, die ich in
den zuvor erwähnten Assets-Ordner aufgenommen habe. Sie finden es in der folgenden Beschreibung. Lasst uns also
genau dort die gelbe Farbe schnappen , leuchtend gelb. Ich möchte diesen Code holen. Geh wieder rein und füge es hier ein. Und jetzt ist unser Knopf so gelb. Klicken wir irgendwo drin, um diese Box loszuwerden. Und dann wollen
wir beim Schweben zurückgehen und Hintergrundtyp sagen. Sollte es sein. Lass uns wieder reingehen und das kopieren. Gehen wir wieder rein und fügen das da rein. In unserem eigenen Hover ist
der Button so rot. Lasst uns das aktualisieren. Als Nächstes wollen wir die Link-Farben ändern. Also lasst uns diesen Knopf zusammenbrechen. Und lass uns ins Hauptmenü gehen. Lass uns nach Topographie suchen. Die Textfarbe sollte weiß sein, also ziehen Sie diese ganz nach oben. Und beim Schweben muss es gelb sein. Also klicke ich darauf. Und ich geh da rein und schnappe mir das Gelb. Füge es da rein. Und jetzt ist es gelb. Mal sehen, wie es aktiv aussieht. Wenn aktiv, keine Farbe, also gebe ich ihm das gleiche Gelb. Dann aktualisiere das. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Und jetzt verhält sich unsere Navbar genau wie erwartet. Schauen wir uns also unsere Referenz an und die Schriftart hier ist schwarz. Gehen wir also hier rein und ändern den Kontakt in Schwarz. Das Zusammenklappen des Hauptmenüs und
das Öffnen der Tastenfarbe sollten im normalen Zustand schwarz sein. Lasst uns das aktualisieren. Und auf dem Schweben muss weiß sein. Aktualisiere das. Und lasst uns eine Vorschau sehen. Es ändert sich. Standardmäßig ist
es beim Schweben schwarz, Weiß. Großartig. Also gefällt mir, wo wir mit der Nav-Bar erreicht haben. Jetzt können wir den Heldenbereich
mit diesem animierten selbsttippenden Text erstellen . Wir sehen uns in Kürze.
7. Den animierten Text hinzufügen: Willkommen zurück. Im Moment möchten wir
diese animierten Texte gleich hier hinzufügen . Dies ist ein sehr schöner Ort, um
wichtige Keywords hinzuzufügen , an die sich Besucher
erinnern sollen , oder die Besucher dem Moment, in dem sie auf Ihrer Seite landen, im Auge behalten
sollen. Es ist ein netter Ort, um die Leute sehr
kurz über etwas zu informieren , von dem sie wissen sollen. Also lasst uns sehen, wie das geht. also genau hier in unser Dashboard springen, möchten
wir ein Plugin hinzufügen, das es uns ermöglicht, diesen dynamischen Text zu haben. Also gehen wir in Plugins, Add New, und wir geben wichtige Atome ein, die nur
typessentiell sind , da sie das erste Ergebnis von WP-Entwicklern
sein sollten . Und Sie werden feststellen, dass es wichtige Add-Ons für Elementor sind. Denken Sie daran, dass diese Plugins, von
denen wir sagen, dass sie von Drittanbietern entwickelt wurden , um Elementor zu erweitern. Das ist einer von ihnen. Also lasst es uns jetzt installieren. Ende. Es hat mehr als eine Million aktive Installationen. Nur um dir zu zeigen, wie cool das Plugin einfach oder richtig ist, also lass es uns aktivieren. Und in diesem Setup-Assistenten hier können
Sie fortfahren und auswählen,
welche Option Sie möchten. Aber weil Sie es sind, gehe ich davon aus, dass Sie Anfänger sind, können
Sie mit den empfohlenen Grundeinstellungen arbeiten. Also lasst uns zum nächsten gehen. Und dies sind die Einstellungen, die Sie akzeptiert haben indem Sie die grundlegende Nächste auswählen. Lass uns als Nächstes gehen. Als Nächstes. Installieren Sie in Ihren Tagen nicht oder installieren Sie keine davon, wenn Sie möchten. Als nächstes beende das. In Ordnung, jetzt haben wir wichtige Add-Ons für Elementor installiert und wir haben Zugriff auf all diese neuen Funktionen, die elementar erweitern. Gehen Sie also wieder hinein, wo unser elementarer Arbeitsbereich hier ist. Also werde ich diesen Workspace aktualisieren,
indem ich auf dem Mac auf Control R oder Command R klicke. Und wie ich bereits erwähnt hatte, Sie feststellen, dass wir hier mehr, werden
Sie feststellen, dass wir hier mehr,
mehr Panels hinzugefügt haben, weil wir in der vorherigen Lektion Elementor,
Header, hinzugefügt haben und Footer Builder. Und im Moment haben wir gerade wichtige Erwachsene hinzugefügt. Und wenn wir das erweitern, hat
es zusätzliche Elemente, die wir
hier hineinziehen und unsere Landing Page erreichen können . Eine dieser Funktionen ist also kalter, ausgefallener Text. Was ich also tun will und ich habe mich gerade daran erinnert,
ist, dass wir uns immer noch im Header-Arbeitsbereich befinden. Was wir tun wollen, ist diesen Arbeitsbereich zu verlassen denn jetzt sind wir fertig mit der Bearbeitung der Navigationsleiste. Beenden wir also, indem wir
darauf klicken , und lassen Sie uns das Dashboard verlassen. In unserem Dashboard werden Seiten eingeblendet. Und wir haben die Homepage, die wir zuvor erstellt haben, und das verwenden wir als Zielseite. Also werde ich mit
Elementor bearbeiten , falls Sie diese Option nicht haben, bedeutet
dies, dass Sie nicht mit Elementor bearbeiten geklickt haben. Wir können auf „Bearbeiten“ klicken. Und je nachdem, wie Ihre Seite aussieht, klicken Sie
einfach auf Mit Elementor bearbeiten, wo immer die Schaltfläche ist. In unserem, in dem Bereich, in dem wir
den Hauptinhalt der Zielseite bearbeiten . Das erste, was Sie bemerken, ist, dass wir dieses Foto genau hier haben, das wir nicht lügen. Gehen Sie also zurück in das Dashboard, innerhalb der Seiten, alle Seiten Home. Sie werden feststellen, dass wir dieses kleine Astra-Einstellungssymbol hier oben haben. Klicken Sie auf dieses Symbol. Und unter Site-Layout sagen
wir keine Seitenleiste, volle Breite gestreckt. Das ist okay. Dann deaktivieren wir den obigen Header. Deaktivieren wir den primären Header unter Kopfzeile, dem mobilen Header und dem Titel. Lassen Sie uns das Featured Image deaktivieren und den Ordner deaktivieren. Dann lasst uns das aktualisieren. Und jetzt klicke ich auf Mit Elementor bearbeiten oder gehe direkt zu dieser Seite
zurück und aktualisiere sie. Lass es mich einfach auffrischen. Jetzt ist die Fußzeile weg. Das erste, was wir tun möchten, ist,
einen einzelnen Spaltenabschnitt mit voller Breite hinzuzufügen . Das hier genau hier. Klicken wir dort auf das Pluszeichen und ziehen Sie hier hinein und ziehen Sie hier hinein. Und es wird diese Elemente durch
wichtige Add-Ons für Elementor,
das gerade installierte Plugin, aufrufen wichtige Add-Ons für Elementor, . Das lasse ich jetzt am
Ende fallen , weil es das aktive Element ist. Hier oben steht „Ausgefallenen Text bearbeiten“. Das erste, was wir tun wollen, ist die
Anatomie dieses Elements zu betrachten . Es hat diese drei Strings und sind
diese drei Wörter, die sich hier ändern. Und dann haben wir diese ersten drei für Wörter, die sich nicht ändern. Das sind die Präfixtexte, damit wir das loswerden können. Und wir haben die Suffixtexte, die aus dem Satz stammen, des Satzes. Lasst uns das auch entfernen. Und lasst uns einen Punkt hinzufügen, einen vollständigen Stopp da drin. Damit wir es haben,
denken Sie daran, dass wir diesen gelben Vollstopp hier haben. Also geh wieder hier rein. Lasst uns jetzt ändern, was diese Worte sagen. Lassen Sie uns das in etwas Kreatives ändern. Lassen Sie uns den zweiten zum Fotografen,
Videofilmer, ändern . Videofilmer. Und lasst uns das aktualisieren. Also jetzt die drei Wörter, lasst uns eine Vorschau der Änderungen anzeigen oder rechts, also haben wir gerade das. Das nächste, was wir tun wollen, ist, mich diese zusätzlichen Seiten einfach hier
schließen zu lassen . Das nächste, was wir wollen, ist, die Farbe
des Textes und die Größe zu ändern . Klicken Sie also auf Stil. Klicken Sie also auf Stil. Wir möchten Präfix-Textilien reduzieren und
die ausgefallenen Textstile öffnen , denn was wir noch haben, ist der ausgefallene Text selbst. Und klicken wir auf Topographie. Vergrößern wir die Größe. So etwas, vielleicht 162, aber alles hängt davon ab, welches Wort Sie dort eingegeben haben. Also lasst uns da draußen klicken. Dann einfarbig. Lasst uns das in Weiß ändern. So. Lasst uns das aktualisieren. Wir können die Cursorfarbe ändern, wenn Sie möchten, aber ich möchte sie bei White belassen. Als Nächstes wollen wir
die ausgefallenen Textilien zusammenbrechen und zu
den Suffixtextilien gehen , weil wir ihm eine Farbe geben wollen. Denk dran hier, es ist gelb. Also möchte ich zu diesem Dokument wechseln und mir
diese gelbe Farbe schnappen. Kopiere das. Tippen Sie dann zurück zu unserer Seite. Und ich möchte die Suffix-Textfarbe öffnen und diese dort einfügen. Füge das ein. Jetzt ist es also gelb, aber jetzt ist es zu klein. Klicken wir auf Topographie und vergrößern
wir die Größe genau dort. Irgendwo da. Ich glaube, es gefällt mir genau dort. Okay, lasst es uns aktualisieren. Und nun beachte, dass auf unserer Seite auf unserer Referenzseite der Animationstyp anders ist. Das verblasst, während unsere hier tippt. Um das zu ändern, gehen
wir in den Inhalt reduzieren Sie ausgefallene Texte und erweitern Sie die Einstellungen für ausgefallene Texte. Und wie wir den Animationstyp
von Tippen auf Fade ändern können , verblassen. Probieren wir Theta-Grenzen so aus. Über Zoom. Roggen. Ich mag Zoom. Aber um die Dinge einfacher zu
machen, lasse
ich es einfach bei FE, lasse
ich es einfach bei FE, spiele mit
diesen anderen Einstellungen herum . Und lasst uns das aktualisieren. Dann. Natürlich wirst du merken, dass wir hier oben etwas Platz haben. Wir haben hier oben einen gewissen Spielraum zwischen der einen und der Nav-Bar. Also lasst uns weitermachen und das machen. Wählen wir den Abschnitt selbst aus. Und lasst uns fortgeschritten hineingehen. Lasst uns diese Padding-Links zusammenbrechen. Und dann lassen Sie uns die obere Polsterung
auf etwas wie sagen wir 50 erhöhen . Sagen wir eine 100. Und lasst uns das aktualisieren. Vorschau der Änderungen oder richtig? Aber jetzt muss unsere Schrift ein bisschen fett sein. Gerade jetzt. Es scheint ein Thema zu sein. Wählen Sie also diesen ausgefallenen Text dort aus und gehen Sie
in Stil, ausgefallene Textstile. Lassen Sie uns fortfahren und
hier den Typ Palaeography auswählen und das Schriftgewicht auf etwa 900 erhöhen. Jetzt ist das Schriftgewicht schwerer, aber jetzt lassen Sie uns die Familie in Montserrat umstellen. Montserrat. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Überschreiben. Das gefällt mir. Das ist also, so fügt man die ausgefallenen Texte hinzu. Wir fahren irgendwohin, wo wir es getan haben. Lasst uns also fortfahren und diese Texte hinzufügen. kopiere ich einfach. Kopieren Sie und ich gehe
hier rein und klicke auf dieses winzige Symbol hier, um die Elemente
aufzurufen und
diesen Texteditor unter den Videofilmer zu ziehen . Und obwohl es noch ausgewählt ist, wähle ich all das gelöschte und füge dann den kleinen Text wir gerade von der anderen Seite kopiert haben. Und während es noch ausgewählt ist, gehe
ich in den Stil und richte seine Mitte aus. Ändern Sie die Farbe auf Weiß. Wählen Sie dann den Videofilmer aus. Gehen Sie nach innen fortgeschritten, brechen Sie den Rand
und
verringern Sie dann den unteren Rand. Schieben Sie die winzigen Texte nach außen. Lasst uns das aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Super genial. Jetzt haben wir unsere ausgefallenen Texte
und den beschreibenden Text zum Heldenbereich hinzugefügt . Als Nächstes möchten wir diesen Button direkt hier hinzufügen. Also lasst uns das in der nächsten Lektion machen.
8. Den animierten Hintergrund hinzufügen: Also willkommen zurück. Diesmal möchten wir
diesen animierten Hintergrund hier erstellen . Wenn Sie genau hinsehen, werden Sie feststellen, dass sich im Hintergrund eine Art von Kreisen nach dem Zufallsprinzip bewegen und alle zufällig dimensioniert sind. Also lasst uns sehen, wie das geht. Was ich tun möchte, ist ins Dashboard zu springen. Also gehe ich nicht ins Dashboard. Also lass mich einfach darauf klicken. Und jetzt wollen wir im Dashboard Plugins
eingehen und neue hinzufügen. Weil wir ein Plugin hinzufügen möchten , das diese Partikel hinzufügt. Also lasst uns weitermachen und Pi,
Outlet Pi oder Net eingeben . Und so haben wir hier zwei Pi Out Net Plug-Ins. Und das, was wir wollen E sind Botnet-Add-Ons für Elementor. Bringen Sie das und die Aktivierung oder Fahrt ein. Dies sind also die Funktionen, die uns das Plugin
zur Verfügung stellt , und es hat auch einige Verfahren. Jetzt, da wir das Plug-In installiert haben, kehren
wir hier zu unserem Workspace zurück und aktualisieren diese Seite, damit wir das
neu installierte Plug-In oder die Braut der Marke laden können . Jetzt ist es geladen. Lasst uns grundlegend zusammenbrechen. Es ist kollabierter Pro-General, es ist alles zusammengebrochen. Und jetzt werden Sie feststellen, dass wir diese PAF E-kostenlosen Widgets haben. Das ist also Pilot Net Add-On für Elemente von kostenlosen Widgets. Und es hat natürlich
die Elemente, die es in das Projekt eingebracht hat. Wählen Sie also unsere Rubrik aus. Wählen wir nun diesen Abschnitt aus. Und Sie werden jetzt feststellen, zusätzlich zu den drei Tabs, die wir dass wir
zusätzlich zu den drei Tabs, die wir hier oben haben, PIFP haben. Wenn Sie also darauf klicken, wurden zusätzliche Einstellungen für den PAF II angezeigt, also PIFP-Partikel, Lassen Sie uns auf auswählen. Jetzt ist es aktiv. Bevor wir also Änderungen vornehmen, klicke ich auf Aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. So sieht er standardmäßig aus. Also müssen wir es ein wenig optimieren, damit es so etwas subtileres aussieht. Also lasst uns weitermachen und in unseren Arbeitsbereich springen. Und weil vorerst alles rot ist, müssen
wir diese Farben ändern. Also lasst uns genau dort etwas wie ein sehr dunkles Grau machen. Irgendwo da. Ich gehe mit diesem Farbcode. kopiere ich. Und ich werde auch sie diese Linien haben,
weil sie auch Links feststellen, dass sie diese Linien haben,
weil sie auch Links haben, die die Punkte verbinden. Also möchte ich nur die Link-Farbe dieselbe Farbe wie
die Kreise oder die Elemente machen . Also lasst uns das da hineinfügen und aktualisieren wir es. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Und das haben wir jetzt. Beachten Sie also, dass sie sich zu schnell bewegen und wir brauchen, dass sie etwas langsamer werden. Mal sehen, wo ist die Geschwindigkeit dieses Teilchens? Reduzieren wir das auf 1. Aber natürlich kann es mit der Geschwindigkeit herumspielen und auf die gewünschte Geschwindigkeit einstellen. Also lasst uns eine Vorschau anzeigen. Äh, das haben wir im Moment. Ich glaube, es gefällt mir. Das nächste, was wir tun wollen, ist diesen Button genau hier zu erstellen. Beachten Sie, dass es
diesen schwebenden Effekt hat , wenn Sie den Mauszeiger darüber bewegen. Und wir werden sehen, wie das geht. Lasst uns also direkt hier reinspringen und klicken wir
hier auf dieses Symbol Mehr und tippen Sie den Button ein. Und klicken wir auf den ersten Button. Oder lasst uns das alles löschen. Kollabiere das. Und lasst uns in Basic gehen. Und wählen wir den Button gleich hier aus. Lassen Sie es uns fallen, wenn diese blaue Linie anzeigt, dass wir bereit sind zu fallen. Und jetzt ist es standardmäßig auf der linken Seite. Schieben wir es in die Mitte. Und lasst uns ins Innere gehen. Nein, lasst uns zunächst ändern,
was unter Inhalt steht. Texte, klicke hier. Was sagt er? Betrachten Sie mein Portfolio. Betrachten Sie mein Portfolio oder RI. Das nächste, was wir tun wollen, ist,
in den Stil zu gehen , damit wir anfangen können, es zu stylen. Ich werde das für einen Moment zusammenbrechen und Sie werden feststellen, dass wir diese beiden Möglichkeiten haben. Also lasst uns den Knopf erweitern. Und für die Farbe ändern
wir sie in dieses Gelb. Also werde ich hier rübergehen und diese Gelb kopieren. Denken Sie daran, dass ich dieses Dokument
in der folgenden Beschreibung im Ordner angegeben habe. Also lasst uns das da reinfügen. Und jetzt ist der Knopf gelb, aber die Testfarbe muss so schwarz sein. Und dann lassen Sie uns die Typografie in Montserrat umstellen. Montserrat. Mir gefällt, wie es aussieht. Und lasst uns etwas gegen die Polsterung unternehmen, denn hier auf unserem Button es eine schöne Polsterung, die es
auffälliger aussehen lässt und genau das versuchen wir zu erreichen. Während der Button noch ausgewählt ist, mache ich die Schaltfläche rückgängig. Gehen wir zum Padding und lassen Sie uns diesen Link aufbrechen. Und das wird den Knopf für einen Moment verzerren. Vergrößern wir die linke Polsterung 250 und die rechte Polsterung 250, unten und oben 20. Oder RI. Lasst uns das aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Super genial. Das haben wir im Moment. Aber jetzt beachte, dass unsere Top-Helden-Sektion hier
hinaufgeht, denn dort reicht der Button. Wir müssen die Polsterung hier unten erhöhen
und den Abstand zwischen der Schaltfläche und diesem Text erhöhen, genau wie hier. Also lasst uns das machen. So können wir auswählen, solange der Button noch ausgewählt ist. Lass uns fortgeschritten hineingehen. Lassen Sie uns diese Verbindung dort oben aufbrechen und lassen Sie uns die oberste Marge auf 50 erreichen. Jetzt machen wir es zu 100. Lasst uns das aktualisieren. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Oder richtig, jetzt ist es an einem schönen Ort. Aber wir wollen zunehmen. Das nächste, was wir tun wollen, ist
die Polsterung des Heldenabschnitts selbst zu erhöhen , hier durch diesen blauen Rand
abgegrenzt wird. Wählen wir also den Abschnitt selbst aus. Und lasst uns fortgeschritten hineingehen. Und lassen Sie uns so eine untere Polsterung von 6060 geben. Lasst uns das aktualisieren. In der Vorschau die Änderungen. In Ordnung, jetzt
bewegen wir uns diese Partikel über und unter dem Knopf. Und unsere Helden-Sektion sieht jetzt gut aus. Das nächste, was wir tun wollen, ist, an
diesem Abschnitt genau hier mit diesem netten Symbol zu arbeiten . Ja, dies wird also ein sehr schöner Ort sein, um eines Ihrer bevorzugten oder neuesten Projekte zu präsentieren. Lassen Sie uns also fortfahren und diesen Abschnitt erstellen. Wir sehen uns in Kürze.
9. Bild hinzufügen: Willkommen zurück. Springen wir also zurück nach Osten unseres Arbeitsbereichs. Was wir tun wollen, ist
einen brandneuen Abschnitt hinzuzufügen , denn denken Sie daran, dass wir diesen Abschnitt direkt hier
erstellen möchten und er sich direkt unter unserer Schaltfläche befindet. Wir möchten also einen zweispaltigen Abschnitt hinzufügen. Also lasst uns das machen. Klicke das an. Und jetzt haben wir eine doppelte Spalte N hier drin. Ich klicke das rein ziehe ein Bildelement dort hinein. Klicken wir darauf und ziehen ein Überschriftenelement dort hinein. Klicken wir auf diese winzige Schaltfläche genau dort und ziehen einen Texteditor direkt dorthin
und lassen Sie es fallen, wenn diese blaue Linie erscheint. Und denk dran, dass wir dieses Icon genau hier haben. Gehen wir also zurück und
klicken Sie auf das winzige Symbol, um das Insight-Icon
der Elemente aufzurufen Insight-Icon
der Elemente und dieses auszuwählen, das den Stern hat. Dies sind die Standardwerte Elementor, Elementor, Icon-Elemente. Ziehen wir das und lassen Sie es direkt über den Titel fallen. Und standardmäßig ist es in der Mitte. Während es noch ausgewählt ist, richten
wir es nach links aus. Aktualisiere das. In Ordnung, also lasst uns eine Vorschau der Änderungen anzeigen. In Ordnung, das haben wir also. Sieht nicht sehr nett aus. Wir müssen etwas dagegen unternehmen. Also lasst uns das Bild zuerst hinzufügen. Ich wähle das Bild aus und das
ändert sich, um Bild und Outs zu bearbeiten. Klicken Sie dort hinein und klicken Sie auf Los, um Dateien
hochzuladen, wählen Sie Dateien aus. Und denken Sie daran, dass ich erwähnt habe, dass ich
diesen Assets-Ordner vorbereitet habe , und er wird in der Beschreibung unten aufgeführt. Du kannst es herunterladen. Es hat alle Bilder, die verwendet werden. Also wähle ich dieses Bild aus. Ja, lass mich das Bild vorerst auswählen. Öffne das. Und lasst uns weitermachen und Medien einlegen. Einfach so. Aktualisiere das. Und jetzt schauen wir uns an, wie unsere Schrift aussieht. Das ist also Montserrat. Ich kopiere diesen Lorem Ipsum. Also können wir es dort einfügen und kopieren. Und lass uns hier reingehen. Wählen wir das aus. Jeder Schuss zählt. Und wählen wir die Beschreibung aus. Gehen Sie also hier hinein, wählen Sie alle aus, löschen Sie das und fügen wir unseren langen Lorem Ipsum Während dies noch ausgewählt ist, gehen
wir in den Stil und ändern die Schriftfarbe in Weiß. Klicken Sie irgendwo drin, um aus diesem Feld herauszukommen. Und klicken wir auf die Topographie. Lasst uns die Familie nach Montserrat ausbilden. Geben Sie ein. Ich wähle den Titel aus, die Überschrift. ändere ich. Ja, das ist ein H2, das gefällt mir. Und geh wieder in den Stil, ändere das auch in Weiß. Wählen wir also das Symbol aus und gehen wir hier
hinein, in die Kamera. Das gefällt mir nicht. Alles klar, also wählen wir das aus. Sie können aber auch Ihre eigenen Icons hochladen, wenn Sie möchten. Also füge das ein. Und jetzt ist es eine Kamera, aber wir müssen es zu dieser gelben Farbe machen. Also lasst uns hier hineingehen, solange es noch gewählt ist Stil. Ich gehe hier. Und ich tippe hier auf
diesen Notizblock und kopiere das. Geh hier rein und füge es hier ein. Und jetzt ist es gelb. Aber diese Elemente liegen zu nahe beieinander. Was wir also tun müssen, ist diesen Abschnitt auszuwählen und hier unter Layout, Spaltenlücke zu gehen . Lassen Sie uns eine dieser Optionen auswählen, die Ihnen gefällt, aber ich werde weiter gehen und diese dann aktualisieren. Jetzt ist der Abstand zwischen diesen beiden Spalten erhöht. Lassen Sie uns also eine Vorschau der Änderungen anzeigen. Das haben wir bisher also. Ich glaube, es nimmt Gestalt an. Wir müssen diese Schriften zwei Monate Arad Familie ändern. Wählen wir das also aus. Gehen Sie in Stil-Typografie. Familie, Montserrat. Montserrat. Und ich möchte das Gewicht auf
etwa 800 erhöhen und das aktualisieren. Es ist auch die Größe höher. Ich benutze einfach meine Augen. Sagen wir, bis zu irgendwo ist vielleicht 38 in Ordnung. Aktualisiere das. Und jetzt der Abstand zwischen dem Knopf ist
der Abstand zwischen dem Knopf
und diesem Abschnitt hier ein bisschen klein. Also lasst uns das erhöhen. Wählen wir den Abschnitt unter „Advanced“ aus. Brechen Sie diesen Link genau hier auf und erhöhen Sie die oberste Marge auf vielleicht 50. Die App zu diesem Ort und aktualisiere das. Und wir können die Änderungen in der Vorschau anzeigen. Alles klar, das gefällt mir. Das nächste, was wir tun müssen, ist diesen Button hinzuzufügen. Und eine großartige Sache an Elementor ist, dass Sie Elemente wie in einer anderen Normalität
kopieren und einfügen können , die visuelle Design-Software wie Adobe Illustrator oder Photoshop. Und wenn wir hier reingehen, können
wir diesen Button einfach hier kopieren. Rechtsklick auf die Schaltfläche und kopiere sie. Dann geh ich hier rein. Rechtsklicken Sie die Textelemente und fügen Sie Der Button wird also unter die elementare Rechtsklicke gehen. Jetzt ist es unten, aber jetzt hat es die Einstellungen, die wir für diesen festgelegt Wir müssen die Einstellungen an diese Bereiche anpassen. Also lasst es uns zuerst nach links verschieben. Lasst uns diese Marge entfernen. Gehen wir also zu Advanced und entfernen diese Marge. Vielleicht hat 0 gemacht. Vergrößern wir vielleicht
die Größe des Bildes bis zu dieser Stelle. Und lasst uns das aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Und das haben wir bisher. Genau hier. Es ist roter und gelber eigener Schwebeweg. Also lasst uns das ändern. Wenden wir also diesen Hover-Effekt an. Nun, der Button ist ausgewählt. Lassen Sie uns in den Stil von Hoover eingehen, der die gelächelte Lektüre sein wollte. Also kopiere ich das und füge es da rein. Wir wollen also auf keinen Fall, dass es leicht weiterlesen soll, um über den normalen Zustand und
beim Schweben mild zu lesen. Wir wollten dieses gelbe, lebendige Gelb haben, das beim Schweben
kopieren so leuchtend gelb sein
wollen. Und dann im Normalzustand muss
die Schrift weiß sein. Yup, muss weiß sein. Also normaler Zustand Schriftart, breit. Beim Schweben können wir es so schwarz machen. Aktualisieren wir das und sehen wir eine Vorschau der Änderungen an. Scrollen wir nach unten. Und jetzt verhält sich unser Button so, wie wir es wollen. Lassen Sie uns weitermachen und diesen Abschnitt „Meine Dienste“ erstellen. Und dies wird ein sehr schöner Ort sein, um eine kurze Beschreibung dessen zu geben was Sie für Ihren Kunden tun. Lassen Sie uns also den Abschnitt „Meine Dienste“ erstellen. In der nächsten Lektion sehen wir uns in Kürze.
10. Die Dienste hinzufügen: Willkommen zurück. Also hier sind wir in einer weiteren fantastischen Lektion. Das nächste, was wir jetzt tun wollen, ist meinen Dienstbereich
hinzuzufügen. Also fügen wir zunächst den Titel und natürlich diese Symbole und Text hinzu. Lasst uns also direkt in unseren Arbeitsbereich springen. Und was wir tun wollen, ist
einen einzelnen Spaltenabschnitt hinzuzufügen einen einzelnen Spaltenabschnitt , der ganz von links nach rechts läuft. Und denken Sie daran, dass wir bei der Arbeit mit Elementor Elemente von
einem Ort zum anderen kopieren können , wie wir diesen Button kopieren und hier verwenden. Also möchten wir
diesen Titel auch hier kopieren , damit wir ihn hier verwenden können. Ich möchte Ihnen schnell
eine sehr praktische Funktion zeigen , die elemental bietet. Und du wirst bemerken, wenn ich den Mauszeiger hier über diese Ecke fahre, passiert hier nichts. Oder wenn ich den Mauszeiger hierher fahre, passiert nichts Besonderes. Aber ich möchte
hier auf dieses Burger-Menü klicken und in die Benutzereinstellungen eingehen. Handles bearbeiten. Ändere das auf „Ja“ und sag „Update the“. Wenn wir jetzt hier drin sind, wenn Sie den Mauszeiger über die Ecken bewegen, diese Optionen angezeigt hier diese Optionen angezeigt, die Ihnen helfen, Ihre Arbeit schneller zu erledigen. Wenn ich diese also duplizieren wollte, muss man nur den Mauszeiger darüber bewegen und darauf klicken. Und jetzt kann ich das hier
in unseren vollständigen GUI-Bereich ziehen . Das nächste, was ich tun möchte, ist
das zu duplizieren und in unseren Bereich zu ziehen. Und dann möchte ich den
ganzen Sex entfernen , damit wir noch einen Satz haben. Und während es noch ausgewählt ist, gehen
wir in den Stil und richten ihn an der Mitte aus und machen dasselbe für die Überschrift. Richten Sie es in der Mitte aus. Und klicken wir auf den Abschnitt selbst. Gehe zu Erweitert, unterbreche den Link am Rand und gib ihm eine Marge von 100. Stimmt's? Wir haben also einen schönen Abstand zwischen den beiden Abschnitten. Aktualisiere das. Lassen Sie uns die Änderungen schnell in der Vorschau anzeigen. Und genau das haben wir. Das nächste, was wir tun wollen, ist diese Dienste hinzuzufügen. Also lasst uns sehen, wie das geht. Klicken wir
hier auf dieses kleine Symbol , um diese Elemente aufzurufen. Und wir möchten
einen inneren Abschnitt direkt unter diesen Text ziehen . In dieser Kreuzung müssen noch ein paar Spalten vorhanden sein. Eine, die auch noch einmal dupliziert wird. In diesen Spalten werden
verschiedene Teile dieser Bereiche enthalten . Also, jetzt wird eine Spalte
diese enthalten und eine andere Spalte wird diese enthalten. Eine weitere Spalte diese und eine weitere Spalte diese. Deswegen haben wir vier. Also dafür und ziehe das bis zu etwas wie vorerst, lass uns mit einer Neun beginnen. Nun, während ich ziehe, werden
Sie feststellen,
dass wir einige Metriken haben , die sich in Echtzeit ändern. Der auf der linken Seite ist ein, a, Lasst uns die Neun irgendwo da drin ändern. Lasst uns das auch auf neun ziehen. Sieh dir die linken Metriken an. Jetzt geben wir ihm 5,55 g, die auch 55 sind. Oder RI. Was wir also tun müssen, ist,
auf das Pluszeichen zu klicken und das Symbol einzugeben. Und ziehen wir ein Icon da rein. Und mit diesem Symbol klicken Sie dort
und wählen Sie ein beliebiges Symbol aus, das Sie mit der Fotografie verknüpfen möchten. Lassen Sie mich das auswählen, fügen Sie das ein. Und Sie werden feststellen, dass das Symbol standardmäßig Schnabel ist. Aber wir werden etwas dagegen unternehmen. Das nächste, was wir tun wollen ist, mich diesen Text hier kopieren zu lassen. Kopieren Sie das und der Abschnitt ist meine Dienste. Also lass mich das erste n hier auswählen. Ich möchte auf dieses Pluszeichen klicken dann ein Überschriftenelement ziehen. Und während es noch ausgewählt ist, Hochzeitsfotografie, füge ich das dort ein. Okay, also das Nächste, wir uns das und
schnappen einen Texteditor, indem wir es dort hineinlegen. Also stylen wir die Texte. Fangen wir mit dem Icon an. Hier drin. Lass uns kurz zu I gehen und das ziehen, bis du zufrieden bist. Ich glaube, 35 ist okay für mich. Und lassen Sie uns die Tastenfarbe ändern, die Symbolfarbe auf dieses Gelb. Also lass mich rüberspringen und
das kopieren und wieder hinein und füge das Gelb dort ein. Jetzt ist es also gelb. Wählen wir diese Überschrift aus, gehen Sie in den Stil, wählen Sie das College ändern Sie es in Weiß. Jetzt wollen die Typografie-Familie zwei Monate im Irak verändern. Und ich möchte die Schriftgewichte auf vielleicht 700 ändern, aber ich möchte die Größe ein wenig auf 25 reduzieren, ist okay. Dann wähle ich diese Beschreibung unten hier aus. Und während es noch ausgewählt ist, gehen Seiten Stil, ändern Sie die Farbe in Weiß. Wechseln Sie die Typografie-Familie in Montserrat. Okay, aktualisiere das. Und ich möchte diese Farbe ein wenig ändern. Sei also ein dunkleres, etwas dunkelgrau, damit es von der Überschrift selbst zu unterscheiden ist. Irgendwo da. In Ordnung, also gibt es einen kleinen Unterschied zwischen ihren Schattierungen. Und dann schaue ich mir das an. Da haben wir es, also haben wir einen Service. Das nächste, was wir tun wollen, ist das zu duplizieren, den
Mauszeiger darüber zu bewegen und es zu duplizieren und dort hineinzuziehen. Und jetzt werden Sie feststellen, dass wir es nicht in diesem kleinen Bug, dieser Box
,
werfen können, weil er klein ist, also werde ich es größer machen. Ziehen Sie es und lassen Sie es dort hinein. Und denken Sie daran, dass wir es geschafft hatten 5.5. Ziehen wir es also auf 5,5. Das ist okay. Lassen Sie uns das duplizieren, ziehen Sie es dort hinein. Dupliziere das, ziehe es da rein. Und das ist unser zweiter Service. Also hole ich mir das Grafikdesign und füge es dort ein. Die dritte ist die Unternehmensfotografie. Das nächste, was wir tun wollen, ist diese zu duplizieren. Jetzt, da wir diese beiden Dienste haben, möchten
wir diesen Abschnitt
so duplizieren und erneut duplizieren. Jetzt haben wir die Serviceleistungen alle zusammenhängend gestylt. Also lasst uns das kopieren. Wir sagten, es sei Unternehmensfotografie. Lasst uns das da reinfügen. Also Graham, wähle das aus, das in der Eventfotografie. Und dann endlich die Videoproduktion. Oder richtig, lasst uns das aktualisieren. Und dann lasst uns eine Vorschau der Änderungen anzeigen. Scrollen Sie also nach unten, überschreiben Sie unseren Bereich „Meine Dienste“ sieht super großartig, schön und sauber aus. Das nächste, was wir tun wollen, ist diesen Call-to-Action-Bereich genau hier zu
erstellen. Dies ist also eine Zielseite, die Menschen
dazu bringen muss, Maßnahmen zu ergreifen Bedürfnisse
zu erfüllen, um Menschen zum Handeln zu rufen. Und dies ist eine
der Möglichkeiten, dies zu tun, um
Fotoratschläge von mir zu erhalten , und jemand kann sich Ihrer VIP-Liste anschließen. Lassen Sie uns also fortfahren und diesen Abschnitt erstellen. Und es hat diesen schönen Effekt , wo das Hintergrundbild fixiert ist. Mal sehen, wie das in der nächsten Klasse geht.
11. Eine Anregung hinzufügen: Willkommen in dieser Klasse. Also haben wir diesen Dienstbereich bereits erstellt. Jetzt ist es an der Zeit, diesen
Call-to-Action-Bereich genau hier zu erstellen . Wir möchten die Menschen dazu aufrufen können,
unsere gewünschten Maßnahmen zu ergreifen , die für uns von Vorteil sein werden. Und weil wir Fotografen sind, möchten
wir, dass die Leute an unserem Mailing teilnehmen. Deshalb haben wir diesen Button genau hier. Lassen Sie uns also sehen, wie Sie
diesen Abschnitt in unserem Workspace erstellen können. also zu unserem Arbeitsplatz springen,
ist das Nächste, wie Sie bereits vermutet haben, wie Sie bereits vermutet haben, einen neuen Abschnitt zu erstellen. Und mal sehen. Ja, es ist wie gewohnt ein Abschnitt mit voller Breite. Und beachte, dass wir hier keinen Spielraum zwischen diesen beiden
haben. Warum fügen wir also nicht damit an eine Marge
hinzuzufügen, solange er noch ausgewählt ist. Gehen Sie weiter, brechen Sie den Link hier auf. Lassen Sie uns also eine Top-Marge von 100 hinzufügen. Und jetzt haben wir einen schönen Abstand zwischen den beiden. Und während dieser Abschnitt noch
ausgewählt ist , gehen Sie in den Stil. Lassen Sie mich im Hintergrund den Hintergrund kollabieren und wir haben all diese Panels genau hier. Und wir interessieren uns vorerst für den Hintergrund. Typ des Hintergrunds. Klicke auf den Pinsel und gehe zu Bild. Klicken Sie auf das Pluszeichen dort und wir müssen das Bild hinzufügen, das unser Hintergrund wie folgt sein
wird. Also wähle ich Dateien hochladen aus und wähle Dateien aus. Und ich glaube, das ist ein Foto. Öffne das. Und lasst uns Medien einlegen. So sieht es standardmäßig aus. Also das erste, was wir tun wollen,
nun, das ist immer noch ausgewählt. Wir gehen in Position Mitte,
Mitte und dann zu Anhängen, sagen wir fest, so dass beim Scrollen an einer Stelle
bleibt. Und dann sagen wir mal wiederholen, keine Wiederholung, Größe, sagen wir Cover oder RI. Der Grund, warum es diese nicht ganz sichtbar ist, weil unser Abschnitt hier leer ist. Denken Sie daran, dass dies unser Hintergrund ist, aber die Größe unseres Abschnitts wird
durch die Menge an Inhalten bestimmt , die wir darin enthalten. Also lasst uns das Plus anklicken. Und anstatt
eine neue Überschrift zu erstellen , duplizieren wir dies. Klicken Sie darauf, und ziehen Sie
es dann und legen Sie es dort ab, wenn die blaue Linie erscheint. Meine Dienste. Und genau darunter. Lassen Sie uns das duplizieren und unter meine Dienste ziehen. Nun, während dies noch ausgewählt ist, schieben
wir es in die Mitte, in die Mitte. Jetzt ist es also zentriert ausgerichtet. Inzwischen können wir nicht lesen, weil der Hintergrund hell ist. Wählen Sie diesen Abschnitt erneut aus. Und unter Hintergrundtyp und Hintergrund haben
wir Hintergrund-Overlay. Lassen Sie uns diesen Hintergrund-Overlay-Typ erweitern. Und lass uns ihm eine Farbe geben, schwarz. Lass uns so ein dunkles Schwarz geben. Und dann lassen Sie uns
die Deckkraft erhöhen , um sie ein bisschen dunkler zu machen. Okay, aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Genial, also haben wir das. Wir können nicht weiter scrollen, weil wir nichts darunter haben. Aber wir können vorerst scrollen und sehen,
was wir tun wollen, ist den Text hier zu schnappen und ihn zu kopieren. Und das möchte ich auswählen. Und obwohl es noch ausgewählt ist, möchte
ich es hier einfügen. Füge das da rein. Und lass uns wieder hier rein gehen. Ja, das nimmt auf. Und nun beachte, dass unsere Texte nun ganz von links nach rechts
verlaufen. Und das liegt daran, dass wir
einen einzelnen Spaltenabschnitt mit voller Breite verwendet haben . Ich denke, wir müssen es zu dreifachen Spalten machen, also dupliziere ich die Spalten zweimal so. Und dann werde jetzt den Inhalt in den Seitenspalten los. Lassen Sie uns das jetzt
löschen, löschen und löschen. Und jetzt haben wir diese Spalte in der Mitte. Jetzt können wir das ziehen und
sicherstellen, dass alles in der Mitte ist. Lassen Sie uns
eine, 20, 20% auf der linken Seite geben . Lassen Sie uns auch sagen, dass es genau dort 20 Prozent sind, 20% auf der rechten Seite. Okay, also lasst uns das aktualisieren. Und eine andere Sache, die Sie bemerken werden, ist, dass wir nicht
genug Auffüllung über dem Text haben , sodass er fast den Rand des Abschnitts berührt. Vergrößern wir also die obere Polsterung des Abschnitts. Wählen Sie einen Abschnitt erweitertes Padding aus. Lassen Sie uns diese Polsterung unterbrechen und lassen Sie uns die obere Polsterung erhöhen. Nur damit wir oben etwas schönes Zimmer im Raum haben könnten. Etwas wie 70. Und lasst uns das Gleiche für den Boden machen. Lass uns so eine 7070 machen. Das nächste, was wir tun wollen, ist hier
rauf zu gehen und diesen Button zu duplizieren. Und ziehen wir es und legen es unter den Text. Es ist unser Aufruf zum Handeln. Und standardmäßig ist es auf der linken Seite. Während es noch ausgewählt ist, legen
wir es in die Mitte. Und was heißt das? Jane, meine VIP-Liste. Während es also noch unter Inhalt ausgewählt ist, meine VIP-Liste und aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Genial, also haben wir einen netten Aufruf zum Handeln und die Leute können darauf
klicken, weil sie von Ihnen fotografische Ratschläge
erhalten möchten . Das ist also ein netter Ort, um einen Aufruf zum Handeln zu haben. Das nächste, was wir tun wollen, ist
an dieser filterbaren Galerie zu arbeiten . Jemand kam und sah sich alle Projekte denen
du gearbeitet hast. Oder sie können sie nach Kategorien anzeigen. Zum Beispiel Hochzeitskategorie. Sie klicken darauf, dass es ihnen nur die
hochzeitsbezogenen Projekte zeigt , bei denen die Clique zusammenarbeiten ließ. werden nur die Unternehmensauftritte gezeigt, die Sie hatten. Studio, das ist dein Studio im Freien. Und wir können zu allen zurückkehren. Also lasst uns sehen, wie man das schafft. Also wir sehen uns in Kürze.
12. Eine Projektgalerie erstellen: Willkommen zurück. Jetzt ist es an der Zeit, dass wir diese Galerie hier erstellen. Lasst uns also direkt in unseren Arbeitsbereich springen. Und natürlich, wie wir es getan haben, müssen wir als Nächstes einen weiteren Abschnitt hinzufügen, ein dreispaltiger Abschnitt. Und das ist der, mit dem wir mitmachen wollen, also wähle ich das aus. Und jetzt ist es ein dreispaltiger Abschnitt. Lassen Sie uns etwas Raum zwischen
den beiden Abschnitten schaffen , indem wir einen oberen Rand hinzufügen. Wählen Sie den oberen Rand des Abschnitts aus und brechen Sie diesen Link auf. Wir haben es also nur mit der Spitze zu tun. Rash wäre ein 100. Jetzt haben wir dieses Zimmer. Klicken wir als Nächstes auf das Pluszeichen dort. Und lass uns hier reingehen und filtrierbar eingeben. Filtrierbar. Und wir haben dieses Element
durch wesentliche Add-Ons für Elementor eingebracht , weshalb ich dieses Plug-In wirklich mag. Ziehen wir es also da rein. Und bam, es zeigt hier bereits eine Platzhaltergalerie, die wir mit unseren eigenen Inhalten füllen können. Lassen Sie uns das also aktualisieren und eine Vorschau der Änderungen anzeigen, bevor wir anfangen, sie mit unseren eigenen zu füllen. Lassen Sie uns das in der Vorschau sehen. Lass uns scrollen. Und das haben wir. Das erste, was ich tun möchte ist die Breite dieser Spalte zu vergrößern. Also gehe ich wieder rein und lass uns das den ganzen
Weg ziehen, um ihm eine 11 auf der linken Seite zu geben. Auf der linken Matrix hier. Ich gebe ihm eine 10 und auf dieser anderen Seite auch
eine 10. Und lasst uns das aktualisieren. Und während es das tut und während dies ausgewählt ist, klicken Sie irgendwo hier drin. Jetzt ist es das aktive Element, mit dem wir arbeiten. Und das können Sie bestätigen, indem Sie hier oben schauen. Das erste, was ich tun möchte ist, diese Einstellungen genau dort zu reduzieren. Und Sie werden feststellen, dass wir diese
filterbaren Steuerelemente haben und Galerie-Elemente haben. Filterbare Steuerelemente, sind diese Steuerelemente genau hier, wenn Sie auf Galerieelement klicken und auf alle klicken. Das sind die filterbaren Steuerelemente, oder? Dann sind Galerieelemente die Bilder selbst, die Gegenstände selbst. Beginnen wir also mit den filterbaren Steuerelementen indem wir diese erweitern. Und lasst uns einen Artikel hinzufügen. Also geben wir ihm einen Namen, vielleicht benetzen wir. Lasst uns das zusammenbrechen. Es gab bereits Standardsteuerelemente, also erweitern wir das und geben ihm einen anderen Namen. Kooperiere, Kern, Parade. Lasst uns das zusammenbrechen. Lassen Sie es uns duplizieren
, indem wir auf dieses Symbol klicken oder auf Element hinzufügen klicken. Fortlaufende, sagen wir Outdoor-, Outdoor-Fotografie. Lassen Sie uns das duplizieren. Sagen wir vielleicht etwas wie Studio-Update dort. Jetzt haben wir ein paar Kontrollen. Dies können Ihre verschiedenen Projekte oder verschiedene Arten von Kategorien sein, die Sie für Ihre Projekte haben möchten. Alles klar, also lasst uns
die filterbaren Steuerelemente reduzieren und in die Galerieelemente gehen. Dies sind die Galerieelemente, die wir bereits hier haben, also können wir sie ändern. Steuerungsname bedeutet also das Steuerelement, das verwendet wird, um es anzuzeigen. Wenn Sie zum Beispiel möchten, dass dieses Galerieelement sichtbar ist, wenn jemand auf die Hochzeit klickt, wir hier drinnen geben
wir hier drinnen eine Hochzeitshochzeit ein. Lasst uns das zusammenbrechen. Wenn wir also möchten, dass dies angezeigt wird,
wenn jemand auf „Kooperation“ klickt, klicken
wir auf, um Kooperationsnamen einzugeben wenn jemand auf „Kooperation“ klickt, . Denken Sie daran, dies sind die Steuerelemente, die wir hier erstellt haben Kooperation, Hochzeit, Outdoor und Studio. Also lasst uns hier reingehen und ihnen
einfach nach dem Zufallsprinzip verschiedene Kontrollen geben. Und ich habe vergessen, ihnen Namen zu nennen. Der erste Gegenstand hier kann also mein bester Schuss sein. Lasst uns zusammenbrechen. Alles klar, M bevor wir es verlassen, während wir noch in meinen besten Schüssen sind, , werden
Sie feststellen, dass es jetzt zu meinen besten Schüssen geändert wurde. Und wenn wir nach unten scrollen. Hier fügen wir das Bild hinzu. Wir sind immer noch im ersten Element hier. Also wählen wir das aus und wir können klicken, lassen Sie uns hineingehen, Dateien hochladen, Dateien auswählen. Und jetzt denke ich, dass ich all diese Bilder
auf einmal
importieren möchte all diese Bilder
auf einmal
importieren , weil sie sie brauchen werden. Alles klar, also lasst uns eins nach dem anderen auswählen. Ich glaube, ich kann damit anfangen. Legen Sie Medien ein. Und das ist das Bild, das hier auftauchen wird. So einfach so. also wieder nach oben scrolle, werde ich zusammenbrechen. Meine besten Schüsse. Gehe zum zweiten Bild. Dies wird vom
Unternehmen kontrolliert , und die Galerie namens
könnte das Galerieelement über Ihre Shorts sein. Und dann lasst uns hier scrollen. Klicke auf das Bild da drin. Während wir im Studio ein Studiobild hatten. Wie auch immer, wählen wir hier einfach irgendwelche zufälligen Bilder aus. Natürlich würdest du dir Zeit nehmen, um das Beste zu erreichen. Scrollen wir nach oben. Zusammengebrochen, das erweitert das. Dies kann von
draußen kontrolliert werden wissen, sagen wir ja, draußen. Nennen wir ihm einen Namen. Aufnahmen im Freien. Und lasst uns nach unten scrollen und hier ein Bild dafür auswählen. Lasst uns das aktualisieren. Lasst uns fortfahren, Lasst uns zusammenbrechen. Reduzieren Sie das nächste Element. Und Sie können
so viele Galerieelemente wie Sie erstellen , Galerieelemente wie Sie möchten. Aber lasst uns diese sechs natürlich beenden. Sagen wir, das ist auch Kontrolle. Auf keinen Fall. Dies wird genannt, kann lesen, lesen Aufnahmen und dies wird durch
eine Hochzeitsfiltersteuerung gesteuert . Lass uns in die Bilder gehen. So wie dieses Hochzeitsfoto genau dort. Und dann scrollen wir weiter den nächsten Galerieelement hier. Und beginnen Sie einfach damit, das Bild zu ändern. Gib es das. Lass uns das wählen. Und dann scrolle ich nach oben und gebe ihm seinen Namen. Klingt zum Beispiel Aufnahmen. Und es wird von, sagen wir im Freien, kontrolliert. Denken Sie daran, dass Sie sicherstellen müssen, dass
diese Steuerelemente genau hier sind. Hochzeitssteuerungsnamen sind dieselben filterbaren Steuerungsnamen, die Sie
hier verwendet haben , weil sie buchstäblich diejenigen sind, auf die Sie
sich beziehen , wenn Sie diese Bereiche füllen, oder? Also sollte der allerletzte
vielleicht von Studio kontrolliert werden . Das Studio. Und der Galerierame. Vielleicht geben wir es so etwas wie ja, Studioaufnahmen. Und lasst uns nach unten scrollen und dafür ein Bild
hinzufügen, oder? Also lasst uns vielleicht klicken, ja, vielleicht das. Legen Sie Medien ein, aktualisieren Sie das. Und das ist unser letzter Galerieartikel. Also wenn ich diese
Studioaufnahmen zusammenbringe und mich einfach die allererste erweitern lasse, meine beste Aufnahme hier. Und schauen wir nach innen, damit Sie
Dinge wie preisfähige Bewertungen und all das hinzufügen können . Und Sie können auch einen Link hier haben, Seite zu T HTTP, google.com. Und Sie können auch, wenn jemand auf diesen allerersten Gegenstand hier klickt ,
was meine besten Aufnahmen sind,
und außerdem wird er zu
Google.com weitergeleitet oder wohin sie führt. Wenn Sie zum Beispiel eine
andere Seite haben, auf der Sie alles Beste haben, werden sie in
diesen Bereich gebracht. So können wir uns auch in einem neuen Tab öffnen. Wenn Sie das überprüfen, wird es in einem neuen Tab geöffnet und lassen Sie uns
das aktualisieren und eine Vorschau der Änderungen anzeigen. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Super genial. Das Letzte, was wir tun müssen, ist,
die Hintergrundfarbe in Schwarz zu ändern . Also lasst uns wieder hier rein gehen. Und während dies immer noch durch
Auswahl einer beliebigen Stelle ausgewählt ist , klicken Sie auf eine beliebige Stelle. Scrollen wir nach unten, scrollen Sie nach oben, reduzieren Sie Galerieelemente ,
und gehen wir dann in Stil, Hintergrund ,
Farbe, Schwarz. Und dann lasst uns die Kachel der Generäle zusammenbrechen. Und lasst uns in den kontrollierten Stil gehen , um die Farbe dieser Steuerelemente zu ändern. Die Textfarbe sollte also weiß sein. Aktualisiere das. Ja, also denke
ich, dass wir damit genau auf dem Ziel sind. Und Sie können mit
allen Einstellungen herumspielen , die hier verfügbar sind. Es gibt viele, aber das ist jetzt eine Herausforderung für Sie. Spielen
Sie mit
all diesen Einstellungen herum, Spielen
Sie mit
all diesen Einstellungen herum um zu sehen, was Sie sich einfallen lassen. Aber wenn wir
jetzt eine Vorschau der Änderungen anzeigen und sehen, wie unsere Galerie aussieht, scrollen
wir und sehen, was wir da unten haben. Alles in Ordnung. Das ist also super genial, aber jetzt habe ich mich gerade daran erinnert, dass wir vergessen haben, einen Titel hinzuzufügen. Lasst uns diese also von unserer Referenzseite abrufen. Kopiere das. Ich geh hier rein. Und was ich tun will, ist das zu duplizieren. Und jetzt möchte ich das ziehen und direkt über die filterbare Galerie ablegen. Und obwohl es noch ausgewählt ist, wähle ich all das aus und füge die letzten Projekte dort ein. Und dann aktualisiere ich das. Lassen Sie uns das in der Vorschau sehen. Stimmt's? Mir gefällt, was wir haben. Wenn wir also auf kooperieren klicken werden nur die Unternehmensprojekte, Hochzeit, Outdoor-Studio sein, und wir können sie alle sehen. Das nächste, was wir tun möchten, ist Bereich Meet the Team zu
erstellen. Also lasst uns das in der nächsten Lektion machen. Also wir sehen uns in Kürze.
13. Teammitgliedern: Und willkommen zurück. Jetzt sind wir hier auf der Referenzseite, die wir kopieren. Und das nächste, was wir erstellen möchten, um
den Teambereich zu erleichtern , diesen Abschnitt. Machen wir das also in unserem Arbeitsbereich direkt unter der Filterrollengalerie. Lassen Sie uns fortfahren und einen einzelnen Spaltenabschnitt wie diesen hinzufügen. Und das erste, was wir tun wollen, ist das zu duplizieren. Ziehen Sie es und legen Sie es in den einspaltigen Abschnitt ab. Lassen Sie uns den Rand oben
in diesem Abschnitt hinzufügen . Gib ihm eine 100. Und jetzt haben wir diesen Abstand direkt unter diesen Projekten. Lassen Sie uns diese kurze Beschreibung geben. Also lasst uns das duplizieren. Und ziehen wir das da rein. Alles klar, jetzt, da wir das haben, lassen Sie uns einen dreispaltigen Kreuzung hinzufügen. Ziehen wir also eine Kreuzung da rein. Und lasst uns diesen Abschnitt duplizieren. Jetzt haben wir drei von ihnen. Klicken wir da hinein und ziehen ein Bildelement dort hinein. Und obwohl es noch aktiv ist, wähle
ich eines dieser Bilder aus, die wir importiert haben. Also lasst uns weitermachen und den Kerl anklicken. Er ist ein Teammitglied. Und wir wollen unter ihn schreiben. Klicken wir auf dieses Symbol und ziehen eine kleine und eine Überschrift genau dorthin. Und geben wir ihm vielleicht einen Namen. Alex Rider oder so etwas. Richten wir es an der Mitte aus. Machen wir es zu einem Hass 3. Und lassen Sie uns die Größe ein wenig reduzieren. Vielleicht 23. Lasst uns die Familie in Monstera umstellen. Ändern wir die Farbe in Weiß. Und Wallah, klicken wir auf dieses Symbol im, ziehen Sie einen Texteditor dort hinein. Lass es in die fallen, lass uns ihm einen Titel geben. Regisseur für zwei Graphen Fotografie. Stimmt's? Und während dies noch ausgewählt ist, ist in Stil gehen, Mitte ausrichten. Und jetzt ist der Abstand zwischen dem Namen und dem Titel zu groß. Lassen Sie uns also den oberen Spielraum reduzieren während er noch erweitert ausgewählt ist. Brechen Sie diesen Link genau dort auf und reduzieren Sie den oberen Rand. Aktualisieren. Und jetzt duplizieren wir dieses Bild und legen es dort rein. Lassen Sie uns das duplizieren und es zweimal in
das Duplikat legen und tidal zweimal. das am Ende fallen, dass am Ende das Gleiche
für den zweimal duplizierten Namen tut . Und jetzt können wir dies auswählen und in einen Namen unter Inhalt ändern , den wir benötigen. Jane Doe. Und Jane. Jane geht zufrieden hinein. Lassen Sie uns das ändern, um das zu aktualisieren, wählen
wir hier Alex Writer aus. Ändere das in mein Titelsong. Vielleicht der Marketingdirektor. Date das. Und lasst uns die Bilder ändern. Also wähle ich dieses Bild aus. Und sobald ich es ausgewählt habe, wird dies angezeigt. Klicke das an. Wählen Sie ein anderes Mitglied aus. Dieser Typ. Beachten Sie, wählen wir diese Lady weil Sie hier den Namen einer Dame benutzen, Jane Doe. Wählen wir diesen Kerl hier aus. Wählen wir das letzte Teammitglied
Michael Sims aus, um das zu aktualisieren. Und beachte, dass dies ein bisschen kürzer
ist als der Rest, also können wir sie immer ändern, bis wir schöne Füße haben. Spielen Sie einfach mit der Größe herum bis Sie den perfekten Feed haben. Und dann lasst uns eine Vorschau anzeigen. Scrollen Sie also nach unten. Alles in Ordnung, also jetzt ist hier unser Team, aber jetzt müssen wir dieses x ändern, um es zu lesen. Treffen Sie unser Team, treffen Sie unsere Teams. Also aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Und jetzt sieht unser Team super toll aus. Gehen wir also zu unserer Referenzseite hier. Das nächste ist meine Erfolge im Zahlenbereich, dieser Abschnitt hier, und es ist animiert. Wenn jemand die Seite zum ersten Mal besucht. Diese Zahlen sind animiert. Mal sehen, wie das geht in der nächsten Lektion. Also wir sehen uns in Kürze.
14. Animierte Theke: Willkommen zurück. Wir fahren fort, wo wir aufgehört haben. Wir wollen jetzt diese erstellen, meine Erfolge im Zahlenbereich. Und diese Zahlen sind animiert. Mal sehen, wie das in unserem Arbeitsbereich geht. also reinspringe, gehe
ich direkt nach unten. Und, und lassen Sie uns
einen einzelnen Spaltenabschnitt erstellen . Einfach so. Und was wir tun wollen, ist eine Kreuzung hinzuzufügen. wir also kurz davor klicken,
fügen wir oben in diesen Abschnitten einen Rand hinzu. Klicken Sie also auf diesen Fortschritt, brechen Sie den Link auf und
geben wir ihm einen oberen Rand über 100. Stimmt's? Das ist also, das ist genug Abstand genau dort. Was wir also tun wollen, ist am Ende auf das Pluszeichen zu klicken und eine Kreuzung zu ziehen. Und dann duplizieren wir es noch
zweimal . Einfach so. Jetzt haben wir vier Spalten in diesem inneren Abschnitt, sich in diesem Abschnitt befindet. In diesem inneren Abschnitt klicke ich auf Plus. Und dann tippe ich hier drin zählen. Und wir haben hier ein paar Punkte verwandte Elemente, aber derjenige müsste den Zähler erleichtern. Ziehen wir diesen Zähler hier rein und lassen ihn dort rein. M standardmäßig fängt es einfach an, seine Arbeit zu erledigen. Merken Sie, dass wir hier die Endnummer haben, diese 100 sind genau hier, also können wir sie immer auf
vielleicht 23 ändern , je nachdem, was Sie zeigen möchten. Und ändern Sie diese coole Nummer hier, wir können den Titel hier unten jederzeit ändern. Schauen wir uns zum Beispiel an, was wir hier haben. Ja, also kommt die Anzahl der Fotos hierher und füge das da rein. Jetzt haben wir 23 Fotos. Das ergibt keinen Sinn. Angenommen, Sie haben 6.400 Fotos. Alles klar. Was wir also tun wollen, ist
diese eine einzige Leistung hier zu stylen diese eine einzige Leistung hier und dann für den Rest dasselbe zu duplizieren. zunächst Lassen Sie uns diese Farbe zunächst in Gelb ändern. Wisse, dass es weiß ist. Gehen wir also in den Stil und ändern wir die Textfarbe in Weiß. Typografie hat es definitiv geändert. steht Ihnen jedoch frei, es in jede gewünschte Schriftart zu ändern. Und dann spiele ich mit
der Größe herum , damit sie nicht zu groß ist. 35 zu denken, reicht aus. Und ich will es mutig machen, also gebe ich ihm 900. Jetzt geben wir es siebenhundert, achthundert. Jup. Und dann schließe ich das ab. Ich gehe in den Titel und ändere die Typografie hier. Zunächst einmal, um Monstera zu sein, interagieren. Und dann ändere ich hier die Farbe in unser Gelb. Also kopiere ich das Gelb und füge es hier ein. Und jetzt ist es wahrscheinlich immer noch da. Klicken Sie irgendwo hier drin, um das loszuwerden, aktualisieren Sie das. Und jetzt werden Sie natürlich feststellen, dass wir hier
diesen gräulichen Hintergrund haben , der
diese Erfolge wie Tabs hervorstechen lässt . Lassen Sie uns also diesen Hintergrund erstellen. Es sind definitiv die Abschnitte, also wähle ich den Abschnitt selbst aus. Und dann gehe ich in Stil, Hintergrund, Hintergrund, Typ, Farbe. Ich gebe ihm so dunkelgrau. Dann lass mich irgendwo hier klicken. Und jetzt ist es so großartig. Aber jetzt hat unsere Kolumne keine Farbe. Also möchte ich die Spalte auswählen, Unsere Spalte hier. Und ich möchte in Stil,
Hintergrundtyp gehen und ihm eine schwarze Farbe geben. Jetzt ist es schwarz. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Und so sieht es vorerst aus. Also müssen wir ihm diese Grenze geben
und ihm einen Grenzradius geben. Während es noch ausgewählt ist, unser erster ein Go-Insider-Stil. Grenze. Und wir geben ihm eine solide Grenze. Und geben wir ihm einen Grenzradius von fünf. Jetzt geben wir ihm eine Sieben. Und dann geben
wir ihm für die Randbreite etwas wie lass uns vorerst eine Vier geben und das aktualisieren, was zuvor geändert wurde. Alles klar, mal sehen, was unsere Referenz hat. Es hat eine Art Grau. Während es noch ausgewählt ist, möchte
ich Box Shadow sagen, weil mir
aufgefallen ist, dass wir einen Box-Shadow hinzufügen müssen. Und wenn wir auf den Box-Shadow klicken, können
Sie aufgrund dieser Frames
diese Editor-Frames jetzt nicht sehen , aber der Box-Schatten wird bereits angezeigt. Lassen Sie mich es einfach aktualisieren und in der Vorschau gehen, damit Sie den Box-Shadow sehen
können. Und dann lasst uns wählen: Los geht's. Wählen wir einen Abschnitt aus. Ich möchte die Polsterung oben und unten erhöhen. Also wähle ich zuerst den Abschnitt aus. Riesige Polsterung, oben Lass uns eine 50er geben. Jetzt sind das 550. Und untere 50. Und jetzt haben wir ihm oben und unten etwas schönes Zimmer gegeben. Und wir können das Gleiche für die Seiten tun, beide Seiten. Lassen Sie uns vielleicht ein 2220 geben oder das Update schreiben. Und lasst uns etwas gegen diese Grenze unternehmen. Es ist zu hell. Während dies ausgewählt ist, ist die Spalte selbst. Gehen wir in die Randfarbe. Und lassen Sie uns auch das Dock Grey geben und das dann aktualisieren. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Überschreiben Sie super genial. Aber jetzt scheinen die Zahlen den oberen Rand
der Spalte zu berühren und wir brauchen sie, um eine schöne Polsterung zu haben. Lassen Sie uns also die Polsterung für die Spalte selbst erhöhen. Klicken Sie also in diese Spalte. Gehe hinein fortgeschritten. Denken Sie daran, dass wir diese Links vor einem Moment gebrochen hatten. Lasst uns jetzt die obere Polsterung vielleicht auf 15 erhöhen. Und auch untere Polsterung. Und lasst uns jetzt kopieren. Klicken Sie mit der rechten Maustaste auf
die Spalte, die Spalte selbst, und klicken Sie mit Und hier klicken Sie mit der rechten Maustaste und fügen Sie Stil ein. Also hast du diesen Stil eingefügt. Und lasst uns das Gleiche für diese beiden wiederholen. Wir fügen all diese Kacheln , die wir auf diese Spalte angewendet haben. Jetzt sieht es fast genauso aus wie diese. Das nächste, was wir tun wollen, ist
das dreimal zu duplizieren und es dort hineinzuziehen. Ziehen Sie das da rein und ziehen Sie es dort hinein. Und jetzt beachte, dass sie die Ränder berühren, also ist das der rechte und linke Rand. Also wählen wir dieses aus. Wählen wir diese einzelne Spalte aus. Und lasst uns die richtige Marge
um vielleicht etwa 10 erhöhen . Und die linke Polsterung auf 10, linker Rand, 10, zehn oder rechts. Und dann lassen Sie uns mit der rechten Maustaste klicken und diesen Stil kopieren. Und fügen wir diesen Stil in diese drei ein. Und jetzt wurden sie richtig getrennt. Lasst uns das aktualisieren. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Stimmt's? Scrollen wir nach unten und sehen, was wir haben. Aber perfekt. Das einzige, was übrig bleibt, ist eine Unterüberschrift für den Abschnitt. Also dupliziere ich das und ziehe es hier rein. Lass es gleich dort fallen. Und wir können das nennen. Meine Erfolge. Zahlen stimmen, aber natürlich müssen wir all diese Zahlen hier ändern. Sie können nicht alle dasselbe lesen. Wenn Sie also den
Inhalt auswählen, können Sie diese auf 51 ändern. Und das könnten Kunden sein. Dann ändern wir das in CDs. Cds, die du vielleicht 15 CDs abgedeckt hast. Und der letzte 1. Mai ist jahrelange Erfahrung, vielleicht 25 plus. Im Moment haben wir also 25 hier. Aber wir können hierher
zum Nummernsuffix oder Präfix kommen und einige Dinge hinzufügen. Sagen wir also das Nummern-Suffix. Wir können das Pluszeichen hinzufügen, einfach plus treffen, und jetzt
wird es hier erscheinen, 25 plus Jahre. Lassen Sie uns das also in der Vorschau der Änderungen aktualisieren. Scrollen Sie also nach unten. Ordnung, ich liebe was ich mir ansehe. Also werden wir mit diesem Abschnitt „Erfolge“ beenden. Das nächste, was wir tun wollen, ist,
diesen neuesten Blogbeitragsbereich hier zu erstellen . Und all diese Daten werden aus Blog-Posts abgerufen, die Sie bereits veröffentlicht haben. Schauen wir uns also in der nächsten Lektion an, wie das geht. Wir sehen uns in Kürze.
15. Anzeigen der neuesten Blog-Posts: Willkommen zurück. Lass uns weitermachen. Im Moment wollen wir
diese neuesten Blogbeiträge erstellen , sexuell. Und wie wir bereits erwähnt haben, Daten aus unseren bereits veröffentlichten Blogbeiträgen abgerufen. Das bedeutet also, dass wir einen veröffentlichten Blogbeitrag brauchen. Gehen wir in unser Dashboard und erstellen einige Beiträge. Im Dashboard gehe
ich also zu Posts. Klicke das an. Und wir haben einen Standard-Hello World-Blogbeitrag, mit jeder neuen Installation von WordPress
geliefert wird. Natürlich werde ich
das beschädigen, weil wir unsere eigenen erstellen wollen, Add New oder direkt in wenn wir hier sind, lass uns einem Blogpost einen Namen geben. Also gehe ich einfach hier rein. Und ich möchte diesen Namen genau hier holen. Kopiere das. Und lasst uns ins Dashboard gehen und es dort einfügen. Also werde ich hier nichts
anderes anfassen , weil wir nur versuchen, einige Blogbeiträge schnell zu veröffentlichen. Gehen wir also in Einstellungen und scrollen nach unten und suchen nach einem vorgestellten Bild. Lassen Sie uns ein vorgestelltes Bild für diesen Blogbeitrag festlegen. Sagen wir zum Beispiel, worum geht es? Lassen Sie uns die Kameraeinstellungen richtig machen, ja, also schauen wir uns
ein schönes Bild an , um die richtigen Kameraeinstellungen wie diese zu finden. Lassen Sie uns das vorgestellte Bild einstellen. Und dann lasst uns das aktualisieren. Beitrag wurde aktualisiert. Wir können uns den Beitrag ansehen, aber lasst uns
hier wieder hineingehen und einige World-Blog-Posts erstellen. Füge neue oder RI hinzu, die zweiten Blogbeiträge gehen hier und nimm diesen Namen und füge ihn hier ein. Und natürlich würden
Sie in der realen Welt den Blogbeitrag
erstellen und veröffentlichen. Aber jetzt erstellen wir keine Inhalte, wir fügen nur den Blogtitel hinzu, oder? Bevor wir also veröffentlichen, wird ein vorgestelltes Bild hinzugefügt. Mal sehen, ich denke, es geht um Outdoor-Fotografie, also wähle ich das aus. Und dann veröffentlichte das, veröffentliche diesen Callback. Wir müssen noch einen erstellen. Neu hinzufügen. Dies sind also die Daten, die an die Vorderseite der Webseite gezogen und dort angezeigt werden. Kopieren wir das also und fügen es dort ein. Oh, warte, lass uns das vorgestellte Bild einstellen. Ich weiß nicht mal, worum es geht, also setze ich mich einfach auf diese Veröffentlichung. Also haben wir jetzt unser vorgestelltes Bild festgelegt ihm einen Namen
gegeben. Lass uns wieder reingehen. Jetzt haben wir drei Blogbeiträge. Sie haben einen Titel und ein vorgestelltes Bild. Dies ist der Titel und dies ist das vorgestellte Bild. Also was wir haben, alles was wir brauchen. Wenn wir also direkt hier in
unseren Elementor-Seiten-Arbeitsbereich zurückkehren , möchten
wir einen einzelnen Spaltenabschnitt hinzufügen, und darin müssen wir ein Post-Raster hinzufügen, das durch
wichtige Add-Ons für verfügbar gemacht wird Elementor, aber es ist standardmäßig nicht aktiv, wir müssen wieder in unser Dashboard gehen und es im EIA-Plugin
aktivieren. Gehen wir also in das Dashboard und klicken Sie auf wichtige Atome. Lass uns in Elemente eingehen. nach unten scrollen, werden Sie feststellen, dass die Postnote unter dynamischen Inhaltselementen nicht überprüft
wird, also überprüfen Sie es. Scrollen Sie nach oben und speichern Sie die Einstellungen. Einstellungen wurden gespeichert. Jetzt haben wir diese Elemente in unser Arsenal aufgenommen. Lasst uns diese Seite zuerst aktualisieren. Und jetzt, wo es aktualisiert wurde, bedeutet das, dass wir unsere Änderungen gespeichert haben. Aktualisieren wir die Seite Control R
oder Command R auf einem Mac, um
die Seite zu aktualisieren , damit die Post-Note zur Verwendung verfügbar ist. Alles klar, also wenn wir jetzt Gier tippen, erscheint
es hier, Post Greed. Scrollen wir also ganz nach unten nach unten. Und denken Sie daran, dass wir diesen einspaltigen Abschnitt hinzugefügt hatten. wir zuerst Ziehen wir zuerst diese Post-Gier dort hinein und lassen sie dort fallen. Jetzt werden Sie unsere drei Blog-Posts bemerken, bereit sind. Und jetzt lassen Sie uns diese Marge oben
erhöhen , indem wir den Abschnitt erweitert auswählen. Zerbrich die Verbindung da drüben, gib ihr 100. Und jetzt haben wir einen schönen Spielraum an der Spitze. Das nächste, was wir tun wollen, ist
irgendwo in diesen blauen Rand zu klicken . Also haben wir das Element ausgewählt, das Post-Raster. Zunächst müssen wir ihm sagen, woher die Daten
abgerufen werden sollen. Also könnten wir Kategorien gebrauchen. Aber im Moment geht es in dieser Klasse nicht um Kategorien, aber denken Sie daran, dass Beiträge Kategorien haben. Sie könnten also Beiträge über Outdoor-Fotografie, Beiträge über Indoor-Fotografie haben. Und wenn jemand auf Ihre Website kommt, um Outdoor-Fotografie zu suchen,
werden Beiträge präsentiert,
in denen Sie die Kategorie auf Outdoor-Fotografie festlegen. Aber im Moment,
wenn wir keine Kategorien haben, werden
Beiträge normalerweise als nicht kategorisiert kategorisiert, also gibt es eine Kategorie, die wir nicht löschen können Die heißt uncategorized. So können wir standardmäßig Daten von dort abrufen, nur um
sicher zu sein , dass wir tippen und kategorisieren können, und es ist hier über 8 erschienen. Und so sind wir jetzt sicher, dass
es also die Daten abruft. Und das nächste, was wir tun wollen, ist uns zu ändern. Zunächst einmal, Beiträge pro Seite, wollen
wir drei zeigen. Wenn wir also sieben Blogbeiträge hätten, würden
wir hier immer noch nur drei sehen. Das heißt das also. Und lassen Sie uns dies für eine
Sekunde reduzieren und die Layouteinstellungen erweitern. Wir möchten drei Spalten anzeigen oder schreiben, aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Super genial, also nehmen sie schon Gestalt an. Lassen Sie sich also nicht davon täuschen, wie sie hier aussehen. Wenn wir die Seite aktualisieren, lassen Sie mich einfach R steuern, um zu aktualisieren, wie sie hier aussehen. Oder Abwechslung. Also geh hier runter. Das nächste, was wir tun wollen, ist natürlich,
die Hintergrundfarbe in
Ryan mit unserer Hintergrundfarbe zu ändern die Hintergrundfarbe in
Ryan mit unserer Hintergrundfarbe zu . Während dies noch ausgewählt ist, wählen Sie eine beliebige Stelle innerhalb des Elements aus. Wir wollen ins Innere gehen. Also nein, geh zurück in den Inhalt und lass uns einige dieser Details hier verstecken. Gehen wir also zu Layoutstilen. Und lasst uns keinen Avatar zeigen. Zeigen wir den Namen des Autors nicht an. Es ist nicht das Datum zu zeigen. Oder vielleicht können wir den Namen des Autors zeigen. Es liegt also an dir zu entscheiden, was du zeigen willst. Ich möchte den Namen des Autors nicht anzeigen. Ja, ich glaube, so gefällt es mir. Nur der Titel und jemand kann mehr lesen. Wir können den Auszug auch zeigen, wenn wir wollen, aber ich möchte nicht zeigen, dass die Eier es sind. Also, wenn wir in den Stil gehen, haben
wir die Hintergrundfarbe im Postkartenstil. Lasst uns das also in Schwarz ändern. Es nimmt also schon die Form an, die wir wollen. Und das nächste, was wir wollen, ist, zur
Typografie zu gehen und die Titelfarbe in Weiß zu ändern. Ist es hier erweitert? Hier ist es breit. Und lassen Sie uns die Typografie selbst in Monterrey umwandeln. Monterrey. Und lassen Sie uns den Schriftweg auf 800 erhöhen. Und ich möchte es so zentralisieren. Dann erweitern wir den Stil der Schaltfläche „Mehr lesen“ oder rechts. Ändern wir die Textfarbe in Weiß. Und dann wählen wir diese gelbe Farbe aus. Kopiere das. Und lassen Sie uns den Hintergrundtyp 2
ändern, diese gelbe Farbe. Els ändert es in diese Kolumne, Mann. Alles in Ordnung. Das nächste, was ich mache, ist die Polsterung auf dem Button hier zu
erhöhen. Wie Sie sehen können,
berühren die Wörter die Kanten der Schaltfläche. Also. Lass uns zur Polsterung gehen und das brechen. Lass uns vielleicht eine 30 auf der linken Seite geben, eine 30 auf der rechten Seite. Jetzt probieren wir es mal aus. Links und rechts 2020. Und dann können oben und unten sein 10101055 ist okay. Alles klar. Und dann geben wir ihm einen Randradius von fünf, um ihm die abgerundete Ecke so zu geben. Und dann lasst uns diese Marge brechen. Und lassen Sie uns eine Top-Marge geben. Lassen Sie uns vergrößern und nutzen Sie unser Auge, um zu
sehen, wie weit wir gehen müssen, sagen wir 15. Und am linken Rand erhöhen
wir den linken Rand auf vielleicht, sagen wir eine 100. Yup, eine 100 ist vorerst okay. Ändern wir diese Schriftart in Schwarz zu Schwarz. Und dann beim Schweben ändern
wir es in Weiß. Und dann ändern wir die Farbe des Hintergrundtyps
in dieses milde Rot. Also lasst uns das da reinfügen. Also wer auch immer diese milde Lektüre isst, aktualisiere das. Und jetzt haben unsere Bilder hier scharfe Ecken und unsere
Referenzbilder hier haben abgerundete Ecken. Also lasst uns etwas dagegen unternehmen. das also zusammenbrechen und in den Miniaturansichtsstil gehen, geben
wir ihm einen Randradius von 20. Und jetzt hat es diese abgerundete Ecke. Aktualisiere das. Und jetzt duplizieren wir diesen Titel. Und ziehen wir es da rein. Die neuesten Blogbeiträge. Und dann lassen Sie uns das duplizieren, was gut ist, und lassen Sie es genau dort fallen. So. Das ist also eine kurze Beschreibung dessen, was hier unten zu erwarten ist. Aktualisiere das. Und lasst uns eine Vorschau der Änderungen anzeigen. Scrollen Sie ganz nach unten oder rechts nach unten. Das haben wir derzeit. Ich würde Ihnen raten, weiter mit den Einstellungen
herumzuspielen , um zu sehen, was Sie mit dieser Post-Gier sonst noch
produzieren können . Das nächste, was wir tun wollen ist dieses Formular genau hier zu erstellen. Es ist ein weiterer großartiger Aufruf zum Handeln. Holen Sie sich Fototipps, eine neue Lieferung in Ihren Posteingang. Dies ist also eine gute Möglichkeit,
Benutzer-E-Mails zu erhalten , damit Sie regelmäßig mit ihnen sprechen können . Sehen wir uns an, wie Sie diesen
Call-to-Action-Abschnitt in der nächsten Lektion erstellen können. Also wir sehen uns in Kürze.
16. Ein Formular hinzufügen: Das nächste, was wir erstellen möchten, ist dieser
Call-to-Action-Bereich hier, für den sich angemeldet hat, und er ist ein ziemlich wichtiger Teil einer Zielseite, da
Sie damit die Kontakte des Benutzers erfassen können . Und das ist ein sehr wichtiger Teil des Online-Geschäfts. Mal sehen, wie das in unseren Projekten geht. Also springe ich hier rein. Und was wir tun müssen, ist hier hinein zu gehen, nach oben
zu scrollen und diesen Abschnitt zu duplizieren. Denken Sie daran, dass wir so etwas bereits geschaffen haben. Und jetzt, da wir zwei von ihnen haben, ziehe
ich das einfach ganz nach unten. Und jetzt können wir das einfach bearbeiten. Alles, was wir tun müssen, ist hier hineinzugehen, diesen Abschnitt
auszuwählen und dann den Stilhintergrund zu verwenden. Ich wähle ein anderes Bild aus. Ich glaube, ich wähle das aus. Legen Sie Medien ein. Und da haben wir es. Jetzt ist es also ein anderes Bild. Und das ist das Original. Gehen wir hier runter und Sie werden feststellen, dass
diese hier auf unserer Referenzseite etwas größer ist und das liegt an der Form und dem gesamten Inhalt. Denken Sie daran, dass ich Ihnen gesagt habe, die Abschnitthöhe durch die Menge des darin enthaltenen Inhalts
bestimmt wird. zuerst Lasst uns zuerst diese Texte schnappen. Ich kopiere das und wähle das aus und wähle es aus. Füge es da rein. Ich gehe weiter und wähle das aus. Und jetzt ist das Lorem ipsum oder Ride. Das nächste, was wir tun wollen, ist dieses Formular zu erstellen. Um dies zu tun, verwenden wir einen Formular-Plug-In-Code für den Terminator. Also lasst uns später für mich installieren. Aber lasst uns zunächst auf unsere Seite springen, sie
aktualisieren und eine Vorschau der Änderungen anzeigen. Scrollen Sie ganz nach unten oder rechts nach unten. Das haben wir derzeit. Weg in unser Dashboard fällt also überein. Plugins, füge neu hinzu. Und in unserer Suchleiste hier tippen
wir nach Minister. Wie der Terminator für Ministerformulare. Wo ist es? Ja, genau hier. 200 Tausend aktive Installationen von WP Mu dev. Also Jetzt installieren, ausführen oder fahren, Aktivieren. Und jetzt haben wir vier Minister installiert. So können wir von diesem linken Menü aus direkt hier darauf zugreifen. Also klicke einfach vier Minuten. Also nehmen wir diese Landing Page mit einer Zusammenfassung der Statistiken auf. Was wir also tun wollen, ist ein Formular zu erstellen. So wird create mit einigen vorgefertigten Vorlagen präsentiert. Und ja, lasst uns weitermachen und klicken Sie auf Newsletter-Anmeldung. Fahren Sie fort. Nennen wir ihm einen Namen. Anmeldeformulare, Anmeldeformular. Lass es uns erschaffen. Und jetzt wurde es erstellt. Also hier ist es mit seinem Namen, hat ein paar Optionen direkt hier in diesem Dropdown-Menü. Und du wirst sehen, wie wir
diesen Kurzcode in einem Moment verwenden können . Schauen wir uns vorerst an, was wir haben. Auf der linken Seite haben wir verschiedene Panels, die
verschiedene Phasen Ihrer Formularerstellung haben . Wenn Sie also Ihr Formular erstellen, sind
dies die Phasen, die Sie durchlaufen. Sie erstellen also zuerst die Felder stylen
dann die Felder. Dann bestimmen Sie, wie sich das Formular
verhalten wird , wenn Personen Daten übermitteln, konfigurieren
dann alle Einstellungen für
E-Mail-Benachrichtigungen, wenn jemand Daten über E-Mail-Benachrichtigungen, wenn jemand ein
Formular sendet, und wenn Sie sie integrieren möchten und all das Zeug. Aber im Moment wollen wir
ein Formular erstellen, das hier im Frontend so angezeigt wird. Sie werden also feststellen, dass wir
zwei Felder haben und wir haben diese Optionen zum Einfügen von Feldern. Wenn wir darauf klicken, können wir unserem Formular weitere Felder hinzufügen, aber es muss nur
den Vornamen und die E-Mail-Adresse haben . Wenn wir eine Vorschau anzeigen
, wird es so aussehen. Und lass uns da verschwinden. Und es hat diesen Abonnieren-Button. Also lasst uns eine Vorschau anzeigen. Und der Button sagt „Abonnieren“. Das ist also unsere Form. Lassen Sie uns dieses Formular veröffentlichen. Und sobald es veröffentlicht wurde, wird
dieser Kurzcode präsentiert , den wir kopieren können,
indem Sie auf dieses Symbol hier klicken. Wir haben es kopiert. Der Kurzcode wurde erfolgreich kopiert. Oder wir gehen hier hoch, Anmeldeformular, klicken darauf und kopieren den Kurzcode. Sobald Sie darauf klicken, kopieren
Sie den Kurzcode. Ich gehe hier in unsere Seite, unseren Arbeitsbereich. Wir müssen hier hochgehen und auf
das winzige Symbol klicken und Kurzcode sagen. Und ziehen wir dieses kurze Code-Element hierher. Lass es uns da reinlegen. Und solange es noch ausgewählt ist, können
wir den Kurzcode eingeben, den wir gerade von hier kopiert haben. Wir kopieren einfach diesen Kurzcode. Und jetzt fügen wir es hier ein. Nun, das wird dieses Formular für uns anzeigen. Lassen Sie uns diesen Button loswerden und wenden Sie ihn nun an. Und lasst uns
am Freitag wirklich ändern . Das haben wir vorerst. Gehen wir wieder rein und gehen wir ins Aussehen. Und inneres Aussehen. Sie werden feststellen, dass wir hier diese verschiedenen Optionen haben, flaches, kühnes Material und keine. Lassen Sie uns flach wählen, und das
beseitigt die Grenzen der Eingabefelder. Und dann lass uns unter Farben ins Kostüm gehen. Gehen wir ins Kostüm, scrollen Sie nach unten und wählen Sie die Schaltfläche „Senden“. Dadurch sollten die verschiedenen Einstellungen für die Schaltfläche für die Hintergrundfarbe angezeigt werden. Lass es uns ändern, lass mich dieses Gelb auswählen. Kopiere das da drin. Lasst uns den gelben und eigenen Hoover einfügen
, der gelesen werden wollte. Also gehe ich und hole mir diese milde Lektüre hier hin und füge sie dort ein. Und im Fokus wollen wir, dass es so ist, dass Rot gut ist, fügen Sie es dort ein. Aktualisieren wir das und sehen wir uns die Änderungen an. Oder richtig, also sieht es großartig aus. Lasst uns also direkt hineinspringen und Änderungen vornehmen. Änderungen, mit denen sich diese Änderungen jetzt
in unserem elementaren Arbeitsbereich oder unserer Fahrt widerspiegeln . Lassen Sie uns also eine Vorschau der Änderungen anzeigen. Alles in Ordnung. Das ist es, was wir jetzt beim Schweben haben. Es ist rot und in seinem normalen Zustand ist es gelb. Lasst uns also hier zum Kontaktbereich springen. Lassen Sie uns also den Kontaktbereich hinzufügen. Was wir also tun wollen, ist einen sechsspaltigen Abschnitt hinzuzufügen. Also dieser Abschnitt hier mit sechs Spalten. Und ziehen wir das auf unsere Fünf-Punkte-Fünf-Marke genau dort hin. Und lasst uns das Gleiche für diesen 5.5 machen. Und schließlich für das 5.5, irgendwo dort. Und jetzt will ich herkommen und das duplizieren. Ziehen Sie es hier ganz nach unten rechts. Dann dupliziere das und ziehe es ganz nach unten. Lass es dort fallen. Geh zurück und kopiere das, dupliziere das. Was wir tun wollen, ist das Büro zu sagen. Und natürlich, wo das Büro ist, ist dieser Bereich genau dort. Und ich möchte das duplizieren und dann dort hineinziehen. Dupliziere das, ziehe das da rein. Und du kennst den Bohrer. Aber jetzt kann das dort fallen gelassen
werden , denn denken Sie daran, dass dies zu klein ist, also ziehe ich das lassen Sie es dort hinein. Ändern Sie diese Größe auf 5,55,5, irgendwo gibt es 5,5. Ich kann keinen 5.5 bekommen, aber ich werde das duplizieren und Seide fallen lassen und dort hineinlegen. Also erweitern Sie es und fallen Sie dort ab. Der 5.5. Dann dupliziere das. Lass das da rein. Dupliziere das, lass das da rein. Lasst uns weitermachen und uns diese Nummer schnappen. Lass es da rein und füge es ein. Mailen Sie mir. Ruf mich an. Aktualisieren wir das und lassen Sie uns eine Vorschau der Änderungen anzeigen. Richtig. Scrollen wir ganz nach unten. Und das haben wir. Aber wir müssen ganz oben etwas gegen diese Marge unternehmen. Gehen wir also zurück, wählen Sie das erweiterte aus, brechen Sie diesen Link auf. Also haben wir es mit der Spitze zu tun, nur mit 100. Und lasst uns das aktualisieren. Jetzt, da wir mit dem Kontaktbereich fertig sind, lassen
Sie uns eine Vorschau anzeigen. Trocken. Scrollen wir ganz nach unten. Perfekt. Jetzt, da wir mit dem Kontaktbereich fertig sind, erstellen
wir diesen Kartenabschnitt. Dies kommt direkt von Google Maps.
17. Hilf mir Elementor zu 10.000 Kursteilnehmerinnen und Kursteilnehmerinnen: Hallo mein Freund. Zunächst möchte ich mich nur ganz
herzlich dafür
bedanken, dass Sie sich mir in diesem Kurs angeschlossen haben
und von mir lernen möchten. Und
ich möchte auch gratulieren so weit
in die Klasse gekommen sind. Die Tatsache, dass Sie so weit in
den Unterricht
gekommen sind
, bedeutet, dass Sie von der Klasse profitieren. Deshalb schätze ich dich sehr und hoffe, dass dir der Unterricht selbst
Spaß macht. Davon abgesehen brauche
ich deine Hilfe. Ich habe es mir zur Aufgabe gemacht,
mindestens 10.000
Unternehmern wie Ihnen beizubringen ,
elementary zu verwenden , um
ihre eigenen Websites
oder Zielseiten zu erstellen , um ihre Produkte zu
verkaufen. Und so können Sie helfen. Du siehst, wenn ein neuer
Schüler einer Klasse auf
Skillshare beitritt und diese
Klasse dann mag und hinterlasse eine Bewertung. Es hilft anderen Schülern zu
wissen, was sie
von der Klasse erwarten können. Und wenn eine Klasse viele Bewertungen von Schülern erhält , sagt
Skillshare:
Hey, weißt du was? Dieser Kurs erhält
viel Engagement und viele Kritiken
von den Schülern. Es muss also hilfreich sein. Also muss es nützlich sein. Lassen Sie uns es also in
der Bibliothek nach oben schieben , damit es für neue Schüler besser
auffindbar ist. Der
Skillshare-Algorithmus treibt diese Klasse nach oben und
macht sie für neue Schüler sichtbarer und
besser auffindbar
. Weil es
positive Bewertungen erhalten hat. Und da kommst du ins Spiel. Bitte begleiten Sie mich bei dieser
Mission und helfen Sie mir mindestens 10.000
Schülern
beizubringen, wie man Elementor benutzt, wie man schöne
Landingpages erstellt,
funktionierende Websites, indem man eine Rezension in
dieser Klasse hinterließ und sie wissen zu lassen, was sie
von diesem Kurs erwarten können. Du brauchst nur etwa
zwei Minuten und du bist fertig. Ihre Bewertung wird jedoch dazu beitragen, dass
neue Schüler Studieninteressierte wissen,
was sie von der Klasse erwarten können. Unterricht entspricht Ihren Erwartungen. Hat es Ihre Erwartungen übertroffen? Wenn Sie
Fragen haben, denken Sie daran, dass Sie diese jederzeit
im Diskussionsbereich
unter diesem Video ablegen können, damit ich Ihnen weiterhelfen kann. Ich antworte immer auf
jede einzelne Frage oder jeden
Kommentar, den die Schüler in einer meiner Klassen
hinterlassen. Und nachdem das gesagt ist, möchte
ich nur sagen,
viel Spaß beim Unterricht und wir sehen uns in der nächsten Lektion. Frieden!
18. Eine Google Map hinzufügen: Willkommen zurück. In dieser Lektion möchten
wir diese Google Maps hinzufügen, damit die Leute
uns sehen können , wenn Sie Fotograf sind und
jemand einen Termin mit Ihnen gebucht hat oder Sie gerne hineingehen möchten Kunden, um Ihr Büro finden zu können. Sie möchten eine Karte auf Ihrer Website auf Ihrer Landing Page. Also schauen wir uns an, wie man diese Karte hinzufügt. Sprung in unseren Arbeitsbereich genau hier. Was wir tun möchten, ist einen Abschnitt mit voller Breite, einer
einzelnen Spalte und voller Breite hinzuzufügen . Und lassen Sie uns eine Top-Marge von 100 geben. Also gehen Sie nach innen fortgeschritten, brechen diese Verbindung, also haben wir es mit einer Top-Marge zu tun. Lasst uns ein 100 geben. Und jetzt wählen wir dort das Pluszeichen aus. Und hier drin tippen Sie Map. Wir haben hier ein paar Kartenoptionen. Derjenige, den wir Epi wollen, ist Google Maps. Lass es da rein. Und jetzt haben wir
hier verschiedene Möglichkeiten , die Sie ausfüllen können. Dies geben
Sie beispielsweise genau hier Ihren tatsächlichen Standort oder den Standort Ihres Büros oder Ihres Studios ein. Und lasst uns das aktualisieren und eine Vorschau der Änderungen anzeigen. Scrollen Sie also nach unten oder Freitag, also ist es jetzt live auf der Webseite. Das nächste, was wir tun wollen, und die Leute können zur eigentlichen Google-Map wechseln. Wechseln wir also einfach zu diesem Teil der Stadt. Und da sind wir los und sie können sich
bewegen und hineinzoomen, wenn sie wollen. Dies ist Google Maps, die auf
unserer Website eingebettet sind, indem Sie es in diesem div platzieren. Jetzt, da wir mit einer Map fertig sind, der nächste Teil, der noch übrig
ist , die Fußzeile und wir sind fertig mit der Landing Page. Schauen wir uns also in der nächsten Lektion an, wie das geht. Wir sehen uns in Kürze.
19. Die Fußzeile erstellen: Willkommen zurück. In dieser Lektion sind wir gerade dabei, die Zielseite zu erstellen, aber wir müssen den Ordner hinzufügen und die Seite natürlich ansprechen, bevor wir
die Dinge abschließen. Lasst uns also direkt in unsere Seite springen. Und jetzt wollen wir
diese Seite jetzt verlassen , weil wir den Hauptteil der Seite
bearbeitet haben. Wollen Sie also hier beenden und ins Dashboard gehen. Ich schließe das Exit to Dashboard. Ich fahre gleich dort aus. Und ich gehe ins Aussehen, Elementor, Kopf- und Fußzeilengenerator. Und jetzt möchten wir einen Ordner erstellen. Also füge ich neu hinzu und es wird das überspringen. Und lasst uns direkt zur Benennung des 41. gehen. Meine Fußzeile wählt den Ordner aus. Das ist die Art der Vorlage. Ich möchte, dass es auf
der gesamten Website sichtbar ist und jeder kann es bearbeiten. Also als Nächstes hier, Elementor volle Breite, sagen wir keine Seitenleiste, vorwärts strecken. Deaktivieren wir diese vier Einstellungen genau dort. Und dann veröffentlichen wir es. Jetzt und jetzt. Bearbeiten Sie mit Elementor, weil wir
es visuell im Frontend unseres Arbeitsbereichs erstellen . Das erste, was wir tun wollen, ist das Logo hinzuzufügen. Fügen wir also einen Abschnitt mit voller Breite hinzu, einzelnen Spaltenabschnitt, also für die Breite. Und fügen wir ein Bildelement hinzu. Und wir haben dieses Bild ausgewählt, ich wähle hier aus und wähle das Logo aus. Legen Sie Medien ein. Es ist die richtige Größe. Ich habe es so geschaffen
, dass es sehr klein ist und deshalb passt es genau hier. Das nächste, was wir tun möchten, ist hier auf
das kleine Symbol zu klicken und den Texteditor auszuwählen. Ziehen Sie das unter das Logo. Lassen Sie uns fortfahren und diesen Copyright-Text kopieren. Kopiere das. Während dies noch ausgewählt ist, lasse
ich das
dort rein und ich gehe in den Stil und zentralisiere es. Ändern wir die Farbe in Weiß. Und lassen Sie uns die Schriftfamilie in Montserrat umstellen. Ordnung. Reduzieren wir die Größe auf 12. Weil das urheberrechtliche Informationen sind. Es muss nicht sehr groß sein. Lasst uns das aktualisieren. Und während wir das aktualisieren, klicken
wir darauf und geben Social ein. Weil wir Social-Media-Symbole hinzufügen möchten. Ziehen wir das also und lassen Sie es dort rein. Und jetzt sind diese Icons zu groß, also gehen wir in Stil und Größe ein. Reduzieren wir es bis zu diesem Punkt genau dort. In Ordnung, und dann wählen wir diesen Text aus. Gehen Sie zu Erweiterter Rand, brechen Sie diesen Link und den unteren Rand auf. Reduzieren wir es, damit wir sie ein bisschen näher bringen können. Und lasst uns das aktualisieren. Ich glaube, das gefällt mir. Lassen Sie uns eine Vorschau der Änderungen anzeigen. So sieht unsere Fußzeile aus. Also geh wieder rein. Jetzt, da wir mit der Fußzeile fertig sind, können
wir diese Seite schließen. Also gehe ich in den Inhalt ein. Nein, ich gehe in die Clique das Burger-Menü Beenden Sie das Dashboard. Und jetzt gehst du in Seiten. Auf der Homepage klicke ich mit der rechten Maustaste auf Anzeigen und öffne den Link in einem neuen Tab, damit wir ihn ansehen können. Und hier ist es. Sehen wir es uns von oben nach unten an, denn jetzt sind wir mit dem gesamten Inhalt fertig. Das einzige, was noch übrig bleibt, ist die Seite ansprechend zu
machen. Stimmt's? Also los geht's. Die animierten Texte, er arbeitet einwandfrei. Ich erinnere mich nur daran, dass wir
etwas gegen diesen Button unternehmen müssen . Es hat nicht den Effekt, den wir auf der Originalseite hatten. Lass mich einfach nach oben scrollen. Wir müssen diesen Floating-Effekt hinzufügen und ich zeige Ihnen, wie das geht. jetzt zu unserer Seite springen, haben wir gerade entworfen und scrollen nach unten. Stimmt's? Das haben wir also. Wir haben diese geschaffen. Sei stolz auf dich selbst. Sie haben diese bisher erstellt, wenn Sie
mitgemacht haben und es so weit geschafft haben, klopfen Sie sich auf den Rücken. Gönnen Sie sich heute eine Pause, schauen Sie sich einen Film oder so etwas an. Beachten Sie jedoch, dass unser Ordner
derzeit nicht diesen oberen Rand hat
und auch diesen grauen Hintergrund haben muss. Lasst uns bis zum Ende scrollen, muss diesen grauen Hintergrund haben. Gehen Sie also zurück auf unsere Seite, nein, in unserer Fußzeile. Gehen wir zur Elementar-Kopf- und Fußzeile des Erscheinungsbildes. Oder wir können direkt hier ins Frontend gehen. Und wenn wir den Mauszeiger über Elementor edit mit Elementor bewegen, können
wir auf meine Fußzeile klicken und es öffnet den Ordnerarbeitsbereich und wir können das Foto von dort aus bearbeiten. Alles klar, also hier sind wir. Wählen wir den Abschnitt selbst aus. Gehe zu Erweitert, brich den Link auf. Lassen Sie uns eine Top-Marge von 50 geben. Nein. Das sollte die Polsterung sein. Tut mir Leid. Das ist also die Polsterung oben von 50. So. Und lass uns dir auch unten 50 geben. Und lasst uns in Stil, Hintergrund gehen. Geben wir ihm diese graue Farbe. Dunkelgraue Farbe wie diese. Dunkelgrau, das gefällt mir. Also aktualisiere das. Wenn wir jetzt
zurückgehen und mit der rechten Maustaste auf unsere Seite klicken, klicken Sie mit der rechten Maustaste auf Ansicht Und dann springen, schau dir unsere Seite an. Scrollen wir ganz nach unten. Dort sehen wir es super toll aus. Aber jetzt lassen Sie uns
die Polsterung hier unten auf der Karte erhöhen die Polsterung hier , damit
es unten etwas Schwarz hat. Also lasst uns wieder hier rein gehen. Lassen Sie uns den Mauszeiger mit Elementor über Elementor bearbeiten und klicken wir auf Bearbeiten mit Elementor. So können wir die Seite selbst bearbeiten. Rufen wir unten an. Hier haben wir unsere Karte. Was wir also tun müssen, ist auf
diesen Kartenabschnitt selbst Advanced zu klicken diesen Kartenabschnitt selbst Advanced und ihm einen unteren Rand von 50 zu geben. Ja, lass uns an diesem Date eine 50 geben, schlecht. Jetzt können wir die Änderungen in der Vorschau anzeigen. Lass uns ganz nach unten wachsen. Alles klar, also haben wir hier etwas mehr Platz, etwas mehr Schwarz direkt unter der Karte. Und das ist die Landing Page. Wir sind fertig mit dem Design auf dem Desktop. Es ist jetzt an der Zeit, die Zielseite auf
verschiedenen Gerätegrößen anzusprechen , bevor sie die Dinge abschließen. Wir sehen uns also in der nächsten Lektion.
20. Responsives Design: Die Navbar: Willkommen zurück. Wir haben die Landing Page bereits auf dem Desktop gut
aussehen lassen. Zeit, es auf kleineren Bildschirmen
als Smartphones und Tablets nicht gut aussehen zu lassen. Ohne mehr Zeit zu verschwenden, springen
wir in das Armaturenbrett und fangen an. Und wir fangen mit einer Nav-Bar an. Also hier drin gehen wir in Aussehen,
Element-, Kopf- und Fußzeilengenerator. Und klicken wir auf Bearbeiten mit Elementor. Bearbeiten wir die Navigationsleiste mit elementor. Okay, also hier sind wir. Dies ist der Ort, an dem wir die Navigationsleiste bearbeitet haben. Und jetzt möchte ich es reaktionsschnell machen. wir also hier runter Klicken
wir also hier runter auf dieses Symbol für den Responsive-Modus. Es wird diese Leiste genau hier mit
all diesen Konfigurationen aufrufen , die uns
helfen, die Seite ansprechend zu gestalten. Wie Sie sehen können, haben wir mobile Einstellungen, Tablet-Einstellungen und wir befinden uns gerade in den Desktop-Einstellungen. Wechseln wir also zum Handy. Da sind wir also. Was wir also tun wollen, ist, wenn ich
einfach für eine Sekunde wieder zum Desktop-Maulwurf wechseln könnte , möchte
ich dir etwas zeigen. In diesem Abschnitt mit voller Breite haben
wir zwei Spalten, die Logospalte und die Menüspalte. Jede dieser beiden Spalten belegt also einen Prozentsatz des Abschnitts mit voller Breite. Wenn wir also zu mobilen Bildschirmen wechseln, ist
der Abschnitt immer noch in voller Breite, aber wir müssen diese beiden Spalten jetzt
in 100% dieser Spalte mit voller Breite aufteilen . Das tun wir also, indem wir hier die erste Spalte auswählen, die Spalte mit dem Logo enthält. Wählen wir das aus. Und unter Layout-Spaltenbreite sagen
wir 50 Prozent. Als Nächstes wählen wir die zweite Spalte aus. Und unter Layout-Spalte mit sagen wir 50. Und jetzt sind die beiden in der gleichen Linie. Was wir als Nächstes tun müssen, klicken Sie
im Menü „Auswählen“ auf eine beliebige Stelle hinein. Und unter dem Layout. Scrollen wir nach unten und finden die Ausrichtung. Unter reaktionsschneller Ausrichtung. Richten wir es nach rechts aus. Und jetzt ist es auf der rechten Seite. Lasst uns nach oben wachsen. Gehen Sie in Stil, wir wollen es breit machen. Lassen Sie uns das Hauptmenü reduzieren und Hauptauslöser
erweitern und das Symbol schließen. Geben wir ihm also eine Hintergrundfarbe von Weiß. Im Moment ist es also weiß. Und beim Schweben sagen wir den Hintergrund zu diesem Gelb. Wählen wir also den Hintergrund aus. Ich gehe rüber, um diese gelbe Farbe auszuwählen. Kopiere das. Und lass uns wieder hier rein gehen. Ändern wir die Farbe in Gelb. Also beim Schweben ist es gelb. Richtig, lasst uns das aktualisieren. Und jetzt klicken Sie neu auf das Symbol selbst, um das Dropdown-Menü aufzurufen. Sie sehen, dass das Dropdown-Menü weiß ist. Lassen Sie uns also den Hauptauslöser reduzieren und gehen wir zum Dropdown-Menü . Scrollen Sie zunächst nach unten und suchen Sie nach oberster Distanz. Lassen Sie es uns unter diesen Punkt fallen,
damit das Menü sichtbar ist. Schieben Sie es ein wenig nach oben. Und dann werden Sie feststellen, dass die Schriftarten standardmäßig
weiß und beim Mauszeiger gelb sind . Also lasst uns etwas dagegen unternehmen. Scrollen Sie also nach oben, während Sie immer noch unter Dropdown, Topographie, Textfarbe stehen. Aber seit dem zu diesem Gelb. Und jetzt sind sie gelb. Und beim Schweben wollen wir, dass sie weiß sind. Also weiter vorbei. Die Farbe ist weiß, Normalzustand, gelb. Das nächste, was wir tun wollen ist, die Hintergrundfarbe zu ändern. Unter normalen Umständen. Wir wollen, dass es so grau ist. Stimmt's? Lasst uns das aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. In Ordnung, um zu sehen wie es auf mobilen Bildschirmen aussieht, drücken Sie die Umschalttaste I oder meine Fenster, um die DevTools zu öffnen. Das wird die DevTools aufrufen. Und ich kann auf dieses winzige Symbol
hier klicken , das Symbol für den Responsive-Modus. Und das wird die Ansicht umschalten, um mobile Geräte nachzuahmen. Und in diesem Dropdown-Menü können
wir viele verschiedene Arten von Geräten nachahmen, einschließlich iPads, iPhones und Galaxien. So sieht es derzeit auf Mobiltelefonen aus. Wenn wir das erweitern, lassen Sie uns das zusammenbrechen. Es ist erweitert. Ja, ich glaube, es gefällt mir. Lasst uns genau hier etwas gegen diese Grenze unternehmen. Während wir uns noch im Dropdown-Menü
befinden, scrollen wir nach unten und suchen nach einem Teiler. Hier, genau hier, Trennwand, Grenzstil. Ändere das in „None“. Das sollte diese Zeilen genau dort loswerden. Und jetzt sehen die Dropdown-Menüs viel besser aus. Lasst uns das also aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Alles klar, also
steuere auf dieser Seite die Umschalttaste I und ich klicke genau dort auf das winzige Symbol. Rufen Sie den Responsive-Modus auf. Klicken wir auf das Icon in unserem Menü. Sieht toll aus, ich mag es. Das nächste, was wir tun wollen, ist den Rest der Seite ansprechend zu
machen. Wir sind fertig mit der Nav-Bar. Also wir sehen uns in Kürze.
21. Responsive Design: Der Hauptkörper: Alles klar, ich mag es. Das nächste, was wir tun wollen, ist, den Rest
der Landing Page auf Mobiltelefonen großartig aussehen zu lassen. Also lasst uns wieder reinspringen. Jetzt, da wir mit den Smartphone-Menüs fertig sind, verlassen
wir diesen Arbeitsbereich. Also klicke ich auf dieses Burger-Menü und Beenden Sie das Dashboard. Lassen Sie uns als Nächstes in die Seiten springen. Und lasst uns unsere Seite finden. Also hier sind wir, unsere Landing Page. Editieren wir mit Elementor. Wechseln wir also in den Responsive-Modus und sehen, wie es aussieht. Klicken wir also auf die mobile Ansicht. Fangen wir mit den animierten Texten an. Klicke das an. Jetzt gehe in Stil und Stil, ich gehe zu ausgefallenen Texten, ausgefallenen Textilien und Typografie, die
die Größe bis zu diesem Ort reduziert haben. Und dann lasst uns das zusammenbrechen. Ich gehe in Suffix-Textilien. Jetzt möchten Sie die Größe dieses Punktes bis zu diesem Punkt reduzieren. Lasst uns das aktualisieren. Und obwohl es noch ausgewählt ist, gehen
wir weiter hinein. Und lasst uns diese Margin-Verbindung aufbrechen , die sie so trennen sollte. Das nächste, was wir tun möchten, ist, hier auf
diese Spalte zu klicken und weiter hinein zu gehen. Lassen Sie uns eine Polsterung von 15 geben, ohne den Link zu
unterbrechen, damit er für alle Felder hier gilt. Also 15, und sagen wir 20. 20 ist okay. Wir müssen das ein wenig vorantreiben. Wählen Sie also diesen Abschnitt aus, gehen Sie in den Vormarsch, lassen Sie uns brechen, lasst uns die Polsterung unterbrechen. Und jetzt schieben wir es allmählich nach unten bis zu dieser Stelle. Ich mag es dort. Lassen Sie uns als Nächstes zum Button übergehen. Ich wähle den Button selbst aus. Und ich gehe fortgeschritten rein. Lasst uns die Margin-Verbindung aufbrechen. Und das sollte alle Einstellungen loswerden, die es gab. Alles klar, lasst uns nach unten scrollen. Ich glaube, ich mag es, wo alles ist. Manche Leute bevorzugen alles in der Mitte, aber ich denke, ich mag es, wo alles von links nach rechts positioniert
ist. Wir können diese Spalten genau hier auswählen. M dafür können wir ihm auch eine Polsterung von
20 geben , ohne die Verbindung zu brechen. Und diese 20 wurde auf all diese Säulen angewendet, weil sie sich in dieser Hauptsäule befinden. Dies sind, dies ist eine Kreuzung. Dies sind Kreuzungen. Als Nächstes gehen wir hier rein. Wähle ein Licht aus, das in Ordnung aussieht. Alles klar, also berühren sich diese Boxen hier. Oben und unten. Wir müssen die obere und untere Marge erhöhen. Also wähle ich eines der Boxen aus, gehe in Advanced, ich gebe ihm eine Marge von zehn. Und jetzt sollte das für alle Felder dort gelten, jeden 2D-Bereich aus allem. Also wähle ich aus, ich klicke mit der rechten Maustaste, kopiere es und
klicke dann mit der rechten Maustaste darauf und füge den Stil ein. Ich wiederhole das Gleiche für diese beiden, füge Stil ein und schließlich den Stil einfügen. Und jetzt sind sie richtig verteilt. Lass uns weitermachen. Ich mag, wo diese Opposition, wir können diese Spalte auswählen, weiter hinein gehen. Probieren wir es aus Knie 20 Pixel Rand. So. Ich sollte das Bild von den Rändern entfernen. Stimmt's? Als Nächstes wählen wir diese Spalte genau hier aus. fortgeschrittenen 20-Jahr sollte
ich etwas Platz zwischen
dieser Form und den Rändern schaffen . Lass uns hier runter gehen. Wählen Sie diesen Untertitel aus. Richten wir es an der Mitte aus. Wählen Sie das aus. wähle ich aus. Gehe in den Stil, Mitte. Mach das Gleiche dafür. Und schließlich dieser Stil. Richten Sie die Mitte aus. Ich denke, ich mag, wo die Map ist, aber wir können ihr auch etwas Polsterung geben. Also wähle ich die Spalte selbst aus, Padding von 20. Und dann denke ich, dass ich mag, wo die Fußzeile ist, also werden wir sie nicht berühren. Lasst uns das aktualisieren. Und lasst uns die Änderungen überprüfen. Ehrfürchtig, also klicke
ich auf das Icon hier. Und wechseln wir zur mobilen Ansicht. So sollte es also auf mobilen Bildschirmen aussehen. Jetzt sieht das Menü, die Navbar super aus. Das Dropdown-Menü funktioniert einwandfrei. Und wenn wir anfangen zu scrollen, im Gegensatz zur Hero-Sektion, gefällt
mir
im Gegensatz zur Hero-Sektion, wo sich alles befindet. Also denke ich damit, dass dies das Ende des Unterrichts markiert. Ich habe es wirklich genossen, dich zu unterrichten und ich hoffe, es hat dir Spaß gemacht. Vor allem aber hoffe ich, dass du etwas gelernt hast. Ich hoffe, Sie haben eine neue Fähigkeit erworben, die
Sie jetzt in realen Projekten einsetzen können. Mein Name ist Ken Visa. Es ist immer ein Vergnügen, hier mit dir zusammen zu sein. Und wir werden das nächste Mal weitermachen.