Bootstrap Studio Tutorial Version 6. 0 Bootstrap Studio lernen

1. Kurs-Einführung: Hallo Leute, Hawaii, danke, dass du zu diesem bestimmten Kurs gelandet bist. In diesem Kurs dreht sich alles um Bootstrap Studio. Bootstrap-Studio ist was? Bootstrap Studio ist eine Desktop-Anwendung , mit der Sie eine Website entwerfen können. Es ist eine statische Website und es gibt eine Funktion, mit der Sie auch eine dynamische Website erstellen können, aber das ist nur für den E-Commerce, also werden wir das auch sehen. Bootstrap Studio ist also eine Desktop-Anwendung , die vollständig auf dem Bootstrap-Framework basiert. In diesem Kurs werden wir sehen, wie Sie Bootstrap Studio genau verwenden können , um Websites ohne Codierung zu entwerfen. Das ist das Schlüsselwort. Ohne Codierung kodiert ein bisschen Codierung dein Bein ruft einfach etwas hier und da an. Aber es ist nicht wie Hardcore-Programmierung oder Hardcode-Codierung. Du musst mir nur folgen, was ich mache und dann ist es fertig. Sie können alles entwerfen. Ich zeige Ihnen, was genau Sie entwerfen werden und was Sie in diesem Kurs lernen werden. In diesem Kurs werden wir alles über die Panels in der Software wie Studio-Panel, Online-Panel, was genau diese Übersichtspanel sehen über die Panels in der Software wie Studio-Panel, Online-Panel, . Und in diesem Optionsfeld haben wir drei Optionen, Darstellungsoptionen und Animationen. Dann entwerfen Sie Panel. Ich habe ein separates, separates Video erstellt , um zu verstehen wie genau wir dieses Panel verwenden werden, und dann wechseln wir zu einem Projekt. Okay, also werden wir einige Projekte entwerfen, wie zum Beispiel eine Seite fortsetzen. Dies ist eine einseitige Website. Wenn Sie sehen, dass es sich um eine vollständige einseitige Website handelt und Sie können alles auf dieser Seite nach Ihren Wünschen und Ihren Bedürfnissen anpassen alles auf dieser Seite nach . Okay, also wie genau wird diese Website aussehen? Das ist mein Browser. Sie können in Echtzeit eine Überprüfung der Website sehen. Das ist also dein Browser. Wenn Sie auf Über uns klicken, sehen Sie das Scrollen nach oben. Wenn Sie auf Kontakt klicken, scrollt es nach oben. Wenn du oben auf wen klickst. Und auf der Kontaktseite, wenn Sie sehen, gibt es ein Formular. Ohne Codierung. In diesem Kurs lernen wir, wie genau man ein intelligentes Formular in Bootstrap Studio erstellt. Wir nennen es ein intelligentes Formular, was bedeutet, dass der Benutzer jedes Mal, wenn der Benutzer dieses Formular ausfüllt und auf Senden klickt, an eine E-Mail-Adresse gesendet wird, die Sie ausgewählt haben , unter welcher E-Mail-Adresse dies ist Informationen des Formulars sollten kommen. Dies ist eine Art dynamische Form, aber nicht gerade dynamisch. Wir nennen es ein Smartphone. Als Nächstes haben wir eine mehrseitige Website , die wir in diesem speziellen Kurs gestalten werden. Das ist eine Art wie eine Webseite eines Tech-Unternehmens. Wir haben also mehrere Seiten hier, auf denen wir Formulare haben. Auch dies ist eine intelligente Form. Dann erstellen wir die Kontaktseite, all diese Dinge. Und darüber hinaus wird alles mobil reagieren. Sehen Sie sich diese Navbar an, wie wenn ich zu einer größeren Bildschirmgröße komme, kommen die Symbole, die Schaltflächen hier drüben auf. Wenn ich zum mobilen Bildschirm komme, verstecken sie sich in diesem Toggle. Sie werden sehen, wie genau wir eine mobile Antwort auf Ihre Website entwerfen werden , ohne zu codieren. Danach werden wir ein Design eines LMS-Systems erstellen , das Lernmanagementsystem wie mehrere Kurse ist , mehrseitige Optionen gibt es. Wir werden die Wunschlistenseite und dann die Registrierungsseite und alle anderen Sachen entwerfen . Das Aufregendste hier ist diese E-Commerce-Website. Und um in diesem speziellen Bereich ganz klar zu sein, ist die E-Commerce-Website eine vollständige dynamische Website , auf die Sie sich integrieren können. Das Zahlungsgateway ist auch also sehen wir uns die Demo dieser Website an. Dies ist unsere E-Commerce-Website, die wir sind, die wir in diesem Kurs gestalten werden. Und es gibt mehrere Produkte hier. Und wenn ich auf dieses Produkt klicke, können Sie sehen, dass es auf diese Produktseite gelangt, und dann sind einige verwandte Optionen für verwandte Produkte. Dann haben Sie eine Größenoption zur Auswahl. Und wenn ich diese Größe auswähle und die Menge ändere, und wenn ich diese Geschenkverpackung hinzufüge , machen wir es im Kurs. Wenn und wenn ich auf In den Warenkorb klicke, wird es wie das Produkt angezeigt, das in den Warenkorb gelegt wurde, können Sie hier klicken, wie C-Karte oder Sie können auf Jahr klicken , um in den Warenkorb zu gehen, und dann können Sie sehen, dass Ihr Produkt da ist. Und wenn ich auf Kasse klicke, sehen Sie, dass ich aufgefordert werde, einige meiner Daten einzugeben. Wenn ich hier alle Details hinzufüge, wenn ich auf Weiter klicke und die Zahlung per PayPal oder Debitkarte angezeigt wird , haben Sie zwei Optionen wie PayPal und Stripe. Und Sie können auch einige Optionen anbieten, die als Überweisung, Pipi, Pipi bei Lieferung bezeichnet werden. Und hier habe ich BY a UPI benutzt. All diese Dinge wirst du also in diesem speziellen Kurs lernen. Dies ist ein sehr vollständig enger Kurs. Und abgesehen davon werden wir viele Dinge wie Zoho Integration, Kundensupport-Integration und all die anderen Dinge sehen . Ohne viel Zeit zu verschwenden. Lasst uns anfangen und wir sehen uns im ersten Video dieses Kurses. 2. Erste Schritte: In diesem Video werden wir sehen, wie wir mit Bootstrap Studio beginnen können. Zum Zeitpunkt der Aufnahme dieses Videos befindet sich das Bootstrap-Studio auf Version 5.6.4. Das ist die neueste Version. Zu diesem Zeitpunkt. Wenn Sie das Bootstrap Studio zum ersten Mal starten, sehen Sie dies auf Ihrem Bildschirm. Mal sehen, wie man damit umgeht. Wir haben nur sehr wenige Möglichkeiten auf diesem Bildschirm. Erstens ist das jüngste Design. Wie der Name schon vermutet hat. Der Grund, warum Design die neuesten Designs bedeutet , an denen Sie gearbeitet haben. Wir kommen hierher, damit Sie einfach darauf klicken können und Sie das Projekt öffnen können, zeitsparend, sonst nichts. Dann Tutorials, du hast hier ein paar Tutorials. Wenn Sie auf eine dieser Optionen klicken, gelangen Sie zur Webseite, bei der es sich um ein vollständig textbasiertes Tutorial handelt. Es ist kein Video-Tutorial. Deswegen mache ich ein Video darüber. Der Name der Software ist Bootstrap Studio als die Version, die 5.6 für die aktuelle Version ist, dann haben wir hier einen neuen Design-Button. Dann haben wir einen Öffnen-Button. Jahr. Neues Design ist, wenn Sie auf das neue Design klicken, wenn das Dialogfeld vor Ihnen erscheint, in dem angegeben wird , welche Art von neuem Design Sie möchten. Wenn Sie auf Öffnen klicken, wird der Datei-Explorer vor Sie kommen. Und Sie können einfach das Projekt auswählen und dann können Sie damit beginnen, daran zu arbeiten. Also schauen wir uns an, wie man ein neues Design erstellt. Wenn Sie einfach auf ein neues Design-Dialogfeld klicken wird Ihnen vorbeikommen. Bootstrap Studio gibt uns wenige vorgefertigte Designs. Sie können damit auch beginnen, aber Sie alle sehen sich dieses Video an, um Bootstrap Studio zu lernen , die vorgefertigten Designs nicht zu verwenden. Was wir also tun werden, müssen wir sicherstellen, dass es drei Möglichkeiten gibt. Und das haben wir ausgewählt. Die erste Option ist der Name Ihres Projekts. Zweitens stellt sicher, dass die leere Vorlage ausgewählt ist. Man kann diesen kleinen Kreis sehen, ist da, blauer Kreis innerhalb dieses blauen Kreises, weißes Häkchen ist da. Dies bedeutet, dass diese Vorlage ausgewählt ist. Nennen Sie das Projekt, und dann müssen Sie sicherstellen, welche Version von Bootstrap Studio wir verwenden. Die Standardauswahl ist 5. In der vorherigen Version sind 4.6-Widgets ausgewählt. Vorherige Version bedeutet 5.6.2 von 5.6.3, die Standardauswahl ist Bootstrap Five. Die meisten Schüler sind hier verwirrt, dass das Bootstrap Five und Bootstrap Studio 5.6.4 ist. Also lass es mich dir sagen. Bootstrap ist ein Framework und Bootstrap Studio ist eine Software, in der wir arbeiten. Wir haben die neueste Version des Bootstrap-Frameworks ausgewählt , also 5 , eigentlich ist es 5.1, aber das Untertauchen wird hier nicht erwähnt. Also wählen wir 5 aus, die standardmäßig ausgewählt ist. Dann nennen wir unser Projekt irgendetwas. Nennen wir es als Test eins. Und dann klicke ich auf Create. Sobald ich auf Create klicke, sind wir jetzt im echten Bootstrap-Studio. Jetzt haben wir verstanden, wie wir loslegen können. Im nächsten Video werden wir die Benutzeroberfläche von Bootstrap Studio verstehen . Wir sehen uns also im nächsten Video. 3. Benutzeroberfläche: In diesem Video werden wir die Benutzeroberfläche von Bootstrap Studio verstehen . Wir werden von dieser Ecke aus beginnen. Hier haben wir zwei Panels. erste ist ein Studio-Panel und dann ein Online-Panel, aber wir nennen es nicht als Online-Panel. Wir nennen es einfach als Subversion des Studio-Panels. Dies ist ein Studio-Panel. Im Studio-Panel haben wir zwei Dinge. Einer ist Studio und eins ist online. Was genau Studio IIS. Studio ist der Ort, an dem Sie alle Komponenten finden , die in Bootstrap Studio vorhanden sind, vorinstalliert sind. Das bedeutet, dass Bootstrap Studio nur wenige Komponenten und wenige HTML-Elemente enthält , die Komponenten und HTML-Elemente, die Sie im Studio-Panel finden , Sie als Benutzer finden, der erste Ordner ist UI. Da verwende ich Bootstrap Studio von so vielen Tagen. Der Benutzerordner ist also für mich da. Früher. Sie erhalten diesen Ordner auch wenn wir mit dem Hochladen der Komponenten beginnen. Studio-Panel ist der Ort , an dem Sie die Komponenten und Elemente für die Gestaltung Ihrer Website finden . Die zweite Sache ist online. Online-Panel ist, wie Namen vorgeschlagen haben, die Komponenten, die nicht im Studio-Panel vorhanden sind. Und Sie möchten diese Komponenten und die Komponenten, die von anderen erstellt werden, und laden Sie sie in die Community hoch, bootstrap Studio Community, die Komponenten, die Sie im Online-Panel finden , und klicken Sie einfach auf Online. Und hier sehen Sie die angesagtesten Komponenten. Dann haben wir einen Dunkelmodus-Schalter. Ich denke, diese Komponente hilft uns, die Website aus dem Dunkelmodus und dem Lichtmodus zu wechseln. Dies sind also ein paar Trendkomponenten, dann haben wir wenige Let Us Komponenten , die von der Community erstellt wurden. All diese Dinge sind da. Dies ist das Online-Panel, und dies ist ein Studio-Panel direkt unter der Studioparallele, das ist die Übersicht. Sie sehen die Übersicht unserer Website basierend auf einer Struktur unserer Website, Sie sehen die Übersicht der Website. Sobald wir mit der Gestaltung der Website beginnen, werden Sie verstehen, wie Sie das Übersichtsfenster sehr effizient nutzen können. Links auf unserem Bildschirm haben wir zwei Panels, die das Studio und die Übersicht darstellen. In der Mitte haben wir wieder zwei Panels. Eine davon ist die Bühne, was man in der Mitte sieht, das ist der weiße Bildschirm, der inszeniert wird. Und direkt unter der Bühne haben Sie das Editor-Panel. Sie können den HTML-Text hier und einen Style-Text sehen. Oh ja. Sie müssen nur irgendwo dazwischen klicken. Sobald Sie dort klicken, sehen Sie, der Texteditor jetzt vor Ihnen befindet. Sie sehen den gesamten HTML-Code, Bootstrap Studio für Sie schreibt. An diesem Ort ist dies der Stil an diesem Ort. Sie sehen das gesamte CSS , das bereits zurückgegeben wurde oder Sie möchten es direkt unter diesem HTML-Bereich schreiben, Sie haben die Attribute. Sobald Sie auf diese Attribute klicken, sehen Sie die Attribute über sich. Sie haben einen Schlüssel und einen Wert, den Sie eingeben müssen. Sie können nur an dieser Stelle eine ID und eine Klasse erstellen. Also lass mich dir zeigen, wie genau es aussieht. Im Übersichtsfenster wähle ich dieses Body-Tag aus. Sobald ich auf das Body-Tag klicke, sehen Sie, dass das Attributfenster vorhanden ist. Du kannst eine ID OU anrufen, du kannst hier einen Kurs anrufen. Und Sie können auch neue Schlüssel und Werte erstellen . Dies ist das CSS , das bereits aus dem Bootstrap-Framework für Sie geschrieben wurde. Sie können sehen, dass sich die Farben und alle anderen Spezifikationen bereits an diesem bestimmten Ort befinden. Canvas ist der Bereich , in dem Sie Ihr Website-Design sehen werden . Und oben im Canvas-Bereich gibt es ein paar Möglichkeiten. Lass uns das eins nach dem anderen sehen. Die erste Option ist das Vergrößern und dann verkleinern. Sie können Ihre Leinwand vergrößern und verkleinern. Dann haben wir ein Flip Canvas. Sie können die Canvas-OU drehen. Dann haben wir hier die Option An Canvas anpassen. Sobald Sie auf die Option An Canvas anpassen klicken, passt der Canvas in diesen bestimmten Bereich. Dann haben wir ein paar Anzeigeoptionen. Was Sie sehen möchten, wie Gliederraster, Showbox-Modelle und all das. Dann haben wir hier eine Größe des Displays. Die erste ist die Breite und die zweite ist die Höhe. Sie können es ändern, sobald Sie mit dem Entwerfen der Website beginnen, die Höhe der Website ändert sich je nach Länge der Website, dann haben Sie eine prozentuale Organisationseinheit und Sie haben einen kleinen Pfeil. Oh ja. Sobald Sie auf den Pfeil klicken, sehen Sie die Liste der Mobilgeräte, um zu sehen wie genau eine Website auf diesem bestimmten Handy aussehen wird . Dann haben wir hier eine Seitenauswahloption. Dies ist der Ort, an dem Sie die Seite auswählen oder eine neue Seite erstellen können, wenn Sie eine Mehrfachseite haben Mindestens die Seite wird in diesem bestimmten Bereich angezeigt, dann können Sie einfach auf neue Seite klicken, um eine neue zu erstellen seite. Wir haben die andere Möglichkeit, auch eine neue Seite zu erstellen. Wir werden sehen, dass wir auch in diesem Video erst danach sechs Displaygrößen haben , in denen wir sehen können, wie genau es auf unserer speziellen Displaygröße aussieht. Der erste hier drüben ist Double XL, das ist extra, extra großer Bildschirm. Dann haben wir Excel-Bildschirm, das ist ein extra großer Bildschirm. Dann haben wir einen großen Bildschirm, den wir als LG bezeichnen. Dann haben wir eine mittlere Gerätegröße , die im Bootstrap-Studio MD ist. Dann haben wir eine kleine Größe es gibt SM. Dann haben wir eine extra kleine Größe, die Zugang ist. Wir haben also sechs Gerätegrößen die speziell für Bootstrap-Studio entwickelt wurden. Und basierend auf diesen Gerätegrößen funktioniert das Gittersystem. Was ist das Netzsystem? Und alles was wir in den späteren Videos sehen werden. Das ist die Leinwand. Das Projekt, das Sie ausgewählt haben. Der Name des Projekts kommt hier rüber, das ist der erste Test. Und direkt nach dem Namen, wenn Sie eine Sternmarke sehen, bedeutet dies, dass dieses Projekt noch nicht gespeichert ist. Stellen Sie sicher, dass Sie das Projekt speichern , da es sich um ein erstes Testprojekt handelt. Darin werden wir nichts tun. Also speichere ich dieses Projekt nicht, aber wenn du willst, kannst du es speichern. Auf der rechten Seite unseres Bildschirms haben wir zwei Panels. Einer ist Optionspanel, und eins ist Panel entworfen. Im Optionsfeld haben wir drei Teilabschnitte. Eine davon ist das Aussehen, eine ist Optionen und eine davon ist Animation. Im Darstellungsfenster können Sie das Aussehen der Komponente oder des Elements ändern . Sie können das Layout, die Schriftart, den Hintergrund, die Grenzen und alle Lead-Dinge ändern . Sie können auch sehen, wie genau der Rand und das Auffüllen einer bestimmten Komponente oder einem Element zugewiesen sind. Danach haben wir Optionen-Panel. Sie basieren auf den Komponenten. Die ersten beiden Optionen werden sich ändern. Letzte der Dinge wird bleiben. Aber wenn Sie den Körper auswählen , gibt es nur diese beiden Optionen. Das ist die Textoption und die Flexbox. wir jedoch mit dem Entwerfen der Website beginnen, ändern sich die Optionen, wenn wir die verschiedenen Komponenten oder Elemente auswählen , basierend auf den Komponenten, die wir im Optionsfenster ausgewählt haben , wir werden so viele Möglichkeiten haben, die Komponenten zu modifizieren. Dann haben wir Animations-Panel hier drüben. Dies wird verwendet, um eine bestimmte Komponente oder ein bestimmtes Element zu animieren . Direkt darunter haben wir ein Design-Panel, in dem unsere projizierten Ressourcen systematisch angeordnet sind. Wir haben ein paar Ordner darin. Der erste Ordner ist Seite. Wenn Sie auf diesen bestimmten Pfeil klicken, sehen Sie, dass die Seite index.html vorhanden ist. Wenn Sie ein neues Projekt in Bootstrap Studio öffnen, ist dies eine Standardseite, die Sie erhalten, und Sie können diese Seite nicht löschen. Wenn Sie eine neue HTML-Seite erstellen, diese Seite automatisch in diesem Pages-Ordner. Danach haben wir einen Style-Ordner, in dem sich die SSS- und SAS-Dateien in diesem Ordner befinden. Dann bleibt JavaScript, die gesamte JavaScript-Datei in diesem Ordner. Dann haben wir Schriften. Alle Schriftarten bleiben darin und die Bilder bleiben darin. Sie können auch einen Unterordner in diesem bestimmten Ordner erstellen . Sie können die Dateien jedoch nicht von einem Ordner in einen anderen Ordner verschieben. Dies bedeutet, dass Sie die Punkt-CSS-Datei nicht in eine HTML-Datei verschieben können. Die STL-Datei verbleibt nur im Ordner Pages im Ordner Pages, Sie können mehrere Ordner erstellen und Sie können die HTML-Datei in diese Ordner verschieben, die sich im Ordner Pages befinden. Pgs ist also ein übergeordneter Ordner. Und im Ordner Pages können Sie mehrere Ordner erstellen. Das ist es, was das Design-Panel oben erleichtert, wir haben hier nur wenige Optionen , die neu sind. Wir können hier ein neues Design erstellen, dann öffnen, ein neues Design erstellen und dann die Exporteinstellungen ihrer Einstellungen speichern . Gibt es, die Option „Rückgängig machen“ ist vorhanden. Wir können unsere Website auch während des Entwurfs in der Vorschau ansehen. Wir können unsere Website auf mehreren Geräten anzeigen, indem wir einfach die IP-Adresse angeben. Das werden wir auch in den späteren Videos sehen. Die veröffentlichte Option ist ebenfalls vorhanden. Sie können das Design veröffentlichen, in dem Sinne veröffentlicht wird, dass Sie das Design auf Ihren lokalen Computer exportieren können , oder Sie können das Design von hier aus mit dem Cloudflare-Konto auf dem Server veröffentlichen . werden wir also auch in den späteren Videos sehen. Das ist also, was die Benutzeroberfläche des Bootstrap-Studios beim Entwerfen der Website, hier ist der Ort, an dem wir die meiste Zeit verbringen werden . Ich hoffe also, dass Sie die Benutzeroberfläche des Bootstrap-Studios verstehen . Und im nächsten Video werden wir sehen, wie man eine Komponente in das Bootstrap Studio-Projekt importiert. Wir sehen uns im nächsten Video. 4. Wie man Komponente importiert: In diesem Video werden wir sehen, wie Sie eine Komponente aus dem RStudio-Panel auf die Bühne oder in das Übersichtsfenster importieren . In beiden Richtungen werden wir sehen, dass dies das Studio-Panel ist. Und Sie können sehen, dass die Option „ Suchkomponenten“ OEO ist. Am Anfang, was wir tun werden, beginnen wir mit der Navbar. Wir importieren unsere Navbar hier drüben. Also tippe ich nav. Sobald ich NAB tippe, werden Sie hier einige Komponenten sehen. Das ist Nav, Navbar, Navigation sauber und all das. Wir werden die zweite Komponente verwenden, die Navbar ist. Wie importiere ich die Komponente? Es ist sehr einfach und klicken Sie einfach, halten Sie die Maus gedrückt, klicken, ziehen und ablegen in die Leinwand. Ziehen Sie die Übersicht parallel per Drag & Drop. Wenn Sie dies also im Übersichtsfenster löschen, müssen Sie das Body-Tag übergehen. Sobald Sie den meisten Zeiger oder das Körper-Tag genommen haben, sehen Sie, dass der blaue Umriss vorhanden ist. Nehmen Sie einfach den Mauszeiger hier rüber und lassen Sie den Mausklick los. Sobald Sie am meisten geklickt haben, sehen Sie sofort die Ausgabe der Komponente. Dies ist eine Komponente, die Navbar, wir als Komponente nennen, da wir in dieser Komponente mehrere andere Komponenten haben. Eine davon ist Navbar, Navbar Marke innen, dann haben wir Navbar-Kollaps den Navbar-Kollaps umschalten . Wenn wir einen Navbar-Kollaps öffnen, haben wir wieder eine neue Komponente, die nav ist. Dann können wir das auch öffnen. Dann sehen wir einen Navigationsgegenstand. Innerhalb des Navigationsgegenstandes sind Sie, wir haben Element. Dies ist ein Link-Element , das ein Tag ist. Um den Code zu sehen, der von Bootstrap Studio geschrieben wird, ist das der HTML-Code. Wir klicken einfach auf das Editor-Panel und wir können sehen, dass der gesamte Code für uns geschrieben wurde. Sie können sehen, dass dies das ein Tag ist , das hier ausgewählt wurde. Was Sie in diesem Übersichtsfenster auswählen, wird diese bestimmte Zeile in diesem Texteditorbereich ausgewählt. Und alles, was Sie auswählen, Ihre, diese bestimmte Komponente wird im Übersichtsfenster ausgewählt. Wählen wir diesen Körper hier aus. Sobald ich also auf den Körper klicke, siehst du, dass der Körper jetzt in beiden Bereichen ausgewählt ist. Dies ist der Ort, an dem Sie den HTML-Code sehen können, wie genau der HTML-Code geschrieben wird. Sie können sehen, dass es sehr professionell geschrieben wurde . Alle Ausrichtungen und alle Abschnitte sind sehr klar geschrieben. Wenn Sie nun etwas ändern möchten, müssen Sie nur die Komponente basierend auf der Auswahl auswählen , die Optionen und das Darstellungsfenster ändern sich und Sie haben die Freiheit, die Änderungen vorzunehmen um die Notwendigkeit vollständige Änderungen daran vorzunehmen. So importieren wir die Komponente in das Bootstrap-Studio. Es ist sehr einfach. Suchen Sie einfach nach der Komponente, wählen Sie die Komponente aus, ziehen Sie es per Drag & Drop auf der Bühne oder ziehen Sie es im Übersichtsfenster per Drag & Drop. Lass es uns noch einmal machen. Danach, was ich tun werde, komme ich einfach hierher und werde versuchen, eine neue Komponente zu importieren. Mal sehen, fertige Komponenten sind drin, kommen Sie einfach zur Benutzeroberfläche und in den Medien. Mal sehen, was genau es ist. Ich habe eine Fotogalerie. Wählen Sie diese Fotogalerie aus. Jetzt importiere ich das von der Bühne. Ich nehme einfach meinen meisten Zeiger und komme hier rüber. Sie werden sehen, dass eine blaue Linie da ist und ein kleiner Pfeil ebenfalls tot ist. Das ist also ein kleiner Pfeil. Das heißt, wenn Sie diese bestimmte Komponente hier ablegen , wird diese Komponente direkt unter dieser speziellen blauen Linie liegen. Und oberhalb der blauen Linie ist die Komponente, die wir haben, navbar. Direkt unter der Navigationsleiste, diese Lightbox Gallery. Willkommen. Sie können den Namen auch die Lightbox Gallery sehen. Dies bedeutet, dass es zeigt, dass die Lightbox Gallery in diesen speziellen Bereich kommen wird in diesen speziellen Bereich kommen sobald Sie den Mausklick loslassen. Lassen Sie uns also den Mausklick loslassen. Und jetzt können Sie sehen, dass die Lightbox Gallery da ist. Im Übersichtspanel. Sie können sehen, dass die Navbar da ist. Direkt unter der Navigationsleiste haben Sie diese Lightbox Gallery. Lassen Sie uns nun sehen, wie man eine Komponente zwischen zwei Komponenten importiert . Importieren wir diesen Parallax-Hintergrund direkt zwischen dieser Navbar und einem Abschnitt. Importieren einer Komponente zwischen zwei Komponenten ist in der Phase schwierig, aber aus dem Übersichtsfenster ist es einfach , was müssen Sie tun? Du nimmst einfach diese Komponente hier rüber. Wenn Sie diese Komponente ziehen, können Sie sehen, dass sich der Körper in einem blauen Umriss befindet. Es bedeutet, wenn ich loslasse , wird es in den Körper gelangen und es wird direkt unter den Lightbox-Bereich gehen . Aber wir möchten, dass diese Komponente zwischen der Navbar und dem Abschnitt liegt. Ich nehme einfach meinen Mauszeiger über ein Jahr und behalte ihn einfach hier drüben. Sie können eine horizontale Linie zwischen der Navigationsleiste und einem Abschnitt sehen. Abschnitt ist Lightbox Gallery. Wenn Sie diese horizontale Linie sehen, bedeutet das, dass wenn ich diese Komponente hier freigebe, sie zwischen der Navbar und der Lightbox Gallery liegt. Und genau das wollen wir tun. Lassen Sie einfach meinen Mauszeiger los. Und jetzt können Sie sehen, dass sich dieser Parallax-Hintergrund jetzt zwischen der Navbar und der Lightbox Gallery befindet. Sie können sehen, dass dies eine Navbar ist. Dies ist Parallax-Hintergrund. Und dann haben wir eine Lightbox Gallery. In diesem Stadium können Sie sehen, wie genau die Website aussieht. Im Übersichtsfenster sehen Sie die Übersicht der Website. Jetzt können Sie in den Stilen sehen die dieses CDN importiert hat. Die Lightbox Gallery CSS-Datei ist ebenfalls vorhanden. Ich hoffe, Sie verstehen, wie Sie die Komponenten in Bootstrap Studio importieren . Im nächsten Video werden wir sehen, wie die Komponenten bearbeitet werden. Wir sehen uns also im nächsten Video. 5. Bearbeiten der Komponente oder Element: Okay, jetzt haben wir verstanden, wie man die Komponenten importiert. Und in diesem Video werden wir sehen, wie man die Komponenten bearbeitet. Um die Komponenten zuerst zu bearbeiten, wählen wir die Komponente aus. Wir können es entweder auf der Bühne oder aus dem Übersichtsfenster auswählen . Die Auswahl der Komponente in einer Phase ist einfach. Wenn ich meinen Mauszeiger auf ein Element oder eine Komponente bewege, können Sie den Namen der Komponente hier sehen. Und Sie können auch einen blauen Umriss sehen, wie einen blauen Rand hier drüben. Dies ist der Bereich dieser bestimmten Überschrift. Ich werde dies auswählen, sobald Sie sehen können, eine Reihe von Icons hier drüben. Dieses erste Symbol bedeutet „Verschieben“. Klicken und ziehen Sie einfach an eine beliebige Stelle. Sie können die Komponente verschieben, Sie können dieses bestimmte Element verschieben. Dann haben wir einen Pfeil nach oben. Es bedeutet, Elternteil auswählen. Sobald Sie auf dieses bestimmte Symbol klicken. Sie können in der Übersichtsparallel sehen, dies ist die Überschrift , die wir ausgewählt haben. Nun ist das Elternteil für diese bestimmte Überschrift dieses Verhängnis. Und wenn ich auf diesen Pfeil namens Elternteil auswählen klicke, sehen Sie jetzt, dass das Angebot ausgewählt ist. bedeutet, wenn Sie auf diesen Pfeil klicken, wird das übergeordnete Element dieser bestimmten Komponente oder eines Elements ausgewählt . Als Nächstes haben wir edit. Das heißt, wenn Sie auf diese Bearbeitung klicken, können Sie den Text hier bearbeiten. Anstelle dieser Lightbox. Was Sie tun können, können Sie das Foto hier binden und einfach die Eingabetaste drücken. Und du kannst jetzt sehen, dass es sich um eine Fotogalerie handelt. Dies ist der Ort, an dem Sie die Komponente oder den Text bearbeiten können . Irgendwas. Als nächstes ist Duplikat. Wenn Sie ein Duplikat dieser bestimmten Komponente oder einen Text erstellen möchten , können Sie es duplizieren. Diese Option ist sehr nützlich, wenn Sie die Komponente mit allen CSS und Stilen und unabhängig von den Änderungen, die wir vorgenommen haben, duplizieren mit allen CSS und Stilen und unabhängig von den möchten. Und Sie möchten, dass all diese bearbeiteten Stile in einer neuen Komponente enthalten sind, Sie können sie einfach duplizieren. Dann haben Sie die Möglichkeit der Höhe. Wenn Sie darauf klicken, können Sie diese Komponente einfach ausblenden. Sie können sehen, dass die Komponente noch hier ist, aber jetzt versteckt ist. Und wie zeigt man diese Komponente wieder an. Dazu müssen Sie zum Übersichtsfenster gelangen, mit der rechten Maustaste klicken und auf Anzeigen klicken. Eine andere Komponente ist wieder da. Wenn Sie die Komponente löschen möchten, klicken Sie einfach hier auf dieses Löschsymbol und dann können Sie die Komponente löschen. Genauso wie es mit dem Bild passt. Wenn Sie dieses Jahr auswählen, können Sie sehen, dass die Option Verschieben vorhanden ist. Wählen Sie dann übergeordnete Option aus. Gibt es Duplikat ist ihre Höhe, ist da, löschen, ist da. Die Bearbeitungsoption ist nicht vorhanden, da das Bearbeiten des Bildes nicht das ist, was wir in Bootstrap Studio tun können, aber wir können das Bild ändern. Wie ändere ich das Bild? Doppelklicken Sie entweder hier rüber und Sie können sehen ein Dialogfeld „Bild auswählen“ vor sich kommt und was auch immer die Bilder, die in diesem speziellen Projekt importiert werden diesem speziellen Projekt importiert werden vor Ihnen liegen in diesem speziellen Bereich. Wenn Sie eine Ordnerstruktur haben werden die Ordner auch über Sie kommen. Sie können eines dieser Bilder auswählen. Sobald Sie das Bild ausgewählt haben. Und wenn Sie auf Okay klicken , wird dieses Bild an diesem bestimmten Ort erscheinen. Auch hier können Sie einfach doppelklicken und das Bild ändern. So können wir das Bild ändern. gleiche Weise können wir es über das Übersichtsfenster machen. Wählen Sie einfach dieses Bild-Tag aus. Und wenn Sie hier gleich doppelklicken , wählen Sie ein Bilddialogfeld aus, das vor Ihnen erscheint. Dies sind die wenigen Optionen und Techniken , mit denen Sie die Komponente bearbeiten oder das Bild und all das Bild ändern können. All diese Option werden wir auch in den kommenden Videos detailliert sehen . Und im nächsten Abschnitt hoffe ich, dass Sie verstehen, wie Sie die Komponente oder ein Element in diesem Video bearbeiten . Wenn nicht, können Sie dieses Video einfach wieder abspielen. Dies wird das Ende dieses Abschnitts sein. Im nächsten Abschnitt sehen wir das Optionsfeld im Detail und wir werden verstehen, wie die Optionen-Panel einhaken. Wir sehen uns also im nächsten Abschnitt. 6. Layout: Bevor wir mit diesem Video beginnen, müssen wir ein Design öffnen , das ich für Sie erstellt habe. In diesem Design werden wir die Änderungen vornehmen und das Erscheinungsfenster dafür verstehen, Sie müssen den Anhang, die Ressourcendateien in der Ressourcendatei finden . Der zweite Ordner sind BSS-Dateien. Innerhalb von CSS-Dateien gibt es einen weiteren Ordner für den Anfang. Sie müssen die erste Datei öffnen, die beginnt , Punkt-BS-Design. Dies ist die Datei, die ich ein grobes Design erstellt habe. In diesem groben Design werden wir das Optionsfeld aus den Darstellungsoptionen und Animationen verstehen , indem wir dieses Design verwenden. Beginnen wir mit der ersten Option im Darstellungsfenster. Dafür muss ich eine beliebige Komponente auswählen. Also werden wir mit diesem Abschnitt beginnen. Ich wähle diesen Abschnitt aus. Sobald ich diesen Abschnitt ausgewählt habe, sehe ich das Aussehen und die Optionen innerhalb des Erscheinungsbildes. In diesem Video werden wir Layouts sehen. In Layouts haben wir vier Optionen , also Breite, Höhe, Rand und Polsterung. Und bei all diesen Optionen haben wir diesen Pfeil vor all diesen Optionen . Wenn Sie auf diesen Pfeil klicken, sehen Sie die Unteroptionen mit minimaler Breite und maximaler Breite. Danach haben wir in der Höhe Mindesthöhe und maximale Höhe. Im Rand haben wir Marge, oberer Rand, rechten Rand, unterer Rand links. Beim Auffüllen haben wir Polsterung, Top, Polsterung, Polsterung unten und Polsterung links. Was genau das bedeutet. Wenn Sie die Breite hier ändern, die Breite der jeweiligen Komponente wird die Breite der jeweiligen Komponente geändert. Mal sehen. Ich habe diesen Abschnitt ausgewählt und Sie können den blauen Umriss hier sehen. Dies bedeutet, dass dies der Abschnitt ist , den wir ausgewählt haben. Wenn ich die Breite vergrößere, können Sie sehen, dass die Breite der Komponente zunimmt. Der Text und die Schaltflächen bewegen sich nach rechts. Warum? Weil ich die Breite vergrößere. Und die Breite nimmt nur auf der rechten Seite zu. In diesem speziellen Abschnitt ist die Breite, die die Breite vergrößert, nicht erforderlich. Also machen wir es einfach als Standard. Jetzt wissen Sie nicht, was hier die Standardnummer vier ist, wir haben zwei Möglichkeiten. Wenn Sie nur die Breite geändert haben, können Sie einfach auf Alle zurücksetzen klicken alle Optionen im Layoutbereich zurücksetzen. Oder wählen Sie dies einfach aus, drücken Sie die Rücktaste und drücken Sie die Eingabetaste, und es wird auf die ursprüngliche Breite zurückkehren. Von hier aus können Sie die Breite erhöhen. Sie können die Mindestbreite einer bestimmten Komponente und eine maximale Breite einer bestimmten Komponente angeben. Als nächstes haben wir die Höhe. Ähnlich wie bei der Breite. Wir können die Höhe erhöhen. Jetzt können Sie sehen, dass die Höhe zunimmt. Du siehst jetzt, dass die blaue Linie hierher kommt. Zuvor war es irgendwo hier. Auf diese Weise können Sie die Höhe einer Komponente erhöhen. gleiche Weise können wir die Mindesthöhe und die Mindestbreite ändern . Wir werden diese speziellen Optionen sehen , wenn wir mit der Gestaltung der Website beginnen. Jetzt haben wir Marge. Marge. Wir können es in alle vier Richtungen ändern oder wir können es einmal ändern. Die erste Option, das ist nur Marge. Wenn wir die Option hier ändern, gilt sie für ganz oben rechts, unten links. Mal sehen. Wenn ich zehn mache , erhalten alle vier Unteroptionen den Rand von zehn Pixeln. Jetzt können Sie sehen, dass die Marge auch da ist. Sie können sehen, dass eine leichte Lücke vorhanden ist , was bedeutet, dass die Marge angewendet wird. Wenn Sie sich nur auf eine bestimmte Marge bewerben möchten, auf einen bestimmten Bereich. Sie können also einfach auf diesen Pfeil klicken und dann den Wert des oberen Randes ändern. Nehmen wir an, wenn Sie den oberen Rand ändern möchten, können Sie einfach den Wert der oberen Marge ändern. So wie das. Alle anderen drei bleiben auf 0 und der einzige, der die Drehmomentmarge ist, wird sich ändern. So können Sie die Marge ändern. gleiche Weise können Sie mit dem Padding spielen. Wenn Sie das Auffüllen aller Richtungen gleichzeitig ändern möchten , können Sie den Wert in der Auffülloption ändern. Sie können einfach runtergehen und die Polsterung einzelner Optionen ändern . Standardmäßig ist die Polsterung oben, Polsterung unten 50 Pixel und rechts und links 0. Wenn Sie die rechte Polsterung und die linke Polsterung ändern möchten, können Sie den Wert über u ändern. Dies ist es, was wir in Layoutabschnitt, Breite, Höhe, Rand und Polsterung haben . Im nächsten Video sehen wir den Schriftbereich. Wir sehen uns also im nächsten Video. 7. Schriftarten: In diesem Video sehen wir den Schriftbereich. Mal sehen wir uns die Optionen in dieser Schriftart an. Zuerst haben wir Farbe. Das bedeutet, dass wir die Farbe der Schriftart ändern können. Dann haben wir Schriftgröße. Und Sie können sehen, dass es keinen Pfeil vor dem Wort Farbe gibt. Es bedeutet, dass es keine Unteroptionen gibt. Es ist nur eine Option , die Farbe ist. Danach haben wir fremde Größe vor den ausländischen Websites, wir haben diesen Pfeil. Wenn Sie auf diesen Pfeil klicken, sehen Sie Zeilenhöhe und Zeilenabstand. Dann haben wir eine ausländische Familie. Wir können die Schriftstile ändern. Und wieder haben wir den Pfeil hier drüben. Wenn Sie auf den Pfeil klicken, können Sie sehen font-weight und font-style vorhanden sind. Und endlich haben wir eine Ausrichtung. Wir haben also ein paar Ausrichtungen hier drüben. Zuerst ist einer links, dann zentriert, dann rechts und dann rechtfertigen. Lass uns eins nach dem anderen sehen. Wenn wir eine Änderung an der Schriftart vornehmen möchten, wählen wir diese Schriftart hier aus, die hervorgehoben ist. Und jetzt werden wir die Farbe der Schriftart ändern. Es gibt nur wenige vorgefertigte Voreinstellungen der von Bootstrap angegebenen Farbe und diese vorgefertigte voreingestellte Farbe ist nur OU. Ab sofort können Sie hier nur fünf Farben sehen , aber sie sind mehr. Sie klicken einfach auf diese weitere Option hier drüben, das ist die letzte. Du siehst die drei Punkte hier drüben. Klicken Sie einfach darauf. Sie können alle anderen Farben in dieser speziellen Voreinstellung sehen. Sie müssen also nur auf eine beliebige Farbe klicken, und das war's. Die Farbe ist jetzt geändert, das war schwarz, jetzt ist es rot. Wenn Sie eine bestimmte Farbe wünschen , die nicht in dieser speziellen Palette enthalten ist, dann können Sie einfach auf diese Farbschaltfläche klicken diese Farbschaltfläche sehen, dass eine rote Farbe hier ist. Sie können einfach darauf klicken. Dann kommen Sie zu dieser speziellen Farbauswahloption. Sie haben vier verschiedene Unterfelder , in denen zuerst ausgewählt ist. Dies ist der Ort, an dem Sie die Farbe auswählen und dann entwerfen können. Nur wenige Farbpaletten sind hier leicht verfügbar. Dann Favoriten, die Lieblingsfarbe, die Sie hinzugefügt haben. Dann haben wir eine Bibliothek. Die Bibliothek ist wie einfarbig mit Unterscheidungen. Das ist gelb. Dann bewegen wir uns zu rot, pink, blau, grün. Alle Farben sind hier in der Bibliothek verfügbar , die wir auswählen werden. Hier haben wir die Farbauswahloptionen für uns bereit. Unten haben wir eine UE-Linie, das ist HUB du Linie, das heißt, wir haben alle Farben hier drüben. Ziehen Sie einfach mit der Maus auf diese bestimmte Zeile. Und die Farbe, die Sie möchten, lassen Sie einfach den meisten Punkt diesem bestimmten Bereich frei. Dann erhalten Sie die Schattierungen der Farben oder Sie können einfach einen beliebigen Farbton auswählen. Das ist der Punkt. Du siehst eine Kiste hier drüben. Dieses Feld bedeutet, dass diese bestimmte Farbe ausgewählt ist. Sie können von hier aus eine beliebige Farbe auswählen. Sie müssen sicherstellen, welche Farbe Sie haben möchten. Sobald du die Maus bewegst. Von hier aus sehen Sie die Live-Vorschau in diesem speziellen Bereich. Es hilft Ihnen zu verstehen, welche Farbe Sie wünschen und welche Farbe für Ihr Design gut aussieht. Ich wähle einfach diese Farbe aus. Und genau darunter haben wir hier einen Alpha-Kanal , der die Deckkraft der Schrift darstellt. Sie können die Deckkraft einfach reduzieren , um sie transparent zu machen. Und das ist die Opazität von 100%, und dies ist die Deckkraft von 0%. Damit kannst du auch spielen. Wenn Sie eine bestimmte Farbe auswählen möchten , die bereits in Ihrem Projekt verfügbar ist , haben Sie hier ein Pipettenwerkzeug. Klicken Sie einfach auf das Pipette-Werkzeug und Sie sehen, dass ein anderer Cursor da ist. Du siehst einen Kreis. Und in diesem Kreis hast du Box. In der Mitte hast du die rote Kiste. Dieses Feld ist der Bereich, in dem Sie die Farbe auswählen. Sobald Sie also hierher kommen, sehen Sie, dass sich jetzt ein rotes Feld in diesem blauen Farbbereich befindet. Wenn Sie diese blaue Farbe getragen haben, klicken Sie einfach auf diese blaue Farbe und den Boom, die Auswahl wird automatisch in diese bestimmte blaue Farbe verschoben. Und wenn Ihnen diese blaue Farbe gefallen hat, klicken Sie einfach auf Auswählen und es ist fertig. diese Weise ändern Sie die Farbe. Sie wählen die Farbe aus. Danach haben wir eine Fremdgröße. Wenn Sie die Fremdgröße ändern möchten, können Sie einfach die Fremdgröße von hier aus ändern. Standardmäßig war die Größe 32 und Sie können die Fremdgröße ändern. Innerhalb ausländischer Standorte haben wir zwei Optionen, die Zeilenhöhe sind. Wenn Sie die Zeilenhöhe ändern möchten, können Sie auch die Zeilenhöhe ändern. Und wenn Sie den Buchstabenabstand ändern möchten, können Sie auch den Buchstabenabstand ändern. So können Sie den Buchstabenabstand ändern. Wenn Sie diese Optionen wieder auf den Standardstatus zurücksetzen möchten, ist ausgewählt und drücken Sie die Rücktaste und die Eingabetaste, wählen Sie die Rücktaste und geben Sie ein, wählen Sie die Rücktaste aus und geben Sie ein. Und das ist jetzt in der Standardgröße. Danach haben wir eine Familie gegründet. Wir können die Schriftart von dir ändern. Standardmäßig können Sie die Schriftart sehen. Gibt es ein Alpha-System, einige Ausländer sind es, einige Schriften werden angewendet. Um die Schriftart zu ändern. Sie klicken einfach auf diese Pfeil-OU und Sie sehen die Option Schrift hinzufügen. Gibt es? Klicken Sie einfach auf die Option Schrift hinzufügen und die geringste Schriftart wird vor Ihnen liegen. Es gibt so viele Foren. Sie können das Formular ab Jahr durchsuchen , da es so viele Formulare gibt. Im Moment, was ich tun werde, wähle ich einfach jede zufällige Schriftart aus, die ich ausfüllen werde. Es wird gut sein. Ich gehe einfach mit, ich gehe einfach mit diesem. Und wie schalte ich dieses Telefon ein? Sie müssen nur auf dieses Kontrollkästchen klicken. Sobald es aktiviert ist, klicken Sie einfach auf Speichern. Jetzt wird die Schriftart importiert. Sie können in den Schriftarten im Design-Panel sehen, dass die Schriftart bereits hier ist. Zuvor war es leer. Jetzt ist die Schrift da. Und jetzt möchten wir das Formular ändern, die Komponente oder das Element auswählen, zur fremden Familie kommen, auf den Pfeil klicken und jetzt können Sie die Schriftart sehen. Ist da. Klicken Sie einfach auf diese Schriftart und boomen Sie, die Schriftart wird geändert. die gleiche Weise können Sie das Schriftgewicht ändern. Sie können das Fremdgewicht von normal auf fett erhöhen. Es gibt zwei Möglichkeiten, normal und fett. Und im Font-Style haben Sie andere Optionen, die normal sind, kursiv und all die Dinge. Wenn ich also auf Data Lake klicke, wird sich das Forum in einen kursiven Stil umwandeln. Orals bringen wieder zur Normalität. Das sind sie in ausländischer Familie. Und jetzt Ausrichtung. In der Abstimmung haben wir einen Trick hier drüben. Diese Ausrichtung ist bereits zentriert, aber hier können Sie sehen, dass die zentrale Ausrichtung nicht ausgewählt ist. Wenn ich auf die linke Ausrichtung klicke, wird die Schrift nicht zur linken Ausrichtung gehen. Der Grund dafür ist, dass die gebildete Ausrichtung im Optionsfeld gesteuert wird. Wenn ich zum Optionsbedienfeld gehe, können Sie sehen, dass die Ausrichtung zentriert ist. Wenn die Ausrichtung dieser bestimmten Schriftart durch das Optionsbedienfeld gesteuert wird, wird diese nicht geändert, wenn Sie Änderungen an den Beweisen vornehmen . Es ist sehr üblich, dass Sie beim Entwerfen der Website, wenn Sie die Schriftausrichtung ab Jahr ändern und wenn sich die Ausrichtung nicht ändert, nicht wütend werden. Gehe einfach zum Optionenbedienfeld und ändere die Ausrichtung von dir. Im nächsten Abschnitt kommen wir zum Optionenbedienfeld, aber lassen Sie uns das Erscheinungsbildschirmjahr zuerst vervollständigen. So steuert der Farmabschnitt die erste Ostfarbe, Sie können die Farbe ändern, dann die fremde Größe als fremde Familie und dann die Ausrichtung. Es ist sehr einfach, dass wir, ohne den Code zu schreiben , die meisten Dinge verketten können. So erleichtert der Formularabschnitt. Und im nächsten Video werden wir den Hintergrund unter der Epidermis sehen. Wir sehen uns also im nächsten Video. 8. Hintergrund: Und in diesem Video werden wir etwas über den Hintergrund sehen. Im Hintergrund haben wir drei Hauptoptionen. erste Option ist Bild hinzufügen, dann haben wir einen Farbverlauf hinzugefügt, und endlich haben wir BG. Bg ist nichts anderes als Hintergrund. Die kurze Form des Hintergrunds ist BG Add Gradient. Und bg-Farbe bezieht sich nur auf Farben. Und fügen Sie ein Bild in dem Sinne hinzu, dass wir das Bild im Hintergrund hinzufügen können. Was wir also tun werden, anstatt geradeaus zu gehen , werden wir rückwärts sehen, das bedeutet, dass wir zuerst die Hintergrundfarbe sehen werden. Dann werden wir einen Farbverlauf hinzufügen sehen. Und endlich werden wir Bild hinzufügen sehen. Die Hintergrundfarbe ist so ähnlich wie Farben in der Schriftart. Der einzige Unterschied wird sein diese spezielle Option ändert. Es wird eine Farbe auf den Hintergrund des jeweiligen Objekts anwenden . Was genau ist es, Mal sehen. Gleich wie Farbe. Wir haben eine Themenfarbe, die da ist. Wir können es hier sehen. Klicken Sie einfach auf einen beliebigen Hintergrund. Da dies wie eine leichte rote Farbe ist, versuchen wir, dem Hintergrund eine schwarze Farbe zu verleihen. Das ist also eine schwarze Farbe, aber das ist kein komplettes Schwarz. Dies ist eine Klasse oder Dunkelgrau. Ja, es ist „Es steht so grau dunkel“ geschrieben. Sobald ich auf diese Farbe klicke, siehst du jetzt, dass die Hintergrundfarbe mit dieser Farbe gefüllt ist. Dies ist die Hintergrundfarbe. Wenn Sie eine andere Farbe wünschen, eine bestimmte Farbe, die nicht in dieser bestimmten Farbpalette enthalten ist , müssen Sie nur auf diese Farbauswahl klicken optionales Jahr. Wechseln Sie anstelle von Design zu Auswählen wählen Sie eine bestimmte Farbe aus, die Sie möchten. Nehmen wir an, ich möchte diese bestimmte Farbe , bei der der rote dB-Wert 384041 beträgt. Und ich werde das häufig benutzen, nur zum Beispiel, als würde ich es häufig benutzen, also werde ich es in den Favoriten setzen. Und jetzt habe ich zwei Farben im Versäumnis. Einer ist für den Text und einer ist für den Hintergrund. Jetzt klicke ich auf Auswählen. Das war's. So wenden Sie die Hintergrundfarbe an. Du fragst mich vielleicht was, wenn ich der gesamten Seite eine Hintergrundfarbe geben möchte ? Ja, einfach. Wählen Sie das Körper-Tag und ändern Sie die Hintergrundfarbe. Dafür. Ich zeige dir, wie genau es ist. Ich wähle das Körper-Tag aus, den Körper im Sinne, dies ist eine vollständige Webseite. Gleich von oben. Dieses Ende der Seite ist ein Text. Dieses Körpertag wähle ich aus. Ich komme zur Hintergrundfarbe und verwende nur diese Farbe. Ich klicke einfach auf diese Farbe. Und das war's. Die Körperfarbe wird geändert. Warum ändert sich dieser Bereich nicht? Der Grund dafür ist, dass es bereits eine Hintergrundfarbe hat. Wie können wir diese bestimmte Farbe entfernen, wie wir eine weiße Farbe entfernen können. Wir haben hier drüben keine Nullfarbe. zeige ich dir auch. Was ich jetzt tun werde, werde ich diesen bestimmten Bereich auswählen, das heißt Abschnitt, dieser befindet sich direkt unter der Navbar. Wir haben diesen Abschnitt. Ich wähle diesen Abschnitt aus. Und jetzt können Sie sehen, dass die Hintergrundfarbe des Abschnitts dieses speziellen Abschnitts Grundy fünf, fünfundzwanzig, fünfundzwanzig, rot, grün und blau bei fünfundzwanzig ist fünfundzwanzig, fünfundzwanzig, rot, . Fünfundzwanzig, fünfundzwanzig. Es bedeutet, dass es eine weiße Farbe hat. Klicken Sie auf diese Farbauswahl. Gehe zur Auswahl, gehe zu Auswählen. Und jetzt ist diese Deckkraft das Richtige. Ich sagte Ihnen, das ist die Transparenz hier, die Alpha ist. Bring das Alpha auf 0 runter. Sobald ich dieses Alpha auf 0 gebracht habe, hat es jetzt eine Nullfarbe, keine Farbe für diesen bestimmten Abschnitt. Sie können jetzt sehen, dass RGBA fünfundzwanzig, fünfundzwanzig, zwanzig, aber der Alpha ist 00 im Sinne Z, um eine 100% ige Transparenz zu vollenden. Wenn wir nun eine Farbverlaufszutat im Sinne einer Mischung aus zwei Farben wollen, wenn wir diese bestimmte Option wollen, dann werden wir diese Option verwenden, die als Gradient bezeichnet wird. Was ich tun werde, anstatt den Farbverlauf hier zu setzen, wähle ich den zweiten Abschnitt aus, also das horizontale Projektjahr. Wir werden den Gradienten anwenden. Okay, also scrolle ich es einfach nach unten. Mal sehen, wie es genau gelaufen ist, es ist okay. Sie können diese blaue Farbe hier sehen, die blaue Linie hier drüben. Dies ist also das Ende des Abschnitts. Dieser Teil ist insbesondere der Teil, unser zweiter Abschnitt ist. Wir projiziert nur horizontal. Wir werden einen Farbverlauf hinzufügen. Was ich tun werde, klicke ich auf Farbverlauf hinzufügen. Sobald ich auf Farbverlauf hinzufügen klicke, sehen Sie, dass die Hintergrundfarbe nicht transparent ist, sie ist vollständig transparent. Okay? Jetzt ist die Option „Verlauf“ aktiviert. Jetzt können Sie oben sehen, dass wir schwarze Farbe haben und am unteren Rand dieses bestimmten Bereichs haben wir weiße Farbe. Warum ist es Schwarz und Weiß? Nur weil die Farbverlaufsfarbe standardmäßig Schwarzweiß ist. Du siehst, dass das schwarz ist und das ist weiß. Okay, sehen wir uns die Optionen innerhalb des Farbverlaufs an. Die erste Option ist Typ. Wir haben zwei Arten von Gradienten. Einer ist der lineare Gradient , den wir gerade ausgewählt haben. Und der zweite ist ein radialer Gradient. Was ist der Unterschied zwischen linearem Gradient und radialem Gradient? Linearer Gradient bedeutet, dass er sich in einer geraden Linie bewegt. Sie können sehen, dass die schwarze Farbe da ist und die weiße Farbe hier ist. Es ist auf Reisen. Die schwarze Farbe bewegt sich in einer geraden Linie zur weißen Farbe. Dies bedeutet jedoch, dass es sich um einen linearen Gradient handelt. lineare Gradient verläuft in einer geraden Linie, aber der Winkel kann von dem Ort aus geändert werden , an dem wir im Winkel weiterfahren. Dies ist der Ort, an dem wir den Winkel ändern können. Jetzt ist es standardmäßig 180 Grad. Ich kann den Winkel ändern, damit Sie sehen können die schwarze Farbe gelb ist und die weiße Farbe noch ist. Aber auch hier reist es in einer geraden Linie. Nur der Winkel der Reise beträgt 148 Grad. Okay, das sind 148 Grad. Also bringen wir es zurück auf den Standardwert. Ich entferne es einfach. Dies ist also der Winkel des Gradienten. Sehen wir uns nun an, wie man die Farbe des Verlaufs ändert. erste ist schwarz und der zweite ist weiß. Sie können auch den Versatz dieses bestimmten Bereichs ändern. Ich werde den Versatz ändern und Sie können sehen die schwarze Farbe den zusätzlichen Raum einnimmt, nur weil ich in diesem speziellen Bereich sage , dass die schwarze Farbe den zusätzlichen Raum hat, der versetzt ist. Ich gebe den zusätzlichen Platz dafür. Dieser zusätzliche Raum wird als Offset bezeichnet. Das mache ich, also bringe ich es einfach zurück in die äußersten Ecken, beide Farben an den äußersten Ecken. Jetzt ändern wir die Farbe. Zuerst wähle ich dies aus. Sobald ich darauf klicke, sehen Sie, dass die Farboption hier ist. Jetzt. Jetzt können Sie sehen, dass die schwarze Farbe da ist. Es bedeutet, dass dies die schwarze Farbe ist. Ich klicke einfach auf diese rote Farbe Oreo, die Startfarbe ist rot. Wir ändern die Farbe. Die rote Farbe sieht nicht gut aus. Es ist ein bisschen warm. Stattdessen, was wir tun werden, nehmen wir eine blaue Farbe an. Das ist also eine blaue Farbe. Es können wir die blaue Farbe nehmen. Lass es uns auf die kühle Farbe behalten. Ich wähle diese blaue Farbe und klicke auf Wähle die erste Farbe ist jetzt blau. Die zweite Farbe wird wieder blau annehmen, aber wir ändern die Intensität dieser Farbe. Also wähle ich zuerst diese blaue Farbe aus, dann komme ich zur Auswahl und verschiebe sie dann in den helleren Teil. Nun, dein Ich bin, das ist die Farbe , die ich ausgewählt habe. Jetzt. Ich klicke auf Wählen Sie die Farbverlaufsfarbe aus, die so aussieht und sie ist in linearer Form. Der Offset beträgt 101%, in diesem Sinne 100%, beide befinden sich in den äußersten Kurven. Dies ist versetzt. Sagen wir, ich nehme diesen Ausgleich auf etwas hier hin. Und ich klicke auf „ Wiederhole den Verlauf“. Jetzt können Sie den Offset sehen. Das ist genau in 50% richtig, wie Sie sehen können, sind es nicht 50%. Der Anfang der Farbe ist dieser. Okay, diese blaue Farbe, die dunkelblaue Farbe. Die Farbe beginnt mit dem Jahr. Es ist genau in den 50% geendet. Sobald es die 50% erreicht hat, beginnt es sofort wieder von dieser besonderen blauen Farbe. Es beginnt also von dieser Farbe, blaue Farbe, die auf das Weiß hinausgeht. Und Officer ist 50. Sobald der Offset fertig ist, ist er gegen die Aktie. Das heißt, das ist die Wiederholungsoption. Okay, wenn ich diese Option namens Repeat ausschalte , nimmt der Offset die weiße Farbe an, diese hellblaue Farbe. Es wird den zusätzlichen Platz geben. Und die blaue Farbe wird die Lektion brauchen. Okay, bringen wir das auf 100% zurück. Und dann gehen wir, das ist der lineare Gradient. Linearer Gradient bedeutet, in einer geraden Linie zu reisen. Die Farbe bewegt sich in einer geraden Linie. Lasst uns nun sehen, was ein radialer Gradient ist. Radialer Gradient bedeutet, dass er sich in einer kreisförmigen Form bewegt. Also schalte ich es auf den radialen Gradienten um. Und jetzt können Sie sehen, dass die blaue Farbe in der Mitte und in der kreisförmigen Form ist , ändert sich diese Farbe. In der Mitte ist es blau. Dort oben links ist es weiß. links ist es unten rechts weiß, ist es oben weiß, es ist weiß oben, es ist weiß. Also reist es einfach in dieser kreisförmigen Form von Mitte zu Zeitalter. Wenn Sie die Farbe RLC ändern möchten, können Sie den Offset ändern, wenn Sie die Farben umkehren möchten. Sie können diese Farbe an dieser Stelle und diese Farbe bis zu diesem Punkt annehmen. Und da sind wir los. Wenn Sie die gleiche Farbe behalten möchten, aber in einem Flip-Formular. Sie können das also einfach aufheben und in die andere Richtung bringen. Option „Farbverlauf“ funktioniert so. Sie haben also zwei Steigungen. Einer ist ein linearer Gradient, der sich in einer geraden Linie bewegt, und einer ist ein radialer Gradient , der sich in einer kreisförmigen Form bewegt. Was wir jetzt tun werden, sehen wir die Option Bild , also Bild hinzufügen Option. Bevor ich in die Option Bild gehe, was ich tun werde, klicke ich hier einfach auf dieses Kreuzsymbol , damit die Verlaufsoption verschwindet. Und wir haben jetzt eine Standardposition, die weiße Farbe ist. Und jetzt werden wir ein Bild hinzufügen. Wenn ich hier auf diesen Bildordner klicke, gibt es nur wenige Bilder, wie diesen Bus und dann diesen Building Laptop und all das. Lassen Sie uns ein Hintergrundbild in diesen speziellen Bereich stellen. Was ich tun werde, klicke ich erneut auf diesen Abschnitt. Wenn ich also hier drüber klicke, wählt dies den Container aus. Und wenn ich außerhalb dieses Containers auf den Container klicke, wählt er den Abschnitt aus, sonst komme ich direkt zum Übersichtsfenster und ich kann diesen Abschnitt von Ihnen auswählen. Sobald ich diesen Abschnitt ausgewählt habe, klicke ich jetzt im Hintergrund auf Bild hinzufügen. Klicken Sie einfach auf Bild hinzufügen. Sobald ich auf Bild hinzufügen klicke, wird die Option Bild hinzufügen vor dir stehen. Jetzt hast du eine URL. Url. Sie können ein beliebiges Bild hinzufügen, egal ob Sie das Bild im Bootstrap Studio-Projekt hinzugefügt haben oder nicht, klicken Sie einfach auf das Symbol Hinzufügen hier. Diese Schaltfläche „Hinzufügen“ ist da. Klicken wir auf die Schaltfläche „Hinzufügen“. Die Tools und das Image-Pop-up werden vor Ihnen liegen. Wählen Sie einfach eines der Bilder aus. Ich wähle dieses Bild aus und klicke auf, Okay. Sobald ich auf Okay klicke, sehen Sie, dass sich das Hintergrundbild direkt hinter diesem bestimmten Bereich befindet . Auf diese Weise können wir das Bild hinzufügen, aber jetzt können Sie das Bild sehen, das Originalbild hat nur eine Haltung, aber es hat 1234 Treppen oder warum? Der Grund ist wieder, dass ich auf dieses Bild hinzufügen klicke. Jetzt können Sie sehen, dass die Größe des Bildes 640 Pixel mal 426 Pixel beträgt. bestimmte Bild passt nur in diesen speziellen Bereich. Sobald das Bild vorbei ist, wiederholt es das Bild. Und auf der Unterseite wiederholt es auch das Bild. Wenn wir das Bild anpassen wollen, müssen wir mit der Position spielen. Die zweite Option ist Position. Also klicke ich auf diese Positionsoption. Dann haben wir oben, unten, links, rechts und mittig. Was ich tun werde, klicke ich auf Center. Sobald ich auf die Mitte klicke kommt das Hauptbild in der Mitte. Um das herum kommen alle anderen Bilder in Schleife. Okay? Die nächste Option ist die Größe. Wenn ich in Größe komme, heißt es auto, beinhalten uncover. Die Standardeinstellung ist eine automatische. Wenn die Automatik aktiviert ist, wiederholt sie das Bild. Wenn ich enthalten wähle, erfassen Sie den gesamten Bereich, aber im Höhen- und Breitenformat. Wenn Sie jedoch genau sehen, wird dieser spezielle Bereich wiederholt und dieser spezielle Bereich wird wiederholt. Das Bild nimmt also den Bereich auf, der die Fläche in Bezug auf die Höhe enthält , und erweitert den Bereich nicht über den Abschnitt hinaus. Wenn die Größe jedoch entdeckt wird, deckt sie den Bereich ab. Es spielt keine Rolle, welcher Teil angezeigt wird oder welcher nicht angezeigt wird. Wir haben gerade die Gegend abgedeckt und Pilsen den gesamten Teil. Das ist eine Sache. Und sagen wir, wenn dieser Teil wieder oben ist und das automatisch ist, ist diese Wiederholung da. jedoch in der Wiederholungsoption Wenn Sie jedoch in der Wiederholungsoption kommen und wenn Sie keine Wiederholung sagen, sehen Sie nur ein Bild, das sich in der Mitte befindet, das sich in der oberen Position befindet. Wenn ich herkomme und klicke auf Center. Wir können also sagen, dass das Bild da ist, aber es gibt keine Wiederholungsoption. Aber wiederholen Sie, wenn Sie x wiederholen, dann wird nur die X-Achse in der Wiederholungsform sein. Wenn du „Wiederholung“ sagst, warum? Dann wiederholen Sie nur die Y-Achse oben und unten. Wenn Sie eine Wiederholung sehen, wird sie in jedem Übermaß wiederholt. Die beste Einstellung für die Option für das Hintergrundbild ist, die Position in der Mitte zu setzen, die Größe im Cover beizubehalten, und die Wiederholung sollte beachtet werden, dass die erste URL ist. Sie können das Bild hier hinzufügen, die Position, die beste Option wird zentriert, Größe, die beste Option, es wird abgedeckt. Und die letzte Wiederholung sollte es nicht nur in Nicht-Lipid sein, wenn es erforderlich ist. Trotzdem kannst du mit den Optionen spielen und die Optionen nach Belieben platzieren. Dies sind also die Optionen im Hintergrund. Also werde ich diese Option einfach entfernen. Ich zeige dir eine interessante und sehr nützliche Technik. Auf einigen Websites haben Sie vielleicht gesehen, als ob sich ein Bild auf diesem Bild befindet, der Farbverlauf ist auch vorhanden. Was können wir tun, ist, dass wir einfach einen Farbverlauf hinzufügen können. Klicken wir auf Farbverlauf hinzufügen und wählen wir zwei Farben aus. Lass uns in die Bibliothek gehen. Und ich wähle einfach diese gelbe Farbe hier aus. Ich klicke auf Okay. Und statt dieser weißen Farbe nehme ich einfach eine weitere dunkelgelbe Farbe. Für dieses Beispiel ist es für mich in Ordnung. Sie können diese Zeilen dort oben vor diesem Farbwechsel sehen. Also klicke ich einfach auf diesen speziellen Bereich und ich kann diese Optionen reduzieren. Was ich jetzt machen werde, klicke ich auf Bild hinzufügen. Ich klicke auf Bild hinzufügen. Ich wähle ein Bild aus. Ich werde wieder dasselbe Bild verwenden oder vielleicht benutze ich dieses Minibus-Bild. Dann klicke auf Okay. Was ich jetzt tun werde, klicke ich einfach auf Mittelposition, die mittlere Abdeckung. Nein wiederholt. Jetzt möchte ich das Bild auch und den Farbverlauf auch beide Effekte sehen , die ich will. Was ich tun werde, klicke ich auf Farbverlauf bearbeiten. Dieses Bearbeitungssymbol ist hier für und klicken Sie auf dieses Icon. Und ich wähle diese erste Farbe aus. Ich gehe zurück zu diesem Farbauswahlwerkzeug und hier lasse ich die Deckkraft fallen. Ein bisschen. Die Deckkraft werde ich fallen lassen. Jetzt denke ich, dass du jetzt sehen kannst, dass der Bus nicht sichtbar ist. Ich lasse es einfach fallen, fallen lassen, fallen lassen und fallen lassen bis 0.5 Alpha fallen. Das sind genau 50%. Und klick einfach auf, Okay. Was passiert jetzt? Diese Farbe ist 50% transparent und diese Farbe ist ein 100% fester Körper. Diese Farbe wird auch hierher kommen und die Deckkraft verringern, aber ich werde die Deckkraft auf 77% senken. Das war's. Und ich klicke auf Okay. Jetzt kannst du etwas Interessantes sehen. Es ist, als wäre das Bild auch da. Und zusätzlich zu diesem Bild ist der Farbverlauf auch da. Lassen Sie uns nun diese Hintergrundfarbe dieses bestimmten Teils entfernen , der diese Überschrift ist. Also komme ich einfach her und klicke auf Reset. Und so illegal, wie wir mit der Hintergrundoption im Aussehen spielen können . Ist es nicht interessant? Hier werden wir dieses Video beenden. Und im nächsten Video werden wir uns die Option Grenzen ansehen , in der erscheint. Wir sehen uns also im nächsten Video. 9. Grenze: In diesem Video werden wir etwas über Grenzen erfahren. Dies sind also die Grenzen direkt unter dem Hintergrund, wir haben die Möglichkeiten der Grenzen. Lassen Sie uns sehen, wie genau die Grenzen funktionieren. Dafür, was ich tun werde, wähle ich diesen Text aus. Dies ist ein Absatz in dieser Lightbox-Galerie hier und wählen Sie diesen Absatz aus. Es gibt ein paar Kisten hier drüben. Und in jedem Feld sind es 11 Zeilen, die hervorgehoben sind. Und andere drei Linien sind irgendwie diffundiert. Was genau bedeutet das? Es bedeutet, wenn Sie auf dieses Feld klicken, gibt es nur den Rand, den oberen Rand auf. Es wird nur eine obere Grenze anwenden. Wenn Sie auf dieses Feld klicken, wird ein unterer Rand angewendet. Wenn Sie darauf klicken, wird ein linker Rand angewendet. Wenn Sie sich beworben haben und darauf klicken, wird der rechte Rand angewendet. Und wenn Sie sich in der Mitte bewerben, wird es die Eizelle Grenze geben. Dann haben wir unten zwei Möglichkeiten. Wenn Sie auf diesen bestimmten Bereich klicken, ist dies wie der Randradius. Es wird schaffen, es wird die Flexibilität geben eine runde gealterte Grenze zu schaffen. Und diese Option wird einen individuellen Grenzradius erzeugen. Individueller Grenzradius. Es bedeutet, als ob Sie unseren Boden nicht nur nach oben rechts altern würden, dann können Sie das nur im Alter von zwei Jahren geben, die oben rechts und alle drei anderen Grenzen werden h. Mal nacheinander sehen. Und wir werden auch die Stile Farbe sehen. Ich denke, dass Sie ab sofort verstanden haben , wie genau die Farbe funktioniert. Und Radius, den Sie sehen können. Ich meine, klicke einfach das ganze Jahr auf Alle Grenzen und dann gebe ich ihm eine Farbe, vielleicht rote Farbe. Und der Stil von der Standardeinstellung nehme ich zwei solide. Sobald ich den Stil auf solide nehme, sieht man, dass es sich um einen roten Rand handelt. Nehmen wir an, ich möchte nur einen Rahmen an der Oberseite dieses Absatzes oder auf der unteren Seite haben. Was ich also tun muss, ist, dass ich erstellen werde, ich klicke auf Alle zurücksetzen. Ich klicke oben auf die Grenze. Ich komme zum Stil und wähle einen soliden Stil aus. Ich ändere die Farbe. Das war's. Jetzt können Sie sehen, dass wir einen Rand für den jeweiligen Absatz haben. Sagen wir, ich will Border Bottom auch, was ich tun werde, ich klicke auf den Rand unten. Ich gehe wieder zum Stil und klicke auf Solid, und ich gebe eine Farbe. Ich kann auch eine andere Farbe geben. Nur zum Beispiel gebe ich diese Indigofarbe und den Rand links auch ich will, ich wähle den Rand links aus. Ich werde mich auf Feststoff teilen und ich gebe eine andere Farbe, vielleicht diese blaue Farbe, irgendetwas. Ich weiß, dass das nicht gut aussieht, aber ich mache das nur zum Beispielzweck. Was wir jetzt tun können, ist, sagen wir mal, ich möchte das Urteil über die oberste Grenze erhöhen. Wählen Sie erneut den oberen Rand aus. Sobald der obere Rand ausgewählt ist, sehen Sie die Einstellungen wie Solid- und Rot-Farbe. Und das Urteil der oberen Grenze, wir werden die Breite erhöhen. Dies ist alles, was wir die Breite erhöhen werden. Nehmen wir an, die Breite, wir behalten sie auf 15 Pixel. Wir können jetzt auch den Stil ändern. Also lasst uns den Stil eins nach dem anderen sehen. Wir werden den Stil sehen. Der erste ist Standard. Der Standardwert ist nichts wie keine. Dann haben wir solide, dann sind wir geknackt. Wir können sehen, dass der gestrichelte da ist. Dann haben wir gepunktet, dann doppelt, dann gewachsen. Wir haben zwei verschiedene Farben in einer Zeile. Dann sind wir starr. Dann einlegen, von Anfang an. Wir haben anfänglich als geerbt, dann versteckt, anfänglich geerbt und versteckt. Ich weiß nicht wie genau es ist, aber sie tauchen nie auf. Von einem soliden bis Anfang. Wir können es gebrauchen. Nehmen wir an, ich verwende diese solide rote Farbe mit etwas Extrovertiertem oder die Farbe hat sich geändert. Eigentlich ist es ein Rosa, kein Rot. Klicken Sie dann erneut auf die rote Farbe zurück. Oder vielleicht können wir ein Blau wie Blau nehmen. Ich ändere die Pixel und entferne einfach diese anderen Ränder. Auf diese Weise können wir es schaffen. So fügen wir die Grenze hinzu. Manchmal, was wir tun, denken wir, als würde die untere Grenze schön sein. Also entferne ich einfach die Top-Board-Rollen und wähle das Top-Board aus. Ich klicke auf Standard und wähle den unteren Rand aus. Und ich klicke auf Solid und nehme eine blaue Farbe. Und ich nehme, und ich werde einfach die Höhe erhöhen. Ich kann auch ein Dashboard oder einen Stil verwenden, ich kann auch einen gepunkteten Rahmen verwenden. Ich kann auch eine Doppellinie nehmen. Doppelte Linie sieht also auch gut aus. Wir haben mehrere Optionen wie gewachsen, wir haben GRU auch gut aussieht. Darin ist nichts Schlimmes. Es ist, als wäre es nur ein Stil, ein Grenzstil. Das haben wir ab sofort getan. Wir haben alle Seiten der Grenze gesehen und die Ergebnisse des Mittelplatzes sind vorhanden. Klicken wir nun auf die Schaltfläche Alles zurücksetzen und einfach alle Rahmen mit blauer Farbe mit einer Volltonfarbe anwenden. Und lassen Sie uns das Vert ein wenig erhöhen , damit wir es richtig sehen können, sobald wir in den Radius gehen. Diese Radiusoption klicke ich nur auf diese Radiusoption und Sie können diesen Radius in Pixeln sehen. Wir werden das erhöhen und Sie können sehen, dass sich die Grenzen jetzt auf eine abgerundete Grenze bewegen. Das siehst du. Du siehst es genau. Du kannst es sehen. Die Grenzen sind jetzt nicht gealtert und sie sind abgerundet. Nun passiert das Gleiche auch bei dieser Option, aber es funktioniert einzeln. Es wird jetzt einfach 0 machen. Und ich klicke auf diese andere Option , bei der es sich um individuelle Grenzen handelt. Sobald ich auf diesen Button klicke, sehen Sie hier vier Optionen, die die Seite des Alters anzeigen. Dies ist oben links, oben rechts, unten rechts, unten links. Fangen wir mit diesem Bereich an. Jetzt können Sie sehen, dass wir ein bestimmtes Design haben können, sagen wir 32 Pixel Jahr und 32 Pixel dort. Es sieht ziemlich anders aus und auch ziemlich einzigartig. Oder ich wähle es einfach noch einmal aus. Und das ist 3232. Und vielleicht geben wir diese eine Rutsche Grenze wie 19 dort und 19 Jahre. Wir haben ein anderes Design. Aber wenn wir mit der 0 bis zu diesen beiden Optionen gehen, sieht es ziemlich anders aus und es sieht auch ziemlich gut aus. Von hier aus können Sie die Farbe zu jedem Zeitpunkt ändern. Wenn du diese gelbe Farbe willst, kannst du auch mit dieser gelben Farbe wählen. So funktioniert die Grenzoption, und so werden wir die Option „Grenze“ in Bootstrap Studio verwenden . Jetzt im nächsten Video werden wir vorankommen und wir werden die Option „Box Shadow“ sehen. Wir sehen uns im nächsten Video. 10. Schatten: In diesem Video werden wir etwas über Box-Shadow erfahren. Dafür, was ich tun werde, scrolle ich einfach ein wenig nach unten und hier haben wir ein Kontaktformular. Ich wähle dieses Formular aus und wähle keine untergeordnete Komponente des Formulars aus. Ich wähle einfach das Formular aus. Sie können die Auswahl im Übersichtsfenster sehen. Sobald Sie das Formular ausgewählt haben, kommen Sie zur Box-Shadow Option, und Sie sehen hier nur eine Schaltfläche, die hinzugefügt wird. Wenn Sie jedoch auf Hinzufügen klicken, erhalten Sie mehrere Optionen. Wir klicken auf „Hinzufügen“. Dann ist die erste Option invertieren. Diese Option werden wir am Ende sehen. Die zweite Option ist Farbe. Also nochmal, wie oft hast du jetzt verstanden, wie genau die Farbe funktioniert. Dies ist also die Farboption. Dann haben wir x und y. Standardmäßig sind x und y in 0 Pixel. Was wir also tun werden, werden wir nur die Entfernung erhöhen, die Pixel induzieren es auf vielleicht 14 Pixel bringen. Sie befinden sich in der X-Achse in der Exposition, wir bewegen den Schatten, 14 Pixel, positiv auf einer positiven Seite. Und die Y-Achse, wir werden den Schatten und die Pixel auf der positiven Seite bewegen . Es hat keine Pixel gemacht. Jetzt haben wir neben Bootstrap Studio einen Box-Shadow, haben wir neben Bootstrap Studio einen Box-Shadow, sich in der x-Achse befindet. Es ist nicht positive Seite 14 Pixel und Y-Achse, es ist keine positive Seite zehn Pixel. Aber wenn wir praktisch sehen, sollte der Schatten ein bisschen verschwommen sein und er hat auch eine Ausbreitung. Und Bootstrap Studio gibt uns die Möglichkeit zu verwischen und zu verbreiten. Aus Unschärfe können wir die Unschärfe erhöhen. Und es wird Gutes geben. Wir haben die Unschärfe erhöht und können auch die Ausbreitung erhöhen. Aber wenn wir den Spread erhöhen, sieht es für dieses Beispiel ziemlich seltsam aus. Aber vielleicht wird in Ihrem Fall in einer anderen Situation die Spirit-Option absolut gut funktionieren. In diesem Beispiel behalte ich den Spread bei 0. Und ich möchte auch, dass meine Farbe sollte, die Farbe des Schattens sollte nicht so dunkel sein. Was ich tun werde, werde ich zu der Farbe kommen und ich werde eine andere Farbe nehmen, die derzeit wie ein Schatten ist. Ja. Da sind wir los. Ich mag diese Farbe. Das ist RGB 1198198198. Klicken Sie einfach auf „Auswählen“. Das war's. Das ist der Box-Shadow. Jetzt im nächsten Video werden wir Textschatten sehen. Und dafür müssen wir den nächsten auswählen. Wir sehen uns im nächsten Video. 11. Textschatten: August auf der Box-Schattenschatten ist fertig. Jetzt bewegen wir uns zum Textschatten. Dafür. Auf jeden Fall werde ich den Text auswählen und den Text „Kontakt“ auswählen. Kommen Sie zu dieser Tech-Shadow-Option und ich klicke auf Hinzufügen. Jetzt können Sie sehen, dass die gleichen Optionen hier sind. Nur die Möglichkeit der Verbreitung gibt es nicht. Was ich tun kann ist, ich komme einfach hierher und ich werde diese Farbe auswählen, die 198198 oder 100 über 97 ist, ist auch für mich in Ordnung. Ich klicke einfach auf Select, und ich werde nur den Wert von x und y erhöhen, aber ich werde nicht zu viel erhöhen, denn Pixel ist in der X- und Y-Achse in Ordnung und ich werde nur die Unschärfemenge erhöhen. Das war's. Diese spezielle Option, wie wieder vier Pixel, ist gut für mich. So funktioniert die Option „ Textschatten“. Wenn Sie die Unschärfe nicht möchten, können Sie sie wie 0% auch 0 Pixel behalten. Für mich ist diese Option ziemlich gut. Aber ja, eine Sache, die ich noch sagen werde, möchte ich dir sagen. Sie können Vielfache hinzufügen, Box-Shadow, mehrere Textschatten hinzufügen. Technischer Schatten, den Sie hinzugefügt haben, wenn Sie mehr für dasselbe Element oder für dieselbe Komponente hinzufügen möchten , können Sie weitere hinzufügen. Dasselbe gilt für den Box-Shadow. Das ist alles, was der Textschatten erledigt ist. Box-Shadow-Ergebnisse werden im vorherigen Video erstellt. Im nächsten Video sehen wir die Transformationsoption, und dann sehen wir die Filteroption und dann ist unser Erscheinungsbereich fertig. Wir sehen uns im nächsten Video, um die Transformation zu sehen. 12. Transformation: Okay Leute, in diesem Video werden wir uns über Transform ansehen. Während wir Transform lernen, werden wir eine neue Datei öffnen, eine neue Datei öffnen zu Ihrer Ressourcendatei unter BSS-Dateien kommen und Sie haben einen Ordner, der Hash ist, um die Transformation zu unterstreichen. Öffnen Sie einfach diesen Ordner und darin finden Sie eine b als Designdatei. Doppelklicken Sie einfach auf diese Datei. Und es wird eine Gruppe in dieser Designdatei geben, die fertig ist. In diesem Bild werden wir verstehen, wie genau die Transformationsoption unter dem Erscheinungsbild funktioniert. Unter Aussehen scrollen wir nach unten und wir werden hier die Option Transformation finden. Wenn alle anderen Optionen für Sie nicht sichtbar sind, müssen Sie nur hier auf diesen Pfeil klicken. Und das war's. Wir werden die Optionen sehen, die es in der Transformation gibt. Die erste Option ist vorausschauend. Wir können die Perspektive eines Bildes oder einer Komponente oder was auch immer es ist, ändern . Dann haben wir übersetzt, und wieder haben wir einen Pfeil hier drüben. Dann können wir die jeweilige Auswahl in X-, Y- und Z-Achse übersetzen . Dann haben wir Rotation. Auch hier können wir eine bestimmte Auswahl in X-, Y- und Z-Achse drehen . Dann haben wir Scale XYZ und Switch, wir haben XY. Vielleicht haben Sie im Laufe des Jahres bemerkt , dass wir hier drei x haben, also x, y und z. Und wenn der Überschuss, der Zed-Achse ist, ins Bild kommt, bedeutet dies, dass Zed-Achse ist, ins Bild kommt, bedeutet dies, es ein 3D-Feature hat. Wenn ich von unserem 3D spreche, ist es kein echtes 3D. Es ist wie eine Illusion von 3D. Wir machen das Bild nicht in ein 3D-Format, aber es ist wie eine Illusion. Es ist kein echtes 3D, das dich macht, oder dass es kein echtes 3D ist, es ist die Illusion. Beginnen wir, die Optionen unter Transformation zu verstehen. Erstens ist prospektiv. Wenn Sie Änderungen an der Prospektive vornehmen, werden Sie keine Änderung sehen. Der Grund dafür, dass sich die Perspektive ändert. Aber wie ich schon sagte, ist es nur die Illusion. Die Illusion ist auf dem flachen Bild nicht sichtbar. Machen wir es also standardmäßig. Ich entferne es. Das wird zuerst los sein. Ich zeige dir die Übersetzungsoption. Übersetzen ist nichts anderes als nur eine Bewegung einer bestimmten Auswahl. Dies übersetzt die Position in der x-Achse. Y übersetzen“ übersetzt die Position in der Y-Achse. Und jetzt, wenn ich die Z-Achse verschiebe, werden Sie im Laufe des Jahres keine Änderungen sehen. Wenn wir die Änderungen der Zed-Achse sehen wollen, müssen wir eines tun. Wir müssen diese bestimmte Komponente finden , die ein Image-Tag ist. Eigentlich ist es das Image-Tag. Dieses Image-Tag befindet sich unter welcher Komponente oder welchem Tag. Also vorher, was ich tun werde, werde ich all diese Dinge einfach auf 0 bringen. Machen wir es wie alle zurücksetzen. Ich habe dieses Bild ausgewählt. Dieses Bild ist hier drüben. Wir können es im Übersichtsfeld sehen. Und dieses Bild ist ein Kind von diesem besonderen Grund, denn in diesem Bild liegt dieses Bild-Tag. Also kann ich dir zeigen, wenn ich das zusammenfalle, wir können sehen, dass sich das Bild-Tag in diesem div-Tag befindet. In der Transformationsoption scrolle ich nach unten zur allerletzten Option, die 3D beibehalten wird, und ich schalte diese Option auf c. Ich wollte die Änderungen an diesem Bild im 3D-Raum vornehmen, okay, 3 D Raum in der mittleren Zed-Achse, ich möchte die Änderungen am Bild in der Zed-Achse vornehmen. Um die Änderungen an diesem Bild in der Z-Achse vorzunehmen, muss ich Bootstrap mitteilen , dass sich dieses Bild in diesem div befindet, und dieses div ist offensichtlich und dieses Bild ist ein Kind. Wann immer ich Änderungen vornehmen möchte , muss ich sicherstellen, dass das übergeordnete Element konvertiert wird, um den 3D-Raum zu erhalten. Jetzt weiß Bootstrap-Studio , dass sich dieses Div im 3D-Raum befindet. Was ich jetzt tun werde, nehme ich dieses Bildbit nach oben. Sie können dies nach dem Namen des Autors sehen, September, ein Datum ist ihr Boden. Stellen Sie sicher, dass es in diesem Bild darum geht. Und warum mache ich es bei diesem Text. Warum mache ich diesen speziellen Text nicht. Der Grund dafür ist, dass dieser Text in dieser Zeile liegt, und diese Zeile befindet sich nicht im 3D-Raum. Dies schont keinen 3D-Raum. Deshalb machen wir dieses Bild nicht. Und der zweite Grund ist, dass dieses Bild in diesem div liegt. Es gibt keine Beziehung zwischen diesem Div und dieser Zeile, okay? Und dieser Text, der jetzt versteckt ist, dieser Text befindet sich auch in diesem div. Das gesamte div bewahrt also den 3D-Raum. Dieser Absatz befindet sich auch innerhalb des 3D-Raums. Das ist der Grund, warum ich dieses Beispiel nehme. Ich versuche dir nur mit diesem Text zu erklären. Das Bild ist, oh, du überlappst diesen bestimmten Text. Jetzt lass uns zu dir kommen. Hier wollen wir genial machen, okay? Wenn ich es also auf die positive Seite bringe, kommt es in Richtung Grün. Es bedeutet, dass es nach draußen kommt, aber wir können es nicht sehen. Warum? Weil es nichts zu sehen gibt. Aber wenn ich es auf die negative Seite nehme, können Sie jetzt sehen, dass der Name des Autors da ist. Da es sich um ein Bild handelt, das sich in diesem div befindet, wir die Änderungen vor und jetzt haben wir die Position dieses Bildes in der Z-Achse geändert . So können wir diesen Text sehen. Es ist sichtbar, wenn wir dieses Bild im negativen Raum aufnehmen . Und so ist dieser Text vorne. Wenn ich dieses Bild nun auf der positiven Seite aufnehme, ist das Bild vorne und der Text hinter diesem Bild. Das Gleiche. Noch einmal zeige ich dir mit diesem Beispiel. Dieses Bild, ein bestimmtes Bild, befindet sich in diesem Figuren-Tag. Und das Elternteil für dieses bestimmte Tag ist dieses div. Auch hier sind alle diese Texte in diesem Div vorhanden. Okay, also wähle ich diese Option hier aus und lösche diese Beschriftung. Ich wähle einfach dieses div aus. Und jetzt, was ich tun muss 0s, werde ich runterkommen und ich werde diese Option überprüfen , auf der 3D erhalten bleibt. Jetzt ist dies im 3D-Raum und der gesamte Text in diesem Div befindet sich im 3D-Raum. Wählen Sie dieses Bild aus. Und was ich tun werde, übersetze ich die Y-Achse, also ist sie jetzt überlappt. Und jetzt werde ich es in z. umwandeln damit du sehen kannst, das war's. So kannst du den Text hier sehen. Jetzt ist es negativ, also ist der Text sichtbar. Und sobald ich es auf die positive Seite gehe, ist der Text nicht sichtbar. Jetzt. So läuft der 3D-Raum. Dies ist eine Übersetzung in Zed Achse. Jetzt sehen wir uns die Rotation an. Rotation ist, wie der Name schon sagt, Sie können sich in der X-, Y- und Z-Achse drehen . Jetzt zeige ich Ihnen die Beziehung zwischen der Rotation und der Perspektive. Drehen wir dieses Bild in der x-Achse. Drehen Sie dieses Bild einfach leicht 33 Grad oder so oder vielleicht mehr. Lass uns bis zu 50 Grad steigen. Nein kann dieses Bild sehen, aber Sie werden sehen, dass dieses Bild nicht gedreht wird. Es ist wie Squeeze, weil die Ränder bleiben, scheinen nur das Bild wie ein Squeeze-Bild auszusehen. Jetzt kommt die wahre Magie , wenn ich die Perspektive ändern werde. Lass es uns ein bisschen ändern. Da sind wir los. Jetzt können Sie sehen, dass das Bild tatsächlich gedreht wurde. Dies ermöglicht es uns, die Perspektive in dieses spezielle Bild einzubringen. Wenn ich jetzt die Rotation ändere, können wir sehen, dass sich das Bild dreht. So funktioniert die Option. Jetzt können Sie sehen, dass dieses Bild vorne ist. Deshalb ist der Text nicht sichtbar. Nehmen wir das Bild also auf. Jahr, in dem der Text richtig sichtbar ist. Wir können es mehr drehen. Wir können auch die potenzielle Option ändern. Ebenso können wir es in der Y-Achse drehen, und ebenso können wir es in der Z-Achse drehen , und ich kann die Rotation in der Z-Achse sehen. Jetzt können Sie die Drehung in der Y-Achse sehen. Sie können die Drehung in der x-Achse sehen. Ich setze das zurück. Alle Optionen außer X-Achse. Lass es in dieser speziellen Position sein, und die Perspektive wird irgendwo so sein. Jetzt scheint es so, wie wir es mit Skalierung machen können. Wir können es in X-Achse, Y-Achse und Z-Achse skalieren. Auch hier ist die Skala in der Zed-Achse nicht sichtbar. Das Gleiche. Wir können quetschen, x quetschen, in y drücken, und los geht's. Ich werde diese Option erneut als Standard machen. Jetzt wird diese Option als Transformationsursprung bezeichnet. Dies steht in direktem Zusammenhang mit allen Optionen. In transformieren Ursprung. Wir haben oben, unten, links, rechts und mittig. Was genau bedeutet es? Das erste, was ich dir in Rotation zeige , wenn ich auswähle und das drehe. Dieses Bild dreht sich also von der Mitte aus. Dies ist der Mittelpunkt und er dreht sich von dort aus. Wenn ich es jetzt nach oben bringe, wenn ich mich drehe, werden Sie verstehen, dass das Bild oben fixiert ist und sich von oben dreht. Dies ist die Verwendung des Transformationsursprungs. Ebenso, wenn ich unten mache, beginnt die Rotation von unten. Der Boden ist fixiert und die Rotation ist von unten. Ebenso arbeiten links, rechts und Mitte in der Szene. So ist die Transformationsoption der Arbeit, und wir können daraus alles machen. Das ist alles für dieses Video, die Transformationsoption ist erledigt. Und im nächsten Video werden wir mehr über die Filter sehen. 13. Filter: In diesem Video werden wir Filter sehen. Filter ist die letzte Option in der Epidermis. Die erste Option ist die Deckkraft. Wir werden also die Deckkraft für uns sehen. Also was ich tun werde, wähle ich das Formular, das gesamte Formular hier aus. Sobald ich das Formular ausgewählt habe und welche Änderungen ich mache, gilt es für alle Komponenten oder für alle Elemente , die sich in diesem Formular befinden. Was sind alle Dinge innerhalb des Formulars? Wenn ich das zusammenbringe, siehst du diesen Text. Kontaktiere uns Text, dieser Eingabetext, dann diese E-Mail-Eingabe, dann der Textbereich und die Schaltflächen befinden sich alle in diesem Formular. Welche Änderungen ich auch an diesem Formular vornehmen werde, Komponenten sind die Elemente, die sich innerhalb des Formulars befinden , werden ebenfalls betroffen sein. Deckkraft. Wenn ich die Deckkraft herunterschalte, können Sie sehen, dass sich die Deckkraft ändert. Ja. Okay. Fertig, es ist fertig. Opazität, ja, es ist fertig. Jetzt. Die zweite Option ist verschwommen. Wenn Sie sich jetzt ändern oder die Unschärfe erhöhen , können Sie sehen, dass es Bird ist. Ja, das war's. grabe zurück auf 0 oder vielleicht klicke ich auf Alle zurücksetzen. Jetzt Helligkeit. Ja, Sie können die Helligkeit ändern oder die Helligkeit erhöhen oder verringern. Ja, das ist alles. Die Helligkeit ist ebenfalls erledigt. Dann Kontraste, Kontrast. Sie können den Kontrast dieser bestimmten Komponente ändern. Dann hast du Graustufen. Graustufen Ich zeige dir auf einem Bild. Wählen Sie dieses Bild aus. Wie Sie sehen können, ist dies ein buntes Bild. Welches Bild ist bunter als das? Okay, dieses Bild als hätten wir Blau und einige Farben sind tot. Also wähle ich dieses Bild aus und steige den Wert von Graustufen. Und Sie können sehen, dass sich das Bild wie ein Schwarz-Weiß-Bild dreht. Okay, das ist also die Option von Grau. Sie werden mich bitten, einfach die Farbe eines bestimmten Bildes zu ändern. Wir haben diese Option. Also ja, wir haben diese Option, aber VK und verwenden sie auf eine andere Weise, auf einer anderen Ebene. Sehr bald wirst du erfahren, wie genau wir das benutzen werden. Dies ist eine Graustufen und dann können wir die EU vergrößern, auch Menschen, wie ich Ihnen sagte, die Farbe, das Weiß vermischt. Sie können sehen, wie sich die Wellenlängen der Allele ändern der Farbton der Farbe ändert sich. Dann invertieren, wir können uns ändern. Wir können die Farbe invertieren. Jetzt ist es kein Negativ, nicht so wie ältere Kameras so negativ sind, oder? Das ist der Zustand dieses Bildes. Wenn wir nun die Option nach innen 200 Prozent nehmen, dann stellt sich die Option als das Bild in dieser speziellen Form heraus. Dann haben wir Sättigung. Wir können den Sättigungsgrad des Bildes ändern. Jetzt ist die letzte Option die HLW. Cpr ist ein Farbmodus, der ein bisschen warme Farbe ergibt, nicht gerade warme Farbe, sondern in einer Art alter Schule farbiger Art. Und ich zeige dir, wie genau es ist. Vergrößern Sie das einfach. Und Sie können sehen, dass die Farbe geändert wurde. Ich kann dir auf diesem Bild zeigen, auch die Sepia vergrößern. Da sind wir los. So sind die Farben festgelegt und die Farbschemata tatsächlich die Farbpalette für die Sepia-Farbe ist festgelegt. Und es änderte das vollständige Farbschema in dieses CPM-Säulenschema. So funktionieren Filter und wir können damit umgehen. Wir können alles damit machen. Wir können auch mit verschiedenen Optionen verwenden, unterschiedliche Permutation und Kombinationen. Und schließlich werden wir zu einer bestimmten Ausgabe kommen, bei der es Ihnen und mir beiden gefallen hat, wenn wir bereit sind, das sehr bald in den späteren Videos zu tun Ab sofort werde ich dieses Video hier beenden. Die Filteroptionen sind erledigt und alle Optionen in den Darstellungsfeldern sind erledigt. Wir haben alle Optionen im Aussehenbedienfeld abgedeckt. Kurz gesagt, das Erscheinungsbild ist vollständig fertig. Jetzt im nächsten Abschnitt werden wir anfangen, die Optionen zu verstehen und wie genau die Optionen funktionieren. Der einzige Unterschied zwischen den Beweisen und den Optionen IIS, Appian bleibt, scheint keine Rolle zu spielen, welche Komponente Sie auswählen. In den Optionen, den Optionen im Optionsfenster, ändern sich jedoch den Optionen im Optionsfenster, die Optionen im Optionsfenster basierend auf den Komponenten. Nicht ganz. gibt nur wenige Optionen, aber basierend auf der ausgewählten Komponente, die Sie auswählen, kommen nur wenige Optionen und einige der Optionsziele. Abhängig von der Komponente oder dem Element, das Optionen im Optionsfenster auswählt, ändert sich also . werden wir im nächsten Abschnitt sehen. Wir sehen uns also im nächsten Abschnitt. 14. Konvertieren von BS4 zu BS5: Okay, bevor wir vorankommen, was wir jetzt tun werden , befindet sich dieses Projekt derzeit in Bootstrap 4.6.2. In Bootstrap Five gibt es nur wenige zusätzliche Optionen gibt es? Was wir tun werden, werden wir dieses Projekt von Bootstrap 4.6.2 auf Bootstrap Five umwandeln . Dies ist der Name des Projekts , das Sie hier sehen können. Und am Ende sieht man eine Sternmarke. Diese Sternmarke zeigt an, dass das Projekt noch nicht gespeichert wurde. Okay, bis jetzt werden wir das Projekt speichern, was wir zuerst tun werden. Jetzt ist die Sternmarke weg und jetzt müssen wir das Projekt konvertieren. Es ist also sehr einfach. Du musst nichts tun. Bootstrap Studio wird alle Dinge für dich erledigen. Du musst keine schmutzigen Arbeiten machen. Mal sehen, wie genau wir das Projekt von Bootstrap 4.6 auf Bootstrap F5 konvertieren werden. Klicken Sie auf Datei und dann einfach auf In Bootstrap Five konvertieren. Das war's. Sobald Sie darauf klicken, erhalten Sie ein Popup-Fenster, das besagt , dass dieses Tool ein neues BS-Design erstellt, alles kopiert und Ihre Seite mit fünf Bootstrap-Komponenten neu erstellt Ihre Seite mit fünf Bootstrap-Komponenten , alles ist in Ordnung. Wir werden dieses spezielle Projekt nicht in ein Bootstrap-Fünf-Projekt umwandeln Bootstrap-Fünf-Projekt Welche Bootstraps werden wir heute machen Bootstrap Studio , um ein komplett neues Projekt mit all dem zu erstellen ein komplett neues Projekt Informationen innerhalb des neuen Projekts. Und dieses spezielle Projekt wird in Bootstrap Five umgesetzt. Dieses Projekt wird also gleich bleiben wie es ist. Das ist nicht Bootstrap 4.6 und ein neues Projekt wird, anstatt das gleiche Projekt zu konvertieren, okay, also was ich tun werde, ich klicke einfach auf das Signal konvertieren . altes Projekt, das beginnt, und das ist unser neues Projekt, das in Klammern beginnt, Bootstrap F5. Wieder hast du eine Sternmarke hier drüben. Das bedeutet, dass Sie das Projekt speichern müssen. Es wird ein kleines Genie geben, als hätten wir die Farbe dieses bestimmten Bereichs hier verloren, und wir haben die Dekoration und all das verloren. Warum? Weil diese bestimmte Option jetzt in dieser bestimmten Version aktualisiert wird. Okay, also was wir jetzt tun werden, wir werden dieses Projekt speichern und wir werden anfangen, an dem neuen Projekt zu arbeiten , das Bootstrap Five ist. Klicken Sie einfach auf Speichern. Jetzt schließe ich diese alte Version. Und danach werden wir alle Dinge im Bootstrap-Fünf-Projekt beginnen. Im nächsten Abschnitt werden wir alles über das Optionsgleichgewicht lernen. Wir sehen uns also im nächsten Abschnitt, im nächsten Video. 15. Text-Option: Ich schätze, äh, aus diesem Abschnitt oder aus diesem Video werden wir alles über das Optionsfeld lernen. Fangen wir an, ohne mehr Zeit zu verschwenden. Direkt wähle ich diesen Abschnitt aus. Wir werden in das Optionenbedienfeld springen und sehen, wie genau das Optionsfeld die Option gemäß den Komponenten bietet. Es klickt also auf das Optionenbedienfeld. Dies ist die erste Option, die es gibt , also Textoption. Dann haben wir Dekorations-Tooltip als Antwort, um es anzuzeigen und Flexbox und Zugänglichkeit. In diesem ist die Flexbox sehr wichtig und sehr nützlich. Wir werden diese Flexbox-Option die meiste Zeit verwenden. Beginnen wir mit der ersten Option, die Textoption ist. In ihrer Textoption haben wir mehrere Optionen. Es gibt Ausrichtung, Farbe, Transformation, Monoabstand, keinen Rap und all die Dinge in der Nähe. Sie werden feststellen, dass in der Farboption kein Farbwählerwerkzeug vorhanden ist. Stattdessen haben wir eine vordefinierte Farbe, die von Bootstrap Studio gegeben wird. Wir werden vordefinierte Farbe von Bootstrap Studio im Optionenbedienfeld verwenden. Und wenn wir zu diesem Zeitpunkt eine bestimmte Farbe haben wollen, müssen wir zum Erscheinungsbild gehen. Fangen wir mit der Ausrichtung an. In der Ausrichtung habe ich diese Optionen, die beginnen, dann ist das Zentrum, und dies ist der Name der Ausrichtung wird in dieser speziellen Version geändert, Bootstrap Five Version. Und der Anfang bedeutet, dass es eine linke Ausrichtung ist, der Mittelpunkt ist offensichtlich eine Mittellinie und das Ende ist die rechte Ausrichtung. Wenn ich nun auf dieses bestimmte Symbol dort klicke, ist es das Pfeilsymbol. Wenn ich darauf klicke, bekomme ich einige Bildschirmgrößen. Im Laufe der Jahre gibt es SM, MMD, LG, Excel, Double Excel. Genau. Wir haben das gesehen, das haben wir schon früher gesehen. Dies ist Double XL, das ist extra, extra groß. Dann ist das Excel , das extra groß ist. Das ist LG, das ist Md, das ist klein und extra klein. Extra klein ist nicht da. Oder was auch immer wir in kleinen SM tun werden, es wird auch als extra kleiner, extra kleiner Befehl angesehen . Warum gibt es also genau diese Optionen? Wir sagen dir, was genau es ist. Diese Ausrichtungsoption ist vorhanden und Sie können hier drei Optionen sehen. Dies ist wie ein universeller Befehl. Schauen Sie sich den universellen Befehl in dem Sinne Wenn Sie Änderungen an dieser speziellen Option vornehmen , die sich vor der Ausrichtung befindet, vor dem Ausrichtungsschlüssel haben wir diesen Wert. Dies ist der universelle Wert. Wenn Sie jedoch Änderungen an den Bildschirmgrößen der Benutzer die Website auf der spezifischen Bildschirmgröße durchsucht , wird er erhalten. Nur diese besondere Ausrichtung. Lassen Sie mich Ihnen zeigen, wie genau es ist, okay, vorher haben wir die Farbe dieser Überschrift und dieses Absatzes verloren . Wir werden zur Farbe vorankommen. Was genau Farbe hat. Wie ich Ihnen sagte, haben wir vordefinierte Farben, die uns das Bootstrap-Studio gibt. Welche Farbe ich auch immer auf den Abschnitt angewendet habe. Alle Texte, die sich innerhalb des Abschnitts befinden, erhalten die gleiche Farbe. Okay, nicht einzeln, alles jetzt haben wir diese Überschrift und diesen Absatz. Es sind Texte, oder? Außer diesen Knöpfen. Was auch immer der Text in der Schaltfläche ist, er wird nicht betroffen sein, da dafür einen speziellen Befehl hat. Diese Überschrift ist tot, und dann ist dieser Absatz da. Okay, also wähle ich diesen Abschnitt aus, ein Muster für alle Komponenten ist, die sich innerhalb des Abschnitts befinden. Und ich ändere die Farbe. Lass es uns in Warnung ändern. Warnung ist eine gelbe Farbe. Lasst uns der Erwärmung überlassen. Das war's. Jetzt haben Sie eine gelbe Farbe für den Text. Es ist nützlich, wenn Sie die Farbe des gesamten Abschnitts ändern möchten oder was auch immer es ist, gesamte Komponente, egal welcher Text sich innerhalb des Abschnitts oder der Komponente befindet, Sie können den gesamten Text in nur ändern ein Klick. Kommen wir nun zur Ausrichtung zurück. Weil es jetzt gibt, dass wir den Text sehen können. Sie wählen diesen Überschriftentext und dann habe ich eine andere Option oder Sie können in dieser Ausrichtung sehen, dass nichts ausgewählt ist. Trotzdem ist der Text kein Mittelformat, die mittlere Ausrichtung, selbst der Absatz ist keine zentrale Ausrichtung. Warum genau diese Leichtigkeit, ohne eine Option auszuwählen, warum genau diese Überschrift und dieser Absatz, hat er die Ausrichtung nicht zentriert. Es ist sehr einfach und vielleicht hast du es auch. Der Grund dafür ist, dass einzelne Überschriftenkomponente oder -elemente eine Mittelausrichtung hat. Mal sehen, wenn ich auf die Überschrift klicke. Jetzt können Sie in der Ausrichtung sehen, die universelle Ausrichtung auf Mitte eingestellt ist. Okay? Das ist der Grund, warum, wenn wir diesen Abschnitt auswählen, nichts ausgewählt wird, aber es ist immer noch und zentriert, weil die einzelne Komponente als Mittelausrichtung ausgewählt wird , vielleicht dies mag dich verwirren, aber den Rhythmus beibehalten. Wenn wir vorankommen, werden Sie verstehen, was genau es ist. Sobald ich das Überschriften-Element ausgewählt habe, können Sie sehen, wann hier eine zusätzliche Option angezeigt wird , die die Überschriftenoption ist. Art der Überschrift ist vielleicht, dass Sie gehört haben, wenn Sie HTML kennen, dann haben Sie von Überschriften-Tags wie Überschriften gehört , die von H1, H2, H3, H4, H5 und H6 beginnen . H1, H6 sind die Überschriften. Das ist nur die Nummer hier drüben. Jetzt wird ausgewählt, welche Zahl ausgewählt wird, die soll. Dies bedeutet, dass dies eine Überschrift zu Position 123456 ist. Dies sind die Überschriften , die eins bis sechs NADH sind. Anderes Display, Display ist wie eins bis fünf Displays. Gibt es da. Eigentlich sollten es sechs sein. Das wird das ziehen. Ja, okay. Sechs ist also tot. Wenn Sie dann auf einen klicken, können Sie sehen, dass die Größe des Textes erhöht wird. Das ist Display eins. Zeigt sechs an, die wir haben. Und wenn Sie schließen, ist dies Standard. Dies ist die Option , die vor Ihnen steht , wenn wir das Überschriften-Tag auswählen. Wenn wir nun das Absatz-Tag auswählen das anstelle von H1, H2, H3 wird die Absatzoption angezeigt. Eine Option wird innerhalb der Absatzoption vorhanden sein , die Lead ist. Wenn Sie darauf klicken, sehen Sie, dass die Größe vergrößert wird, aber auch das Fremde ändert sich. Jetzt sehen Sie, was genau los ist. Du bist im Texteditor. Sie können diesen Absatz sehen, gibt es Absatz-Tag, ist, dass innerhalb des Tags Klasse und Klasse Lead ist. Text zentriert. Textzentrum ist nichts anderes als diese Option, die Ausrichtung ist. Dann Stil und was auch immer es ist, dann haben wir etwas hier drüben und wir haben diesen Text für alles, was darin geschrieben ist. Und dann das schließende Tag des Absatzes. wurde bereits viel Code geschrieben. Also werden wir das dazwischen sehen. Lasst das einfach zusammenbrechen. Sehen wir uns nun die Ausrichtungsoption an. Wenn ich diese Überschrift auswähle und Sie die Ausrichtung sehen können, ist die Vereinigung oder Zellenausrichtung zentriert. Was ich jetzt tun werde, werde ich Bootstrap Studio sagen, wenn die Bildschirmgröße MD ist und über dem Meer ist, war es so. Nur wenn Sie hier etwas ändern, die Kette für alle oben genannten Bildschirmgrößen anwendbar . Die niedrigere Bildschirmgröße bleibt jedoch gleich. Es bedeutet, was auch immer Sie auf die MD-Bildschirmgröße wechseln, wenn ich die Ausrichtung so ändere, dass sie in MD beginnt, Alle oben genannten, also LG Excellent Doppelachse , erhalten nur die Startausrichtung. Mal sehen, wie genau es von MD ist, ich klicke einfach auf Start, wo genau wir jetzt sind wir bei Excel. Sobald ich darauf klicke, die Änderungen in dieser speziellen Bildschirmgröße sichtbar. Klicken Sie auch einfach auf Start, und das war's. Es ist in der Startposition. Aber in SM, KMU sollte es im Mittelpunkt stehen. Sm bedeutet klein und darüber was ist klein? Klein ist dein kleiner als ein Junge was? Sofort der MD. Die Ausrichtung wird also nur in der kleinen Bildschirmgröße in der Mitte sein. Mal sehen. Wenn ich auf klein klicke, siehst du, dass die Ausrichtung zentriert ist. Und sobald ich auf MD klicke, ist die Ausrichtung am Anfang. Lassen Sie uns Bootstrap Studio sagen, dass es im Mittelpunkt stehen sollte, wann immer es in LGN ist . Auch wenn ich zu LG komme, ist es ein Anreiz. Und all das oben Gesagte. Es wird wieder in der Mitte sein. Und sagen wir, wenn die Bildschirmgröße oben ausgezeichnet ist, aber es gibt nichts über Excel. Das Excel ist die letzte Größe. Wann immer es ein XL ist, jim die Ausrichtung T2. Und jetzt sind wir dabei, und was wir getan haben, ist nur für Excel, wir haben nichts gegeben. Also was es braucht, es wird von LG LGN über okay nehmen, nichts ist Bootstrap wird verstehen , dass ich die Ausrichtung nur von LG nehmen muss, also LG und höher. Und dann wieder Excel, es hat einen anderen Wert. Das wird es also zeigen. Lassen Sie uns sehen, wie genau es im Code aussieht. Ziehen Sie einfach den Texteditor heraus und Sie können sehen, dass das H2-Tag hier ist. Textzentrum. Das ist die universelle Option, die es gibt. Es zeigt Textzentrum und Text SM, KMU klein, was klein ist, am kleinsten gegenüber der Mitte. Es heißt also, dass der kleine Text zentriert ist. Dann ist das Textmedium Anfang. Also das ist Md behoben, MD ist Start, ja. Dann Text LG center. Lg ist Zentrum. Dann haben wir direkt Double XL. Also Text Excel, das ist Text extern ist, und so schreibt Bootstrappseudo den Code für Sie. Lassen Sie uns sagen, wenn ich dieses Excel entferne, können Sie hier sehen, behalten Sie Ihr Auge hier drüben. Das ist Text Excel, und ich werde das einfach entfernen. Und sofort wird der Code für Sie entfernt. Das Bootstrap-Studio schreibt den Code für Sie. Du musst nur hier und da klicken, Drag-and-Drop und all die Dinge, die wieder fallen und all die Dinge drin sind, das bricht wieder zusammen. So funktioniert diese Option der Ausrichtung. Und danach haben wir wieder Farbe, es ist der gleiche Satz von Farben oder ihre vordefinierten Farben gibt es. Daraus können Sie eine beliebige Farbe auswählen. Jetzt ist Transformation ihre Transformation Kleinbuchstaben, Großbuchstaben und Großschreibung. Wenn ich auf Kleinbuchstaben klicke, werden alle Zeichen in Kleinbuchstaben angezeigt. Wenn ich auf Großbuchstaben klicke, sind alle Zeichen Kapital. Und wenn ich auf Großschreibung klicke, der erste Buchstabe des Wortes Kapital. Der gleiche Weg wird mit dem Absatz passieren. Wenn ich zur Transformation komme und wenn ich auf Großschreibung klicke, wird der erste Buchstabe jedes Wortes Kapital. So genau dieser als Mono-Abstand ist nichts aber wenn Sie den Mono-Abstand einschalten, wird es so aussehen, wie ein Mono-Abstand von Old-School, Old-School-Schrifttyp. Ich schalte es einfach aus. Ich werde diese Option einschalten keine Option oder App bedeutet, dass es egal ist, in welchem Bereich des Absatzes es sich handelt, sie wird in einer geraden Linie erscheinen. Aber was passiert ist, dass Sie den blauen Rand sehen können, blaue Umriss gibt an, dass der Absatz, dieser spezielle Absatz diesen bestimmten Bereich hat. Da jedoch keine Wrap-Option aktiviert ist, zeigt sie, dass es das Limit überschreitet , tatsächlich die Grenze überschreitet. Was wir also tun können, ist, wenn Sie nicht möchten diese spezielle zusätzliche Option aus der Grenze kommt, bedeutet dies, dass sie das Limit nicht überschreiten sollte. Was wir tun können, ist, dass wir diese Option aktivieren können. Sobald wir diese Option einschalten, wird sie so kommen. Drei Punkte. Es bedeutet, als wäre etwas mehr in diesem speziellen Bereich. Sie müssten den Abschnitt hier nicht auswählen. All diese Optionen sehen Sie hier drüben. Die gleichen Optionen gibt es. Aber wenn Sie hier etwas ändern, gilt dies für den Abschnitt nicht auf die spezifischen einzelnen Texte. Um die Änderungen auf den einzelnen Textbereich oder das Textelement anzuwenden , müssen Sie den Text und das Limit auswählen und dann ändern. Und sagen wir, ich habe, ich wähle diesen Absatz jetzt aus und möchte die Farbe ändern. Wenn ich die Farbe ändere, sagen wir mal Gefahr, kannst du sie ändern. Jetzt hat es sich geändert. Also das ist halten Sie die Textoption. Geh. Danach werden wir uns im nächsten Video die Dekorationsoption ansehen. Und sie könnten die Aktion Option allen Komponenten sehr ähnlich ist . Es gibt keine zusätzlichen Optionen dazwischen. Wenn wir den Absatz auswählen, ist die Absatzoption hier. Wenn ich die Überschrift auswähle, ist die Überschriftenoption hier. Diese Art von Situation kommt also nicht ins Spiel. Die Dekoration. Dekorationsoption ist eng anliegend. Es gibt keine derartigen Änderungen in der Liquidationsoption. Im nächsten Video werden wir die Dekorationen sehen. 16. Dekorationen: Fangen wir mit Dekorationen an. In der Dekoration v haben vier Optionen, dass seine Grenze, Rahmen, Farbe, Schatten und Hintergrund. Das Erste, Border. Wir haben hier wenige definierte Grenzen. Dies sind nicht die Grenzen, die im Aussehen-Bedienfeld sind . Diese Grenzen sind unterschiedlich, dass Grenzen unterschiedlich sind. In dieser Grenze haben Sie eine bestimmte Kontrolle, aber das ist eine feste Sache. Das erste Ding ist standardmäßig begrenzt. Es ist keine. Das ist der ausgewählte Querbereich , der Standardwert ist. Es ist kein Rahmen ausgewählt. Zeig es dir eins nach dem anderen. werden wir auf diese unregelmäßige Grenze klicken. Wenn ich auf den regulären Rand klicke, kannst du jetzt sehen, dass der Rand da ist, du siehst den weißen Rand. Gibt es einen weißen Rand? Warum die weiße Grenze? Weil das Aquarell Standard ist. Wenn Sie in diesem Bereich im Optionenbedienfeld den Rahmen auswählen, wählen Sie einen beliebigen Rahmen aus. Und die Farbe ist Standard. Es bedeutet, dass es eine weiße Farbe hat. Jetzt klicke ich auf Farbe und gegen ein vordefiniertes Farbset ist da. Wenn ich auf Gefahr klicke, wenn ich nur diese bestimmte Überschrift auswähle, können Sie sehen, dass der Rahmen nun wieder diesen Rahmen auswählt. Und was ich jetzt tun werde, werde ich diesen speziellen Bereich auswählen, der abgerundet ist. Es bedeutet, dass die Zeitalter abgerundet sein werden. Jetzt können Sie sehen, dass die Kanten abgerundet sind. Danach besteht die andere Option darin, die Grenze sogar kreisförmige Form zu kreisen. Die nächste Option ist ausgefüllt. Wenn ich auf die Pillenoption klicke, siehst du jetzt, dass die Grenze gut aussieht, ziemlich gut. Aber nur die Ecken sind in Pillenform und die Pillenform. Jetzt wähle ich diese Rückfahrt erneut aus. Und jetzt sehen wir uns die Schattenoption an. Wenn ich in den Schatten komme, können wir klein, normal, groß sehen. Und wenn ich auf Regular klicke, sieht man, dass ein Schatten da ist. Jetzt ändern wir die Hintergrundfarbe davon. Ich wähle diesen Bereich und gehe zurück zur Impedanz. Und ich entferne einfach die Hintergrundfarbe von hier und klicke einfach auf Reset und damit sie jetzt weiß ist damit wir den Schatten und all das sehen können. Wenn ich den Schatten entfernt habe, wähle ich diese Überschrift aus. Wenn ich den Schatten entferne, machen wir ihn standardmäßig. Man kann sehen, dass der Schatten das nicht ist. Du bist genau dann, wenn wir den Schatten hier anbringen. Der Schatten kommt nur im unteren Teil. Es wird nicht in dem Winkel kommen, den du willst. Wenn du diesen bestimmten Schatten willst, musst du zum Aussehen gehen. Wenn ich den Schatten als normalen Schatten einschalte, nur um im unteren Abschnitt dieser Überschrift das Auge zu behalten . Wenn ich einfach auf das Regular klicke, siehst du jetzt, dass der Schatten da ist. So funktioniert der Schatten in der Deklaration unter Optionenbedienfeld. Und ich habe auch einen großen Schatten, wenn ich auf groß klicke, wird die Fläche des Schattens zunehmen. Jetzt habe ich auch einen Hintergrund. Wenn ich klicke, wenn ich hierher komme und wenn ich auf den Hintergrund klicke, dann klicke ich auf Warnung und du kannst sehen, dass der Hintergrund wärmt, aber wir können diesen Text nicht sehen. Der Grund dafür ist der Text auch Warnung. Lass uns eine andere Farbe sehen. Mal sehen wir uns die Primäre an. Jetzt können Sie sehen, dass der Primärbereich da ist, der Rahmen gelesen wird, der Hintergrund ist primär und der Text wärmt sich. Lasst uns das ändern. Lassen Sie uns die Grenze warnen. Die Randfarbe wird gewarnt. Die Schatten regelmäßig, und der Hintergrund wird erneut gewarnt. So wird die gleiche Farbe da sein. In der Textfarbe wird die Farbe von Warnung zu Licht geändert . Jetzt sieht es gut aus, ziemlich gut. So funktioniert die Textdekoration. Jetzt haben Sie die Möglichkeit eines Gradienten auch über ein Jahr. Sobald Sie dem Hintergrund eine Farbe geben, erhalten Sie diese Verlaufsoption direkt darunter. Was genau der Farbverlauf in seinem Bein größer ist, du kannst keine Farbe auswählen, die du willst. Was wird passieren? Was ist diese Warnung? Die Farbe, die Sie ausgewählt haben Warnung, der Farbverlauf wird in linearer Form vorliegen und es wird wie eine helle Farbe oben und die dunkle Farbe unten sein, es wird so aussehen. Also schalte ich einfach diesen Farbverlauf ein und du kannst sehen, dass oben eine leichte Lichtfarbe ist. Und die dunkle Farbe ist, dass die ursprüngliche Warnfarbe darum herum ist. Okay. Ich zeige es dir also in einer anderen Farbe. Vielleicht ist es in dieser Farbe nicht sichtbar. Wählen wir also den dunklen aus. Jetzt können Sie sehen, dass es eine helle Farbe gibt? Ich schalte das einfach aus. Sie können den Unterschied, Farbverlauf, den Farbverlauf von sehen. Farbverlauf ist, wie genau die Deklarationsauktion funktioniert. Sie haben einige vorgefertigte Grenzen über ein Jahr. Dann hast du eine Randfarbe. Sie haben dort die Schattenoption, dann haben Sie einen Hintergrund. Sie können die Hintergrundfarbe ändern , bei der es sich um eine vordefinierte Hintergrundfarbe handelt, und dann können Sie den Farbverlauf auch aktivieren. Das ist alles in diesem Video, die Dekorationsoptionen sind erledigt. Und für jede Komponente in der Dekorationsoption bleibt gleich, es wird sich nicht ändern. Im nächsten Video sehen wir Tooltips. Wir sehen uns also im nächsten Video. 17. Tooltipps: In diesem Video werden wir mehr über Tooltips erfahren. Klicken wir also auf diesen Tooltip hier, um diese Option zu erweitern. Klicken wir also auf den Tooltip. Und im Tooltip finden Sie eine Option, in der Tooltip nicht vorhanden ist. Wenn Sie jedoch den Tooltip aktivieren, erhalten Sie einige weitere Optionen. Was genau ist Tooltip? Nehmen wir an, in der Vorschau, wenn der Benutzer den Mauszeiger auf den bestimmten Bereich bewegt, werden zusätzliche Informationen für dieses spezielle Tool angezeigt , das als Tooltip bezeichnet wird. Was auch immer ich gesagt habe, dass es keine Definition von Tooltip im Allgemeinen ist, habe ich dir gesagt. Okay, also schalte ich einfach diese Tooltip-Option ein und jetzt sind zwei weitere Optionen vorhanden. Eine davon ist die Platzierung, wo genau die Platzierung des Tooltips und der Titel sein wird. Was sollte der Titel für den Tooltip-Titel sein, in dem Sinne dessen, welche Informationen in die Tooltip-Platzierung kommen ich oben behalten werde. Und für diesen speziellen Tooltip-Titel tippen wir diese Leichtigkeit ein. Überschriftenelement, VSS von fünf in Klammern. Beta. Ich klicke einfach auf Interessen eingeben und herausfinden, was in der Vorschau passieren wird. Der Tooltip wird platzen, aber du bist auch, er wird platzen, aber er wird irgendwo hier im unteren Bereich erscheinen oder sie nehmen einfach meine meisten Spitzen und ich werde ihn hier halten. Dann ist es da. Es zeigt, dass dies dann ein überschriftenes Element der Schreibweise oder falsch ist. Korrigieren wir die Schreibweise. Dies ist ein Überschriftenelement, e LEM, NP, Überschriftenelement. Okay, also wie geht's wieder zurück? Dies ist also ein Überschriftenelement in BSS und BS Phi Beta. Bss ist Bootstrap Studio und BS Five 0s Bootstrap-Version. Also denke ich, dass dies eine Überschrift ist und sollte nicht da sein. Es ist grammatikalisch falsch. Dies ist also eine Überschrift eliminiert. So funktioniert der Tooltip. Jetzt können wir die Platzierung ändern auch Platzierungen sind wie oben, unten, links und rechts. Sie können die Platzierung des Tooltips ändern. Lassen Sie uns die Vorschau sehen. Und in dieser Vorschau wirst du verstehen, wie genau es funktioniert. Um die Vorschau der Website zu erhalten. Die Vorschau Button ist einfacher und ein Pfeil wird da sein, klicken Sie einfach auf diesen Pfeil. Die zweite Option besteht darin , als deaktiviert anzugeben, daher müssen wir diese Option aktivieren. Klicken Sie also einfach hier auf diesen Trigger, und jetzt können Sie die Vorschau in Klammern sehen, auf der sie sich befindet. Wenn Sie auf klicken, wird nur eine Vorschau angezeigt. Klicken Sie einfach auf Vorschau. Jetzt ist es an und jetzt klicke ich auf diesen Button. Ihr Standard-Webbrowser wird also gestartet und er zeigt mir die Vorschau an. So genau wird unsere Website suchen. Ich schätze, ich bringe einfach meinen Mauszeiger über diesen Bereich. Und jetzt können Sie sehen, dass der Tooltip darin besteht, dass dies ein Überschriftenelement in BSS off BSS Five Beta ist . Lasst uns die Platzierung ändern. Wenn ich die Platzierung nach unten gewannen würde. Und wieder, wenn ich im Browser dorthin gehe , ohne ihn zu aktualisieren , ist es bereits aktualisiert. Ich bringe meinen Mauszeiger hier rüber und Sie können sehen , dass der Tooltip keine bestimmte Länge hat. Sie können alles in den Tooltip eingeben. Dafür gibt es keine spezifische Zeichenbegrenzung. Wir haben die Platzierung von y, denn wie sagen wir, wenn ich meinen Mauszeiger darauf schwebe ist die Platzierung jetzt unten. Und nur weil die Platzierung unten ist, können Sie den Absatz nicht sehen. Ein Teil des Absatzes ist versteckt wissen, sagen wir oben auch, wir haben etwas Besseres. Was wir tun können, ist wie möglich, wir können die Platzierung nach links oder rechts auswählen. Wählen wir also die richtige Platzierung aus. Und wenn ich jetzt noch einmal zum Browser zurückkehre und wenn ich meinen Mauszeiger darüber fahr , können Sie sehen, dass sich die Platzierung auf der rechten Seite befindet. Dies ist der Tooltip und Sie können alles erstellen, um uns spezifische Informationen zu geben. Die meiste Zeit werden Tooltips für den Bereich verwendet , in dem sich das Fragezeichen befindet, Sie wissen nicht, was genau es ist. Sie nehmen also einfach den größten Punkt auf das Fragezeichen und sofort, wenn zusätzliche Informationen herauskommen , ist dies der Tooltip. Also werden wir dieses Video hier beenden. Daher wird auch die Tooltip-Option abgedeckt. Um Flexbox zu verstehen, müssen wir viel mehr über Bootstrap-Zeile, Spalte wissen. Viele Dinge, die wir wissen müssen, wenn wir diesen bestimmten Abschnitt abschließen, wenn wir in der Lage sein werden, ein vollständiges Design zu erstellen. Danach werden wir sehen, was genau die Flexbox 0s ist, zwei Dinge, auf die wir uns um ein paar Videos kümmern werden , also Reaktion auf Display und Flexbox. Diese beiden Optionen werden wir später in einem anderen Abschnitt sehen. Im nächsten Video sehen wir die Option Barrierefreiheit. Wir sehen uns im nächsten Video. 18. Barrierefreiheit: Es war ein LED-Seed, die Barrierefreiheitsoption. Dies ist die letzte Option im Optionenbedienfeld. Ich klicke auf Barrierefreiheit. Und hier sieht man Sichtbarkeit. Und Sie haben zwei Möglichkeiten, die sichtbar und unsichtbar sind. Und die letzte Option ist nur Screen Breed. Dann musst du das anschalten wie genau es funktioniert, sage ich dir. Wählen wir also diesen speziellen Text hier aus. Nach dem Projekt haben wir diesen Text und die Unteilbarkeit. Wenn ich auf „sichtbar“ klicke, ist es sichtbar. Offensichtlich. Wenn ich auf unsichtbar klicke, wird das Lehrbuch unsichtbar sein. Aber es ist nicht versteckt. Die Komponente, das Element, ist nicht ausgeblendet. Die Sichtbarkeit ist unsichtbar. Es bedeutet also, dass Text da ist, aber er ist unsichtbar. Die zweite Option wird schreibgeschützt geschrien. Wenn Sie die Option zum Lesen des Bildschirms aktivieren, können Sie sehen, dass der Absatz jetzt ausgeblendet ist. Der Absatz ist jetzt versteckt, aber er ist immer noch da. Jetzt ist es in Scream bleed Auktionsereignis. Wenn Sie die Sichtbarkeit auf sichtbar schalten, sie nicht sichtbar, da sie nicht schreibgeschützt geschrien wird. Was ist der Mittelwert nur bei gescreentem Blei? Es gibt ein paar Websites, die für blinde Menschen gedacht sind , aber sie können zuhören. Es gibt heutzutage so viele Websites, es gibt Browser auch so, dass sie eine bestimmte Option haben, die als Screen Read bezeichnet wird. Der Text, zu dem tot ist, der die Option zum schreibgeschützten Bildschirm hat. Der Browser liest diesen bestimmten Text nur auf der Nachrichtenwebsite, Sie können sehen, dass es sich um eine Audiodatei orientiert. Sie können einfach auf den Bildschirm klicken, ihn lesen und den Text lesen. Das heißt nicht, dass es zum Teil den gesamten Text von der Website aufgezogen hat. Es ist schreibgeschützt die Text-Hexen im Tag namens screen read. Die Option zum Lesen des Bildschirms dient dazu, den Textinhalt in das Audioformular mit Hilfe der Browserunterstützung zu konvertieren den Textinhalt in , die als Option „ Schreien lesen“ bezeichnet wird. Und das ist die Sichtbarkeit, aber das sind die Barrierefreiheitsoptionen IIS. Und wir schließen den Abschnitt hier drüben und wir sind fertig mit den Optionen. Im nächsten Video sehen wir die dritte und letzte Option im Beweisfeld , das Animation ist. Lasst uns also anfangen , diese Emission aus dem nächsten Abschnitt zu lernen . 19. Animation Scroll: Oh gut. In diesem Abschnitt starten wir unser Animations-Panel. Dies ist der Ort , an dem wir unsere Elemente und Komponenten animieren werden . Dafür habe ich dafür ein kleines Projekt erstellt. Sie müssen zu Ihren BSS-Dateien gehen. Und darin finden Sie einen dritten Ordner, der Animation genannt wird. In der Animation werden Sie feststellen, dass dies Designdatei ist, die auch als Animation bezeichnet wird. Sie müssen diese Datei öffnen. Sobald Sie diese Datei geöffnet haben, erhalten Sie dieses Design jetzt im Animationsfenster, es werden keine Komponenten ausgewählt, da ich erhalten Sie dieses Design jetzt im Animationsfenster, es werden keine Komponenten ausgewählt, da ich keine Komponente über u ausgewählt habe. erste Komponente. Dies ist das Übersichtsfeld. Und im Übersichtsfenster sehen Sie , dass es einen Container gibt. Dies ist eine Komponente, und wir haben zwei Elemente darin, dass Überschriftelement und ein Absatzelement ist. Dann haben wir Rho, das ist eine Klasse, also können wir es als Komponente in diesem Bootstrap-Studio nennen . Innerhalb der Zeile haben wir mehrere Spalten, wir haben Spalte, Spalte, Spalte. Sie können sehen, dass Spalten vorhanden sind. In jeder Spalte haben wir eine Karte. Sie können in jeder Spalte wieder sehen , die wir einen Einkaufswagen und eine Einblickkarte haben. Wir haben dieses Bild. Dann haben wir noch eine, eine Komponente, die vernarbter Körper ist, dann in die Richtung geht. Und in dieser Überschrift haben wir Link und Absätze. Dies ist also ein völlig gut strukturiertes Nest einer Komponente. Was wir hier tun müssen, ist, dass wir alle Karten in diesem speziellen Design animieren werden. Also wähle ich zuerst diese Karte aus und lasst uns anfangen, unsere Animation zu verstehen. Sobald ich diese Karte jetzt auswähle , kannst du im Animationsbereich sehen, du siehst, dass eine Option vorhanden ist, die ausgelöst wird. Und wenn ich darauf klicke, siehst du drei Optionen. Einer ist Scroll, einer ist schweben, und einer ist Laura. Was ist grausam? Grausam heißt Scrollen. Dies ist das Scrollen der Seite. Das ist Scroll. Wir können unsere Seite auch auf der Schriftrolle animieren. Wenn Sie die Seite scrollen, welche Komponenten oder welches Design auch immer vor sich liegen, wird es auf animierte Weise vorliegen. Strenge ist Scroll, dann wird der Typ gefüllt. Jetzt können Sie sehen, sobald ich eine dieser Optionen auswähle , ist einfach scrollen, schweben und laden. Du siehst hier eine Sternmarke. bedeutet, dass diese bestimmte Komponente jetzt begrenzt ist und wir dann Animationsarten haben. Wenn ich darauf klicke, sehen wir verblassen, verblassen, runter und all das. Wenn ich auf Feed klicke, wenn du sehen willst, wie genau er aussieht, klicke einfach auf Play, dann kannst du sehen, wie genau es im Webbrowser kommen wird. Sie können sehen, dass es sofort erscheint. Wenn Sie genau sehen, können Sie sehen, dass die Dauer sehr geringer ist, um die Dauer zu kontrollieren, wir haben die Möglichkeit der Dauer. Wenn Sie darauf klicken, haben wir 50 MS ist Millisekunden. Es beginnt bei 50 und den Vielfachen von 50, wir können bis zu dreitausend steigen. Dreitausend MSE sind drei Sekunden. Wenn ich auf 3 Tausend klicke und wenn ich auf Play klicke, kannst du sehen, dass es drei Sekunden dauert , um vor dir zu kommen . Sie können also Änderungen vornehmen. Wählen Sie 1 Tausend MS aus, es bedeutet 1 Sekunde. Und wenn ich auf Play klicke, siehst du in 1 Sekunde, das Auto kommt vor dir. Dies sind die Scroll-Effekte. Was wir tun werden, wir werden runterkommen und wir werden die Scroll-Animation auf diese für Fotos über Jahre anwenden die Scroll-Animation auf diese . Es gibt vier Fotos. Das erste ist das, also öffne ich einfach diese Spalte. Ich wähle diese Karte aus. Ich komme zum Scrollen und ich werde die Dauer auf 1 Sekunde erhöhen. Scheint so, wie ich es dem zweiten geben werde. Aber was wir tun werden, werden wir einen anderen Typ verwenden, wenn er verblassen ist. Sehen wir uns also die Vergrößerung und die Dauer von 1 Sekunde an. Lasst uns Teller machen. Mal sehen, wie genau es aussieht. Oh, okay. Dann komme ich den dritten runter. Ich wähle die Schriftrolle aus. Lassen Sie uns noch einen geben, wie rutschen Sie nach oben. Die Dauer wird wieder sein. Und Lee, so wird es dort aussehen. Der letzte, der letzte, diese Karte scrollen, Mal sehen. Jeder andere Effekt ist, dass die Folie da war. Richtig umdrehen? Und spiel einfach. Wir müssen die Dauer auf 1 Sekunde verwenden. Nun, Lee, okay, wir haben vier verschiedene Animationstypen auf vier verschiedene Karten gegeben . Jetzt sehen wir uns die Vorschau an. Ich klicke auf den Browser. Und wenn wir jetzt scrollen, können Sie sehen, wann es um die Sichtbarkeit geht. Dies bedeutet, dass dies das Ende des Browsers ist. Scrollen Sie nach unten und ich werde dies aktualisieren , damit die Seite neu geladen wird , damit die Animation erneut abgespielt werden kann. Und wenn ich jetzt scrolle, kannst du sehen, dass es nichts gibt, aber sobald ich ein bisschen mehr scrolle, ist die Animation da und du kannst sie jetzt richtig sehen. Lasst es uns noch einmal machen. Ich kann es sehen. Jetzt sieht es nicht gut aus, weil wir allen vier Karten unterschiedliche Animationen gegeben haben , aber es wird gut aussehen, wenn wir allen Karten den einzelnen Animationstyp geben . Lassen Sie uns jedem den einzelnen Animationstyp wie umgedreht geben. Ändern wir die Art davon. Schlüpfen Sie richtig? Wählen Sie dies noch einmal aus. Flip Übung. Wenn ich auf Play klicke, sehe ich, ja, jeder hat den gleichen Typ. Jetzt. Lasst es uns auffrischen. Ja. Scrollen Sie jetzt nach unten, scrollen Sie nach oben. Jetzt können wir wieder sehen, dies eine Scroll-Animationsarbeit hält. Sehen wir uns nun die anderen Optionen in der Schriftrolle an. Wir haben auch die Möglichkeit, Verärgerungen zu machen, und wir haben auch die Möglichkeit, zu verzögern. Verzögerung bedeutet, dass wir es verzögern können . Wenn ich jetzt spiele, siehst du, dass die Verzögerung da ist. Also fängt es sofort nicht an. Es dauert 250 Millisekunden und dann wird es beginnen. Ab sofort werden wir es nicht schaffen. Einmal spielen bedeutet, wenn die Animation geladen wird. Und selbst danach, wenn der Benutzer nach oben und unten scrollt, wird die Animation nur einmal abgespielt . Es wird nicht immer wieder spielen. Wir zeigen dir, dass du die Animation sehen kannst. Jetzt habe ich nach oben gescrollt. Wieder scrolle ich nach unten, Animation ist wieder da gegen nach oben gescrollt, gegen erneut nach unten zu scrollen. Sie können die Animation sehen. Aber lassen Sie uns diese erste auswählen und ich klicke einmal auf Spielen. Ich komme zurück zum Browser. Jetzt hat es einmal gespielt, scrollen Sie nach oben, scrollen Sie nach unten. Sie können sehen, dass dies gleich bleibt, aber diese drei Karten hatten die Animation. Wieder zeige ich dir, scrolle nach oben, scrolle nach unten. Jetzt können Sie sehen, dass die Animation da war, aber diese wurde nicht gespielt, weil wir ihr den Befehl als Spiel gegeben haben. Einmal. Danach haben wir eine weitere Option namens Run on mobile. Das bedeutet, dass selbst auf dem mobilen Bildschirm die Animation da sein sollte. Das war's, sonst nichts. Dies sind die Optionen im Bildlauf. Dies war die Scroll-Animation. Im nächsten Video sehen wir die Hover-Animation. Wir sehen uns im nächsten Video. 20. Animation Hover: Sehen wir uns jetzt die Hover-Animation an. Wir werden daran arbeiten für die Karte. Dies ist die erste Karte. Ich wähle diesen Cartier aus. Wählen Sie nun diesen Hover-Trigger aus. Also klicke ich auf Hover. Jetzt haben wir Grenzen der ersten Welt. Also klicke ich auf Grenzen. Und wenn ich auf Play klicke, wird dieser Effekt auftreten, wenn der Benutzer auf dieser bestimmten Karte schwebt. Wir haben auch Flash. Es wird so blinken, und dann haben wir Puls. Also wird es so kommen. Ich bleibe am Puls schaut mir auch die anderen Optionen an. also zurück zum Browser komme, wenn ich hierher komme und wenn ich mit dem Mauszeiger schwebe, kannst du sehen, wann immer der meiste Zeiger Howard ist, kannst du diese Animation sehen. Das einzige ist, dass Sie nicht alle drei Animationen gleichzeitig anwenden können . Für eine einzelne Komponente müssen Sie nur mit einer gehen. Dies ist Puls und wählen Sie erneut schweben. Und wenn ich etwas anderes auswähle, schütteln Sie und klicken Sie dann auf. Sie können sehen, dass die Animation da ist. Aber lasst uns den Puls für alle vier auswählen. Der Warenkorb kommt zum Animationsbedienfeld, Mauszeiger und kehren Sie zur Vorschau-Schaltfläche zurück. Jetzt kannst du sehen, ja, da sind wir los. Das war Hover und wieder hast du diese Option auf Mobilgeräten laufen lassen. Das bedeutet, dass die Animation auch auf Mobilgeräten funktionieren sollte. Das ist alles. Sie werden keine anderen Optionen wie Verzögerung und Dauer und all das sehen , weil es behoben ist Sie haben nur diese Menüoptionen wie ein Trigger. Im nächsten Video sehen wir den Load-Animations-Trigger, und das wird das letzte Video dieses Abschnitts sein. Wir sehen uns also im nächsten Video. 21. Animation: Okay, also fangen wir mit unserem Herrn an. Arbeiten wir an dieser Karte , die oben steht. Also klicke einfach auf Alles zurücksetzen Ich werde die Animation von hier entfernen. Ich wähle die Ladeoption aus. Herr bedeutet, wann immer die Seite geladen wird, welche Animation vor den Benutzer kommen sollte. Auch hier haben wir diese Optionen , die Bounce-Blitzlampen sind. All diese Optionen gibt es. Wählen wir von hier aus eine der Optionen aus. Wählen wir die Grenzen aus und klicken auf Play. Und Sie können sehen, dass diese Animation beim Laden der Seite einmaligen automatisch abgespielt wird. Wenn du in Schleife spielen willst , haben wir auch dafür die Möglichkeit. Aber für die Schleife wählen wir diesen Absatz aus. Wählen Sie den Absatz aus und wählen Sie den zu ladenden Trigger aus. Dann wählen wir diese Flash-Option aus. Wenn ich auf Play klicke, siehst du, dass die Flash-Option vorhanden ist. Wenn ich auf die Schleife klicke, wird diese Animation in einer Schleife abgespielt , sobald die Seite geladen ist. Und die letzte Option wird auf Mobilgeräten ausgeführt. Dies bedeutet, dass diese Animation auf Mobilgeräten ausgeführt werden sollte. Aber sehen wir uns die Vorschau hier drüben an. Die Seite ist geladen und jetzt können Sie sehen, dass die Animation kontinuierlich in einer Schleife abgespielt wird. Dann werde ich das aktualisieren und Sie können sehen, ja, Sie können sehen, dass dieser bestimmte Effekt da war. Das ist alles im Animations-Panel. So viele Animationen können Sie für Ihre Komponenten, Elemente, Tags und was auch immer es ist. Schauen Sie sich alle Optionen im Animationsbedienfeld an. Und wenn Sie Fragen haben, Sie mir eine Frage und ich werde versuchen, Ihnen so schnell wie möglich zu antworten. Die meiste Zeit antworte ich Ihnen in 24 Stunden. Aber aufgrund einer anderen Situation nehme ich mir vielleicht mehr Zeit, aber es wird Ihnen antworten. Das ist sicher. Ab sofort haben wir all diese drei Panels abgedeckt , also Darstellungspanels, Optionsfelder und Animationsbedienfeld. Jetzt haben wir in den Panels nichts mehr zu sehen. im nächsten Abschnitt Beginnen wir im nächsten Abschnitt mit einigen Technikalitäten von Bootstrap. Wir sehen uns im nächsten Video des nächsten Abschnitts. Tschüss. 22. Verstehen von Reihe und Spalte: Lassen Sie uns nun verstehen, was das Bootstrap-Grid-System ist. Bootstrap-Grid-System ist dafür verantwortlich, Bootstrap zu einem Handy zu machen. Erste Antwort: WHO Framework einen Rasterinhalt aus zwei Komponenten. Erstens, einfache Zeile, und zweite ist Spalte. Eine Reihe teilte sich in 12 Raster auf und ändert ihre Größe automatisch je nach Gerätegröße. Nehmen wir an, wir haben eine Reihe genommen und darin haben wir zwei Spalten genommen. Es wird automatisch in zwei Teile geteilt nimmt jeweils sechs Gitter auf. Nehmen wir an, wenn wir nicht zwei Spalten mit zwei verschiedenen Größen wären, was insgesamt 12 Raster ergibt. Jahr ist das magische Jahr. Wir können jeder Spalte sagen, wie viele Raster es dauern kann. Nehmen wir an, in der ersten Spalte brauchen wir einen großen Bereich im Vergleich zur anderen. So können wir der ersten Spalte sagen, dass sie acht Raster aufnehmen soll. Dann nimmt die andere Spalte automatisch die restlichen vier Gitter auf, wodurch sie insgesamt 12 Rastersystem bilden. Fall, dass wir Ed-Noten an die erste Spalte und sechs Raster an die zweite Spalte geben . Dann wird die zweite Spalte unter die erste Spalte liegen da sie die Summe von 12 Rastern überschritten hat. Auf diese Weise können wir eine perfekte Zeilenspaltenstruktur erstellen. Dies werden Sie genauer verstehen, wenn wir mit der Gestaltung einer Website in der Bootstrap Studio-Software beginnen . 23. Lets Erste Schritte: In früheren Videos haben Sie das grundlegende Verständnis von Bootstrap Studio kennengelernt . Und die wichtigste Übung hier drüben ist dass Sie Bootstrap-Studio-Version 5.6 gesehen haben. Aus wenigen Gründen konnte ich keine Videos aufnehmen. Und jetzt danach werden wir in Bootstrap Studio 5.8 lernen. nicht allzu besorgt, dass ich nicht so viele drastische Änderungen im Bootstrap-Studio gemacht habe. Die Änderungen sind so, als ob kleinere Bucks Fixierung durch zusätzliche Optionen vorhanden ist, die wir in den weiteren Videos sehen werden in den weiteren Videos sehen weil wir ab sofort an Projekten arbeiten werden. Wir werden an hauptsächlich drei Projekten arbeiten. Erstens wird eine einfache normale einseitige Website sein. Zweitens werden wir eine Website erstellen, Sie als Einzelperson ein Geschäft mit dem Website-Design beginnen können. Ich werde Ihnen beibringen, wie Sie Ihre eigene Website entwerfen, wie Sie wenige externe Dinge wie Ticketrennen, Online, Chatten, offizielle E-Mails, Hosting der Website und all das integrieren Online, Chatten, offizielle E-Mails, können. Endlich werde ich Ihnen beibringen, wie Sie eine LMS-Systemwebsite entwerfen , auf der wir beide Abschnitte, den Benutzer und das Admin-Ende behandeln den Benutzer und das Admin-Ende sobald Sie mit dem Benutzer und dem Administrator fertig sind. Und wenn Sie ein weiteres Modul wie ein Instrument erstellen möchten , wird es Ihnen leicht fallen, dies selbst zu tun , ohne viel Zeit zu verschwenden. Fangen wir an. 24. Navbar des Projekts One: Zu diesem Zeitpunkt haben Sie also etwas über die Grundlagen von Bootstrap Studio gelernt. Und während ich dieses Video aufgenommen habe, gab es eine große Lücke dazwischen. Dies ist der Grund, warum wir auf Virgin 5.6 angehalten haben und jetzt ist der Bootstrap auf Version 5.8. Aber nichts zur Sorge, es gibt keine große Veränderung in der Software. Die Änderungen sind, sie haben behoben, einige kleinere Fehler, haben die Leistung von Bootstrap Studio verbessert, und sie haben auch etwas Aussehen und Gefühl und all diese Dinge verändert . Das zeige ich dir zuerst und dann werden wir weitermachen. Und einige Dinge, bei denen sie Änderungen haben, wie sie eine Bootstrap-Symbole-Bibliothek hinzugefügt haben. Und jetzt ist die Bootstrap-Version dieses Bootstrap-Frameworks jetzt 5.1. Das Bootstrap-Framework wurde ebenfalls aktualisiert. Ohne viel Zeit zu verschwenden. Fangen wir direkt an und schauen wir uns an, was wir in diesem Video entwerfen werden , da wir mit der Gestaltung der Website von diesem Abschnitt aus begonnen haben der Gestaltung der Website von diesem Abschnitt aus Zwei Projekte werden dort sein. Eine davon ist ein einziges einseitiges einfaches Website-Design. Das zweite Projekt , das wir starten werden, ist ein LMS-System , in dem wir sowohl den End-Admin als auch das Benutzerende sehen werden . Dieses Video-Tutorial. Wie Sie bereits wissen, möchten wir ein neues Design erstellen. Was wir also tun werden, klicken wir hier einfach auf neues Design, und dann werden wir dieses spezielle Design nennen. Ich nenne das als deinen Namen. Jetzt ist die Bootstrap-Studio-Version standardmäßig Version 5.1, und wir sind auch mit dieser Version einverstanden. Standardmäßig wurde die leere temporäre Option ausgewählt, und das ist es, was wir wollen. Wir klicken einfach auf Create now, design. Wir haben unsere leere Webseite vor uns. Zuvor zeige ich Ihnen, was genau wir entwerfen werden und welche Ressourcen wir verwenden werden. Was müssen Sie tun, ist, dass Sie in den Hauptordner Ihres BSS-Kurses gehen können . Darin finden Sie BSS-Dateien und dann finden Sie die vierte Anzahl von Ordnern, die Hash für Unterstrich fortsetzen a. In diesem BSS finden Sie ein Design wieder aufnehmen. Ich habe das bereits für meine Referenz entworfen, ich werde auf dieses Design schauen und es wieder erstellen. Und die Ressourcen , die wir verwenden werden, erleichtern sich im Ressourcenordner. Das sind also die Bilder, die wir dort verwenden werden. Ich übernehme das hier und wähle alle Drag & Drop im Bootstrap-Studio aus. Also wurden sieben Bilder importiert. Und jetzt öffne ich die BSS-Datei über dich, der Lebenslauf einen Punkt bss, ich nannte es als Lebenslauf, aber es ist nicht als Lebenslauf aufgetaucht. Ein Blick, das werden wir schaffen. Also sehen wir uns dies nur einmal in diesem Browser an. Zeig weniger. Ich will das nicht. Das ist es was wir Ihren Namen gestalten werden. Du kannst deinen Namen hier drüben angeben. Wir werden also drei Abschnitte in diesem speziellen Stück haben, dies ist eine einseitige Website, die fortfahren und Kontakt aufnehmen wird. Wenn Sie auf eine Tafel klicken, sehen Sie eine reibungslose Schriftrolle wenn sie zum Abschnitt Über uns gelangen und ich klicke auf Kontakt. Es wird zum Kontakt-, Kontaktbereich kommen und wieder nach Hause kommen. Das werden wir entwerfen. Es wird eine Navbar eine Mittellinie geben, eine zentrale Komponente dazwischen wo Sie Ihren Namen eingeben, was ich mache Bild. Dann sind drei Karten da, einige Symbole sind da, der Nevada-Bereich, dann Brennstoff-Fotogalerien, dann ist das Kontaktformular mit diesem speziellen mit all diesen Kontaktinformationen und allen da speziellen mit diese Dinge. Und dann haben wir eine Fußzeile und ja, das ist alles. Fangen wir sehr schnell an, diese Website zu entwerfen. Okay, ich komme zurück ins Bootstrap-Studio. Das erste, was wir tun müssen, ist unsere Navbar zu importieren. Also tippe ich im Laufe des Jahres Nav. Die zweite Option ist Navbar Drag & Drop innerhalb des Body-Tags. Jetzt haben wir die Navbar. Wählen Sie jetzt die Navigationsleiste aus, gehen Sie zu Optionen und schalten Sie die Fluidoption aus, da wir nicht möchten, dass die Flüssigkeit da ist. Jetzt können Sie im Markenbereich Ihren Namen eingeben. Ich gebe einfach deinen Namen oder deine drei Abschnitte ein, die wir wollen, ist gezwungen zu Hause. Der zweite, den wir wollen, ist ungefähr der dritte, was wir nicht waren. E ist Kontakt. Okay? Das ist also vorerst alles. Wir werden Schritt für Schritt gehen. In diesem Video werden wir nur den Abschnitt Navbar behandeln. Jetzt dieses Haus über und kontaktiere. Ich will nicht, dass ich nicht auf der linken Seite will, ich will das auf der rechten Seite. Was ich tun werde, wähle ich die Navbar aus. Navbar ist jetzt ausgewählt und welchen Bereich ich auswählen wollte. Jetzt wollte ich dieses Navi auswählen. Sobald ich dies ausgewählt habe, können Sie jetzt zu Optionen kommen und Sie können jetzt in der Ausrichtung sehen , dass ich die Endausrichtung auswählen werde. Jetzt ist es also nicht das Ende. In der Bootstrap-Five Version nennen wir es nicht als links, mittig und rechts. Wir nannten es als Start, Center und End. Ich klicke einfach auf Ende. Und das wollten wir, oder? Das ist also alles, was dieser spezielle Bereich erledigt ist. Bevor du vorwärts gehst. Die erste und wichtigste Sache, das Erscheinungsbild unserer Website, kommt mit der richtigen Schriftart. Was ich tun werde, wähle ich dieses Body-Tag aus, OER. Und im Bereich Aussehen komme ich zum Schriftbereich und füge eine Schriftart hinzu, indem ich die Schriftfamilie verwende. Die Schriftart, die ich einfach benutzen werde. Das hier. Ich schalte diese Option einfach ein und klicke auf Speichern. Das ist alles. Und dann wähle ich einfach dieses Formular von Ihnen aus, diese Schriftart, die wir in diesem speziellen Projekt verwenden werden . Okay, vorwärts wähle ich einfach eine Navigationsleiste aus. Jetzt, direkt navbar Ich wähle sofort nach dem Körper aus, welche die nächste Komponente ist . Jetzt komme ich zum Hintergrundbereich und wähle im Farbbereich einfach die weiße, extreme weiße Farbe aus. Und reduzieren wir die Deckkraft auf 80%. Sie können jetzt sehen, dass RGBA für Alpha steht und 0,8 80% ist. Und das ist alles, was ich einfach auf Speichern klicke. Und jetzt ist der Navbar-Bereich fertig. Ich höre dieses Video auf. Und im nächsten Video werden wir uns ansehen, wie der nächste Teil dieser Website gestaltet wird. 25. Home Abschnitt von Projekt One: In diesem Video werden wir vorankommen und zwei neue Dinge in Bootstrap Studio studieren. Eine davon ist die Bildbearbeitung unter Verwendung externer Software, und diese Bearbeitung wird direkt mit dem Bootstrap-Studio verbunden. Mal sehen, wie wir das machen können. Was müssen wir hier tun, ist, dass ich zuerst einen DV hier rübernehme. Wir geben einfach div ein. Div wird ein Div nehmen und dieses Body-Tag überfallen. Mein Ds ist, du bist jetzt, jetzt in diesem div werde ich ein Bild-Tag nehmen, also gebe ich einfach IMG ein und ich nehme dieses Bild-Tag und ich werde all das Do-Tag fallen lassen. Jetzt ist das Image-Tag hier drüben. Und jetzt müssen wir dieses Bild Nummer sechs in diesem speziellen Bereich platzieren . Also doppelklicke ich einfach hier rüber. Ich wähle dieses Bild aus und klicke auf „Okay“. Was jetzt passiert, OU, wir wollen ein quadratisches Bild, aber die Höhe dieses Bildes ist zu groß. Auf traditionelle Weise sollen wir das in die Bildbearbeitungssoftware wie Photoshop importieren, wenn Affinität oder eine Bildbearbeitungssoftware dort ist Bildbearbeitungssoftware wie Photoshop importieren, wenn . Wir müssen das Bild bearbeiten, Bild nach der Bearbeitung exportieren und es erneut in die Bootstrap Studio-Software importieren und dann verwenden. Aber jetzt haben wir eine Abkürzung in ihnen. Mal sehen, wie das geht. Was ich jetzt tun werde, gehe ich zur Einstellung Option. Ich komme zum externen Editor und klicke auf Bildeditor. Jetzt habe ich in meinem System GIMP. Und GIMP ist eine vollständige Open-Source-Bildbearbeitungssoftware. Aus diesem Grund verwende ich diese Bildbearbeitungssoftware. Für dieses spezielle Tutorial klicke ich einfach auf diesen Standardeditor und klicke auf GIMP. Sobald es fertig ist, klicke ich einfach auf Speichern. Danach muss ich tun, dass ich weiß, dass ich dieses Bild in diesem speziellen Bereich verwendet habe. Ich wähle das einfach aus und doppelklicke auf dieses Bild. Was wird passieren? Dieses Bild wird automatisch in meiner Bildbearbeitungssoftware geöffnet. Was auch immer die Anweisungen sind, ich muss die Anweisungen jetzt überprüfen, ich werde sie so behalten, wie es ist und ich klicke einfach auf den Konverter. Sobald die Konvertierung vorhanden ist, klicke ich hier auf die Schaltfläche „Zuschneiden“. Und ich ziehe einfach meine Maus und ich schneide dieses Bild einfach zu. Ich werde sicherstellen, dass mein Bild E im Quadrat liegt, also ist es 1000 mal 1000. Ich tippe nur tausend über deine und klicke auf Enter. Sobald es fertig ist, klicke ich einfach auf das Auswahlwerkzeug und das Bild wird beschnitten. Jetzt. Jetzt muss ich das Bild exportieren und es ist sehr einfach. Ich klicke einfach auf die Akte. Ich komme einfach über die Exportoption oder deinen Export als. Jetzt ist diese Sechs-Punkte-DPG da. Ich wähle dieses Bild aus und klicke auf Exportieren. Ich klicke auf Ersetzen. Danach bekomme ich einfach diese Dialogfeldoption. Klicken Sie einfach auf Exportieren oder wissen Sie, der Exportdialogfeld ist verschwunden. Und was ich tun werde, komme ich einfach zur Bootstrap Studio-Software zurück. Und jetzt können Sie das Bild E im Quadrat sehen. Jetzt ist es wie 1000 Pixel mal 1000 Pixel. Jetzt klicke ich einfach hier drüben auf Ansichten-Symbol oder gehe einfach zu Optionen. Und innerhalb von Textoptionen ist die erste Option die Ausrichtung, und ich klicke auf Mitte. Auf diese Weise wird das Bild jetzt zentriert ausgerichtet. Wenn ich jetzt auf das Bild klicke, kehre jetzt zu Aussehen zurück, du kannst sehen die Bildhöhe und Breite 1000 Pixel mal 1000 Pixel beträgt. Es ist sehr schnell und sehr einfach. Weißt, was ich tun werde. Ich gebe hier nur 500 Pixel oder deine px und 500 Pixel ein. das Bild in 500 Pixel mal vier Pixel sein wird und das ist die Größe von jedem, das ich möchte, werde ich dieses Bild wieder auswählen, gehe zurück zu Optionen, und jetzt suche ich nach der Dekorationsoption. In der Deklarationsoption können Sie sehen, dass die Grenzen vorhanden sind, und jetzt klicke ich einfach auf den kreisförmigen Rand. Jetzt ist das Bild in kreisförmiger Form. Danach nehme ich einfach eine Überschrift. Ich werde diese Überschrift bezüglich dieses Bild-Tags direkt platzieren. Und ich gebe einfach deinen Namen ein. Wir werden es in verschiedenen Farben nehmen. Also, was ich bei der Suche machen werde, in der Studio-Suchoption hier drüben, gebe ich einfach span ein. Nimm die Spanne und ich werde in dieses Überschriften-Tag fallen. Und das wird auswählen und ich gebe Name ein. Ich brauche ein Leerzeichen dazwischen. Also komme ich einfach her und lasse fallen, fallen lassen, uns Frieden fallen lassen. Geben Sie einfach ein, wählen Sie die Spanne aus. Und bei der Farboption müssen wir sicherstellen, dass wir uns in der Textoption befinden. In der Farboption wähle ich einfach Gefahr aus oder ich kann eine beliebige Farbe in dieser Reihenfolge auswählen , wenn ich keine kundenspezifischen Farben habe oder einfach wieder zum Aussehen komme und aus dieser Fremdfarbe kann ich auswählen jede Farbe, die ich wollte. Danach. nehme ich einen Absatz und lege ihn zwischen dem Überschriften-Tag und dem Bild-Tag ab. Ich doppelklicke einfach darauf und ich gebe ein, was ich mache. Das ist alles. Jetzt ist diese Portion fertig. Gehen wir nun zum neuen Abschnitt. In diesem Deal, was ich tun werde, nehme ich den Containertyp COND und es wird dies in diesem div-Tag fallen lassen. Jetzt ist der Container da. Ich nehme die Reihe und diese Reihe wird vorgeschlagen, oder du könntest einfach eine Reihe nehmen. Jetzt wähle ich die Zeile aus, die Spalten sind da. Ich übernehme diese Kolumne. In dieser Kolumne, was ich tun werde, werde ich in dieser Spalte einen Kartendrop verwerfen. Und da sind wir los. Wir haben einen Titeluntertitel und all das. Aber was wir wollen, wir wollen diese Links nicht hier drüben, also entferne ich diese Links einfach von dir. Ich werde es tun, ich suche jetzt nach Icon. Icon ist da und ich werde dieses Symbol in diesen Bodycard-Körper fallen lassen . Ich doppelklicke auf dieses Icon. Und jetzt können Sie sehen, dass wir viele Icon-Bibliotheken über Ihnen haben. Wir haben Bootstraps, würdest du auch Icons? Jetzt gebe ich einfach Verb ein und diese Weboption, das Web-Symbol ist da und ich wähle dieses Web-Symbol aus. zum Aussehen zurückkomme, scrolle ich einfach nach unten und muss die Schriftgröße erhöhen. Jetzt werde ich einfach diese Telefongröße erhöhen. Vielleicht sind 100 gut für mich. Es ergibt Sinn. Der Titel wird Website-Design, VSS-Designer, BSS Bootstrap Studio sein. Und hier kannst du alles platzieren, was immer du willst, du kannst einfach da drüben hinzufügen. Im Moment lasse ich nur den Dummy-Text da drüben sein. Was ich jetzt tun werde, wähle ich einfach die Narben aus, komme zu den Optionen. Und jetzt muss ich zu den Dekorationen gehen und ich werde einfach Schatten über dich werfen , das wird ein regelmäßiger Schatten sein. Regelmäßiger Schatten ist da. Jetzt wähle ich diese Spalte und schaue in dieser Spalte insgesamt nach, es wird drei Spalten geben, 12. Da sind wir los. Ich doppelklicke auf dieses Icon. Ich gebe einfach das Suchsymbol ein. Stattdessen wähle ich die Suche aus. Ich komme her und nenne es einfach als SEO. Digital. Verfügbarkeit. Auch hier wird der Dummy-Text da sein. Und jetzt doppelklicke ich noch einmal auf dieses Icon und tippe Server ein. Das Serversymbol ist da und klicke auf. Okay. Ich gebe Hosting *** sein Hosting-Domain ein. Sie können tippen, sie zu hosten , weil ich sie hosten verwende, weil ich diese Strings verwende, die Sie häufig dort drüben eingeben können. Jetzt diese speziellen Optionen wollen wir einige Änderungen daran. Jetzt werden wir dem etwas mehr Aussehen und Gefühl geben. Also wähle ich dieses erste Kartenjahr aus. Ich komme zum Erscheinungsbild Panel. Und im Hintergrund ist das Bild komplett weiß. Was wir tun werden, werden wir die Deckkraft einfach auf vielleicht 80% senken. Fair genug. Dann wähle ich diese Kopie aus, ich werde diesen Dampf tatsächlich zur zweiten Karte machen. Und auf die dritte Karte fügen Sie auch einfach die Werte über u. Jetzt wähle ich diese Zeile aus, oder vielleicht kann ich diesen Container auswählen, den Container berechnen. Jetzt kommt es zum Aussehen, die ersten Layout-Optionen da draußen. Und in der Layoutoption ist die Margin-Option vorhanden. Ich öffne einfach diese Margin-Option und Marge top. Was ich tun werde, wähle ich einfach den Wert auf die negative Seite. Jetzt können Sie sehen, dass es Überschneidungen zwischen diesem Bild und den Rückwürfen gibt, und genau das wollten wir. Jetzt denke ich, dass so viel Überlappung ausreicht, also nehmen wir vielleicht minus 100 Pixel. Da sind wir los. Okay, fair genug. Lassen Sie uns die verschiedenen Bildschirmgrößen anschauen. Md, wir wollen verschiedene Dinge. Also öffne ich einfach diese Zeile, ich wähle diese Spalte aus, komme zurück zu Optionen und MD Ich nehme nur sechs. In der zweiten Kolumne nehme ich sechs. Und für das dritte nehme ich das komplette Tool in MD. Ja, ich nehme das komplette Verweilen in kleiner Bildschirmgröße. Das ist vollkommen in Ordnung. Und bei extra kleiner Bildschirmgröße ist das wieder völlig in Ordnung. Okay. Keine Probleme. Ja, ein Problem ist da. Das Bild ist jetzt groß. Was wir tun werden, ich komme, ich komme und wähle dieses Bild aus. Wir werden wieder zum Erscheinungsbild kommen. Und jetzt haben wir von 1000 Pixel gemacht , wir haben auf 500 Pixel reduziert. Kurz gesagt, was wir getan haben, ist, dass wir die Größe um 50% reduzieren. Anstatt 500 Pixel zu nehmen, was wir tun können, ist die alternative Option, einfach hier auf den Reset-Button zu klicken und einfach 50% einzugeben. Das ist alles. Es gibt keine vertikale Schriftrolle und die vollständige Fixierung ist auch ihre zweite Option vorhanden, die wir im nächsten Video sehen werden. Aber vorher werden wir diesen speziellen Bereich reparieren, in dem diese beiden Karten sehr nahe beieinander liegen und kein Abstand zwischen ihnen besteht. Wenn ich zur Excel-Bildschirmgröße zurückkomme, wähle ich einfach diese Spalte, dieses Editorfenster, das Attributfeld aus. Und in der Klasse, was ich tippen werde, gebe ich ihnen den Rand. Also was ich tun werde, scrolle ich einfach ein bisschen nach unten. Wählen Sie diese Spalte aus. Ich gebe Margin untere zwei ein, stell zwei und drücke Enter. Sie können jetzt sehen, dass wir eine Randbodennaht haben die ich auch für diese Spalte machen werde. Marge m für Marge vor dem unteren Strich zwei. Auch in dieser Kolumne einfach. Margin, unterer Strich zu dem, was ich getan habe. Was ich hier gemacht habe, ist, als ob ich einzelne Spalten ausgewählt habe und ihnen die Werte einzeln gebe. Sie können jedoch alle zusammen auswählen, alle drei Spalten gleichzeitig und Sie können sie angeben, und Sie können den gleichen Wert angeben, der gleichzeitig von unten liegt . Okay? Also gehe ich einfach langsam. Sobald wir die Grippe bekommen haben, werde ich es auf angemessene, systematische und angemessene professionelle Weise tun. Jetzt können wir das noch einmal sehen, wir haben einige Probleme mit der Kolumne. Die Spalte Rita hat alle drei Spalten mit unserer ausgewählten ausgewählt. also zurück zum Optionsbedienfeld gehen, können wir jetzt nach MD sehen, dass die Bildschirmgröße LG ist. Lg gibt die Breite von vier an. Auf diese Weise. In MD ist es so, tut mir leid. Lgn oben wird es nacheinander sein. In MD wird zwei oben sein und einer wird unten sein. Und in SM wird jeder einzelne untereinander sein. Und das Gleiche wird extra klein passieren. Ich denke vorerst ist es gut zu gehen. also auf die Excel-Größe zurückkommen, haben wir das, was angefangen hat, einen Blick darauf zu werfen. Wir müssen etwas mit diesem Bild C machen . Jetzt ist das Responsive ausgeschaltet, und wenn ich auf diese bestimmte Bildschirmgröße zurückkomme haben Sie hier einen horizontalen Scroll. Nur um das zu beheben, ohne das ältere Medaillon zu verwenden , klicke nicht einfach auf diese Antwort, die du Icon hier drüben hast. Und das sind Feststoffe erledigt. Spiele mit der Reaktionsfähigkeit des Bildes. Das ist alles. Okay. Ja, danke Leute. Wir sehen uns jetzt im nächsten Abschnitt. 26. Über und Galerie von Project One: In diesem Video werden wir also vorankommen. Wir nehmen noch einen Container, also geben wir einfach Containerjahr ein. Und ich werde das überlassen und ich werde diesen Container über diese Körpermarke fallen lassen. Ich habe den Container hier drüben. Deshalb gebe ich diesen Container eine Marge, oben, Marge, oben ist M ist Marge und T ist Stop. Dash Five wird hier die zusätzliche Marge geben. Also ja, wir haben ein zusätzliches Gap Year oder? Darin nehme ich eine Überschrift, Überschrift, dieses Überschriften-Tag hier drüben. Und dies wird geschrieben, um zum zentralen Element Optionen zu gehen. Das ist alles. Diese Überschrift gebe ich oben und Polsterung unten. P steht also für Polsterung. Unten ist B, Strich drei Leerzeichen, wieder oben auffüllen. Pt Strich drei, das heißt Pb ist Padding Bottom, P t ist oben und drei ist der Wert. Jetzt habe ich die Polsterung und den Spielraum dafür gegeben. Also wähle ich diesen Container aus und im Aussehen werde ich an die Grenze kommen. Und ich wähle diesen oberen Rand aus, und ich wähle die Volltonfarbe aus und Schwarz wird in Ordnung sein. erneut unten und wählen Sie Solid aus. Ich habe die obere und untere Grenze dazu. Lassen Sie uns hier eine Vorschau haben. Ich klicke einfach auf dein Auge um diese Vorschau zu aktivieren und klicke auf Vorschau. Der Standardbrowser wird gestartet. Da sind wir los. Wir haben die Vorschau unserer Website. Es sieht gut aus, nicht wahr? Minimiere das einfach und lass uns vorankommen. Wir nehmen noch einen Behälter hier rüber, lassen diese Insektenkörpermarke fallen und ich habe diesen Behälter hier drüben. Jetzt nehmen wir ein Absatz-Tag und ich werde diesen Absatz in diesen Container legen. Und für diesen Container gebe ich auch nur etwas Marge Top oder vielleicht drei. Ich wollte hier Dummy-SMS schreiben. Was ich tun werde, ich drücke Control P und L Typ Lorem. Ich werde einfach tippen, ich drücke einfach Enter und drücke noch einmal die Eingabetaste. Da sind wir los. Wir haben eine Dummy-Text hier drüben. Ich denke, ich muss diesen Dummy-Text mindestens dreimal duplizieren diesen Dummy-Text mindestens dreimal , damit ich einige Daten oder Sie habe, lassen Sie uns die Vorschau sehen. Das war's. Gut oder nimm einfach diese Kopie und füge sie ein. Und füge es hier ein. Wieder in Paste haben wir zwei verschiedene Optionen. Ich kopiere das einfach noch einmal. Was ich tun werde, ist, dass du einfach Control V Jahr einfügst. Sie können sehen, dass am Anfang ein zusätzliches Leerzeichen und am Ende zusätzlicher Platz vorhanden ist. Um dies zu vermeiden, müssen wir einfach Control Z tun um diese zusätzlichen Leerzeichen zu vermeiden, müssen wir einfügen, indem wir die Verknüpfung wie Control plus shift plus v. verwenden die Verknüpfung wie Control plus shift plus v. Das war's. Wir haben jetzt keinen zusätzlichen Platz. Ich werde das darin tun , damit es ein guter Absatz ist. Und ich werde das letzte einfach entfernen. Wählen Sie also den Absatz aus und in den Schriftarten gehe ich einfach zur Ausrichtung und klicke einfach auf „Begründen“. Das Gleiche. Ich werde das mit dem zweiten Absatz tun. Ich klicke einfach auf „Rechtfertigung über dich“. Ok, jetzt hat es gut ausgesehen. Danach müssen wir den Galeriebereich platzieren und das ist sehr einfach. Die Readymade-Komponente ist da. Ich komme einfach her und wir tippen einfach die Galerie ein. Sie können eine Lightbox-Galerie sehen. Ou, nimm einfach diese Galerie und lass sie in diese Körpermarke fallen. Das ist alles, was deine Galerie erledigt ist. Die Lightbox Gallery oder ich werden einfach diese Lightbox entfernen und nur die Galerie-Option wird da sein. Diesen Text können Sie wie gewohnt behalten, wenn Sie möchten, oder Sie können ihn entfernen. Jetzt hast du auch diese Fotos. Diese Fotos können ersetzt werden und dieser Ersatz werden wir in einigen späteren Videos sehen , da wir uns jetzt nur darauf konzentrieren nicht den Ersatz der Fotos zu entwerfen. Sagen wir die Vorschau. In der Vorschau sehen Sie jetzt, ja, wir haben dieses Ding auch den Abschnitt About dann Galerie. Das ist alles, was auch die Galerie-Option erledigt ist. Jetzt das Wichtigste, den Abschnitt „Kontakt“, möchten wir den Abschnitt „ Kontakt“ und den speziellen Abschnitt entwerfen , den wir im nächsten Video erfahren werden. sehen uns im nächsten Video , in dem wir lernen werden, wie Sie den Abschnitt „Kontakt“ mit etwas Text und einem Kontaktformular erstellen . Wir sehen uns im nächsten Video. 27. Teil 1 von Projekt One: In diesem Video erfahren wir mehr über den Abschnitt „Kontakt“. Also fangen wir direkt an, ich nehme nur einen Behälter lasse ihn in das Körper-Tag fallen. Jetzt habe ich diesen Container und möchte zwei Abschnitte , in denen eine E-Mail-Adresse und Telefonnummer vorhanden sind. Im zweiten Abschnitt erstellen wir ein Formular. Was ich tun werde, nehme ich einen Streit. Offensichtlich. Lass uns das Zimmer nicht durchsuchen. Ich wähle einfach diesen Container aus und im Vorschlag ist die Zeile ihre große Zeile und lege sie in diesen Container ab, wähle diese Zeile aus und wir müssen zwei Spalten erstellen. Eine Spalte ist hier, und ich werde dies einfach duplizieren und dies ist die zweite Spalte. Wählen Sie also beide Spalten aus, die zu den Optionen kommen, invertieren. Wählen Sie einfach diese sechs aus MD und höher haben wir eine Division von zwei, das ist 66, und davor ist es wie 212. Also werden zwei Abschnitte vollständig vorhanden sein. Also klicke ich einfach auf L hier drüben . Es wird so aussehen. Jetzt sind zwei Spalten da, und jetzt unter dem MD-Jahr haben wir nacheinander. Ich fahre hier rüber. Ich lasse diese Überschrift in diese Spalte fallen. Ich tippe. Nehmen Sie Kontakt mit mir und dem Ausrufezeichen auf. Danach nehme ich einen Absatz. Nehmen wir jetzt keinen Absatz. Wir nehmen einen Link. Diesen Link werde ich einfach in diese Spalte, die erste Spalte, fallen lassen . Okay, lass uns dieses Editor-Panel nehmen. In der Klasse. Ich gehe einfach in einen Kurs ein. Der Name der Klasse wird Textdekoration, Text-Strich-Dekoration , keine sein. Das ist eine vorgefertigte Bootstrap-Klasse. Dann texte Dash dunkel. Auch dies ist eine vorgefertigte Bootstrap-Klasse. Es tritt ein. Jetzt ist der Text dunkel und es gibt keine Dekoration, Dekoration, die Sinn macht, wenn Sie einen Link haben, wenn Sie den Mauszeiger bewegen, Sie den Mauszeiger auf den unterstrichenen Link, willkommen, dass wir nicht wollen. Okay, also jetzt, OK, und jetzt nehme ich einen Absatz. Setzen Sie diesen Absatz in diesen Link. Geben Sie jetzt einfach die E-Mail-Adresse ein. Was kann ich also das Immunogenitätsbeispiel, Years Example mit der Rate email.com, tippen. Und den Text des Links, ich doppelklicke einfach auf diesen Text. Ich doppelklicke einfach auf diesen Link, verlinke Text und ich wähle ihn einfach aus und entferne ihn einfach, wie das Entfernen der Sense-Rücktaste. Wir haben einen Absatz für Sie. Warum ich Absatz hinzugefügt habe, ist so, als hätten wir mehr Kontrolle über den Absatz, aber verlinkt, wir haben keine Kontrolle über den Link. Sagen wir zum Beispiel, ich möchte nur die Größe vergrößern. Wählen Sie einfach diesen Absatz aus und klicken Sie einfach auf Leto. Ja, das war's. Und wenn ich diesen Link auswähle und ihn jetzt noch zweimal duplizieren möchte, was passiert, wenn es sich um einen Link handelt? Es wird nacheinander kommen. Ich wollte unter einander stehen, nicht nacheinander. Das ist der Grund, warum ich den Absatz für Sie genommen habe und mit Link nicht fortgefahren bin. Wählen wir also diesen Link aus. Dupliziere noch einmal. Jetzt würden wir ihn unten fragen. Dupliziere noch einmal. Es gibt noch ein öffentliches Gut. Jetzt geben wir einfach eine Telefonnummer über Jahre ein. Die vollständige Zahl wird plus 91. Das ist der Ländercode meines Landes. Weltraum, 9876543210. Ich bin mir sehr sicher, dass diese Nummer, die niemand diese zweite Telefonnummer benutzt diese zweite Telefonnummer plus 91 sein wird, wieder 9876543211. Auch diese Nummer hat das niemand benutzt. Was wir jetzt wollen ist, wann immer der Benutzer auf die Website kommt, Sie können jetzt in diesem bestimmten Bereich sehen , dass der meiste Zeiger geändert wird. Lassen Sie uns das Fingerspitzensymbol da sein. Warum? Weil es der Link ist. Wenn der Benutzer automatisch auf diese bestimmte E-Mail-Adresse klickt, der Standard-Webbrowser oder wird der Standard-Webbrowser oder die Standard-E-Mail-Anwendung geöffnet. Und in zwei Abschnitten, in denen wir die E-Mail-Adresse des Empfängers automatisch eingeben , sollte diese E-Mail-Adresse dort eingegeben werden. Ich möchte diese Art von Funktion auf dieser Website erstellen . Also wie macht man das? Es ist sehr einfach. Geh einfach zurück zum Bootstrap-Studio. Wählen Sie diesen speziellen Link im URL-Abschnitt, diesen Hash, und geben Sie einfach männlichen Doppelpunkt und die E-Mail-Adresse ein. Beispiel auf der email.com. Das war's. Die Vorschau ist gut. Und wenn ich jetzt auf diese E-Mail klicke, können Sie sehen, dass sie aufgefordert wird , die E-Mail-Anwendung zu starten. Und ich klicke auf, Okay. Sobald ich auf oaky klicke, siehst du ein Beispiel unter read email.com, jetzt bist du in den beiden Abschnitten. Sie müssen gerade nur den Betreff und den Inhalt hinzufügen . Das ist alles. Das ist sehr einfach und sehr praktisch. In Bezug auf UX ist die Benutzererfahrung erstklassig. Das Gleiche werden wir mit der vollen Nummer machen. Also wähle ich diese Telefonnummer und den Link aus, der den Link enthält, der diese vollständige Nummer enthält. Und ich klicke einfach auf diesen Link und kehre zu dieser URL zurück. Und ich gebe Tel Colon ein und tippe einfach die Nummer mit der Landesvorwahl plus 91979876543210 ein. Das war's. Das Gleiche werde ich auch mit dem zweiten Link machen. Geben Sie einfach ein, bis PEL Semikolon Space, Ländervorwahl und Telefonnummer mitteilt . Auf diese Weise passiert, wenn der Benutzer auf diesen bestimmten Bereich klickt , wird festgelegt die Website zu öffnen versucht, eine App auszuwählen. Ich klicke einfach auf „Öffnen“. Und jetzt zeigt es noch eine Sache. Aber was ist passiert, wenn Mehrheit der Benutzer den Chrome-Browser verwendet? Chrome-Browser ist mit unseren Mobilgeräten verbunden . Was passiert, wenn ein Benutzer auf diese vollständige Nummer klickt? Und es ist nicht Chrome. Was passiert, wenn verschiedene Arten von Dialogfeldern kommen, die Sie versuchen , wenn Sie den Chrome-Browser verwenden Die verschiedenen Arten von Popups werden hierher kommen. Und sobald der Benutzer in seinem Telefon auf Automatisch zulassen klickt , egal ob Apple oder Android, spielt es keine Rolle. Automatisch kommt diese Nummer ins Telefon und wie genau wird es kommen. Die Telefonanwendung wird geöffnet. Diese Nummer wird automatisch gewählt und der Benutzer muss nur auf den Anruf-Button klicken. Das ist alles. Auch hier ist die Benutzererfahrung an der Spitze. Ja, das war's. Auf diese Weise werden wir diesen speziellen Bereich erstellen und dieser Abschnitt wird erledigt. Jetzt werden wir mit dem nächsten Abschnitt fortfahren , in dem wir ein Kontaktformular erstellen werden und den wir im nächsten Video tun werden. Wir sehen uns im nächsten Video. 28. Teil 2 des Projekts One: Okay, also werden wir in diesem Video ein Kontaktformular erstellen . Also lasst uns anfangen. Also nehme ich zuerst ein Formular an, dein FOR M-Formular. Ich lasse dieses Formular in diesen Container fallen. In dieser Spalte Kein Container. Dies ist ein Formelement. Jetzt nehme ich in diesem Formelement div. Ich werde dieses Div einfach über ein Jahr fallen lassen. Und danach nehme ich ein Etikett. Ich gebe nur die Bezeichnung LAB, idealtype leap LAB ein und dann mit dem Feld gekennzeichnet. Willkommen. Diese Feldbezeichnung. Ich möchte es in dieses Bodytag fallen lassen. Okay, die Feldbezeichnung ist da. Und jetzt ist das erste, was wir vom Benutzer wollen, Meme. Diese speziellen Informationen werden in die Texteingabe enthalten. Ich werde hier nur eine Notiz hinzufügen, die Texteingabe und der Textbereich sind zwei verschiedene Dinge. Verwirren Sie sich nicht über Sie, oder Sie nehmen einfach diese Texteingabe und diese Texteingabe, ich werde sie in diesem div ablegen. Jetzt dieses Label werde ich es einfach bearbeiten. Ich habe das gemacht und ich gebe FullName ein. Wählen Sie diesen Text aus und setzen Sie Ihr Auge, um den Platzhalter als vollständigen Namen zu setzen . Im Wert. Der Wert wird den Namen, den Namen dieses Feldes nicht kennen. Schau dir an, dieser Name ist der Name des Feldes. Dies ist also der vollständige Name oder geben Sie einfach den vollständigen Namen ein. Und ich wähle dieses Label jetzt aus, fühle das Label. Und für diese Feldbezeichnung ist für wen? Was wir tun müssen, ist, dass ich einfach dieses und das Label auswählen werde , den Namen, den wir seinen vollständigen Namen gegeben haben, richtig, also kopiere es einfach, wähle das Etikett aus und ich gebe ein, und ich werde einfügen diese FullName-OU. Auf diese Weise weiß das System, dass diese Feldbezeichnung für den Eingabetext bestimmt ist, der als FullName bezeichnet wird. Wählen Sie dieses div aus. Öffnen Sie dieses Attributfenster und Rand unten. Das ist alles. Jetzt werden wir dazu einfach einige Erklärungen abgeben. Also wähle ich diese Texteingabe innerhalb des Erscheinungsbildes aus, ich scrolle einfach über deine vier Grenzen. Die Grenzen sind da und der Radius, ich werde einfach den Radius entfernen und ich werde ihn auf 0 setzen. Auf diese Weise wird das Alter dieser speziellen Texteingabe scharf sein. Und ich werde einfach einen unteren Rand mit einem Strich und einer Pixelbreite hinzufügen , tut mir leid, eine Pixelbreite und die Farbe wird dunkel sein. Auf diese Weise. Dieses spezielle Eingabefeld ist bereit. Jetzt wähle ich einfach dieses div aus und beschrifte es. Klicken Sie also mit der rechten Maustaste und beschriften Sie dies als vollständigen Namen. Okay, also werden wir, wenn wir zurückkommen, um diesen bestimmten Bereich neu zu gestalten, werden wir in diesem div wissen, der vollständige Name, das Label und das Eingabefeld vorhanden sind. Jetzt dupliziere das. In diesem Bereich nennen wir es als die, was wir als nächste Telefonnummer geboren haben. Ja. Also tippen wir nach Nummer. Telefonnummer. Wir werden keine Texteingabe verwenden, da Telefonnummer oder immer Zahlen wir nicht wie Zeichen in diesen alphabetischen Zeichen verwenden . Ich lösche dies einfach aus deiner Typnummer oder deiner Nummer. Und wir haben ein Zahleneingabefeld über dir. Ich habe selbst eine Zahleneingabe erstellt. Das ist Zahleneingabe ohne Pfeil. Ich zeige dir den Unterschied dazwischen. Wir nehmen diese Zahleneingabe zuerst und ich werde diese in dieser zweiten fallen lassen . Nur um den Labelnamen zu ändern. Der Tabellenname ist Nummer. Diese Zahleneingabe ist da. Lassen Sie uns zum vorherigen Abschnitt gehen, jetzt können Sie sehen, wenn Sie einfach den Mauszeiger hier zeigen, Sie können sehen, dass zwei Pfeile vorhanden sind, die wie Inkrement und Dekrement sind. Wir wollen diese Pfeile nicht , wenn wir die volle Nummer eingeben, oder? Also was ich tun werde, gehe ich zurück ins Bootstrap-Studio. Ich lösche einfach diese Zahleneingabe von dir und diese Zahleneingabe ohne Pfeil. Diese bestimmte Komponente ist da. Diese Komponente wird standardmäßig nicht im Bootstrap-Studio installiert. Diese Komponente habe ich diese Komponente erstellt. Gehen Sie einfach online und suchen Sie nach Eingabe der Eingabenummer ohne Pfeil. Du kriegst das. Wählen Sie diese Nummer ohne Pfeil aus und legen Sie diese in diesen Telefonnummernbereich ab. Was wird jetzt passieren? Gehen wir zur Vorschau. Jetzt kannst du sehen, dass es hier keinen Pfeil gibt. So wollten wir es. Wählen wir das also aus. Und im Scroll nach oben in den Optionen ist der Platzhalter wieder die volle Nummer. Kopieren Sie es einfach und geben Sie denselben Namen für das Etikett ein. Ich benenne dieses Label auch einfach um. Okay, jetzt wähle diese Telefonnummer aus, komm zu Aussehen. Und jetzt wähle ich in diesem Bereich einfach diesen unteren Rand aus und mache ihn einfarbig und dunkel. Ein Pixel ist gut und der Radius beträgt 0 Pixel. Das war's. Okay? Nun, nach dieser vollständigen Nummer, wollen wir eine E-Mail-Adresse, okay, also duplizieren Sie dies. Vorher benenne ich das Label einfach E-Mail um und drücke Enter. Lassen Sie uns dies von Telefonnummer zu E-Mail ändern. Jetzt hat die E-Mail-Adresse ein anderes Eingabefeld, daher lösche ich dieses noch einmal. Und hier gebe ich einfach E-Mail- und E-Mail-Eingabe ein. Ist da. Was macht diese E-Mail-Eingabe? Es hat ein vorgefertigtes JavaScript dafür geschrieben. Die E-Mail-Adresse hat ein bestimmtes Format, oder? Das Format wird wie zuerst sein, dein Name wird da sein oder was auch immer es ist, der Beinschlitz in diesem bestimmten Bereich, dieses Beispiel ist da. Dann haben wir auf dem Tempo, dann haben wir Domainnamen, das heißt gmail.com, hotmail.com, yahoo.com, Outlook.com, was auch immer es ist. Wenn ein Benutzer gerade ein Beispiel eingegeben hat und versucht, dieses Formular zu senden, wird angezeigt, dass die E-Mail-Adresse nicht korrigiert wurde. Wenn das Benutzerbeispiel in der E-Mail und.com nicht geschrieben wird, heißt es erneut, dass dies nicht im richtigen Format vorliegt. Hypothetische Situation. Wenn der Benutzer ein Beispiel in der E-Mail com eingibt, wo er den Punkt verpasst hat. Auch hier wird dieses Eingabefeld, das Eingabefeld, sagen, dass E-Mail nicht in einem richtigen Format vorliegt. zeige ich dir auch. Wählen Sie fortfahren dieses spezielle E-Mail-Eingabefeld aus, gehen Sie zum Platzhalter des Optionsbedienfelds Ich gebe E-Mail ein. Geben Sie Ihre E-Mail-ID ein. Den Namen gebe ich diesen Namen als E-Mail an. Ich kopiere das auf das Etikett. Ich ändere den Namen des Labels als E-Mail. Wir möchten den Bereich, in dem der Benutzer die Nachricht eingeben kann. Jetzt an diesem besonderen Ort der Textbereich willkommen. Dupliziere das. Und jetzt gebe ich eine Nachricht ein. Wählen Sie diese E-Mail-Eingabe und O, wir haben vergessen, die Grenze zu geben. Okay, also wähle ich dieses E-Mail-Eingabefeld aus. Ich gehe zu Aussehen und der Radius beträgt 0 Pixel. Die Farbe wird schwarz und der untere Rand wird solide sein. Vorwärts gehen. Wählen Sie also dieses div, um die erste Nachricht des Labels zu ändern. Das Label ist eine Nachricht, und jetzt müssen wir den Textbereich hier drüben nehmen ihn in diese Nachricht legen. Machen Sie das Gleiche, was wir zuerst tun werden, Radius von 0 Pixel, unten, einfarbig mit schwarzer Farbe. Fertig damit. Jetzt sehen wir uns die Vorschau an. Wir haben die Möglichkeit, jetzt haben wir den Ort, um den Namen einzugeben, der zeigt, dass Sie Ihren vollständigen Namen, Ihre Telefonnummer und Ihre E-Mail-Adresse eingeben , dann haben wir einen Bereich, an dem Sie eine Nachricht senden können. Jetzt können Sie diesen Bereich sehen, wir können die Größe vergrößern. Dieses spezielle Eingabefeld wird als Textbereich bezeichnet. Das Wichtigste ist, dass wir eine Schaltfläche benötigen, auf der der Benutzer auf eine Hand klicken kann. Er kann das Formular einreichen. Dafür. Auch hier werden wir das brauchen. Wir werden diesen Deal brauchen, bei dem wir dieses div duplizieren werden , und wir werden es einfach als Button bezeichnen. Und wir wollen dieses Label und irgendetwas darin nicht. Wir brauchen nur einen Knopf. Ich nehme nur einen Knopf und ich lasse diesen Button in diesen Button fallen , ich gebe Nachricht senden ein. Das Thema, dem wir folgen, ist Rot und Schwarz. Also was ich tun werde, werde ich einfach zu Optionen gehen und der Stil wird selbst dunkel sein. Die Grenze wird scharf sein. Sie können die Vorschau sehen. Ja, die Grenzen sind scharf. Eine kleine Änderung werde ich machen. Ich werde einfach die Größe des Buttons von Standard auf groß erhöhen . Okay, also wird es ziemlich gut aussehen. Wenn du willst. Wir können die ICANN auch in diesen Boden legen, einfach typisches Symbol. Und es wird dieses Symbol nehmen und direkt hier rüberlegen, ich doppelklicke einfach auf das Bootstrap-Symbol und sende den Nachrichtenpunkt. Vielleicht. Nein. Entschuldigung. Nein, das hier. Wir können das gebrauchen. Also werden wir diese 1 zuerst 1 nehmen. Bringen Sie einfach eine Friedensordnung auf. Das ist alles. Diese spezielle Schaltfläche wird eine Schaltfläche „Senden“ sein. Wenn der Benutzer auf diese Schaltfläche klickt, wird dieses Formular gesendet, das Formular wird gesendet. Wählen Sie diese Schaltfläche aus. Im Bereich der Schaltflächenoption haben wir den Button-Typ. Mit diesem Buttontyp wählen wir den Absenden aus. Wann immer der Benutzer auf Senden klickt unabhängig von den Informationen , die in diesem Formular geschrieben sind, werden diese Informationen an die E-Mail-Adresse gesendet. So senden Sie diese speziellen Informationen an die E-Mail-Adresse. Das ist sehr einfach und das werden wir im nächsten Video sehen. Wir sehen uns im nächsten Video, Leute. 29. Smart Form von Projekt One: Deshalb senden wir die Informationen aus diesem Formular an die E-Mail-Adresse. Was wir dazu tun müssen, ist, dass wir dieses Formular auswählen müssen. Sobald ich dieses Formular ausgewählt habe, klicke ich hier einfach auf den Smart-Formular-Button. Dann muss ich den Empfänger hinzufügen. Wir haben diese Empfänger also über ein Jahr. Dies ist meine E-Mail-Adresse, aktueller Abschluss bei Yahoo.com. Und wenn Sie mir Fragen stellen können senden Sie die E-Mail an diese E-Mail-Adresse. Die E-Mail-Adressen sind bereits vorhanden, aber wenn Sie eine E-Mail-Adresse hinzufügen möchten, wie Sie das tun können, ist es sehr einfach. Klicken Sie einfach auf Verwalten. Dialogfeld erscheint und klicken Sie auf Empfänger hinzufügen, geben Sie hier die E-Mail-Adresse ein. Nehmen wir an, ich gebe einfach Beispiel auf der reheat mail.com ein. Entschuldigung, ich habe gerade die E-Mail-Adresse email.com Beispiel auf mail.com geschrieben und einfach auf Erstellen klicken. Und was wird passieren? Eine Bestätigungs-E-Mail wird dort eingeliefert, in der Sie eine fünf- oder sechsstellige Nummer eingeben müssen. Die Zahl, die du hier angeben musst. Und dann klicke einfach auf Verifizieren. Das ist alles. Danach. Ich lösche das einfach. werden die E-Mail-Empfänger in diese Liste aufgenommen. In diesem Empfänger wählen Sie auch die Empfängerschule. Wähle einfach das aus. Ich wähle einfach meine E-Mail-Adresse aus. Das ist alles, sonst nichts zu tun. Und dann haben wir die Option wie URL umleiten, sobald das Formular abgeschickt wurde, wo der Benutzer umgeleitet werden soll. Ab sofort haben wir nur eine Seite, also klicken wir einfach auf index.html. Das ist alles. Okay, dann haben wir auch eine benutzerdefinierte Messaging-Option , die wir bereits gesehen haben. Ich denke, ich denke, dass wir all diese Dinge bereits in den vorherigen Videos gesehen haben. Wenn ich mich nicht irre. Ja, aber nochmal, wie nach senden, können Sie den Betreff hinzufügen. Betreff werden Kontaktformulare sein. Co-NP ist weg. Vom Benutzer. Wird geladen. Vielleicht können wir fast dort tippen. Dann erfolgreich, dann können wir die Nachricht senden . Dann wird die Erfolgsbotschaft sein, ich werde mich in Kürze bei Ihnen melden. Fehlermeldung behält es so, wie sie ist. Whoops, dann feile zu groß. Wenn der Anhang vorhanden ist, müssen wir diese Datei zu groß und dann ein leeres Formular anzeigen. Wie Bitte füllen Sie die Informationen aus, die es gibt. Ja, all diese Dinge dann wird der Knopf schließen da sein. Schaltfläche „Schließen“ Wir werden diese Optionen vollständig als Standard belassen. Okay, jetzt müssen wir das Formular auch validieren, oder? Also dieses erste Feld sollte entschädigt werden, Benutzer sollten dieses Formular ausfüllen das Formular nicht gesendet wird. Was passiert jetzt? Komm einfach dazu. Und wenn ich auf Senden klicke, siehst du, dass das Formular jetzt gesendet wird, aber es gibt keine Informationen und klicke einfach auf Ich bin kein Roboter. Es wird nachsehen. Bitte füllen Sie das erforderliche Feld aus und versuchen Sie es erneut. Aber das sollte nicht passieren. Du bist nur das Eingabefeld sollte angezeigt werden wie bitte gib etwas darin ein, oder? Gehen wir also zurück zum Bootstrap-Studio und wählen Sie einfach diese Texteingabe in den Optionen aus. Bei der Validierung müssen wir zur Validierung kommen und einfach auf diese erforderliche Schaltfläche klicken oder Sie scheinen die vollständige Nummer zu sein, gehen Sie zur Validierung, klicken Sie auf die Schaltfläche „Erforderlich“. Das Gleiche. Wir werden eine E-Mail-Adresse, klicken auf die Schaltfläche „erforderlich“ und die Schaltfläche „ Nachricht erforderlich“. Was passiert jetzt, wenn Sie zur Vorschau gehen? Wenn ich auf Senden klicke, wird es sagen, bitte fülle diesen Filmmann aus. Bitte. Ich nenne meinen Namen. Wie lautet mein Name? Geben wir den vollständigen Namen und dann die vollständige Nummer ein. Geben Sie diese Telefonnummer und E-Mail-Adresse jetzt ein. Jetzt möchte ich dir diese E-Mail zeigen. Geben Sie einfach E-Mail ein und ich werde die Nachricht als Nachricht abgeben. Ich versuche das zu schicken. Jetzt können Sie sehen, bitte geben Sie den Tarif in die E-Mail-Adresse ein. E-Mail. Komm schon, zeig. E-Mail fehlt eine Anzeige. Die Rate in Ordnung. Ordnung. Zu dem Kurs, der nicht nur noch einmal ist, geben Sie bitte das Teil ein. Folgen Sie an der roten E-Mail-Adresse ist falsch. Gmail.com. Und wenn ich jetzt diese E-Mail schicke, kannst du sehen, dass sie sich zeigt, als wäre ich kein Roboter. Und es ist fast fertig. Und boom, das ist alles, was wir damit fertig sind. Wir können eine weitere Seite erstellen, auf der wir Glückwünsche zeigen werden, ich habe die Nachricht erhalten. Ich habe Ihre Nachricht erhalten oder ich habe Ihre E-Mail erhalten und wir melden uns in Kürze bei Ihnen. Wir können eine weitere Seite erstellen und den Benutzer dorthin umleiten. Und wir werden dort einen Knopf setzen, wie zum Beispiel zurück zur Homepage. Und wenn wir auf diese bestimmte Schaltfläche klicken, wird die Umleitung zu dieser Seite durchgeführt. Okay, also wollen wir all das nicht für diese spezielle Demonstration tun . Ab sofort ist dieser Bereich erledigt. Bild und diese Bildergalerien funktionieren ordnungsgemäß, keine Probleme und all das. Wir können hier auch eine Fußzeile hinzufügen. Komm einfach her und ich gebe FOBT und Footer dunkel ein, als hätte es zu viele Informationen. Zunächst einmal ist Basic in Ordnung, gut für uns. Ich lasse diese Fußzeile einfach in den Körper fallen. Diese Leiche. Das ist alles. Wie viele Knöpfe haben wir, wir haben zu Hause. Dann haben wir ungefähr und dann haben wir Kontakt. Das ist alles Ruhe. Wir wollen nicht. Also wähle ich einfach diese und diese Bedingungen und Datenschutzbestimmungen aus und entferne diese dann. Wir können dies offensichtlich und den Firmennamen auf dem Firmennamen Corporate 2021 verknüpfen . Also gebe ich einfach deinen Namen ein. Copyright 2021. Das war's. Sehen wir uns nun die Vorschau an. Wenn ich scrolle, läuft alles gut. Was wir jetzt wollen, unsere Navbar verschwindet, wenn wir nach unten scrollen. Das wollen wir nicht. also zurück zum Bootstrap-Studio komme, ich also zurück zum Bootstrap-Studio komme, wähle ich die Navbar noch einmal aus und halte die Position einfach nach oben. Nach oben fixiert ist ein bisschen komisch, dass dein Name in die Karte gegangen ist, aber lasst es uns so behalten, wie TikTok erledigt ist, keine Probleme. Gehen wir zurück zur Vorschau. Jetzt können Sie sehen, dass die Navigationsleiste an der Spitze bleibt. Das ist alles. Lassen Sie uns den letzten Teil dieser Website machen , in dem wir einfach auf diese Schaltfläche klicken können und die Seite scrollt zu diesem bestimmten Bereich. Und das Besondere, was wir im nächsten Video machen werden. Wir sehen uns im nächsten Video. 30. Die Website von Project One: Vielleicht ist dies das letzte Video dieses speziellen Abschnitts. Ich weiß nicht, ob mir etwas in den Sinn kommt. Ich kann ein paar, ein paar weitere Videos in diesem Abschnitt erstellen . Home-Button, wir wählen die Home-Taste und Sie können sehen, dass diese Home-Taste dunkel ist und Contact Us II etwas auf einer hellen Seite ist . Der Grund dafür, und wir wählen einfach diesen Link aus, den ich den Home-Button auswähle. Ich kann sehen, dass dieser Link ausgewählt ist, aber ich möchte, dass dieses Navigationsgerät ausgewählt wird. Also wähle ich dieses Navigationsgerät aus und ist aktiv. Es klickt einfach auf, klicken wir auf diesen Button, der sich befindet. Jetzt ist alles erledigt. Okay. Fangen wir mit diesem ersten Container an, der dieser Bereich ist. Dies ist der, dieser, das tun, das ist zuerst dieser Deal. Wir müssen einen Ausweis für diese besondere Pflicht vorlegen. Klicken Sie einfach hier rüber und die ID wird zu Hause sein. Dies ist der Home-Bereich. Dies ist der Home-Bereich. Dann haben wir diesen Container , der About Us Abschnitt enthält. Dieser Abschnitt befindet sich im nächsten Container. Okay, gut. Also was wir tun werden, wir werden hier einfach einen dv in div hinzufügen . Und diese beiden Container werden in dieses div gehen, und dieses div wird aufgerufen, da die Attribut-ID ungefähr genug sein wird. Dann Gallery, dieser spezielle Abschnitt ist Gallery. Und dann gingen sie einfach zum Attributbereich und tippen Ihre Galerie ein. Dieser Abschnitt ist der Kontaktbereich. Dann tippe ich einfach CD-Kontakt ein. Ja, im Grunde haben wir das vorerst. Das glaube ich nicht. Wir brauchen eine Galerie oder du entfernst einfach diese Galerie. Jetzt haben wir drei wie zu Hause und Kontakt. Das ist alles. Ich komme zurück zu den Navbars. Wählen Sie dieses Zuhause aus, in dem sich der Link befindet. Diesen Link müssen wir auswählen und diese spezielle URL, die wir eingeben werden. Die ID, Year ID beginnt mit dem Hash-Schlüssel. Der Hash-Schlüssel ist schon da und tippe einfach nach Hause. Stellen Sie sicher, dass Sie, wenn Sie den Ausweis mit einem Großbuchstaben angegeben haben , den gleichen Fall hier verwenden müssen. Groß- und Kleinschreibung wird berücksichtigt Also zu Hause, danach geht es darum, also ist der Hash-Schlüssel schon da und sie werden einfach darüber tippen. Dann wähle ich diesen Kontakt und der Kontakt wird da sein. Das Gleiche werden wir auch mit der Fußzeile machen. Ich wähle einfach dieses Haus aus und ich werde über Jahr nach Hause tippen. Und ungefähr. Ich tippe über Kontakt ein. Kontakt. Sehen wir uns jetzt die Vorschau an. Wir sind in der Vorschau. Wenn ich auf Home klicke, los geht's. Wenn ich auf Kontakt klicke, los geht's. Wenn ich auf Home klicke, kommen wir wieder nach oben. Okay. Fair genug. Auf diese Weise haben wir unser einseitiges Website-Design abgeschlossen , bei dem Sie alles, was Sie verwenden können , alles ändern möchten. Es wird nur wieder aufgenommen, oder? Sie haben einen Bereich für Zuhause und Kontakt, und dann können Sie einfach jeden fallen lassen, der kommen kann. Sie können eine E-Mail direkt ablegen oder einfach tippen. Sie können einfach dieses spezielle Formular ausfüllen und sie können Ihnen einfach eine E-Mail schicken. Und dieses Formular wird unabhängig von den Informationen sein , die der Benutzer in diesem speziellen Bereich eingibt, diese Informationen werden zum Essen kommen. Oh, wir haben den Platzhalter diesem speziellen Textbereich nicht gegeben . Also komm einfach her und ich gebe einen Platzhalter ein. Geben Sie Ihr Ausrufezeichen für Nachrichten ein. Das ist alles. Okay, also komm zurück zur Vorschau, um deine Nachricht eingeben zu lassen und das war's. Ich glaube, es ist alles erledigt, Mann. Ja, es ist alles erledigt. 31. Eröffnung Des Projekts 2: Hallo und willkommen. In diesem Abschnitt. In diesem Abschnitt werden wir technische Ergebnisse entwerfen. Dies ist also die Website, die wir entwerfen werden. Und auf dieser Website sind wir bereit, viele Dinge wie Medienabfragen und X2-Integrationen wie Zu sehen Medienabfragen und X2-Integrationen , die Integrationen, Live-Chat, Helpdesk bilden . Eine Menge Dinge, die wir in diesem speziellen Abschnitt sehen werden. Dieser Abschnitt wird im Vergleich zum letzten Abschnitt etwas länger sein . In diesem Abschnitt haben wir gerade eine einseitige Website erstellt. In diesem Abschnitt erstellen wir ein Minimum an, sagen wir, vier bis fünf Seiten Design. Dieser Abschnitt wird etwas länger dauern, ohne viel Zeit zu verschwenden. Beginnen wir und lernen, wie man eine mehrseitige Website entwirft. Wir sehen uns also im nächsten Video. 32. Startseite Abschnitt 1 1 Von Projekt Zwei: Okay, also fangen wir an. Wie gewohnt klicken wir hier einfach auf neues Design und nennen es als Tech Resolution. Bootstrap wird der neueste sein. Wir wählen die leere Vorlage aus und klicken auf Erstellen. Das war's. Bevor wir vorankommen, müssen wir alle Ressourcen importieren, die wir haben. Gehen Sie einfach zu Ihrem BSS-Kurs-Hauptordner in diesen BSS-Dateien, und dann finden Sie das Ergebnis des Hash-500s Scroll-Ergebnis. Doppelklicken Sie einfach darauf und Sie sehen weitere vier Ordner darin. Alle vier Ordner basieren auf den Seiten wie Homepage-Business-Lösung, unserem Kunden und kontaktieren Sie uns. Was wir hier machen werden, ist wie in Bootstrap Studio, wir werden nur einen Ordner im Image-Ordner erstellen und ihn als Zuhause benennen. Danach, was haben wir sonst noch wen dann Business-Lösung, unseren Kunden und Kontakt. Ich werde einen weiteren Ordner namens Business Solutions erstellen. Also kaufe ich einfach BS, das ist eine Business-Lösung. Dann kontaktieren Sie unser Kunde OCI. Also werden wir es so voll nennen, wie wir den vollständigen Kontakt nennen werden. Okay, basierend auf diesem Ordner werden wir ihn einfach importieren. Ich doppelklicke einfach auf dieses Haus. Ich wähle das alles aus und lege es in diesen Home-Ordner ab. Ich stelle fest, dass 60 Bilder importiert werden, dann Business-Lösung, ich werde einfach alles auswählen. Und Business-Lösung einfacher. Bs sieben Bilder sind da, okay, alle sieben Bilder werden importiert. Danach haben wir unsere Kunden, das ist OC. Also werde ich einfach diesen wem und bs zusammenbrechen. OC ist also dieser. Und OC haben wir nur ein Bild. Also lasse ich einfach deine OCI fallen. letzte Ordner ist Kontaktordner. Auch hier ist ein Ordner vorhanden und ich lasse diesen Kontaktordner einfach fallen. Also lasse ich dieses Bild einfach in diesen Kontaktordner fallen . Okay, also sind Ressourcen in diese geladen, damit wir das schließen können. Jetzt. Mal sehen, was wir Jahr gestalten werden. Also werden wir das entwerfen. Wir werden einen Klon dieser nicht vollständigen Website machen, sondern nur wenige Hauptteile dieser Website. Offensichtlich werden wir die Landingpage entwerfen , die Sie jetzt sehen können, ist dieses Formular vorhanden. Aber sobald es auf die kleine Bildschirmgröße verschoben wurde, verschwindet das Formular. Und der Button kommt hier rüber und es heißt: Erzählen Sie uns von Ihrem Unternehmen und wenn Sie darauf klicken, wenn das Modell kommt und sich dieses Formular in diesem Modell befindet. So ziemlich offensichtlich, wie wir davon erfahren haben, werden wir dafür Medienabfragen verwenden. In diesem speziellen Abschnitt werden Sie die Medienabfrage in einer detaillierten Version verstehen . Okay, fair genug. Fair, fair genug. Fangen wir mit der Einführung jetzt an. Als erstes wie gewohnt werden wir ein Navbar-Jahr machen. Ich werde nur nav tippen und ich werde diese Navbar-Marke nehmen , wird Tech-Ergebnisse sein. Also gebe ich einfach deine TCH-Technologie in unsere ESOL VE ein, tut mir leid, VE Deck Entschlossenheit. Und wir haben eine Ikone da drüben. Also nehme ich einfach ein Icon und lasse das Icon hier rüber fallen. Schauen wir uns also im Bootstrap-Symbol an, haben wir etwas für Technologie oder nicht? Es ist eine Batterie, aber es ist keine Technologie. Batterietechnologie? Nein, überhaupt nicht. Okay. Lasst uns also etwas anderes suchen. Was können wir tun, ist 3D-ADHD VR-Video. sind wir, oh mein Gott. Irgendetwas mit Technologie zu tun, was können wir tun? Wir können Bug nicht benutzen. Kalender gibt es Video ist. Lass uns nach einem Computer suchen. Haben wir einen Computer oder nicht? Kompass haben wir. Lasst uns, nur für diese Demo, nur für dieses Video, ich kann dieses kommögliche Jahr machen. Das glaube ich nicht. Es sieht nicht gut aus. Wir nehmen etwas anderes. Nehmen wir diese Sammlung, wenn sie vielleicht gut aussieht. Ja, es sah gut genug aus. Okay. Peck Ergebnis ist die Website, die wir jetzt gestalten werden . Und diese Navigationsgegenstände, die wir auf dieser Seite haben, wollten wir es auf die andere Seite bringen, also wird die Ausrichtung Ende und die Navigationsleiste sein, wir werden die flüssige Option ausschalten. Okay, fair genug. Gehen wir zurück und sehen, was wir hier haben, ist die Transparenz der Navbar. Gibt es dort einige Transparenzen, die der Hintergrundbereich sichtbar ist. Also werden wir das tun. Springen wir wieder ins Bootstrap-Studio zurück. Und so navbar, ich wähle die Navbar aus. Ich komme zum Hintergrundbild und dieses gelb gefärbte können wir es benutzen. Okay. Dieser oder dieser eine beide dieselbe Bewegung. Dies ist BS-Gelb und dies ist BS-Warnung. Okay, also werden wir diese gelbe Farbe benutzen. Ich klicke auf diese Bildauswahl, gehe zu Auswählen und reduziere die Transparenz einfach auf vielleicht 80%. Ab sofort kannst du nichts sehen, weil wir nichts haben. Aber sehr bald können wir das sehen. Okay, als Nächstes müssen wir diesen bestimmten Bereich erstellen. Dafür werden wir also tun, also nehmen wir ein div. Ich nehme dieses Div ist jetzt da. Und in diesem Div nehmen wir einen Container. Und in diesem Container werden wir eine Reihe nehmen, und darin werden wir zwei Spalten nehmen. Diese eine Spalte und das Steuerelement D ist das Duplizieren. Wir werden hier zwei Kolumnen haben. Dieses Div ist jetzt da. Und für dieses div geben wir die gleiche Hintergrundfarbe wie gelb. Und ich klicke auf Auswählen. Okay, fair genug. In diesem speziellen Bereich dessen, was wir sind, wollen wir hier von traditionell zu digital gehen, und wir werden dies einfach kopieren. Sie können auch kopieren, dass der Domainname peck ergebnispunkt ist. Hier. Ich übernehme eine Überschrift. Lass diese Überschrift einfach hier rüber fallen und füge ein. Denken Sie also an die Verknüpfung Control Shift V , um sie hier einzufügen, immer noch haben wir dieses Problem. Geh, geh von traditionell zu digital. Und ja, die Schrift ist anders. Denn vorerst werden wir mit der gleichen Schriftart gehen. Wenn du willst, kannst du es ändern. Ich glaube, du weißt jetzt, wie man die Schriftart ändert. Wenn nicht, kehren Sie zu den vorherigen Videos zurück und sehen Sie, wie Sie die Schriftart genau ändern können. Okay, fair genug. Was haben wir danach, dass wir einen Absatz haben , der besagt, jedes Unternehmen eine digitale Präsenz braucht, also sind wir hier, um es möglich zu machen. Nehmen wir einen Absatz und reiben diesen Absatz direkt unter diesen und fügen Sie ihn ein. Fair genug, danach haben wir Bild-Image-Tag. Direkt unter diesem setzen wir einfach ein Bild-Tag und doppelklicken auf Home. Dieses Bild, das wir wollen, wähle ich einfach aus. Ja, das war's. Das Bild ist jetzt da. Jetzt haben wir über Jahr etwas untere Fläche und die Navbar hat auch etwas Schatten. Das machen wir. Und davor machen wir einfach eine Vorschau und ich werde Ihnen sagen warum genau wir den Schatten hier verwenden. Wir haben einen Grund da drüben und eigentlich zwei Gründe. Sie können jetzt sehen, da wir die Transparenz von 80% für die Navbar haben , deshalb ist die Farbe hell und die gleiche Farbe, die wir hier verwendet haben, und sie sieht sehr dunkel aus. Dieser sieht aus, als ob dieser Kanäle aussieht. In der Tat sind beide Farben gleich, nur die Unterschiede. Dies ist 80% Transparenz , also 0% Transparenz. Jetzt wollen wir diese Differenzierung nicht zeigen und wir wollen hier drüben einen Trick machen. Aus diesem Grund werden wir dieser Navbar einen Schatten hinzufügen. Also wähle ich diese Navbar aus. Ich gehe zu Optionen, Dekoration, Schatten, Regular. Jetzt komme ich zurück zur Vorschau. Jetzt kannst du sehen, dass es einen Schatten gibt. Sie können sehen, dass der Schatten größer ist im Vergleich zu diesem. Was wir da drüben getan haben, ist dass wir den großen Schatten dort benutzt haben. Jetzt können Sie sehen, dass wir einen großen Schatten haben und dann haben wir einen gewissen Rand für diesen verwendet. Also Marge Top Fünf. Fair genug. Und dafür haben wir Marge unten fünf gegeben. Das war's. Jetzt können Sie sehen, dass wir hier und hier auch zusätzlichen Platz haben. Wenn Sie dann in der mobilen Ansicht sehen möchten, können wir einfach hier runterkommen und dann können Sie sehen horizontalen Bildlauf gibt. Und jetzt wissen Sie, wie Sie das beheben können, nicht durch Medienabfrage. Wir müssen nur auf Antwort klicken. Du. Das war's. Es ist fertig. Wir werden das auch beheben. Also kommt niemand auf die größere Bildschirmgröße zurück , also LG. Ich denke, dein Excel extra groß. In diesem Bereich werden wir das Formular erstellen. Soll ich das Video hier anhalten oder sollte ich das fortsetzen? Okay, lass uns das fortsetzen. Wir werden diesen Abschnitt vervollständigen und dann beenden wir das Video. Auf der anderen Seite, was brauchen wir 0s, wir brauchen ein Formular. Lass uns eine Farm nehmen. Ja, vor dem Formular haben wir einige Texte wie Kontakt jetzt und bekommen das beste Angebot des Tages. Okay, also kopiere das hier. Nehmen Sie die Richtung, die Richtung hier rüber. Einfügen, und diese Überschrift wird H4 sein. Auch für diese Rubrik werden wir die ersten fünf Marge nehmen. Okay, fair genug. Und dann werden wir Form annehmen. Wir treten auf. Dann nehmen wir ein div. Und in diesem div, was wir haben, haben wir FullName, Firmenname, Feldbezeichnung ist nicht da. Wir werden direkt Texteingaben übernommen. Texteingabe. Wir haben Ihre und wir werden dies hier in diese Texteingabe einfügen. Was wir sind, was ist das eigentlich, das ist ein Firmenname oder ein vollständiger Name. Dein vollständiger Name. Das ist FullName. Dann wieder Platzhalter, dies ist nur der vollständige Name. Der Status ist deaktiviert oder schreibgeschützt. Alles sollte das sein und die Validierung wir brauchen es, also mach es erforderlich. Und was wollen wir sonst noch? Diese Kanten sollten scharfe, scharfe Ränder sein. Ich werde diesen einfach als vollständigen Namen bezeichnen. Dann brauchen wir eine Marge, einen oberen und einen Rand unten. Mal sehen. Erstens, Eins reicht oder nicht. Ich denke, der Rand sollte 32 sein, ist in Ordnung. Doc im Rand unten zwei ist gut für diesen ist auch Marge untere zwei gut. Dieser ist Firmenname, Firmenname, Kopieren, Einfügen, Firmenname erneut, es ist erforderlich. Was brauchen wir danach wie Business-Typ Beispiel, Hotelschule. Okay. Duplikat, Business-Typ, Kopie. Und im Platzhalter geben wir Beispiel Hotel. Cool. Was wir dann haben, haben wir hier eine Auswahl, die besagt, ja, mein Geschäft hat GST. Ich bin das ist die GST-Nummer und weiß, dass mein Unternehmen kein GSD IN hat. Wählen Sie aus, dass wir brauchen, damit ich dieses einfach duplizieren werde. Und darin lösche ich das und tippe select. Nimm einfach die Auswahl hier drüben. Wir müssen dies auch umbenennen. Das ist also Firmenname. Dieser ist Business-Typ. Dieser ist APS-Ion. Wir brauchen keine Gruppe. Wir brauchen nur 2. Erste 1 ist ja, mein Unternehmen hat GSD IN und ich denke, wir werden klein sein. Und das zweite wird mein Geschäft sein. Habe keine GSD IN das ja wird ausgewählt. Was wir dann wollen, ist die E-Mail-Adresse, den Kontakt und an welchem Produkt Sie interessiert sind. Okay, gut. Ich dupliziere dieses ein Jahr einfach. Jetzt werden wir das machen. Ich brauche zuerst diese Optionsgruppe, und ich nehme diese oben. Die Optionsgruppe nenne ich sie als statische Website. Dies wird eine einseitige Website sein. Dies wird wie eine fünfseitige Basiswebsite sein. Was ist die Idee von diesen 13 Loci? Dies wird also Wert sein wird 14 sein und das Label wird multipliziert sein. Website, WEB-Site, die Website in Klammern, wird es mehr als fünfseitig sein. Okay, also das kommt statisch und jetzt werden wir noch eins erstellen. Dies wird Option Group sein und das Label wird dynamisch sein. Webseite. Wir fügen das hinzu. Dieser wird also 15 sein. Label wird E-Commerce-Website sein. Es wird nur Option sein. Das Label wird LMS oder Learning Management System sein. Dies wird 16 sein und Sie können viele weitere erstellen. Also höre ich vorerst einfach hier auf. Wenn wir jetzt zur Vorschau gehen sehen Sie, dass wir zwei Gruppen haben. Das ist also eine statische Gruppe und diese dynamische. In statischer Hinsicht haben wir eine einseitige Website, fünfseitige Basiswebsite und eine mehrseitige Website, die mehr als fünf Seiten dynamisch umfasst. Wir haben E-Commerce-Web, bestimmte Elemente, es ist Lernmanagementsystem. Sie können alles basierend auf Ihren Anforderungen hier platzieren. Danach kannst du alles hinstellen. Was wir haben, ist wie eine E-Mail-Adresse, die wir wollen und Kontaktnummer, die wir wollen, und dann wollen wir eine Nachricht, eine E-Mail-Adresse. Also nehme ich diesen geschäftlichen Input an, ich werde dies duplizieren. Und was ich tun werde, werde ich dieses Geschäft nehmen und potent einfach unter GSD fallen und wir werden es einfach als Interesse bezeichnen. Dieser Unternehmenstyp ist die Kontaktnummer. Diese Kennzeichnung dient nicht nur zu unserem Verständnis wann wir dieses komplette Projekt exportieren werden. Diesmal wird auch diese Kennzeichnung sehr wichtig sein , da es eine Option im Etikett gibt. Dies wird uns helfen, wenn wir den Projektor exportieren. Wenn wir das Projekt exportieren, gibt es eine Option namens „Zwei Befehle konvertieren“. Wenn wir den Kern nach dem Export sehen werden, werden diese Labels als Kommentar zu diesem bestimmten Bereich konvertiert . Das wird uns helfen zu verstehen, was genau es ist. Es ist ein Entwicklerkurs und am Ende des Tages ist es wie bei uns, wie wir es machen wollen. Nach GSD, was wir haben, Mal sehen. Nicht nach der GST-E-Mail-Adresse und dem Kontakt brauchen wir das. Okay. Dieser spezielle Bereich wird E-Mail sein. E-mail. Also nehme ich das an. Dies ist die Kontaktnummer. Wir haben die Kontaktnummer des Etiketts angegeben. Nimm einfach die Zahleneingabe ohne Pfeil. einfach diese Zahleneingabe fallen und ich wähle diese aus, lösche diese. Dies ist eine Zahl, die als neue Eingabefelder eingegeben wird. Also müssen wir die Grenzen schaffen, Altersgrenze, also rechteckige Grenzen. Platzhalter wird Telefonnummer sein. Hier wird es nur die Nummer sein. Als Nächstes ist E-Mail. Dupliziere diesen. Beschriften Sie es als Steuerelement und geben Sie einfach E-Mail ein. E-Mail-Eingabe. Whoops. Diese E-Mail gibt dieses Dekorationsrechteck ein oder löscht es. Der Mietinhaber wird eine E-Mail erhalten. Dasselbe für den Namen. Danach brauchen wir in diesem Textbereich. Und wir wollen dieses Rechteck auch, dieses und dieses. Okay? Nach diesem Interesse brauchen wir dieses ausgewählte Jahr nicht. Wir brauchen einen Textbereich. Dieser Bereich wieder, Rechteck. Platzhalter wird das sein, was ich geschrieben habe, da ist Ihre Nachricht. Wenn irgendeine Nachricht, wenn die Nachricht m klein genug sein wird. Sehen wir uns die Validierung an, die jetzt erforderlich, erforderlich, erforderlich ist. Erforderlich. Dann wird dieser eine Ton auf dieser erforderlichen E-Mail-Adresse auf der erforderlichen Adresse gespeichert. Dann ist dieser eine Ton auf dem erforderlichen Ton, und dieser wird optional sein, wie wir geschrieben haben, dass dieser gegebenenfalls als optionaler Fall bleiben wird. Und zuletzt brauchen wir einen Button, um das einzureichen. Also BTN Button, also beschriften Sie es als Nachricht. Dies wird wie der Button sein, ABER DON-Taste. Dieser Knopf. Nehmen wir es als. Buttontyp wird gesendet. Das wird dunkel sein. Jetzt habe ich einige Fragen von den Schülern, die bereits für die vorherige Version des Bootstrap Studios angemeldet sind , sie haben gesagt, dass sich die Optionen der Schaltfläche geändert haben, dass der Block Option ist nicht da. Es stimmt, dass im neuen Bootstrap das Bootstrap F5 ist. Jetzt hat der Button nicht die Option Blockieren. Was müssen wir tun, ist dass wir nur zum Aussehen gehen müssen. In der Breite. Wir müssen ein 100% eingeben. Jetzt funktioniert es als Block, aber leider ist diese Blockoption nicht, du bist es nicht. Okay. Dann haben wir Deklaration und dann rechteckige Dekoration. Und wir geben Ihre Übermittlung, Ihre Nachricht oder was wir dort geschrieben haben wie Nachricht senden ein. Lynn. Senden Sie eine Nachricht senden. Die Grenze ist da eine leichte Grenze, weißer Rand. Ich werde in diesen bestimmten Bereich weitergegeben. Mal sehen wir uns jetzt die Vorschau an, wie genau sie aussieht. Okay, das sieht ziemlich gut aus. Diese Form ist also klein und diese Form ist im Breitenbereich sehr groß. Also werden wir wieder hierher kommen. Mal sehen, das ist unsere Hauptreihe. Diese Zeile ist von Form. Beschriften Sie es einfach als Form und invertieren Sie, was ich tun werde, bis MD. Ich gebe ihm eine Breite von vier. In diesem Bereich werde ich es im Auto behalten, oder vielleicht acht. Acht plus Vier sind also 12. Dieser Bereich ist jetzt fertig. Was also die meisten Wochenenden machen, ist die Anzeige. Wir können die Größe dieses Displays ein wenig erhöhen. Vielleicht wird eine Vier gut sein. Und für diesen Absatz werden wir die Lead-Option einschalten. Was wir für dieses Bild tun können, ist wie, okay, wir behalten es so wie es ist. Wir werden nichts tun. Aber was wir tun können, ist, dass wir das tun können, wir können dieses Bild aufnehmen, tut mir leid, wir können dieses Bild in einem div aufnehmen, wie dieses in einem div und diesem div, wir werden es Ausrichtung Center machen. Was passiert für dieses bestimmte Bild? Es wird in der Mitte dieser bestimmten Zeile stehen, aber die Ausrichtung an diesem Text wird nicht vorhanden sein. Deshalb wird es merkwürdig aussehen. Okay, dafür werden wir es einfach wieder außerhalb des div entfernen und wir werden dieses div löschen. Das brauchen wir nicht. Ja. Okay. Also ist das erledigt? Ja, dieser spezielle Bereich ist erledigt, dann wissen Sie , wie man das Formular wie ein intelligentes Formular erstellt. Mal sehen. Diese Bildschirmgröße ist in Ordnung. Md nochmal, ich denke, wir sollten die Breite in Algen ändern, also werden Algen vier sein und diese wird acht sein. Nehmen wir das komplette 12. Und obwohl wir dieses Formular aus dem Jahr entfernen werden , weil wir dies nicht wollen, werden wir hier in diesem Bereich eine Medienabfrage hinzufügen. Dieser spezielle Abschnitt ist jetzt anders. Feuer, fair genug. Schalten wir also auch das Formular ein. Intelligente Form. Schalten Sie dies einfach ein und wählen Sie die benutzerdefinierte Nachricht des Empfängers aus. Wenn Sie eine benutzerdefinierte Nachricht wünschen, können Sie diese ebenfalls aktivieren. Danach, wo Sie diese bestimmte Website aufnehmen möchten , erstellen wir eine neue Seite, die nach dem Formular aufgerufen wird. Absenden. Ich erstelle gerade diese Seite. Wir werden darin nichts tun, nur um zu bedenken , dass wir das tun müssen, wir müssen auch diese Seite erstellen. Das ist der Grund, warum ich das erstelle. Ich erstelle diese Seite hier. Später. Das werden wir entwerfen. Jetzt auf dieser Seite nach dem Einreichen wird die Seite nach dem Einreichen des Formulars zu Punkt HTML umgeleitet . Wir starten dieses Video hier drüben. Und im nächsten Video werden wir mit der Medienabfrage spielen. Flexbox und Medienabfragen sind immer ein Schmerz, aber jetzt wird es nicht mehr sein. Wir sehen uns im nächsten Video, Leute. 33. Finalisierung Startseite Öffnen Abschnitt 1 Von Projekt Zwei: Okay, willkommen zurück. In diesem Video. Und in diesem Video werden wir, wie ich Ihnen sagte, etwas über Medienabfragen und Flexbox verstehen , ohne Zeit zu verschwenden. Beginnen wir mit dieser speziellen Form, die wir wollen. Wir wollen nicht in der kleinen Bildschirmgröße, wir werden dieses Formular im Modell annehmen. Bis zu LG. Das ist gut genug. Und wenn es um MD geht, das ist mittleres Gerät, das ist mittleres Gerät, gehen die Formulare und dieser spezielle Bereich bleibt hier. Aber das wollen wir von MD. Wenn es sich nicht um diese bestimmte Bildschirmgröße , die nicht Laptop und höher ist, wird dies gut aussehen. Diese Ausrichtung, die linke Ausrichtung ist vorhanden. Okay, fair genug. Aber wenn es in MD und darunter ist, sollte der in einer Mittelausrichtung vorliegen. Was müssen wir dafür tun? Dass ich Ihnen sagen werde, dass diese spezielle Sache, die wir ohne Medienabfrage tun werden, wir werden vollständig Flexbox-Optionen in diesem Bot verwenden , um dieses Formular auszublenden und es zu machen Button hier drüben sichtbar. Dafür werden wir Medienabfragen verwenden. Zuerst werden wir Flexbox machen, dann wechseln wir zur Medienabfrage von diesem Gerät, es ist LGN oben. Ich war nicht diese besonderen Optionen hier drüben. Was ich tun werde, wähle ich diese Spalte und komme zur Flexbox-Option. Okay, das ist also die Flexbox-Option. Wenn du all diese Dinge nicht siehst, musst du nur auf diesen Pfeil hier klicken. In der Flexbox-Option haben Sie diese Buttons, da wir bereits die Grundlagen von Flexbox gelernt haben. Was wir jetzt tun werden, haben wir diese spezielle Gerätegröße ausgewählt, also LG. Und bei dieser Gerätegröße möchten wir, dass die Ausrichtung mit nur einem Klick auf links verlassen wird. Keine Sorge, all diese Dinge werden passieren. Das wird, diese Dinge werden durcheinander gebracht. Aber klicke einfach auf links. Und jetzt in Richtungen klicken Sie einfach hier rüber und klicken Sie auf die Spalte. Jetzt ist diese bestimmte Spalte links von den Bildschirmgrößen LG und höher ausgerichtet . Sie können also sehen, dass dies richtig ausgerichtet ist. Aber was passiert, sehen Sie, sobald wir die Richtung in Spalte konvertiert haben, die Ausrichtung in den Standardwert gekommen. Jetzt müssen wir noch einmal auf diese Spalte klicken und was wird passieren? Sehen Sie jetzt, dass das Bild erweitert wird. Jetzt bist du, du bist auch, du kannst sehen, dass das Bild die Größe des Bildes erhöht hat. Klicken Sie einfach auf diesen Resten und fertig. Alles wird jetzt zurückgesetzt, die linke Ausrichtung ist da. Und in der obigen Bildschirmgröße bleibt auch die Ausrichtung übrig. Nun, was wir wollen, ist von dieser extra kleinen Bildschirmgröße immer noch MD offensichtlich nicht, wir können nichts mit diesem LG tun. Jetzt wollen wir es bis MD machen, wir werden diese Express-Bildschirmgröße auswählen, extra kleine Bildschirmgröße. Und hier was ich tun werde, klicke ich auf Center. Das ist das zentrale Element und die Richtung bleibt, um sie aufzurufen, kann nur sehen, dass das Bild nicht zentriert ist, ausrichten. Diese große Bildschirmgröße. Jetzt können Sie sehen, dass es eine zentrale Linie in MD gibt. Jetzt ist es zentriert ausgerichtet und sobald es heutzutage zu LG geht, links ausgerichtet. So werden wir dieses spezielle Design beibehalten. Nun, wie genau es funktioniert, ist wie eine siebte Pille MD, es gibt keinen Befehl, aber von LG ist der neue Befehl da. Von Exzess ist das extra klein bis MD. Es wird das zentrale Element nehmen und von LG und darüber wird es die linke Ausrichtung nehmen. Okay, so wird die Flexbox hier rüber laufen. Das ist alles. Flexbox für diesen bestimmten Bereich ist fertig. Jetzt werden wir mit der Medienabfrage spielen. Okay, jetzt werden wir uns zur Medienabfrage bewegen. also jetzt zum Bootstrap Studio zurückkehren, was wir wollen, was wir hier wollen, ist nach dieser MD-Bildschirmgröße, wir möchten nicht, dass dieses Formular oder Sie möchten, dass das Formular in einem Modell wird. Und der Start-Button des Modells wird hier sein, direkt unter diesem Bild. Also nehmen wir zuerst den Knopf. Ich nehme den Knopf. Und ich nenne diesen Button als wie heißt der Button da drüben? Sprechen Sie im kleinen Maßstab über Ihr Unternehmen. Also sagen sie uns unser Geschäft. Erzähl uns von deinem Unternehmen. Diese Schaltfläche wird ihr Rechteck sein. Kleiner weißer Rand. Der Stil wird dunkel sein. Ja, das war's vorerst und vielleicht wird die Größe groß sein. Wir werden die Größen groß machen. Hier ist es auch groß. Und du bist auch es wird nur eine große Größe sein. Gehe zurück zum Bootstrap-Studio. Jetzt. Was wir jetzt tun werden, werden wir zuerst ein Modell erstellen. Dann verwenden wir die Medienabfrage, um all dies zu verbergen. Ich übernehme ein Modell über dein Modell, und ich nehme dieses Modell lasse es in dieses Körpermodell-Tag ist Model Dash One. Klicken Sie einfach auf OU anzeigen. Also wird das Modell kommen, entfernen Sie einfach dieses und das Formular, das da ist, ich werde dieses Formular einfach duplizieren. Und ich lege dieses doppelte Formular in diesen Modellkörper ein. Jetzt ist das da und diese modale Fußzeile, ich werde diese Kopfzeile löschen. Das glaube ich nicht. Wir brauchen diesen Header oder wir tippen einfach. Erzähl uns von deinem Unternehmen. Der Kreuzknopf ist da. Wohin das Modell kommen soll. Das Modell sollte kommen. Standardgröße im Vollbildmodus. Okay, es ist kein Vollbildmodus erforderlich. Vertikaler Bildlauf, wir schalten scrollbar ein. Das glaube ich nicht. Es gibt nicht viele Informationen , um es scrollbar zu machen. Ja, wir behalten dieses Formular so wie es jetzt ist. Nehmen wir das Formular ist Smartphone oder nicht. Ja, das ist eine intelligente Form. Jetzt klicke ich einfach auf dieses Modell ausblenden. Jetzt möchten wir diese spezielle Schaltfläche auslösen , damit Modelle oder das Ziel geändert werden. Also werden wir jetzt mit diesem Ziel spielen. Selector ist jetzt Modell. Typ II ist Modell also Ziel umgeschaltet. Fertig. Das ist alles. Kommen Sie also zurück in diesen Bereich und ich klicke auf diesen Button. Jetzt kommt das Modell in dieser Version. So ist es sehr einfach, das Modell hervorzubringen , indem Sie diese Zieloptionen in den Options-Spandrels verwenden. Ja, es ist jetzt fertig, diese Schaltfläche würden wir nur in diesem bestimmten Bereich wünschen , wenn die Bildschirmgröße MD und darunter ist. Und wenn die Bildschirmgröße MDM unten ist, wird dieser spezielle Bereich nicht vorhanden sein. Die Schaltfläche sollte also nicht so aussehen, als würde sie die Unterseite dieser bestimmten Spalte berühren . Wir geben dem Button auch einen Rand unten . Rand unten drei wird also vorerst in Ordnung sein. Wenn wir brauchen, können wir es auch noch mehr schaffen. Das Modell ist jetzt fertig. Lasst uns jetzt mit der Medienabfrage spielen. Styles, neue CSS-Datei. Und benutzerdefiniertes CSS wird da sein. Doppelklicken Sie auf dieses benutzerdefinierte CSS. Klicken Sie einfach auf Erstellen und ich gebe Ihre Punkt-Desktop-Ansicht ein. Es wird eine weitere Punkt-Mobilansicht angezeigt . Anzeige, keine. In der Desktop-Ansicht. Ich will das, aber in der mobilen Ansicht will ich nicht. Also was ich tun werde, ich nehme diese Desktop-Ansicht-Anzeige keine Option ist Desktop-View-Anzeige keine. Also nehmen wir diesen Kurs hier drüben an. Und jetzt ist es weg. Ich werde einfach dieses Medium auswählen, diesen MD hier drüben, kommt zu diesen drei Punkten und füge Mindestbreite der Medienabfrage von 765 hinzu. Wenn ich oben gehe, siehst du, dass wir das nicht haben. Der Grund dafür ist die Mindestbreite 7068. Verwenden Sie diese Anzeige von diesem und darüber hinaus wird dieses CSS angewendet. Die Mindestbreite ist das. Also werden wir es einfach maximal schaffen. Diese und maximale Bildschirmgröße. Wir wollen das. So werden wir das machen. Für diesen speziellen Button. Nehmen Sie die mobile Ansicht, kopieren Sie sie, fügen Sie sie hier und schalten Sie einfach diese Medienabfrage ein. Was wir jetzt tun werden, ist 7068. Wir werden 7671 Pixelaufnahmen machen. Wir wollen in dieser Bildschirmgröße, oder? Das ist also 992991992. Okay? Ja. Jetzt funktioniert es gut. Diese Bildschirmgröße haben wir, sobald wir zur mobilen Bildschirmgröße gehen, dann wird dieses Modell da sein. Das haben wir fair genug. Medienabfrage und Flexbox werden für diesen speziellen Bereich durchgeführt, und dieser spezielle Bereich ist vollständig fertig. Jetzt speichere einfach die Datei. Ich speichere diese Datei. Im Ergebnis erstelle ich hier einfach einen Ordner. Also wird es unter Scroll VSS sein. Und sparen Sie. Diese Datei wird jetzt gespeichert, also ja, das ist alles, das ist alles für dieses Video. Im nächsten Video, was wir tun werden, werden wir mit der Schaffung dieses speziellen Bereichs beginnen. Und das ist sehr einfach. Wir möchten hier nur eine Containerzeile, Spaltenüberschrift und einige Optionen verwenden. Dann haben wir dieses Bild schon da. Dies ist ein GIF-Bild. Und dann erstellen wir Weitere Details anzeigen. Button hier drüben, der auf die andere Seite weitergeleitet wird . Dasselbe wird auch für dieses und dieses passieren. Ich denke, im nächsten Video werden wir alle Abschnitte nur in einem Video behandeln. Fair genug. Wir sehen uns im nächsten Video, Leute. Tschüss. 34. Abschluss Der Homepage Des Projekts Zwei: Okay, also beginnen wir den nächsten Abschnitt, der dieser spezielle Bereich ist. also zurück zum Bootstrap-Studio springen und in dieser speziellen Bildschirmgröße werden wir E tun, ist, dass wir einfach einen Container nehmen und ihn auf dieses Body-Tag fallen lassen. Wählen Sie diesen Container aus. Wir haben den Container jetzt hier drüben, nehmen Sie einfach eine Zeile, wählen Sie die Zeileninstitute aus, die wir haben, und erneut eine weitere Spalte. Also denke ich, dass wir dafür bis Montag 646 geben werden. Es wird so sein, und danach wird es direkt untereinander kommen. Fangen wir damit an. Als erstes brauchen wir eine Überschrift. Überschrift Ich nehme, ich werde auch zwischen Überschrift und Kopfzeile verwirrt. Manchmal, wenn wir nicht darauf achten, ist das Lesen hier, also nehmen wir einfach die Überschrift hier rüber. Die Überschrift ist das. Ihr ganzes Unternehmen braucht unter einem Dach. Um hinzuzufügen, werde ich es über 1,9, 9029$ einfügen es über 1,9, 9029$ . Was können wir danach tun? Wir haben diesen Absatz und dann haben wir auch diese Absätze. Dekolonial will keine Schlüsseltechnologie. Nur in dieser Spalte. Dies wird wird Ergebnis geben. Machen wir es IID. Welches Tech-Ergebnis? Statische Webseite. Lass uns eine Sache machen. Ich werde einfach all diese Dinge kopieren und ich werde dieses Video einfach schnell von statisch und dem ganzen unten B12-Symbol dort drüben machen von statisch und dem ganzen unten , das Häkchensymbol. Ich nehme hier eine Ikone. Dieses Icon checkt zuerst in diese 1 ein, da es sich um eine neue Icon-Sets handelt, oder? Check ist da. Also überprüfe zwei, die wir benutzen werden, wir können diese auch benutzen. Das nochmal, ich werde es schnell vorwärts machen. werden wir, ich möchte Ihre Zeit nicht mit diesem Set verschwenden Ihre Zeit nicht mit diesem diesem . Wir haben also ein anderes, anderes Symbol als dieses genommen . Und wir haben einen Knopf über Jahr, also nehmen wir einen Knopf auch ihren Button. Was du siehst, ist wie mehr Details zu sehen. Wir werden mehr Details sehen. Wählen Sie die Schaltfläche und rechteckige Stil wird gewarnt. Lasst uns lösen. Dieser Button ist kein Button, es wird ein Link sein. Setzen Sie einfach einen Hash-Schlüssel ein oder später werden wir den Link ändern. Danach, was wir brauchen, brauchen wir dieses Bild , dieses GIF-Image. Ich nehme ein Bild-Tag, ich werde einlegen, wen dieses Bild wir verwenden möchten. Also wählen wir dieses Bild direkt aus. Klicken Sie auf Responsive. Ich möchte, dass dies in der horizontalen und vertikalen Mitte kommt . Wenn Sie also zu dieser kleinsten Bildschirmgröße gehen, wird darauf zugegriffen. Und ich gehe zu Flexbox, überprüfe beide Optionen und Spalte dieses V davon, ich mache das auf der Bildschirmgröße, weil es von diesem und darüber wirkt, oder? Es wirkt sich also auf die gesamte Bildschirmgröße aus. Was ist passiert? Oh tut mir leid, tut mir leid. Ich bewerbe mich, ich habe mich auf dieses Bild beworben. Ich bin falsch. Ich kann mich nicht auf dieses Bild bewerben Ich möchte diese Spalte hochladen, wähle diese und die kleinste Bildschirmgröße tatsächlich aus. Und beide Optionen wie diese sind ein vertikales Zentrum. Dies ist das horizontale Zentrum und dies ist das vertikale Zentrum. Jetzt kann ich sehen, dass es nicht der Sentinel ist. Ja. Da sind wir los. Was wir jetzt tun können, ist, dass wir hier zwei verschiedene Farben haben . Wählen Sie diesen Container aus. Ich glaube, ich benutze es. Also, so oft sagte mir jemand, ich solle die Verwendung von Salz moderieren, weil ich es so verwende, so oft und manchmal ist es nervig. Ich glaube, jemand hat mir in diesem Kurs nur gesagt , dass ich das versuchen werde. Ich denke, das ist meine Gewohnheit, nein, kein Problem. Ich schätze, ich benutze sie Margin Top Fünf. Mal sehen. Ja, es ist fertig. Für den nächsten Abschnitt für diesen speziellen Bereich, was wir tun werden, werden wir diesen Bereich einfach duplizieren und beide umdrehen. Was ich tun werde, ich werde das einfach duplizieren. Und wenn ich in diese Reihe komme, nehme ich einfach diese Kolumne und behalte sie einfach über dieser Spalte. Das war's. Sonst gibt es nichts zu tun. Was wir dann wollen, ist dieses , kopieren, auswählen, Einfügen. Und jetzt werden es dieses Mal 29 Dollar sein. E-Commerce-Website. Wir wollen so viele Dinge in dieser Dynamik machen. Das Gleiche. Jetzt ist dies eine dynamische Website. Beachten Sie eine statische Seite mit Admin-Panel. Dann für den Rest der Dinge, die es sagt, denke ich, ja, lasst uns aufhören, die Dinge, die auf den nächsten Abschnitt zu kommen scheinen . Duplizieren Sie diesen Container erneut, kehren Sie zu dieser Reihe zurück und drehen Sie einfach die Seiten um. Dies sind Schlüssel-EMS-Rupien 20. Ändere das einfach auch. Also sind alle Dinge in einem. Ja. 29, 9 Dollar eigentlich, was kostet 20 Rupien in Dollar? USD. Inr, sind 20 Rupien in 0,27 Dollar, okay? Es wird wie 0,27 Schüler pro Monat sein. Es wird GSD einschließen. Wieder habe ich die Schule oder Schule pro Jahr benutzt. Und jetzt müssen wir diese Option kopieren. Wieder, was ich tun werde, werde ich es einfach schnell voranbringen. Ich will deine Zeit nicht verschwenden. Sobald die Kopie fertig ist, fangen wir an. Dieser Bereich ist ebenfalls erledigt und wir werden zum nächsten Abschnitt übergehen , in dem wir wissen was Sie für Ihr Unternehmen benötigen. Wir bieten Ihnen eine komplette Geschäftslösung mit vertrauenswürdigen Zeugenlösungspartnern der Welt. Wer dafür, was wir tun wollen eq div, weil dieses Bild vollständig ist, Alter zu Alter div ist das, was wir für dieses div verwenden werden. Wir werden die ersten fünf Marge nehmen. In diesem Div werden wir die Überschrift übernehmen. Nach der Überschrift nehmen wir einen Absatz. Dies wird mittig ausgerichtete Überschrift sein, die wir verwenden werden , ist diese. Kopieren Sie dies und fügen Sie diesen einen Absatz in diese Überschrift ein, wir verwenden diese eine Kopie. Und füge das im Bootstrap-Studio hier ein. Danach haben wir ein Bild, dann dieses Bild, lassen Sie es in dieses div fallen. Doppelklicken Sie auf Home. Ich glaube, das ist das Bild, oder? Ja, das ist das Bild und klicke auf. Okay. Lassen Sie uns die Vorschau sehen. Das sieht gut genug aus. Aber ich denke, ja, wir haben ihm eine Hintergrundfarbe gegeben. Was wir tun wollen. Ich denke, wir müssen noch eins tief hineinbringen. Und davor wollen wir es ansprechendes Bild machen. Wir werden ein Div in diesem Div nehmen und das Bild in dieses div verschieben. Zurück zum Aussehen, Hintergrundfarbe, und wir geben ihm eine dunkle Hintergrundfarbe. Dieser ist Punkt. Vielleicht ist dieses Bild da. Wir haben einen schönen dunklen Hintergrund gegeben und lassen uns einen Spielraum geben. Oben, ein bisschen wie Marge Top Zwei wird in Ordnung sein. Ich glaube. Vielleicht drei. Marge, Top Drei ist gut genug. Danach haben wir diesen Bereich. Was wir diesen Container wieder kopieren können, bringen Sie dies unter diese Ansicht oder lassen Sie uns das annehmen, tun Sie das. In dieser Spalte, dieser Überschrift, wollen wir einen Absatz, wir wollen, dass das alles eine Überschrift ist, ein Absatz reinvestiert alles, was wir entfernen werden , einschließlich dieser Schaltfläche. Ich mache nur 0 Dollar. Zentrale Linie, APS-registriertes Geschäftsohr. Ich möchte nicht, dass dies ein normaler Absatz ist. Jetzt für diese Spalte möchte ich vertikal und zentriert. Vertikale und horizontale Mitte. Also komm beide zur Flexbox, oh tut mir leid, ich werde das einfach zurücksetzen , sobald ich auf die niedrigste Bildschirmgröße komme. Dieser hier, diese und Kolumne, das ist alles. Nun das ist Anreiz, absolut Zentrum und diese Optionen gibt es. Wir müssen diese Option setzen. Also denke ich, dass wir einen Fehler gemacht haben, indem wir diese Optionen gelöscht haben. Komm einfach her. Wählen Sie all dies aus. Wenn wir diesen Button, einschließlich dieser Schaltfläche, noch benötigen, kopiere ich oder du kannst ihn so annehmen, kopiere in diese Spalte. nun mit der rechten Maustaste, fügen Sie es ein, fügen Sie Das ist erledigt. Aktualisieren Sie das hier. Nicht aufgefrischt. Zurücksetzen. Zurück dazu. Wir wollen das nicht. Dieser auch. Wenden Sie sich an das Management Wieder, was ich tun werde, werden wir das einfach vorantreiben. Das ist alles. Sehen wir uns jetzt die Vorschau an. Sieht gut aus, absolut gut und fantastisch. Und jetzt wollen wir diesen speziellen Bereich hier drüben. Es ist sehr einfach. Was wir tun können, glaube ich, du hast es schon erraten. Wir nehmen ein Div. Und in diesem Div nehme ich ein Bild, ein Anzeigenbild, ein Bild. Dieses Bild, das ich einfach über ihre Position hinzufügen werde, wird zentriert, Größe wird abgedeckt und die Wiederholung wird nein sein. Das ist alles. Dann nehmen wir eine Überschrift. Ich denke, es ist eine Überschrift, Überschrift und ein Knopf. Eine Überschrift. Ein Knopf. Mittellinie für Überschrift, Rand Top Fünf. Lass uns eine Sache machen. Wähle einfach dieses div aus. Polsterung, Polsterung, Top, Polsterung, untere fünf Das ist alles. Rand oben. Das wird eine gute Zahl sein. Marge Top Vier. Ja. Gut. Was steht darin geschrieben? Lassen Sie uns Ihr Geschäft gemeinsam ausbauen. Dies kontaktiert uns. Kontaktiere uns. Diese Änderung zu Erwärmung, Dekoration, Rechteck. Das ist alles genug , dass wir Fußzeile und Fußzeile haben , wir werden einfach eine grundlegende Fußzeile setzen. Footer Ich werde nehmen Ich werde auf diesen Körper fallen lassen, werde diese dunkle Fußzeile oder vielleicht dieses Grundnahrungsmittel nehmen. Jetzt sind die Ergebnisse des dunklen Fußes gut weil wir keine Änderungen daran vornehmen werden, dass wir es so halten, wie es ist. Also wird eine dunkle Fußzeile da sein. Und dieses Div ich glaube ich will nicht Ich will, dass einige nicht etwas Platz zwischen diesen Bereichen waren. Ich wähle dieses div aus, gebe auch einen Rand unten vier. Das war's. Dieser spezielle Bereich, den ihr jetzt seid, ihr könnt diesen Service jetzt über den Firmennamen machen, all die Dinge, die Sie ändern können, und Sie können es tun. Was willst du machen? Auf diese Weise denke ich, dass wir mit unserer Website auf der ersten Seite fertig sind . In den kommenden Videos werden wir die nächsten Seiten der Website machen. Mal sehen, was wir tun können. Ich denke, der Rest der Seite wird gleich bleiben. Aber auch hier, diese Geschäftslösung, müssen wir dieses Animations-GIF verwenden. Es ist sehr einfach. Und das Gleiche werden wir auch Jahr wiederholen. Was wir dann tun werden, wie wir Kunden haben dann ja, die Animation, wir werden Animation verwenden, das wissen Sie schon dann kontaktieren Sie uns. Sprechen Sie uns an, wir sind da. Ja. Jetzt wird der Helpdesk der neue sein, wir machen werden, dann werden Live-Chat-Integrationen vorhanden sein, die wir sehen werden. Das ist, das ist alles für dieses Video. Und im nächsten Video sehen wir etwas Neues. Ich weiß nicht was, aber ja, wir werden im nächsten Video etwas Neues sehen. Wir sehen uns im nächsten Video, Leute. 35. Entwerfen Sie Business Solution Und Kontaktieren Sie Uns Seite 1 Von Project Two: Also willkommen zurück Leute. In diesem Video werden wir die Seite für Geschäftslösungen entwerfen . Fangen wir an. Lassen Sie uns hier eine neue Seite erstellen. Wir werden es als Business-Lösung bezeichnen. Okay, Business-Lösung. Und ich doppelklicke einfach darauf. Beginnen wir damit, unser Div hier rüber zu bringen. Ich nehme ein Div, also werden wir das frei übergeben. Und wir nehmen das Bild auf und lassen das Bild einfach in diesen Doppelklick fallen , gehen Sie zu VS, das ist Business-Lösung und entdecken Sie dort Bilder. Wir verwenden dieses Titelbild und wählen Sie: Okay, einfach einschalten die Reaktionsfähigkeit dieses bestimmten Bildes. Wählen Sie dieses div aus und lassen Sie dieses Zentrum ausrichten. Lassen Sie uns also die Vorschau sehen. Also haben wir dieses Bild oder was haben wir hier? Wir werden dies nicht tun, weil diese bestimmte Komponente in Jumbotron befindet. Und in Bootstrap F5 das Jumbotron eliminiert. Jetzt ist Jumbotron nicht mehr in Bootstrap da. Also werden wir das Design ein wenig ändern. Auf diese Weise. Was wird passieren? Sie können sehen, dass das Bild Jahr ist, was auch immer das Bild ist, das ist komplett pixelisiert. Sie können sehen, dass die Kanten nicht weich von den Bildern sind, aber der ADSR ist alles weich und süß. Okay, fair genug. Also vorwärts, also was wir jetzt tun werden , ist das Bild in zentraler Linie. Fügen wir etwas Polsterung hinzu. Vielleicht lege ich eine komplette Polsterung von zwei ein. Was haben wir danach? Wir haben ein paar Komponenten. Ich weiß jetzt sehr gut, dass Sie dieses spezielle Design machen können. Es ist jetzt sehr einfach für dich. Trotzdem werde ich einen Teil davon machen. Also nehmen wir einen Behälter lassen ihn einfach in die Körpermarke fallen. Dieser Container ist da. Dann nehme ich Zeile, wähle die Zeile aus, nimm die Spalte und dupliziere sie, gehe zu Optionen. Es ist immer noch MD, mach es sechs und füge dann die kleinste Bildschirmgröße hinzu. Dasselbe wird auch in der zweiten Spalte passieren . Da sind wir los. Danach. In dieser speziellen Spalte werden wir ein Bild aufnehmen. Also Bild ich werde einfach das erste Bild einfügen werden die ersten Bilder sein. Wir wissen, was Sie für Ihr Unternehmen benötigen. Dieses Bild ist also ihr Bürospaziergang. Und mach das reaktionsschnell. Dieser Sol, und in diesem ersten Ding werden wir hinzufügen, dann haben wir ein paar Fotos, die wir einen Absatz haben. Und dieser Absatz wird sein und wie immer werde ich dieses Video schnell weiterleiten. Dann ist das Icon da. Schon wieder. Wir nehmen dieses Symbol und doppelklicken auf dieses Symbol. Und wie hieß diese Ikone? Das hier. Ändern Sie etwas für die Business Solution Seite. Duplizieren Sie diesen Drag & Drop in diesem Tag. Prüfen Sie, ob Sie es von hier aus nicht direkt machen können. Nehmen wir an, ich dupliziere das und ich habe es einfach hier übernommen und ich habe es hier platziert. Wenn Sie nicht in der Lage sind, können Sie hier einfach dieses Symbol duplizieren, keine Probleme. Ich koordiniere es, lege es in dieses Absatz-Tag ab. Das ist alles. Dann kannst du es jetzt von diesem Jahr zu Jahr verschieben. Dann müssen Sie dort ein Leerzeichen platzieren, die Tastenkombination für doppeltes Steuerelement D. Um Control D zu duplizieren , ist die Tastenkombination für Duplikate, und andernfalls können Sie es von hier aus duplizieren. Ich wollte nur dieses Icon auslöschen. Da sind wir los. Dieser spezielle Bereich ist also erledigt. Das Gleiche was wir tun werden. Wir nehmen einfach diesen Container, kompletten Container. Und davor werden wir dazu etwas Marge untere vier hinzufügen . Dupliziere das. In der Duplikation mischt einfach diese Zeile, Spalte. Ich ändere das Bild. Was ist das nächste Bild? Anmeldung? Was ich tun werde, werde ich all diese Informationen jetzt nicht ändern. Ich werde es einfach so behalten, wie es ist , weil ihr wisst, was zu tun ist. Was Sie von Ihrer Seite aus tun können, ist als ob Sie einfach das Tech-Ergebnis Punkt n besuchen und dann zu Business-Lösungen gehen. Dann können Sie einfach alle Informationen von Ihnen kopieren und einfügen. Ja, fair genug. Jetzt werden wir es noch einmal mischen. Auf diese Weise werden wir all diese Dinge tun. Also dieses Bild, ich nehme dieses Bild oder so ähnlich. Und am Ende werden wir hier eine Fußzeile hinzufügen , diese Fußzeile, und wir werden am Ende die Fußzeile in der Navbar tun , das werden wir am Ende tun. Danach. Was wir hier haben , ist die nächste Seite. Wir, was wollen wir entwerfen? A ist Kontaktseite. Erstelle jetzt eine neue Seite. Und nennen wir es als Kontakt. Gehen wir in diese Kontaktseite. Auch hier werden wir ein Bild in diesem div aufnehmen. Doppelklicken Sie einfach auf das Stack-Image. Ich glaube, es gibt nur ein Bild. Ja, ein Bild und klick auf, Okay, nur um es reaktionsschnell zu machen. Dann nehmen wir wie gewohnt einen Container. So funktioniert es. Sobald Sie wissen, was zu tun ist und was nicht zu tun ist, die Dinge immer wieder wiederholt. Es gibt nur ein paar neue Dinge, die dazwischen liegen. Alles ist CMC, als hätte ich den Container genommen und die Reihe genommen. Jetzt möchte ich drei verschiedene Abschnitte, also nehme ich hier drei Spalten. in der ersten Spalte sehen, Lassen Sie uns in der ersten Spalte sehen, was da ist. In der ersten Spalte haben wir Kontakt mit uns, zögern Sie nicht uns zu kontaktieren, die Nummer und all diese Dinge anzuklicken oder zu berühren, dann Arbeitsstunden und senden Sie eine Nachricht das gleiche Formular, das sich im Homepage. Nur eine neue Sache ist, dass wir hier einen Knopf haben. Eigentlich ist das keine neue Sache. Sobald Sie auf diese Schaltfläche klicken, werden Sie weitergeleitet. Es war so wer hat uns geholfen? Und das werden wir nur in diesem speziellen Abschnitt sehen . Lassen Sie uns diesen Kontakt erstellen, den wir jetzt erstellen werden. Ich übernehme eine Überschrift. Stell diese Überschrift einfach da drüben. Und Absatzüberschrift, ich werde es nur drei etwas machen , was H3O-Absatz dieser sein wird. Whoops, zögern Sie nicht uns zu kontaktieren. dann Sie dann mit einem Dreifachklick und wählen Sie die gesamte Zeile aus. Dieses Ding passiert, als würden 34 Zeilen extra kommen . Dies ist die Nummer. Was Sie auch hier tun können, ist, dass Sie einen Link verwenden können. Dieses Ding haben wir in unserem vorherigen Projekt gemacht, das ist ein einseitiges Website-Projekt. Nehmen wir die Überschrift fügt diesen Link ein, ich lasse Sie einfach alle fallen. Entfernen Sie diesen Link. Ich wähle diesen Link aus und komme zum Attributfeld. Und wir machen eine Klasse der Textdekoration, keine und fixiert dunkel. Dieses Ding haben wir diesem Link gegeben. Jetzt geben wir einfach eine Zahl weniger als neun ein, was der Ländercode ist. Dann geben wir eine Zahl ein. Reduziere einfach diese Größe. Wird nur das Symbol in diesen Link einfügen. Komm in die Überschrift. Kalender hoch, die voll sind. Ich glaube. Wir wählen diesen Link aus und ich gebe Doppelpunkt ein. Colon, tippt das, ähm, aber du weißt wie genau es funktioniert, oder? Dann nehmen wir einen Button, lassen diese Schaltfläche fallen, fügen diese Spalte ein und starten sie. Schon wieder. Wir nehmen unsere Ikone. Lass es in diesen Knopf fallen. Ein Leerzeichen. Dieses Icon wird unterstützt. Lassen Sie uns diese Schriftart für Unterstützung großartig erklären. Ich korrigiere glücklicher. Ändern Sie die Farbe auf Morgen. Und das ist alles, was wir hier geschrieben haben, ist Hit Desk. Da wir das optionale Jahr des Blocks nicht haben, wer wird zu Aussehen gehen? Wir machen es einen Prozentsatz. Auch. Gehe zu Dekorationen und Optionen, Dekorationen und Rechteck. Dies ist ein Link, der diesen tatsächlich in Link umwandelt. Und im Moment legen wir einfach einen Hash-Schlüssel hier drüben. Wenn wir also unseren meisten Zeiger machen, wird es so kommen. Okay, fair genug. zurück zum Bootstrap-Studio kommen, geben wir ihm einen Spielraum, Top Fünf dazu. Also haben wir einen zusätzlichen Platz und kontaktieren uns. Ich wende mich an H12. Ja, da sind wir los. Jetzt haben wir diesen Abschnitt. Zukunft zum nächsten Abschnitt werden wir dies schaffen, was uns funktioniert. Und wie du es schon erraten hast, ist das auch sehr einfach. Ich werde das einfach beide duplizieren und hier rüberlassen. Und wir geben Arbeitszeiten ein. Das war's. Arbeitszeiten. Dann wollen wir Montag, Dienstag, Mittwoch diesen besonderen Weg. Wir haben zwei Möglichkeiten. Wir können wieder eine Zeile nehmen und die Zeilenspaltenstruktur erstellen. Oder wir nehmen hier einen Tisch. Lass einfach einen Tisch hier rüben fallen. Löschen Sie einfach die Überschrift dieser Dinge. Dann fange ich an, die Tage zu tippen. Nehmen wir das Timing. Ich kopiere dieses Timing einfach aus und beginne mit dem Einfügen. Das wird nichts sein. Das Timing am Samstag ist ganz anders. Arbeite nicht samstags. Dieser wird die Textfarbe zu diesem Feiertag ändern. In diesem Abschnitt ist fertig. Und jetzt wollen wir dieses Formular für diesen Abschnitt wieder. Also gehe ich einfach zum Index. Ich wähle diesen Bereich aus. Ich nehme dieses Formular an, kopiere, kopiere und kontaktiere uns. Wählen Sie mit der rechten Maustaste Drinnen. Das hat sich getan. Und all die Informationen wie Smart Form und all das sind schon da. Das ist alles was ich denke. Also ist es fertig. Wir wollen es mobile Antwort machen Sie tatsächlich auf die Breite gehen die Spalten, eine Spalte, zwei und das dritte Auto. Was sagt der Bildschirm, das ist LG. Lg wird es für, für, für alle für alle in MD sein. Denk das nicht. Es sieht gut aus. Von MD und alles wird es bis hin zu gut Grids abgeschlossen sein. Und lassen Sie uns allen Spalten den Rand unten geben. Wählen Sie beide Spalten aus, und dann geben wir einfach Rand unten vier ein. Wir haben ein Leerzeichen zwischen allen Spalten dort drüben. Das ist alles. Wir sind bereit damit auch kontakt Seite ist fertig. Abgesehen davon, was wir haben, kontaktieren Sie nach Hause. Unser Kunde. Sehen Sie, wir können das ganz einfach machen. Auch. Im nächsten Video, was wir tun werden, werden wir bezüglich der OSI sehen. Im nächsten Video werden wir OC entwerfen. Oc ist unsere Kundenrede. Okay Leute, Danke, dass du dir dieses Video angeschaut und dich im nächsten Video sehen. 36. Entwurf Von OC Des Projekts Zwei: Willkommen zurück Leute. In diesem Video entwerfen wir unsere OCI-Seite , also unser Kunden-Pitch. Lassen Sie uns hier eine neue Seite erstellen und wir werden sie als OC benennen. Werde hier auf diese Seite gehen. Was ich zuerst machen werde, nehme ich ein div. Und in diesem div oder vielleicht davor wähle ich dieses div zuerst und gebe ihm eine feste Höhe von 300 Pixeln. Dies ist eine feste Höhe von 300 Pixeln zu diesem div. Und jetzt scrolle ich nach unten in den Hintergrund. Und darin klicke ich einfach auf Bild hinzufügen. In der ersten, der ersten Option, die URL ist, klicke ich hier auf dieses Symbol Hinzufügen, ich gehe zum OC-Ordner. Ich wähle dieses Bild aus und klicke auf. Okay. Sobald ich auf klicke, Okay, da wir eine Höhe zum div haben , befindet sich dieses Bild jetzt im div. Jetzt werden wir einige Änderungen in der Positionsgröße und im Wiederholungsbereich vornehmen. Also Position wir werden es als Mittelgröße behalten, wir behalten es als Deckung. Wiederhole es. Wir behalten es als keine Wiederholung, da wir nicht möchten, dass das Bild wiederholt wird, wenn sich die Bildschirmgröße ändert und der Rand des Bildes vorhanden ist. Und danach, diesem Alter, wird sich das Bild wieder wiederholen. Wenn ich in den verschiedenen Bildschirmgrößen sehe, sieht es ziemlich gut aus. Es passt das automatisch an. Der passt das Bild automatisch darin an und es gibt die richtige Ausgabe. Okay, das ist also fertig. Und das Gleiche, was wir auch auf der Business Solution Seite tun können , die wir hier gemacht haben. Was ich also tun kann, ist, anstatt das Bild in dieses Div zu legen, werde ich dieses div einfach von hier entfernen. Ich wähle dieses div aus und gebe Div eine feste Höhe, die 300 Pixel angibt. Scrollen Sie nach unten und wir klicken auf Bild hinzufügen. Klicken Sie auf dieses Pluszeichen. Und ich gehe zu diesem BSS, sorry, BS-Ordner, und das ist unser Cover-GIF, ich wähle das aus und klicke dann auf, Okay. Was ich dann tun kann, ist, dass ich einfach die Position auswähle, die zentriert werden soll und dann die Größe abdecken soll. Und nicht wiederholt. Die Wiederholung wird keine Wiederholung sein. Und wähle dieses div aus. Ich komme zum Attribut-Panel und werde einfach den Rand unten drei setzen, und das war's. Vielleicht ist die Marge untere Vier gut. Das war's. Es ist ein anderes V, unsere Elemente in einem Do zu halten. Und wenn wir unsere Vorschau sehen, wenn ich unsere Vorschau sehe, werde ich dieses Jahr einfach machen. Es sieht so aus. Wenn Sie nun die Höhe dieses bestimmten Bereichs erhöhen möchten , können wir das auch tun. Ich werde das einfach minimieren und das ist alles. Also komme ich hier in unseren OCI-Ordner zurück. Und jetzt werden wir den Rest der Portion beginnen, was heißt, ich denke, es ist sehr einfach, aber wir werden es sehr schnell nehmen. Also nehmen wir einen Container, wählen den Container aus und das Attribut, das Marge von vier sein soll, wird gut sein. Und dann übernehme ich einfach eine Überschrift. Ich lege die Überschrift hier rüber. Ich gebe einfach glückliche Kunden oder vielleicht Kunden ein. Und dann nehme ich eine Reihe hier drüben in einem Container. Auch hier ist Ihre Marge, die oberste Marge von vier zu diesem Container. Jetzt nehme ich in diesem Container eine Spalte. Wie üblich. In dieser Kolumne nehme ich eine Karte. Die Karte ist da, und ich brauche diesen anderen Text hier nicht. Vielleicht kann ich diesen Untertitel benutzen. Und wenn ich jetzt zum Bild gehe, nehme ich dieses Bild auf und setze genau über den Kartenkörper. Es wird hierher kommen. Sie sind das, was wir setzen können, ist wie Kunde- oder Firmenname und das Geschäft. Okay, fair genug. Ab sofort nehme ich ein zufälliges Bild hier drüben auf. Vielleicht ist das in Ordnung. Ab sofort wird dies ein Logo des Unternehmens sein. Dann dupliziere ich es einfach ein paar Mal. Vielleicht ist vier gut. Mal sehen wir uns die Vorschau an. Okay, das ist gut genug. Und dann ist vier gut. Es bedeutet, dass wir es so nehmen müssen , dass vier Raster für jede Spalte liegen. Also wähle ich alle vier Spalten gleichzeitig aus. Ich werde, was ich will, was ich getan habe, ist, dass ich den ersten auswählen und meinen größten Punkt des letzten nehmen werde , die Umschalttaste in der Tastatur gedrückt halte und darauf klicke. So werden alle Viere dann in der Breite ausgewählt. Also was für Bildschirmgröße es ist, es ist LG für LGA wird es als vier geben oder entschuldigen, nicht, nicht voll wie drei. Dann werde ich es für MD als sechs geben, wie es absolut zu MD kommt. Es wird eine Zwei-mal-Zwei-Matrix sein. Und in der unteren Bildschirmgröße wird es ein vollständiges Werkzeug sein. Jetzt wurde diese spezielle Berechnung auf alle vier Spalten angewendet. Und es sieht ziemlich nett aus. Und auf die gleiche Weise, indem Sie alle vier Spalten gleichzeitig auswählen. Und ich öffne alle Kolumnen hier eins nach dem anderen. Ich wähle die Karte aus. Also halte ich einfach die Strg-Taste auf meiner Tastatur und wähle nacheinander alle Karten aus. Und dann werde ich im Optionen-Panel Dekoration suchen. Hier ist eine Erklärung. Die Schatten, ich werde einen kleinen Schatten dort drüben legen. Also lasst uns die Vorschau sehen. Und man kann sehen, dass der kleine Schatten da ist. Vielleicht sieht es nicht so schön aus. Nehmen wir also einen regelmäßigen Schatten. Jetzt ist es wie ja, jetzt wird der Schatten hier richtig angewandt. Und jetzt gehen wir in das Animationsbedienfeld und auf den Hover-Effekt, lassen Sie uns erstellen, was Sie glauben , dass wir geben können. Dieser ist gut. Ja, es ist gut genug. Wie genau es aussehen wird wenn ein Mauszeiger darauf kommt, wird er so schweben. Fair genug? Und sagen wir, wenn Sie wollen, wenn nicht genau, Sie sind wie jeder möchte, ist jeder, der ein Feature wie dieses möchte, ein Unternehmen, oder? Sie brauchen also einen Link hier drüben, so wie jeder Kunde. Wenn sie auf diesen Link klicken, werden sie auf die Website dieses Unternehmens weitergeleitet. Okay, wie können wir das machen? In dieser Kolumne nehmen wir einen Link auf. Sie diesen Link einfach in diese Spalte fallen, und dieser Link ist der richtige. Also nehme ich diese Karte und lege diese Karte in diesen Link. Ich werde diese Linktexte einfach aus dem Jahr entfernen. Und jetzt, was hier passiert ist, ist wie jetzt der Text in blauer Farbe und der Untertitel ist, dass sie zugrunde liegen und alles. Was ich tun muss, ich komme einfach, ich komme einfach, du wählst den Link in der Klasse aus. Ich gebe Textdekoration keine und Text dunkel ein. Das ist jetzt alles wieder auf den Standardabschnitt. So musst du also mit all den anderen vernarbten, all den anderen Karten auch machen . Sie können diese Karte löschen und diese Spalte löschen. Und Sie können es noch einmal duplizieren, damit sich der Link in allen Spalten befindet. Und wenn Sie jetzt zum Optionsfeld gehen und sich in der URL befinden, können Sie die URL eingeben. Also gebe ich HTTP-Colon-Schrägstrich mit Keyed classroom.com ein. Ich gebe ihm ein leeres Ziel, also wird es in einem neuen Tab oder einem neuen Fenster geöffnet. Die Seiten werden also aktualisiert. Hier ist der Link also da. Sobald du über ein Jahr schwebst, siehst du hier, wo ist mein Mauszeiger? Sie können sehen, dass der Link dort angezeigt wird. Und wenn ich auf diesen Link klicke , brauche ich die Website für das Klassenzimmer. Ich schließe es gerade. Das ist alles. Glücklich. Kundenseite oder unser Kunde pj ist fertig. Im nächsten Video, was wir tun werden, kehren wir zu unserer Kontaktseite zurück und wir werden anfangen zu erstellen, vielleicht startet dieses ein Ticket, wir sehen uns erstellen, vielleicht startet dieses ein Ticket, im nächsten Video, Leute. 37. Finalisierung Der Multi Von Projekt Zwei: In diesem Video werden wir dieses spezielle Abschnitts-Launcher-Ticket verbinden . Dafür werden wir eine Drittanbieter-Anwendung namens Fresh Desk verwenden . Ich tippe einfach Fresh Desk hier drüben ein. Dies ist die URL von Fresh Desk. Es gibt andere Anwendungen wie Zoho Desk, Zendesk. Du kannst jeden benutzen , den du möchtest. Für mich ist Fresh Desk gut genug. Und das ist keine Förderung von Vorurteilen. Das mag ich persönlich. Okay, also lasst uns hier ein Konto erstellen. Kostenlose Testversionen melden sich an. Zuerst zeige ich Ihnen die Preisgestaltung. Sie werden wissen, warum es für eine kleine Organisation genau anders als das für eine kleine Organisation für eine kleine Organisation kostenlos und völlig kostenlos für unbegrenzte Agenten ist. Wenn Sie eine kleine Organisation sind, dann ist Fresh Desk sehr gut, um das Ding zu starten. Wir werden zwei Dinge in den beiden Dingen benutzen. Einer ist Fresh Desk an einem ist frischer Chat oder sie haben es umbenannt, vielleicht etwas. Mal sehen. Wir beginnen zuerst mit Fresh Desk oder erstellen einfach ein kostenloses Testkonto. Hier drüben. Es sagt mir, dass ich mich per E-Mail melde. Also werde ich auf jeden Fall auf „Mit E-Mail anmelden“ klicken. Ich gebe meinen Namen ein, nicht diese E-Mail-Adresse, meine Yahoo-E-Mail-Adresse. Ich gebe deinen Firmennamen an. Sagen wir es als Cloud-Schule. Dies ist unser nächstes Projekt oder das nächste Projekt, was auch immer es ist, wir entwerfen ein LMS-System. Cloud-Schule ist also da und wir werden dasselbe für Nummer verwenden . Vielleicht kann ich diese vollständige Nummer benutzen. Mal sehen, ob es noch nicht benutzt wird. Und der Datenstandort ist Indien. Ich glaube, es funktioniert. Danke, dass du dich für Fresh Desk entschieden hast Das Fresh Desk-Konto ist fertig und fängt an. Ich glaube, ich muss meine E-Mail bestätigen. Aktualisieren Sie diese Seite einfach über Sie. Aktiviere das Konto, Aktivitätskonto und das war's. Ich glaube, es ist jetzt fertig. Drücken Sie also einige Abkürzungen vor mir. Ja, jetzt müssen wir die URL unseres Helpdesk-Kanals angeben . So frisch ist eine Art Cloud. Cool. Ich denke, dass nur die Cloud-Schule nicht verfügbar ist. Ja, diese Adresse ist nicht verfügbar. Cloud-Schule wird Unterstützung leisten oder vielleicht Hilfe ist nur Hilfe zu finden. Dies ist Cloud-Schul-Dash-Hilfe. Cloud-Schul-Dash-Hilfe. Dot fresh do.com wird die URL sein. Wir klicken auf Weiter. Löse dich nicht einfach. Überraschung. Etwas kommt. Darauf warten wir also. Jetzt. Laden Sie als Nächstes das Team ein. Jetzt können Sie das Team einladen, indem Sie die E-Mail-Adresse so oft angeben, aber wir haben kein Team, also werden wir nur damit fortfahren. Ich mache es später. Und Unterstützung. Wir benötigen eine E-Mail-Adresse von Google oder Outlook oder einer anderen bei der die Konversation dadurch stattfinden wird , sonst wird die Konversation stattfinden. Ähnliches zu verwenden ist Unterstützung an der Red Cloud School, dash H dot Fresh desk.com. Für mich ist es also okay als Demo. Herzlichen Glückwunsch, du bist Fresh. Der Schreibtisch ist bereit und fangen wir an, neu zu verwenden, dies ist standardmäßig, diese drei Tickets sind da. Es ist ein Dummy-Ticket. Du kannst wissen, dass es eine Dummy ist, eine, Dummy-Etikette. Und klicken wir hier auf dieses View-Ticket. Sie können das Ticket sehen, wie genau es da ist es nimmt jetzt ein Tool für mich, ein Schritt-für-Schritt-Tool oder fünf Schritte. So kannst du alles lesen, da ich all diese Dinge schon weiß. Für mich ist es nicht so notwendig. Sobald du anfängst, dich damit zu befassen. Und sobald wir dazu kommen, sobald wir zu dem Abschnitt kommen, in dem ich ausführlich über den Fresh Desk und alles im selben Kurs unterrichten werde . Dieses Mal erkläre ich dir alle Details hier drüben. Und bis wir bis zur Zeit nur mit diesem Integrationsprozess fortfahren werden. Also lasst uns jetzt festlegen, wo sich das Admin-Panel befindet. Klicken wir auf Admin und klicken Sie dann einfach auf das Portal hier. Klicken Sie einfach auf Portal. Und das ist die Portal-URL. Und sagen wir, wenn ich auf diese URL klicke, was genau kommt vor uns? Das ist also die Portal-URL, und so werden unsere Kunden dieses Portal sehen. Ich denke, das ändert das Design. Zuvor war es nicht so. Jetzt haben sie das Design geändert, sah tatsächlich gut aus, ziemlich gut. Sieh ziemlich gut aus. Ich nehme diese URL und kopiere einfach. Komm zurück ins Bootstrap-Studio. Ich wähle diesen Button hier drüben aus. Und das ist schon ein Link. Und wir fügen einfach die URL dort ein, drücken die Eingabetaste und das Ziel ist leer. Auf diese Weise. Wenn wir eine Vorschau auf unser Website-Jahr und wenn jemand auf diese URL klickt, wird er auf unsere Helpdesk-Seite weitergeleitet. Dies ist unsere Helpdesk-Seite der Cloud School. Das sind all die anderen Dinge, die es gibt. Alle Tickets ansehen. Ich denke, das ist tatsächlich das Agent Board. Wenn ich mich auslogge. Also wie wird es ja sein. Ja. Haben sie das Design tatsächlich so geändert, dass es sehr offen ist, ein Ticket einreichen und Artikel durchstöbern und Sie können es etwas durchsuchen, wenn der Artikel da ist. Dies ist eine Wissensdatenbank. Wir werden bald so oft dorthin kommen, andere Wissensdatenbank wird völlig leer sein. So ist es also. Also wird es sich einfach noch einmal einloggen. Dies ist meine E-Mail-Adresse. Ich gebe mein Passwort ein. Weiter zu Fresh Desk. Es wird noch einmal zum Admin-Panel gehen , wenn unser Portal eingestellt ist. Dieses eine Portal, auf das wir kürzlich zugegriffen haben. Jetzt werden wir im kostenlosen Konto zum Widget gehen. Wir können nur ein Ägypten-Widget verwenden. Und ab sofort reicht ein Widget für uns. Also klicke ich einfach auf Widget erstellen und nenne es als Chat. Und wir klicken einfach auf Create über Jahr. Willkommen beim Support, und so wird es aussehen. Das ist also Hilfe und alles was wir tippen können. Lass es uns nur helfen. In diesem haben wir ein Kontaktformular. Mal sehen, ob du hier runterscrollst. Nein, nein, tut mir leid, dieses Jahr nicht nur wenn ich das ausschalte. Das ist also wie leere Artikel und Support-Artikel. Dies ist also nur Support-Artikel vorhanden. Ich werde sowohl die Optionen für den Support-Artikel als auch diesen neutral stellen , und diese ist die andere. Aber sobald wir unsere Testphase von 21 Tagen beendet haben und sobald wir zu den kostenlosen drei Abschnitten des Kontos wechseln, dies nicht funktionieren, also werde ich im Aussehen bleiben. Wir können die Farbe entsprechend unserer Marke ändern, also haben wir diese Farbe und dann einfarbig, wir haben auch andere einfarbige Farben. Das sind die Steigungen, also nehmen wir diese. Und das ist eine kleine Sache , bei der du das sehen kannst, wir benachrichtigen dich irgendwo wie bla, bla, bla. Dies ist der Hauptcode, den Sie wollen. Also kopiere ich einfach diesen Code. Und um all diese Dinge zu speichern, klicke ich hier einfach auf Speichern. Und Einsparungen gespart. Kopieren Sie diesen Code mit diesem eingebetteten Code. Kopieren Sie diesen eingebetteten Code und kommen Sie zu Bootstrap-Studio. Speichern Sie dieses Projekt zuerst. Gehe zu Einstellung. Die Einstellung und gehe zu Head-Inhalt. Denn wenn Sie hierher zurückkehren, heißt es wie, können Sie dieses Widget mit diesem Code in Ihre Website oder Ihr Produkt einbetten . Und wir müssen diesen Code, das Skript, in unsere Head-Komponente einfügen . Ich füge diesen Code einfach hier ein. Es ist wie nach dem Inhalt und davor. Also werde ich nachher gehen, ich füge es hier ein und wir klicken auf Speichern. Sobald ich auf Speichern klicke, kehre ich einfach zu unserem Bootstraps Studio-Vorschauprojekt zurück . Und da sind wir los. Jetzt haben wir dieses Hilfe-Symbol hier drüben, und das ist auf allen Seiten, weil wir zum Einstellen gekommen sind und dann diesen Code eingefügt haben. Wir sind nicht in diese individuelle Seiteneinstellungsoption gegangen und haben diesen Code eingefügt. Diese Option ist also überall. Wenn ich jetzt klicke, sehen Sie die Farbe und den Namen E-Mail. All diese Dinge sind hier. Das ist ein Live-Chat. Du kannst es auch als Live-Chat nennen, aber das ist kein Live-Chat. Dies ist ein Ticket-Supportsystem. Und wenn Sie ein Live erstellen möchten und einen Live-Chat erstellen möchten. Also für das Live-Chat-Jahr haben wir in Fresh Desk, wie in frischen Werken, wir haben einen neuen Messenger. Wir können das auch tun, aber wir werden es in diesem speziellen Abschnitt nicht tun , da wir einen ganz anderen Abschnitt haben. In diesem Abschnitt werden wir sehen, dass unser, dieses spezielle System vorerst fertig ist. Was wir jetzt tun müssen, ist einfach zur Indexseite zu gehen und diese Navbar auszuwählen. Davor müssen wir es benennen wird auch zur Navbar gehen. Ich bin nach Navbar gekommen. Der erste wird das Zuhause sein. Zweitens, was es vielleicht eine Lösung oder vielleicht Business Solution sein kann . Business-Lösung. Der dritte, vielleicht kann es ein niedrigeres Profil haben. Dann können wir direkt mit OC tun. Und dann nehme ich es mir einfach noch einmal. Es wird Kontakt sein. Kontakt. Verbinden wir diese Seiten-Startseite wird Index sein, Business-Lösung wird eine Geschäftslösung sein. Klicken Sie auf Profil und gehen Sie zur Seite und gehen Sie dann zu Profil wird unser Kunde sein. Und Kontaktseite wird Kontaktseite sein. Wir müssen diesen auch direkt nach dem Einreichen des Formulars gestalten . werden wir machen. Sobald das erledigt ist wir alles hier verlinkt haben, ich einfach auf dieses Navi und klicke mit der rechten Maustaste. Gehen Sie zu Kopieren und Einfügen, kopieren Sie zu und kommen Sie zu mehreren , wenn Sie diese Option Kopien verknüpfen und aktivieren Sie einfach dieses Kästchen, damit unsere Navigationsleiste auf alle Seiten und sie kopiert wird wird mit allen verbunden sein. Also wann immer wir in einer Navbar auf allen Seiten gleichzeitig wechseln . Es wird aktualisiert und wir klicken einfach auf Kopieren. Jetzt muss ich eins nach dem anderen in Pfirsich gehen. Und ich muss diese Navigationsleiste von unten nach oben nehmen. Oben bedeutet direkt unter diesem Körper. Komm auch in Kontakt, du bist auch danach, dasselbe zu tun. Index, es ist schon in OCI gemacht, ich muss diesen machen. Ja, da sind wir los. Jetzt komme ich zurück zur Vorschau, wenn ich jetzt hier sehe, habe ich meine Navbar. Wenn ich zur Business-Lösung gehe, ist dies meine Geschäftslösung und dies ist die Hilfe, die Ihr Auge ins Profil geht. Also das ist mein Profil und hilf uns nochmal. Wenn ich dann zu Kontakt gehe, ist mein Ansprechpartner auch da. Und sobald ich das Formular ausgefüllt habe, muss ich zu dieser speziellen Seite gehen nach dem Einreichen aufgerufen wurde, damit Sie hier alles entwerfen können. Was wir ab sofort tun können, ist, als nimm einfach einen Container hier rüber, wähle diesen Container aus und lege einen Rand für H2. Es ist wie ein leerer Strich für den Rand von vier, ich nehme ein Symbol, klicke auf B, vielleicht ein Daumenhoch-Symbol. Komm zum Aussehen-Bedienfeld. Ich gehe ein bisschen schnell, weil ich denke weil ich denke, dass du jetzt weißt, wie das werde ich einfach die Farbe ändern, auf Höhe, Höhe und Schriftgröße kommen . Dann werde ich die Schriftgröße erhöhen. Direkt darunter setze ich ein Überschriften-Tag, gebe die Überschrift hier rüber. Ich hab nie irgendeinen Typ. Danke, dass du uns kontaktiert hast. Wir werden tatsächlich bekommen, was ich hier getan habe ist Sobald ich zur nächsten Seite kommen möchte und wenn ich nur die Eingabetaste drücke, wird es so sein, dass es so sein wird, okay, die Bearbeitung ist fertig. Aber wenn ich zu einer nächsten Zeile kommen wollte, eigentlich nicht p, glaube ich, ich nenne es Seite, aber keinen Pfirsich. Es ist Linie. Was ich tun werde, hat eta verschoben, und jetzt werde ich tippen. Wir werden uns so schnell wie möglich bei Ihnen melden, machen es H4 und den ganzen Container, wir bringen ihn ins Zentrum. Nehmen wir den Knopf, klicken Sie hier drüben. Gehen Sie zurück zur Startseite, kommen Sie zu Optionen und dann wird der Stil gewarnt, um es gelb zu machen. Es wird Link sein, und dieser Link wird es zum Indizieren bringen. Kommen Sie nun zurück zu unserer Kontaktseite und wählen Sie dieses Formular aus. Ja, es wurde bereits zu diesem weitergeleitet. Wann immer jemand dieses Formular ausfüllt, wird es dorthin weitergeleitet. Testen wir es. Testen wir es. Das sind meine Informationen, GSD dann welches Projekt ich nicht mögen werde mehrseitiges Projekt. Lass uns einen Test tippen. Nachricht. Klicken Sie auf Nachricht senden. Sieh dir das an. Ich bin kein Roboter, der sendet. Ja, das war's. Danke, dass Sie uns kontaktiert haben. Wir werden uns so schnell wie möglich bei Ihnen melden und klicken auf, gehen zurück zu Home und wir sind wieder zu Hause. Das sind alles Leute. Ich denke, Sie haben verstanden , wie man diese mehrseitige Website gestaltet, wie man diese Seite verlinkt? Intelligente Form, Help Desk ist wie sehr einfach wir gesehen haben, aber ja, du hast wissen, wie genau wir diesen Helpdesk, den Live-Chat und all die anderen Dinge verwenden werden. Wenn Sie Zweifel haben, stellen Sie bitte eine Frage oder treten Sie meinem Discord-Channel bei. Dies ist also die Discord-Channel-URL, die besagt, dass dieser Link in sieben Tagen die x-bar bekommen wird, was ich gestern gemacht habe und ich sagte Marine- und Klick-Jahr. Hoffentlich ist das da. Oder was Sie tun können, ist, dass Sie Ihre E-Mail-Adresse eingeben können und ich schicke Ihnen eine Einladung dort auf der Diskette in Weiß auf Discord und Sie können dort mu beitreten. Also ja, beide Möglichkeiten, wie Sie dies tun können, und meine E-Mail-Adresse ist der aktuelle Dirigent bei yahoo.com. Sie können dort eine E-Mail schreiben nach einem weißen Link des Rockes zu fragen. Und dann können wir dort drüben Chat-Sessions haben. Und manchmal können wir live, Live-Sessions auch auf Google Meet oder so ähnlich kommen . Und wir können dort drüben mit den häufigen Problemen diskutieren , sind häufige Fragen , die ihr habt. Im Moment ist dieses Pick-Ergebnis erledigt, und wir sehen uns im nächsten Abschnitt dieses Kurses. 38. Aufbau Des LMS Des Projekts Drei: Hallo und willkommen in einer anderen Rubrik. Und in diesem Abschnitt werden wir das LMS-System entwerfen, also das Lernmanagementsystem. Was wir also tun werden, anstatt eine leere Vorlage zu erstellen, verwenden wir die Standardvorlage oder die von Bootstrap Studio bereitgestellte Vorlage in der Anwendung. Fangen wir an, die Website zu entwerfen. Ich klicke hier drüben auf neues Design und nenne es als Cloud-Schule. Cloud-Schule. Und wir werden diese SB Admin-Vorlage im Laufe des Jahres verwenden. Also klicken wir einfach auf diese SB Admin-Vorlage und ich klicke auf Benutzerdefiniert. Und ich möchte alle Seiten verwenden, je nachdem, je nachdem, welche hier verfügbar sind. Wir klicken auf „Alle“. Und ich schalte das ein, damit es auch in der Navigationsleiste hinzugefügt wird . So dass es für uns auch einfach ist. In der Marke. Wir geben es als Cloud-School-Beschreibung ein. Wir können es leer lassen. Beachten Sie, dass Sie sich keine Sorgen machen. Und dann klicke ich auf Erstellen. Dies ist die SB Admin-Vorlage. Dies ist eigentlich die Admin-Vorlage, aber aus dieser Admin-Vorlage aus dieser Admin-Vorlage werden wir auch ein Front-End sowie ein Admin-Panel entwerfen . Es ist also wie in beide Richtungen. Admin-Panel und dieses LMS-Systementwurf dieses LMS-Systems so, dass es einem Benutzer - und Administratormodul entspricht. Wenn Sie ins Kinderklassenzimmer gehen, ist es wie Instructor Admin, Benutzermodul. Aber es ist genau wie zwei Breiten, Benutzer und Admin-Modul und Admin können auch lehrreich sein und auch der Admin. Was wir also zuerst entwerfen werden, ist, dass wir den Benutzer erzwungen entwerfen werden. Das ist es, was wir jetzt vor uns haben und wir wollen nicht viel von diesen Dingen. Was wir zuerst tun werden, ist, dass wir diese Cloud-Schule und das Symbol sehen werden , das wir brauchen. Ich doppelklicke einfach auf dieses Icon und tippe laut. Ich suche hier drüben nach Cloud. Wenn ich spreche, fällt es mir schwer zu tippen, also tippe ich beim Sprechen etwas anderes. Okay, das ist also das Cloud-Icon und ich klicke einfach auf Okay, also haben wir hier eine Cloud- und Cloud-Schultexte. Das sind zwei Divs. In 1D haben wir das Icon und in einem anderen div haben wir den Text. Wir wollen diese Seite Navbar eigentlich nicht. Im Admin werden wir dies verwenden, aber am Benutzerende wollen wir diese seitliche Navbar nicht, aber wir wollen dies zu Dingen wie einem Symbol und einer ist der Text. Wählen Sie beides aus. Und ich komme hierher, Drag & Drop in den anderen Abschnitt in der anderen Navbar, du kannst sehen, dass auch eine andere Navigationsleiste da ist. Ich zeige einen Pfeil da rüber. Durch die Verwendung von Animationen. Ich lasse es hier drüben frei. Es wird direkt neben der Suchleiste angezeigt. Und dann diese Navbar, diese Navbar, die ich am Benutzerende nicht brauche , also lösche ich sie einfach. Sobald ich lösche, wird es eine ganze Seite, Navbar und dann der Rest der Dinge, was auch immer da ist. Auch hier brauche ich das in diesem speziellen Bereich nicht. Also wähle ich dieses Dashboard aus und lasse uns sehen, von wo es sich in diesem Container befindet. Wenn wir diesen Container löschen, funktioniert es? Ja, es hat geklappt. Und wir wollen nicht, dass dies auch die Fußzeile und diese Seite oben ist . Wir können es benutzen und mal sehen. Wenn wir We Can und Orals verwenden wollen, werden wir das löschen. Okay? Das ist also der div-Container. Wir wollen dieses Div weil in diesem Div, dem Navi, aber er ist auch da. Was auch immer wir tun werden, wir werden das nur in diesem Container tun. Vorher, was wir tun werden, werden wir hier ein anderes Farbschema verwenden, wie einen dunklen Modus der Website. Ich komme zu den Ressourcen. Wenn Sie in den Ressourcenordner kommen, ich in der BSS-Datei für Sie freigegeben habe , finden Sie wie Cloud School hier in den Ressourcen. Wenn Sie zu Ressourcen gehen, finden Sie diese benutzerdefinierte Änderung CSS. Was Sie tun müssen, ist die CSS-Datei per Drag & Drop zu ziehen und in dieses Schwanzwasser abzulegen. Jetzt können Sie sehen, dass dieser bestimmte Bereich jetzt dunkel ist. Um nun die Farbe dieser Navigationsleiste zu ändern müssen Sie zuerst die Navigationsleiste auswählen. Vergewissern Sie sich, dass die Hintergrundfarbe vorhanden ist oder nicht. Wenn es da ist. Wie in diesem Beispiel ist es weiß. Klicken Sie also einfach hier rüber und klicken Sie auf Standard, damit es zu einem Standardbereich kommt, unabhängig davon, welche Farbe dieser bestimmten Navbar gegeben wird. Aber wie oft oder transparent, kommt es in den dunklen Bereich, weil wir diese CSS eine CSS-Datei importiert haben diese CSS eine CSS-Datei und diese bestimmte Sache zeigt. Wählen wir diese Suchleiste aus und wir können die Farbe von primär nach dunkel ändern. Und da sind wir los. Wir wollen diese spezielle Sache wie Benachrichtigungsnachricht als Benutzer. Und jetzt gibt es zwei Dinge. Wir werden es ändern. Ich wähle diese komplette Navbar aus und gehe aus der Textfarbe zum Erscheinungsjahr. Eigentlich ist die Textfarbe da und wir können es aus dir weiß machen. Das ist alles, was es getan hat. Und dieses machen wir es manuell, wie Schritt-für-Schritt-Weiß. Ich glaube, es ist woher genau das kommt. Text grau ein CAs wird angewendet, Text grau 600 Jahr. Wir werden Text weiß machen. Da sind wir los. Und wir können diesen Stil von dir entfernen. Sagen wir nun dieses Icon, Icon. Okay, lasst uns sehen, welche Farbe wir dort verwenden können. Ja, wir haben es weiß gemacht. Und diese Benachrichtigungsglocke müssen wir wieder weiß machen. So viel. Navbar-Bereich ist fertig und wir müssen mit dem anderen fortfahren. Dann sehen wir Schritt-für-Schritt-Navbar. Ab sofort ist es erledigt. Wir haben auf die gewechselt, wir haben die seitliche Navigationsleiste entfernt, wir haben die Farbe geändert, wir haben ein CSS importiert. Im nächsten Video sehen wir eine weitere Navbar, sehen wir eine weitere Navbar die wir entwerfen werden und die nur angezeigt wird, wenn wir mobile Geräte verwenden. Wir sehen uns also im nächsten Video, Leute. 39. Erstellen von Navbar für Mobile View Of Project Three: Okay, willkommen zurück zu diesem Video. In diesem Video werden wir eine Navbar entwerfen, die nur für mobile Geräte geeignet ist. Dieser ist jetzt hier, und ich nehme noch eine Navbar. Wir nehmen diese Navbar und ich lasse sie hier rüber fallen . Genau richtig. Ja. Dieser direkt unter dem Körper und lass es sein, was immer es kommt, wir werden alles reparieren. Wählen wir also diese Navbar und kommen zu den Optionen hier. Und in der Position ist dies die dritte Option, die positioniert ist. Wählen Sie einfach diese Option aus und klicken Sie auf Fixed nach unten. Sobald du darauf klickst, wird niemand in den unteren Bereich kommen. Ich denke, wir brauchen das jetzt nicht, also werden wir das löschen. Und wir brauchen dieses brandneue Icon jetzt auch nicht, kein Markensymbol, den Markennamen hier drüben. Wir werden diesen Markennamen auch löschen. Und jetzt kommen wir zur mobilen Ansicht und dann fangen wir an, sie zu entwerfen. Auf Mobilgeräten du. Sobald wir zur mobilen Ansicht kamen, kam dieses Hamburger-Symbol und das wollen wir nicht. Also werde ich noch einmal diese Navbar erweitern auswählen. Ich schaffe es wie immer. Es wird es immer im Exponenten behalten. Jetzt müssen wir sehen , was wir hier rüberbringen müssen. Ich denke, die grundlegenden Dinge, die wir erleichtern wollen, werden das Zuhause sein. Und dann haben wir auch einen Abschnitt namens My Learning oder vielleicht meine Kurse. Und dann Wunschliste, Dann Konto und Suche. Ich denke, wir haben drei oder vier Optionen da drüben. Lassen Sie uns das für Sie löschen, weil wir ein Icon dorthin bringen möchten. Und ich schalte einfach diesen aktiven Button hier aus. Und ich komme zum Icon, suche das Symbol und lasse das Symbol in diesem bestimmten Bereich fallen. Und lass das Icon fallen oder du entfernst diesen Text. Diese Lösung dieses Icon wird zu Hause sein. Welches Haus soll benutzt werden. Mal sehen. Noch ein Icon. Es sollte sehr schlank und trimm sein. Also können wir das benutzen, aber mal sehen. erste Zuhause ist da, dann ist das Suchsymbol da, okay, dann Video, Video ist nicht so gut. Wir können es auch nach Spielen suchen. Dieser ist in Ordnung. Dann setzen oder vielleicht zählen, wissen oder Benutzer. Wir haben alle Icons, dann können wir diese eine Zeile benutzen. Großartig. Das erste ist zu Hause. Ich wähle dieses Home-Icon hier aus und klicke auf Home. Ich glaube, du hast verstanden, was genau wir tun werden. Wählen Sie dieses Element jetzt aus und duplizieren Sie diesen. Doppelklicken Sie auf dieses Navigationsgerät. Und der nächste wird die Suche sein. Wählen wir diese Suche hier aus. Und wir werden es noch einmal duplizieren. Dieses Mal wird es Video - oder Play-Button-Icon sein. Dies ist das Symbol für die Wiedergabetaste. Danach haben wir eine Wunschliste. Ja, die Wunschliste kann ihr Herz sein. Hoffentlich ist dein Herz da. Gott sei Dank. Wir haben es nicht überprüft. Der letzte wird Benutzer sein. Okay. Wir haben diese Icons jetzt über ein Jahr. Und dann wählen wir alles aus. Entschuldigung, ich drücke Lücken August wähle alles aus und komme zur Klasse und tippe einfach margin, left, rand links oder rechts ein. Nur eine Sekunde. Wir müssen Polsterung machen. Drei sind zu viel. Ist genug. Dann auch Marge. Manchmal funktioniert diese Marge nicht in der Navbar, also was müssen Sie zu diesem Zeitpunkt tun? Nehmen wir an, wir nehmen diesen nur und wählen dann zuerst diesen aus und sehen, wie viel Platz hier zur Verfügung steht. Ich habe versucht, ein bisschen Marge zu geben , weil wir auch Flexbox verwenden. Ein bisschen Marge, wo wir eine Marge rechts geben werden. Okay, sagen wir mal, fünf Marge fünf sind gut genug. Nimm einfach diesen und wende Marge fünf auf jeden von ihnen an. Dass sie dort drüben etwas Platz haben können. Sehen Sie, was ich mache, ist, dass ich nur eins nach dem anderen auswähle und kopiere und einfüge. Aber eine weitere Option gibt es. Wählen Sie nun alle Navigationsgegenstände auf einmal aus und geben Sie ihnen einfach den Spielraum an. Es wird auch für dich einfach sein. Sagen wir, zehn sind gut genug. Und dann kommen Sie zur Schrift und zur Schriftgröße, wir erhöhen eine Schriftart auf vielleicht 20. Okay, jetzt komme ich zur Navigationsoption oder vielleicht zum Navi. Wählen Sie das Collapse-Navi , gehen Sie zu Optionen und klicken Sie einfach auf Center. Entschuldigung, wählen Sie dies aus und klicken Sie auf Center. Jetzt befindet es sich in der Mitte, also wählen Sie das Navigationsgerät aus und gehen Sie dann zur Ausrichtung, und wählen Sie dann hier zentrieren. Jetzt haben wir diese Navbar, die zentriert ausgerichtet ist. Und ich wähle diese Navbar wird zu Aussehen kommen. Und ich muss die Farbe geben, diese dunkle Farbe hier drüben. Also komme ich einfach zu diesem Hintergrund. Ich klicke hier. Wir nehmen das Pipettenwerkzeug. Klicken Sie darauf. Ich werde es auch in den Favoriten legen. Dies ist kein Favorit, also wähle ich es aus und gehe zu den Schriftarten. Die Schriften, ich werde das Formular einfach weiß machen. Ich glaube, ich muss das Icon eins nach dem anderen weiß machen. Das ist weiß. Tu es einfach. Ich mache einfach den Schnellvorlauf. Dies ist eine Art, es zu gestalten. Und wir werden ihm ein bisschen anderes Aussehen und Gefühl geben , damit es sehr aufregend aussieht. Was ich tun werde, ist, dass ich hier zum Optionen-Panel komme. Aussehen-Bedienfeld, oder komm einfach runter und ich wähle diesen Rahmen aus. Ich wähle diese Grenze oder vielleicht die ganze Grenze aus. Und lassen Sie uns einen Radius geben. Und lasst uns versuchen, es zu einer Kurve zu machen. 150 sind genug, 50. Und wir kommen, du bist oben. Ich habe den Navbar Map Kreditnehmer ausgewählt, Sie haben Recht. Ich mache das. Rand unten. Wir werden nur versuchen, es auf einer Website zu schaffen, ein bisschen pro Seite, sagen wir, fünf sind genug. Und wir werden versuchen, hier drüben einfach etwas mehr Platz zu geben. Was wir dort tun können, denke ich, dass die Polsterung die beste Option dafür sein wird. Polsterung, oder? Funktioniert es? Nein, es passiert innerhalb dieses Randes, oder? Marge funktioniert. Margin Five ist gut für rechte oder linke Seite, auch wir werden definitiv nur fünf geben. Okay? Wir werden es ein paar Schritte nach unten gehen. Und jetzt, anstatt diese Farbe zu geben, denke ich, was wir tun können, anstatt diese Farbe oder direkte gerade Farbe zu geben , die wir dort einen Farbverlauf verwenden können. Also Gradient, lasst uns sehen, wie wir das schaffen können. Wie wir das machen können, bedeutet, welchen Farbverlauf wir von dunkel zu hell oder hell bis dunkel verwenden müssen. Mal sehen. Wählen Sie dieses aus. Design Ich wähle diese Farbe aus. Schon wieder. Ich gehe zu Select. Dann. Ich bringe es auf die leichtere Seite. Blau wird nicht angemessen funktionieren. Sagst du das Leute? Wie der Gradient gut aussieht? Nein, nicht für mich. Das glaube ich nicht. Es sieht gut aus. Eigentlich. Lass es nur so sein. Ja. Ich denke, das ist alles, was wir tun können. Abgesehen davon wählen seine Beine diese Icons aus. Nicht gerade verursachte ich dieses Navi Items und wir können eine Schriftgröße reduzieren. Es ist zu groß, also können wir es klein machen. 16 ist gut, und wir haben die Polsterung auch irgendwo gegeben. Indem wir einen hinzufügen, entfernen wir diese Polsterung. Okay, jetzt ist es richtig falsch. Jetzt müssen wir jetzt einen bus fahren, entweder der obere ist unten, aber diese Navbar werden wir nur benutzen, wenn wir auf dem mobilen Bildschirm sind, dass dieser NaBR dann nicht da sein wird. Dafür müssen wir die Medienabfrage verwenden. Und diese Medienabfrage werden wir im nächsten Video sehen . Wir sehen uns im nächsten Video. 40. LMS Landing Page Des Projekts Drei: Okay, also werden wir anfangen, den Rest der Gegend zu erstellen. Zuvor müssen wir einige der Elemente oder vielleicht einige der Ressourcen von Ihnen importieren . Dieses Titelbild wollen wir und diese Kurssymbole wollen wir. Also kommen wir zu unserem Bildbereich und ich werde einen neuen Ordner namens Cover erstellen, in dem ich nur ein Cover platzieren werde. Und ich werde einen weiteren Ordner erstellen um einen weiteren Ordner zu erstellen, und ich nenne ihn als Kursbanner. Doppelklicken Sie einfach auf diesen Kursmappe. Ich werde diese Banner per Drag & Drop in diesem Kursbanner-Bildordner , dem Kursbanner-Ordner, ziehen und ablegen. Und ich werde kommen, um zu entdecken, oder vielleicht wähle ich beides aus und es wird es in dieses Cover fallen lassen. Der andere ist nicht abgedeckt, aber lass es sein, ich werde es dort behalten. Okay, also haben wir unsere Bilder jetzt bei uns und lassen Sie uns den Rest der Dinge erschaffen. Also nehme ich zuerst einen Container und ich werde darin fallen, wie ich dir sagte, wir werden alles in diesem machen , dieses div. Ich habe einen Container genommen und in diesem Container nehme ich ein div, div und lasse es einfach in diesen Container fallen. Und jetzt wollen wir in diesem Container unser Titelbild aufnehmen. Also mache ich dieses Bild hier. Doppelklicken Sie auf dieses Bild und gehen zu unserem Cover und wählen Sie dieses Bild aus. Klicken Sie auf Okay. Und da sind wir los. Und wir müssen die Antwort auf Ihre Option hier einschalten . Da sind wir los. Wir haben dieses Bild, das wir importiert haben, und sein zwei großes Image. Und mal sehen, wie genau es in der mobilen Ansicht läuft. Whoops, es ist weg. Ich denke mal sehen, wo wir haben. Ich denke, wir haben unsere Medienabfrage an dieses div gegeben , verstecken Sie sich auf dem Handy. Es sollte nicht dein sein, eigentlich sollte es nur für diese Navbar sein. Und ich tippe es einfach hier ein. Jetzt ist das weg. Und für dieses Bild müssen wir eine Sache tun, bei der wir die Größe des Bildes reduzieren müssen. Okay, im Bootstrap Studio haben wir die Möglichkeit, dieses Bild direkt in einem Bildeditor wie Photoshop oder GIMP oder einem beliebigen Bildeditor zu öffnen einem Bildeditor wie Photoshop . Und von dort aus können wir es schaffen. Also lasst uns das machen. Im Cover. Ich wähle dieses Cover aus, klicke mit der rechten Maustaste auf Öffnen in und klicke auf Photoshop. Also habe ich Photoshop in meinem System. Ich öffne es in Photoshop. Und sobald es in Photoshop geöffnet ist, öffnet sich Photoshop oder dort. Jetzt wird das Foto direkt im Photoshop aufgerufen. Und falls Sie diese Option nicht finden, wie in Photoshop öffnen. Sie werden also feststellen, dass diese Option geöffnet ist, aber Sie können auf diesen konfigurierten Editor klicken. Dann finden Sie die Editoren, die Sie in Ihrem System haben. Oder klicken Sie einfach auf Editor hinzufügen. Und Sie können einige davon finden, Sie können einfach auf diese Ressourcendatei oder vielleicht auf den Launcher dieses bestimmten Bildeditors klicken . Vielleicht wie GIMP oder Photoshop oder so. Klicken Sie einfach auf diesen Launcher und klicken Sie hier auf Öffnen. Und dann wird es in diesen speziellen Trägerbereich kommen . Und dann können Sie den Standardeditor auswählen. Ich sage das nur ab. Ich komme zurück zu Photoshop und werde dieses Bild einfach zuschneiden, indem ich C treffe. Ich werde dieses Jahr nur ein Stück nach unten nehmen . Ich denke, das ist genug, oder? Klicken Sie einfach auf Enter. Und jetzt muss ich nur noch Datei gehen und auf Speichern klicken. Und klicke einfach auf Okay. Und das ist alles. Wenn ich wieder in mein Bootstrap-Studio gehe, gehen wir los. Jetzt ist es schon fertig. Es ist bearbeitet. Es ist richtig gehackt. Okay, das wollte ich und das ist alles. Ich wähle dieses Bild aus und fange damit an, weiter zu bearbeiten. Im Bootstrap-Studio. Es kommt einfach zum Aussehen-Bedienfeld und scrollt nach unten zum Bereich der Grenzen. Ich wähle hier alle Grenzen aus und gebe ein bisschen Kurvenfläche an. Sie können hier ein bisschen Kurvenbereich sehen, vielleicht ist es bis 18 oder 20 in Ordnung. Okay, 20 sind gut genug. Da sind wir los. Jetzt haben wir ein richtiges Bild darin und lassen uns die Vorschau im Browser sehen. Die Vorschau ist nicht aktiviert, also klicke ich einfach auf Vorschau. Und da sind wir los. Wir haben die Vorschau, aber wir haben viel leeren Platz hier drüben. Wie repariere ich diesen leeren Raum? Es ist einfach. Klicken Sie einfach auf diesen Behälter und schalten Sie diese Fluidoption ein. Und kommen wir zurück zu unserer Vorschau. Es wird los sein, wir haben diese Option über dich. Ich denke, es ist immer noch ein großes Image. Wir müssen es mehr abschneiden. Kommen Sie also zurück zum Bootstrap-Studio, kommen Sie zum Cover und klicken Sie mit der rechten Maustaste. Öffnen Sie ein und öffnen Sie wieder in Photoshop. Es öffnet das Bild in Photoshop. Da sind wir los. Lass es uns ein bisschen mehr abschneiden. Lassen Sie es uns von hier fernhalten und lassen Sie es uns vom oberen Bereich abschneiden. Ich denke, das ist fair genug. Gehen Sie zu Datei, klicken Sie auf Speichern. Zurück zu Bootstrap Studio wird das sehen. Und du, mal sehen. Da sind wir los. Lass uns ziemlich gut aussehen wie klein und anständig. Okay, gut, fair genug. Fangen wir an, den nächsten Teil zu entwerfen. Dort können wir die Kurse sehen. Dafür nehme ich eine Überschrift. Ich lasse diese Überschrift in diesen Container fallen. Dies ist die Überschrift, ich gebe es einfach ein, tippe deine Kurse ein und ich mache es H12. Das hier muss ich weiß machen. Kommen Sie einfach zu Ihrer Schriftart und klicken Sie auf diesen weißen Bereich oder Ihren weißen Text. Wir müssen einen Spielraum geben. Die Top 33 sind gut genug. Marge Top 3 ist gut genug. Ja. Okay. Jetzt erleichtert der nächste Bereich, was wir gestalten werden, den Kurslistenbereich. Dafür. Wir nehmen eine Reihe und wir lassen diese Reihe in diesen Container fallen. Eine Spalte in diesem Container, eine Spalte in dieser Zeile. Wählen Sie dies aus. Ich nehme eine Wache. Leg die Karte hinein. Da sind wir los. Also was alles was wir wollen Titel, wir wollen Untertitel, wir wollen diesen Bereich verwenden, aber wir wollen diese Links nicht. Also lasst uns das entfernen und mal sehen, ob wir das benutzen können oder nicht. Wenn wir das nicht brauchen, können wir es löschen. Dieser Bereich wird der Titelbereich sein. Nennen wir es also als denselben Kurs. Bootstrap Studio 5.9, oder vielleicht finden Sie 0.9 x was ist passiert? Vot Bootstrap Studio 5.9 x DBs Schritt für Schritt. Natürlich so etwas. Du bist der Untertitel, ein Untertitel wird da sein. Und was können wir eine Bewertung abgeben, Bewertungen, die wir in Ordnung bringen können? Also werden wir hier eine Spanne nehmen , in diesem Absatz. Diese Spanne. Und innerhalb dieser Spanne nehme ich das Symbol. Wenn Sie es wie eine dynamische Website entwerfen , verwenden Sie diese Icons und alles nicht. Lasst sie. Sie haben ein Paket, wenn Sie ein Framework verwenden, sagen wir ein laterales Framework oder ähnliches. Sie haben ein Paket und von dort aus werden Sie es verwenden. Zu dieser Zeit wirst du das eigentlich nicht benutzen. Aber um einen guten Blick darauf zu werfen, benutzen wir diese Sterne hier drüben. Ich wähle hier alle Fünf-Sterne aus. Lassen Sie uns ein bisschen Polsterung geben. Und in diesem Textbereich werde ich einfach diesen Text und in den Klammern entfernen. Also geben wir einfach 123456 Schüler oder vielleicht keine Schüler ein. Wir können es mit 123456 bewertet werden. So viel Bereich ist gut genug und Sie bekommen diese Grenzen und all das, weil wir das CSS am Anfang hinzugefügt haben. Es gibt eine benutzerdefinierte CSS-, benutzerdefinierte Change-Punkt-CSS-Datei , da all diese Dinge bereits vorhanden sind. Als nächstes werden wir ein Bild machen. Dieses Bild, ich werde es über dieses Bodytag, Pappe JTAG tatsächlich Kartenkörper-Tag richtig machen . Und es wird darauf doppelklicken. Und wir gehen zu unserem Kursbanner. Und wir werden alles davon auswählen. Nun, sagen wir, wählen wir dieses aus. Das ist also unser Bootstrap-Studio wie Winner Wonder, naja, was auch immer es ist, so viel Bereich ist erledigt. Und Schatten, das glaube ich nicht. Wir müssen etwas Schatten anwenden weil es schon dunkel ist und was nützt es, das zu geben? Aber ja, wir können es animieren. Also klicke auf „Hover“. Das hier. Mal sehen. Ja, es funktioniert tatsächlich richtig. Und wie viel müssen wir geben. Vielleicht können wir es geben 33 ist gut. Also bis LG können wir es 43 geben. Dann ist das MD, Moment ist dieser MD. In MD können wir es vielleicht 4444 geben. Und dann ist die untere Bildschirmgröße, ich denke, sechs reicht aus, wie zwei mal zwei oder vielleicht können wir auch eins nach dem anderen gehen. Das ist auch gut. Zu gut ist auch gut, keine große Sache. Lassen Sie uns das duplizieren. Ein paar Mal. 1234 mal ist okay. Diese Bildschirmgröße, lassen Sie uns dies in verschiedene Kursbanner ändern dies in verschiedene Kursbanner damit es etwas anders aussieht. Eins nach dem anderen. Und Titel können wir auch ändern. Wir können uns jetzt abschrecken, wir können Lorem Ipsum setzen. Also wähle ich das aus. Meine Überschrift werde ich kontrollieren und ich tippe Labrum. Whoops. Steuern Sie D lorem, geben Sie ein, geben Sie Lorem Ipsum ein. Nicht so viel. Nehmen wir an, wenn unser Kurstitel groß ist, aber offensichtlich werden wir ein Charakterlimit von 60 angeben, damit wir dort einen richtigen SEO-Titling machen können. Aber wenn wir hier viel, viel Text haben , können wir etwas tun oder Sie, Mal sehen, was wir im Textbereich tun können. Aber wir werden es im nächsten Video machen. 41. Finalisierung LMS Landing Page Of Project Three: Okay, also werden wir weitermachen , wo wir noch sind. Wir wollen also nicht diesen langen Bereich oder sonst und z. Jetzt sind das kurze Texte, also haben wir dieses Leerzeichen hier drüben. Was wir tun können, ist, dass wir diesen Textbereich auswählen. Und in dieser Textoption werden wir einfach kommen und diese beiden Optionen für all diesen Text zu große Schleife aktivieren , um dies nur zu tun. Es wird also nur wie ein Liner sein und es wird keine Störung in der Benutzeroberfläche geben. Dies sind Überschriften-Tags mit h4. Wir wollen kein H4 da drüben, also ist H5 auch gut genug dafür. Das ist „lösen“. Wählen wir diesen aus und lassen Sie uns einen weiteren Lorem Ipsum-Text dort hineinlegen. Wir haben da drüben etwas anderen Titel. Ein anderer Titel hier drüben. Und wieder ein anderer Titel hier drüben. Okay. Welche Fremdgröße hat das, Gary, dieser Absatz? Dies ist der Zeitpunkt, an dem 16. Eigentlich wollen wir nicht, dass das 16 ist. Wir wählen also alle Absätze aus, indem wir die Strg-Taste gedrückt halten und nacheinander auf den gesamten Absatz klicken. Reduziere einfach die Größe auf 12. Wir müssen hier etwas geben. Eigentlich, weil sie miteinander verbunden sind, wollen wir eigentlich nicht so. Also kollabiere einfach alle Spalten hier drüben. Sofort. Ich wähle alle Spalten aus. Drücken Sie Strg, entschuldigen Sie, halten Sie gedrückt, Umschalttaste und wählen Sie alle aus. Und der Rand unten ist gut, denke ich, oder vielleicht drei. Ja, drei sind gut genug. Und jetzt sehen wir uns die Vorschau an. Da sind wir los. Wir haben diese Verhinderung Jetzt, haben Sie diese Bilder beim Laden eins nach dem anderen gelöst , damit auch zu einer besseren SEO, Suchmaschinenoptimierung passt. Und selbst wenn Sie den Geschwindigkeitstest der Website überprüfen, wird es Ihnen immer empfehlen, Dot-WebP-Bilder zu verwenden. Im Moment verwenden wir alle PNG-Bilder light. Daher wird es Ihnen immer empfehlen, WebP-Bilder zu verwenden. Und es wird wieder immer empfehlen, Lazy Loading zu verwenden. Lassen Sie uns sehen, wie genau wir die Lazy Load in Bootstrap Studio aktivieren können , wählt die Bilder, alle Bilder einzeln durch Klicken, indem Sie die Strg-Taste gedrückt halten und auf die Bilder klicken , gehen Sie zu Optionen. Und hier haben wir die Option Lazy Load und wir können es faul machen. Das ist alles. Wenn Sie im CSS über Jahr sehen können, ist die Belastung gleich faul. Und jetzt können wir sagen, als hätten wir dort drüben ein bisschen optimiert. Was genau faule Ladung bedeutet. Jetzt können Sie sehen, ob die Bilder, diese bestimmten Bilder unten auf der Seite, auf denen dieser bestimmte Bereich bisher nicht sichtbar ist. Dieses Mal wird dieses Bild nicht geladen. Das hilft der Website , schneller zu laden. Anstatt alle Bilder zu laden, die sich noch nicht vor dem Bildschirm befinden. Ich denke, das ist gut genug, aber ja, wir müssen den Preis dort hineinlegen. Schon wieder. Wir müssen all dem den Preis hinzufügen. Das machen wir. Was ist zu tun? Wir gehen auf den Weg. Wir platzieren es Jahr, und das wird H3 sein oder vielleicht ist H4 auch gut. Und dann nimm ein Icon. Dieses Symbol wird eigentlich das Währungssymbol sein , da ich aus Indien komme, also verwende ich meine Währung , also Rupie 99. Ich tippe hier. Lassen Sie uns zuerst die Vorschau sehen. Jetzt. Sieht ziemlich gut aus, nicht so schlimm. zurück ins Bootstrap-Studio komme, muss ich das duplizieren. Bring es mit. Dupliziere das noch einmal. Wir bringen es her. Duplizieren, duplizieren. Hallo. Schräg es und bring es dir. Okay, fair genug. Jetzt sind so viele Kurse ab sofort gut zu gehen. Ich denke, anstatt dass wir dort auch einige Änderungen vornehmen können, als ob es zu groß aussah, dann können wir es klein machen. Klein bedeutet, was wir tun können, wählen Sie alle Spalten über Ihnen aus. Anstelle von drei. Wir können mit zwei gehen. Mal sehen, wie genau es aussieht. Eigentlich sieht es in dieser Größe gut aus. Werde es nur so behalten. Wir haben das. Und wenn wir versuchen, die Bildschirmgröße zu senken , braucht es den richtigen Bereich. Ist es nicht? Du kannst damit herumspielen. Und für mich denke ich, dass es gut ist. Und danach werden wir einen weiteren Abschnitt erstellen. Nicht genau Abschnitt. Wir werden hier eine weitere Überschrift erstellen ist meine Überschrift. Überschrift. Und ich werde das in diesen Container fallen lassen, weil ich das direkt unter dieser Zeile haben will. Du bist genau, ich schaffe es H12. Dies zu einer weißen Farbe. Ich gebe ein, dass du natürlich ein Abschlusszertifikat erhältst , anstatt einfach zu kopieren und einzufügen. Bringen Sie es zur zentrierten Ausrichtung. Und ich gebe Marge Top Fünf. Ich habe da drüben etwas guten Platz gelegt. Was ich tun werde, werde ich das in ein div legen, tatsächlich in dieses div. Und dieses div, ich werde es als Mittelausrichtung machen. Und ich werde den zentralen Admin von diesem entfernen. In diesem div nehme ich einen Absatz, diesen Absatz in diesen Absatz, ich werde ihn als Selbstvalidierungstest nennen und ein Zertifikat erhalten. Ich kopiere und füge nur die Daten ein, die ich habe. Aber ihr Leute, ihr tippt die Daten ein. Ich hebe das schon wieder auf. Jetzt nehme ich einen Streit. Es wird diese Zeile in diesem div nehmen. Dann nehme ich eine Kolumne. In dieser Spalte nehme ich das Bild-Tag. Doppelklicken Sie auf das Bild-Tag. Wir haben dieses Bild, das ich Major sehen wollte. Jetzt öffne ich dieses Bild gehe zu Optionen zu dieser Antwort. Du duplizierst dieses einfach von dem anderen. Ich lösche dieses Bild einfach. Ich werde 21 Überschriften-Tag dort drüben setzen. Ich denke, wir müssen es außerhalb dieses Div nehmen. Wir wollen nicht, dass das in einem zentralen Element kommt. Dieses div, ich werde es über diese Regel nehmen. Okay. Fair genug. Diese Überschrift wird als Kursleiter aufgerufen. Dann nehmen wir tatsächlich den Absatz. Geben wir in einem Absatz etwas sehr zufälliges Wonder Woman ein. Alles klar, ich werde das duplizieren und wir werden es als viele Mythen der Kontrolle betrachten. P, double Enter, Enter, Enter, Menge Epsilon. In diesem speziellen Abschnitt möchte ich komplett weiß. Also, um diese Spalte auszuwählen, erscheint sie zum Erscheinen. Zur vollständigen Spalte gebe ich weiße Farbe. Und ich möchte auch diese speziellen Texte, wie alle drei Texte wie in der Mitte kommen sollten , wie horizontale Mitte. Also gehen wir zum Optionen-Panel und in die Flexbox. Also öffne ich diese Flexbox. Ich klicke auf dieses Zentrum. Mal sehen, von wo ich das in der Mitte haben will. Ihr erstes werden wir diesen Spaltenbereich reparieren. Dann gehen wir zur Flexbox. Ich denke, es ist okay zu gehen. Das ist SM. Sm wir wollen sechs. Dann habe ich beide Spalten ausgewählt. Du bist es also, es ist eins nach dem anderen. Und von dir ist es Seite an Seite. Wenn es nacheinander ist. Ich möchte, dass das in einem Mittelbereich wie diese Weise kommt. Dann schalte ich nur eine Sekunde ein. Ich wollte nur diese Spalte auswählen. Und der zweite, nicht beide, hat gerade in diesem und spaltenweisen Zentrum und diesem gemacht. Okay, also wenn ich jetzt die größte Bildschirmgröße erreiche, kannst du es sehen. Es kommt automatisch in die horizontale Mitte. Dies ist ein horizontales Zentrum. Sie können Center sehen und das ist übrig. Dieser Bereich ist fertig. Eine letzte Sache, die wir tun können, ist, dass wir einen setzen werden. Was wir hier machen können, stellen wir ein Video da drüben. Tut mir leid, ich nehme dort noch ein Div. Dieses div. Für dieses Div geben wir einen Marge Top Vier. Lass uns ein Video machen. Dies ist ein Video, also div, ich werde es in die Mitte bringen , damit das Video in die Mitte kommt. Und jetzt statt dieses u2 werden wir einen Vimeo nehmen, denn YouTube, weißt du, wie genau es nehmen würde, Beispiel kopiere einfach die URL dort drüben. Und das ist Vimeo. Vimeo scheint auch die URL zu nehmen. Das ist alles. Es ist fertig. Eigentlich. Kopiere einfach diesen Link. Lass mich das entfernen und einfügen. Jetzt ist das dein Titel. Lassen Sie uns den Titel entfernen und dann den Autor anzeigen. Entferne auch diesen Autor. Das hier. Das ist alles. Wir werden nur die Controller da drüben haben. Wenn ich jetzt zu unserer Vorschau gehe. Ja, jetzt ist das Video da und Sie können auf dieses Video klicken, um es zu schildern. Ja. einige Fragen erhalten, bei denen mich Schüler wie ihr fragen, wie genau ich hier ein HTML5-Video hinzufügen kann und das ich behandeln werde, ich habe das auch geschrieben, dass ich das abdecken muss Ich habe auch einige Fragen erhalten, bei denen mich Schüler wie ihr fragen, wie genau ich hier ein HTML5-Video hinzufügen kann und das ich behandeln werde, ich habe das auch geschrieben, dass ich das abdecken muss besonderer Punkt , den wir behandeln werden wann wir einen echten Server nehmen und wann wir unsere Dateien auf den realen Server hochladen, da wir einen Server benötigen, von dem aus wir dieses Video speichern und diesen Videolink aufrufen können auch. Dies ist, dass dies ab sofort gemacht wird. Es ist fertig. Ja, das ist alles. Aber vorher, wenn wir unsere mobile Größe erreichen, versteckt sich dieses Video dahinter. Und das müssen wir beheben. Und wenn wir die Größe des mobilen Bildschirms erreicht haben, verlässt dieses Video den Bereich. Was müssen wir anstelle dieser Breite machen, 60 Pixel? Wir müssen 100% behalten und dann wird es in der prozentualen Form sein. Blau umrandete geht hinter unsere Navbar, das ist die untere Navbar. Also der letzte, was wir tun können, ich werde dieses div hier auswählen, zum Erscheinungsbild Panel kommen. Ich muss einen Margenboden so geben , dass er nicht auf diesen Bereich fällt. Runden Sie diese Navbar ab. Ich muss so viel Spielraum geben. Sagen wir mal 50 sind fair genug. Ich denke, dieses Bild ist gut. Das hat also individuelle Steuerelemente und diese hat auch eine individuelle Steuerung. In diesem Bereich, auch in diesem div oder vielleicht diesem Container, dem kompletten Container, muss ich ihm einen Randbereich geben, dass es etwas zusätzlichen Platz oder zusätzlichen Platz hat. Das sind alles Leute. Ich denke, dieses spezielle Seitendesign ist fertig. Nur dieser mittlere Bereich. Wir werden dies tun, während wir vorankommen. Und ab sofort ist diese spezielle Seite fertig. Im nächsten Video entwerfen wir eine weitere Seite, die die Rede der Kursdetails ist Rede der Kursdetails sobald Sie auf diesen Kurs klicken möchten. Es sollte also auf eine Kursdetailseite gehen, die Seite, die wir entwerfen werden und die wir in unserem nächsten Video entwerfen werden. Wir sehen uns im nächsten Video, Leute. 42. Erstellen und Anpassen anderer Seiten für LMS Of Project Three: In diesem Video werden wir fortfahren, indem wir unsere Seite „ Kursdetails“ erstellen. Was wir also tun werden, wählen Sie diese Indexseite aus. Ich werde diese Indexseite duplizieren und diese in Gores Details umbenennen. Okay, also wenn wir auf diese Seite kommen, brauchen wir all diese Dinge jetzt nicht. Ich wähle alles aus und lösche diesen Bereich. Ich wähle diesen Container aus. Und ich komme her. Das erste, was wir tun müssen, ist , dass wir ein Überschriften-Tag nehmen , es hier ablegen, und diesen Container, ich werde einfach diesen Container auswählen, erscheint. Der gesamte Container, wir werden es weiß machen. Dieses Überschriften-Tag wird H2 sein. Und wir nennen das als Kursnamen. Zahlt das einfach. Wir können es auch H12 oder eins machen. H1 ist auch in Ordnung, kein Problem. Dann nehmen wir einen Absatz. Dieser Absatz wird Untertitel sein, also können wir einen Lorem ipsum-Text darin einfügen. Wir können hier einige weitere Zeilen haben, in der wir andere Details wie die Lesekurs-ID angeben können . Wir können es als aktuelles sagen, aktualisiert und wir werden dort ein Datum angeben. Sobald das in diesem Container erledigt ist, nehmen wir eine Reihe. Nimm die Zeile hier rüber, und ich lege diese Zeile in diesen Container ab und wähle die Zeile, wähle die Zeile aus. Ich nehme die Spalte in diesen Container und nehme hier zwei Spalten. Und eine Spalte wird für Video verwendet und eine andere Spalte wird für die andere, andere Informationen verwendet. Ich wähle die erste Spalte aus, komme zu den Optionen. Okay, bis LG es mit 84 schaffen wird. Mal sehen, wie genau es funktioniert. Ich lege ein Video-Tag über dein Videoelement. Das behalte ich es als HTML5. Später werden wir die URL und alle Dinge hinzufügen. Aber für die Breite werden wir es als 100% Breite und Höhe machen , wir werden es als 350 machen. Das reicht für den Moment. Und in der zweiten Spalte lege ich noch eine Karte ein. Nicht eine mehr auf dieser Seite ist die erste Karte. Diesen Titel werde ich auswählen und ich werde ihn bis zum Jahr geben. Es wird eine Rupie-Symbol sein. Also nehme ich ein Icon dort. Doppelklicken Sie auf dieses Symbol und suchen Sie dann nach den beteiligten Währungen. Welche Währung auch immer Sie wollen, Sie können sie nehmen. Das wird sein, sagen wir phi 99. Untertitel wird dieser Kurs enthalten sein. Dann geben wir einige Informationen wie eine Gesamtdauer des Kurses, wie z. B. auf Abruf, sieben Stunden, 15 Minuten Videos. Dann geben wir noch eine Sache namens Lifetime Access. Und dann werden wir diesen namens Anhang haben. Dann geben wir auch ein Zertifikat aus. Dann werden wir 30 Tage Rückerstattung garantiert mitteilen. Dann werden wir diese beiden Links von hier entfernen. Wir wollen diese Links nicht da drüben. Jetzt nehmen wir in diesem Körper eine Reihe zwei und fügen zwei Dinge hinzu. Das sind zwei Knöpfe. Eigentlich. Ich wähle diese Zeile aus und füge diese Spalte ein, wenn ich diese Spalte dupliziere. Und jetzt nehme ich den BTN-Knopf. Es wird den Knopf setzen, einen Knopf hier drüben. Ich werde das duplizieren und werde es in die Spalte werfen. Wählen Sie diese erste Schaltfläche aus, um zu Aussehen zu gelangen. Und da wir jetzt nicht über die Blockoption verfügen, müssen wir also zur Breite gehen und die Breite zu 100% machen. Jahr machen auch die Breite 100%. Das wird also auf der Wunschliste sein. Dieser Button wird inzwischen sein. Und füge zur Wunschliste hinzu. Wir werden es als Gliederung schaffen , weil wir dort drüben nicht den Fokus zeigen wollen. Und China, wir werden es nur so behalten. Wenn wir zu dieser Bildschirmgröße kommen. Sagen wir Md. Es geht dramatisch darunter. Was wir tun können, anstatt auf zwei Wunschlisten zu tippen, können wir ein Symbol setzen. Oeo wird alle Texte von dort entfernen. Wie ein psychologischer Effekt, der nichts zeigt, dass der Benutzer es nicht liest. Aber es wird sagen, okay, es ist eine Wunschliste. Also werden wir nur mit dem Umriss ein Herz da drüben legen. Jetzt diese Spalte, in der das Herz da ist, werden wir das einfach mischen, dass wir es jetzt an erster Stelle bringen werden. Und dieses werden wir ein bisschen mehr Platz geben. Alle Bildschirmgrößen. Vielleicht. Lasst uns Herzfrequenz, Herz eins, für das wir es nehmen werden. Dieser ist klein und dieser groß. Diese Art und das Video, wie ich dir sagte, sobald wir vorankommen, werden wir dieses Video auch aufnehmen. Okay, also dieser Bereich ist fertig. Und in Zukunft müssen wir jetzt Akkordeon nehmen. Dies ist das Akkordeon und fällt in diesen Behälter. Das ist also Akkordeon. Wir werden eine gewisse Marge Top-Marge über ihre Marge oben legen, lass uns gut genug tun, denke ich. Ja, so viel Platz ist gut. Nehmen wir an, versuchen wir 33 ist auch gut, kein Problem. Und hier werden wir wissen, was genau vorbeikommen wird. Hier ist der Abschnittsname. Name des Abschnitts. Und da drin werden wir das einsetzen. Was sagst du? Die Titel, die Vorlesung, der Videoname dafür. Was wir im Laufe des Jahres 0s tun müssen, müssen wir direkt eine Reihe nehmen diesen Text in eine Reihe legen. Es wird automatisch in die Spalte gelangen. Und wir werden das duplizieren. Entschuldigung, kein Absatz wird diese Spalte noch einmal duplizieren. Diese Spalte in der gesamten Bildschirmgröße geben wir vielleicht sehr weniger Fläche, weniger Raster, vielleicht zwei oder ähnliches. Und das wird Timing wie 0335 sein, so etwas. Und dieser Text wird auf diese Weise ausgerichtet. Und wir können es auch eher so bringen, als wäre man auch gut genug, weil nicht alle einzelnen Videos in unserem sein werden. Deshalb ist es also in Ordnung. Dieser wird bleiben. Dies ist der Titel des Videos. Eigentlich. Diese Zeile wird in der Shuffle-Schleife sein. Was wir tun können, Ihre Leichtigkeit, wir setzen eine Grenze, eine untere Grenze, solide. Und dieser wird der Videotitel sein. So etwas. Die vollständige Zeile wird den Rand unten geben. Tu es. Ich denke, es wird gut genug sein? Duplizieren. Dies wird das zweite Video sein. Ist schon da. Du kannst mit dem spielen, was sagst du? Spiele mit der Deckkraft und allem. Sehen wir uns jetzt die Vorschau an. Sie können sehen, dass die Vorschau so ist und wir wollen diese H2N-Dinge nicht. Also kommen wir zu diesem Container. Wir wählen diesen Container im Bootstrap-Studio aus und schalten diese flüssige Option aus. Jetzt sehen wir uns die Vorschau an. Ja, jetzt sieht es ziemlich gut aus. Die Höhe ist auch nicht so zufrieden, zufriedenstellend. Also werden wir die Höhe erhöhen, vielleicht 400. Mal sehen wir es uns noch einmal an. Jetzt ist es in Ordnung, aber sowieso werden wir das Video haben, wenn es automatisch die Größe annimmt. Das kannst du ändern, du kannst etwas sagen, was sagst du? Opazität oder so ähnlich. Also lösche ich diese Zeile, ich wähle diese Zeile noch einmal und im Aussehen aus. Also kommen wir in das Grenzgebiet und ich werde einfach die Deckkraft um 25% reduzieren. Es wird also ungefähr so aussehen. Ich denke, das ist vorerst in Ordnung. Wir können dazu etwas Polsterung setzen. Vielleicht ist der Rand unten , um das zu mögen. Das Gleiche gilt auch für diesen. Margin Bottom 0 war bereits da, aber es sah nicht gut aus. Ich denke, das sieht ziemlich gut aus. Wir können eine gewisse Deckkraft für diese Linie verringern. Es war 0,25. Vielleicht können wir es auf zehn oder so ähnlich bringen. 0.199, so etwas. Und dann, weißt du, ist es wie, okay, es sieht gut aus. Eigentlich wissen Sie, dann können Sie dieses Duplikat, Duplizieren, Duplizieren, Duplizieren, Duplizieren für mehrere Male erstellen. Dasselbe wird mit dem nächsten Abschnitt passieren. Dies wird Abschnittsname sein. Dies wird Abschnittsname sein. Wenn wir zu unserer Vorschau kommen, sehen Sie, dass es hier gut genug ist. Das einzige wie der Hintergrund, den wir mögen, Sie hier eine weiße Farbe sehen können, ist, dass der Körper der Seite weiß ist. So können wir dieses Körper-Tag auswählen und zum Aussehen kommen und in den Hintergrund kommen. Das ist weiß. Okay. Komm her und wähle diese Farbe aus und klicke auf Auswählen. Und jetzt lasst uns sehen, wie genau es aussieht. Ja, es ist weg. Es ist da, aber es ist okay. Sie können die Farbe ändern und jetzt wissen Sie , wie Sie auch die Körperfarbe ändern können. Dies sind die Videos wie bevor jemand Ihren Kurs kauft oder so ähnlich, sie können die Videos hier sehen. Es ähnelt Udemy, einem guten Klassenzimmer und allen anderen Plattformen, die auf dem Markt gibt. Auf diese Weise können wir dies entwerfen und diese spezielle Seite wird jetzt erledigt, da es sich um einen einzigen Benutzerkurs bedeutet, dass es nur einen Kursleiter für diese Plattform geben wird . Wir werden also nicht auf viele Details eingehen. Das ist alles. In diesen Abschnitten wie in diesem finden Sie diesen Videotitel und das Timing des Videos, die Gesamtdauer, die Sie inzwischen in diesem speziellen Bereich sehen können inzwischen in diesem speziellen Bereich und all diese Dinge, wie wir es tun werden entwerfen Sie das, aber es wird so sein, als ob Sie auf Jetzt kaufen klicken, wann Sie diese Website entwerfen und dynamisch, Mal sehen. Wenn möglich, können wir mit diesem Design eines tun. Wir können noch einen Kurs in PHP machen Laura wird tragen, Sie können diese Website dynamisch machen. bin mir darüber nicht sicher, aber wenn es da ist, werde ich Sie auf jeden Fall informieren. Und wenn Sie inzwischen auf klicken, das Dialogfeld „Payment Gateway reservieren wird das Dialogfeld „Payment Gateway reservieren“ angezeigt, in dem Sie alle diese Informationen dort ausfüllen . Und dann wechseln Sie zu Ihrer Checkout-Seite. Nicht gerade zur Kasse, meine Kursseite oder so ähnlich. Aber wir müssen auch sehen, wie genau es in der mobilen Ansicht aussieht, da wir das nicht überlappen wollen und es sich überschneidet. Wählen Sie das Akkordeon aus. Und wo ist das Akkordeonjahr? Ich möchte dem jetzt einen Spielraum geben. Dieser Button-Rand und der untere Rand betrug 50, denke ich, dass wir das letzte Mal Mal Ausstellung 50 sehen. Nein, immer noch ist ein Bereich da, also ist es vielleicht 5555 auch nicht genug. Fünfundsechzig. Fünfundsechzig ist wie, okay. Ja, wir können daran arbeiten. Wie kein Problem. Warum genau, das geht jetzt aus dem Bereich, mach es in dieser Bildschirmgröße. Dann dient die zweite Spalte in jeder Zeile für das Timing. Wir müssen die zweite Spalte in jeder Zeile für den Zeitstempel auswählen . Dann lass uns eins geben, ich glaube, einer war da, richtig. Gehen wir eins nach dem anderen bis MD. Es ist in Ordnung. Ab welcher Größe es ist MD, MD, wir haben ein Problem. Also wird LGB dieses Jahr geben, wir geben vielleicht 33 gut für dich. Und du bist auch okay, also drei und eins und ruh dich aus. Was wir tun werden, wählen wir den gesamten Text hier aus. Wählen wir den gesamten Text aus, der Absatz ist, um diese Optionen zu aktivieren. Sagen wir also zufällig, wir machen einen Lauder-Film. Wenn der Titel zu groß ist, dann müssen wir die erste Spalte jeder Zeile auswählen, die der Titel unseres Kurses sein wird . Das ist MD. Md, wir geben es als Höhle von LG. Wir schaffen es. Das Timing ist jetzt, ich denke, es passt in alle Bildschirmgrößen richtig, ja. Und aus diesem Grund können wir die Länge des Satzes kontrollieren. Ich denke vorerst ist es okay. Es funktioniert einwandfrei ohne Probleme. Wenn Sie jedoch Probleme finden, können Sie mir Ihre Quelldatei über den aktuellen Dirigenten mit der Rate yahoo.com senden . Oder wir können uns über den Discord-Kanal unterhalten wo wir alle sehr bald zusammenkommen werden, und ich hoffe es sehr bald. Wenn ihr Interesse zeigt, daran teilzunehmen, ist diese Seite fertig und lasst uns noch eine Sache machen. Hier drüben. Wir haben eine Benachrichtigung , die diese ähnliche Nachricht entfernt. Anstelle einer Nachricht. Wir werden dies als Wunschliste behalten. Nicht nutzlos. Wir müssen ihr Herz hier rüber bringen. Ich nehme dieses Herz und das geht weiter. Eigentlich brauche ich hier kein Dropdown-Menü. Ich lösche das einfach. Das ist auch ein Dropdown-Menü, denke ich schon. Dies ist auch ein Dropdown-Menü und dort brauche ich auch kein Dropdown-Menü. Dieses Navigationsgerät ist das Dropdown-Menü, daher duplizieren wir diesen Nav-Artikel. Und was auch immer da drin ist, was ein Tropfen ist, Drop Down. Ich entferne das Dropdown-Menü und setze ein Symbol darin. Dieses Symbol wird an dieser bestimmten Position erscheinen. Also mach dir keine Sorgen. Wähle das einfach aus und tippe Herz hier drüben. Ich nehme dieses Herz. Wählen Sie nun diesen Navigationsgegenstand aus, kommen Sie zur Flexbox-Option und klicken Sie einfach auf diesen Mittelbereich. Da sind wir los. Jetzt ist es kein Zentrum. Dupliziere das noch einmal. Und jetzt werden wir in diesem Bereich Video oder vielleicht einen Play-Button aufnehmen , der dieser sein wird. Das ist alles das. Jetzt bringe ich DM uns zwei, die uns zur Wunschliste bringen, und es wird auch einen Link geben. Also nehmen wir einen Link, der diesen Link enthält und diesen Text entfernt. Und noch ein Link innerhalb des anderen, nämlich das Video. Und lass dieses Symbol in diesen Link fallen. Wählen Sie diesen Link aus und entfernen Sie den Text. Okay, fair genug. Wählen Sie dieses Symbol aus, kommen Sie zum Erscheinen, weil wir es wieder weiß machen und weiß machen müssen . Dieses Video macht es auch weiß. Wo ist es, wo es ist, wo es bereit ist zu gehen. Wir haben das jetzt. Ich immer noch, okay, also haben wir diese Wunschliste und den Videoplayer erstellt. Wir werden diese Seite noch einmal duplizieren und wir nennen dies als, was bedeutet dieses Video, Lernen oder vielleicht, tut mir leid, meine Kurse, meine Kurse. Und dann sind wir nur eine Minute, wir werden das löschen meine Kurse. Was wir stattdessen tun werden, werden wir auf unsere Indexseite kommen. Und ich werde diese Indexseite duplizieren, doppelklicken. Und ich werde es als meine Kurse, meine Kurse eingeben, und ich gehe zu meinem Kursbereich und ich werde dieses Bild löschen , diesen Duvall. Also brauche ich nicht, statt aller Kurse werde ich einfach Ihre Kurse eingeben und welche Kurse gekauft werden, die hierher kommen. Also werde ich die Vier entfernen und ich werde diese einfach behalten. Und ich brauche diesen Abschnitt auch nicht, also entferne ich diese Zeile und das Div auf einmal. Körperfarbe, ja, das können wir. Wir können die Körperfarbe ändern, da wir jetzt wissen, wie wir die Körperfarbe ändern können. Und im kommenden Jahr wähle ich das aus. Ich ändere diese Farbe in diese dunkle Farbe. Fangen Sie es einfach ein. Und okay. welchem Bereich befindet sich diese Leiche auf der rechten Seite? Ich denke ich, wo ich diesen Farbkörper hinstelle, wenn die Größe dieser Seite zunimmt. Was müssen wir jetzt tun, als ob wir auf die Indexseite kommen. Wir, ich hab eins vergessen. Als ob diese Karte in einem Link enthalten sein sollte , damit nur wir sie von einer Seite zu einer anderen Seite führen und ablegen können , legen Sie diesen Link in diese Spalte und legen Sie diese Karte einfach hinein. Wählen Sie diesen Link aus und entfernen Sie einfach den Text, der da ist. Für die GFP. Wie lasst uns prüfen, ob hier drüben alles gestört ist, nichts, was du mit all den anderen Karten machen kannst. Wählen Sie einfach diesen Link aus und gehen Sie zum Optionsbedienfeld. Und von der Seite aus können wir die Seite Kursdetails von ihrer Benachrichtigung aus gehen, da es sich um ihrer Benachrichtigung eine visualisierte Seite handelt, die wir nicht haben, aber wir können in einer Sekunde erstellen. Eigentlich gehe ich auf meine Kursseite und du musst auch diesen Link machen, einen Link. Ich lasse es in diese Karte fallen und nehme diese Karte und lege sie in diesen Link, wähle diesen Link aus und entferne diesen Text aus dem Jahr. Wir müssen woanders hingehen, wo der Benutzer buchstäblich auf die Videos klicken und abspielen kann. Also werden wir das ab sofort leer lassen. Aber ich werde diese MyCours-Seite noch einmal duplizieren und ich nenne sie als Wunschliste. Wunschliste. Ich doppelklicke auf diese Seite und benenne diese in Wunschliste um. Wir können es nehmen, wir können einen anderen Kurs nehmen , Banner über vier. Wir werden uns nicht verwirren. Anstelle dieses werden wir dies umbenennen und wir werden einen Großteil meines Epson Control P plus L O R setzen meines Epson Control P plus und zweimal eingeben, um diesen Text zu ändern. Auch hier haben wir einen Link und von dieser Seite können wir wieder zur Seite Kursdetails gehen. Im Moment dieser Bezugspunkt von nur für die Referenz, die ich mit derselben Seite verlinke. Und eigentlich ist es dynamisch. Es wird nur auf derselben Seite sein. Schließen Sie die Detailseite von hier aus auch der Benutzer kann anklicken und er kann zum Kurs gehen. Es wird aufschlagen, um den Kurs zu kaufen. Jetzt haben wir diese wie Wunschlisten-Tabellen. Was ist das für Tische? Brauchen wir diese Tische? Zufällig? Kein Benutzer und das brauchen wir nicht. Ich lösche diese registrierten Registerseiten. Du wirst es so behalten, wie es ist. Nur das, was wir tun können, ist, dass wir einfach Veränderungen erzwingen können, vielleicht eine Option. Es ist dunkel. Von hier aus können wir es also auch weiß machen. Vergessen Sie das Passwort oder haben Sie bereits einen Konto-Login. Melden Sie sich mit Google Assignments, Facebook an. Wir brauchen diese Profilseite, die wir brauchen, dann meine Quartale, die wir erstellt haben, und melden Sie sich dann an Ja, wir müssen auch protokollieren. Du bist also auch wir werden diese Farbe in Weiß ändern. Index. Wir haben vergessen Passwort erstellt war bereits da. Du bist auch, wir müssen die Farbe auf Weiß ändern. Dann haben wir Kursdetails erstellt, dann eine leere Seite, die wir haben, aber ich glaube nicht. Wir brauchen diese leere Seite jetzt und entfernen diese leere Seite. Jetzt haben wir auch 404. In diesem 404 brauchen wir dieses seitliche Navigationsgerät nicht und zurück zum Dashboard und diese Fußzeile brauchen wir nicht, dass es sich um Footer handelt. Wir sind ja, das ist es, was es da ist. Und dieser ändert die Farbe von Standard auf Weiß. Dieser ändert auch die Farbe von Standard auf Weiß. Während dieser Absatz dunkel ist, werden wir ihn weiß machen. 404 ist also wie Server nicht gefunden oder so etwas wie eine Fehlerseite, die Seiten, die wir nicht im Benutzer haben wollen, und wir entfernen diese. Was immer wir wollen. Wir haben es behalten und das behalten. Und jetzt, ab sofort, denke ich, dass wir mit den meisten Dingen fertig sind und nur wenige der Seiten bleiben übrig und die Bearbeitung ist auch vorhanden. Daher ist es wichtig, diese Navbar erneut aus diesem Bereich zu entfernen . Wählen Sie das Profil aus und machen Sie es weiß. Wir haben diesen Bereich. Das glaube ich nicht. Wir brauchen diesen Projektbereich und all diese Dinge als Unterschrift, Unterschrift und alles, was wir nicht brauchen. Wie was auch immer wir brauchen, wir werden es behalten. Was auch immer wir nicht brauchen, wir werden das löschen. So werden wir in diesem Video machen. Ich glaube, das reicht. Und im nächsten Video werden wir diese Seite entwerfen, wo sie ist, wo sie hingegangen ist, wo sie hingegangen ist. Anstelle von Kursdetails nach dem Kauf des Kurses , werden wir nach dem Kauf des Kurses , dieser Lernseite, entwerfen. Wir sehen uns im nächsten Video. 43. Finalisierung Des LMS Vorderes Ende Des Projekts Drei: Okay, in diesem Video werden wir die Lernseite sehen. Ich werde diese Seite mit den Kursdetails duplizieren und ich werde dies in Lernen umbenennen, oder? Rechtschreibung lernen. Und es ist sehr einfach. Ich werde einfach diese unnötigen Elemente entfernen , von denen wir den Titel der Seite nicht benötigen. Wir werden es klein machen. Vielleicht ist H4 in Ordnung. Und dieses Akkordeon, wir werden das Akkordeon von Jahr zu Jahr verschieben. Und ich brauche die Karte jetzt nicht mehr als ein Jahr. Und ich lasse dieses Akkordeon einfach in diesen Bereich fallen. Wir werden dies in ein was ändern, was ist die Größe der Acht? Dieser wird voll sein. Fair genug. Wir müssen einige Modifikationen vornehmen wie wir genau tun müssen. Wir werden zuerst hier drüben sehen, wie genau es herauskommt. Ich denke, es ist gut zu gehen, kein Problem. Jetzt gehen wir zum Akkordeon. Ich lösche diese beiden Elemente von hier aus. können wir duplizieren. Und ich komme da rein. Und jetzt muss ich ab dem Jahr all diese Rollen löschen. Zuerst. Ich will einen leeren Bereich und jetzt fange ich bei Null an. Ich nehme mir noch einmal eine Reihe. Da sind wir los. Wir haben einen Streit da drüben. Dann nehme ich eine Spalte, ich lasse eine Spalte darin fallen, und diese Spalte wird ein Titel sein. Und wir haben die Möglichkeit, wir sollten die Möglichkeit haben, das Video zu ändern. Also werde ich das in einen Link nehmen. Und diesen Link nehme ich noch einmal einen Absatz und lege diesen Absatz in diesen Link. Ich entferne diesen Link-Bereich. Und in diesem Absatz werde ich es einfach weiß machen. Dies wird ein Videoname sein, also kann es vielleicht ein langer Videonamen sein. Also nehme ich Epsilon da drüben nehme es einfach so und so. Also eine Zeile, die dies noch einmal dupliziert und eine Zeit als 0335 macht. Okay, diese Spalte ist also, wir haben LED-Bildschirmgröße. Diese Spalte wird acht sein. Und diese Spalte, diese Spalte wird zur Ausrichtung auf diese Seite dienen, ist in Ordnung. In anderen Bildschirmgrößen sieht es auch ziemlich gut aus. Und in dieser Bildschirmgröße kommt es nacheinander. Also müssen wir dieses auswählen. Jetzt. Wie hoch ist die Bildschirmgröße MD ab Jahr? Wir werden damit anfangen. Vielleicht können wir es annehmen, da acht oder zehn auch in Ordnung sind. Zehn und dann schaffen wir es als zwei hier drüben. Dieser ist auch gut. Diese oder diese haben wir Probleme auf dem mobilen Bildschirm. Im Handy müssen wir bis zum Jahr bis zu zehn schaffen. Aber im Mobilgerät müssen wir dem Timer etwas zusätzlichen Platz geben. Vielleicht sind drei gut. Ja, drei sind gut. Wir haben drei, dann brauchen wir neun über Ihre Bildschirmgröße ist gut. In der Bildschirmgröße ist gut. Diese Bildschirmgröße ist gut. Die Bildschirmgröße ist gut. Die Bildschirmgröße ist gut. Okay? Alle Bildschirmgrößen sind also gut, gut genug. Dann müssen wir tun, wie sagt ihr, was ist der letzte Abschnitt? Diese Spalte ist nur der letzte Abschnitt. Also müssen wir das sagen, was sagst du? Rand unten 65 Pixel , so dass es sich auf unserem unteren Navbar-Abschnitt nicht überlappt . Kommt jetzt zum Akkordeon. Lassen Sie uns diese Abschnitte mehrmals duplizieren , damit wir sehen können , wie genau er aussehen wird, wenn wir auch mehrere Abschnitte in der mobilen Ansicht haben . Sie können also sehen, dass wir hier eine gute Marge haben und wir haben hier viele Abschnitte. Das Video wird in diesem Bereich sein. Was wir tun können, wir haben eine Höhe, also entfernen wir diese Höhe und lassen sie in der Standardhöhe da ich denke, dass wir die Höhe von dieser Detailseite entfernen müssen. Wenn das Video kommt, wird es automatisch seine Höhe ausbalanciert. Lernseite ist ebenfalls fertig. Lassen Sie uns die Vorschau sehen. So wird die Lernseite aussehen. Ich denke, dass dieser spezielle Abschnitt und dieser spezielle Bereich erledigt ist. Lassen Sie mich also in meinem Buch sehen, ob ich etwas verpasst habe, ich denke, dass dieser Bereich erledigt ist. Dieses Akkordeon und weniger Animation mögen es standardmäßig, da die Animation da ist. Bisher haben wir uns so gut gemacht. Und die Wunschlistenseite ist ebenfalls verlinkt. Ich denke, es ist vielleicht nicht damit verbunden. Gehen wir zur Navbar und fangen an, die Seite zu verlinken. Wunschliste zwei wird die Wunschliste Seite sein , ist die Wunschliste und dies ist die Lernseite. Es geht also um mein Lernen, nicht wirklich zu lernen, meine Kurse aus meinen Kursen. Hier sind meine Kurse von dir. Wenn jemand darauf klickt, wird es auf die Lernseite weitergeleitet. So wird der Flow sein. Lassen Sie uns den Flow also einmal in der Vorschau-Live-Vorschau überprüfen die Seite aktualisieren. Okay, also haben wir diese Seite hier drüben. Wenn ich darauf klicke, komme ich zur Seite Kursdetails, der alle Details der Seite vorhanden sind. Und ja, ziemlich gut. Dann kann ich von hier aus auf die Wunschliste gehen , wo meine Wunschliste produktiv ist. Es gibt. Dies ist mein Wunschlisten-Produkt. Und wenn ich erneut auf das Wunschlistenprodukt klicke, bringe ich nur zu dieser Seite. Und wenn ich auf meine Lernseite gehe, dies meine Kurse, die ich gekauft habe. Und wenn ich hier klicke, bringe ich zur Lernseite. Okay, bisher so gut. Ich denke, wir haben unser Front-End hier und da ein bisschen fertiggestellt , wie die Verknüpfung dieses speziellen Bereichs. Und bisher so gut. Also denke ich, dass wir unser Front-End berechnet haben. Wir sehen uns im nächsten Video. 44. Ziara Commerce – Ein Reflow-Konto erstellen: Hallo zusammen. In diesem Video lernen wir also, wie man eine E-Commerce-Website in Bootstrap Studio einrichtet , sodass wir mit Bootstrap Studio beginnen und dort ein neues Design erstellen müssen Bootstrap Studio beginnen und dort ein neues Design erstellen Also nennen wir dieses Design bei Zara wählen eine leere Vorlage aus und klicken auf Erstellen Das ist also unser Zara Blank-Projekt. Danach müssen wir zu den Einstellungen gehen und nach unten zu E Commerce scrollen Sobald Sie also auf E Commerce geklickt haben, müssen wir auf Projekt verwalten klicken. Sobald Sie also auf Projekt verwalten klicken , gelangen Sie zum Reflow Ich bin also bereits bei Reflow angemeldet. Wenn nicht, musst du ein Reflow-Konto erstellen. Sobald das Reflow-Konto erstellt ist, müssen Sie als neues Projekt hier klicken Ich habe bereits zwei Demo-Projekte für mich. Sie werden diese beiden Demo-Projekte nicht sehen, aber Sie werden ein neues Projekt sehen. Also klickst du auf Neues Projekt und nennst dieses Projekt oder vielleicht nennst du diese Firma als Zara Sobald Sie das Unternehmen benannt haben, klicken Sie auf Weiter. Es wird Sie nach dem Land fragen. Also klicke ich auf Ich werde nach Rechnungsdetails für Indien suchen , wenn Sie hier spezielle Optionen für Rechnungsdetails haben, also gebe ich Zara Limited Ich kann meine Adresse als Bangalore Airport Road eingeben, und ich gebe meine Stadt als Bangalore, Bundesstaat als Karnataka, Postleitzahl Bundesstaat als Das sind alles Dummi-Daten. Sobald ich damit fertig bin, klicke ich auf Weiter und dann werde ich aufgefordert, den Plan auszuwählen Da es sich also um eine Demo handelt, werden wir uns für einen kostenlosen Tarif entscheiden. Ich werde hier auf Auswählen klicken und dann auf Weiter klicken. Da bin ich also in meinem Reflow-Konto. Wenn ich also zu den allgemeinen Einstellungen gehe, ist mein Reflow-Konto erfolgreich erstellt Jetzt kannst du die Projekt-ID meines Reflow-Kontos sehen. Dies ist der Name meiner Website oder der Projektname Zara. Lassen Sie uns die Währung auf INR umstellen, das sind indische Rupien Die Messung erfolgt in Kilogramm und Zentimetern. Ich werde meine Zeitzone von hier aus wählen. Ich möchte das Timing in AM und PM beibehalten. Projekt verlinkt, wir werden es später machen. Sobald dies erledigt ist, klicken Sie einfach auf Projekt speichern. Auf diese Weise sind wir mit der Einrichtung eines Reflow-Kontos unter Verwendung unseres Markennamens Zara fertig Reflow-Kontos unter Verwendung unseres Markennamens Zara Im nächsten Video werden wir also sehen, wie genau wir unser Projekt mit Bootstrap Studio verbinden können 45. Ziara Commerce – Reflow mit Bootstrap Studio verbinden: Fantastisch. Also willkommen zurück. In diesem Video werden wir sehen, wie wir unser Reflow-Projekt für Bootstrap Studio einrichten können unser Reflow-Projekt für Bootstrap In Bootstrap Studio klicken wir also auf Einstellungen und scrollen nach unten und klicken auf E-Commerce In diesem ausgewählten Projekt wird unser Zara-Projekt jetzt hier erscheinen. Das Reflow-Tool wird Virgin Two sein. Und der aktive Testmodus wird es niemals geben. Sobald dies erledigt ist, klicken wir auf Speichern und fertig. Unser Reflow-Projekt namens Ziara ist jetzt mit unserem Bootstrap-Studio verbunden Im nächsten Video werden wir also damit beginnen, Produkte und andere Informationen zu unserem echten Flow-Konto hinzuzufügen andere Informationen zu unserem echten Flow-Konto 46. Ziara Commerce – Produkte in Reflow erstellen und importieren: Fantastisch. Lassen Sie uns in diesem Video mit der Erstellung der Produkte und der anderen Informationen beginnen . Bevor Sie das tun müssen, klicken Sie einfach auf die Beschreibung eines Videos in dieser Playlist, und hier finden Sie den Ressourcenlink. Klicken Sie einfach auf Resource Link und Sie gelangen hierher zu diesem Digi Box-Ordner, und Sie können die Zip-Datei herunterladen Sobald Ihr Projekt heruntergeladen ist, einfach hierher und erweitern Sie dieses Projekt In diesem Projekt finden Sie alle Ressourcen, die für dieses Projekt benötigt werden. Fangen wir also an, das Produkt auf unserer Reflow-Seite zu erstellen. Also werde ich schnell zu unserem Reflow-Konto springen und hier auf das Produkt klicken Aber bevor wir die Produkte erstellen, müssen wir die Kategorien erstellen Also gehen wir zu den Kategorien und ich werde auf Kategorie eins klicken, und wir werden uns an unsere PDP wenden Wir haben also Westernwaren für Frauen. Also kopieren wir diesen Namen und ich füge ihn hier ein. Derselbe Name wird hierher kommen. Wenn Sie dann eine Beschreibung hinzufügen möchten, die Beschreibung dort und die übergeordnete Kategorie. Das ist also eine übergeordnete Kategorie, also wollen wir hier keine übergeordnete Kategorie hinzufügen. Also klicken Sie auf Speichern. Meine erste Kategorie ist also einsatzbereit, und dann können wir damit beginnen, die Unterkategorien hinzuzufügen Also kopiere ich diesen Namen. Und ich werde es einfach zu deinem hinzufügen. Und vorerst wird diese Hauptkategorie Westernkleidung für Frauen sein. Und dann haben wir Kleider. Lassen Sie uns also die Kleider in Westernkleidung für Damen, Jeans in Westernkleidung für Frauen, wieder Spielanzüge, Westernkleidung für Frauen und T-Shirts hinzufügen Westernkleidung für Damen, Jeans in Westernkleidung für Frauen, . Was wieder in Westernkleidung für Frauen erhältlich sein wird. Das werde ich kreieren. Kategorie Westernkleidung für Damen wird also mit den Unterkategorien erstellt Gehen wir jetzt zu Indien und Mode waren. Also werde ich eine neue Kategorie erstellen, Indien und Mode waren und ich werde keine beibehalten, also wird es eine übergeordnete Kategorie geben, und darin haben wir zwei verschiedene Kategorien , die wir hier erstellen müssen. Dies wird auf Indisch sein, und dies wird die zweite sein , die wieder auf Indisch sein wird. Okay. Also haben wir unsere Unterkategorien und Kategorien erstellt Jetzt können wir unsere Produkte hinzufügen. Also klicke ich auf Produkte und alle Produkte. Hier haben wir die Möglichkeit, die Produktliste, die ich Ihnen gegeben habe , zu importieren und zu exportieren . Dies ist die Produktliste, die Sie verwenden können. Aber bei einem Produkt werde ich Ihnen zeigen, wie Sie dieses Produkt zu Ihrer Produktliste hinzufügen können , und dann werde ich diese Produktliste auch in mein Reflow-Konto hochladen diese Produktliste auch in mein Reflow-Konto Wir klicken auf Produkt hinzufügen. Dann haben wir das physische Produkt und das physische Produkt hinzugefügt. Diese Option ist nur in der kostenlosen Version verfügbar. Digitales Produkt und Geschenkkarte sind im Abonnementmodell erhältlich. Also klicken wir hier auf das physische Produkt und hier müssen wir die Produktdetails hinzufügen. Gehen wir also zurück zu unserer Download-Seite. Wir gehen zu PDP, wir gehen zu Women's. Ich werde ein T-Shirt hinzufügen. Also nehmen wir einfach den Namen Zara T Shirt. Der Name kommt von selbst und wir müssen eine Beschreibung hinzufügen. Da haben wir's. Also haben wir die Beschreibung. Dann haben wir Extras. Das ist also ein Promo-Badge. Da wir also ein T-Shirt aus der Zara-Sonderkollektion haben, können wir es einfach als Sonderkollektion bezeichnen Das wird als Etikett da drüben kommen, also als Sonderkollektion als Etikett Dann müssen wir die Bilder hier hinzufügen. Also klicken wir auf Hinzufügen und da es sich um ein T-Shirt handelt, werden wir sehen, welches T-Shirt wir hochladen müssen , was cool aussieht. Das ist schon in der Produktliste, also überspringe ich das und verwende Produkt 25 und klicke auf Hochladen. Kann auch Videos und mehrere Bilder hinzufügen. Lassen Sie uns nun den Preis für dieses Produkt festlegen. Dafür wird der Produktpreis also irgendwo bei etwa 1.500 liegen. Und das ist eine Steuer auf das Produkt. Ich kann das einfach entfernen. Das ist okay. Für dieses Produkt ist keine Steuer erforderlich. Produkt zum Verkauf, wir können einschalten und wir können den Originalpreis angeben. Nehmen wir an, wir geben den Originalpreis an, da 2999 der ursprüngliche Preis ist und wir ihn für tausend 500 verkaufen Und wir müssen auch den Verkaufszeitraum angeben , in dem wir das Datum auswählen müssen Der Verkauf beginnt also am zweiten Tag dieses Monats und dauert, sagen wir, bis zum 31. Dezember. Das ist also der Bereich, in dem dieses Angebot gelten wird. Danach wird das Angebot sinken. Ich werde auf Bewerben klicken. Dann Verfügbarkeit, ja. Dieses Produkt ist im Geschäft erhältlich. Das Geschäft ist unser echter Flow-Store, und wir müssen die Mindestabnahmemenge festlegen. Mindestbestellmenge für dieses Produkt beträgt also eins und die Höchstmenge kann fünf sein. Was ist das Gewicht dieses Produkts in kg? Ich werde das mit 0,300 kg wiegen. Das bedeutet 300 Gramm. geschätzte Lieferzeit wird ungefähr sieben Tage betragen und die verfügbare Liefermethode wird ausreichen. Dann kommt hier unsere Kategorie, dann gehen wir zur Kategorie T-Shirt und wir werden auch diese Kategorie Westernware für Damen überprüfen da T-Shirts unter Westernware für Damen fallen Diese Kategorie ist fertig. Dann Inventar, wie viele Lagerbestände wir haben, das ist die SKU der Lagerhaltungseinheit. Was ist also die SKU für dieses Produkt? Nehmen wir an, ich nenne dieses Produkt. Die SKU beginnt mit Zara, dann mit Westernkleidung für Damen und einem T-Shirt Und vielleicht kann ich diesen Namen durch einen Bindestrich und eine Zahl trennen. Also muss ich dafür eine Zahl hinzufügen. Also füge ich einfach eine Zufallszahl wie 98, fünf, sechs, 21 hinzu. Dies ist die SKU-Nummer für dieses spezielle Produkt. Dann ist das Inventarsystem einfach. Sie können auch auf Advance klicken. Vorauszahlung bedeutet, dass die verfügbare Lagermenge verfügbar ist. Wenn Sie also einfach weitermachen, wird dieses Produkt niemals auf Lager sein. Wenn Sie auf Vorverkauf gehen, müssen Sie eine Menge angeben wie viele Produkte Sie davon in Ihrem Inventar haben. Geben wir also Tausend als Inventar an. Menge auf der Produktseite anzeigen. So kann der Benutzer sehen wie viele Produkte noch in unserem Inventar sind. Sorten, wenn wir Abwechslung haben, dann müssen wir auch Abwechslung hinzufügen. Nehmen wir an, wir haben Größe, Farbe und so weiter. Konkret werden wir Größe haben und ich werde auf Sorte hinzufügen klicken Die erste Größe wird also klein sein. Der Preis, der ursprüngliche Preis und das Gewicht werden gleich sein. Wenn wir etwas ändern wollen, können wir das auch ändern. Dann wird eine andere Sorte mittelgroß, dann groß, dann extra groß und dann extra extra groß sein. Die SKUs dafür können hinzugefügt werden. Nehmen wir also diese SKU von hier aus, gehen wir zurück und klicken auf Bearbeiten SKU dafür wird S sein. Da es sich um eine kleine SKU handelt, füge ich dieses M ein. Ich füge dieses L ein. Also auch das ist zufällig. Ich weiß nicht, ob das die richtige Art der Ausrede ist oder nicht. Das ist nur der Demonstration zuliebe , sonst nichts. Extra große Paste. Wie viele Mengen haben wir dafür auf Lager? Sagen wir 100.000 Tausend Tausend und Tausend. Ich klicke auf Bestätigen. Der Preis für die Sorten ist derselbe, weshalb er nicht angezeigt wird. Aber wenn Sie den Preis ändern möchten, können wir das tun. Nehmen wir an, 14 Doppel Neun ist der Preis für Klein oder vielleicht 13 Doppel Neun ist der Preis für Klein. Und Medium Large gehört zu 14 Doppel-Neun und 14 Doppel-Neun, und das Doppel-Excel gehört zu 15 Doppel-Neun. Das ist also der Preis, zu dem es verkauft wird, und dann müssen wir auch den ursprünglichen Preis angeben. Das Gewicht ist okay und wir klicken auf Bestätigen. So können wir also unsere Sorten kreieren. Dann haben wir unsere Personalisierung. Wenn wir eine Empfehlung zur Personalisierung haben, können wir diese ebenfalls hinzufügen Option hinzufügen. Wenn Sie dies personalisieren möchten, fügen Sie Ihren Namen auf dem T-Shirt Für die Anleitung war dein Name erforderlich. Dies wird ein Kontrollkästchen oder vielleicht eine Texteingabe sein, um den Namen dort drüben zu bekommen. Die erforderliche Mindestlänge ist eins und die erforderliche Höchstlänge ist 277. Dies ist nicht erforderlich, und wenn sie diese Option wählen, müssen sie zusätzlich 200 Rupien zahlen Und wenn Sie eine weitere Option erstellen möchten, können Sie auf Option hinzufügen und dann einfach auf Bestätigen klicken und nach Nummer eins sortieren und dann auf Speichern klicken Und da haben wir es. Wir haben erfolgreich unser erstes Produkt entwickelt. Und was wir jetzt tun können, ist, dass wir unsere Produkte sofort importieren können . Also klicke ich einfach auf Import. Ich werde auf Choose Wile klicken und einfach dieses Produkt auswählen und dann auf Hochladen klicken Das Produkt ist ausgewählt. Aktualisieren Sie bei doppelten IDs das bestehende Produkt. Wenn es eine doppelte ID gibt und möglicherweise nichts vorhanden ist, klicke ich einfach auf Import. Die CSV-Datei wurde erfolgreich hochgeladen. Schließen Sie einfach die Dateien und aktualisieren Sie sie einfach. Sie können Produkte sehen , die importiert werden. Jetzt können Sie sehen, wie der Produktimport im Gange ist. Also eines von 24 Produkten. Wenn Sie also weiter aktualisieren, können Sie sehen, dass die Produkte hinzugefügt werden. Wir haben eine gute Menge an Produkten dabei, und los geht's. Alle Produkte wurden erfolgreich zu unserem Konto hinzugefügt. In diesem Video haben wir gelernt, wie man ein Produkt erstellt und wie man das Produkt aus Das ist alles für dieses Video importiert . Und im nächsten Video werden wir mit der Gestaltung der Website in Bootstrap Studio beginnen der Gestaltung der Website in Bootstrap Studio 47. Ziara Commerce – Den Produkten eine Kategorie zuweisen: Bevor wir die Website in Bootstrap Studio entwerfen, müssen wir dem Produkt sehr schnell die Kategorien zuweisen Diese Kategorie ist also eine Sammlung. Ich werde darauf klicken und einfach zur Kategorie gehen, und diese Kategorie wird wie indisch aussehen. Ich werde einfach indische Mode vermarkten für indische Mode und Mode waren. Also das ist in dieser Kategorie schnell erledigt , ich werde gehen und die Kategorie als Kleider einrichten. Dieser hier zieht auch ein Kleid an. Ich deaktiviere das einfach Das Zwei, Drei und Vier gehören unter Kleider. Also zieh dir Westernschuhe für Frauen an. Also fertig damit. Dann haben wir Sari eins, zwei, drei, vier, ich glaube, ja, vier Saris haben wir Wir klicken auf Kategorie und wählen einfach Saris nach indischer Art aus. Fantastisch Behalte einfach im Auge , was wir hinzugefügt haben. Ich denke, das wird in Spielfarben erscheinen und das bestätigen. Okay, das ist ein T-Shirt. Dieser gehört also in die Kategorie T-Shirts. Eins, zwei, drei, vier. Diese vier passen vielleicht in die Kategorie Spielanzüge. Ja, geben wir es da hin. Hoppla, ich habe diese Kategorie nicht angeklickt. Western für Frauen ist also die Hauptkategorie, für die wir uns entscheiden müssen Das sind Jeans. Also wähle ich einfach alle vier und klicke auf Jeans, und los geht's. Und lass uns jetzt zur zweiten Seite gehen. Okay, jetzt machen wir es mit diesem. Das sind, ähm, Götter und bestätige Sari Das wird in Sari sein. Und klicken Sie auf Bestätigen. Ich denke, wir haben in dieser Kategorie nichts hinzugefügt. Okay, wir müssen also sehen. Okay, das ist es, was Sekte ist. Also werden wir das von hier auf das hier zurücksetzen. Bestätigen. Und da haben wir's. Deshalb haben wir alle Produkte in ihren spezifischen Kategorien hinzugefügt . Okay, cool. Fair genug. Lassen Sie uns im nächsten Video mit Bootstrap Studio beginnen . Es 48. Ziara Commerce – NavBar und Slider gestalten: Fantastisch. Unser Bootstrap-Studio-Projekt namens Zara war also bereits fertig, bevor wir mit der Erstellung des Z Flow-Kontos begannen Entschuldigung, Reflow-Konto. NAF-Bar, ja. Und hier werden wir unser Markenimage hinzufügen. Also werde ich hier einfach Bild eingeben und dieses Bild mitbringen und diesen Text entfernen. Wir brauchen diesen Text nicht. Zuhause. Der erste Gegenstand wird also zu Hause sein. Der zweite Punkt werden unsere beiden Kategorien hier sein. Also werde ich es einfach als indisch und westlich bezeichnen. Indisch, Indisch und Westlich gehören also zu den Kategorien, an denen wir interessiert sind. Und dann erstellen wir „ Lass uns zu E-Commerce gehen“. Die Karte wird angezeigt, und die Schaltfläche „Anmelden“ wird direkt danach angezeigt. Klicken wir also auf die Schaltfläche Anmelden und richten sie nach dem Ende und der Kartenschaltfläche aus und richten sie erneut bis zum Ende aus. Klicken wir auf Navbar und schalten die Fluid-Option aus, damit wir uns schnell eine Vorschau unserer Website So wird die Website also aussehen, und wir werden das Erscheinungsbild im Laufe der Zeit ändern. Ich nehme schnell einen Button und behalte ihn hier und klicke auf den Button in der Option Warenkorb ansehen, und ich werde den Span hineinlegen. Und ich werde das entfernen. Ups. Und ja, dieser Knopf ist jetzt ein Kartenknopf. Wir können ihm auch ein Symbol geben. Doppelklicken Sie, wählen Sie die Liniensymbole und das Kartensymbol aus. Gehen Sie zum Erscheinungsbild und erhöhen Sie einfach die Schriftgröße und entfernen Sie den Text. Also okay. Also habe ich einfach die Navigationsleiste genommen und eine Standardeinstellung vorgenommen. Dieses Navigationselement wurde als Standard festgelegt, und die Karte habe ich wieder als Standard festgelegt. Aber die Anmeldeschaltfläche habe ich am Ende beibehalten. Fangen wir an, die Bilder nach Bedarf zu importieren. Zuerst nehmen wir das Logo. Ich importiere einfach das Logo und los geht's, doppelklicken. Wir haben unser Logo hier und klicken auf Okay, da es zu groß wird. Also müssen wir nur die Breite erwähnen. Ich nenne nur 120. Äh, kommen Sie zur Vorschau und sehen Sie, dass wir unser Logo eingestellt haben. Okay, zurück zu Bootstrap Studio, dieses Logo wird nur auf die Index-Seite umgeleitet, und die Startseite wird auch auf die Index-Seite umgeleitet Wir wählen hier die Navbar aus und ich aktiviere den Active Smart Active-Status Welche Seite auch immer aktiv ist , sie wird automatisch hervorgehoben Lassen Sie uns diese Schaltfläche in Link ändern, und vorerst werde ich hier nur den Hash-Key einfügen. Und wenn Sie den Stil ändern möchten, Sie den Stil gerne ändern. Okay, im nächsten Schritt erstellen wir einen Slider. Fügen wir Carusal hinzu und ich bin hier mit dem Cousal. Lassen Sie uns die Corusalimages importieren Landing Page, Hero, Desktop und diese drei Hero-Seiten und diese Also haben wir die Bilder hier. Also doppelklicke ich einfach darauf, nehme den Helden und klicke auf Okay, weiter. Doppelklicken Sie. Wir haben unsere Slider hier hinzugefügt. Danach werden wir mit der Erstellung unserer restlichen Landingpage beginnen , aber das werden wir im nächsten Video tun Sehen Sie sich also die Leute im nächsten Video an. 49. Ziara Commerce – Fixieren des Floating Buttons in der NavBar: Bevor wir weitermachen, werden wir hier die Schaltfläche At tocad verwenden, die sich genau in der Mitte der Navbar befindet in der Mitte der Navbar Wir wollen diesen Button nicht hier haben. Also wollen wir den Button rechts neben der Navbar. Der Grund dafür, dass sie sich in der Mitte befindet, liegt nur darin , dass, wenn Sie die Sinus-Out-Taste sehen, Sinus-In-Taste, genauer gesagt, Sinus-In-Taste am Ende ausgerichtet ist Wenn Sie also einfach vom Ende zur Standardeinstellung wechseln, befindet die Atto-Cart-Schaltfläche in der Nähe der Anmeldeschaltfläche Jetzt brauchen wir nur noch einen Abstand. Okay, ich muss die Schaltfläche „Karte anzeigen“ auswählen und zur Klasse kommen, und hier muss ich ein Randende für den Unterricht hinzufügen. Und so lösen wir das Problem, dass der AT-Cart-Button genau in der Mitte der NAFBA schwebt Im nächsten Video werden wir mit der Erstellung der Seiten für die entsprechende Kategorie beginnen der Erstellung der Seiten für die entsprechende Kategorie und weiter an der Website arbeiten Wir sehen uns also im nächsten Video. 50. Ziara Commerce – Startseite fertigstellen: Genial. Fangen wir also an, die Website zu gestalten. Das ist also eine Homepage, und was wir auf der Homepage brauchen, sind fast alle Produkte, die da sind, aber auch mit einem bestimmten Design. Also hier werden wir schnell einen Container erstellen. Ich werde direkt unter dem Karussell abbiegen. Und in diesem Container nehme ich eine Reihe Und ich werde darin eine Spalte hinzufügen. Sobald diese Spalte hinzugefügt ist, nehme ich eine Bildkomponente und nach dem Bild einen Absatz. Ich nehme auch einen Link und lege fast das Bild in dieser Spalte und verschiebe das Bild und den Absatz innerhalb dieses Links. Immer wenn der Benutzer auf eine beliebige Stelle auf das Bild oder den Text klickt , wird er auf eine bestimmte Seite weitergeleitet , auf die er weitergeleitet werden soll. Damit wählen wir hier das Link-Tag aus, kommen schnell zu unserem CSS und fügen einfach keine Textdekoration hinzu. Auf diese Weise geht die Unterstreichung aus und wir müssen auch die Farbe ändern Wählen Sie also den Link aus, kehren Sie zur Option zurück und scrollen Sie einfach nach unten zur Farbe und machen Sie ihn dunkel Und da dies mittig ausgerichtet sein muss, wähle ich die Spalte aus, komme zur Ausrichtungsoption und klicke einfach auf Mittenausrichtung. Ich brauche hier drei Spalten in die Bild und Absatz eingebettet sind. Also werde ich diese Spalte noch zweimal duplizieren , und los geht's. Wir haben drei Spalten hinzugefügt. Danach werde ich anfangen, die Bilder darin hinzuzufügen. Dafür müssen wir das Bild importieren. Kommen Sie also schnell zu unserem Ressourcenordner. Komm schnell zum Ressourcenordner und finde einfach drei PDPs, die wir benötigen Wir werden zu Cords kommen und ich werde dieses Bild auswählen und es einfach in Bootstrap Studio importieren Ich werde hierher kommen. Ich werde zur Kategorie Kleidung gehen. Ich werde jedes Kleid auswählen. Ich werde das hier importieren und in die Kategorie Jeans kommen und ich werde einfach das Jeans-Bild importieren. Also werde ich im ersten Bild schnell dieses Bild hinzufügen. Im zweiten werde ich schnell das Kleid hinzufügen und im dritten werde ich schnell die Jeans hinzufügen. Also brauche ich all diese drei Bilder in einer responsiven Form. Also wählen wir alle drei Bilder aus, und ich klicke einfach hier auf Responsive und schon geht's los. Ich werde den Text von Absatz zu Ich nehme den Namen und füge ihn einfach hier ein. Dann haben wir Kleider, dann haben wir Jeans und los geht's. Also hier, was wir jetzt genau tun müssen, ist, diesen Link auszuwählen und die Seite zur Cords-Seite weiterzuleiten. Ich werde den Link zu den Kleidern auswählen. Dieser Link gehört also zu Kleidern, und ich werde zu Kleidern auswählen, und dieser Link gehört zu Jeans. Also klicke ich einfach auf Jeans , sodass jedes Mal, wenn der Benutzer darauf klickt, er zu dieser bestimmten Seite weitergeleitet wird. Nur um ganz schnell nachzuschauen, machen wir eine Vorschau. Wenn ich also hierher komme und darauf klicke, ich zur Cords-Seite weitergeleitet Ich werde zurückkommen und auf diese Kleider klicken. Es kommt also auf die Seite mit den Kommoden. Und wenn ich auf Jeans klicke, kommt es auf die Jeans-Seite. Ich denke, die Navbar und die Fußzeile werden nicht auf die Cod-Seite kopiert, also gehen wir schnell wieder zur Index-Seite Wählen Sie die Navbar und die Fußzeile, rechts kopieren, zwei kopieren, wieder mehrere auswählen und einfach auf Karten nur eine einzige klicken und erneut verlinken und Auf diese Weise befinden sich die Navigationsleiste und Fußzeile auch auf der Kartenseite Wählen Sie also den Container aus und geben Sie schnell einen oberen Rand von vier Wir behalten einfach den oberen Rand bei. Wir behalten hier einfach vier als Standardzahl bei. Wir können schnell einen Text direkt neben der Zeile im Container hinzufügen , und das wird ein Überschriften-Tag sein. Ich werde hier schnell eine Zeile hinzufügen, tut mir leid, nicht hier. Also diese eine unerwünschte Spalte werden wir löschen, und diese werden wir zumindest als Ate benennen und die Textausrichtung schnell in die Mitte ändern. Als Nächstes werden wir auf die gleiche Weise eine weitere Spalte erstellen, aber diese werden wir als ZiaranW arrival benennen Und hier, nur um eine einfache Änderung vorzunehmen, fügen wir hier eine weitere Spalte hinzu, sodass es Und auch die Struktur werden wir hier leicht ändern. Kurz vor dem Absatz werden wir also eine Überschrift hinzufügen. Und direkt nach dem Absatz erstellen wir einen weiteren Absatz. Dies wird ein CTA namens Shop Now sein. Fantastisch. Und das werden wir an allen Orten wiederholen. Also werden wir es einfach kopieren und hier ablegen. Wir nehmen die Kopie noch einmal, legen sie hier ab, nehmen die Kopie noch einmal und legen sie hier ab. Nimm das einfach schnell und verschiebe es einen Schritt nach oben oder nimm es schnell und verschiebe es einen Schritt nach unten. Nimm jetzt den Laden, mach einen Schritt nach unten, nimm den Laden jetzt und einen Schritt nach unten. Fantastisch. Also speziell für Shop Now brauchen wir eine Unterstreichung Doppelklicken Sie also auf Jetzt einkaufen und aktivieren Sie die Option zum Unterstreichen in diesem Bereich Cool. Also ja, wir müssen das in die Mitte nehmen. Also dieser Absatz wird jetzt eine Zwischenüberschrift sein. Also geht ihr und versucht euer Bestes, um hier eine Zwischenüberschrift hinzuzufügen Und jetzt müssen wir die Bilder hinzufügen, bei denen es sich am wahrscheinlichsten um Neuankömmlinge Also nehme ich einen Sari und gehe nach Weston. Ich nehme ein T-Shirt. Also nehmen wir ein gut aussehendes T-Shirt, vielleicht dieses, einen Spielanzug, vielleicht dieses. Und wir brauchen noch ein Kleid. Nimm einfach schnell diesen. Wir nennen diesen Bereich Spielanzug, T-Shirt, Kleider und Entschuldigung. Fantastisch. Doppelklicken Sie also und wählen Sie den Spielanzug aus. Klicke auf Okay, geh zu Jeans. Nein, tut mir leid, gehe zu T-Shirt und wähle das T-Shirt aus. Wählen Sie das Kleid und guter Letzt den Sari aus Lass uns schnell die Umleitung ändern. Ich werde das auswählen und das wird jetzt zu Playsuit gehen. Das ist also mein Playsuit-Link. Dieser Link wird ein T-Shirt sein. Der dritte Link wird Kleider sein, und der vierte Link wird Sis sein. Fantastisch. Speichern Sie das einfach schnell und machen Sie eine Vorschau. So sieht unsere Landing Page oder Homepage aus. Das sind unsere Heldenbanner. Wir haben drei Heldenbanner. Sie können so viel wie möglich hinzufügen. Dann haben wir für Sie kuratiert, und wir haben auch Links dafür und Z ist neu hinzugekommen, und dafür haben wir auch Links Und dann haben wir eine Schnellfußzeile. Fantastisch. Die Homepage oder die Landingpage sieht also gut und wir können jetzt weitermachen. Im nächsten Video werden wir damit beginnen, die dynamischen Produkte auf allen jeweiligen Seiten hinzuzufügen allen jeweiligen Seiten , die nach ihren Kategorien benannt sind. Also seht im nächsten Video, Leute Okay. 51. Ziara Commerce – Produkte dynamisch ziehen: Lassen Sie uns in diesem Video damit beginnen, die dynamischen Produkte auf die entsprechenden Kategorieseiten abzurufen die dynamischen Produkte auf die entsprechenden Kategorieseiten Dies ist eine Kabelseite. Also kommen wir schnell zum E-Commerce und kommen zur Produktliste und nehmen diese Produktliste und legen sie hier ab. Sie sehen also, dass die Produkte jetzt nacheinander angezeigt werden. Wir kommen schnell her und nehmen die Marge oben und Vier als Standardzahl. Und da haben wir es. Wir wollen also nicht , dass das Produkt nacheinander erscheint. Also kommen wir schnell zum Optionsfeld, und im Layout werden wir nicht am wenigsten, einfach Karten erstellen, und los geht's. Wir haben jetzt also alle Produkte im Kartenformat. Wir werden schnell einen Container hinzufügen und diese Produktliste in den Container verschieben. Also nehmen wir den Behälter herunter und nehmen diese Produktliste und schieben sie in den Behälter, sodass wir da drüben einen gewissen Vorteil haben. Lassen Sie uns also eine kurze Vorschau haben. Ja. Die Produkte kommen also auf eine gute Art und Weise. Wir haben hier auch die Schaltfläche „Zur Katze hinzufügen“. Fantastisch. wollen wir also nicht, dass In Zukunft wollen wir also nicht, dass alle Produkte auf dieser Seite aufgeführt werden, da diese Seite speziell nur für die Kategorie Kabel erstellt wurde Was ich also tun werde, werde ich hier einfach eine Überschrift und sie in diesem Container hinzufügen, und ich werde diese Seite in Cods umbenennen . Ich werde diese Produktliste jetzt auswählen Ich scrolle schnell nach unten und komme zu dieser Datenquellenoption. Hier wähle ich die Kategorie aus und von hier aus wähle ich einfach den Bereich Schnüre für Damen aus und klicke auf Auf diese Weise werden hier nur die Produkte von Cords angezeigt, die sich in unserem Reflow-Konto befinden in unserem Reflow-Konto befinden Schnell eine Vorschau machen, los geht's. Wir haben nur drei Produkte im Bereich Kabel und die drei Produkte werden dieser speziellen Seite angezeigt In Zukunft werden wir schnell zu den Kleidern übergehen und auf die gleiche Weise nehmen wir einen Behälter, wir nehmen eine Überschrift und wir nehmen die Produktliste Ändere das Layout von „Am wenigsten“ auf „Karten“, scrolle nach unten und ändere die Kategorie von „ Alle Produkte“ auf „ Nur Kleider “. Klicke dann auf „ Auswählen“ und ändere den Namen von „Überschrift“ zu „Kleider“. Machen Sie schnell eine Vorschau und los geht's. Wir haben also die Vorschau dieser Seite, auf der alle Kleider angezeigt werden. In ähnlicher Weise müssen wir das für alle Kategorieseiten tun , die hier aufgelistet sind. Bevor wir also damit beginnen, die Produktliste auch auf anderen Seiten hinzuzufügen , müssen wir eine kurze kleine Einstellung, die wir im Bereich Produktlinks vornehmen müssen , darin, dass wir angeben müssen nachdem der Benutzer auf dieses Produkt geklickt spezifisch, wann es zu einer Seite weitergeleitet wird , auf der die Produktdetailseite angezeigt wird. Wir nennen diese Seite PDP-Seite, was Produktdetailseite bedeutet. Dafür müssen wir einen Weg finden. Wie genau wir den Pfad angeben müssen, geben wir zuerst einen Schrägstrich an und benennen dann die Seite, auf die er umgeleitet werden muss Das ist PDP-Punkt-HTML. Dann fügen wir hier ein Fragezeichen hinzu und fügen dann „Produkt ist gleich geschweifte Klammer“, „ Öffnen“, „ID“, „Geschweifte Klammer“ und „ Schließen“ hinzu Öffnen“, „ID“, „Geschweifte Klammer und drücken die Eingabetaste Auf diese Weise definieren wir, dass jedes Mal, wenn ein Benutzer auf dieses Produkt klickt, um die Produktdetailseite anzuzeigen, die Website den Benutzer auf die PDP-Seite weiterleitet und dort die Details anzeigt Wir müssen schnell auf die PDP-Seite gehen und hier die Produktkomponente hinzufügen Vorher fügen wir einfach schnell einen Container und fügen schnell die Produktkomponente in diesen Container Ich werde dieses Projekt speichern. Ich gehe zu den Kleidern und ich gehe zur Vorschau. Ich klicke auf eines der Bilder und dann knall. Da haben wir's. Dieses Produkt kommt jetzt also dynamisch. Geh zurück, klicke auf dieses Produkt. Dieses Produkt kommt. Wenn Sie also auf dieses Bild klicken, erscheint das Bild so. Interessant, oder? Kopieren Sie diesen Parameter und gehen Sie zur Fahrzeugseite und fügen Sie ihn hier ein und drücken Sie die Eingabetaste. Schnell, was wir tun werden, wir werden das in alle anderen in der Kategorie aufgelisteten Seiten kopieren . Ich klicke mit der rechten Maustaste auf Kopieren und Einfügen, kopiere zwei, ich komme zu mehreren und ich klicke auf jede einzelne Seite einzeln. Also ich will das in Jeans haben. Ich will das im Büro haben. Bestellungen sind nicht das, was wir wollen, Bestelldetails, kein PDP, keine Playsuits ja, Saris ja, Erfolg, kein T-Shirt, ja, die Kulisse, kein Und dieses Mal werde ich nicht auf diesen Link hier klicken. Ich möchte nicht, dass die Einstellung auf allen Seiten gleich ist. Ich lasse das aus und klicke auf Kopieren. Jetzt werde ich schnell zu den einzelnen Seiten gehen. Ich denke, wir haben Indisch verlassen, wir werden diese Komponente schnell zu Indisch hinzufügen. Von hier aus kann ich es schnell auf Indian hinzufügen und ich komme zurück. Standardmäßig wird es als letzte aller Komponenten angezeigt. Wir müssen es nur verschieben und genau in der Mitte von Navbar und Putter platzieren in der Mitte von Navbar und Putter Okay, das ist also nur für die indische Kategorie. Also wähle ich das aus und scrolle nach unten, und ich ändere das einfach auf indische Mode und klicke auf Auswählen. Indische Typen sind da. Oh, die Gens kommen auch auf Indisch. Okay, fair genug. Kein Problem. Lass uns zu den Jeans gehen und sie in die Mitte bringen. Und wählen Sie die Produktliste aus. Komm her und ändere die Kategorie in Gene. Kein Produkt gefunden. Möglicherweise liegt ein Fehler im Reflow-Konto Wir müssen schnell gehen und ihm die Gene neu zuordnen. Bring es in die Mitte. Wählen Sie das Produkt aus, scrollen Sie am wenigsten nach unten. Und das ist fürs Büro. Also Büro, ich glaube, wir können dem Büro vorerst nur Kleider zuweisen . Und ja, los geht's, bestellt nichts. Spielt Anzüge, wir wählen das aus, stellen es in den Mittelpunkt, wählen das Produkt mit der geringsten Komponente und gehen schnell zu Spielanzügen Übrigens müssen wir das auch umbenennen. Spielanzüge. Dann haben wir hier Indian okay. Dann haben wir hier Jeans. Das hier ist Office Wares, bestellt nichts. Okay. Spielanzüge, wir sind fertig. Dann, Saris, bringen wir es hierher, benennen es in SaS um und wählen die Produktliste Gehen Sie zur Kategorieoption und wählen Sie hier Saris aus und Erfolg ist nicht erforderlich. Schon wieder T-Shirt, ja, komm her. Benennen Sie es in T-Shirt um, wählen Sie die Komponente Produktliste aus, gehen Sie zu dieser Kategorie, wählen Sie den Kategorienbereich aus, und das wird unser T-Shirt sein und wählen Sie Zu guter Letzt Western WESTERN Western Western ist also eine Hauptkategorie. Es ist keine Kategorie für Kinder, also gehen wir schnell hierher und wählen einfach die Westernware aus und wählen. Also los geht's. Alle Western sind drüben aufgeführt Fantastisch. Also gehen wir zur Index-Seite und die Startseite wird Index sein. Indisch wird Indian Page sein und Western wird Western sein, was das letzte Mal ist. Cool. Also werden wir die Seiten schnell verlinken. Also diese Schaltfläche „In den Einkaufswagen“, die wir haben führt zur Warenkorbseite, welche haben wir erstellt? Ich glaube nicht, oder? Wir haben die Warenkorbseite nicht erstellt. Erstellen Sie also schnell die Warenkorbseite und fügen Sie schnell die Navbar und die Fußzeile zu dieser einen einzelnen Mehrfach. Warum müssen wir zu mehreren kommen? Denn nur innerhalb dieses Vielfachen haben wir die Möglichkeit, Kopien zu verknüpfen. Also klicken wir auf Card Link Copies Copy. Fantastisch. Ich werde diese Schaltfläche auswählen und wir werden sie mit der Karte verknüpfen. Es kommt auf Card und los geht's. Ja. Das Anmeldesign-Zeichen ist standardmäßig im Reflow angegeben. Wir müssen dafür also keine spezielle Seite erstellen. Okay, lassen Sie uns schnell eine Vorschau machen. Ich klicke auf ZR, was wiederum eine Landingpage ist wiederum eine Landingpage Wenn ich jetzt auf diese Kabel klicke, komme ich zu den Wenn ich dann auf Kleider klicke , komme ich zum Bereich Kleider Wenn ich auf Jeans klicke , komme ich zu den Jeans. Wir haben die Produkte dort nicht. Wir können schnell nachschauen, was schief gelaufen ist, warum die Jeans nicht kommen. Also klicken wir schnell auf E-Commerce einrichten und Projekt verwalten. Z ausgewählt, gehe zu Produkten, alle Produkte, und wo sind die Gene? Wo sind die Gene? Oh, die Gene sind nicht der richtigen Kategorie zugeordnet. Also werde ich einfach schnell auswählen. Ich werde alle Gene auswählen. Ich werde auf Bearbeiten klicken, ich werde auf Kategorien klicken und die Kategorien von diesen zu Genen verschieben und bestätigen. Auf diese Weise können wir sehen, ob sie nun Genen zugeordnet sind, und wenn wir hierher kommen und uns aktualisieren, sind wir fertig. Alle Gene sind jetzt am richtigen Ort. Gehen wir zurück und schauen wir mal, Spielanzüge sind jetzt an der richtigen Stelle. T-Shirts sind jetzt an der richtigen Stelle. Okay, die Kleider sind wieder am richtigen Ort und die Saris sind wieder am richtigen Ort Indisch, alle indischen Waren sind am richtigen Ort. Die Jeans sind immer noch in Indien, nicht wahr? Also werden wir schnell zurückgehen und feststellen, dass das nicht wirklich indisch ist, also gehen wir schnell zurück und ändern die Kategorie auf Western und bestätigen. Gehen wir zurück zur Vorschau, aktualisieren und los geht's. Jetzt, in Indien, haben wir nur Indisch. Wenn wir in den Westen gehen, kommen die Gene jetzt in den westlichen Bereich. Aber wenn Sie auf der Homepage sehen, dass wir verschiedene Schriftarten haben, aber wenn wir auf eine andere Seite klicken, sind die Schriftarten unterschiedlich. Der Grund dafür ist, dass wir den Stil nicht auf allen Seiten geändert haben. Wenn ich in der Darstellung auf den Hauptteil klicke und nach unten scrolle, ist die Schriftart noch nicht für die Schriftart ausgewählt , die wir möchten. Also schnell, ich muss die Schrift nacheinander auf allen Seiten ändern . Weg. Fantastisch, also haben wir alle Schriftarten für alle Seiten geändert, die es gibt. benötigen wir vielleicht ein oder zwei zusätzliche Seiten Je nach Anforderung benötigen wir vielleicht ein oder zwei zusätzliche Seiten, aber bis jetzt sind wir gut darin. Speichern wir das Projekt also schnell, und ja, wir sind startklar. Im nächsten Video werden wir also unsere Warenkorbseite erstellen. Immer wenn der Benutzer das Produkt auf die Karte legt, wird das Produkt auf der Warenkorbseite aufgeführt und wir entwerfen es in unserem nächsten Video. Sehen Sie sich also die Leute im nächsten Video an. 52. Ziara Commerce – Dynamische Warenkorb-Seite erstellen: Hallo und willkommen zurück. In diesem Video werden wir also die Warenkorbseite gestalten. Also schnell nehmen wir einen Container und platzieren ihn zwischen Navbar und Footer Wählen Sie einfach eine Überschrift und wir nennen sie Ihren Einkaufswagen. Und suche nach einer Karte. Wir müssen die Warenkorbkomponente nehmen und sie in diesen Behälter legen. Und da haben wir es. Ich denke, wir brauchen diesen Text nicht , weil der Warenkorb hier schon geschrieben ist. Also löschen wir das und behalten einfach den Warenkorb , der dort standardmäßig geschrieben ist. Cool. Sobald das erledigt ist, brauchen wir meiner Meinung nach zwei weitere Seiten. Eine ist die Erfolg-URL und die andere ist die Abbruch-URL. Also ich glaube, wir haben hier irgendwo eine Erfolgsseite, ja. Wir haben also eine Erfolgsseite, aber wir haben keine Kündigungsseite. Also werden wir schnell eine weitere Seite mit dem Namen Stornieren erstellen. Und gehe zum Index und nimm von hier aus die Navbar und die Fußzeile. Und im Grunde können Sie zu jeder Seite gehen die Navbar und die Fußzeile nehmen und Aber ich habe es mir zur Gewohnheit gemacht, zur Index-Seite zu gehen , auf der ich das entworfen habe , und die Navbar und die Fußzeile auf diese Seite zu kopieren die Navbar und die Fußzeile Wir haben jetzt die Seite Stornieren hier drüben, okay, zurück zur Karte, ich wähle den Einkaufswagen aus und nenne diese Erfolgs-URL ES-Seite und scrolle nach unten Wir haben die Erfolgsseite hier, und die Seite zum Stornieren ist hier. Das Projekt ist wieder Yara, und los geht's Wir sind eigentlich mit der Kartenseite fertig. Das ist alles. Okay, also werden wir schnell die Kündigungsseite und die Erfolgsseite entwerfen . Wir nehmen einen Container und wir nehmen einen Container, kommen hierher, ich nehme eine Überschrift. Ich nehme einen Absatz und ich nehme eine Schaltfläche. Ich denke, die Schriftarten sind hier anders, also wähle ich schnell den Hauptteil und komme zum Erscheinungsbild und ändere die Schrift. der Überschrift steht, dass im Absatz die Stornierung der Bestellung bestätigt wurde, wir werden eine kurze Geschichte und diese Schaltfläche haben, wir werden sie „Weiter einkaufen“ nennen und ich werde das Aussehen der Schaltfläche ändern. Ich werde den Stil von primär auf dunkel umstellen. Cool. Dies ist unsere Stornierungsseite und auf ähnliche Weise werden wir die Erfolgsseite erstellen. Ich nehme einen Behälter. Eine Überschrift, ein Absatz direkt nach der Überschrift und eine Schaltfläche. Das ist also ein Dankeschön für Ihren Kauf. Ich denke, dieses und dieses Y und das sollte klein sein, wir werden unsere Geschichte schnell hier drüben schreiben und weiter zum Einkaufsknopf hier drüben gehen. Du wirst auch den Stil auf Dark Awesome ändern. Gehen wir also schnell zur Index-Seite und machen eine Vorschau. Das ist also unsere Indexseite. Das ist Cards. Und wenn ich auf zwei Einkaufswagen klicke , werden mir die Produkte hier angezeigt. Oh ja, und dieses Produkt hat mehrere Bilder. Also lass uns gehen und uns das ansehen. Also wenn ich hierher komme, die Produktbilder, die da sind, dann kommen sie so und ich kann entsprechend hier klicken. Und es gibt noch ein weiteres Produkt genau dort, wo wir es haben, ich glaube, es ist in Western. Äh, ja, das ist dieses, bei dem wir auch Größen haben. Und je nach Größe ändert sich der Produktpreis. Und hier haben wir zusätzliche Dinge wie das Hinzufügen Ihres Namens auf dem T-Shirt. Wenn ich darauf klicke, ist dein Name erforderlich, und ich kann meinen Namen hier hinzufügen. Nehmen wir an, ich füge meinen Namen hinzu, füge die Größe und klicke auf In den Warenkorb. Das Produkt befindet sich jetzt auf meiner Karte, und wenn ich zum Kartenshop gehe gibt es noch keine Zahlungskonfiguration. Wir haben die Zahlung nicht konfiguriert. Aus diesem Grund können wir die Kartenseite nicht aufrufen. Ich schätze, du weißt was wir im nächsten Video machen werden. Wir werden das im nächsten Video beheben. 53. Ziara Commerce – Zahlungsinformationen Setup: Ähm, lassen Sie uns die Zahlungskonfiguration in diesem Video korrigieren. also schnell zum Reflow-Konto und klicken Sie auf Einstellungen und Zahlungen Es gibt die Optionen PayPal, Stripe, Paddle und Custom Wenn Sie also auf Stripe klicken, werden Sie aufgefordert, sich in das Stripe-Konto einzuloggen , und es werden alle erforderlichen Schlüssel benötigt, die dort vorhanden sind Im Moment habe ich keines dieser Payment Gateway-Konten. Also werde ich vorerst zur benutzerdefinierten Methode übergehen, bei der es sich um eine Banküberweisungsmethode handelt, und ich werde sie als Banküberweisung bezeichnen. Die geschätzte Zeit ist sieben. Behalte diese Nachricht so, wie sie ist, und ich werde auf Erstellen klicken. Nur weil ich eine Zahlungsmethode benötige, füge ich diese hinzu Sie können hier auch Ihr Zahlungsgateway hinzufügen . Wenn ich hierher zurückkomme, wenn ich mich jetzt aktualisiere, bumm, los geht's. Wir haben unser Produkt im Einkaufswagen, wir können die Menge erhöhen, und ich glaube, wir können es nicht überschreiten Vielleicht können wir das Produkt aus dem Einkaufswagen nehmen, weil wir das Mengenlimit auf fünf festgelegt haben . wir also auf die Menge klicken, ändert sich auch der Preis. Ups, da ist ein Fehler aufgetreten, also komme ich zurück zu einem und los geht's Sie sehen also, dass die Seite grau wird. Das heißt, im Hintergrund wird sie schnell aktualisiert. Und die neuen Daten liegen vor uns, die neuen Daten sind nichts anderes als der Preis. Und wenn ich hier auf Checkout klicke, wird es hierher kommen und meine Daten werden übernommen , falls ich bereits angemeldet bin. Wenn nicht, werde ich aufgefordert, alle Details hier einzugeben, nämlich meine E-Mail-Adresse, Telefonnummer, Lieferadresse und alle spezifischen Hinweise, die ich dem Verkäufer geben möchte. Also schnell lass uns das machen. Meine E-Mail lautet car@gmail.com. Die Telefonnummer lautet 123-456-7890 und die Lieferadresse wird wieder Kurn sein, die Adresse wird wieder Kurn sein, die ist irgendwo in Indien. Ich kann sagen, die Stadt ist Banguru, das Land ist Indien, der Bundesstaat ist Karnataka und der Pincode ist 560-092-0092 . Okay. Und dann heißt es für mich weltweite Flatrate. Ja, fügen Sie Rechnungsinformationen hinzu. Es ist okay. Es gibt nichts. Sie können es leer lassen , wenn Sie nichts haben. Dann ja, die Gesamtkosten sind was auch immer, etwa 1699. Ich kann hier einen Gutscheincode hinzufügen , falls ich einen habe. Wenn nicht, klicken wir auf Banküberweisung und los geht's. Ich kann die Bankinformationen hier sehen, und hier sieht der Kunde die Bankinformationen, der Kunde muss sie eingeben und der Kunde muss den Betrag hier überweisen. Wenn Sie hier unter Bestellungen alle Bestellungen sehen , sehen Sie, dass die Bestellung jetzt auf die Zahlung wartet. Sobald die Zahlung abgeschlossen ist und der Kunde Ihnen bestätigt, dass die Zahlung abgeschlossen ist, können Sie den Zahlungsstatus so der Kunde Ihnen bestätigt, dass die Zahlung abgeschlossen ist, ändern , dass er als bezahlt markiert wird, und auf Bestätigen klicken. Sobald das Produkt versendet wurde, können Sie den Versandstatus erneut auf Als versendet markieren ändern . Diese Informationen werden über die vom Benutzer angegebene E-Mail an den Benutzer gesendet, das ist diese, das ist keine echte E-Mail, also werde ich keine erhalten, aber der Benutzer kann die Bestelldetails und den Bestellstatus sehen, sobald er ein also werde ich keine erhalten, Konto erstellt und den Bestellstatus sehen, sobald sich in das Zia-Konto einloggt. Im nächsten Video werden wir genau das tun. Wir sehen uns im nächsten Video, Leute. 54. Ziara Commerce – E-Commerce-Website fertigstellen: Fantastisch. In diesem Video werden wir also eine Seite mit dem Bestellstatus, eine Seite mit den Bestelldetails usw. erstellen . Kommen Sie also schnell zu Bootstrap Studio und lassen Sie uns sehen, ob wir die Bestellseite erstellt haben oder Ja, wir haben sowohl eine Bestellseite als auch eine Seite mit Bestelldetails. Gehen wir also schnell zur Bestellseite. Nimm einen Behälter und klicke auf Bestellen. Wir haben hier also den Bestellstatus und hier haben wir eine Benutzerbestellung. Also nehmen wir diese Komponente für die Benutzerbestellung und legen sie hier ab, Benutzerbestellung, und nehmen innerhalb der Bestelldetails wieder einen Container. Und nehmen die Komponente „Bestellstatus“ und legen sie auf dieser Seite ab. Und der Benutzer braucht einen Ort, an dem er das überprüfen kann. Gehen wir also zum Index und gleich hier drüben, vielleicht nach diesem Western Oops, nehmen wir diesen NAV-Artikel, duplizieren ihn und benennen ihn in Bestellungen Und wir werden die Bestellungen mit Ich werde das mit unserer Bestellseite verknüpfen mit Ich werde das mit unserer Bestellseite Der Vorteil der Verknüpfung der Navigationsleiste besteht nun darin, dass Sie sehen können, dass die Bestellungen jetzt auf allen Seiten hinzugefügt wurden. Okay, gehen Sie schnell zur Vorschau, und wenn ich auf Bestellungen klicke, werde ich aufgefordert, mich anzumelden. Wenn wir jedoch auf Anmelden klicken, wird nichts benötigt, da wir die Anmeldeeinstellungen noch nicht konfiguriert haben. Lassen Sie uns also schnell die Anmeldeeinstellung konfigurieren. Gehen wir also zu unserem Reflow-Konto, gehen wir zu den Einstellungen und klicken Sie auf Anmelden Das ist also unsere Reflow-Domain . Wir können kreieren Sie können auch eine benutzerdefinierte Domain wählen. Wir müssen hier eine Domain hinzufügen. Also gehen wir schnell zu Bootstrap Studio gehen zur Veröffentlichungseinstellung nehmen unsere Domain als Zara dotbss dot DESIGN und veröffentlichen diese Warten Sie einige Zeit, bis es veröffentlicht ist. Ja, es ist veröffentlicht, und klicken Sie jetzt darauf und nehmen Sie jetzt diese URL. Komm wieder her. Ich tippe hier bei Zara Ich werde auf Origin klicken und diese Domain hier einfügen. Und klicke auf Speichern. Der Schlüssel wird generiert. Und jetzt kann ich diese E-Mail und dieses Passwort einschalten. Also, was für Informationen ich brauche. E-Mail und Passwort sind standardmäßig, ich brauche einen Namen, ich benötige eine Telefonnummer. Wenn wir eine benutzerdefinierte Seite mit den Allgemeinen Geschäftsbedingungen haben, können wir diese Seite mit den Allgemeinen Geschäftsbedingungen dort hinzufügen. Also werde ich einfach Bedingungen hinzufügen. Okay, du kannst das Muster auch hinzufügen oder du kannst es leer lassen und einfach auf Speichern klicken. Sie haben auch die Option für soziale Logins, Google, Facebook und andere Wenn Sie also auf Google klicken, werden Sie aufgefordert, die Kunden-ID-Nummer und die geheime Kundennummer zu erstellen . Warum das als K kommt, vielleicht habe ich einen falschen Namen hinzugefügt. Ja, das ist nicht K and save. Ich brauche das nicht und speichere Commerce, ich kann es vorerst hinzufügen. Fantastisch. Das ist also Yara commerce.refloq.com, was auch immer es ist. Also aktualisiere das und klicke auf Registrieren, weil die URL übereinstimmen sollte, und los geht's, E-Mail-Name, Passwort, Passwort erneut eingeben und Telefonnummer. Also werde ich die E-Mail-Adresse, den Namen, das Passwort, das Passwort erneut eingeben und die Telefonnummer hinzufügen . Ich akzeptiere die Allgemeinen Geschäftsbedingungen und klicke auf Registrieren. Ja, hier benötigst du eine gültige E-Mail-Adresse von Ori, da sie nach einer Bestätigung fragt und den Bestätigungscode einfügt. Und bumm, wir haben uns erfolgreich angemeldet. Jetzt lass uns aufgeben und bestellen. Also werde ich zu unserem Spezialprodukt gehen , vielleicht, tut mir leid, Western. Was soll ich jetzt bestellen? Okay, lass uns diesen Spielanzug bestellen. Wir kommen zu diesem Spielanzug. Spielanzüge sehen gut aus. Ups, sehr billig, nur 79 Rupien Dieser Preis ist irrtümlich. Als wir die Excel heruntergeladen haben, oder? In dieser Zeit waren es 79$. Aber bei der Erstellung dieses Projekts habe ich die Währung von Dollar auf Rupien umgestellt, sodass mir 79 Rupien angezeigt werden Wie auch immer. Wenn ich also auf In den Warenkorb klicke, wird dieses Produkt jetzt in den Warenkorb gelegt und ich klicke auf Zur Kasse Sie sehen also, während ich angemeldet bin, die Informationen automatisch übernommen, die E-Mail-Adresse wird übernommen, die Adresse wird übernommen. Ich werde einfach eine zufällige Adresse und Stadt hinzufügen. Ich werde Indien hier hinzufügen. Ich werde hier ein Bundesland und eine Postleitzahl hinzufügen. Und Überweisung, Banküberweisung, los geht's. Wenn ich jetzt zu meinen Bestellungen gehe, können Sie sehen, dass die Bestellung da ist und der Status ausstehend ist. Diese Bestellung steht noch aus. Wenn ich zu meinem Reflow-Konto gehe und wenn ich jetzt zu meinen Bestellungen gehe, klicke ich auf diese Bestellungen Und hier siehst du, dass die bezahlte Bestellung erledigt ist. Jetzt ist dies die zweite Bestellung mit der tatsächlichen E-Mail-Adresse. Ich werde hier weiterklicken. Und ich gehe davon aus, dass die Zahlung erfolgt ist, also klicke ich auf Zahlung ist abgeschlossen. Komm zurück, erfrischen Sie sich. Jetzt können Sie sehen, dass die Zahlung erfolgt ist und dass sie fortgeführt wird. Der Status wurde geändert und heißt fortfahren. Ich komme wieder hierher und ändere den Versandstatus auf „ Verschieben“ und klicke auf „Bestätigen“. Wenn ich hierher zurückkomme und die Aktualisierung aktualisiere, wird der Status als Versand Wenn ich hierher zurückkehre und den Erfüllungsstatus auf Als geliefert markieren ändere, komme ich zurück und aktualisiere. Sie können den Status als „Empfangen“ sehen. So läuft es also dynamisch ab. Wir können hier schnell eine Option hinzufügen , bei der auch die Bestelldetails angezeigt werden. Gehen Sie also schnell zur Bestellseite, wählen Sie diese aus, wählen Sie die Seite mit den Bestelldetails für die Zusammenfassung aus und hierher zurück. Aktualisieren Sie die Ops-Nr. Wir müssen das veröffentlichen, weil es sich jetzt in einer Subdomain befindet. Also wählen wir das aus und veröffentlichen Okay, der Herausgeber ist fertig Wir werden das jetzt aktualisieren. Jetzt siehst du hier drüben einen Pfeil. Wenn ich jetzt darauf klicke, werde ich zur Seite mit den Bestelldetails weitergeleitet Dort erhalte ich eine vollständige, kurze Zusammenfassung dieser speziellen Bestellung. Wir sind mit dieser Serie fertig, der Serie, in der wir gelernt haben, wie man eine komplette, dynamische E-Commerce-Website gestaltet dynamische E-Commerce-Website wir der Karte ein Produkt hinzufügen können. Wir können die Bestellung aufgeben. Wir können den Bestellstatus sehen und wir können den detaillierten Bestellstatus sehen. Wir haben ein Admin-Panel , in dem wir den Überblick über unseren Shop haben den Überblick über unseren Shop Dann haben wir die Benutzerliste des Shops. Wir haben die Pläne, Zahlungen, Bestellungen. Wir können die Produkte, Kategorien, Gutscheine und so weiter hinzufügen . Also, ja, wir haben die Serie hier erfolgreich abgeschlossen und wünschen Ihnen viel Spaß beim Lernen 55. Lässt Sich Auf Die E-Commerce-Website Des Projekts Vier Beginnen: Lasst uns anfangen. In diesem Abschnitt werden wir lernen, als würden wir die E-Commerce-Website erstellen. Und es wird eine echte dynamische E-Commerce-Website sein, die wir im Bootstrap Studio entwerfen werden. Und nachdem wir diese Website ausgefüllt haben, wir, ich meine nicht können wir, ich meine nicht, dass wir diese Website starten und Bestellungen annehmen können. Lasst uns anfangen. Was ich getan habe, ist, dass ich ein Design erstellt habe, leeres Design, und ich habe es als Schnappkarte benannt. Snap Card wird der Name meiner E-Commerce-Website sein. Als erstes werden wir anfangen, das Layout zu entwerfen, und das erste, was wir tun werden , ist, dass wir eine Navigationsleiste erstellen werden. Und ich werde eine Navbar nehmen, die diese Navbar sein wird. Und innerhalb dieser Marke werde ich auf jeden Fall Snap Card benennen. Schnapp-Karte. Und was wir hier tun werden ist, dass wir zwei Kategorien haben werden. Innerhalb dieser Kategorien werden wir auch eine Unterkategorie haben. In diesem Beispiel erstelle ich zwei Kategorien. Und innerhalb dieser Kategorien erstelle ich zwei weitere Unterkategorien. Es liegt an Ihnen, wie viele Kategorien und Unterkategorien Sie erstellen möchten, die Sie tun können. Was ich hier mache, ist, dass ich einfach all diese drei jetzt Elemente auswähle und das lösche. Und ich wähle ein Dropdown-Menü aus. Ou. Ich werde dieses Dropdown in dieser Navigationsleiste platzieren. Ich nenne es als Männer, und ich werde ein weiteres Dropdown erstellen, sonst wähle ich dieses aus und ich werde es duplizieren, und ich nenne es als Frauen. Dies sind die beiden Navbars von Entschuldigung, das sind die beiden Dropdowns. Diese anderen zwei Kategorien , die unsere Website haben wird. Ich wähle das aus, ich klicke auf Öffnen. Der erste wird sein, der zweite wird allgemein sein. Und General. Das wird es sein. Okay. Dies sind also die drei Kategorien. Ich schließe das. Ich komme wieder zum Menschen und öffne das wieder. Dieser wird Roadster und General sein. Und das wird sein, bevor ich vorankomme, was ich tun werde, ist, dass ich zu den Einstellungen gehe und hier ein anderes Team auswähle. Sagen wir Lux Theme. Und ich klicke auf Speichern. Wir werden auch eine andere Schriftart und einen anderen Stil bekommen. Darin kann man sehen, dass ein anderer Stil da ist. Lassen Sie uns jetzt eine Vorschau unserer Website anzeigen. Wir klicken auf Vorschau. Ich bringe einfach das Browserfenster hierher. Da sind wir los. Das sind unsere Dropdowns. Wählen wir diese Navigationsleiste aus und klicken Sie hier auf die flüssige Option und öffnen Sie die Vorschau erneut. Diese Vorschau nochmal, und jetzt ist das eingestellt. Danach können wir Karussell erstellen. Ich stelle das Karussell hier hin , wo wir unsere Bilder schieben können. Ich erstelle nur zuerst ein Layout, wir importieren die Bilder und wir werden es überall verknüpfen. Dann haben wir einen Container , den ich unter dieses Karussell stellen werde. Und wenn wir diesen Container auswählen, was wir jetzt tun werden , geben wir nur einen Spielraum, oben leer oder vielleicht vier sind gut genug. Ja, vier sind gut genug. Und dann werden wir eine Überschrift setzen, und wir können dies vielleicht als das nennen, was wir es nennen können Produkte. Das werden wir als h3 behalten. Grund, warum ich diesen Text in h3 behalte ist, weil SEO und ja, werde ich Ihnen definitiv auch im späteren Abschnitt sagen das werde ich Ihnen definitiv auch im späteren Abschnitt sagen. Also alle Produkte H3, und danach können wir den Produktbereich dort platzieren . Ich denke, das reicht vorerst. Was wir in unserem Produktbereich tun werden, z. B. wenn Sie zu BSS-Dateien gehen, finden Sie dort einen E-Commerce-Bereich. Und wenn Sie zu Produkten gehen und dann zu Schiebereglern gehen, finden Sie hier drei Bilder. Du musst es einfach per Drag & Drop hier rüberziehen. Oder wenn Sie besser organisiert sein möchten, einfach mit der rechten Maustaste auf Bilder, erstellen Sie einen Ordner und geben Sie ihn als Schieberegler ein. Das löst alles gut und lass es einfach hinein. Klicken Sie auf, Okay. Doppelklicken Sie einfach, öffnen den Schieberegler, wählen Sie das erste Bild aus und klicken Sie dann auf Weiter. Doppelklicken Sie dann und doppelklicken Sie. Wählen Sie den Schieberegler zu S2-Bild aus. Klicken Sie dann auf Weiter. Doppelklicken Sie auf dieses Bild, doppelklicken Sie auf den Ordner, um ihn zu öffnen, klicken Sie auf S3 und klicken Sie auf OK. Und da sind wir los. Wir haben drei Bilder. Darin. Jetzt haben wir drei Bilder hinzugefügt. Gehen wir zu unserer Vorschau. Lassen Sie die Seite aktualisieren, laden Sie das Jahr neu. Jetzt ist es neu geladen. Und dann haben wir diese Bilder hier drüben. Wann immer wir das Bild ändern wollen, müssen wir es ändern, da Sie es nur diese Woche dynamisch nicht tun können. Jetzt werden wir zum nächsten Abschnitt kommen, der alle Produkte genannt wird, und Sie sind, was wir tun werden. Wir werden die dynamischen Dinge schaffen und sie minimieren. Und bevor wir dorthin gehen, müssen wir etwas tun. Wir müssen etwas mit unserem Bootstrap-Studio verbinden. Aus diesem Grund wird unsere Website zu einer dynamischen Website. Und was wir dort tun müssen, werden wir im nächsten Video sehen. 56. Reflow Des Projekts Vier: Was müssen wir tun, ist auf Einstellungen zu klicken. Sobald wir auf Einstellungen klicken, scrollen Sie einfach hier rüber und wir haben diesen E-Commerce. Sie klicken einfach auf diesen E-Commerce-E-Commerce. Jetzt müssen Sie hier auf Shop verwalten klicken. Und sobald Sie auf Tour verwalten klicken, erhalten Sie diese Seite, auf der Sie Ihren Shop benennen müssen. Ich nenne meinen Shop als Snap Card. Sobald ich auf eine Seite klicke, tippe diese Namensschnappkarte ein, die ich habe, muss ich einfach auf Weiter klicken. Und sobald ich auf Weiter klicke, werde ich zu dieser Seite weitergeleitet. Dies zeigt ein Produkt und ich habe dieses eine Produkt lange zurück hinzugefügt. Und das ist deine Schnappkarte. Sie können mehrere Geschäfte hinzufügen, z. B. einen neuen Shop, Sie können mehrere neue Geschäfte im Laufe des Jahres erstellen . Reflow ist eine Schwester, man kann es als Schwesterfirma von Bootstrap Studio selbst nennen . Sobald das erledigt ist , musst du Jahr wiederkommen. Und klicken Sie erneut auf Shop verwalten oder es ist bereits eine Senke, dann müssen Sie diese Schnappkarte hier auswählen. Sobald diese Store-Snap Card hier ausgewählt wurde, klicken Sie einfach auf Speichern. Und dann werden wir vorerst aufhören, Bootstrap Studio zu verwenden, es sei denn und bis wir alles zu unserer E-Commerce-Website hinzufügen. Reflow. Sie können dieses Reflow-Dashboard als Admin-Panel unserer E-Commerce-Website sehen. Wir gehen zu Kategorien und wir werden mit der Erstellung der Kategorien beginnen. Welche Kategorie haben wir? Eigentlich haben wir zwei Hauptkategorien. Einer ist gemeint, Entschuldigung, einer ist Männer. Das ist dafür keine Unterkategorie, ich klicke einfach auf Speichern und dann haben wir diese Art von Seite. Ich klicke auf Kategorie hinzufügen. Die zweite werden Frauen sein. Und ich klicke auf diese Frau. Sparen Sie. Jetzt haben wir zwei Hauptkategorien und auf unserer Website haben wir auch zwei Hauptkategorien. Es sind Männer und Frauen. Danach müssen wir eine Kategorie namens Roadster erstellen . Ich komme her. Ich klicke auf deine Anzeigenkategorie und tippe Roadster ein. Und die Elternkategorie werden Männer sein. Und sie klicken auf Kategorie speichern. Sie können jetzt bei Männern sehen, dass wir eine Roadster-Kategorie haben und dann wird eine allgemein sein. Wir klicken noch einmal auf Kategorie hinzufügen und allgemein. Und das wieder in der Männerkategorie. Alle Kategorien. Wir werden keine solche Kategorie erstellen, die alle genannt wird. Aber ja, wenn Sie eine Kategorie namens all erstellen möchten , können wir das tun. Wieder gehen wir zur Kategorie hinzufügen und dies wird Roadster sein und für Frauen klicken wir jetzt hier drüben auf Speichern. Eine weitere Kategorie mit Allgemein für Frauen. Und klicke hier einfach auf Kategorie speichern. Diese Hauptkategorien haben wir jetzt nach diesen Kategorien erstellt , können wir die Produkte erstellen. Nun, dies ist die Seite die Sie im Produktbereich sehen werden, und wir werden anfangen, das Produkt hinzuzufügen. Wenn Sie zu unseren Ressourcen gehen. In Männern finden Sie diese Ordner, in denen sich die Produktfotos befinden. Also nimm einfach das hier. Tut mir Leid, das hier und das hier. Also Produkt, ich klicke einfach zuerst auf das Produkt und diesen Ordnernamen, wir können es als Namen des Produkts nehmen. Hier gibt es einen Infoordner , in dem Sie diesen als Beschreibung betrachten können, wie normale Beschreibung, und wir können ihn ab sofort für alle gleich halten . zu Männern zurückkehren, dieses Produkt, und es wird all dieses Produkt, Produktfotos aufnehmen , ziehen Sie es hier rüber. Sie können ein Video auch importieren, wenn Sie möchten. Dann wird der Preis des Produkts irgendwo um 316 liegen, vielleicht auf Lager, alles ist da. Jetzt müssen wir die Kategorie auswählen, da dies kein Roadster ist , wenn wir sie allgemein und Männer beide sagen werden. Und wir müssen eine Beschreibung dort drüben schreiben. Also doppelklicke ich einfach hier und wir nehmen das. Füge es einfach hier ein. Und ich nenne es einfach als Männer. Ich werde nicht sehr spezifisch sein. Minimiere es einfach. Wenn wir eine ähnliche Varianz haben, können wir eine Varianz erzeugen, und das müssen wir tun, weil wir Größe haben. Also muss ich hier die Größe eingeben und Variante hinzufügen. Dieser wird also klein sein. Ein kleiner Preis wird 360 betragen. Ich weiß nicht, welchen Preis wir dort hinzugefügt haben. Also jedenfalls kein Problem. Und Großbritannien ist eine Aktienhalteeinheit. Du kannst eine Nummer angeben und in Wirklichkeit kannst du etwas sagen. Die exakte Lagerhalteeinheit. Wieder werde ich noch eins erstellen und es wird ein Medium sein. Auch hier wird es 360 sein. Lagereinheit SU k wird etwas sein und das Gewicht wird so sein, als würde ich nur ein zufälliges Warten setzen. Noch eins. Dieser wird klein, mittel, groß sein. Das wird, sagen wir mal, vielleicht 370 sein. Als würden wir dort etwa 1010 Rupien aufsteigen, aufhören, Lagerbestand zu halten und die Einheit zu behalten. Eine weitere wird extra groß sein und der Scan wird es zu 380 machen. Sie denken nur daran, dass wir zwei Produkte mit gleicher Menge haben. Das sind dreiundsechzig dreiundsechzig dreiundachtzig. Ich wollte dir das nur zeigen. Deshalb behalte ich die verschiedenen Zahlen dort drüben. Das Gewicht wird 0,2 betragen. Und sobald das erledigt ist, klicke ich einfach auf Speichern. Sie können sehen, dass wir jetzt über ein Jahr verschiedene Größen haben. Jede Personalisierung, wenn Sie eine Personalisierung hinzufügen möchten , alle Optionen, die Sie tun möchten, Personalisierungsoptionen hier drüben, können Sie dafür ihre Lagerhaltungseinheit tun gesamtes Element. Vielleicht könnte es eine Lagerhalteeinheit und das Gewicht des Produkts wird ungefähr so sein. Ja, das ist alles, sobald es fertig ist und ich klicke einfach auf sicheres Produkt und mein Produkt Nummer eins wird hinzugefügt. Dort können Sie sehen, dass das Produkt über ein Jahr hinzugefügt wird. Jetzt klicke ich noch einmal auf Produkt hinzufügen und wir fügen den nächsten Produktnamen hinzu. Diese Anzeige ist der Notepad. Hier ist es. Dies ist der Notizblock. Ich kopiere das und füge es über ein Jahr ein. Die Preise für diese Produktbilder werden in Ordnung sein. Wieder 99 Kategorie, es ist eine allgemeine Kategorie und ich muss hier etwas schreiben. Ich schreibe es wieder wie Männer und Varianz, es wird Größe sein und es ist nicht so, als ob man einmal eine Variante erstellt hat, man kann dort nicht mehrere Varianten erstellen. Sie können das mehrere Varianten wie Farben und all das tun. Und in letzter Zeit ist diese neue Variante, die wir geschaffen haben. Und ich klicke einfach auf dein Exemplar. Und das ist alles, ich muss nicht alle Dinge noch einmal zurückmachen. Aber erst danach muss ich den Produktpreis im Auge behalten , sonst wird es ein Durcheinander sein. Also phi 199599 und vielleicht wird dieser 649 sein. Ich werde ein Produkt mit einem anderen Preis machen, und ich klicke einfach auf Speichern. Und das ist anders als diese beiden Dinge, ich kann es leer lassen, weil du das schon weißt. Jetzt, im dritten Produkt, was ich tun werde, gehe ich zum Roadster. Ich denke, es gibt nur diese vier Produkte, die Roadster sind. Und ich klicke einfach auf Produkt hinzufügen. Jetzt wird dieser nur als Roadster bezeichnet. So etwas wie, lassen Sie uns sehen, wie die Produktfarbe hier drüben ist . Wie Roadster, vielleicht ein halbes T-Shirt. So etwas. Halbes T-Shirt. Gilt als halbe Ärmel. Also nenne ich es nur halb T-Shirt. Kopiere einfach diese Beschreibung. Setzen Sie es hier ein, wählen Sie dieses Bild ist Drag & Drop hier drüber. Diesmal der Roadster kann der Preis 999 oder vielleicht 899 betragen. Jetzt wird die Kategorie Männer und Roadster sein. Der General ist nicht da, es ist eine Roadster-Marke. Jetzt. Diesen müssen wir dort hinstellen. Ich sage das, whoops, kopiere alles. Wenn es wieder etwas Männer in Varianz gibt, sind dies die Varianz, die wir haben, dann werde ich das noch einmal kopieren. Diesmal war es so viel wie 899. Dann. Neunundneunzig. Neunundneunzig. Neunundneunzig. Diesmal setze ich den ganzen Preis nur auf 899 ein. Und wir klicken auf Speichern und Lagerhaltung. Sie können alles dort hineinlegen und das Gewicht des Produkts und klicken Sie einfach auf Speichern. Auf diese Weise, was Sie tun können, können Sie die Produkte hinzufügen, welche Produkte Sie hier haben , Sie können sie hinzufügen. Das ist Roadster. Sie können diese Marke mehrmals mit dem gleichen Namen benennen , da wir dort andere Fotos haben. Das alles Roadster. Wir können es in die Roadster-Kategorie setzen. Und dieses hier können Sie es in die allgemeine Kategorie schreiben. Und danach können Sie die Produkte von Frauen hinzufügen. Auch hier haben wir Roadster und die allgemeine Kategorie hier drüben. Was ich Ihnen vorschlagen werde, ist, dass Sie Ihre Produkte zuerst hier hochladen. Und dann werden wir im nächsten Abschnitt sehen , was genau wir das tun werden. Aber Sie müssen die Produkte hochladen, sonst können Sie mir nicht genau bei den Produkten folgen und Sie im nächsten Abschnitt sehen. Und ich werde auch die Produkte hinzufügen und uns im nächsten Video sehen, eigentlich nicht in diesem Abschnitt. Wir sehen uns im nächsten Video, Leute. 57. Unsere Website Dynamisch Für Projekt Vier: Okay, also haben wir insgesamt 17 Produkte hinzugefügt. Wenn Sie also zur Übersicht gehen, können Sie sehen, dass wir insgesamt 17 Produkte haben, darunter Männer und Frauen allgemein. Und was sagst du? Roadster-Kategorie? Wenn ich wieder zu Produkten komme, können Sie sehen, dass alle Produkte über Jahr 17 Produkte vorhanden sind. Und jetzt sehen wir uns an, wie wir all diese Produkte auf unsere Bootstrap-Studio-E-Commerce-Website bringen können unsere Bootstrap-Studio-E-Commerce-Website , die eine Snap Card ist. also über ein Jahr wieder ins Bootstrap-Studio kommen, haben wir, wie wir es hier getippt haben, wie alle Produkte eingestellt. Was haben wir also mehrere Optionen. Was ich hier tun werde, ist, anstelle aller Produkte es anstelle aller Produkte als „ Mal sehen“ Woman Produkt nennen werde . Geben Sie also einfach ein Frauen-Produkt ein und wählen Sie diesen Container Ich komme zum E-Commerce-Bereich, wo Sie diesen E-Commerce-Abschnitt sehen können. Und die zweite Komponente ist das Produkt am wenigsten. Nehmen Sie einfach diese Produktliste und legen Sie sie in diesen Behälter. Sobald ich es in diesen Behälter fallen lasse, kommen die Produkte hierher. Und jetzt kann man sowohl Männer als auch Frauen sehen, beide Produkte sind schon da. Aber was wir wollen ist, dass wir nur ein Frauenprodukt wollen und wir werden in dieser Listenansicht nicht wollen. Wir wollen es in einer Kartenansicht. Eigentlich. Was wir jetzt hier tun werden, was wir tun werden, was wir tun werden, wählen wir diese Produktliste aus. Und sobald wir das Produkt am wenigsten im Optionsfeld auswählen , können wir jetzt sehen, dass wir eine andere Reihe von Optionen über u. Erstens ist das Layout von ListView, wir werden zwei Karten verschieben sehen, und los geht's. Jetzt haben wir eine Kartenansicht. Sie können die Produktfotos sehen, gibt es den Namen des Produkts? Dann haben wir auch hier ein paar Details . Wir haben geordnet nach Datum aufsteigend, absteigend das Datum, an dem das Produkt hinzugefügt wurde, den Namen, die alphabetische Reihenfolge, der Preis in aufsteigend und absteigend mit, so oft werden wir es so belassen ist. Dann haben wir seitenähnliche Seitenzahl und dann oder pH, wie viele Produkte wir pro Seite anzeigen möchten. Wir lassen diese beiden Optionen leer, weil wir nur Frauenprodukte hierher bringen wollen. Dann haben wir einen Produktlink und all diese Lektion werden wir eins nach dem anderen sehen. Wir haben ein Geschäft wie definitiv das ist ein Snap Cut. Wenn dieses Produkt nicht von Snapchats stammt, können wir den Shop hier wechseln. Wenn Sie mehrere Geschäfte dort haben , kommen wir zu Kategorien. Also wähle ich hier einfach alle Kategorien aus. Davor haben wir Mock-Daten verwendet. Wenn Sie keine Produkte haben, schalten Sie dies ein, wenn Sie es einschalten. Wir haben Scheindaten hier drüben, die wir nicht verwenden möchten, also schalten wir sie aus. Und dann gehen wir jetzt zur Kategorie auswählen für alle Kategorie eins, Kategorieoption wird kommen. Und was wir hier wollen, sind menschliche Produkte. Also wählen wir dies aus und wählen Frauen aus. Wir wollen sowohl General als auch Roadster. Also klicken wir einfach auf Frauen und ich klicke auf Auswählen. Sobald ich auf Choose klicke, sind alle Männerprodukte weg und wir haben, du bist wie alle Frauenprodukte. Was wir also tun werden, wähle ich einfach diesen Container und Control L wird beschriftet. Und das nenne ich es als Frauen, Frauenprodukte. Und ich klicke auf Set, dieses Label. Ich werde verstehen, dass dieser Container für eine Frau Produkte ist und jetzt werde ich nur ein Duplikat machen, das Control D ist Und dieses ist jetzt da. Und jetzt werde ich es einfach noch einmal beschriften und es als Männerprodukt benennen. Ich klicke einfach hier auch anstelle von Frauen auf Set, ich nehme einfach Männer, ich werde einfach WO von dort entfernen. Und jetzt kommen wir am wenigsten zum Produkt und wählen hier einfach aus. Und jetzt werde ich vom Menschen Männer auswählen und jetzt alle Männerprodukte unser Ohr auswählen. Wenn wir nun die Vorschau unserer Website sehen, wenn Sie zur Schnappkartenvorschau kommen, können Sie jetzt sehen, dass wir die Frauenprodukte hier haben, dann haben wir Männerprodukte hier. Und diese dynamischen Produkte. Fair genug. Dann haben wir diese jetzt, Roadster General und alles, was wir brauchen, um diese Seite zu erstellen. Jetzt. Was wir tun werden, ist wieder ins Bootstrap-Studio zu kommen. Und wir werden hier eine neue Seite erstellen , also HTML-Seite. Und ich nenne es als produktiv. Klicken Sie einfach auf Enter und doppelklicken Sie hier. Und nimm einen Behälter. Ein Container und geben Sie dann einen Rand oben, Rand Top Vier. Dann nimm eine Überschrift. Nennen Sie es als was ist das Minimum als Produkte. Ich nehme die Produktliste oder du legst sie in diesen Container. Von dir nehme ich es als Kartenansicht. Scrollen Sie die Produkte nach unten, die ich als Männerprodukte nehmen werde, und klicken Sie einfach auf Juden. Dies ist eine Hauptproduktliste. Alle Männerprodukte oder so werden wir mehrere Dinge tun. Vorher werden wir also tun, dass wir uns entschuldigen werden, wir werden eine weitere Seite oder Ihre Produktdetails erstellen . Dies ist eine Rede zur Produktdetails. Und wenn wir zu unserem E-Commerce-Bereich zurückkehren , ist dies ein Produkt. Dies ist die, dies ist die Komponente, die wir verwenden werden. Und davor werde ich es wieder tun. Ich nehme einen Container. Wie üblich werde ich die Marge Top Vier auf acht setzen. Diese Produktdetailseite oder werden Sie vorerst, was ich tun werde, wählen Sie einfach dieses Produkt aus und ich klicke auf Auswählen. Also werde ich diese Informationen hier haben. Dies sind die Daten wie wir Bilder haben. Und wenn ich herkomme, kannst du sehen, dass Seite eins jetzt da ist. Ich sehe mehrere Produkte. Und wenn ich hier drüben klicke, haben wir diese schöne und schöne Galerie, Fotogalerie. Und das haben wir wieder mehrere Abschnitte und wir haben jetzt Produkte, die in den Warenkorb gelegt werden können. Und dann haben wir die Größen, da wir MDD dort in mehreren Größen haben . Dies ist eine Option , die ich bei der Personalisierung gemacht habe , diese Geschenkverpackung. Wenn jemand möchte, dass wir Packen geben, überprüfen Sie dies einfach und fügen Sie den Namen der Person hinzu, der, tut mir leid, wem. Wir wenden das einfach an wen Sie geben möchten. Der Name der Person wird da sein, und dann wird es einer sein. Dann klickt der Benutzer auf In den Einkaufswagen. Zukunft, was wir tun müssen, Ihre Produktdetailseite. Wir müssen dort zur Produktdetailseite gehen. Anstelle von festem Produkt. Und anstelle von C in der Datenquelle ist der Produkttyp festgelegt. Wir müssen dort drüben auf Dynamic klicken. Dies ist die Seite , auf der wir die Produktdetails mitbringen möchten . Gehen Sie zur Option Umbenennen und ich wähle den Namen der Rede aus und ich kopiere diese Seite. Das ist alles in diesem URL-Parameter. Ich gebe einfach diesen URL-Parameter ein. Wenn wir uns in der Produktkomponente befinden, dieser URL-Parameter den gleichen Namen dieser Seite. Es bedeutet, als wäre es eine Produktdetailseite. Also füge ich diese Produktdetails einfach hier ein. Und ich werde kein Dot-HTML und alles an diesem Ort platzieren. Und URL-Parameter Ich gebe einfach Produktdetails ein. Ich gehe zurück zu Produktmännern. Ich wähle die Produktliste hier aus. Und darin sehen Sie hier eine Produktlink-Option. Welche Ausrüstung du bist, was wir tun müssen ist, dass ich zuerst einen Backslash mache. Dann gebe ich den Namen der Seite ein, auf die ich umleiten möchte, und das sind die Produktdetails. Ihr Ich gebe dot HTML ein , weil ich dorthin umleiten möchte. Ich setze hier ein Fragezeichen. Dann gebe ich noch einmal Produktdetails ein. Und diese Produktdetails sind der URL-Parameter, wir auf diese bestimmte Seite festgelegt haben. Und nach diesem URL-Parameter setze ich ein Gleichheitszeichen. Ich setze die geschweifte Klammer, die sich öffnende geschweifte Klammer, und ich gebe ID darin ein. Lass dich hier nicht verwirren, ich erkläre dir, was genau es ist. Wir haben Produktdetails dot HTML geschrieben. Dies scheint, wenn wir auf dieses Produkt klicken, auf ein Produkt, es wird auf diese Seite weitergeleitet. Das ist Produktdetails Punkt HTML. Und das ist diese Rede. Nach diesem Fragezeichen setzen wir hier einen dynamischen Abschnitt. Nach einem Fragezeichen wird die Produktdetailseite angezeigt, wie die Produktdetailseite die ID dieser Produkt-ID abruft und dieses Produkt wird auf dieser Produkt-Punkt-HTML-Seite angezeigt. Es ist so einfach wie es aussieht. So einfach ist es, okay, die erste ist die Produktseite und dann Produktdetails der URL-Parameter. Und die ID ist die Produkt-ID , die das System automatisch abruft. Jetzt klicke ich einfach woanders komme zurück zum Webbrowser. Ich gehe einen Schritt zurück, und das ist die Produktliste, alles nur, alles nur, ich klicke auf dieses Produkt, um es Ihnen zu zeigen. Sobald ich auf dieses Produkt klicke, sehen Sie, dass dieses Produkt mit den Namenskosten, den Größen, die die Schaltfläche „In den Einkaufswagen“ zählen, und anderen Dingen geöffnet wird dass dieses Produkt mit den Namenskosten, den Größen, die die Schaltfläche „In den . Ich komme zurück und boomt, wir sind wieder auf unserer Produktseite. Aber wenn ich zurück zum Bootstrap-Studio komme, muss ich dieses Produkt am wenigsten auswählen. Ich wähle diesen aus. Ich kopiere es einfach. Gehe zur Indexseite und scrolle nach unten. Ich wähle diesen Artikel der Produktliste hier aus. Und ich füge diesen Link zum URL-Map-Produkt ein. Und ich füge es einfach über dich ein. Wenn ich jetzt zu meiner Webvorschau zurückkehre , bringe ich automatisch zu dieser Seite. Und wenn ich hier klicke , bringe ich zu dieser Seite. Dies ist die Produktliste und jetzt ist sie dynamisch. Jetzt wird der dynamische Abschnitt gestartet. Ich hoffe, du freust dich ein bisschen darauf , dieses besondere Ding zu bauen. Wenn Sie Fragen haben, irgendetwas, können Sie mir die Frage im Fragenbereich stellen. Du kannst mich in meinem Discord-Kanal anschließen. Ich zeige Ihnen, dass dies mein Discord-Kanal ist und die Einladungs-URL diese sein wird. Sie können diese URL eingeben und Sie können sich auf meinem Discord-Kanal mit mir verbinden und wir können hier viele Dinge besprechen. also wieder hierher kommen, kehren wir in unser Bootstrap-Studio zurück und jetzt müssen wir eine weitere Seite für Frauen erstellen. Also dupliziere ich das einfach. Jetzt tippe ich Frauen. Doppelklicken Sie einfach hier rüber. Ich muss nichts anderes tun weil alles eingestellt ist, die URL und alles eingestellt ist. Ich muss nur hierher kommen und die Kategorien ändern. Und das ist jetzt eine Frau. Und ich klicke einfach auf Choose. Dann dupliziere ich es noch zwei Mal. Die Frau und die Frau stürzen. Allgemein. Und das hier werde ich einfach zwei und Roadster entfernen. Doppelklicken Sie auf, Sie gelangen zu dieser Produktliste. Und von Frauen ist das allgemein, also wähle ich den allgemeinen und klicke auf Auswählen. Dies sind also die allgemeinen Produkte. Und jetzt wählen Sie alle Roadster-Produkte, die Razr-Kategorie, und ich klicke auf Saft, also haben wir nur drei hier. Dann müssen wir das auch umbenennen. Eigentlich spielt es keine Rolle, aber die Rechtschreibung sollte stimmen, oder? Roadster. Und kein General, ich wähle diesen aus. Männer klicken auf Allgemein, wählen aus, gehen dann in Wurzeln, um dies auszuwählen, und klicken dann auf Roadster. Da sind wir los. Und jetzt kommen wir zur Indexseite, jetzt müssen wir sie verlinken. Öffne das einfach. Ich wähle Roadster aus. Sorry, wo ist die URL? Wählen Sie diese Seite aus. Und dann werden zuerst Männer sein, Produktmänner Roadster. Dann ist der zweite General, Strandprodukt-Männer im Allgemeinen. Und wenn Sie darauf klicken, sind es nur Produktminuten. Schließen Sie diesen, öffnen Sie die Frau, wählen Sie die Roadster, URL aus. Dann produktive Frauen Roadster, General. Frauen allgemein. Und insgesamt. Und gehen Sie einfach zu Frauen Produkt, Produkt, eine Frau Dot HTML. Schließt jemand das? Ja, wir haben diesen Abschnitt hier drüben gemacht. Und jetzt im nächsten Video denke ich, dass es ein langes Video ist. Im nächsten Video erstellen wir weitere Seiten, wie zum Beispiel In den Einkaufswagen und alle. Wir sehen uns im nächsten Video, Leute. 58. Shoping Cart Seite Von Projekt Vier: Bevor wir also vorankommen und unsere anderen Seiten erstellen, gehen wir zuerst zu unserem Reflow-Konto. Wir werden anfangen zu tun, fangen an, ein Genie in der Umgebung zu machen. Also zuerst ist die allgemeine Einstellung. Und im Allgemeinen haben wir den Namen des Unternehmens wie die Snap Card und die Währung, in der wir die Bestellungen annehmen werden . Wie oft behalte ich es einfach USD nur die Messung. Es wird wie Cagey und Zentimeter sein und all das, Allgemeine Geschäftsbedingungen, Datenschutzrichtlinien, Rückerstattungsrichtlinien und die Haupt-E-Mail-Adresse, unter Rückerstattungsrichtlinien und die Haupt-E-Mail-Adresse, und die Haupt-E-Mail-Adresse der wir die Benachrichtigungen wünschen. Also ändere ich einfach die E-Mail-Adresse in mein Yahoo-Konto. Auf dieser Seite habe ich gerade die E-Mail-Adresse geändert. Dann klicke ich hier auf Speichern. Wenn wir die Besteuerungen fortsetzen, werden wir die Besteuerungen hinzufügen, wenn wir welche haben. Nehmen wir an, wenn es sich die Vereinigten Staaten handelt und über ein Jahr einen Vereinigten Staaten gründen wird, wählen Sie Steuersatz auswählen und er wird Sie ausgeschlossen oder Sie einschließt. Also werden wir Ihnen Steuern auf den Versand einschließen und Steuern und alles zulassen. Ich klicke einfach auf Speichern der Steuersatzregistrierung wird aktualisiert. Und dann können wir noch ein Land hinzufügen und sagen wir mal Indien. Und ich klicke hier. Der Steuersatz hier liegt also bei 18% pro Produkt. Die Steuernummer, es kann alles sein f7, G, B, D 12387. Entschuldigung, FFT GB und Umsatzsteuernummer. Es wird wie DCP pk 1122348 sein. Und alle Produkte sind innen enthalten auch Steuern und Steuern auf den Versand, und wir klicken auf Speichern. Auf diese Weise können Sie die Besteuerungen basierend auf dem Land hinzufügen , in dem Sie die Produkte versenden. Dann komm in diesen Versandbereich , wo andere Standorte und all das da sind. Sie können einfach auf Bearbeiten klicken. Dies ist standardmäßig vorhanden. Und die weltweite Flatrate-Option ist da. Dann muss man dieses auch bearbeiten, das ist weltweit und es ist eine Pauschale und alles. Also ja, das ist der Preis ist kostenlos und jetzt müssen wir in die andere Gegend gehen. Sagen wir, es ist wie Indien. Tatsächlich, Tschüss. Indien. Ich gebe gerne ein, sagen wir als kostenloser Versand. Kostenloser Versand. Und in Ländern wie den Vereinigten Staaten , sagen wir Australien. Australien und Indien. Während in Indien, Indien, Indien, Indien, in Indien. Diese drei Länder gibt es. In diesen drei Ländern biete ich den kostenlosen Versand an. Kostenloser Versand ist da und dann Add-Methode. Es wird wie kostenlos sein. Lieferung. Etikett wird versandkostenfrei sein. Und Gesamtwertreihenfolge. Es wird immer 0 sein und ich klicke einfach auf Speichern. So kommt es also. Kostenloser Versand und speichern Sie es. Wenn ich auf Versand klicke, sagen wir in Indien, vielleicht gibt es, sagen wir Kanada. Es ist eine Seite, die über ihre Anzeige versandt wird, und es ist pauschal. Und das Etikett wird versandt. Basiskosten betragen neun USD und vier Kilo, es werden 1 USD pro Kilo betragen. Machen wir es auf 2 US-Dollar basierenden Versand. Machen wir 1 USD pro Versand und 2 USD pro KG. Und ich klicke einfach auf Speichern und ich mache es sicher. Dies sind also die Versandmethoden, die wir an anderen Standorten erstellt haben. Wenn ich hierher gehe, ist es wie ein anderer Ort. Editieren. Diese Wohnung ist bereits gespeichert. Ich kann hier nichts machen, weil es nur kostenlos ist. Dies ist standardmäßig die Option. Und jetzt, wenn wir zur Zahlungsoption kommen, haben wir drei Zahlungsmöglichkeiten. Eine davon ist PayPal-Streifen und benutzerdefinierte Methode, kein Kunde. In PayPal. Wir werden zwei Dinge tun, PayPal und Gewohnheit, weil Stamm, ich habe es versucht, aber es erlaubt nicht, mein Land nach Indien zu wechseln. Eigentlich. Sie können versuchen, Sie zu stripe, wenn Sie zwei Stripe-Konten haben Wenn Sie auf Stripe klicken, wird es eine Verbindung zu Ihrem Stripe-Konto herstellen und dann wird es einige Schritte ausführen. Und es wird automatisch Ihr Konto nach der Überprüfung Ihres Kontos verbinden . Nach der Überprüfung Ihrer zugelassenen Person wird automatisch eine Verbindung zu Ihrem Konto dort hergestellt. Aber PayPal und anpassbare Liquidität, einfach. Wir können es sehr schnell in PayPal machen. Es ist wie öffne es, füge deine E-Mail-Adresse hinzu und klicke auf Verbinden, und das ist alles. Es ist verbunden. Und benutzerdefinierte Methode ist wie jede Methode, die Sie hinzufügen möchten, Sie können hier hinzufügen. Also gebe ich B wire UPI, UPI in Indien ein, es ist wie Zahlungsmethode, Unified Payment Interface, so etwas. Diese Nachricht ist eine benutzerdefinierte Nachricht, wie danke für Ihr Unternehmen, um Ihre Bestellung abzuschließen Bitte senden Sie einen Banküberweisungsbetrag von oder ich gebe bitte ein. Bitte überweisen Sie den Betrag davon ist der Betrag. Verdrahten Sie in Klammer. Ich kann Google b Komma Komma, Komma, jedes UPI eingeben. Anstelle dieses Firmennamens gebe ich meinen Namen ein und gebe meine UPI-ID ein. Und ich werde diese beiden Zeilen entfernen. Ich tippe hier drüben eine gefälschte UPI-ID ein. Die UPI-ID sieht so aus. Es mag wie die volle Nummer sein. Der Kurs, warum BL? Ja. Wichtig ist, dass Sie Ihre Bestellnummer und die Bestellnummer im Betreff enthalten, damit wir die Zahlung und Ihre Bestellung verbinden und einfach erstellen können. Das ist das alles für Zahlungsmethoden. Ich habe dieses PayPal erstellt. Wenn Sie von Indien aus zuschauen, funktioniert dieses PayPal nicht in Indien, da sie in Indien keine Unterstützung haben. Stripe hat ein unterstütztes Indien, denn unserer Plattform namens Classroom.com Kw ET classroom.com verwenden wir Stripe und es funktioniert absolut gut. Aber ich weiß in diesem System nicht der Streifen nicht funktioniert und nicht funktioniert, da er mir nicht erlaubt, das Land zu wechseln. Ich verwende dieses PayPal und bezahle wie eine benutzerdefinierte Methode per UPS. Und mal sehen, ob es die Möglichkeit ist , ein Bild oder ähnliches hinzuzufügen. Nein, wir haben keine Wahl für Bild und so. Ich hätte den QR-Code von UPI hinzufügen ihre allgemeinen Besteuerungen auch getan werden, als der Versand und die Zahlung erfolgt dann ja. Okay. Lassen Sie uns hier einen Gutscheincode erstellen. Ich klicke auf Gutschein hinzufügen und ich gebe einen Gutschein wie 20 ein, tut mir leid, nicht 24% Rabatt auf alle Produkte. Ich kann hier eine Beschreibung geben. 20% Rabatt auf alle Produkte. Oder vielleicht für die nächsten fünf Tage. Für die nächsten fünf Tage. Und der Code wird flach 20 sein. Es wird aktiver Code sein, es wird persönlich sein, unterrichten. Rabatt wird 20 betragen. Und dann sehen Sie, ob der Gutschein einen weiteren Gutschein erstellt. Wie flach 60. Werde flach. 1,60 US-Dollar werden verdienen, weil wir verwenden, wir schaffen alles in Dollar. Pauschaler Rabatt von 1,60 USD auf alle Produkte. Durch die Verwendung von flachem 60 Coupon. Flach, die Wohnung. Der Code wird flach sein, 60. Es ist wie ein Pauschalbetrag. Es werden 60 Dollar sein. Wir haben zwei Gutscheincodes. Einer ist flach 60 und wenn e 20% ist, okay, also wird es hier nicht angezeigt. Es ist ein Prozentsatz und es ist eine Wohnung. Beide sind aktiv, 68,20, und dies ist das Startdatum. Sie können hier eine Reihe von Gutscheincodes erstellen und wir können damit fortfahren. Keine Kategorien, die wir bereits gesehen haben, haben wir Produkte, Bestellungen und Übersichten gesehen. Jetzt gehen wir zurück zu unserem Bootstrap-Studio. Jahr. Wir erstellen jetzt eine Warenkorbseite. Klicken Sie einfach mit der rechten Maustaste auf Jahr Neu und ich erstelle eine Einkaufswagen Seite Um Zugriff auf die Warenkorbseite zu erhalten, erstelle ich hier einen Button. Und davor wähle ich einfach dieses Navi aus und dupliziere dieses Navi. In diesem Navi müssen wir runtergehen. Also entferne ich einfach beide Dropdowns von dort. Im Grunde brauche ich kein Navier, weil ich einen Knopf nehme, oder? Wir nehmen einen Knopf und stecken ihn in diesen Zusammenbruch. Und ich nenne das als Karte oder vielleicht kann ich ein Kartensymbol dort drüben legen. Es wird das Symbol nehmen, ziehen Sie dieses Symbol einfach hier rüber. Doppelklicken Sie auf dieses Symbol und geben Sie einfach den Einkaufswagen ein. Und wir haben Wachen über dich. Also welche Karte können wir diese Karte nehmen. Ja, cool. Dann entferne ich den Text von hier, also Karte. Ich wähle diesen Button aus und richte ihn am Ende aus. Also wird es hierher kommen. Wir haben kein Anmeldesystem, so etwas, weil es wie ein Gast-Checkout ist. Wie jeder kommen kann, wählte er das Produkt aus, sie können das Produkt in den Warenkorb legen. Sie können die Informationen angeben und das Produkt bestellen. Wir haben kein System namens was sagst du? Wie das Logging und all das. Okay. Los geht's. Wir haben hier einen Karten-Button und wir haben Kategorien hier drüben. Wenn ich nach unten scrolle, ja, es ist da. Und wenn ich zu den Produktdetails für Männer gehe, wenn Sie auf die Produktdetailseite gehen, also was wir hier tun können, haben wir so viel nur diesen oder einen Inhalt duplizieren mehr Zeit und lösche diese Produkte. Von hier aus gehe ich zu meinem E-Commerce, nehme eine Produktliste und lege diese Produktliste in den Container. Wir haben also irgendwo, wie viele Produkte, wie 17 Produkte wir haben. Wählen Sie diese Produktliste aus und statt wenigstens bringe ich sie in den Einkaufswagen. Jahr. Ich werde es als Preis sagen, der den niedrigsten Preis mit dem niedrigsten Preis aufsteigt , und dann werden wir den Preis erhöhen. Pro Seite bedeutet wie C, wir haben insgesamt 17 Produkte hier. Aber sagen wir, wenn Sie nur begrenzte Produkte zeigen möchten, sagen wir mal acht Produkte oder ähnliches. Was ich also tun kann, ist, dass ich es einfach tippe und hier drüben auf Enter klicke. Dann haben wir eine Paginierung, wie die automatische Paginierung. Und Seite ist eins. Und wir haben eine Seite. Wir haben so viele Produkte. Was ich jetzt machen werde, diesen Produktlink müssen wir tun, oder? Also komme ich einfach zu diesen Männern und klicke dieses Jahr an. Klicken Sie am wenigsten auf Produkt, wir kopieren dieses einfach. Und wenn ich das Jahr zurückkomme, wähle ich das einfach aus und füge es dort ein. Es ist wie ein Show-Bild-Name und zeigt dann Auszüge, Preis und Paginierung an. Also ja, auf jeden Fall. Wir haben Paginierung. Dann müssen wir die Paginierung zeigen. Wenn Sie den Preis anzeigen möchten, dann preisen Sie ihre mündlichen Preise, damit Sie die Preise auch entfernen können , aber ich wollte die Preise für Sie anzeigen. Du willst es zeigen oder nicht ganz dir überlassen. Beschreibungen, Größe und all das. Ja, es ist da. Wenn wir nun zur Warenkorbseite gehen, wie wenn Sie kommen, zur Warenkorbseite kommen , erstellen wir hier einen Container. Ich nehme einfach den Container und wie gewohnt werden wir in Richtung Rand die ersten vier zu diesem Container legen . Und dein Ich werde das einfach schließen, wenn es um E-Commerce geht, während der E-Commerce Yeah. In den Warenkorb legen ist da. Also lasse ich das einfach los. Nein, tut mir leid, nicht in den Warenkorb legen. Eigentlich Einkaufswagen. Dies ist die Warenkorbseite, auf der wir wie Warenkorb und eine Liste der Produkte sehen können, was auch immer wir hinzugefügt haben, dass zumindest die Produkte hier sein werden. Wenn Sie den Warenkorb auswählen, haben wir zwei Seiten. Eine davon ist die Erfolgs-URL und eine wird abgebrochen URL. Was ich also tun werde, ist, dass ich erschaffen werde. Was sagst du wie eine Seite. Ich tippe. Erfolg hier drüben. Nichts bedeutet, wenn das Produkt erfolgreich bestellt wird, wohin es umgeleitet werden soll. Es ist also wie eine Erfolgsseite, die ich wie gewohnt den Container nehmen werde. Marge Top Vier dazu. Marge von vier. Dann nehmen wir Icon. Ich versuche nur zu vermeiden, etwas äußerlich zu nehmen. Und vielleicht. Daumen hoch. Daumen hoch. Wochenende nehmen. Willkommen im Aussehen, wird eine grüne Farbe nehmen , weil es ein Erfolg ist. Wenn Sie dann auf die Schriftgröße herunterkommen , wird die Schriftgröße erhöht. Alles was ich in diesem Div mache , in diesem Container. Ich nehme dich erfolgreich an. Freut mich über die Bestellung. Dann wird der Absatz eingefügt. Dieser kontinuierliche Panzer zum Einkaufen. Wieder das Ausrufezeichen. Ich nehme einen Knopf, den Knopf darin und tippe. Shoppen Sie weiter. Eine weitere Sache, die wir tun können, ist sagen wir , ich nehme noch eine Überschrift über deine nur für dich. Oder vielleicht kann ich pauschal 1,60$ für alle Produkte nur für Sie sagen 1,60$ . Also können wir diesen Rabatt hier verwenden. Vielleicht können wir es auf diese Weise in einen Absatz aufnehmen. Flat 60 ist der Rabattcode , der ein h4 sein wird. Schon wieder. In diesem Fall werden wir eine Marge von fünf nehmen. Dies scheint ein pauschaler Rabatt von 6 USD auf alle Produkte bei Ihrer nächsten Bestellung zu sein. Auf diese Weise, was bei der nächsten Bestellung, die wir ihnen anbieten, passieren wird , sind 60% Rabatt. Bringen wir es in die Mitte. Kommt auch zur Flexbox. Nimm es Spalte, Körper, Mitte. Es sieht wie Dankeschön. Ich denke, wir müssen seit über einem Jahr einen Margenboden setzen. Jetzt scheint es, als hätten Sie die Bestellung erfolgreich aufgegeben. Danke fürs Einkaufen. Halten Sie Ihren Einkauf und sparen Sie 60 USD auf alle Produkte bei Ihrer nächsten Bestellung. Nur für dich. Verwenden Sie dann den folgenden Gutscheincode. Das ist alles. Sparen Sie es auf. Auf die gleiche Weise können wir diese Seite vier benutzen. Abbrechen. Stornieren, weil Karton auch die Stornierungsseite benötigt. In Abbrechen werden wir diesen Daumen hoch vielleicht als trauriges Gesicht benutzen . Im Aussehen werden wir es in eine rote Farbe ändern. Es sieht was schief gelaufen ist. Versuch es noch einmal, kaufe weiter ein. Und es heißt, dass Sie nach Ihrer ersten Bestellung einen Gutschein für Ihre zweite Bestellung freischalten. Okay, wenn wir also in den Einkaufswagen kommen, die Warenkorboption auswählen und zu Optionen kommen, wählen wir hier die Erfolgsseite aus. Für den Abbruch wählen wir hier die Abbrechenseite aus. Ruhetage es in Gut. Alles wie Produktdetails ist gut. Dann ist die Männer gut. Wir müssen die Navbars auf alle Seiten übertragen. Also was ich tun werde und wählen Sie die Navigationsleiste mit der rechten Maustaste auf In mehrere kopieren. Dies ist die Hauptoption wie Linkkopien, wählen Sie zu Alle Seiten aus und klicken Sie dann auf Kopieren. Wir haben einige Seiten auch wie AGB und all die Dinge , die wir später erstellen können. Es ist nicht so, dass wir es jetzt selbst machen müssen. Dann müssen wir das eins nach dem anderen an die Spitze nehmen. Eigentlich können wir das einfach von hier entfernen. Nur ab Abbrechen und Erfolg. Nur von den Erfolgen der Ratgeber können wir diese Navbar entfernen. Aber auf allen anderen Seiten müssen wir das sagen. 59. Erledigt Es Von Projekt Vier: Jetzt, da wir alles verlinkt haben, können wir ein Logo über ein Jahr oder so etwas setzen, und dann können wir es verwenden. Wie auch immer, wir wollen, wir haben Einkaufswagen, und wenn Sie mehrere Kategorien hinzufügen möchten, können wir diese Kategorien auch hinzufügen. Ja, ich glaube, das ist gelöst. Was wir also tun werden, werden wir dies veröffentlichen. Ich habe dafür eine separate Domäne erstellt , die das BSS-Punkt-Design mit Schnappkartenpunkten ist. Ich denke, du solltest wissen, wie das geht, aber ich werde es dir noch einmal sagen. Klicken Sie hier drüben auf Veröffentlichen. Eigentlich nicht veröffentlicht. Klicken Sie auf Website verwalten. Ich habe diesen erstellt, aber ich werde Ihnen trotzdem sagen, dass Sie auf Website verwalten klicken und dann auf Website hinzufügen klicken, den Namen Ihrer Website angeben, wo Sie eine Subdomain und Sie erhalten muss sagen, wann du das niemals oder so löschen willst. Wir möchten ein Passwort angeben. Sie können ein Passwort eingeben und dann einfach auf Erstellen klicken. Und dann wird Ihre Website hier wie Snap Card Dot BSS Dot Design erstellt . Und ich schließe es. Und dann wähle ich dieses Schnappkarten-Punkt-VSS-Punkt-Design und veröffentliche es. Jetzt ist das veröffentlichte, es wurde erfolgreich veröffentlicht und ich werde auf dieses klicken. Es öffnet meinen Browser und boomt, los geht's. Jetzt ist diese Website live. Du kannst gehen und einen Scheck machen. Vielleicht kann ich es in Zukunft löschen, aber mal sehen, gehen und nachsehen. Wir haben unser Karussell hier drüben und dann haben wir unsere Frauenprodukte. Als wäre es zu teuer. 77, 700 Tausend Dollar. wäre es so gut wie das iPhone. Ja. Dann haben wir alle Produkte für Frauen. Es ist ein Menü. Im Allgemeinen ist es eine Frau, dann sind es Frauen-URLs. Nun, bei Männern müssen wir es ändern. Die Frau ist alles. Das ist es. Eine Frau. Und ich werde es noch einmal veröffentlichen. Kommen Sie hierher und aktualisieren Sie diese Seite. Jetzt können Sie Slash-Produkt von Frauen HTML sehen. Gibt es dein Leben? Ich klicke auf dieses Produkt, du siehst das kommen. Absolut in Ordnung. Wir haben andere Produkte, die die Paginierung darauf haben. Wir können die Produkte auch hier sehen wir können auf Ihre Lightbox klicken. Wir können das super genial sehen. Und klicke auf all Roadster. Alles ist eingestellt. Und dann klicke einfach auf dieses Produkt. Und 20 Dollar für eine Geschenkfalle. Eigentlich hatte ich eine Rupie geplant, aber heutzutage in Dollar. Also lass es sein, es ist nicht Testmodus nur flach 20 Jahre, wir können sehen, dass 20% Rabatt bereits auf einige Produkte vorhanden ist , die wir erwähnt haben , die eine Sache machen. Wir fügen dieses Produkt in großer Größe hinzu und klicken einfach auf In den Warenkorb legen, wie das Produkt in den Warenkorb gelegt wird. Wählen Sie diese und Warenkorb-URL aus. Ich werde die mündliche URL des Einkaufswagens hier hinzufügen Is Card Dot HTML, und ich werde sie noch einmal veröffentlichen. Und wenn ich dann hierher komme und wenn ich das aktualisiere In den Einkaufswagen legen, dann kannst du hier wie die C-Karte Option über dich sehen. Das ist auch der gleiche Button hier drüben, ich denke, wir haben ihn nicht verknüpft. dorthin zurückkehren, gehen wir zur Indexseite und wählen diesen Button. Wir klicken auf Link und gehen dann zu dieser Seite namens Warenkorb veröffentlichen sie erneut. Und wir werden es auch speichern. Gehe zu diesem zurück und aktualisiere es einfach. Noch ein Mal. Wir werden das tun, um zu schneiden. Es geht immer wieder in den Einkaufswagen, weil ich alle drei Male eine andere Größe gewählt habe. Sehen wir uns eine weitere größte Bestellung auf ihrem Medium an. Wählen Sie hier aus. Und wenn ich auf den Warenkorb klicke, siehst du in der Karte, dass wir dieses große, kleine Excel und dieses haben . Und selbst wenn wir auf diesen klicken, wird es kommen. bist du nur, weil dies eine Kartenseite ist. Dann klicke ich einfach auf Entfernen. Entferne das und entferne das. Ja, das sind siebenundsiebenhundertneunzig neunundvierzig Dollar , die wir zahlen werden. Versand und Steuern werden beim Checkout berechnet. Wenn wir uns diese Zeit anschauen , wird es den Rest der Sache berechnen . Okay. So wie es ist, haben wir keine Anmeldeseite, daher werden Sie fragen, wie genau die Karte gespeichert wird. Und die Antwort ist, dass es alles in den Cookies speichert. Also klicken wir hier auf Checkout Button. Dann können Sie wie Bestellübersicht sehen, Sie haben diese Bestellung und das ist der Preis, die Menge ist so viel, diese wie zurück, um noch einmal zu schneiden und die Menge hier zu erhöhen. Der Preis beträgt jetzt einhundertzehnhundertvierhundertachtundneunzig einhundertzehnhundertvierhundertachtundneunzig Dollar und Kasse. Sie können zwei Gegenstände sehen. Wir werden noch einmal nach Roadster gehen nach Roadster gehen und wir werden dieses Produkt auswählen oder vielleicht gehen wir zum allgemeinen Produkt. Und wir werden dieses auswählen. mit der Geschenkverpackung und ich werde meinen Namen nur Jahr nennen, in dem ich mich so schenke, wie er ist. Und wenn Sie auf In den Warenkorb klicken und dann von Ihrem Auge aus in den Warenkorb gehen. Und dann können Sie sehen, dass dies eine große Frau mit zwei Mengen ist und das ist wie zusätzliche 20 Dollar dafür und insgesamt 2 Tausend Dollar sind da. Dann klicke ich auf Kasse. Nach dem Auschecken können wir einen Gutscheincode hinzufügen, der flach 20 war. Wir verwenden nicht flat 60 weil wir es als Kunde nicht kennen weil wir unsere erste Bestellung nicht zuerst aufgegeben haben. Bewerben Sie sich Und dann können Sie sehen, dass 20$ von 20% Rabatt hinzugefügt werden, was dieser ist. Dann muss ich die E-Mail-Adresse als Kunde eingeben. Also füge ich diese hinzu und gebe eine zufällige Telefonnummer ein. Setze das Land in das Land, das Kanada hatte. Kanada hatte gezwungen zu schauen oder ich weiß es nicht, lass es nur Indien sein. Ich kenne die Postleitzahl von Kanada nicht. Mein Dienstplan und der sechste Knoten ist der PIN-Code. Dann Hinweis an den Verkäufer ist wie, bitte machen Sie ein gutes Geschenk. Zurück. Kein Wrack zurück. Um auf zu klicken. Als Nächstes hier drüben. Wir haben wie PayPal und Debitkartenzahlung. Unten haben wir diese Option namens PYY UPI. Die Zahlung mit Sofortzahlung ist immer ein Top und diese Zahlung ist unten. Okay, also fügen wir die Informationen zur Lieferadresse hinzu. Das hier. Und ich übernehme diese Stadt. Neonstaat Indien. Der Pin-Code des Dienstplans wird 424213 sein, Knoten sechs. Dies ist etwas, das ist die tatsächliche Adresse, aber ich bleibe nicht an seiner Adresse. mir nichts aus, dir das jetzt zu zeigen, nur Kyi UPI. Jetzt ist das erledigt. Ich sehe wie alle Preise in USD. Wenn Sie jetzt wieder hierher gehen und auf Bestellungen klicken, finden Sie auch einige andere Bestellungen. Aber das ist die Reihenfolge, die wir kürzlich aufgeben. Dies ist die E-Mail-Adresse als 1.60773. Sie können sehen wie 177.3.60, Sie müssen diese Bestellung öffnen und als bezahlt markiert auswählen. Wenn wir das auffrischen. Ihr Warenkorb ist leer , da heutzutage bezahlt wird. Okay, wenn du kommst, gehst du zu wem Nil Mil Jahr. Sie können jetzt sehen, dass der Reflow da ist , wenn die Bestellung Meere wie Reflow oder zu Roadster mit diesem Preis und der Röstergröße dabei ist Reflow oder zu Roadster . Personalisierung ist Geschenkverpackung ist der Name der guten Verpackung wird aktuell sein, und dies ist der Steuerbetrag, der 270 USD beträgt und wie C-Bestellung angezeigt wird. Und wenn ich auf Bestellung anzeigen klicke, zeigt es mir diese Bestellung an, die wie als versandt markiert und alles angezeigt wird . Ich habe jetzt die Kontaktdaten des Kunden mit der Telefonnummer. Und auf diese Weise kann ich mit ihm in Kontakt treten. Wieder markierte buchstäblich eine Verschiebung. Und eine Schicht markiert bedeutet wie E-Mail-Benachrichtigung an Kunden senden. Also definitiv, ja. Und ich gebe ein, dass Ihre Bestellung versandt wurde. Klicken Sie auf den Link, um Ihre Bestellung zu verfolgen. Und der Link wird sein, Moment lege ich meinen Website-Link über awesome.com und du bist es nicht. Es ist dein Ich werde einfach auf Bestätigen klicken. Wie lautet die E-Mail? Diese E-Mail nur in dieser E-Mail sollte ich erwarten. Noch eine E-Mail. Sollte ich damit rechnen oder sollte ich weiterleiten? Es ist Reflow. Jetzt sieht es so, als ob Ihre Snap Card zu Ihrer Bestellung versandt wurde. Ihre Bestellung wird versandt. Klicken Sie auf den Link oder klicken Sie auf den Link, um Ihre Bestellung zu verfolgen, aber es wird kein Link angezeigt. Ich glaube, ich muss das kopieren und einfügen. Als UC als Kunde muss ich das kopieren und einfügen. Also ja, so kommt es so als ob Ihr Reflow Ihre Bestellung versandt wird und all das. Es kommt über das Jahr. So wird die Bestellung versandt. Erfolgreich. Aktualisiert, entlassen Yeah. Ja, Leute. So werden wir unsere E-Commerce-Website machen. Ab sofort. Für diese E-Commerce-Website ist dies erledigt und wir werden einige Änderungen an den Skripten vornehmen, wenn wir zum SEO-Bereich kommen. In SEO-Abschnitten werden wir einige Änderungen im E-Commerce und auch in einigen anderen Websites vornehmen , um SEO-Suchmaschine optimiert wo Google unsere Website finden kann einfach und das werden wir vor uns tun, bevor wir unsere Website auf dem realen Server hosten. Auf jeden Fall werden wir unsere Website auf einem echten Server hosten . Zu dieser Zeit also nicht zu dieser Zeit. Bevor wir unsere Website hosten, werden wir zuvor einige Änderungen an der Website im Skriptbereich vornehmen , z. B. mit der rechten Maustaste auf Eigenschaften, Titelbeschreibung als OG, wie Open Graph, als Twitter, dann Meta-Tags. Wir werden auch einige Meta-Tags und Head-Inhalte hinzufügen , wie konvergente Tracker, indem wir Google Analytics verwenden , und all das wird auch die konvergenten Tracker hinzufügen. Also werden wir das in den späteren Abschnitten tun. Und das sind alles Leute, der E-Commerce-Bereich im Bootstrap-Studio. Was auch immer die Version ist, 5.9 oder was auch immer es ist, dann haben wir den E-Commerce-Bereich mit Bootstrap Studio berechnet . Und jetzt können Sie auch Ihre E-Commerce-Website erstellen. Anstelle von Produkten können Sie alles tun. Sie können die Produkte nur verkaufen, aber wie ein virtuelles Produkt oder wie ein physisches Produkt, virtuelle Produkte, wie wenn die Bestellung aufgegeben und der Betrag gesammelt wurde, können Sie den Link dafür senden virtuelles Produkt , bei dem der Benutzer das herunterladen kann und er es verwenden, nutzen und verwenden kann, was auch immer es ist. Wenn es sich um ein virtuelles Produkt handelt, können Sie das Produkt an sie versenden und das ist alles. Okay Leute. Also das war's vorerst. Und der E-Commerce-Bereich ist abgeschlossen. Und im nächsten Abschnitt sehen wir, was wir anfangen werden, wenn etwas in Erinnerung kommt und wir können das tun oder wir können dann mit SEOs gehen. Okay, dann vielen Dank. Und das ist alles für diesen Abschnitt. 60. Lässt Sich Mit SEO Beginnen: Hallo und willkommene Leute in diesem neuen Bereich namens SEO, das ist Suchmaschinenoptimierung. In dieser Serie oder in diesem Abschnitt werden wir verstehen, wie genau wir unsere Website mit einigen Techniken optimieren werden , die als Suchmaschinenoptimierung bezeichnet werden. Es gibt so viele Dinge, die wir tun können, dass ich Ihnen die besten Dinge gebe , die wir tun werden, indem Bootstrap Studio-Anwendung selbst verwenden. Wie Sie jetzt sehen können, ist das Bootstrap-Studio Virgin Leichtigkeit, Jungfrauen 6.1. Wenn Sie sehen, dass es nicht viele große Änderungen gibt, selbst wenn Sie dieses Tutorial verwenden, wird von Bootstrap 5.6 etwas gemacht und dann kommt es zu sehen. Und sechs, darin gibt es nicht viel drastische Veränderungen. Und wenn Sie es sind, wenn Sie den Kurs durchlaufen, werden Sie feststellen, dass sich das nicht viel ändert. Ja, du wirst keine großen Veränderungen finden, aber wie ein kleines, kleines Genie da draußen. Aber wie auch immer, das wird unseren Kurs nicht beeinflussen. Und wie genau die Änderungen gibt es in dieser speziellen Version, die Sie sehen können dieser speziellen Version, die Sie sehen können, wenn Sie zu unserer Website gehen Keyed Classroom, Udemy oder wo auch immer Sie dieses Video ansehen. Also suche einfach nach meinem Kurs. Im Moment ist es hier, vielleicht auf der Linie, es wird nicht da sein. Selbst wenn Sie Ihren Anruf BSS durchsuchen und auf Enter klicken können, können Sie diesen Kurs zu diesem Zeitpunkt, an dem ich dieses Video aufnehme, über Ihre Attribute 399 finden . So kann es zunehmen oder abnehmen, oder diese Website bietet kontinuierlich die Angebote an. Also klicke ich nur auf diese Gore's und wenn ich nach unten scrolle und zum Lehrplan komme, kannst du Bootstrap Studio-Versionsupdates sehen. Also erstelle ich Videos genau zu den Themen, die im Bootstrap-Studio aktualisiert werden und die hier und da möglicherweise keine große Veränderung bewirken. So werden wir das also machen. Okay? Ich schließe oder minimiere diese bestimmte Sache vielleicht . Und um den SEO-Bereich zu verstehen, werden wir unsere Tech Resolve Website verwenden. Ich werde diese Website im Bootstrap Studio öffnen. Und im jüngsten Design doppelklicke ich einfach. Und da sind wir los. Wir haben die Website hier bereit. Dann fangen wir an, ein paar SEOs zu machen. Aber vorher werde ich Ihnen ein grundlegendes Verständnis von ACOs vermitteln und warum wir SEOs in unserem nächsten Video verwenden müssen. Wir sehen uns im nächsten Video, Leute. 61. Grundlagen der SEO: Okay, willkommen zurück In diesem Video nochmal, und wir sprechen über SEOs. Gehen wir auf unsere Website. Lass uns nur ins Kinderklassenzimmer gehen. Und ich zeige dir eine Sache bei Google. Nehmen wir an, wir verwenden die Google-Suchmaschine. Wenn wir eine Suchanfrage verwenden, die als Keyed Classroom bezeichnet wird, wie Sie sehen können, gibt es nur so süße YouTube-Kanäle für Klassenzimmer und wichtige Klassenzimmer. Wenn ich also einfach auf Keyed Classroom klicke, können Sie unsere Website sehen Keyed Classroom erscheint auf der ersten Seite. Dann haben wir diese Informationen genannt, dies ist ein Business-Informations-Infograph, auch wir können es nennen, da es Kinderklassenzimmer, unsere Website, den Link, die URL der Website zeigt unsere Website, den Link, , dann ist es eine LinkedIn-Website, dann ist dies eine YouTube, dann ist dies ein Facebook. Dann kann Spotify, wenn einige Podcasts vorhanden sind, dann gibt es Instagram, dann gibt es ein Unternehmen in vollständigen Unternehmensdetails. Und dann haben wir einen Twitter-Account und Aspirin, so wie so weiter und so fort. Wie genau dieses spezielle Spiel in Google Search und Google versteht, dass diese Ergebnisse zeigen muss, wenn jemand nach dieser bestimmten Abfrage sucht ich diese Ergebnisse zeigen muss, wenn jemand nach dieser bestimmten Abfrage sucht . Nehmen wir zum Beispiel an, ich habe mehrmals nach einem Kinderklassenzimmer gesucht und diese Website besucht. Deshalb zeigt es sich in dieser bestimmten Farbe. Der beste Weg, das E zu tun, ist in den Inkognito-Modus zu wechseln. Das ist der private Modus, das heißt Steuerverschiebung. Und wenn Sie in einem beliebigen Browser drücken, wird es im privaten Browsermodus angezeigt. Hier werden wir zuerst nach Google suchen , sagen wir google.com. Sie können auch hier direkt suchen. Vier wichtige Klassenzimmer, es ist keine große Sache. Sie gelangen nur auf dieselbe Seite. Lassen Sie uns Ihre suchen, weil Sie es sind keine Details oder ähnliches angezeigt. Aber Sie sind auch, Sie können den Kurs für Kinder auf Abruf sehen und was auch immer es dort ist , er kommt auf den ersten Rang. Wie genau machen wir das? Lasst uns das verstehen. Es gibt drei Dinge, an diesem bestimmten Ort. Dieser Bereich, der da ist, tut mir leid, ich werde diesen auswählen oder ich mache einfach einen roten Bereich um diesen herum. Lassen Sie mich also versuchen, dies auszuwählen oder nicht, ich kann dies auswählen. Wie auch immer, Sie können diesen bestimmten Bereich sehen. Dies wird als Domain-Abschnitt bezeichnet, der HTTPS-Colon-Schrägstrich linksschief classroom.com ist . Und es sind die Pfeile weniger öffentlich. Das bedeutet, wenn wir darauf klicken, wird es uns direkt zu einem bestimmten Abschnitt oder Ordner oder ähnlichem weitergeleitet , der im öffentlichen Ordner gespeichert ist. Außerdem werden wir sehen, wann wir unseren Server und unsere Domain übernehmen werden. Vielleicht wird das im nächsten Abschnitt passieren. Okay, also das ist der erste, der immer die Domain ist. Auch wenn Sie hier sehen können, ist dies ein LinkedIn, das ist ein YouTube, facebook.com, das ist ein open.spotify.com. Der erste Abschnitt ist dominant. Und während wir uns auf der Suche nach Schlüsselunterricht befinden. Es gibt also zwei Dinge , die Sie sehen können, dass sein Kind classroom.com ein Domainname ist, der Vorname, den Sie hier sehen können. Jetzt kann ich das in Blau auswählen. Das Besondere wie Baldwin, das in der blauen ist. Dies ist der Titel dieser bestimmten Seite, Titel dieser Indexseite, der wir sofort landen werden , wenn wir auf diesen bestimmten Link klicken. Nehmen wir zum Beispiel an, wenn ich auf diesen speziellen Link klicke, bringe ich zu einer Website-Seite. Dieser Seitentitel wird dieser sein. Genau das hier. Dies ist ein Titel. Und wenn Sie diesen bestimmten Bereich sehen, handelt es sich um eine Beschreibung dieser bestimmten Website-Seite, nicht der vollständigen Website, dieser bestimmten Seite. Auch die Beschreibung der Seite. Darin können Sie auch sehen, dass dieser spezielle Bereich fett ist. Das ist KID-Klassenzimmer. In der Nähe von Kid Klassenzimmer ist mutig. Das Klassenzimmer in der Nähe von Kindern ist mutig. Dies ist fett, da Keyed Classroom unsere Suchanfrage ist. Wenn wir etwas anderes suchen und trotzdem kommt diese Website. Und wenn unsere Suchanfrage anders ist, wird es uns diese Zeit brauchen da der fettgedruckte Abschnitt etwas anderes sein wird. Sagen wir zum Beispiel, wenn ich nach einem Bootstrap-Studio im Klassenzimmer suche. Jetzt können Sie sehen, dass es gut ist classroom.com, Kursdetails und Kurs dann Bootstrap Studio, was auch immer der Link ist. Aber du wirst feststellen, dass hier nichts gebowlt wird . Der Grund dafür liegt in der Beschreibung dieser bestimmten Zielseite dieser Website, es wird nirgends als vielleicht Keyed Classroom oder Bootstrap-Studio bezeichnet , so etwas. Aber im Titel kann man sehen, dass es Bootstrap-Studio-Tutorial ist, Virgin 6, lernen und was auch immer, was auch immer, was auch immer. Okay. Das sind also die Seiten. Dies ist der Titel. Dies ist eine Beschreibung, die Sie sehen, außer dass vor zwei Tagen, was auch immer es ist, die Beschreibung beginnt von hier aus. Diese erste ist die URL oder vielleicht der Link dieser bestimmten Seite, wir im Jahr sehen können , wenn wir zu dieser bestimmten Landingpage gehen. Klicken wir auf diesen Link und schauen wir uns an, wo genau wir hingehen. Also was ich tun werde, werde ich, ich möchte diese Seite nur hier behalten, damit ich hierher kommen und hin und her gehen kann hierher kommen und hin und her gehen , um Ihnen zu zeigen, wie genau sie da ist. Ich komme einfach zu diesem speziellen Link. Ich klicke mit der rechten Maustaste und klicke auf „In neuem Tab öffnen“. Es wird in diesem neuen Tab geöffnet. Ich gehe hier hin. Mal sehen. Es dauert einige Zeit, um nach Gewicht zu fragen Forky classroom.com zu antworten. Dies geschieht normalerweise , wenn wir im privaten Modus surfen , weil die meiste Zeit, aber das bedeutet das Unternehmen. Was sie tun, ist, dass sie die Website in einen geschützten Server stellen , und diesen Server, wenn sie Daten abgerufen haben, scheint es im privaten Modus zu sein. Sie sehen also, als ob es im Urin verdächtige Aktivitäten gibt? Sie sind unvollständig so. Ich werde das einfach auffrischen damit es ungefähr so kommt. Sie sind also, Sie sind auch, Sie können sehen, dass Sie pk facebook.com sind, und es gibt möglicherweise ein Video im Zusammenhang mit Bootstrap Studio, und es zeigt, dass auch das Bootstrap Studio 5.2. Und es braucht auch das Klassenzimmer für Kinder. Los geht's, die Seite ist geladen. Jetzt können Sie diesen speziellen Titel sehen, Bootstrap Studio Zweischwanzversion 6, lernen Bootstrap Studio. Sie können dieses Titeljahr sehen, aber nach einiger Zeit gibt es ein Dot-, Punkt-, Punkt- und Strich-Q-Klassenzimmer. Okay, warum passiert das? Der Hauptgrund ist die Google-Suche oder die Bing-Suche oder wie die beliebten Suchmaschinen, was sie tun, ist, dass sie 60 Zeichen zulassen, einschließlich Speicherplatz für Titel. Sie als Einzelperson können wir auch einen langen Titel setzen. Es liegt ganz bei uns, aber dieses wird nur 60 Zeichen sein. Da die Benutzer , die sich diese speziellen Suchanfragen ansehen , und alle Google sie nicht verwirren möchten, indem sie mehrere Zeilen in einer Zeile werfen, haben sie versucht, dies zu tun. Ein Bein bedeutet im Internet, Websites wie Desktops und Laptops, in einer Zeile haben sie versucht, es zu tun und es werden immer 60 Zeichen sein. So können Sie sehen, dass der Titel des Kurses geschrieben ist. Und woher wissen wir, dass dies auch der Titel dieser bestimmten Seite ist , das zeige ich Ihnen auch. Dies ist die Beschreibung dieser bestimmten Seite, die Sie sehen können wie Bootstrap-Studio-Tutorial für Anfänger, blah-blah-blah. In diesem Kurs habe ich einen Fokus wie bla, bla, bla gegeben. Sehen wir uns nun an, wie genau wir den Titel und die Beschreibung und den Titel der Seite finden werden , und Ja, der Titel der Seite befindet sich auch in diesem speziellen Tab. Du kannst sehen, ob du einfach deinen Mauszeiger dorthin nimmst und ihn einfach für eine Weile dorthin legst. Es wird ein Drop-down-Menü oder vielleicht ein Pop-up geben, das wie Bootstrap-Studio-Tutorial Version 6 angezeigt wird, lernen Bootstrap Studio eine gerade Linie und Kd Klassenzimmer. Der Titel kommt auch hierher. Wann immer Sie den Browser im Desktop oder Laptop verwenden, überall in größeren Bildschirmgrößen. Hier kommt der Titel. Jetzt schauen wir uns im Code an, wie es kommt. Wir werden nur hier mit der rechten Maustaste klicken und wir sehen Seitenquelle anzeigen und die Tastenkombination ist Control Plus you. Klicken Sie einfach auf diesen. Da sind wir los. Dies ist ein vollständiger Code hinter der Website. Und mal sehen, was da ist. Es gibt einige Metadaten gibt es. Sie haben Google Analytics oder Google Fonts, so etwas. Und du siehst den Titel hier drüben. Es gibt ein Titel-Tag. Und in diesem Titel-Tag wird der Kurstitel geschrieben. Und dann unsere Meta-Metadaten. Metadaten sind wie das erste Schlüsselwort. Also wann immer jemand nach Lippen und Bootstrap-Vorlage, Bootstrap-Studio-Alternative Bootstrap Studio, GitHub Student Bootstrap Studio-Lizenz, Schlüssellizenz oder was auch immer suchte nach Lippen und Bootstrap-Vorlage, Bootstrap-Studio-Alternative Bootstrap Studio, GitHub Student Bootstrap Studio-Lizenz, Schlüssellizenz . Das sind die Keywords, welcher Kursleiter? Es bedeutet mich. Ich habe dafür diese bestimmten Keywords ausgelöst. Und falls das Unternehmen auch wenige Keywords von seiner Website hinzufügen kann , die es findet. Es ist nützlich, damit es im Suchergebnis angezeigt werden kann. Dies ist eine Beschreibung. Beschreibung kommt genau hierher. Sie können sehen, dass dies die Beschreibung ist niemand Version 5.9 anzeigt. Sehr bald werde ich auch eine Beschreibung ändern. Dann gibt es Twitter-Karten und alles, was Sie sehen können Twitter-Titel. Twitter-Titel ist also, wenn wir diese spezielle Seiten-URL auf Twitter teilen . Twitter wird den Titel abrufen und der Titel wird auch im Beitrag angezeigt. Aber Twitter wird den Titel nicht aus diesem Bereich abrufen. Twitter wird also den Typ abrufen , den Twitter zuerst finden wird, unabhängig davon, ob es Twitter-Titel und Twitter-Beschreibung hat oder nicht. Wenn ja, dann wird es kommen, es wird den Titel von deinem holen, du bist dieser Titel nicht einfacher. Twitter wird die Beschreibung des Bundes von dir. Eine OG ist wie andere soziale Medien und im Gegensatz zu Facebook , was auch immer Facebook, Instagram oder Quora, irgendetwas, sie holen den Titel von OG. Dies ist, wo der Titel annehmen wird. Hier wird der Titel, diese Website den Titel ausfüllen. Og Bild ist welches Bild? Es wird dieses Bild wie eine Miniaturansicht oder ähnliches zeigen . Dieses Bild kann hier aufgenommen werden. Und dann haben sie ein bestimmtes Skriptjahr mit Käse. Vielleicht denke ich, dass dies ein Google Tag Manager oder so etwas ist , der von dort aus in der Lage sein wird , das Nutzerverhalten zu verfolgen und dementsprechend werden sie die Website verbessern und alle. Okay, also das ist das einzige, was für SEO ab sofort in diesem speziellen Kurs und in diesem speziellen Abschnitt sehr wichtig SEO ab sofort in ist, Mal sehen wir Leute, wie genau wir es machen werden unser Bootstrap-Studio. Also schließe das bei, ich werde das auch schließen. Und ich schließe diesen privaten Modus. Kommen wir in unseren normalen Modus. Gehen Sie zum Bootstrap-Studio und lassen Sie uns zuerst eine Vorschau dieser Website anzeigen. Ich werde eine Vorschau dieser Website anzeigen. Klicken Sie einfach auf Vorschau. Und da sind wir los. Wir haben das, Sie können sehen, dass dieser Titel Ihre Take Resultate ist. Und ja, der Titel ist da. Und jetzt sehen wir uns unsere Quelle an. In unserer Quelle werden Sie sehen Meta-Informationen nur so viel sind. Es gibt kein Keyword, es gibt keine Beschreibung, es gibt keine Twitter-Beschreibung, es gibt keine OG-Beschreibung. Würde dein Titel nicht so sein. Das einzige, was wir haben, ist wie Titel und dass es nur um technische Ergebnisse geht. Nichts anderes, weil wir das Projekt als Tech-Ergebnisse bezeichnet haben, also kommt es nur zum Peckergebnis. Wir müssen unseren Titel so annehmen , dass er zumindest eingeht, sagen wir wie die erste Seite mit Suchergebnissen. Wie genau werden wir einen perfekten Titel und eine perfekte Beschreibung und Keywords finden , die wir in unserem nächsten Video sehen werden. Wir sehen uns im nächsten Video, Leute. 62. SEO Einstellung in Bootstrap Studio: Okay, willkommen zurück. In diesem Video. In diesem Video werden wir sehen, wie genau wir den Titel finden werden. Dies ist unsere Website. Und nach dem Design und den Informationen, die auf der Website vorhanden sind. Diese Website bietet Dienstleistungen für das Design und die Entwicklung von Websites. Als Erstes, was wir wieder tun werden, gibt es ein paar Websites, um die Keywords zu finden und alles, was wir tun werden, wir werden im ersten Jahr direkt zu Google kommen, wir werden Website-Design eingeben. Sieh mal, was es kommt. Keine Website Designfirma in Bangladesch, momentan zeige ich in Bangladesch Bangladesch. Also klicken wir einfach auf diese Suchanfrage. Und das erste, was wir gerade kommen, ist hinzuzufügen denn sehen Sie sich diese AD ADATS dort an. Das weißt du vielleicht. Aber ich sage immer noch, dass AD Werbung ist. Und wann immer es vor diesem HTTPS kein AD gibt, bedeutet dies, dass es sich um eine direkte Suche handelt. In der AD-ähnlichen Suche werden wir diesen Werbeteil einfach behalten und wir werden zu einem Direktsuchbereich kommen. Und Sie sind die erste W3-Traumschule-Website , die Unternehmen in Bangladesch entwirft. Ich klicke einfach auf diese spezielle Website und das ist einfach mit dem Mauszeiger dort drüben und dort kannst du sehen, dass der Titel da ist. Aber der Titel ist zu groß. Wenn ich komme, um die Quelle zu sehen , werden wir den Titel finden. Der Titel ist zu groß. Es ist wie Web, der Firmenname dann Website, das Bangalore-Website-Entwicklungsunternehmen in Bangalore Website-Entwicklungsfirma in Bangalore in Bangalore wieder einmal zweimal geschrieben Website-Entwicklungsfirma in Bangladesch. Wir haben die Idee, dass, wenn jemand nach dieser speziellen Anfrage gesucht hat, Website entwirfende Firma in Bangladesch oder vielleicht ein Website-Design-Unternehmen in meiner Nähe oder so ähnlich. Welchen Titel können wir dann auf unserer Website behalten , wo er im Suchergebnis angezeigt werden kann. Dieser ist also wie ein Webshop, Webservices, beste Website-Entwicklungsunternehmen in Bangalore. Okay. Das ist also die Website. Ich weiß nicht, wessen Website das ist. Und ja, es gibt nichts an den Aktionen oder nicht. Ich fördere nichts. Was wir jetzt tun werden, benennen wir unsere Website indem wir eine Art Match in diesen bestimmten Titeln graben. Lass uns ins Bootstrap-Studio gehen. Der Meistertitel, es gibt zwei Dinge. Einer ist der Meistertitel und einer ist seitenbasierter Titel. Wo wir den Haupttitel finden, klicken wir hier auf Einstellungen. Dann wirst du SEO finden. Und das ist gemein. Dies ist der Titel. Standardmäßig ist das technische Ergebnis der Projektname. Also nimmt es an, dass das, was wir tippen werden, ist leid, Website-Design-Entwicklungsfirma Website-Design-Entwicklungsfirma in Bangladesch. Jetzt können Sie sehen, dass wir dies auch in den Suchergebnissen sehen werden. Also Website-Design- und Entwicklungsunternehmen in Bangalore. Und lassen Sie uns sagen, wenn ich anfange, etwas anderes zu tippen wird es als Punkt, Punkt, Punkt kommen , weil es diese Zeichengrenze überschreitet. Es zeigt also Punkt, Punkt, Punkt. Wir zeigen Website-Design- und Entwicklungsunternehmen in Bangladesch. So wird unser Titel aussehen und lassen Sie uns einen Beschreibungsüberblick beschreiben. Wir werden mit technischer Entschlossenheit beginnen, der Name des Unternehmens erzwang Tech RES ESOL mit technischer Entschlossenheit. Eines der ESOL-Deck-Ergebnisse und EINS, eins. Tech Resolve, eines der besten Entwicklungsunternehmen für Website-Design Website-Design in Bengaluru. Art und Weise. Dieses Gebäude ist ein B in Bengaluru. Kapital Omega. Okay. Wie auch immer, also Tech-Ergebnis, eines der besten Website-Design - und Entwicklungsunternehmen in Bangladesch. Wir entwerfen D, E, G und wir entwerfen Websites und mobile Anwendungen. Okay, so wird unsere Beschreibung aussehen. Fügen wir auch diese Sitemap hinzu. Sitemap ist also nichts anderes als so. Es wird auf der Seite Dot-XML geben, die alle Website-Titel und Seitennamen haben wird . Und diese spezielle Sitemap wird vom Google-Bot verfolgt. Und dann werden sie sehen, okay, welches Ding wir von dieser Website abrufen müssen , damit wir bei jeder Suche des Benutzers, damit wir ihnen die Sitemap zeigen können, einfach die Sitemap einschalten. Und das ist alles. Dies ist wie unser Meistertitel und unsere Beschreibung. Danach haben wir unseren offenen Graph, also OG, was ich dir gesagt habe, dass OG bedeutet, Graph zu öffnen. Was wir also für Open Graph tun werden wird auch der Mastertitel derselbe sein. Ich kopiere es einfach und füge es sowieso hier ein, es zeigt dir, aber es ist nicht genau das Spiel du. Es ist genau wie man sagen kann, wie ein Eingabefeld, so etwas. Es wird es hier einfügen. Und ich zeige dir, warum es nicht so ist. Wenn du einfach etwas tippst, wird es los, es wird leer. Ich kopiere das auch, Control C, und ich werde es hier einfügen. Dasselbe, zu dem ich gehen werde. Das Gleiche werde ich auch mit Twitter machen. Fügen Sie es hier ein und den Titel, ich bringe ihm einfach die Titelkopie. Und ich füge den Titel auch hier ein. Jetzt punkten diese Anzeigen DIE robot.txt. Wir werden das tun, aber nicht jetzt. In diesem Abschnitt werden wir das nur tun. Jetzt müssen wir das Wichtigste tun, dass wir dieses OG-Bild und dieses Twitter-Image auch sehen müssen. Was wir tun werden, ist, anstatt die Bilder hinzuzufügen, wir werden runter gehen, nach unten scrollen und in diese Ecke gehen, siehe diesen Link. Es gibt SEO-Sektion ist so viel, aber wir müssen auch zu Stoffteilen gehen. Also klicke ich auf Stoff, und es gibt einige Größen, die erwähnt werden, und wir müssen die Größen entsprechend hinzufügen. Wie oft. Was wir tun werden, klicke ich einfach auf Speichern. Dieses spezielle Icon ist da. Wir haben unsere, was sagen wir? Wir müssen unsere Icons vorbereiten. Gehen wir auf die Website namens Canva. Klicken Sie einfach auf Gehe zu Canva, canva.com. Und lasst uns eine Sache schaffen. Lassen Sie uns ein Design erstellen. Und es sollte ein individuelles Design mit einer Größe von fünf Pixel pro Phi sein, 12 Pixel. Das war, das war das Maximum eins, y zwei L um 512. Du bist was ich tun werde. Ich gehe einfach zum Element und ich nehme ein beliebiges Design. Design bedeutet jede Ikone wie Technologie, so etwas. Mal sehen, was das Machbare sein wird. Grafik für Technologie. Ich denke, lasst uns das so nehmen. Vielleicht ist das unser Logo, Logo für Icons. Also nehme ich einfach dieses und lade diese PNG-Datei D2L herunter . Ich lade das herunter. Dies wird nur ohne Titel sein. Lasst uns diesen öffnen, also nehme ich es vorerst und benenne es einfach in Tech-Ergebnis g um, oder das ist TR-Logo und ich werde es einfach hier nehmen. Darin. Wir gehen, da ist PR-Logo da. Es wird noch einmal zu den Einstellungen zurückkehren. Und jetzt scheitere ich Woche weiter. Phi zwei L ist die Bildgröße. Das ist also die Bildgröße, die ich annehme. Was müssen Sie tun, ist, dass Sie zu Photoshop gehen und einfach diese Größennummer eingeben können , 182, dann 13216, und dann können Sie die Größe ändern oder wo sie hingegangen ist. Sie können also einfach auf Größe ändern klicken , wenn Sie eine Premium-Version davon haben. Es gibt noch eine Sache. Es gibt einige Websites, auf denen Sie eine Größenänderung vornehmen können. Sie können die Erkenntnisse von dort aus machen. Aber was ich tun werde, werde ich einfach mehrmals dasselbe Bild machen. Das ist auch okay. Wir haben kein Problem damit. Nimmt das gleiche Bild für alle Größen auf. Wenn ich auf Speichern klicke und lass es los. Jetzt kehren wir wieder zu unseren Einstellungen zurück und kommen dann zu SEOs. Und wenn ich zum OG-Jahr komme, müssen wir den Titel setzen. Wenn Sie jedoch zu Twitter kommen oder ähnliches, wenn wir die verschiedenen Bildschirmgrößen angegeben haben, kann es die genaue Bildschirmgröße annehmen. bist du. Sie können sehen, ob jemand diesen bestimmten Beitrag teilt , indem Sie die URL der Indexseite, den Beitrag auf Facebook oder andere Dinge verwenden, die so aussehen wird beispiel.com. Es wird als Tech result.com oder wie auch immer der Domainname ist, kommen . Der Titel wird hierher kommen, die Beschreibung wird hereinkommen und das Bild wird so aussehen. Und der OG-Typ, ich zeige dir diese Website. Und in Twitter gehe ich einfach zu Twitter und komme hierher und klicke einfach auf Speichern. Jetzt können Sie sehen, wenn jemand diese bestimmte Seite in Twitter geteilt hat, wird es nichts geben, weil wir gezeigt haben , dass der Twitter-Ausschnittstyp keine sein wird. Wir haben zwei verschiedene Arten wie Zusammenfassung und jemanden mit großem Bild. Wenn ich also einfach auf Zusammenfassung klicke, wird es auf Twitter so aussehen. Und wenn ich auf jemanden mit großem Bild klicke, sieht es so aus, was ich uns nicht sehe. Sie mögen es, weil das Bild so ist, als würde man das Bild reduzieren. Geh einfach zur Zusammenfassung. Das ist okay, kein Problem. Alles gut. Dann schalte ich einfach diesen Abschnitt ein, der eine progressive Webanwendung ist. Wie genau ist eine progressive Webanwendung? Wieder komme ich dazu. Geben wir den Titel an. Also füge einfach diesen kurzen Namen ein, vielleicht nur lösen, tut mir leid. Wir müssen diesen Titel nicht und so nennen. Der Name wird verringert oder einsam sein. **** Ergebnisse und Verkürzung werden TR sein. Und wie lautet die URL Ich zeige die URL muss Index sein. Immer wenn jemand diese Website startet, sollte die URL Indexseite sein. Dann schalten wir einfach diese Maske, das Maskensymbol und das Hintergrundbild ein. Lass uns die Hintergrundbilder gelb machen, so etwas. Nehmen wir dieses Hintergrundbild, gelb, irgendwie gelb. Und Team E-Dur wird das Gleiche nehmen, aber auf etwas leichterer Seite. Nicht das Licht. Sie können die Echtzeitfarbe hier sehen . Was wird kommen. Und wählen Sie einfach Ja, Vollbild. Ich werde es als Vollbild und Orientierung behalten. Ich werde es als anonym wie Hochformat behalten, beide Orientierung wird es funktionieren. Was genau hier passiert ist, ist, wann wir zu unserem mobilen Browser gehen oder so ähnlich. Dann lasst uns eine Sache machen. Lass uns das sehen. Klicken Sie einfach auf Speichern. Wenn du zur Vorschau gehst. Komm zu diesem vorherigen Abschnitt, du wirst diesen sehen. Das ist die Zahl ist da, 192 Punkt 168 Punkt ein Punkt acht Doppelpunkt 8 Tausend. Möglicherweise haben Sie eine andere Nummer. Das ist sicher. Jede andere Nummer musst du eins tun. Wenn Sie offensichtlich WLAN haben, verbinden Sie das System wie Laptop oder Desktop und Ihr Mobiltelefon mit demselben Wi-Fi-Netzwerk. Und öffne den Browser. Also werde ich nur hinzufügen, ich füge hier meinen mobilen Bildschirm hinzu. Was ich tun werde, werde ich einfach meinen Browser öffnen. Nur eine Sekunde. Ich öffne meinen Browser und gebe diese Zahl ein, die 192 Punkt 168 Punkt c ist. Und hier wird geschrieben, als ob die meiste Zeit Änderungen Seed ist, jetzt diese Zahl einhundertzweihundertachtundachtzigachtundsechzig Punkt ein Punkt acht Doppelpunkt 8 Tausend gespeichert einhundertzweihundertachtundachtzigachtundsechzig . Ich klicke einfach auf Enter. Da sind wir los. Jetzt können Sie dieselbe Website in Echtzeit auf dem mobilen Bildschirm sehen. Jetzt können Sie diesen bestimmten Bereich sehen. Ich weise nur auf diesen speziellen Bereich hin. Das ist gelb. Okay. Gehen wir zu Bootstrap Studio und gehen zu Setting. Und komm zurück zu unserer PWA. Du bist in dieser Farbe. Nehmen wir eine andere Farbe. Sagen wir das hier. Und ich klicke einfach auf, Okay. Und ich klicke sofort auf Speichern. Sie können sehen, dass es einen Farbwechsel gibt. Das passiert, wenn wir in PWA verwenden , da ich das iPhone verwende. Es gibt also eine Einschränkung , die iOS und mir nicht erlaubt. Aber wenn Sie nur eine Sekunde auf Ihr Android-Gerät gehen. Jetzt ist die Farbe wieder zum Original. Wenn du zu deinen Android-Geräten gehst und einfach auf eine beliebige Stelle klickst, wo du diese Option hast. Und eigentlich habe ich gerade keine Android-Geräte bei mir. Sonst hätte ich es dir gezeigt. Wenn Sie zum Browser gehen und die drei Punkte auswählen, so etwas dort drüben. Und darin können Sie auswählen was die Verknüpfung ist oder so ähnlich. Dies bedeutet, dass es das Launcher-Symbol auf Ihrem Startbildschirm erstellt . Wenn Sie auf dieses Launcher-Symbol klicken, wird die Anwendung als Android-Anwendung geöffnet. Es wird nicht geben, dass es keine URL-Leiste oder ähnliches geben wird. Es wird wie eine reine Android-Anwendung sein. So werden wir diese PWA benutzen. Also PWA, progressive Webanwendung in iOS, unterstützt sie nicht. Aber ja, in Android und Android und iOS funktioniert es so. PWA ist also, so werden wir PWM verwenden. So wird es passieren. Und wir haben mit unserer SEO der Masterseite Masterseiten wie diese gemacht . Seo wird sich für alle Seiten bewerben. Jetzt zeige ich Ihnen, wie genau das Wochenende einen anderen Titel und eine andere Beschreibung gibt, und OG und Twitter und all das. Titelbeschreibung für einzelne Seiten , die wir in unserem nächsten Video erstellen werden. 63. Onpage-SEO: Okay, willkommen zurück Leute. In diesem Video werden wir sehen, wie genau wir einzelnen Seiten einen individuellen Titel und eine Beschreibung geben werden einen individuellen Titel und eine Beschreibung geben . Index ist das, was wir gerade getan haben. Und wir werden diesen bestimmten Titel und die Beschreibung auf der Indexseite behalten bestimmten Titel und die Beschreibung , da dies die Startseite einer Website ist , wenn jemand auf die URL klickt Gehen wir zu unserem Kontaktpunkt-HTML. Das ist also unsere Kontaktseite. Wählen Sie die Kontaktseite aus. Ich klicke mit der rechten Maustaste, komme zu Immobilien. Und jetzt haben wir diese SEO-Einstellungen über Ihre erste für diese bestimmte Seite. Jetzt ist es hier als Website-Design- und Entwicklungsunternehmen in Bangalore geschrieben . Aber was wir jetzt tippen werden, ist wie Kontakt Tech Ergebnis und lösen Sie Ihr Problem. So etwas. Wenden Sie sich an Tech-Ergebnis und lösen Sie Ihr Problem. Beschreibung wird uns kontaktieren und Ihre Lösung aus dem Ergebnis erhalten . Dies wird die Beschreibung und das Gleiche sein. Offensichtlich werde ich es für OG machen. Og nimmt diesen speziellen Titel vom Master. Ersetze dies durch diesen. Und für Twitter werde ich auch den Titel und die Beschreibung ersetzen. Ich nehme es von hier aus. Ich kopiere einfach diese Beschreibung. Diese Beschreibung hier drüben. Ich zahle auch als Beschreibung hier drüben. Und lasst uns diese Bilder hinzufügen. Es wird wie in diesem Jahr sein, es wird wie Erbschaft sein. Es bedeutet, dass es vom Meister kommt. Ein Jahr werde ich das Bild noch einmal hinzufügen. Wieder, geerbt von der Meisterin. Und das war's. Es wird los sein. Das ist erledigt. Das ist es, was die SEO der einzelnen Seite ist. Klicken Sie einfach auf „Speichern“. Das war's. Was wird passieren? Kommst du wieder her? Sehen Sie ab sofort, Sie können jetzt das Icon sehen, das bestimmte Symbol ist hier nicht Titel geändert wird. Wenn du wie beim Hosten dieser Website teilst, lass uns attackieren result.com ist der Website-Name. Die URL wird also so etwas wie diese www dot tech result.com slash-Kontaktseite sein, da sie mit dem Standard-Zielseiten-Index in Kontakt kommt . Es wird also kontaktiert, wenn Sie diesen Link kopieren und wenn Sie ihn auf WhatsApp oder irgendwo teilen , das Bild, das wir dort hinzugefügt haben, wird dieses Bild dorthin kommen und es wird es zeigen. Es wird also eine weitere starke Anziehungskraft an den Benutzer geben , wenn er sagen sollte, dass diese Website sehr professionell gestaltet ist. die gleiche Weise, wie Sie es mit einer Business-Lösung tun können, und genauso wie nach dem Absenden des Formulars können Sie es auch für OC tun. Das sind unsere zufriedenen Kunden. Okay, so werden wir die einzelnen pH-SKUs machen. Das heißt dieser spezielle Abschnitt SEO. Mal sehen wir uns noch einmal. Haben wir irgendetwas verpasst oder nicht? In SEO hätten wir uns gewünscht, das Haupt-SEO dann auch Sitemap zu sehen. Und das fügt Punkt TXT hinzu, dass wir es verwenden werden, wenn die Anzeigen kommen werden , die Sie nur als diese bestimmte Sache bezahlen müssen . Ja, robot.txt. Robots.txt ist wie ausstehend und das werden wir im nächsten Video sehen. Ich denke, wir können diesen speziellen SEO-Bereich hier beenden , weil wir die Babykonsole gesehen haben. Dann ist PW auch Metatag wie ja, wir können den Meta-Titel sehen. Meta-Tag ist immer dann, wenn wir solche SUVs und all das setzen, können Sie sehen, wie die Metadaten hierher kommen. Ein Metatag, den Sie hier hinzufügen können , ist einfach auf Meta-Tags hinzufügen zu klicken. Dies heißt Meta-Tag, und das Tag wird ein Schlüsselwort sein. Keyword und der Inhalt, den Sie Keyword geben können. Zum Beispiel Website. Entwerfen. Website-Design, das Speicherplatz einschließt, ist ein Schlüsselwort. Wenn Sie das Keyword trennen möchten, müssen Sie uns ein Komma setzen. Komma bedeutet, dass es sich um zwei verschiedene Schlüsselwörter handelt. Website-Design ist also ein Schlüsselwort und Website-Entwicklung ist ein Schlüsselwort. So verwenden Sie das Schlüsselwort für verschiedene Keywords. Ein Schlüsselwort kann mehrere Wörter sein. Und wenn Sie die Tastatur unterschiedlich unterscheiden möchten, müssen Sie das Komma dort verwenden. Dann kopf-Inhalt, dass wir diesen Head-Inhalt bereits gesehen haben . Und mal sehen, wie das als robot.txt bezeichnet wird. Mal sehen was ist robots.txt In unserem nächsten Video. Mal sehen, was das ist robot.txt in unserem nächsten Video. 64. Roboter txt: Bevor ich den Inhalt in robot.txt verstehe und bevor ich den Inhalt hinzufüge, werde ich Ihnen sagen, was genau robots.txt ist. C, Suchmaschinen wie Google, Yahoo, Bing, DuckDuckGo oder irgendetwas, jede Suchmaschine. Es gibt ein Timing. Auf einer häufigen zeitbasierten. Sie besuchen unsere Website. Es bedeutet, dass wir möchten, dass jeder Benutzer nicht für diese bestimmte Website-URL oder ähnliches klicken muss dass jeder Benutzer nicht für diese bestimmte Website-URL oder ähnliches klicken . Sie kommen automatisch. Es gibt einen Bodenroboter oder kaufte was immer es ist. Es gibt einen Bot, der auf unsere Website kommt. Und das Abrufen der Informationen von einer Website , also H1-Tags, H2-Tag und so ähnlich. Sie rufen die Informationen von einer Website ab und speichern sie in ihrer Datenbank. Aber wann immer die Bots auf die Website kommen, gibt es bestimmte Fälle. Sie sind v als Website-Eigentümer, wir wollen das nicht gekauft. Sollte einige Seiten auf unserer Website scannen. Nehmen wir zum Beispiel an, auf unserer Website gibt es eine Seite, die nach einem Formularübermittlungspunkt HTML aufgerufen wird. Wir wollen nicht, dass das gekauft wird. Sollte diese Website scannen, da diese Website keine Informationen enthält. Es ist genau so, als hätten wir etwas, auf dem wir diese bestimmte Seite sehen können , wenn sie ausgelöst wird Es bedeutet, dass jemand das Formular ausgefüllt hat , danach wird nur die Geschwindigkeit kommen. Wir möchten nicht, dass diese Seite in den Google-Suchergebnissen oder in Suchmaschinen in Suchergebnissen, diesem Patientenindex, indizieren sollte den Google-Suchergebnissen oder in Suchmaschinen in Suchergebnissen . Auf welcher Seite wir diese Seite indizieren möchten, werden wir sie in Google gekauft hinzufügen und welche Seite wir nicht wollen , die wir nicht zulassen werden. Wir werden diese Seiten-URL im Abschnitt „nicht zulassen“ hinzufügen , damit wir sehen werden, wie genau wir sie hinzufügen werden. Sehen Sie, wir gehen zu Einstellungen. Und dann haben wir SEO, wir haben diesen Abschnitt namens robots.txt. Es gibt mehrere Bots. In diesem speziellen Beispiel werde ich Ihnen sagen, wie genau wir für Googlebots vorgehen werden. Wir werden den ersten Benutzer binden, unseren User Dash, Agent AGE und te Agent, Doppelpunkt und Google gekauft GO, GLM, Google BOT Board. Geben Sie ein. Dann tippen wir unerlaubt. D sollte also Kapital sein. Dies Der IST ALLES EIGENER unzulässiger Doppelpunkt. Und dann geben wir den Seitennamen hier ein. Das heißt, wie lautet der Seitenname? Also speichern wir es einfach hier. Ich komme hierher, klicke mit der rechten Maustaste oder klicke einfach auf Umbenennen, und ich steuere eine Kopie dieses Seitennamens. Dann gehe ich zurück zu unserer robots.txt. Weltraum. Ein Schrägstrich wird da sein, denn vorher wird unser Domainname da sein, oder? Und dann klicke ich einfach auf „ Einfügen“, klicke nicht darauf. Ich füge das ein und lege noch einen Schrägstrich. Sobald das erledigt ist. Dann weiß der User-Agent Googlebot, wann immer das Google-Board kommt und die Scanner-Website gekauft hat, wann immer das Google-Board kommt und die Scanner-Website gekauft hat, Google gekauft, dass ich dies nicht mit diesem speziellen pH-Wert scannen möchte , weil ich nicht indizieren möchte. Was wir jetzt indizieren wollen. Sprechen wir noch einmal. Dieser hier, Googlebot Studio, Googlebot. Und ich gebe erlauben ein. Zulassen. Leg einfach diesen Schrägstrich ein. Es bedeutet, dass Googlebot weiß dass er oder sie nicht will, wer auch immer es ist. Der Googlebot wird wissen, dass diese Seite so eingestellt ist. Scannen Sie diese Seite nicht, aber welche Seite in Legierung gescannt werden soll , es ist nur eine Wimper, es bedeutet außer dieser Seite. Scanne alle Seiten. Das wird es sein. Und das ist für Google Board, oder? Aber was ist, wenn der Microsoft Bot kommt? Er wird sehen, okay, diese Bedingung ist für Google, aber nicht für mich. Ich werde alle Seiten erneut scannen, wenn jemand nach der Suche sucht, ist bestimmte Sache auf dem Microsoft-Suchmaschineneinlass die Bing-Suchmaschine. Diese Regel wird dort drüben nicht funktionieren. Wissen wir, wie viele Virginianer es auf dem Markt gibt und welche Suchmaschinenbenutzer verwenden? Nein. Wir haben eine Sache dafür. Statt dessen kaufte Google. Wir werden die Sternmarke hier drüben setzen und März bedeutet für alle Boote, es ist nicht speziell für diese spezielle Box, also werde ich nur 11 weitere Sternzeichen setzen. Der Star ist wie für alle Boote. Und noch eine Sache ist da, die wir ihm zeigen können, nämlich Sitemap. Wir haben die Sitemap hier drüben gesehen, genau in der Mitte. Wir haben diese Sitemap-Optionen aktiviert, also kehren wir zur robots.txt zurück. Einige zusätzliche Leerzeichen durch Drücken der Eingabetaste. Und ich tippe Sitemap hier drüben ein. Es ist also so, als würde SID MAP Sitemap Doppelpunkt setzen, und jetzt setzen wir die URL der Website an die erste Stelle. Nehmen wir an, diese Website ist HTTPS-Colon-Schrägstrich www dot tech result.com. Nehmen Sie einfach an, da wir keine Domain haben, gehen Sie einfach davon aus, dass dies die Website-URL ist , die www.Microsoft.com lautet. Und davor haben wir auch HTTPS hinzugefügt. Oder wir können einfach http eingeben. Geben Sie einfach http ein, da S für sicher steht. Sagen wir also, ob es sicher ist oder nicht, das ist die Sitemap. Kein Platz. Danach gib einfach einen Schrägstrich. Denken Sie daran, dass Ihr Domainname da sein wird kein Peck Ergebnis Tech-Ergebnis ist nur als Referenz. Wenn Ihr Domainname nur zum Beispiel ist, wie wir sein können, können wir sagen, abc.com. Anstelle des technischen Ergebnisses tippen Sie abc.com.in.me ein, was auch immer es ist. Ihr Domainnamen-Schrägstrich, und geben Sie dann Sitemap als ITE MAP Sitemap ein, alle kleinen Zeichen, kein einziges. Es könnte Kapital oder Ohr sein, Sitemap Dot XML. Das ist alles. Du hast deine Sitemap hier angerufen. Und Sie sagen, scannen Sie diese bestimmte Seite nicht da ich diese bestimmte Seite nicht scannen und diese Seite akzeptieren möchte . Sie können alles auf meiner Website scannen , damit es im Suchergebnis enthalten sein kann . So schnell geht es nicht. Okay, sagen wir mal, wenn Sie Roboter dot robots.txt In Ihrer Website hinzugefügt haben und sofort am nächsten Tag wird es kommen. So ist es nicht. Wann immer das Google-Board Ihre Website crawlt, wird nur diese abgerufen, die Daten, dann werden nur die Daten abgerufen, und dann wird die Website in Ihrem Was aufgeführt sagst du? Ergebnisse von Suchmaschinen. Okay, das ist also eine Sache, und so funktioniert es. Klicken wir hier drüben auf Speichern. Das ist alles, was deine robots.txt fertig ist. Sonst noch was? Gibt es nein, es bleibt nichts übrig. So werden wir unsere SEO robot.txt machen. Wenn Sie mich gefragt haben, was mit Ads dot TXT geht, können Sie, wann immer Sie Werbung auf Ihrer Website schalten möchten , zu Google AdSense gehen und zu diesem Zeitpunkt ein Konto erstellen. Google gibt Ihnen eine Datei mit dem Namen Ads dot TXT. Darin wird es eine Nummer geben, kopieren Sie sie einfach und fügen Sie sie hier und klicken Sie auf Speichern. Das ist alles, was es getan hat. So werden wir es also machen. So haben wir unsere SEOs auf unserer Website gemacht. Und wir haben für diese spezielle Seiten-Geschäftslösung getan , wir können es jederzeit tun. Wie oft. Ich halte es nur leer. Wenn wir die Website hosten, kann ich Ihnen ein paar Dinge darin zeigen, mehr Dinge sind gemeint, wenn wir nichts in SEOs wie private Page ACOs tun , was ist, wenn wir dort nicht tun und was gibt es? Wenn wir einige Änderungen in diesem speziellen SEO-Bereich für private Seiten vorgenommen haben in diesem speziellen SEO-Bereich für private Seiten und wie er angezeigt wird oder wie es eingehen wird, kommt in dieser speziellen Sache. Diese eine Sache ist erledigt und SEOs wie Suchmaschinenoptimierung werden in späteren Videos durchgeführt , z. B. wenn wir die Website hosten, wenn wir die Google Analytics-Tag-Manager und all das sehen werden , dann werden wir sehen, wie genau wir mit den restlichen Dingen anfangen werden . Das ist alles für diesen speziellen Abschnitt, SEO ist erledigt und wenn mir in Zukunft etwas in den Sinn kommt, wie immer, werde ich das neue Video in diesem speziellen Abschnitt hinzufügen das neue Video in . Also danke Leute. Vielen Dank, dass Sie sich dieses Video und diesen Abschnitt angesehen haben. Und wir sehen uns im nächsten Abschnitt. 65. Domain Name und Hosting kaufen: Hallo und willkommen zurück Leute. In diesem speziellen Abschnitt. In diesem Abschnitt werden wir einen dominanten Host, eine Website kaufen und viel aufgeregteres in dieser speziellen Sache tun . Dies ist ein umfassendes praktisches Wissen, in dem Sie auch für Ihren Kunden eine Dominante erhalten können . Und Sie können Ihre Website auf Ihrem echten Server hosten. Und wenn ich mich nicht irre, habe ich Ihnen in den vorherigen Vorträgen gesagt, wo ich Ihnen zeigen werde, wie Sie ein echtes Video wie HTML-Video direkt zum Bootstrap-Studio anhängen oder hinzufügen können. Wir haben gesehen, wie YouTube und Vimeo Video darauf verlinkt sind, aber wir haben nicht gesehen, dass das HTML-Video darauf verlinkt ist, weil wir den Server zu diesem Zeitpunkt nicht hatten . Aber ja, in diesem Abschnitt oder im kommenden Abschnitt werden wir das tun. Was wir tun werden, kaufen wir eine Domain, die Sie hosten. Ich werde nicht kaufen, weil ich bereits ein Hosting habe, aber ja, ich zeige Ihnen, wie genau Sie das Hosting auch kaufen werden . Es gibt also zwei Dinge. Einer ist dominant und einer ist Hosting. Mal sehen. Erstens, was ist Hosting? Hosting ist nichts anderes, als Sie einen Speicherplatz wie einen Festplattenspeicher auf dem Server erhalten. Und Ihre Website wird darauf übertragen , dass Daten von der Website auf diesen Server abgeladen werden. Und auf diesem Server erhalten Sie einen Ordner auf dieser bestimmten Festplatte. Und dieser Ordner wird Ihrem Domainnamen zugeordnet. Und wann immer jemand nach Ihrem Domainnamen gesucht hat, welche Daten sich in diesem Ordner befinden, das sind unsere Website-Dateien, die abgerufen werden und der Benutzer wird die Website sehen. Das ist Hosting. Also verwende ich Hosting, weil es sehr billig ist und die gesamten Server, die sie bereitstellen, sehr schnell sind. Das hat mir sehr gut gefallen. Ich habe bereits ein paar Websites, die im Hosting meiner eigenen und meiner Kunden gehostet werden. Das ist Hosting und mal sehen, Hosting-Sache. Wenn Sie hier zum Hosting gehen, gibt es zwei Arten von Hosting, eigentlich 34 Arten von Hosting andere Sie können sehen, dass dies nur unser Hosting ist, aber ich werde Ihnen die beiden wichtigsten zeigen Hosting, das Sie in der Anfangsebene benötigen. Dies hostet Ihr Webhosting, und dies ist ein Cloud-Hosting. Webhosting ist für kleine und mittlere Unternehmen in denen die Besucher nicht mehr monatlich sind, führen Sie zehntausend, zweihundertfünfundzwanzig, dreißigtausend wie monatlich Besucher, Die Cloud-Basis ist wie mehr Besucher mit mehr Rechenprozessen und vielen Dingen wie Großprojekten überhaupt. Ich zeige dir, was Webhosting ist. Also öffnen wir das in einem neuen Tab und wir werden gehen. Und sobald ich nach unten scrolle, sieht man, dass es drei Pflanzen im Laufe des Jahres gibt, 691492179 Rupien pro Monat. Diese Preisgestaltung gilt jedoch nur, wenn Sie diesen Plan mindestens 48 Monate lang verwenden. Wenn Sie die Anzahl der Monate oder die Anzahl der Jahre senken , steigt der Preis. Und ich werde Ihnen zeigen, dass es, wie wir im 69-Rupie-Plan sehen werden, eine Website mit 30 GB Speicher und 10 Tausend Besuchern pro Monat gibt . In diesem Plan können Sie sehen, dass die Website zunimmt. Sie können bis zu 100-Websites hosten, wenn Sie mehrere Websites haben und Sie nicht immer wieder für diese Server und das Hosting ausgeben möchten . Sie können also diesen Hosting-Plan verwenden , bei dem Sie eine 100-Website hosten können. Ich habe diese Pflanze nur genommen , was Premium ist, wo ich vorhabe, eine Website zu hosten, um meine mehreren Websites zu hosten. Für mehrere Websites können Sie mehrere Websites hosten, aber Sie müssen ständig Domain kaufen , wenn Sie eine neue Website Sie erhalten 100 GB SSD-Speicher in 25 Tausend monatliche Besucher. Und diese 25 Tausend monatlichen Besucher, E, ist für alle Websites, die Sie in dieser speziellen Anlage gehostet haben. Es ist nicht für eine Website, es ist alles für alle Websites. Kostenlose E-Mails. Sie können auch kostenlose E-Mails erstellen. Aber ja, in diesem speziellen Kurs und in dieser speziellen Serie werden wir sehen, wie wir unsere Domain auf die offiziellen E-Mails des Zoos anhängen oder zuordnen oder wie unsere Domain auf die offiziellen E-Mails des Zoos verweisen können. Und ich werde Ihnen auch geben, was der Vorteil und die Nachteile ist , es auf Zoho, dann SSL und all die Dinge, die wir bekommen werden , wie unbegrenzte Bandbreite, die Null. Wenn wir jetzt zum Cloud-Hosting gehen, gehe ich einfach und erstelle einen Klick auf den neuen Tab. Wenn Sie jetzt zum Cloud-Hosting gehen, ist der Startplan 700 Tausend Rupien pro Monat. Sie können sehen, dass der oberste Plan 79 Rupien pro Monat beträgt. Hier sind es 700 Tausend pro Monat, aber der Start kommt mit 200 GB SSD-Speicher, drei GB RAM, um zwei CPU-Kern zu sehen. Dann gibt es kostenlose E-Mails und SSL Cloudflare Integrationen, und dann sind alle anderen Dinge auch da. Dieser Plan können Sie verwenden, wenn die Website ziemlich groß ist und Sie können, wenn Sie feststellen, dass die Website mehr Verkehrscode hat, okay, also das ist der Plan. Was wir also tun werden, klicken wir ab sofort auf In den Einkaufswagen. Aber wenn wir einen Checkout für diesen Typ machen, werde ich ihn entfernen, weil ich nur zeigen wollte , wie genau wir das Hosting kaufen werden . Steht das in diesem Plan? Nehmen wir an, dies ist ein einziger Website-Plan. Sie können hier einfach auf In den Einkaufswagen hinzufügen klicken und Sie zum Warenkorbbereich weiterleiten. Bevor Sie nun in den Kartenbereich gehen, erfahren Sie, welchen Plan Sie kaufen müssen 1600 Rupien pro Monat 448 Monate betragen. Und wenn Sie mit einem Ein-Monatsplan oder einem 12-Monatsplan gehen , werden Sie das bezahlen, wenn ich auf den Erwärmenden Planeten klicke , ist so viel 349. Und wenn du mit 12 Monaten gehst, ist Planet so viel 1668. Nach Steuern wird es zu diesem Betrag kommen , der 1.2400968 Rupien entspricht. Okay, hier ist der Hosting-Plan da. Und sobald das erledigt ist, werden wir uns für eine echte Sache entscheiden, die unsere Domain ist. Lass uns für die Dominante gehen. Und ich klicke hier drüben auf diesen Domainnamen. Und ich klicke auf diesen Domain-Checker. Und ich klicke auf den Domain-Checker. Hier drüben gibt es mehrere Erweiterungen und alle sind da. Also dotnet.n.com online und alles, was wir in diesem speziellen Video tun werden , da wir die Domain kaufen, nur Ihnen einen Demo-Zweck oder einen Tutorial-Zweck zu zeigen. Ich werde eine Domain kaufen, die sehr billig ist, das sind 75 Rupien und so ähnlich. Wie man zuerst eine Domain kauft, gibt es einen Namen in Ihrem Kopf, wie ich diesen speziellen Namen meiner Website möchte. Also diesen Namen musst du hier suchen. Also gebe ich hier meinen Namen ein, der aktuell ist, Schlüssel SIND AKTUELL, und ich klicke einfach auf Suche. Sobald eine Suche abgeschlossen ist, können Sie sehen, dass der aktuelle Punkt übernommen wurde. Und das fordert mich auf, das zu überprüfen, weil ich schon oft gesucht habe. Was ist das? Bitte benutzen Sie das E-Mail-Boot. Okay. Das ist ein Boot. Das ist ein Boot. Und der zweite, das ist ein Board. Dieses Board, das ist was, das ist es, was das Holz ist und verifiziert. Diese Domain ist bereits übernommen. Es zeigt es mir. Stattdessen scrolle ich einfach nach unten und sehe, welche Domain genommen werden kann. Aktueller Strich-Online-Knoten. Wir werden mit dem gehen. Lassen Sie uns sehen, dass es verfügbar ist oder nicht globale aktuelle Punktseite. Und ich klicke einfach auf In den Einkaufswagen, die globale aktuelle Punktseite ist. Und es überprüft die Verfügbarkeit und ja, wir haben das überprüft und dies ist verfügbar. Was wir jetzt tun werden, klicken wir einfach auf Weiter zu schneiden. Sobald ich auf Weiter klicke, weiter in den Warenkorb, es zeigt mir diesen Betrag an und warum dieser größere Betrag jetzt angezeigt wird, da ich hier zwei Jahre gewählt habe, muss ich mit dem ersten gehen . Ich klicke einfach darauf. Es gibt 75 Rupien pro Jahr. Jetzt erzählt es mir 104 Rupien, 0,31 Pesaro, wie in indischer Währung heißt es nur wie 104,31. Okay, der nächste Schritt ist, dass es mir zeigt, dass mich bitte, die Hosting-Pläne anzunehmen. Sie können also auch den Plan auswählen , der die 68 Rupien, 69 Rupien für 12 Monate oder einen Monat darstellt, was auch immer es ist. Und siehe hier ist es noch eine Sache wie persönliche Informationen meiner Domain bei Wiederholungen zu verstecken , 99 pro Jahr zu machen. Was bedeutet, dass wenn Sie dies nur überprüfen, weitere 29 bis 1900 Rupien hinzugefügt werden. Dies verbirgt Ihre persönlichen Daten oder was passiert, wenn Sie auschecken und wenn Sie diese kaufen? Wer diese Dominante beißt, ist auch dein Name für E-Mail oder irgendwann Telefonnummer, er ist öffentlich verfügbar. Und die Unternehmen, die Dienstleistungen erbringen, die sie möglicherweise anrufen, waren nicht zwei Tage. Wenn Sie das nicht an 99 zahlen möchten, können Sie einfach damit gehen und Sie können den Schmerz für zwei oder zwei bis drei Tage spüren . Danach rufen sie dich nicht mehr an. Keine große Sache. Klicken Sie einfach auf Checkout über Jahr. In der Kasse werde ich aufgefordert, mich anzumelden und dann melde ich mich mit meinem Google-Konto an. Diese Zahlungsoption, die ich vor mir habe, wähle ich eine UPI-Option aus. In meinem Land. Die UPA-Option ist in Ihrem Land vorhanden, PayPal oder vielleicht wird irgendetwas beliebt sein, sodass Sie Ihre vertrauenswürdige Zahlungsmethode im Laufe des Jahres verwenden können Ihre vertrauenswürdige Zahlungsmethode im Laufe , in dem es mir zeigt, dass 104 Rupien da sind. Fahren Sie also mit dem UPI fort, meiner Website, die Zahlung ist abgeschlossen und jetzt können Sie sehen, dass Ihre Zahlung erfolgreich ist. Bitte mach nichts. Du leitest um. Wir leiten irgendwohin um und wohin wir gebracht werden. Jetzt ist es Ihre Domain fertiggestellt und das ist es, was Sie auch bekommen. Dies sind die Adligen , die wir genommen haben, die globale aktuelle Punktseite sind. Und ich werde nur sehen, in welchem Land Sie sich in Indien befinden. Es wird also einfach Indien hier drüben eingeben, weil ich Indien hier ausgewählt habe und nur dieses persönliche auswählen werde und es einfach auf Nächstes Setup klicke. Dies fragt nach ein paar Details hier drüben. Also gebe ich nur ein paar Details wie Status und andere Dinge ein, PIN-Code, ich gebe eine Telefonnummer ein, die ich eingeben werde. Und ich klicke einfach auf Registrierung beenden. Die Adresse sollte nicht zu lang sein. Hier sind keine Kommas erlaubt , wo Sie fast fertig sind , und klicken Sie dann auf Weiter. Es wird eine E-Mail geben. Also muss ich nur meine E-Mail überprüfen, also gehe ich jetzt einfach zu meiner E-Mail-Adresse , also Gmail. Wenn Sie keine E-Mail für die Überprüfung erhalten haben, können Sie einfach auf die letzte E-Mail zur Überprüfung der E-Mail klicken und diese E-Mail befindet sich in Ihrem Posteingang. Dies ist der Link zur E-Mail-Überprüfung und ich muss auf diesen Link klicken. Und sobald ich auf diesen Link klicke , bringe ich noch einmal zum Hosting oder zur Seite. Und dieses Mal sollte es so aussehen, ja, die E-Mail war zur Zeit sehr erfolgreich q. Und wir können das schließen. Wir können auf diese Seite zurückkehren und hier einfach auf Aktualisieren klicken. Vielleicht können Sie F5 drücken , um die Seite zu aktualisieren. Das ist alles. Die Domain wurde erfolgreich überprüft und unsere Domain ist die globale aktuelle Punkt-Site. In diesem speziellen Video haben wir die Dominanz erfolgreich erworben. Und im nächsten Video werden wir sehen, wie wir unsere Dominante mit unserem Hosting-Konto verknüpfen können. Wir sehen uns im nächsten Video, Leute. 66. Domain zu Hosting Server: Willkommen zurück Leute. In diesem Video und in diesem Video werden wir sehen , wie wir unseren Domainnamen auf den Hosting-Server verweisen werden . Was wir hier tun werden, ist, dass wir auf das Hosting klicken oder Ihr Ich habe bereits wenige Konten gehostet. Ich mache es verschwommen. Nur für einige kann man sehen, dass es Sicherheitsgründe gibt. Dies ist mein Premium-Server-Hosting. Und Sie werden einen Button wie diesen namens Website hinzufügen finden. Klicken Sie also einfach auf den Button für die Anzeigenwebsite. Und dann musst du den Namen eingeben. Mal sehen, wie lautet der Name der Domain. Es ist wie globale Strömung oder so ähnlich. Wenn ich mich nicht irre. Und ich sehe, dass das so passiert, wenn du eine Domain nimmst und einfach irgendeine Domain nimmst. Das ist also die Domäne. Ich füge nur diesen Domainnamen hier ein. Ich kopiere einfach diesen Namen. Ich füge den Namen hier ein und gebe ein Passwort ein. Also lasst uns das magische Passwort da drüben setzen. Irgendwas. Ich verwische das auch nur und klicke auf Website hinzufügen. ich auf Website-Jahr hinzufügen klicke , werden Sie feststellen, dass meine Website jetzt aufgeführt ist, ich werde nur alle Websites übernehmen, also sind wir hier und dies ist meine Website. Du bist, meine Website ist da. Und dann klicke ich auf Website verwalten. Sobald ich auf Website verwalten klicke, öffnet sich dieses Panel, dann ist dies der Name meiner Website und das ist alles, was wir brauchen. Sehen wir uns nun an, ob wir zu dieser URL namens Global current dot site gehen . Und ich verwende einfach diese URL hier drüben. Wir klicken auf Enter. Es heißt, dass nicht gesichert ist und es zeigt, dass Ihr Konto erstellt wurde. Dies ist die Domain und das ist es, was sie ist. Was wir jetzt tun müssen, ist, dass wir unsere Dominante mit dem Server verbunden haben. Jetzt zeigen sie. Jetzt werden wir die Dateien auf den Server hochladen. Danach werden wir unsere Website zum Leben erwecken und das werden wir im nächsten Video sehen. Wir sehen uns im nächsten Video, Leute. 67. Wie man Website hostet: Bevor wir fortfahren, müssen wir unsere Website exportieren, bevor wir unsere Website auf den Server hochladen . Dies ist unsere Website namens Tech-Ergebnis. Und jetzt exportieren wir diese Website. Wie werden wir das also exportieren? Wir werden die Tech Resolve Website in unserem Bootstrap-Studio öffnen Website in unserem Bootstrap-Studio und dann zum Export gehen. Und davor klicken wir einfach auf diesen Pfeil hier drüben. Ich klicke auf Exporteinstellungen. Dies sind die Exporteinstellungen und wir müssen auch hier einige Änderungen vornehmen . Zuvor müssen wir sagen, wo genau wir diese Datei exportieren möchten. Also klicke ich auf „Durchsuchen“. Und wir gehen einfach zu diesem BSS. Ich werde gehen, um das Problem zu lösen, und ich werde hier einen weiteren Ordner erstellen, und ich nenne ihn als 6.5. Unter Scroll-Export. Wir werden wissen, dass in dieser speziellen Datei alle unsere Dateien tatsächlich in diesen bestimmten Ordner exportiert werden . Es wird also einfach diesen Ordner auswählen. Es bedeutet, dass ich einfach auf diesen Ordner klicke und auf Ordner auswählen klicke. Und hier ist der Weg da. Und jetzt müssen wir hier etwas ändern, leichte Änderungen hier sind das erste, was wie unbenutzte Bilder überspringen. Wir müssen auf diesen Link klicken und diese Option aktivieren. Was es bedeutet, dass er war, vielleicht haben wir viele Bilder importiert. Sagen wir, wir zählen. Nehmen wir zum Beispiel an, wir haben 20 Bilder in unser Projekt in dieses Deckergebnis importiert . Und von den 20 benutzen wir nur zehn. Beim Exportieren. Exportiere einfach nur das Bild , das in diesem Projekt verwendet wird. Die Bilder, die nicht verwendet, sondern nur in das Projekt importiert werden. Wir möchten nicht, dass diese Bilder exportiert werden. Von 20 exportieren wir es nur zehn Bilder, die in diesem Projekt verwendet werden und zehn, die nicht verwendet werden. Es wird es überspringen. Aus diesem Grund sinkt die Größe unserer Website und Größe, unsere Größe dieses bestimmten Bildordners unsere Größe dieses bestimmten Bildordners, wenn wir die nicht verwendeten Bilder nicht exportieren. Okay, und exportieren Sie Labels, wir schalten diese Option ebenfalls ein. Labels sind wie wenn wir die Labels verwenden, ich zeige Ihnen, was genau die Etiketten sind , damit Labels exportiert werden und die URL hier angezeigt wird. Also lass uns sehen. Dies ist die URL und sagt, dass HTTPS Schrägstrich des HTTP-Doppelpunkts fehlt. Dies ist die Website-URL. Ich lege diese URL hier drüben ein. Dann klicke ich einfach auf Speichern. Was beschriftet ist, ist, als ob Sie wie ein Hashtag-Modell sehen können , und dann die Fußzeile dunkel. Dies sind die Labels wir auch mit den Labels verwenden. Bevor wir exportieren, sparen wir dieses Projekt noch einmal. Das Projekt wird gespeichert und dann klicke ich auf diese Schaltfläche Exportieren. Hier sehen Sie wie das Exportieren von Daten und Ihr Website-Design wurde exportiert und es wird darauf klicken. Und jetzt können Sie sehen, dass der Export ihre Sitemap ist. Wir haben die Sitemap, die Sitemap und das Schema über ein Jahr eingeschaltet . Dieser Manifestpunkt JSON ist da als in unserem Assets-Ordner. Wir können sehen, dass der Bootstrap bedeutet, dass CSS da ist, dann sind CSS-Ordner da. Dies ist unsere Nummer und all ihre Sachen und Formen, welche Formulare wir in Foren verwendet haben , werden hier exportiert. Die Bilder, die wir in der Ordnerstruktur verwendet haben. Alle Bilder sind hier und die JavaScripts sind hier. Und draußen können wir diese index.html sehen. Dies ist die Hauptseite, dies ist die Haupt-Zielseite. Und dann werden wir sehen all diese anderen Seiten auch da sind. Gehen wir jetzt zu unserem Server und importieren wir das alles auf einmal. Ich nehme nur dieses Fenster aus dem Bildschirm. Und lass uns gehen. Lass uns gehen, lass uns in unseren Hosting-Bereich kommen und wir scrollen nach unten. Und es gibt zwei Möglichkeiten wie in Dateien. Einer ist der Dateimanager Beta und einer ist der Dateimanager. Das ist also keine Beta-Version, vielleicht eine. Sie sehen, dass es vielleicht Beta gibt, die heutzutage nicht auf der Produktionsstufe vorhanden ist. Also klicke ich auf diesen Dateimanager Beta und hier öffnet sich ein weiteres Fenster. Und dies ist der Hauptordner, öffentliche Unterstrich-HTML ist. Welche Dateien wir auch haben, wir werden diese Dateien nur in diesen Ordner hochladen . Ich doppelklicke auf diesen Ordner. Und dann haben wir standardmäßig , wenn Sie es zum ersten Mal tun diesen Standard-Punkt-PHP-Ordner, wenn Sie es zum ersten Mal tun. Das ist es, was wir hier C wählen, die Standard - oder Standardseite ist, die Sie wie Standard-Punkt PHP sehen, die funktioniert. Okay, also was wir tun werden, klicken wir hier einfach auf Hochladen. Ich klicke auf den Ordner. Sobald ich auf den Ordner klicke, sehe ich, dass dieser Ordner vorhanden ist, das ist ein technischer Ergebnis-Export und ich gehe einen Schritt zurück und wähle diesen Ordner, den gesamten Ordner aus und klicke auf Hochladen. Ich klicke hier nicht einfach auf Hochladen. Dieser Ordner wird jetzt hochgeladen. Was auch immer in diesem Ordner ist, ich muss alles verschieben und in diesen öffentlichen Unterstrich-HTML-Ordner ablegen . Also doppelklicken wir darauf. Es wird alles mit Control a auswählen. Und ich klicke einfach auf Verschieben hier rüber, diese Schaltfläche „Datei verschieben“ ist da, Datei verschieben. Es gibt zwei Punkte. Diese beiden Punkte bekommst du auch. Ich doppelklicke einfach auf diese beiden Punkte und bewege mich. Das ist, dass alle unsere Dateien vollständig nicht mehr sind, aus Exportordner heraus sind und wir brauchen diesen nicht, also werden wir dieses Jahr löschen wir gehen jetzt unsere Website wird gehostet und wenn Sie hierher kommen und einfach aktualisieren das, da gehen wir hin, unsere Website wird gehostet. Jetzt. Jeder kommt zu dieser bestimmten URL , die globale aktuelle Punktseite ist. Diese Website wird da sein. Diese Domain ist nur ein Jahr lang. Diese Domain läuft am 19. April 2023 aus. Wenn Sie sich dieses Video danach ansehen, erhalten Sie vielleicht keinen Zugriff auf diese Website da ich diese Domain nur für ein Jahr aufgenommen habe. So funktioniert es. Also haben wir das nicht gesichert, wir müssen das auch beheben, aber wir werden das beheben. Nicht gesichert, in den späteren Videos gesichert. In diesem Video haben wir gesehen, wie wir unsere Website auf einem echten Server exportieren und hosten. Und das hat Leute gelöst, das ist alles für dieses Video und das ist alles für diesen Abschnitt. Wir haben unsere Website erfolgreich auf dem realen Server gehostet . Auf diese Weise können Sie eine Anzahl von Websites hosten , indem Sie eine Dominante kaufen. Und wenn Sie alles ändern möchten , können Sie einfach alles auswählen, löschen und die gesamten Dateien erneut hochladen. So werden wir unsere Website hosten und haben es geschafft. Das ist also alles für diesen Abschnitt. Und wir sehen uns im nächsten Abschnitt, Leute. Ich bin auch sehr gespannt und froh , dass wir unsere erste Website erfolgreich auf dem realen Server gehostet haben . Leute, das ist alles für dieses Video und wir sehen uns im nächsten Abschnitt. 68. Einführung in Zoho Email: Willkommen zurück Leute. In diesem neuen Abschnitt, wo wir über XO erfahren, wer sendet eine E-Mail? Xo Who email ist ein professioneller E-Mail-Dienstleister, der nicht nur E-Mails anbietet, sondern gibt es so viele andere Produkte und Dienstleistungen, die Xu anbietet, wir werden einfach sehr schnell sehen wie alle Dienstleistungen x2 im Finanzwesen bieten. Sie bieten wie Bücher oder CRM Zoho Bücher an, in denen wir alle Buchhaltungsspuren und X2-Personen für HR, Unternehmen, E-Mails wie Männer und dann Projektmanagementsystem für Projekte behalten können und X2-Personen für HR, Unternehmen, E-Mails wie Männer . Dann befindet sich Assistant Meeting CLI IQ im Chat-System der Organisation. Das ist wie wieder, es ist kostenlos, dann CRM, dann Finanzen, dann sehen Sie, Sie können sehen wie Vertrieb und Marketing und dann Service als E-Mails. Und sie haben wie Rechtshänder. Arbeitsblatt ist wie Excel-Folie wie eine PowerPoint dann ist Docs wie Dr. CLA, IQ-Voice. Sehen Sie sich alle Funktionen an, alle Dienste, die auf dieser speziellen Plattform vorhanden sind . Nur wenige von ihnen sind kostenlos und nur wenige von ihnen werden bezahlt. Keine Ansicht. Es bedeutet, dass sie wie wenige von ihnen frei sind. Und so viel wie alles wird bezahlt. Aber darin finden Sie auch hier und es gibt einige kostenlose Dienste, für eine bestimmte Anzahl von Benutzern kostenlos angeboten werden. Diese Rechnungen sind zum Beispiel völlig kostenlos. Und wenn wir mit Like-E-Mails bis zu fünf Benutzern arbeiten, ist es völlig kostenlos. Jetzt werden wir sehen, wie wir unseren Domainnamen auf die E-Mail xo-E-Mail verweisen werden . Warum wollen wir die E-Mail verwenden? Wir haben Ihre E-Mail gehostet wenn Sie Ihre Domain von GoDaddy entnommen haben, haben wir auch GoDaddy-E-Mails. Der Grund dafür ist , dass ich Zu persönlich benutze, der jetzt länger eine E-Mail gesendet hat, aber vorher habe ich GoDaddy und Hosting oder E-Mail benutzt. Das Hauptproblem hier drüben ist GoDaddy und das Hosting von ihr und allen anderen Dienstleistern, wie alle anderen Dienstanbieter, E-Mail-Dashboard bereitstellen, aber sie haben kein Handy anwendung. Und es gibt den Speicher und all das, was in den Servern, im Host enthalten ist, Dinge, die wir in x2 aufgenommen haben. Was hier passiert ist, dass es die professionelle Art des Mailings ist . Es ist so gut wie sehr professionell, sehr gut gebautes E-Mail- und E-Mail-System. Und Sie erhalten auch die Android- und iOS-Anwendung, die Windows-Anwendung und alle anderen Dinge gibt es, Websupport ist da. Und Sie können die Schnittstelle dieses bestimmten Zu Who sehen , wer mailt. Wo Sie sehen können, dass hauptsächlich der Kalender ist, ist, dass Sie Ihre Buchungen darüber vornehmen können, die Buchungen Erinnerungen, dann haben Sie Notizen über ein Jahr. Dann können Sie auch eine Aufgabenoption haben, dann Kontakte und Lesezeichen und alles, was auch immer Sie brauchen, einfach in Zoo-E-Mail verfügbar. Wenn Sie also im Preisbereich sehen, also Aufstände, ja, definitiv gibt es Aufstände. Aber wenn Ihre Organisation nicht so groß ist und bis zu fünf Benutzer, wenn Sie es nutzen möchten, haben wir für immer einen kostenlosen Plan. Verwenden Sie bis zu fünf Benutzer, fünf GB pro Benutzer 25 MB Anlagenlimit. Und Webex sagt und mobiler Zugriff und all die anderen Dinge wie Aber du hast, aber du solltest deine Domain-E-Mail für eine einzelne Domain gehostet haben . Wir werden es in diesem speziellen Bereich tun. Wir haben unseren Domainnamen bei uns, der globale aktuelle Punkt-Site mit diesem Domainnamen ist globale aktuelle Punkt-Site , das werden wir tun. Lassen Sie uns dominieren. Und klicken wir auf diese Domain. Ja, wir werden hier warten und wir werden mit unserer Zoo-E-Mail fortfahren und wir werden anfangen unser Konto in Zoo-E-Mail zu erstellen , also h2 und dann werden wir mit Zoe-E-Mails fortfahren Beitrag und das werden wir in unserem nächsten Video sehen. 69. Hinzufügen von Email in DNS: Okay, also werden wir anfangen unseren CSA zu konfigurieren, der eine E-Mail mit unserer Domain gesendet hat. Also klicke ich einfach auf Jetzt ausprobieren, Jahr wir gehen, wir haben das. Wir, ich bin mit meinem Yahoo-Konto angemeldet, also wird es auch einen Überprüfungsprozess geben, ich denke nein, die Überprüfung ist bereits abgeschlossen. Sie müssen bei Bedarf auch den Überprüfungsprozess durchführen sonst gelangen Sie zu dieser bestimmten Seite. Dann klicke ich einfach auf den Bauch. Und das ist unsere Domain im Laufe des Jahres, also wird sie einfach diese Domain kopieren. Und ich füge das Domain-Jahr ein. Und da sind wir los. Und diese Organisation, wie geben Sie Ihren Organisationsnamen an. Also werde ich einfach als globale Strömung eingeben, vielleicht deinen Organisationsnamen und dann als Industrie. Ich werde es einfach als Bildung ausdrücken. Bildung wird gut sein. Ich klicke einfach auf Hinzufügen. Dann gratulieren Sie dazu, diese Domain wurde erfolgreich hinzugefügt und fahren Sie mit der Domain-Verifizierung fort. Jetzt ist das wichtig und seien Sie dabei sehr vorsichtig. Das erste, was wir tun müssen, ist die Domain zu überprüfen. Bei der Überprüfung der Domain haben wir drei verschiedene Schritte. Der erste wird empfohlen, das heißt TXT-Datensatz im DNS hinzufügen. Dns steht für Domänennamensystem oder Domänennamenserver. Und dann besteht die zweite Möglichkeit darin, einen CNAME-Datensatz in DNS hinzuzufügen. Und die vierte Option ist das Hochladen einer HTML-Datei auf der Website. Also fangen wir mit dem ersten an. Normalerweise dauert die Domain-Verifizierung nicht länger. Wenn der TXT nicht funktioniert, gehen wir mit dem, was sagst du? Das hier. Aber was ich machen werde wenn es überprüft wurde, dann kann ich dir das nicht zeigen. Also klicke ich einfach auf diese eine HTML-Datei. Und was müssen Sie tun, ist die HTML-Datei, nur wenn Sie auf diese Zu klicken, die Zoho dot HTML überprüft, wird diese eine Datei hier heruntergeladen. Was müssen Sie tun, ist, dass Sie zu Ihrem Server gehen, dieser öffentliche Unterstrich-HTML-Ordner wird da sein, oder? Also zeige ich dir das auch. Wir gehen dort zum Hosting. Das Hosting. Wir werden zu unserer Domain gehen, die dieses ein Jahr in diesem Dateimanager ist. Ja, in diesem öffentlichen Unterstrich-HTML-Ordner müssen Sie sehen, dies ist der Link, auf den es gehen wird, um zu überprüfen, dass es sich um globale Punkt-aktuelle Site handelt, globaler aktueller DOT-Seitenstrich, dann ist es wie Zoho. Verifizieren. Sie müssen einen Ordner mit dem Namen Zoho erstellen , um zu überprüfen, wie genau wir in diesem Jahr machen werden, nur für den Fall, dass Sie gut sind und unsere Domain per HTML-Datei überprüfen, klicken Sie einfach auf einen neuen Ordner hier. Und wir werden es als Zoho nennen. Zoho überprüfen. Und wir erstellen diesen Ordner. Jetzt befinden wir uns in diesem Zoho Verifizierungsordner und der Datei, die wir heruntergeladen haben. Ich öffne einfach in diesem Jahr, in dem wir gehen. Ich ziehe diese Datei einfach per Drag & Drop hier rüber. Und nur aus irgendeinem Grund, warum es umbenannt wurde, muss ich es einfach als verifizieren für x2-Punkt-HTML umbenennen und es wird es einfach umbenennen. Wenn Sie diese Datei öffnen, sehen Sie, dass eine Nummer vorhanden ist. Und auf diese Weise können Sie die Domain überprüfen. Und wenn Sie einfach über ein Jahr auf diesen Link klicken , wird es dauern, es wird nur diese Nummer angezeigt. Sobald dies erledigt ist, können Sie auf HTML-Datei überprüfen klicken und Ihre Domain wird überprüft. Und ich zeige Ihnen noch eine Sache, wie genau wir mit der TXT-Domain-Verifizierung vorgehen werden . Dafür werden wir dieses schließen und wir werden zu unserer Domain-Sache kommen. Und hier finden wir wie DNS-Nameserver. Jeder Domainname hat einen anderen Satz von Anweisungen. Sie müssen also finden , wo Sie das DNS-System ändern werden. Und wir klicken einfach auf diesen DNS vorbei. Du gehst zurück zu diesem Zoho. Und jetzt müssen Sie zuerst sehen, dass dies ein TXT-Datensatz ist , und dies ist der Wert in verschiedenen Domänen Service, den sie anders genannt haben, Wert 0,2 oder Zieljahr. Was wir tun müssen, ist unser verwalteter DNS-Datensatz. Und als erstes, was wir tun müssen, müssen wir zum TXT Record gehen , bevor wir sehen müssen, was eigentlich die Überprüfung ist. Ich gebe einfach Verify hier drüben ein. Nichts ist da. Okay. Ich klicke einfach auf diesen Kopier-Button hier drüben. Ich klicke einfach auf den Button Kopieren. Und der Name wird in der Rate sein nur der Textwert wird derjenige sein, den wir gerade kopiert haben. Und ich füge es hier ein. Und TTL wird derselbe sein. Und ich klicke einfach auf Datensatz hinzufügen. Sobald ich auf Datensatz hinzufügen klicke, komme ich zurück und klicke einfach auf TXT-Datensatz überprüfen. Dort können Sie sehen, dass der TXT-Datensatz erfolgreich überprüft wurde. Okay, also werden wir das so machen. Und bevor wir vorankommen, werden wir Jahr wiederkommen. Ich suche nach MX Jahr. Sie können MX eingeben und nach MX Year suchen. Sie werden mx Two Dot Hosting oder Dot in und mx1 Dot Hosting oder gepunktet finden. Wir müssen beide löschen. Ich lösche diesen, Amex und ich lösche diesen MX zweiten. Und dann kann ich DKIM tippen und wir müssen sehen, ob es dort Zerfalls-MS gibt, lass es sein. Und dann muss ich SPF eingeben, das ist der SPF-Datensatz, um sie zu hosten, den ich löschen muss. Spf-Datensatz, den ich gelöscht habe. Okay. Also MX einen SPF-Datensatz müssen wir löschen und jetzt kommen wir diese E-Mail hierher. Jetzt fragt es nach der E-Mail-Adresse, die die Admin-Level-Kontrolle sein wird . Sie können Ihren Namen angeben oder angeben der Administrator auch Ihnen gehört. Ich werde meinen Namen einfach auf die globale aktuelle Punktseite und er klickt einfach auf Erstellen. Diese E-Mail-Adresse fungiert als E-Mail-Adresse auf Adminebene, mit der ich Benutzer erstellen kann und das Passwort für sie ändern kann oder ich kann alle Dinge des Benutzers löschen. Sie können dieses Symbol mit dem Super-Admin-Level sehen , das sie vor einer Woche angezeigt werden. Ja. Zuletzt einloggen mit dieser E-Mail-Adresse, die aktuell aktuell ist yahoo.com. Das habe ich vor einer Woche gemacht, also zeigt es mich vor einer Woche. Fahren Sie also mit der Gruppeneinrichtung und es gibt keine Gruppen eingerichtet, daher werden wir jetzt mit dem DNS-Mapping fortfahren. Jetzt ist das so es da sein sollte oder Ihre E-Mail nicht sein wird, wird nicht zum Zoho One ausgelöst , drei Schritte sind da, einer ist MX als SPF und DKIM MX und SPF, was das alte war eins. Wir haben gelöscht, dass wir jetzt das neue hinzufügen müssen. also zu unseren DNS-Datensätzen zurückkomme, werde ich zu diesem verwalteten DNS-Datensatz kommen und nach MX-Datensatz suchen , der der zweite ist. Ich werde Jahr wiederkommen, wobei der Kurs gleich bleibt und ich werde diesen MX-Punkt x2 Punkt kopieren. Und ich füge das in den E-Mail-Server-Bereich und wir klicken einfach auf Aufgenommene hinzufügen. Der erste MX-Datensatz wurde hinzugefügt. gleiche Weise werde ich dies für diesen tun, aber die Priorität wird sich von zehn auf 20 ändern. Jetzt nehme ich mir noch ein Jahr und füge es einfach hier ein und die Priorität wird 20 sein. Ich klicke einfach auf Datensatz hinzufügen. Und der zweite Add MX Record wurde hinzugefügt. Jetzt ist der dritte MX, drei Punkte, Zoho Punkt in und die Priorität ist 50. Wir kommen wieder her. Die Adresse bleibt gleich, oh tut mir leid. Mx zuerst, dann addiert, der Kurs bleibt gleich und wir fügen dies ein und die Priorität wird 50. Und ich klicke auf Datensatz hinzufügen. Dieser Datensatz wurde erfolgreich hinzugefügt. Dann müssen wir mit SPF gehen, was wieder ein TXT-Datensatz mit der Rate ist und den SPF-Wert anzeigen kann. Wir klicken einfach auf SPF-Wert anzeigen. Und es zeigt, dass sich mehrere SPF-Datensätze gebildet haben. Also ist es, dieser ist das Hosting eines. Und das wollen wir nicht, also klicken wir einfach auf diesen , dass SPF diesen enthält, den ersten, ich werde das kopieren. Und bevor ich diesen Datensatz hinzufüge, suche ich erneut nach einem SPF-Datensatz. Gibt es durch Zufallsknoten kein SPF-Datensatz. Im Textdatensatz werde ich benennen, Name wird mit dem Tempo angegeben und dieser Wert wird angegeben , den wir kopiert haben, und ich klicke auf Datensatz hinzufügen. Okay, fair genug. Ich klicke einfach auf Okay. Und der letzte ist DKIM-Rekord. Wieder ist es ein TXT-Rekord. Und jetzt haben wir den Hostwert, anstatt die ID hinzuzufügen, einen bestimmten Wert , den wir dort angeben müssen. Also kopieren wir das hier. Ich komme hierher zurück und wir wählen den Textdatensatz aus. Der Name wird jetzt dieser sein, Zed Mail Dot unterverkaufter Domainschlüssel und so ähnlich. Und der Wert wird dies sein. Es wird diesen kopieren. Komm her und füge diesen Wert hier ein und klicke auf Datensatz hinzufügen. Jetzt haben wir alle Datensätze hinzugefügt. Und sobald wir langsam und schrittweise auf Alle Datensätze überprüfen klicken , beginnt es dort, wo Sie den Datensatz finden. übliche Zeit beträgt 30 Minuten , um den Datensatz zu überprüfen. Oder vielleicht kann es einen vollständigen Tag dauern, je nach den Bedingungen 24 Stunden beträgt. Also klicken wir auf Alle bestätigen alle Datensätze. Mal sehen, welche alle Datensätze überprüft werden. Und wir können sehen, dass es hier eine Botschaft gibt , in der TTL steht. Abhängig von der TTL kann es einige Zeit dauern. Und wir können sehen, dass der DKIM-Datensatz erfolgreich überprüft wurde und der MX- und SPF-Datensatz noch aussteht. Sie können sehen, dass es immer noch zeigt, dass dieses Hosting oder Zeigen vorhanden ist. Wir werden nach 30 Minuten noch einmal prüfen, und dann werden wir sehen, ob es abgebildet ist oder nicht. Sobald dies erledigt ist, können wir während der E-Mail-Migration vorankommen, aber wir haben nichts für Migrate. Also werden wir weiter auf das Handy gehen. Und es bittet mich, die E-Mails und alles herunterzuladen und dann die Fertigstellung zu überschreiten. Jetzt gibt es zwei Möglichkeiten. Einer ist, überprüfe deinen Posteingang und gehe zum Admin. Also klicke ich einfach darauf, gehe zum Admin. Jetzt können Sie sehen, wie der Administrator in Zoho CRM aussieht, Zoho männlich. Diese globale Strömung ist da und der Site-Name ist da. Die E-Mail-Adresse der Admin-Ebene ist da. Und dann haben wir den Plan wie Free Plan, gibt es für immer? Kostenloses Abo. Wie viele Lizenzen wir haben, das sind fünf Lizenzen, die wir haben, und wir haben so oft eine Domain oder wie viele Benutzer wir in unserem System haben, ist nur eine. Tut mir leid, ich klicke einfach auf zurück. Wir klicken auf Dashboard und die Anzahl der erstellten Gruppen , also 0, dann auf den E-Mail-Verkehr und all die Dinge, die Sie im Jahr sehen können. Dann kannst du deine Logos und alles ändern. Klicken Sie hier drüben auf Bearbeiten. Dann können Sie von hier aus das Logo Ihres Unternehmens ändern. Und mal sehen, ob ich stöbern gehe. Und E, Gibt es ein Logo oder so etwas? Sagen wir zum Beispiel, wenn ich dieses als Logo nehme, ich das hoch. Ich verwende nur ein beliebiges zufälliges Logo. Vielleicht ist dies auch ein Logo eines Unternehmens. Da bin ich mir nicht sicher. Sobald das hochgeladen wurde, können wir jetzt sehen , erinnern Sie sich einfach an dieses Logo , das wir hier verwendet haben. Das Logo wurde erfolgreich aktualisiert und nur Fall, dass dieses Ladebild noch läuft, geht es weiter. Was Sie also tun können, ist, dass Sie die Seite einfach aktualisieren können. Manchmal gibt es einige Probleme. Und dann haben wir eine Domain , die besagt, dass MX Record noch nicht darauf hingewiesen wird, dann ist es okay. Wir können es auch später machen. Benutzer sind, dass Sie die Benutzer hinzufügen können. Lassen Sie uns sagen, wenn ich auf Benutzer hinzufügen klicke, können Sie den FirstName, LastName und dann den Benutzernamen eingeben. Der Benutzername wird automatisch angezeigt, nur Sie müssen den Benutzernamen eingeben. Nehmen wir zum Beispiel an, wenn ich dort neu lege, können Sie die Monarchie auf der globalen aktuellen Punktseite sehen der globalen aktuellen Punktseite und dann weitergeben, was Sie das Passwort eingeben können. Und dann müssen Sie sich auf Sie verlassen, z. B. den Benutzer zwingen, das Passwort bei der ersten Anmeldung zu ändern , wenn Sie möchten, dass der Benutzer dieser E-Mail-Adresse Knie das Passwort ändern sollte. Und dann können Sie diese Option aktivieren und diese Option einfach deaktivieren. Auf diese Weise. Sie können bis zu fünf Benutzer hinzufügen. Jetzt können Sie bis zu vier Jahre addieren , da ein Benutzer bereits belegt ist. Dann die Datenmigration der Gruppe, E-Mail-Einstellungen und all das. Jetzt können Sie auch auf diese E-Mail zugreifen Sie können sehen , was Sie sagen? Das Logo ist da. Und Sie können auf diese E-Mail von x2 E-Mail-Anwendungen zugreifen , die sowohl in iOS als auch in Android verfügbar sind. Gehen wir jetzt zu unserem Posteingang. Ich komme einfach zu dir, ich öffne einen neuen Tab und ich gebe einfach z2 male ein. Ich klicke hier. Sei für eine Sekunde da, und hier gibt es Überschuss Zu, der eine E-Mail sendet. Und ich klicke einfach auf die Access x2-E-Mail. Jetzt können Sie sehen, wie aktuell auf Bluebell Dot Site vorhanden ist. Hier. Sie können sehen, dass wir unser Logo hier haben. Es hat einige Anweisungen, dass ich das vorerst einfach überspringen werde. Wir haben unser Logo, das Firmenlogo einfacher als männlich. Dann können Sie mit dem Kalender und dann mit der Aufgabe gehen. Du kannst die Tasky dort haben. Alles ist da, wie ganz professionell, man kann sehen, dass einige Demoaufgaben vorhanden sind. Und ich klicke hier einfach auf E-Mail. Und sobald Sie auf diese E-Mail klicken, öffnet sich diese E-Mail wie diese völlig neue, scharfe und schöne Benutzeroberfläche und Benutzererfahrung. Also ja, so ist die Benachrichtigung da, dann können Sie sehen, wie Xu E-Mail und ESP EFN MX-Datensätze noch nicht darauf hingewiesen werden , dass wir nach 30 Minuten überprüfen werden. Dann gibt es ein paar Integrationen , die über das Jahr hinweg vorhanden sind. Sie können einfach den Dunkelmodus und den Lichtmodus einschalten . Schicken Sie das Feedback. Und hier können Sie intern, interne Kommunikation mit Ihren Kollegen und ähnlichem in Ihrer Organisation haben. So integrieren Sie Zu, der eine E-Mail an Ihren Domainnamen sendet. Nach 30 Minuten überprüfen wir diese Überprüfung für MX Record und SPF-Datensatz und dann alles eingestellt. Ich bin bereit zu gehen. So werden wir das zu E-Mails machen. Und das ist alles für dieses Video. Nächstes Video zeige ich Ihnen nach dem Zeigen dieser E-Mail, wie genau es auf nichts anderes aussieht. Ja. Wir sehen uns im nächsten Video. Und wenn Sie das nächste Video sehen möchten, können Sie Sie im nächsten Abschnitt sehen oder sehen. Danke, Leute. Vielen Dank. 70. Anmerkungen: Hallo Leute. In diesem Video gebe ich Ihnen eine Information darüber, dass Sie meine Projektdateien herunterladen. Okay. Und wenn Sie diese Dateien in Bootstrap Studio öffnen, gibt es Formulare, in denen ich das Training gemacht habe. Ich habe hier meine E-Mail-Adresse hinzugefügt , die aktuell unter yahoo.com durchgeführt wird. Was passiert hier? Wenn Sie diese Datei testen, während Sie irgendwo hochladen, kommen die E-Mails zu mir. Sie können sehen wie Smartphones, E-Mails wie Smartphone-E-Mails, gibt es intelligente Formular-E-Mails , die zu mir kommen , wo alle Test-E-Mails angezeigt werden. Sie können das Testen, Testen, Testen sehen. Was Sie hier tun müssen, ist, , anstatt meine E-Mail-Adresse zu behalten Sie hier auf Verwalten klicken müssen, anstatt meine E-Mail-Adresse zu behalten. Und wie ich Ihnen in den Videos auch gesagt habe, müssen Sie auf Verwalten klicken und dann auf Empfänger hinzufügen klicken und Ihre E-Mail-Adresse an die Stelle legen , an die Sie Ihre E-Mails bringen möchten, z. B. wo Sie das Formular ablegen möchten Senden Sie eine E-Mail, legen Sie Ihre E-Mail hier hin, klicken Sie auf Erstellen, dann erhalten Sie ein OTP für diese E-Mail, setzen Sie das OTB ein und dann können Sie Ihr E-Mail-Jahr verbinden. Anstatt meine E-Mail zu benutzen. Sie müssen Ihre E-Mail verwenden, damit sie auf Ihre E-Mail gesendet wird und Sie zwei Nokias erhalten. Das Formular funktioniert einwandfrei. Okay Leute, das ist alles für dieses Video. Das ist es, was ich dir sagen möchte. Benutze diese nicht, weil diese E-Mails zu mir kommen und du denkst, es nicht funktioniert. Aber ja, es funktioniert, aber es kommt zur falschen E-Mail. Vielen Dank. 71. Altly.in ist jetzt Lynko.in: Hallo, alle zusammen. Dieses Video soll euch darüber informieren, dass ltle.in jetzt lincodt ist Abgesehen von den Preisplänen bleibt alles beim Alten. Es gibt also eine große Änderung im Preisplan. Also, wir haben hier keine Urjungfrau. Und im kostenlosen Tarif können Sie nur einen Kurzlink erstellen, und auf diesen Kurzlink wird pro Monat nur einmal geklickt Das ist also für nichts gut, aber Sie haben vollen Zugriff auf Bopage Kurz gesagt, im kostenlosen Tarif können Sie eine Bopage erstellen Und in der kostenpflichtigen Version stehen Ihnen ab dem Core die meisten Funktionen zur Verfügung In diesem Basisplan können Sie also sehen, dass Sie 150 Links pro Monat erstellen können, und es gibt kein Limit für die Klicks, und die Daten bleiben 30 Tage in der Datenbank Und Bopage ist wieder einer. Aber ein kleiner Haken hier im Wachstumsplan, wenn Sie sehen, sie haben erwähnt, dass es auf Anfrage für Benutzer mit mehr hier im Wachstumsplan, wenn Sie sehen, sie haben erwähnt, als 1.000 IG-Story-Followern kostenlos als 1.000 IG-Story-Followern Wenn Ihr Instagram-Konto also mehr als 1.000 Follower hat, können Sie sie bitten, diesen Wachstumsplan kostenlos zu erhalten. Sie können auf Lösung und dann LincoElitPass klicken Sie können die Informationen hier lesen. Sie können sie anfordern und den LinkoGrowth-Plan völlig kostenlos erhalten den LinkoGrowth-Plan völlig kostenlos Also ja, das soll Sie speziell darüber informieren , dass Atledt in jetzt Lincodtn ist. Danke.