Elementor für Anfänger:innen (2022) - Responsive e-Book Landing Page

1. Einführung: Willkommen zurück zu einer anderen großartigen Klasse mit mir. Kann Bursa. Wenn du mich zum ersten Mal entdeckst. Willkommen. Jetzt lehre ich seit 1,5 Jahren, wie man Elementor hier auf Skillshare benutzt . Ich habe Ihnen gezeigt, wie man voll funktionierende Webseiten entwirft. Wie entwirft man fantastische Weltklasse-Landingpages mit der kostenlosen Version von elementary. Und heute möchte ich Ihnen zeigen, wie Sie eine fantastische E-Book-Zielseite entwerfen , auf die Sie stolz sein können. Wenn Sie also ein E-Book haben oder einen Freund haben, der ein E-Book hat und es den Benutzern zur Verfügung stellen möchte. Vielleicht möchten Sie das E-Book verkaufen oder Sie möchten den Leuten einfach erlauben, es kostenlos herunterzuladen. Dies ist eine nette Art, es zu präsentieren, wie Sie genau hier sehen können, mein Hintergrund, das ist die Zielseite, die entwerfen wird. Ich zeige Ihnen in Kürze, wie es aussieht , damit Sie wissen, was Sie erwarten können. Wenn Sie also neu bei Elementor sind, ist dies eine großartige Gelegenheit für Sie, den Workflow zu erlernen und zu verstehen, wie Sie die verschiedenen Tools verwenden , die Elementor Ihnen bietet , um eine vollständige funktionierende Webseite. Und wenn du Elementor benutzt hast, glaube ich nicht, dass es in dieser Klasse etwas Neues für dich geben wird . Dieser Kurs richtet sich eher Menschen, die gerade erst in Elementor anfangen , und an Leute , die einfach verstehen möchten , wie man eine Webseite mit Elementor von Grund auf neu erstellt. Also möchte ich dir die Neugestaltung der Landingpage zeigen. Ich scrolle einfach von oben nach unten auf der Seite, damit du sehen kannst, was dich erwartet. Wenn du also so aufgeregt bist wie ich, lass uns loslegen und loslegen. Alles klar. 2. Astra Theme installieren: Also hier sind wir auf meinem Dashboard. Dies ist eine brandneue Installation von WordPress, und wie Sie sehen können, ist es 5.9.3. Ihre Version mag also anders sein, aber was wir tun werden, wird immer noch relevant sein. Also werde ich einfach weitermachen und diese Benachrichtigung dort loswerden . Und das erste, was wir tun wollen, ist unser Theme zu installieren. Also klicke ich weiter und klicke auf das Erscheinungsbild. Standardmäßig ist das aktive Thema 2022, da wir uns gerade im Jahr 2022 befinden. Wir haben auch 20202021, nur für den Fall, dass Sie sie mögen und Sie einen von ihnen verwenden möchten . Aber das Thema, das ich gerne in allen meinen Projekten verwende , heißt Astra. Und lasst uns fortfahren und Astra installieren. Also klicke ich weiter und klicke auf Neu hinzufügen. Und hier wird eine Liste aller verfügbaren Themen vorgestellt . Ich entscheide mich für Astra. Klicken Sie also auf Installieren. Okay, es ist jetzt installiert. Also klicke ich auf Aktivieren, um es zum aktiven Thema zu machen. Und wie Sie jetzt sehen können, ist Astra das aktive Thema. Also lasst uns diese Nachricht hier schließen. Und jetzt, in der nächsten Lektion, lasst uns elementor installieren. Wir sehen uns in Kürze. 3. Elementor installieren: Willkommen zurück. Lassen Sie uns nun das Elementar-Plugin installieren , mit dem wir die Seite im Frontend erstellen werden. Also klicke ich weiter und klicke auf Plugins, Neu hinzufügen. Und in diesem Plugins-Verzeichnis suchen wir weiter nach Elementor. Und es sollten die ersten Ergebnisse genau hier sein. Von Elementor.com hat es mehr als 5 Millionen aktive Installationen, also installiere ich es jetzt. Lasst uns weitermachen und aktivieren. Okay, also wird zu diesem Setup-Assistenten weitergeleitet. Wenn Sie nun vor einiger Zeit versucht haben, Elementor zu verwenden , bevor sie ihr Plugin aktualisiert haben, werden Sie feststellen, dass wir diesen Setup-Assistenten nicht hatten, aber jetzt tun wir es. Es ist eine einfache Möglichkeit, Ihnen beim Einrichten der grundlegenden Teile Ihrer Website zu helfen. Und das werden wir sehen, wenn wir die Schritte durchlaufen. Der erste Schritt besteht also darin, sich bei Elementor anzumelden, aber Sie benötigen kein Elementor-Konto, um das Plugin verwenden zu können. Also gehe ich weiter und überspringe das. Dann. Hier kannst du weitermachen und mit dem Hello Theme fortfahren , das Elementar erstellt hat. Sie haben ein eigenes Team, das mit einem Plug-In kompatibel ist. Da wir Astra jedoch bereits installiert haben, können wir fortfahren und auf Überspringen klicken. Astra ist eine viel mächtigere Sache. Und genau hier haben wir die Möglichkeit, der Website einen Namen zu geben. Und weil ich ihm bereits einen Namen gegeben hatte während ich WordPress installierte, gab ich ihm diesen Namen, meine eBook-Seiten-Demo. Aber du kannst es immer in einen anderen Namen ändern , den du willst. Ich behalte es. Ich behalte es als Demo auf der eBook-Seite und klicke auf Weiter. Und wenn Sie dann ein Website-Logo haben, können Sie es hier hinzufügen. Aber ich füge das Logo gerade nicht hinzu, also klicke ich weiter und klicke auf Überspringen. Dann können wir genau hier beginnen, unsere Seite mit dem Elementor-Editor aus einer leeren Leinwand zu bearbeiten . Oder wir können aus Hunderten von Vorlagen blättern von Elementor vorgefertigt wurden, oder unsere eigenen importieren. Was wir also tun wollen, ist, auf eine leere Leinwand mit Elementor Editor bearbeiten zu klicken , da wir eine Seite von Grund auf neu erstellen möchten . Und es wird geben, wir können jetzt unsere Webseite aus diesem leeren Blatt erstellen. Und so installiert man Elementor das Plugin. In der nächsten Lektion sehen wir uns an, wie Sie die Seite von Grund auf neu erstellen können. Jetzt wo wir hier sind. Wir sehen uns in Kürze. 4. Gestalten Sie die Hero: Willkommen zurück. Es ist jetzt an der Zeit, mit der Erstellung der Landingpage zu beginnen. Und der erste Teil der Seite, den wir erstellen werden , ist der Heldenbereich. Der Teil, der oben auf jeder Landingpage steht. Der Teil, der die Aufmerksamkeit des Besuchers oder des Benutzers auf sich zieht. Und weil wir direkt nach dem Ausfüllen und Beenden des Setup-Assistenten auf diese Seite weitergeleitet wurden . Ich möchte Ihnen zeigen, wie Sie die Seite innerhalb des Dashboards erstellen , da ich nicht davon ausgehen möchte, dass Sie bereits wissen, wie Sie eine WordPress-Webseite aus dem Dashboard erstellen oder generieren. Also klicke ich auf dieses Burger-Menü und klicke auf Mit Dashboard beenden. Wir werden eine neue Seite erstellen und diese nicht verwenden. Also klick das. Und indem wir darauf klicken, wurden wir zur Registerkarte Seiten im WordPress-Dashboard weitergeleitet . Was wir also tun wollen, ist auf „Neu hinzufügen“ zu klicken. Und übrigens, dies ist die Seite, die wir uns angesehen haben. Lass es mich einfach öffnen, damit du es dir ansehen kannst. Also klicke ich auf Vorschau und öffne es in einem neuen Tab. Und hier ist es, meine eBook-Seiten-Demo. Das ist der Titel der Seite, aber wie Sie sehen können, ist es ein Entwurf. Was wir also tun wollen, ist unsere eigene neue Seite zu erstellen , auf der wir unsere Zielseite erstellen werden. Also klicke ich auf „Neu hinzufügen“. Und ich nenne es Skillshare. Skillshare E-Book-Zielseite. Lassen Sie mich also einfach sicherstellen , dass das in Caps ist. Und das erste, was wir hier tun möchten, ist, in die Astro-Einstellungen zu gehen und sicherzustellen, dass das Layout in voller Breite und Schrägstrich gestreckt ist. Und für die Sidebar wollen wir die Sidebar nicht, also keine Sidebar. Mal sehen Diese fähigen Elemente. Wir möchten den Header und den Ordner deaktivieren. Und wenn ich direkt hier zu dieser Seite springen kann, ist dies der Ordner, den wir gerade deaktiviert haben. Also deaktiviere das und lass mich das darin zusammenbrechen. Ja, das ist alles. Gehen wir zurück in die WordPress-Einstellungen. Dies sind die astralen Einstellungen. Gehen wir zurück in die WordPress-Einstellungen und gehen wir in die Vorlage ein. Wir möchten Elementor in voller Breite sagen. Also klick das. Und jetzt klicken wir auf Veröffentlichen und veröffentlichen es. Jetzt. Unsere Seite ist jetzt live. Klicken wir also auf Bearbeiten mit Elementor. Okay, also hier sind wir. Wie Sie sehen können, haben wir nicht den Ordner, Astra auf der anderen Seite gelesen wurde , die nach dem Assistenten auf dieser Seite generiert wurde . Wir haben also eine saubere Weste, mit der wir arbeiten können. Das erste, was wir tun müssen, ist, einen zweispaltigen Abschnitt auszuwählen , indem Sie auf dieses Plus-Symbol klicken, einen zweispaltigen Abschnitt. Und hier haben wir es. Klicken wir auf dieses Pluszeichen, um ein Bildelement hinzuzufügen , da der Mentor seinen Namen aus Elementen zeichnet Wir ziehen einfach Elemente aus diesem Fenster hier auf die Seite und passen diese Elemente dann an. Deshalb heißt es Elementor. Jetzt, da wir dieses Bild hier hineingezogen haben, wenn ich auf das Bild klicke, solange es das aktive Element ist, werden es die Elemente sein, die wir hier anpassen können und Sie können es am Namen des Elementars erkennen bearbeitend. Wenn wir also noch einmal auf dieses Pluszeichen klicken , werden diese Elemente angezeigt. Und wir können weitermachen und Überschriftenelemente dorthin ziehen. Und jetzt können wir diese Überschriftenelemente anpassen und bevor wir etwas anderes berühren, da es das aktive Element ist, können Sie an diesem Namen die Elementbearbeitungsüberschrift erkennen. Beachten Sie, wenn wir auf das Bild klicken, ändert es sich, um das Bild zu bearbeiten. Das bedeutet, dass diese Einstellungen für das Bild bestimmt sind. Das ist nur für die Anfänger. Wenn du Elementor bereits benutzt hast, ist das nicht neu für dich. Falls wir also noch hier sind, möchten Sie wieder Zugriff auf diese Elemente haben. Du gehst einfach weiter und klickst auf dieses Symbol. Und es bringt die Elemente noch einmal auf und wir können all diese Panels so zusammenklappen, um mehr Elemente zu enthüllen, die wir verwenden können. Wir haben WooCommerce-Elemente, WordPress-Elemente. Wir haben allgemeine Elemente. Aber zu Beginn werden wir immer die Grundelemente verwenden. Dies sind die am häufigsten verwendeten Elemente auf jeder Seite. Deshalb ist es standardmäßig immer auf einer neuen Elementor-Seite geöffnet. Jetzt, da wir die Überschrift hinzugefügt haben, müssen wir auch einen Texteditor hinzufügen , der im Grunde ein Absatz ist. Und es hat etwas Platzhaltertext. Wenn wir nun auf dieses Bild klicken, müssen wir ein Bild des Buches hinzufügen. Also gehe ich hier rein in unsere Mediathek. Und wenn keine Bilder hochgeladen werden , müssen wir in einen Ordner gehen, müssen wir in einen Ordner gehen, den ich mit allen Assets vorbereitet habe und Sie finden den Assets-Ordner in der Beschreibung unten Dieses Video kann weitergehen und es herunterladen und alle diese Assets nutzen, die kostenlos zur Verfügung gestellt werden. Klicken wir also auf Dateien hochladen. Und wenn ich auf „Dateien auswählen“ klicke wird in diesen Assets-Ordner umgeleitet. Vermögenswerte. Im Assets-Ordner können wir das E-Book-Cover auswählen. Also doppelklicke ich darauf. Und hier ist es. Jetzt, da es ausgewählt ist, klicke ich auf Einfügen und wir haben ein Buch. Lass mich das ein bisschen ziehen. Und was wir als nächstes tun wollen , ist den farbenfrohen Hintergrund mit Farbverlauf hinzuzufügen , Sie in der Intro-Demo gesehen haben. Und wie das geht, ist zunächst der Abschnitt, der gesamte Bereich, der das Buch enthält und der diese beiden Spalten enthält, ist der Abschnitt. Und um Änderungen am Abschnitt vorzunehmen, klicken wir hier auf diesen Teil. Und jetzt liest es den Abschnitt „Bearbeiten“, um Änderungen an einer der Spalten hier Wir klicken hier auf diesen Teil, Änderungen an jeder Spalte. Wenn wir auf diesen anderen Teil klicken, bleibt er immer noch leer , da wir diese Spalte jetzt bearbeiten. Um den Abschnitt zu bearbeiten, klicken wir darauf. Und ich sage „Style“. Hintergrund. Auf Normalität. Wir müssen die Farbe haben, sagen wir mal Farbverlauf. Klicken wir also auf den Verlauf. Und standardmäßig diese rosafarbene Farbe. Also möchte ich eine zweite Farbe hinzufügen, die 1524 ist. Und da haben wir es, einen schönen, schönen bunten Farbverläufen Hintergrund. Sie können natürlich weitermachen und es zu jeder gewünschten Farbe machen. Sie können diese Farbe einfach herumziehen. Aber ich will es einfach um 24 verlassen. Und Sie können diese zweite Farbe in die gewünschte Farbe ändern . Ich kann das herumschleppen. Sie können dies auch ziehen , um es in den blauen Bereich zu bringen und es dann zu ziehen. Aber ich möchte es im Original Pink lassen , weil ich denke, dass es mit der Orange gut aussieht. Klicken Sie auf eine beliebige Stelle in diesem Abschnitt, um das loszuwerden. Das nächste, was wir tun wollen, ist diese Überschrift zu bearbeiten , weil sie gerade nicht gut aussieht. Also lasst uns fortfahren und es wird bemerkt, dass es geändert wurde, um die Überschrift zu bearbeiten. Während es also noch aktiv ist, möchte ich es in eine ändern da es die Hauptüberschrift dieser Landingpage ist. Jede einzelne Webseite muss ein H1 haben, was die Aussage ist, die die Aufmerksamkeit der Menschen auf sich ziehen sollte. Und wir sollten Suchmaschinen mitteilen , dass es auf dieser Seite darum geht. Worum geht es also? Also lasst uns etwas Gezeiten geben. Ändere dein Leben heute. Und obwohl es noch ausgewählt ist, gehen wir in den Stil. Geben wir ihm eine weiße Farbe. Ändern wir die Schriftart, indem wir auf Typografie-Familie klicken. Dropdown-Menü erscheint. Und lassen Sie uns das in Montserrat oder eine beliebige Schriftart ändern. Montserrat, ich möchte ihm ein Schriftgewicht von 900 geben , nur um es sehr fett zu machen. Und dann werde ich seine Größe bis zu diesem Zeitpunkt erhöhen. Und jetzt werden Sie feststellen, dass es im Vergleich zu diesem Bild nicht ausgeglichen ist. Also müssen wir diese Elemente in dieser Spalte nach unten schieben. Wählen wir diese Spalte selbst aus. Jetzt wurde es geändert, um die Spalte zu bearbeiten. Ich gehe zu Advanced. Und lassen Sie uns eine Top-Marge von 50 oder vielleicht 70 geben. Okay, so sieht es also aus. Lasst uns das aktualisieren. Gehen wir fort und wählen den Absatz oder den Texteditor aus. Und jetzt, sobald wir ausgewählt haben, werden Sie feststellen, dass es in Texteditor geändert wurde. Zunächst möchten wir die Farbe auf Weiß ändern. Als nächstes müssen wir es natürlich ändern, um die Typografie oder Schriftfamilie in Montserrat zu ändern . Geben Sie ein. Natürlich müssen Sie ändern, was diese Aussage sagt. Sie müssen also in den Inhalt gehen, dies hervorheben und anfangen, alles einzugeben, was Sie wollen, egal welche Beschreibung Sie dort hinzufügen möchten. Also. Denkweise, Lorem Ipsum. Lasst uns das aktualisieren. Und bevor wir loslegen, klicken wir auf dieses Vorschau-Änderungssymbol hier, um eine Vorschau der Änderungen anzuzeigen. Es wird in einem neuen Tab geöffnet. Und so läuft unsere Hero-Sektion. Und wir müssen eine Schaltfläche hinzufügen, damit die Leute das Buch herunterladen können. Also lasst uns wieder hier rein gehen. Und solange wir noch hier sind, können wir darauf klicken, um die Elemente freizulegen. Und unter dem Basis-Panel haben wir das Button-Element. Ziehen wir es dort hin, wenn die blaue Linie hier erscheint, um anzuzeigen , dass wir bereit sind abzulegen. Und natürlich, sobald wir es gelöscht haben, ändern sich diese Schaltfläche zum Bearbeiten, oder Sie können es einfach auswählen, um sicherzustellen, dass es sich um Editor-Button handelt. Und lasst uns in den Textbereich gehen und ihn ändern um ein E-Book herunterzuladen. Jetzt sollte es niedrig sein, oder? Und wenn Sie der Schaltfläche ein Symbol hinzufügen möchten, können Sie natürlich immer auf Icon-Bibliothek klicken. Und lasst uns nach Download suchen. Downloaden. Sagen wir mal, sagen wir, dass es jetzt dieses Symbol genau dort hat. Gehe in den Stil. Wir können seine Polsterung erhöhen. Padding ist der Abstand zwischen dem inneren Inhalt und den Rändern des Elements. Also lasst uns diese Verbindung aufbrechen. Und dann für die Linke, geben wir ihm eine 50. Polsterung Das Recht. Eine 50. Jetzt haben wir hier einen größeren Abstand. Und für oben und unten, geben wir ihm ein 202020. Das macht den Knopf viel größer. Das nächste, was wir tun wollen, ist, einen Boxschatten für die Schaltfläche hinzuzufügen , der ihr etwas Schatten geben sollte , um ihm einen 3D-Effekt zu verleihen. Sobald wir das angeklickt haben, schauen Sie sich den Button an, jetzt hat er eine Art Schatten dahinter. Und wir können die Unschärfe des Schattens bearbeiten . Ich glaube, es hat mir gefallen , wie es gerade aussieht. Und jetzt gehen wir rein. Woran wir gearbeitet haben war die normale Schleife des Knopfes. Gehen wir nun hinein und ändern einige dieser Eigenschaften. Beim Schweben. Im Moment ändert es sich nicht, aber wenn wir sagen, möchten wir die Hover-Farbe des Textes in Schwarz ändern. Wenn wir jetzt schweben, wird es schwarz, aber wir möchten auch, dass sich die Hintergrundfarbe ändert. Nehmen wir an, wir wollen es so in Weiß ändern. Und während wir noch den Mauszeiger über Animationen bewegen, haben wir eine Vielzahl von Animationen , aus denen wir wählen können. Ich möchte mich nur für Grow entscheiden. Und genau das macht es. Geh weiter und experimentiere mit dem Rest. Klicken Sie nun auf Aktualisieren. Als Nächstes möchten wir hier eine kurze Aussage hinzufügen und den Benutzer über die Formate informieren , in denen das Buch verfügbar ist. So können wir fortfahren und bitte auf Elemente klicken, Icon und einen brandneuen Text in diesen Bereich ziehen. Oder lass mich das einfach löschen. Wir können diesen Text einfach hier duplizieren. Sie können also einfach mit der rechten Maustaste klicken, mit der rechten Maustaste darauf klicken und duplizieren. Dann können wir das direkt unten platzieren. Gehen wir weiter und gehen in die Stil-Typografie. Und lassen Sie uns diesen Text ein bisschen kleiner machen. für den Textstil, sagen wir Italienisch. Dann lasst es uns hervorheben. Dieses Buch ist in PDF- und Kindle-Formaten erhältlich. Lasst uns das aktualisieren. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Okay, und das ist unsere Helden-Sektion. Und bevor wir diese Lektion abschließen, möchte ich nur unten und oben in diesem Abschnitt etwas Polsterung hinzufügen unten und oben , um den Abstand zwischen dem Inhalt und dem oberen und unteren Rand zu vergrößern . Gehen wir also hier rein und wählen Sie die Abschnittseinstellungen aus. Diese Änderungen an Abschnitt. Lass uns fortgeschritten hineingehen. Lasst uns diese Verbindung aufbrechen. Denn wenn wir es nicht tun, was auch immer, lass mich das einfach miteinander verknüpfen. Was auch immer wir an einer dieser Zellen vornehmen , wird sich auf jede andere Zelle auswirken. Aber wenn wir das brechen, können wir einzelne Zellen ändern. Also wollen wir oben und unten ändern . Geben wir ihm eine 50. Sie werden also feststellen, dass wir hier einen größeren Abstand haben. Und wenn wir auch die Oberseite auf 50 ändern, haben wir oben einen schönen Abstand. Also lasst uns weitermachen und das aktualisieren. Natürlich können Sie so viel Polsterung hinzufügen, wie Sie möchten, müssen nicht unbedingt 50 sein. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Und jetzt denke ich, dass es viel vorzeigbarer aussieht. Das ist also unsere Helden-Sektion. Ich glaube, es gefällt mir bisher. Sie können kreativer werden und sehen, mit welchen anderen Eigenschaften Sie spielen können, um es viel schöner zu machen. Natürlich sind diese Farben die, die ich gewählt habe. Es steht Ihnen frei, Ihre eigenen Farben zu wählen. Und das bringt uns zum Ende dieser Lektion. In der nächsten Lektion sehen wir uns an, wie Sie den Abschnitt „Partner“ erstellen. Wir sehen uns in Kürze. 5. Erstelle den Abschnitt „Partner“: Hi da, Willkommen zurück. In diesem Abschnitt möchte ich Ihnen zeigen, wie Sie den Logo-Bereich des Partners mit dem Bildkarussellelement erstellen Logo-Bereich des Partners . Ohne Zeit zu verschwenden, lassen Sie uns in unseren Redakteur springen. Hier sind wir. Um also einen neuen Abschnitt hinzuzufügen, klicken wir auf das Symbol „Neuen Abschnitt hinzufügen“. Und wir haben verschiedene Optionen für die Art des Abschnitts, den wir wollen. Wir wollen einen Abschnitt mit voller Breite. Also mach weiter und klicke darauf. Mit anderen Worten, es hat nur eine Spalte. Das erste, was wir tun wollen, ist natürlich, diesen Abschnitt vom Heldenbereich zu trennen. Wählen Sie also den Abschnitt selbst aus, um sicherzustellen, dass der Abschnitt „Bearbeiten“ lautet. Lass uns fortgeschritten hineingehen. Und lasst uns diesen Link am Rande brechen. Und geben wir ihm einen Rand von 50 Pixeln. Im Moment gibt es einen Abstand zwischen den beiden Abschnitten von 50 Pixeln. Als Nächstes möchten wir auf das Pluszeichen klicken , um einige Elemente innerhalb der Spalte hinzuzufügen. Und was wir tun wollen, ist eine Überschrift dorthin zu ziehen. Nennen wir das unsere Partner. Und wir wollen es ins Zentrum bringen. Während wir also noch unter Inhalt sind, gehen wir zu Alignment und schieben es so in die Mitte. Und das ist jetzt ein H2, anderen Worten, eine Überschrift zwei. Und nur für den Fall, dass Sie sich fragen, was wir mit H1, H2, H3, H4 meinen H1, H2, H3, H4 unsere HTML-Überschriften bis hin zu H6, und sie alle dienen einem anderen Zweck. Weil Sie also bereits ein H1 auf dieser Seite haben und wir nur ein H1 auf jeder Webseite haben sollten. Wir können so viele H2-Elemente haben, wie wir wollen. Die Überschriften geben der Webseite eine Hierarchie. Und das ist gut für SEO oder Suchmaschinenoptimierung, aber ich möchte nicht tief darauf eingehen. Also, nun, Partner ist immer noch ausgewählt. Lass uns in den Stil gehen. Und lassen Sie uns natürlich die Textfarbe ändern. Und ich möchte ihm ein dunkeles Grau geben, das fast schwarz ist. Nicht reines Schwarz, aber fast schwarz. Also Triple 40 sollte ihm die nicht so satte schwarze Farbe geben, sondern gräulich. Und dann klicken wir natürlich irgendwo drin , um das loszuwerden. Und klicken wir auf Topographie , um die Schriftfamilie in Montserrat oder eine beliebige Schriftart zu ändern . Da drin haben wir es. Als Nächstes möchte ich ihm ein Gewicht von 800 geben. Und ich denke, ich mag diese Größe, also möchte ich das ändern. Das nächste, was ich tun möchte, ist auf dieses Symbol zu klicken , um die Elemente erneut anzuzeigen. Und hier drin möchte ich nach Karussell suchen, und wir haben hier Bildkarussell. Im Grunde ist dies ein Schieberegler für Bilder. Ich ziehe es und lasse es fallen , sobald der blaue Indikator erscheint. Und jetzt wirst du bemerken , dass du es momentan fallen lässt. Die Einstellungen des Bildkarussells hier oben. Und wir können hier auf dieses Pluszeichen klicken, um die verschiedenen Logos hinzuzufügen , die wir auf dem Schieberegler haben möchten. Da sie sie nicht hochgeladen haben, gehe ich hinein, lade Dateien hoch, wähle Dateien aus, und in dem Assets-Ordner, von dem ich Ihnen gerade erzählt habe, finden Sie diese Partner Fold, Partner Logos, Ordner. Sie können fortfahren und alle auswählen und öffnen. Okay, also sind sie alle hochgeladen. Lassen Sie uns eine neue Galerie erstellen. Und da haben wir es. Fügen Sie die Galerie ein. Und jetzt zeigt unser Karussell die Logos an. Aber es gibt zwei Abstände da derzeit nur drei Logos gleichzeitig angezeigt werden sollen. Wenn wir also in Folien gehen, um sie zu zeigen, möchten wir nicht, dass die Standardanzahl der Folien angezeigt wird, sagen wir fünf, weil wir sechs davon haben. Das scrollt also, um das sechste und kontinuierliche Scrollen unendlich zu zeigen . Lasst uns das aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Okay, also da haben wir es. Ich würde also davon ausgehen, dass Sie, wenn Sie ein Buch verkaufen , möglicherweise Partner haben, Verlage oder die Unternehmen sind, mit denen Sie in diesem bestimmten Projekt zusammenarbeiten. Vielleicht möchten Sie ihre Logos direkt unter dem Heldenbereich anzeigen . Deshalb haben wir diesen Abschnitt. Und so erstellt man den Abschnitt „Partner“. In der nächsten Lektion erfahren Sie, wie Sie einen Call-to-Action-Abschnitt erstellen, der eine Beschreibung enthält was Personen in Ihrem E-Book erwarten sollten. Also lasst uns in Kürze sehen, wie das geht. 6. Themen und CTA: Willkommen zurück. Bisher konnten wir unseren Heldenbereich und unsere Partnerabteilung erstellen. Und natürlich merkt man bis zu diesem Zeitpunkt, dass wir es geflügelt haben. Wir haben es nur für den Stil gemacht. Aber ich dachte, wir müssen dies strukturiert tun, so dass Sie wissen, was Sie erwarten können. Also habe ich die Seite hochgezogen, die ich im Voraus erstellt hatte , bevor ich mit der Aufnahme dieses Kurses begann. Nur damit es uns helfen kann , was zu erwarten ist, damit Sie wissen was wir im Begriff sind , ein Widget zu erstellen. Wir erstellen nicht nur den nächsten Abschnitt, ohne dass Sie wissen, wie er aussehen wird. Also habe ich diese Seite hochgezogen, damit wir scrollen und uns den Abschnitt ansehen können scrollen und uns den Abschnitt ansehen können , den wir gerade erstellen werden. Und dann machen wir weiter und schaffen es. Dies ist der Abschnitt, den wir erstellen. Dies sind im Grunde die Themen , die Menschen in dem Buch finden werden. Und denken Sie natürlich daran, dass dies eine Landingpage ist. Es muss überzeugend sein. Es muss Menschen bekehren. Das ist die Rolle einer Landing Page. Es muss Benutzer oder Besucher in Käufer umwandeln. Und um dies zu tun, müssen Sie den Menschen so viele Informationen wie möglich geben , die sie benötigen. Eine Möglichkeit, Informationen über Ihr Buch zu geben, besteht darin Leuten über die verschiedenen Themen zu berichten, die Sie in dem Buch behandeln. Deshalb ist dieser Abschnitt wichtig. Gehen Sie in unseren E-Book-Editor. Wir müssen einen neuen Abschnitt hinzufügen. Und wie Sie hier sehen können, ist dies ein Abschnitt mit drei Spalten. Aber es hat auch diesen Abschnitt hier, der eine einzelne Spalte ist. Wie integrieren wir das auf unsere Seite? Also lasst uns weitermachen und sagen, neuen Abschnitt hinzufügen. Und wir müssen einen Abschnitt mit voller Breite hinzufügen , der eine einzelne Spalte hat. Und wir können genau hier auf dieses Symbol klicken und einen neuen Header genau hier ziehen, wie wir es zuvor getan haben. Oder wir können das einfach duplizieren und das Duplikat hier hineinziehen. Aber bevor wir das tun, möchte ich ein sehr praktisches Tool aufbringen , das ich vergessen habe, Ihnen zu zeigen, wie Sie es ansprechen können, das unsere Arbeit beschleunigt. Also gehe ich in dieses Burger-Menü, Benutzereinstellungen, Bearbeitungsgriffe, klicke auf Ja. Und wenn Sie jetzt mit der Maus über diese Spalten fahren, werden Sie feststellen, dass wir zusätzliche Einstellungen haben , uns helfen , nicht rechten Maustaste zu klicken, um Maßnahmen zu ergreifen. Anstatt mit der rechten Maustaste zu klicken, mit der rechten Maustaste auf die Basis zum Duplizieren , können Sie einfach den Mauszeiger darüber bewegen und dort klicken. Und jetzt haben wir das dupliziert. Jetzt können wir das da hineinziehen. Und wir haben eine Überschrift. Jetzt müssen wir diese beiden Abschnitte trennen. Lassen Sie mich also zuerst darauf klicken, gehen Sie hinein, brechen diesen Link auf und geben Sie ihm dann oben einen Rand. Jetzt haben wir diesen Abstand dort. Okay, also wählen Sie diese Überschrift wählen Sie diese Überschrift aus, ändern wir sie in dieses Buchcover. Gib mir diese drei Punkte. Natürlich können Sie hier schreiben, was Sie wollen. Und natürlich lassen wir es als H2 liegen, weil es ein H2 ist. Und dann lasst uns weitermachen und auf dieses Element-Symbol klicken und dann einen Satz genau dorthin ziehen. Und obwohl es noch ausgewählt ist, gehen wir in den Stil und richten wir ihn in der Mitte aus. Dies kann nun eine kurze Beschreibung einer kurzen Beschreibung dieses Abschnitts sein. Der Abschnitt enthält also im Buch behandelt und so etwas. Lassen Sie mich einfach einige dieser Texte entfernen. Also mach weiter und tippe da drin, was du willst. Beachten Sie nun, dass es zu viel Platz zwischen den beiden gibt und wir brauchen sie, um näher zusammen zu sein. Während dies noch ausgewählt ist, kann es nach oben gehen, die Randverbindung dort brechen, dann reduzieren wir den oberen Rand und ziehen sie so zusammen. Und dann direkt unter ihnen, lasst uns das aktualisieren. Zuerst. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Stimmt's? Ich denke, es sieht cool aus. Aber wenn wir zu unserer Probe zurückkehren, ist dies größer und orange gefärbt. Also lasst uns. Dass wir die Freiheit haben , es so gut anzupassen, wie wir möchten. Während es noch ausgewählt ist, gehe ich in die Stil-Typografie ein. Lassen Sie uns ein Gewicht von 600 geben. Und lassen Sie uns die Größe erhöhen, indem wir dies ziehen . Vielleicht bis zu 45. Dann lasst uns in Texte gehen, Farbe 1524. Das ist die Farbe, die ich gewählt habe. Und dann direkt unter der Überschrift und Beschreibung haben wir diese drei Spalten. Bringen wir also die drei Spalten ein. Klicken Sie genau dort auf das Elementsymbol. Wir müssen an einer Kreuzung ziehen. Also ziehe ich es und lasse es fallen , sobald die blaue Linie erscheint. Und jetzt haben wir standardmäßig zwei Spalten. Was wir also tun müssen, ist direkt dort auf Plus zu klicken. Und dann brauchen wir das Typensymbol. Und was wir brauchen, ist eine Iconbox. Lass es uns ziehen und ablegen, um zu sehen, wie es aussieht. Sie werden also feststellen, dass es sich um eine Box handelt, die ein Symbol, eine Überschrift und eine Beschreibung enthält . Jetzt passen wir es so an, dass es so aussieht. zuerst Lassen Sie uns zuerst das Zeitmanagement kopieren. Und lass uns zum Titel und zur Beschreibung gehen. Lassen Sie uns das Zeitmanagement dort einfügen und dann ist das die kurze Beschreibung dieses bestimmten Themas. Und lasst uns das Icon ändern. Hier drin. Ich gebe die Uhr ein, um das Zeitmanagement anzuzeigen, worum es in diesem Abschnitt geht, worum es in diesem winzigen Abschnitt geht. Dann ändern wir natürlich die Stile dieses Symbolfeldes. Während es noch ausgewählt ist, gehen wir in den Stil. Wenn ich schaue, wenn ich das Symbol zusammenfalle, werden Sie feststellen, dass wir zwei Panels haben, ein Symbol im Inhalt. Für die Grundfarbe des Symbols möchten wir, dass es diese Farbe ist. Acht vierundzwanzig. Sie können die Farbe beim Schweben ändern, vielleicht sagen wir dreifach 40. Also beim Schweben ändert es sich in diese Farbe. Und dann lasst uns das Symbol einklappen. Und lasst uns in den Inhalt eingehen. Natürlich haben wir die verschiedenen Texte oder Typografie-Optionen, die wir bereits zuvor gesehen haben. Wir können die Farbe auf das Dreifache 40 ändern. Und dann können wir in die Topographie gehen und die Schriftfamilie in Montserrat umstellen. Und natürlich können wir den Schriftweg auf 800 erhöhen. Und das war's. Was wir also als Nächstes tun müssen, ist, anstatt dasselbe genau hier zu wiederholen, lasst uns das duplizieren, indem wir den Mauszeiger über diese Spalte bewegen und dann darauf klicken, um sie zu duplizieren. Dupliziere es noch einmal und lösche es uns dann. Jetzt haben wir drei Spalten. Und dann duplizieren wir diese Kreuzung indem wir auf dieses doppelte Kreuzungssymbol klicken. Und da haben wir es. Lasst uns das also aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Richtig, genial. Jetzt müssen wir nur diese Titel kopieren. Ich klicke das hier an. Füge das da rein. Geh wieder hier rein. Kopiere diesen Leadership Winning Lifestyle Also lasst uns das anklicken. Und nun stellen wir sicher, dass die Symbole für die Themen relevant sind , die sie darstellen. So effektive Kommunikation, vielleicht können wir nach Mikrofon suchen. Das füge ich für die Führung ein. Dann gehen wir für den gewinnenden Lebensstil weiter und wählen Sie Geld aus. Füge das ein. Aktualisieren Sie dort. Lassen Sie uns die Änderungen überprüfen. Scrollen Sie jetzt nach unten. Da haben wir es, dieses Buch umfaßt, und dann haben wir, was es abdeckt. Beachten Sie jedoch, dass wir direkt hinter diesem Abschnitt einen gräulichen Hintergrund haben. Lassen Sie uns diese Lektion abschließen indem wir uns ansehen, wie das geht. Natürlich befindet sich diese Farbe direkt hinter dem ganzen Abschnitt. Und wir haben diesen Button auch genau hier. Also wähle ich den gesamten Abschnitt, den einzelnen Spaltenabschnitt aus , der diese Überschrift enthält, die Beschreibung und die Kreuzungen. Wählen Sie das also aus. Gehen wir zu Stil, Hintergrund, Farbe. Ziehen wir das auf den Punkt. Ich glaube, ich mag diese Farbe. Beachten Sie jetzt, dass wir oben und unten keine Polsterung haben . Also lasst uns weitermachen und klicken Sie auf Erweitert. Brechen Sie den Link genau dort und dann die obere Polsterung 50 und die untere Polsterung 50. Jetzt haben wir diesen Abstand. Um diesen Button hinzuzufügen, haben Sie gerade auf unserem Referenzbild gesehen. Lassen Sie uns das duplizieren und ziehen wir es. Lass es uns da fallen lassen. Jetzt wirst du bemerken, dass es auf der linken Seite ist. Während wir noch unter Inhalt sind, richten wir es an der Mitte aus. Und lassen Sie uns oben auf der Schaltfläche etwas Rand hinzufügen. Während die Schaltfläche noch ausgewählt ist, Schaltfläche „Bearbeiten“, „Erweitert“, „ Rand“, „top“. Lass uns eine 50er geben. Aktualisiere das. Und jetzt werden Sie feststellen , dass dieser Schlagschatten oder dieser Boxschatten auf dem weißen Hintergrund zu dunkel ist. Genau hier. Es sieht gut aus wegen des bunten Hintergrunds, aber weil er auf weißem Hintergrund hasst, muss man die Dunkelheit reduzieren. Während es noch ausgewählt ist, gehen wir in den Stil. Box-Schatten. Klicken wir hier auf dieses Farbsymbol. Und reduzieren wir den Reichtum oder die Deckkraft des Boxschattens. Und dann aktualisiere das. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Und da haben wir es. Bisher gefällt mir, was wir haben. Als Nächstes. Schauen wir uns an, wie Sie diesen Videobereich hinzufügen können. Wo wenn jemand klickt um eine kurze Geschichte über das E-Book anzusehen, ist es vielleicht eine Geschichte über den Autor oder den Fahrer. Wenn Sie auf „Lay“ klicken, gibt es dieses Overlay und es ein Video angezeigt, das Sie ohne Ablenkungen ansehen können. Schauen wir uns also in der nächsten Lektion an , wie das geht. Wir sehen uns in Kürze. 7. Video-Bereich: Willkommen zurück. Bisher haben wir unseren Heldenbereich, unseren Partnerbereich und den Themenbereich erstellt , der einen Aufruf zum Handeln enthält. Als Nächstes möchten wir sehen, wie Sie diese kurze Geschichte über den E-Book-Bereich, also ein Video , erstellen diese kurze Geschichte über den E-Book-Bereich, also können. Wenn wir also in unseren Redakteur , müssen wir als Nächstes einen neuen Abschnitt hinzufügen. Und dieser Abschnitt muss wieder ein Abschnitt mit voller Breite sein. Und natürlich müssen wir einen Abstand zwischen ihm und dem vorherigen Abschnitt hinzufügen . Wenn Sie also auf den Abschnitt selbst klicken , stimmen Sie überein, brechen Sie diesen Link auf. 5050 Pixel Rand an der Spitze. Und Sie können feststellen, weil es hier Pixel sind, können Sie dies in den EMS-Prozentsatz des Arbeitsspeichers ändern. Lasst uns das aktualisieren. Und dann klicken wir hier auf das Pluszeichen, um das Video aufzurufen. Und bevor wir das Videoelement hinzufügen, müssen wir diese Überschrift natürlich hier hinzufügen. Also lass mich das einfach kopieren. Geh hier rein. Und wir können einfach weitermachen und das duplizieren. Unsere Partner duplizieren das. Und dann ziehen wir es. Lass mich auf den Grund gehen. Scrollen Sie mit dem Mausrad, während Sie das noch halten. Und lassen Sie es uns da rein lassen. Und während es noch ausgewählt ist, lass uns hier reingehen und mich das dort einfügen. Natürlich schmeckst du nichts, weil du diese Referenzseite nicht hast. Okay, jetzt, da wir das dort haben, klicken wir erneut auf das Element-Symbol. Und ziehen wir ein Videoelement da rein. Lassen Sie es uns sofort dort fallen, wir machen das. Beachten Sie, dass wir die Videoeinstellungen bearbeiten haben. Nun, hier legen Sie den Link zu Ihrem Video auf YouTube. Sie benötigen also einen YouTube-Kanal, laden Sie dann Ihr Video auf Ihren Kanal hoch und greifen Sie dann den Link, den YouTube Ihnen zur Verfügung stellt, und legen Sie es hier ab. Natürlich haben Sie verschiedene Orte, von denen Sie das Video abrufen können. Muss nicht unbedingt YouTube sein, aber ich bevorzuge YouTube, weil es die beliebteste Videowebsite der Welt ist. Das nächste, was wir tun müssen, ist natürlich dieses Overlay aufzutragen. Wenn jemand auf Play klickt, möchten wir, dass er dieses dunkle Overlay hat. Also schauen sie sich nur das Video an, sonst lenkt sie nichts ab. Also lasst uns wieder hier rein gehen. Und bevor wir das tun, schauen wir uns einige der Einstellungen an , die wir hier haben, damit Sie es beim Laden der Seite auf Autoplay einstellen können. Es fängt einfach automatisch an zu spielen, aber das wollen wir nicht. Also lass mich einfach damit aufhören. Wir können es stumm schalten, so dass die Seite jederzeit stumm geschaltet ist, obwohl sie läuft. Dann können wir es auch so schleifen , dass es jedes Mal, wenn es das Ende erreicht , automatisch ohne Benutzereingabe startet. Und wir haben all diese anderen verschiedenen Einstellungen. Du kannst weitermachen und mit ihnen herumspielen zu sehen, welches du magst. Wenn wir dann dieses Video ausblenden und in die Bild-Overlay gehen, können wir die Bild-Overlay aktivieren und das bedeutet, dass ich das schließen lasse. Jetzt, wenn dies deaktiviert ist, wird die Miniaturansicht angezeigt , die Sie auf YouTube haben. Dieses Video ist auf YouTube. Und wie auch immer es auf YouTube aussieht , ist genau so, wie es hier erscheinen wird. Aber wenn wir hierher kommen und „Bild-Overlay aktivieren“ sagen, können wir ein Bild als Miniaturbild für unser Video auswählen. Weil sie dieses Bild hier nicht haben , lade ich es hoch. Ich hatte es erstellt und du findest es in dem Assets-Ordner, den ich bereitgestellt habe. Lasst uns also in Vermögenswerte eingehen. E-Book, Video-Overlay-Bild. Darauf doppelklicke ich also. Und ich lege Medien ein. Und jetzt haben wir dieses schöne und saubere Bild, das präsentiert wird und mit dem Branding Ihrer Seite übereinstimmt . Und um diesen Effekt dieses dunklen Overlays hier zu erzielen, wird dies als Lightbox-Effekt bezeichnet. Also lass uns hier rein gehen und dann lass uns das Leuchtkästchen ankreuzen. Lasst uns das also aktualisieren. Und lassen Sie uns eine Vorschau der Änderungen anzeigen. Okay, also lasst uns nach unten scrollen. Und hier ist unser Videobereich. Wenn wir also zum Spielen klicken, haben wir diesen Lightbox-Effekt. Und so erstellt man diesen Videobereich. In der nächsten Lektion sehen wir uns an, wie Sie diesen Zähler hier erstellen , der einige Statistiken über das E-Book zeigt, wie die Anzahl der Download-Mitglieder, wie viele Fünf-Sterne-Bewertungen es hat, und wie viele kostenlose Videos, die mit dem Kauf des E-Books verbunden sind. Wir sehen uns also in Kürze. 8. Statistiken Zählerbereich: Willkommen zurück. Als Nächstes möchten wir sehen, wie Sie diesen Zählerabschnitt erstellen , der einige Statistiken über Ihr E-Book enthält. Gehen wir also in unseren Redakteur. Und natürlich müssen wir, wie Sie bereits vermutet haben, als Nächstes einen Abschnitt hinzufügen und es muss sich um einen Abschnitt mit voller Breite handeln. Also lasst uns weitermachen und darauf klicken. Und natürlich müssen wir einen Abstand zwischen den beiden Abschnitten schaffen . Während dies noch ausgewählt ist, gehe ich weiter hinein. Entferne diesen Link und dann 50 oben. Und jetzt haben wir diesen schönen Platz. Wie Sie hier bemerken, haben wir diese Farbverlaufsfarbe, die wir hier oben hatten. Das ist also sehr einfach. Elementor bietet uns die Möglichkeit, Effekte von einem Abschnitt in einen anderen Abschnitt oder eine Spalte in eine andere Spalte zu kopieren Effekte von einem Abschnitt in einen anderen Abschnitt . Wenn ich also mit der rechten Maustaste auf diesen Abschnitt klicke, kopiere, kann ich hier runter gehen. Weil dies auch ein Abschnitt ist. Ich kann mit der rechten Maustaste klicken und dann Stil einfügen. Und es wird die Polsterung einfügen, die wir oben und unten setzen, und die Hintergrundfarbe. Oder wir hätten das manuell machen können, was länger in Anspruch genommen hätte. Jetzt, da wir das haben, lasst uns eine Kreuzung hinzufügen. Diese Kreuzung muss einen Zähler haben. Im Grunde ist das ein Zähler. Dies hier ist ein Zähler multipliziert mit vier. Klicken Sie also hier auf das Pluszeichen , um die Elemente aufzurufen. Und dann hier drin Lasst uns den Zähler nehmen. Und hier ist es. Ziehen wir es da rein. Ziehen wir es da rein. Und jetzt, wie Sie sehen können, wird es bis zu einhunderteinhundert gezählt. Hier sind die Endzahlen. Dies ist also die Nummer , bei der es aufhören soll. Nehmen wir an, es wurde 17 Tausend Mal heruntergeladen. Also haben wir die 17 da und es wird von 0 bis 17 beginnen. Dann kommt die Anzahl der Suffix natürlich nach der Nummer. Also 17 Tausend, anstatt 17 Tausend zu tippen, denn das würde zu lange dauern. Lass uns einfach 17 tippen, kay? Sie können von überall aus anfangen. Wir können auch bei zehn beginnen. Das nächste, was wir tun müssen, ist diesen Text hier zu bearbeiten. Downloads. Und natürlich ändern wir die Farbe in Weiß. Also in den Stil gehen, weiß, das ist die Zahl für den Titel. Es ändert es auch in Weiß. Lasst uns die Typografie ändern. Montserrat. Also klicke ich auf die Font-Familie. Ich habe gerade Monster gewickelt geliebt. Lasst uns das aktualisieren. Und jetzt, da wir damit zufrieden sind, wie es aussieht, müssen wir es nur noch dreimal duplizieren. also darüber schwebe, klicke ich das ein-, zweimal und dreimal. Dann lasst uns das loswerden. Aber wenn Sie mehr hinzufügen möchten, es natürlich gerne tun. Also klicke ich in diese zweite. Und dann ändere ich das in was haben wir glücklichere Mitglieder? Sternebewertungen, Freebie. Also Mitglieder unserer Website oder eines Buchclubs, Nehmen wir an, sie sind drei K-Mitglieder. Dann lass uns hier reingehen und Fünf-Sterne-Bewertungen sagen. Wir haben ungefähr 13 Tausend Fünf-Sterne-Bewertungen. Und sagen wir sagen aktive Leser. Sagen wir Jove schwule Leser oder so etwas. Aktualisieren wir das und lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen wir also nach unten und sehen, was wir haben. Da sind wir los. Sie werden also feststellen, dass wir einen Abstand zwischen diesem Abschnitt und diesem Abschnitt benötigen. Gehen wir also zurück und wählen unsere Rubrik aus. Ich sage diese enorme Marge, oben. Lass es uns bei 50 behalten. Fakt, geben wir ihm eine 100. Lasst uns das aktualisieren. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen Sie nach unten. Alles klar. Okay, das nächste, was wir tun werden, ist an einer kurzen Geschichte über den Autor zu arbeiten. Wie Sie auf unserer Referenzseite sehen können, haben wir hier ein Bild des Autors und eine kurze Geschichte oder Beschreibung sowie die Unterschrift des Autors mit einigen Social-Media-Handles. Lassen Sie uns also in unserer nächsten Lektion sehen, wie Sie diesen Abschnitt erstellen können. Wir sehen uns in Kürze. 9. Über den Bereich Autor: Bisher haben wir all diese Abschnitte bis zum Statistikbereich erstellt . Das nächste, was wir tun wollen, ist die Biografie des Autors zu erstellen. also wieder in unseren Editor gehen, , wie Sie es bereits erraten haben, müssen wir, wie Sie es bereits erraten haben, einen Abschnitt hinzufügen, aber dieses Mal fügen wir einen zweispaltigen Abschnitt hinzu , da wir in dieser Spalte das Bild und dies halten enthält den Textinhalt und die Symbole. Natürlich fügen wir zuerst einen Rand oben hinzu, wählen Sie den Abschnitt aus, gehen Sie in Erweitert brechen Sie den Link dort auf. 50, oberer Rand. Und dann klicken wir hier auf dieses Pluszeichen , um ein Bildelement hinzuzufügen. Lassen Sie es dort rein und klicken Sie darauf. Wir haben das Autorenbild nicht hier. Also liebe ich es, aus unserem Assets-Ordner geladen zu werden. Also Buch, Autorenbild. Also lasst uns das öffnen. Und lasst uns Medien einlegen. Da haben wir es. Das nächste, was wir tun wollen, ist natürlich, die Überschrift hinzuzufügen. Heading, wer der Autor. Also mache ich weiter und kopiere das. Und hier drin möchte ich weitermachen und sagen, ziehe eine Überschrift hier rein. Aber anstatt das zu tun, warum duplizieren Sie das nicht einfach? Und dann ziehe das ganz nach unten. Wenn du jetzt versuchst zu ziehen, lass mich das einfach rückgängig machen. Wenn du versuchst, diese Elemente zu ziehen, kommt es hier zum Ende und es geht nicht mehr nach unten, während du sie noch hältst. Während du noch den Knopf deiner Maus drückst. Scrollen Sie mit dem mittleren Mausrad. Und lassen Sie dann die Maustaste los, wenn Sie zu dem Punkt kommen, den Sie fallen lassen möchten. Okay, jetzt wo wir das da haben, klicke ich da rein. Solange es noch ausgewählt ist. Lass mich das kopieren. Wählen Sie alles aus und fügen Sie es dann ein. Wer ist also der Autor? Und jetzt richten wir es nach links aus. Und das ist ein Seitentool. Also lasse ich es dabei. Gehen wir hier rein, Typografie. Vergrößern wir die Größe bis zu diesem Punkt. Jetzt können wir auch hier reingehen und diese Schriftart duplizieren. Und mir ist aufgefallen , dass wir vergessen haben, diese Beschreibungen in Montserrat zu ändern, also lassen Sie mich diesen Inhalt auswählen. Lassen Sie uns hier in den Stil für den Inhalt eingehen . Topographie. Wisse, dass das der Titel ist. Wir wollen die Beschreibung. Ich wollte das nur aus Gründen der Einheitlichkeit in Montserrat ändern. Und jetzt sieht es aus wie Montserrat, also kopiere ich das einfach. Dann. Fügen Sie den Stil ein. Fügen Sie den Stil ein. Klicken Sie mit der rechten Maustaste auf Stil einfügen, rechten Maustaste auf Stil einfügen, wissen Sie zu Recht, klicken Okay, das sollte also auch Typografie vom Typ Montserrat sein. Montserrat oder Einheitlichkeit. Hier drin. Anstatt einen dieser Texte zu duplizieren, fügen wir einfach ein neues Texteditor-Element hinzu. Und lasst uns direkt in die Stil-Typografie gehen , Monate Irak. Innerhalb des Inhalts können Sie jetzt die gewünschte Beschreibung schreiben. Ich kopiere das einfach und dupliziere es ein paar Mal. Und wir haben unsere Beschreibung oder unsere Biografie des Autors. Mischen möchte, ist ihre Signatur hinzuzufügen. Nur um die Seite ein bisschen interessanter zu machen. Er dient wirklich keinem anderen Zweck abgesehen davon, es nur interessant zu machen. Klicken wir also auf dieses Symbol, um die Symbole aufzurufen und die Elemente aufzurufen. Und dann ziehen wir ein Bildelement hierher. Und natürlich werden Sie feststellen, dass dieser Bildplatzhalter groß ist. Lass uns ein Bild wählen. wir Dateien hoch, um die Signatur zu erhalten. Und Sie werden feststellen, dass das Signaturbild 100 mal 40 Pixel groß ist. Das bedeutet, dass es ein winziges Bild ist. Stellen Sie also sicher, dass Ihr Signaturbild winzig ist. Ein 100 mal 40 0s, nett. Mach es nicht 500 Pixel , weil es groß sein wird. Lasst uns also Medien einlegen, und da haben wir es. Und standardmäßig ist es in der Mitte. Also schieben wir es nach links. Und das nächste, was wir tun müssen, ist unser Social-Media-Symbol hinzuzufügen. Wählen Sie also die Elemente dort aus. Dann sozial. Ziehen wir die Social-Symbole genau dorthin, standardmäßig in die Mitte. Also lasst uns sie auch nach links legen. Und lasst uns einen gewissen Spielraum zwischen ihnen und der Unterschrift hinzufügen. Während es noch ausgewählt ist, lasst uns fortgeschritten hineingehen. Brechen Sie diese Verbindung auf. Vielleicht 30. Ja, ich glaube, das gefällt mir. Hallo, wisst, wie wir das hier bekommen haben. Lass es mich einfach von dort entfernen. Und dann lasst uns das aktualisieren. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Großartig. Wir haben also den Käufer unseres Autors. Es sieht gut aus. Ich hoffe, du konntest es auch erstellen. In der nächsten Lektion sehen wir uns an, wie Sie diesen Call-to-Action-Abschnitt erstellen. Denn zu diesem Zeitpunkt ist die Person wirklich daran interessiert, das E-Book herunterzuladen. Beachten Sie, dass auf dieser Seite kostenlose Download-Buttons da eine Zielseite einen Call-to-Action-Abschnitte haben muss . Abschnitte, die sie daran erinnern, eine Aktion zu ergreifen. Denn das Ziel einer Landing Page ist es, Personen in Käufer umzuwandeln oder herunterzuladen, während sie das Video angesehen haben. Schau dir die Statistiken an und lies mehr über den Autor. Als Nächstes wollen wir, dass sie eine Aktion ergreifen, also schließen wir dort einen weiteren Button ab. Sehen wir uns also an, wie man diesen Abschnitt erstellt. In der nächsten Lektion. 10. Helfen Sie mir Elementor an 10.000 Kursteilnehmer:innen: 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! 11. CTA Abschnitt: Willkommen zurück. Natürlich haben wir die Erstellung des Autorenbereichs abgeschlossen. Das Erstellen dieses Abschnitts ist ziemlich einfach und unkompliziert. Tatsächlich denke ich, dass Sie bereits wissen, was wir tun müssen , um es zu schaffen. Also lasst uns weitermachen und das tun , ohne mehr Zeit zu verschwenden. also wieder in unseren Editor gehen, können wir einen neuen Abschnitt von Grund auf neu erstellen, oder wir können dies duplizieren. Und dann ziehe es direkt darunter. Und jetzt hat es alles und jetzt hat es die meisten Teile, die wir brauchen. Lassen Sie uns diese Abschnitte also loswerden . Fakt, lasst uns den inneren Abschnitt ganz loswerden. Und jetzt bleibt uns unsere ursprüngliche einzelne Spalte übrig. Was wir also tun müssen, ist, dass wir das duplizieren können. Elementor wurde entwickelt, um Ihnen das Leben zu erleichtern, anstatt jedes Mal dieselben ähnlichen Stile neu zu erstellen, wenn wir es einfach duplizieren können. Bringen wir dies in die Mitte, solange es noch ausgewählt ist, bearbeiten Sie die Überschrift, es wird in die Mitte geschoben. Was heißt es jetzt? Dieses Buch wird sich ändern. Also lasst uns das kopieren. Während dies ausgewählt ist, klicke ich darauf und füge es dort ein. Und dann lasst uns in die Textfarbe des Stils gehen. Wir brauchen es weiß. Und dann haben wir diesen Lorem Ipsum. Wir müssen das nicht kopieren, weil wir es einfach von hier aus bekommen können. Lassen Sie mich das duplizieren. Und dann ziehen wir das da rein. Lassen Sie uns natürlich 90% davon loswerden. Jetzt bleiben wir damit übrig. Lass uns in den Stil gehen und lass es uns in die Mitte legen. Jetzt ist es in der Mitte. Lassen Sie uns die Farbe in Weiß ändern. Dann lasst uns in die Topographie gehen. Und lassen Sie uns die Größe ein wenig erhöhen. Lass es wie eine Beschreibung aussehen. Und dann brauchen wir natürlich diesen Knopf. Also lasst uns hierher gehen und dies darüber duplizieren und dann auf das doppelte Symbol klicken. Dann lasst uns das ziehen. Wenn wir hier sind. Scrollen Sie mit dem Mausrad nach unten. Lassen Sie es uns dort fallen, sobald die blaue Linie erscheint. Jetzt werden Sie feststellen, dass wir hier zu viel Abstand haben. Lasst uns diesen Abstand reduzieren. Zuallererst hatten diese oben etwas Polsterung. Wie Sie aus dem sehen können, aus dem Editor-Umriss. Gehen wir zu Advanced, solange es noch ausgewählt ist. Lasst uns das entfernen. Dann lassen Sie uns diesen Text auswählen. Gehe in den erweiterten Rand, unten. Reduzieren wir die untere Marge. Ich glaube, es gefällt mir dort. Lasst uns das aktualisieren. Lassen Sie uns also eine Vorschau der Änderungen anzeigen. Und da haben wir es. Unser Aufruf zum Handeln ist fertig. Der nächste Teil, den wir erstellen möchten, ist Anmeldebereich dieses Benutzers, da jede Zielseite ein Anmeldeformular oder ein anderes Formular haben muss , das die Kundendaten erfasst. Und du musst ihnen etwas geben, damit sie dir ihre Kontakte und ihre E-Mail geben können. So erhalten sie die ersten drei Kapitel des E-Books, indem sie sich bei Ihrer Mailingliste anmelden. Lassen Sie uns also in der nächsten Lektion sehen, wie Sie diese erstellen können. Wir sehen uns in Kürze. 12. Abschnitt Anmelden: Willkommen zurück. Jetzt ist es an der Zeit, dieses Anmeldeformular zu erstellen. Und das tun wir, indem wir ein Plugin namens Terminatoren installieren . Ohne Zeit zu verschwenden, springen wir in unser Armaturenbrett. Gehen wir also zu Plugins, Add New. Und hier drin möchte ich später für mich tippen. Hier geht es bei WPA mu Dell hat derzeit 300 Tausend aktive Installationen. Also Eileen, solide. Lass mich weitermachen und aktiviere es. Da haben wir es also für Dominatoren. Also gehe ich hier zum linken Menü, es ist fast ganz unten. Ich formuliere ihr Übergewicht. Fakt. Lass mich einfach klicken. Der Formulator wird in WordPress zum Plugins-Dashboard weitergeleitet. Wie Sie sehen können, sind wir jetzt unter formuliert. Dashboard und wir haben mehr Bereiche, die wir besuchen können, aber im Moment sind wir nur daran interessiert, ein Formular zu erstellen. Also mache ich weiter und wie Sie genau hier sehen können, haben wir Formulare. Erstellen Sie ein Formular. Wir haben Beiträge. Sie können eine Umfrage erstellen, gehen aber nicht ins Detail ein. Sie können es sich auf YouTube ansehen. Erfahren Sie mehr darüber, warum für mich das großartigste Formular-Plug-In ist, die Arrays. Aber das ist nur meine Meinung. Erstellen wir also ein Formular und werden mit diesen vorgefertigten Vorlagen präsentiert. Und das, was wir brauchen, ist die Newsletter-Anmeldung , die wir aus einem leeren Blatt erstellen können. Lass uns mit Schwarz gehen. Nur damit wir von Grund auf neu erstellen können, was wir brauchen. Nennen wir ihm einen Namen. Anmeldeformular. Okay, also hier sind wir. Alles klar, also hier sind wir. Alles, was wir tun müssen, ist das Feld einzufügen, das wir benötigen. Und das Feld, das wir brauchen, ist das E-Mail-Feld. Also möchte ich hier nur auf Feld einfügen klicken und das E-Mail-Feld auswählen. Wir haben viele andere verschiedene Felder , die Sie in Ihr Formular einfügen können, aber wir sind vorerst nicht daran interessiert. Also lasst uns das Feld einfügen. Und dann, ja, lassen wir es uns einfach als E-Mail-Adresse belassen. Oder sagen wir Ihre E-Mail, Ihre E-Mail. Lass uns ein Kleid ausziehen. Und dann lassen wir den Platzhalter als John Doe. Wende das an. Wenn wir es in der Vorschau sehen. Ihre E-Mail und der Platzhalter ist EG John, John bei Dot.com. Schließen wir das also und veröffentlichen es. Sobald Sie es veröffentlicht haben, erhalten wir den Kurzcode, den wir im Frontend einfügen können. Lassen Sie mich das also kopieren. Und wie Sie sehen können, wurde es erfolgreich kopiert, benötigt diesen Kurzcode, das Frontend. Also lasst uns zurück zum Frontend gehen. Hier sind wir. Direkt unten. In unserem Aufruf zum Handeln fügen wir einen neuen Abschnitt hinzu. Und es ist ein zweispaltiger Abschnitt. Und wir müssen eine Top-Marge hinzufügen. Wählen Sie also die erweiterte Pause aus, die 15 hier gegenübersteht. Klicken wir hier drin auf das Pluszeichen und geben wir Kurzcode ein, oder einfach kurz. Und das wird erscheinen. Ziehen wir den Kurzcode in dieser Spalte dorthin. Und jetzt, sobald wir es fallen lassen, wird es mit diesen Änderungen angezeigt Kurzcode-Einstellungen. Und dann können wir unseren Kurzcode dort einfügen. Das ist ein kurzer Code, den wir von hier bekommen haben, diesen Kurzcode für den Fall, dass Sie diesen Teil verlassen haben. Sie können es auch von hier aus von diesem Zahnrad holen. Kopieren Sie den Kurzcode und Sie haben ihn erneut kopiert. Also lass es da rein und wende das dann an. Lassen Sie uns eine Vorschau der Änderungen anzeigen. Scrollen wir ganz nach unten. Und da haben wir es. Unser Formular ist fertig. Aber jetzt gehen wir wieder rein und fügen diesen Text hinzu. Holen Sie sich die ersten drei Kapitel kostenlos. Lassen Sie mich das also kopieren. Was wir tun müssen, ist dies einfach zu duplizieren oder mich stattdessen duplizieren zu lassen , da es bereits die Farbe hat, die wir brauchen. Ziehen wir es ganz nach unten. Lass es uns da reinlegen. Solange es noch ausgewählt ist. Ich füge den richtigen Text ein und bekomme die ersten drei Kapitel kostenlos. Okay, lassen Sie uns das aktualisieren und lassen Sie uns eine Vorschau der Änderungen anzeigen. Stimmt's? Aber jetzt ist es nicht ausgeglichen. Ziehen wir das also ein wenig nach links, damit diese in die nächste Zeile springen , um es ausgeglichener aussehen zu lassen. So wie das. Aktualisiere das. Und denken Sie daran, dass wir diese Farbe auch auf die restlichen Markenfarben reimen müssen. Da dieses Formular mit dem Formulierer erstellt wurde, können wir es nicht mit Elementor bearbeiten. Wir müssen wieder in unser Dashboard gehen. Geh zurück ins Dashboard. Terminator-Formulare. Und sobald wir uns in den Formularen befinden, sehen wir eine Liste aller Formulare, die wir haben. Dies ist die Form, die wir erstellen. Wir haben gerade ein Anmeldeformular erstellt. Bearbeiten wir das Formular. Und während wir hier drin sind, gehen wir zum zweiten Panel genau hier. Aussehen. Und das bringt uns an den Ort, an dem wir das Erscheinungsbild des Formulars bearbeiten können. Zuallererst können wir diese Grenzlinien loswerden, können wir diese Grenzlinien loswerden indem wir „flach“ wählen. Es gibt andere Möglichkeiten, aus denen Sie wählen können, aber ich mag flach. Und lassen Sie uns die Farbe des Buttons ändern. Im Moment verwenden wir die Standardfarben der Standardfarben , die mit einem Plug-In geliefert werden. Aber wir können Kostüm sagen. Und es wird alle Teile des Formulars aufrufen , die wir ändern können. Die Farbe von. Der letzte Punkt hier ist die Schaltfläche „ Senden“. Dieser Knopf. Da es ausgewählt ist, wird es ein Dropdown-Menü angezeigt. Es bringt diese Optionen auf. So können wir die Hintergrundfarbe auswählen und auf eine 24 ändern . Das hat diese Duplikate entfernt, F 1524. Und beim Hover wollen wir, dass der Button sein soll, dass der Button dreifach 40 ist. Und unkonzentriert. Wir wollen auch, dass es diese Farbe ist. Also lass uns gehen, also sagen wir Update. Okay, jetzt gehen wir zum Frontend und lassen Sie uns die Änderungen übernehmen, die wir gerade im Backend vorgenommen haben. Lassen Sie uns noch einmal eine Vorschau der Änderungen anzeigen. Scrollen Sie also nach unten. Hier ist unser Knopf beim Hover. Die Änderungen an diesem Schwarz, die mit diesem Schwarz übereinstimmen. Jetzt können wir den Abstand zwischen dieser Spalte und dieser Spalte erhöhen , indem wir hierher zurückkehren. Scrollen Sie nach unten zu diesem Abschnitt, der diese Spalte und diese Spalte enthält. Wählen wir diesen Abschnitt selbst im Layout aus. Spalten Lücke, sagen wir weiß. Und lasst uns lesen, lassen Sie uns diese Breite hier vergrößern , nur damit dies zu zweit gequetscht wird. Lasst uns das aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Zumindest haben wir einen schönen Abstand zwischen den beiden. Jetzt, da wir mit allen von uns erstellten Abschnitten zufrieden sind , ist es an der Zeit, den Kurs zu beenden, indem die Seite auf allen Geräten reagiert, dh mobile Bildschirme, Tablets Bildschirme, und es sieht schon gut aus auf dem Desktop. Lasst uns also an Tablet - und Mobilbildschirmen arbeiten. Wir sehen uns in der nächsten Lektion. 13. Smartphone Bildschirm Responsiveness: Willkommen zurück. Zeit, um die Webseite auf den verschiedenen Geräten, auf denen die Leute surfen , reagieren zu lassen. Und das sind mobile Bildschirme und Tablets. Klicken wir also auf dieses Symbol für den Responsive-Modus direkt hier in der Fußzeile der Seite. Und sofort erscheint diese Leiste mit verschiedenen Einstellungen für das responsive Design. Also klicke ich auf dieses Symbol und ändere sofort die Größe eines mobilen Bildschirms. Und wir können weitermachen und scrollen , nur um zu sehen, wie es aussieht. Es scheint nicht so, als gäbe es viel Arbeit zu erledigen. Die Webseite sieht übrigens fast gut aus. Von ganz oben ist das Buch also in der Mitte und es sieht gut aus, wo es ist. Gehen wir also zum zweiten Teil über, der H1 ist. Auswahl des H1. Lassen Sie uns in die Typografie im Stil gehen. Reduzieren wir die Größe. Ich mag diese Größe. Gehen wir zurück in den Inhalt, richten wir ihn in die Mitte aus. Und Sie werden feststellen, dass wir den Rand oben haben , den wir auf dem Desktop festgelegt hatten. Lasst uns fortfahren und diese Spalte auswählen. Jetzt ist es die Spalte bearbeiten erweitert. Und lassen Sie uns diesen Link aufbrechen, um die Standardeinstellungen zu entfernen , mit denen wir geliefert haben. Jetzt haben wir die Einstellungen entfernt, die wir im Desktop-Modus festgelegt haben . Das nächste, was Sie hier bemerken werden, ist, dass wir die Größe etwas weiter reduzieren. Ich gehe in die Typografie. Ich mag diese Größe. Wählen Sie diesen Texteditor aus. Gehe in den Stil. Ausrichten, zentrieren. Wir versuchen nur alles auf das Zentrum auszurichten. Für das Gleichgewicht. Wählen Sie die Schaltfläche innerhalb der Inhaltsausrichtung aus. Machen wir das Gleiche für diesen Texteditor hier. Gehe in die Stilausrichtung, Mitte. Unsere Partnerabteilung sieht schon gut aus. Lassen Sie uns also zum nächsten Teil übergehen, nämlich dem Themenbereich. Ich denke, ich mag es, wo es ist, aber eine Sache, die wir hier gegen diesen ganzen Abschnitt tun können , ist die Erhöhung der Polsterung an der Spalte selbst. Also Abstand zwischen dem Bildschirmrand und dem Ort, an dem der Inhalt beginnt. Lassen Sie uns also gehen, solange diese Spalte ausgewählt ist, gehen wir weiter hinein. Denken Sie daran, dass sich diese Spalte innerhalb des Abschnitts befindet , der ein Abschnitt mit voller Breite war. Lassen Sie mich also einfach für eine Sekunde auf den Desktop wechseln. Wir hatten einen Abschnitt mit voller Breite mit nur einer Spalte. Was wir also auf mobilen Bildschirmen tun wollen, erhöht Eve die Polsterung um diese ganze Spalte. Das heißt also die Polsterung, wir drücken diesen Knopf auch nach innen. Gehe zurück in den mobilen Bildschirm. Während wir drinnen sind, sind wir in dieser Kolumne vorangekommen. Ohne diese Verbindung zu brechen. Geben wir ihm eine 20. Und Sie werden feststellen, dass wir rundum einige Abstände haben, einschließlich wo der Knopf hier etwas mehr Abstand gemacht hat. Lasst uns das aktualisieren. Das sieht gut aus. Ich glaube, ich mag diese Videobereiche, also werde ich das nicht anfassen. Ich mag, dass dieser Teil, nun, alles wird automatisch zentriert. Was wir vielleicht tun möchten, ist diese Spalte auszuwählen, wie wir es im Themenbereich getan haben. Wählen Sie die Spalte aus, gehen Sie in Erweitert. Lassen Sie uns rundum eine Polsterung von 20 behalten, richtig, also gibt es rundum diese einheitliche Polsterung. Und wir können alles ins Zentrum schieben. Also wähle ich dieses Hinzufügen unter Inhaltsausrichtungszentrum aus. Wählen Sie diesen Texteditor unter Stilausrichtungszentrum aus. Wählen wir dieses Bild aus. Elemente. Ausrichtungszentrum. Das Zentrum der Social-Media-Icons. Das Bild ist gut platziert, sodass wir das nicht berühren müssen. Ein cooles Feature von Elementor ist übrigens, dass Sie Spalten innerhalb eines Abschnitts umkehren können. Wenn wir also wollten, dass dieses Bild vor den Texten kommt, können wir weiter hineingehen. Zunächst können wir den Abschnitt auswählen, den wir beeinflussen möchten, nämlich ein zweispaltiger Abschnitt diesen Textblock enthält und das Bild in Advanced responsive eingeht. Und wir können Spalten auf dem mobilen Bildschirm umkehren. Jetzt wurde das Bild nach oben geschoben und der Textblock wurde nach unten geschoben. Aber wenn man wieder auf den Bildschirm geht, das Bild in der Desktop-Version befindet sich das Bild in der Desktop-Version immer noch auf der rechten Seite geht hier wieder hinein. Wenn du das nicht willst, kannst du das immer einfach deaktivieren. Reduzieren wir dann diese Überschriftengröße. Wählen Sie also diesen Stil Typografie, ziehen wir das, bis wir mit der Größe zufrieden sind. Ich glaube, ich mag es an diesem Punkt. Alles andere ist zentriert und sieht gut aus. Reduzieren wir die Größe von allem. Reduzieren wir das so groß. Lassen Sie uns zunächst die Größe der hinzugefügten Autoren reduzieren . Also wähle ich diese Überschrift aus. Typografie im Stil. Das sind 39. Machen wir es zu einer 40. Und gehen Sie bis zu diesem Aufruf zum Handeln aus dem Abschnitt, wählen Sie die Überschrift aus, gehen Sie in die Stil-Typografie. Tippen wir hier 40 ein. So wie diese Größe. Gehen wir zurück in den Inhalt schieben wir ihn in die Mitte. Und unsere Form ist intakt. Jetzt können wir diese reaktionsschnellen Designeinstellungen verwenden diese reaktionsschnellen Designeinstellungen um diesen Knopf in die Mitte zu drücken, wie wir es mit den übrigen Tasten getan haben. Denn denken Sie daran, dass dieses Formular mit dem Formulierer erstellt wurde. Und um diesen Knopf in die Mitte zu drücken, müssten wir etwas CSS-Code verwenden. werden wir also nicht eingehen. Und ich pinke das Formular sieht einfach gut aus, wie es ist. Aber wenn Sie mehr darüber erfahren möchten, wie diesen Knopf mit CSS in die Mitte drücken können. Sie können auf YouTube oder einem anderen Tutorial auf YouTube oder einem anderen auf YouTube suchen oder einfach nur googeln. Achten Sie auf die Anpassung des Nominators CSS. Das war's. Auf mobilen Bildschirmen. Die Webseite sieht großartig aus. Lass uns reingehen. Okay, lasst uns das zuerst aktualisieren, bevor wir mit dem Tablet-Modus fortfahren. Und lasst uns eine Vorschau der Änderungen anzeigen. Natürlich öffnet es sich im Tablet-Modus. Aber ich möchte Ihnen zeigen, wie Sie einen mobilen Bildschirm nachahmen und sehen, wie er aussehen wird. also auf Ihrer Computertastatur Drücken Sie also auf Ihrer Computertastatur Control Shift I oder Command Shift I. Das öffnet Google Developer Tools und schalten Sie die Gerätesymbolleiste um. Wenn du darauf klickst. Wenn es aktiv ist, hat es eine blaue Farbe. Und hier haben wir ein Dropdown-Menü oder die verschiedenen mobilen Bildschirme , die Sie nachahmen können um zu sehen, wie die Webseite aussehen wird. Momentan betrachten wir es als fünf Pixel, als ein vermittelt wird, können Sie es als iPhone 12s Pro machen. Und so wird es auf iPhones aussehen. Alles klar, also gefällt mir, wie es aussieht. Gehen wir zurück und arbeiten am Tablet-Modus. 14. Responsiveness für Tablet: also wieder hier reingehe, möchte ich auf das Tablet-Symbol klicken. Und sofort wechselt es in den Tablet-Modus. Scrollen wir ganz nach oben. Standardmäßig hat elementor diesen bekannten Fehler, bei dem Sie diesen Bildschirm ein wenig erweitern müssen, wenn Sie in den Tablet-Modus wechseln . Wenn Sie Einstellungen im Tablet-Modus anwenden , ohne die Größe des Bildschirms ein wenig zu ändern, sehen Sie die Änderungen nicht und lassen Sie mich das Ihnen beweisen. Also im Moment, diese Kolumne bis zu diesem Punkt. Wenn ich also die Spalte auswähle und zur Spalte gehe und ihr einen 100-prozentigen Weizen gebe , um von links nach rechts zu laufen und Enter zu drücken und nichts passiert. Aber wenn wir es ein bisschen ziehen, merke jetzt, dass es tatsächlich zeigt, was wir gerade getan haben. Und darüber spreche ich. Wir möchten die Einstellungen für die Einstellung sehen. Im Moment nimmt die Massenspalte 100 Prozent des Bildschirms ein. Wenn wir jedoch in den Desktop-Modus wechseln , belegt er immer noch 50% des Bildschirms. Und dieser andere Teil belegt 50 Prozent des Bildschirms. Wenn wir in den Tablet-Modus zurückkehren, möchten wir dies zu einem 100% breiten eigenen Tablet-Modus machen. Wie wir es mit dem Buch gemacht haben. Lassen Sie uns das noch einmal erweitern. Richtig, also ist es ein 100%. Wählen Sie also diese Spalte hier aus und gehen Sie in das Layout, Spaltenbreite von 100%. Jetzt ist es ein 100%. Ich möchte hier die Marge brechen, die wir eine Weile auf dem Desktop hatten . Und natürlich, obwohl dies noch ausgewählt ist, gehen wir weiter hinein und entfernen das. Jetzt setzen wir es zurück. Wählen Sie diese Überschrift aus. Gehen Sie in Stil-Typografie. Reduzieren wir die Größe ein wenig. Und lasst uns in den Inhalt gehen und ihn in die Mitte schieben. Wählen wir diese Beschreibung aus. Während er unter Stil ist, schiebt es in die Mitte. Lasst uns alles wieder in die Mitte schieben. Lasst uns alles wieder in die Mitte schieben. Wählen Sie das aus. Schiebt die Mitte. Das gefällt mir. Stil In der Mitte. Die Wohnungen sehen gut aus. Das sieht gut aus. Wir können ihm auch diese Marge von 20 geben. Unter fortgeschritten. Sieht gut aus. Diese Spalte benötigt etwas Polsterung an den Rändern. Wählen Sie also diese Spalten aus, erweitertes Padding. Jetzt haben wir ein paar schöne Polsterungen. Bild. Sieht gut aus. Reduzieren wir die Größe dieser Überschrift. Style-Typografie. Lassen Sie uns schließlich die Größe der Polsterung genau hier reduzieren. Das Rosa, ich mag es an dieser Stelle. Lasst uns das aktualisieren. Und lasst uns eine Vorschau der Änderungen anzeigen. Ordnung, also gehen wir auf diesem Bildschirm zu diesem Dropdown-Menü und wählen das iPad aus. Und lasst uns, wir können zwischen Quer- und Hochformat wechseln. Klicken Sie also auf dieses Symbol, um es zu drehen. So sieht es aus. Auf Tablet-Landschaft. Und auf einem Tablet-Portrait. So sieht es aus. Um den Bildschirm zu vergrößern und die Seite zu füllen. Man kann es einfach so zu 100 Prozent machen. Und so sieht es aus einer Nahaufnahme-Entfernungsüberschreibung aus. Jetzt reagiert unsere Zielseite auf allen Bildschirmen. Denn wenn wir jetzt zum iPhone wechseln, sieht er gut aus. Auf dem Tablet. Es sieht vorzeigbar aus. Lass uns ins Surface Duo gehen. Und auf dem Desktop sieht es großartig aus. Lassen Sie mich das also schließen und nach unten scrollen. Im Grunde geht es so. Und das markiert das Ende unseres Kurses. Ich hoffe, du hast einige Dinge gelernt, wenn du brandneu bei Elementor bist. Und selbst wenn Sie bereits wissen, wie man Elementor benutzt und dies als Auffrischung angesehen hat. Ich hoffe, du konntest ein oder zwei Dinge lernen. Natürlich haben wir nicht alles abgedeckt, was es über Elementor zu behandeln gibt. Das wird in einer Klasse unmöglich sein. Aber wir haben behandelt, was wir für diese spezifische Landing Page brauchten . Sie möchten also nur für den Fall, dass Sie mehr darüber erfahren möchten wie Sie Elementor verwenden, z. B. das Erstellen der Navigationsleiste, wie einen Ordner erstellen und die Details auf dem Foto bearbeiten. Sie können jeden meiner anderen Skillshare-Kurse ansehen , in denen ich tief gehe und Ihnen beibringe, wie Sie voll funktionierende Websites entwerfen können. Aber im Moment denke ich, dass wir alles behandelt haben , was ich Ihnen beibringen wollte wie man mit Elementor eine schöne E-Book-Zielseite erstellt . 15. Schlussbemerkung: Alles klar, das markiert also das Ende dieser Klasse. Ich hoffe, Sie fanden es wertvoll und vor allem hoffe ich, dass Sie tatsächlich Ihre eigene Landing Page erstellen. Wenn Sie neu bei Elementor sind, empfehle ich Ihnen, alle meine anderen Kurse zu besuchen , indem Sie zu meinem Profil gehen. Und dort findest du mehrere Klassen , in denen ich dir beibringe, wie man voll funktionierende Websites oder fantastische Landingpages entwirft. Und wenn Ihnen dieser Kurs gefallen hat, vergessen Sie bitte nicht, eine Bewertung abzugeben. Es wird einen langen Beitrag leisten, um diese Klasse auffindbarer zu machen. Genau hier auf Skillshare. Mehr als Bewertungen. Je mehr die Bewertungen die Klasse erhält, desto mehr wird sie auffindbar. Und wie immer heiße ich Ken Visa. Bleib bis zum nächsten Mal kreatives Stück. Wir sehen uns das nächste Mal.