Moderne Websites in Editor X erstellen

1. Trailer zum Kurs: [MUSIK] Hey, mein Name ist Jeremy, ein Markendesigner aus Sydney, Australien. In der heutigen Klasse zeige ich Ihnen, wie Sie Websites in Editor X erstellen . Ich zeige Ihnen die Grundlagen der Plattform, wie Sie wirklich coole Websites erstellen ob Sie ein Agenturbesitzer sind, ein Freelancer oder jemand, der ins Webdesign wechseln möchte. Editor X ist ein großartiges Tool zur Weberstellung, mit dem Sie Websites nach Ihren Wünschen erstellen und sie so anpassen können, wie Sie möchten, ohne Code zu kennen. Es ist ein No-Code-Tool und es ist ein wirklich cooles Werkzeug, und es ist ein wirklich cooles Werkzeug erstaunliche Erlebnisse im Internet zu erstellen. Wir werden ein wenig über Raster und Flexbox im Layout der Tools in Editor X sprechen , und wir werden eine tolle Zeit haben, coole Websites zu erstellen. [NOISE] Jetzt müssen Sie für das Klassenprojekt nur eine Website erstellen, die auf einem echten Kunden oder einem Konzeptprojekt basiert . Es könnte für ein Technologieunternehmen sein, es könnte für das lokale Café sein, was auch immer es ist. Erstellen Sie einfach eine einfache Website und lassen Sie uns alle Tipps und Tricks in die Praxis umsetzen alle Tipps und Tricks in die und Maßnahmen ergreifen. Melden Sie sich noch heute für den Kurs an und wir sehen uns dort und lassen Sie uns zusammen erstaunliche Websites erstellen [MUSIC]. 2. Was ist Editor X + Funktionen: [MUSIC] Was ist Editor X und welche Funktionen haben sie? Editor X ist ein Tool zur Weberstellung ohne Code, mit dem Sie Websites erstellen können , indem Sie Elemente einfach auf eine Seite ziehen und ablegen. Sie haben eine Menge Funktionalität. Sie können das CSS auch anpassen, wenn Sie möchten. Insgesamt ist es jedoch ein einfaches Tool, um Websites zu erstellen, und sie haben viele verschiedene Dinge. Aber einige der Vor- und Nachteile aus meiner persönlichen Sicht sind , dass die Vorteile sind, Sie schöne editierbare Vorlagen haben. Sie haben Vorlagen und auch Drahtrahmen zum Aufbau. Sie haben eine ganze Reihe in diesem Shop und Sie können sie tatsächlich kostenlos verwenden, und sie sind einfach super einfach zu bearbeiten, fügen Ihre Logos hinzu, fügen Ihre Farben, Typografie und all das Zeug wirklich einfach hinzu. Ich denke, das ist einer der wichtigsten Profis. Die zweite ist, dass sie eine Akademie voller Tutorial haben, sodass sie leicht zu verfolgen sind. Sie brechen es in kurzen 2-5-minütigen Tutorials auf, und es ist eine nette Akademie. Sie zerlegen alle ihre Tools Wenn Sie also jemals stecken bleiben und Hilfe benötigen, können Sie tatsächlich in die Akademie springen und etwas über den Erstellungsprozess des Webs erfahren . Nummer drei, wie ich bereits erwähnt habe, ist Drag & Drop, also kann ich einfach Elemente, Texte, Abschnitte und Layouts und eine ganze Reihe von Sachen und Kompositionen auf die Seite ziehen , Abschnitte und Layouts und eine ganze Reihe von . Wirklich einfach und ich kann einfach umklicken und es bewegen und ich mag diese Flexibilität damit. Schließlich haben Sie auch den App-Markt, Integration beinhaltet , damit Sie verschiedene Dinge integrieren können. Sie können ein Geschäft installieren, oder wenn es sich um ein bestimmtes Formular handelt, das Sie benötigen, oder um einen Zahlungsabwickler , können Sie es auf Ihrer Website ablegen und es ist alles Teil und integriert in Editor X. benötigen, oder um einen Zahlungsabwickler, können Sie es auf Ihrer Website ablegen und es ist alles Teil und integriert in Editor X. Nachteile, an die ich denke , ist, dass es eine kleine Lernkurve gibt, weil es nicht wie normale Wochen ist. Editor X es ist anders, es ist eher für Schöpfer, Designer, Freiberufler und Agenturen, also gibt es eine kleine Lernkurve, um sich daran zu gewöhnen und die Website aufzubauen. Das ist einer der Nachteile. Aber dann ist der zweite Nachteil , dass es einige Einschränkungen hat. Es hat keine verrückten Funktionen in Bezug auf verrückte Animationen, Sie können grundlegende Animationen machen, was gut ist. Aber ich denke, es fehlen auch noch ein paar andere Dinge. Aber insgesamt hat es die grundlegenden Tools, die Sie benötigen. Aber das sind die Vor- und Nachteile. Sie können sehen, dass ich nur auf einer Website bin Wenn Sie zu Features/Design gehen, können Sie hier sehen, dass Sie die Hauptsache haben , nämlich benutzerdefinierte Haltepunkte. Sie können vom Desktop direkt bis zur iPad- und Telefonansicht arbeiten , also denke ich, dass das wirklich, wirklich süß ist. Sie haben auch ein CSS-Raster, sodass Sie Raster erstellen können, die basierend auf Min-Max oder Inhalt anpassen. Wenn Sie also Spalten, zwei Spalten, drei Spalten, vier Zeilen wünschen , was auch immer es ist, können Sie das anpassen und es reagiert. Sie haben auch den Repeater Wenn Sie also einen Blog haben oder bestimmte Content-Portfolio-Stücke haben , die wiederholt werden müssen, erledigt dies automatisch für Sie und es funktioniert direkt im CMS. Sie haben auch das Layout-Tool, sodass Sie flexible Layouts erstellen können die im Grunde genommen reaktionsschnelle Boxen sind. Sie können leere Drahtrahmen anpassen und verschieben, und sie werden für Sie verschoben wenn Sie sie nach oben oder unten skalieren. Du hast auch das Andocken. Sie können Bilder oder Elemente oder Symbole oder Text andocken, was auch immer es an übergeordnete Container oder die verschiedenen Felder ist Container oder die verschiedenen , in denen Sie entwerfen. Wir haben auch Ebenen, also wie Photoshop, Es ist immer sauber, Ebenen zu haben, damit Sie das verwalten können. Sie haben auch eine Textskalierung , also können Sie die Mindestgröße und die maximale Größe festlegen, unabhängig davon, ob die Website skaliert oder auf Mobilgeräten ist, sie wird auf die von Ihnen festgelegten Größen skaliert. Das sind die Hauptmerkmale. Sie haben auch andere wie Master, Seiten, benutzerdefinierte Menüs, Stapel, all diese Sachen. Sie können es sich selbst ansehen, aber ich wollte nur diese Hauptmerkmale erwähnen. Jetzt sind die anderen Hauptmerkmale wenn es um Interaktionen und Effekte geht, damit Sie dies auch auf der Website überprüfen können, dass sie Hover-Interaktionen haben. Sie können auch Hover-Status erstellen. Wenn Sie mit der Maus über ein Element fahren, wird es etwas tun, was auch immer Sie es einstellen. Ich denke, das ist wirklich wichtig , wenn es um Webdesign geht. Du hast auch Bewegung, du hast Rotation, und es ist ziemlich einfach, aber das tut es. Du hast Deckkraft, also kannst du Masken machen. Sie können auch Zeitsequenzen durchführen, wenn Sie es also an einem bestimmten Auslösepunkt auf ein bestimmtes Ziel setzen . Sie haben auch Deckkraft, Farbwechsel und Sie haben auch Bewegungen, damit Sie Text verschieben können. Dies sind die wichtigsten Interaktionsmerkmale. Sie haben eine klebrige Positionierung, wie Sie sehen können, Sie können diese coolen Scroll-Effekte und eine Menge anderer Dinge erstellen . Dies sind die Hauptfunktionen, wenn es um Editor X geht, so dass Sie sehen können, dass es sehr, sehr pleite ist, vielseitig ist und es ist großartig, wenn Sie ein freiberuflicher Designer sind , der Websites für Ihre Kunden erstellt. 3. Verwenden des Dashboards: [MUSIK] Jetzt möchte ich Ihnen das Backend von Editor X zeigen von Editor X wenn Sie beginnen, sich in Ihrem Konto anzumelden und was Sie tun können. Dies ist das Dashboard Ihres Kontos, damit Sie sehen können, dass ich hier andere Websites habe. Jetzt ist das Coole dabei , dass Sie Ordner erstellen können, damit Sie in der oberen rechten Ecke sehen können , dass ich einen neuen Ordner erstellen kann. Vielleicht möchte ich es Clients 2022 nennen. Ich kann das erstellen und was ich dann tatsächlich tun kann , ist verschiedene Seiten darin zu ziehen und vielleicht möchte ich diese Seite ziehen , dann kann ich mit der rechten Maustaste auf den Pfeil dorthin klicken und du kannst sagen Bewegen zu und ich kann darauf klicken und hier verschieben klicken. Es ist sehr strukturiert , was wirklich einfach ist, dies zu tun und Ihre Inhalte zu planen wenn Sie eine ganze Reihe verschiedener Kunden haben. Sie haben auch die obere rechte Ecke, Sie haben Kontoeinstellungen, Domain, Ihre Geschäfts-E-Mail, Gutscheine, Abonnements, Zahlungsmethoden, all das Zeug ist in der Ecke, das ist wirklich einfach zu bedienen. Oben links haben Sie Ihr Partner-Dashboard. Wenn Sie auch auf Meine Website klicken, können Sie von hier aus Ihre Websites auswählen. Sie haben auch die Ressourcen , die Sie zur Academy x bringen, Inspirationsdesign-Features, die ich Ihnen schon ein paar gezeigt habe. Dann haben Sie Hilfe, damit Sie auf Hilfe klicken können , und Sie gelangen zu FAQs oder Problemen , die Sie haben. Wenn Sie die feineren Details und Einstellungen der Website wie das Umbenennen bearbeiten möchten die feineren Details und Einstellungen der Website wie das , können Sie mit der Maus darüber klicken und auf Site auswählen klicken und Sie dazu zu Ihrem anderen Haupt-Dashboard bringen bestimmte Website. Sie können hier sehen, ob ich meine Domain verbinden oder Pläne vergleichen muss , ich kann hier alles machen. Ich kann auf die rechte Seite gehen und auf die Website-Aktionen klicken Ich kann auf Site umbenennen klicken Wenn ich darauf klicken möchte, dass ich sie umbenennen möchte, kann ich das umbenennen und auf „Speichern“ klicken und es wird aktualisiert ganz einfach. Sie können auch Feedback erhalten, Live-Website anzeigen, die Website an eine andere Person übertragen, wenn es sich um ein Teammitglied oder einen Kunden handelt. Sie können Personen einladen, wenn Sie Mitarbeiter haben. Sie können auch die Zuweisung des Vertrauensduplikats verschieben oder dort eine neue Site erstellen. Es gibt Ihnen auch Analysen, die wirklich cool sind, damit Sie Berichte sehen können Wenn Sie also auf Alle Berichte anzeigen klicken, wird Ihnen das angezeigt. Ich kann sehen, wie viele Besucher ich habe. Sie geben Ihnen auch einige Aufforderungen , Sie beim Aufbau Ihrer Website zu unterstützen Veröffentlichen Sie also eine Domain verbinden und bei Google gefunden werden, und es hilft Ihnen Google Analytics zu verbinden. Sie können Ihr Dashboard auch anpassen Wenn ich mit der linken Maustaste klicke, kann ich Rechnungen hinzufügen, E-Mail-Kampagnen, anstehende Aufgaben usw. hinzufügen , damit Sie das gesamte Projekt von eine Kunden-Website alles in diesem Dashboard. Sie können nach unten scrollen und erhalten auch hier einige Vorschläge und einige andere Dinge, die Sie der Website hinzufügen können. In der oberen Ecke sehen Sie Ihren Posteingang oder Nachrichten, Benachrichtigungen und neue Releases, sodass Sie alles neue , was Editor X veröffentlicht hat , oben sehen können. Auf der linken Seite haben Sie all diese anderen Optionen wie Kontakte, Kommunikation, Automatisierungen, Marketing, SEO, Berichte, Finanzen usw. und Sie können alles vom Back-End aus verwalten. Wenn Sie die Website bearbeiten möchten, klicken Sie einfach auf Website bearbeiten und Sie gelangen zum Designer und zum Workspace. Was wir tun werden, ist, dass wir eine neue Website erstellen. Sie werden Sie fragen, auf welcher Plattform Sie auf Editor X klicken möchten . Sobald dies passiert , werden Sie ein paar Aufforderungen gefragt, um welche Art von Website es sich handelt. ist ein Geschäft, ein Design , eine Veranstaltung usw. Dafür klicke ich einfach auf Business und es wird Ihnen hier einige Vorschläge zu einigen Vorlagen geben. Sie können also hier sehen, dass wir ein paar Vorlagen haben. Ich kann unten unten klicken Alle Vorlagen ansehen wenn ich möchte, und ich zeige Ihnen einige davon, damit Sie sehen können , dass sie hier zusätzliche haben. Ich scrolle einfach durch, damit du nicht von Grund auf neu erstellen musst, du kannst buchstäblich einfach mit [NOISE] das erstellen. Sie können auch oben rechts auf Wireframes klicken , um diesen kleinen Button zu sehen. Wenn ich darauf klicke, zeigt es mir einfach Drahtgitter, also ohne Bilder oder irgendetwas. Es zeigt dir die nackten Knochen davon und du kannst auch darauf basierend erstellen. Für das, was wir tun wollen, klicke ich einfach auf Blank Canvas, weil wir von Grund auf neu erstellen werden. 4. Grundlagen der Editor X Interface: [MUSIK] Jetzt sind wir im Hauptarbeitsbereich von Editor X. Jetzt zeige ich Ihnen die Grundlagen und beginne mit bestimmten Teilen davon, und dann werden wir schließlich die Website erstellen. Aber lasst uns zuerst einige der Grundlagen behandeln. Das erste, was ich dir auffallen möchte, ist oben in der Mitte. Sie können sehen, dass Sie Ihre Haltepunkte haben. Ich kann auch hier klicken und sehe meine Seiten. Ich kann auf Seiten verwalten klicken, ich kann mehr Seiten erstellen. Ich zeige dir in einer Minute, wie das geht. Aber wir wollen bezahlen, um die Haltepunkte zu nutzen. Diesen ersten Haltepunkt, den Sie sehen können , können wir ab 1.000 Pixel bearbeiten. Sie können sehen, dass die Breite der Website derzeit bei 1.935 liegt. Die mittlere Taste hier am Haltepunkt ist ein niedrigerer Haltepunkt und im Grunde genommen für ein iPad oder ein Tablet. Wenn ich auf die untere klicke, siehst du, dass es eine mobile Ansicht hat, und das kannst du auch sehen. Wenn ich auf den Desktop klicke, habe ich das da. Ich kann auf die Schaltflächen klicken und auch benutzerdefinierte Haltepunkte hinzufügen. Was ich tun möchte, ist 1.440 hinzuzufügen , und ich klicke auf „Fertig“. Jetzt können wir sehen, dass wir einen benutzerdefinierten Haltepunkt haben , der 1440 und höher ist. Wir können das anklicken, wie Sie dort sehen können. Wir können auch hierher bringen. Es wird sich an Ihren Haltepunkt anpassen. Sie sehen den grauen Bereich, er wird bis zu diesem Haltepunkt einrasten, was wirklich cool ist. Ich ziehe es raus. Wir gehen zum nächsten Haltepunkt. Wenn ich dann rausziehe, gehe ich zum nächsten Haltepunkt dort auf der grauen gestrichelten Linie. Schön. Wenn Sie für eine bestimmte Größe oder Auflösung für Ihren Kunden entwerfen, wird es einfach zu entwerfen. Für diese Website werden wir in 1.440 arbeiten, denn so habe ich die aktuelle Website entworfen, an der wir arbeiten werden. Dann sind das 1.930 oder 20, im Grunde wenn man es abrundet. Auf der rechten Seite haben Sie auch den Inspector. Wenn ich hier auf dieses kleine Mixer-Symbol klicke , sehen Sie „Inspector“, damit Sie bestimmte Elemente der Seite entwerfen können, sodass Sie Ihre Farben hinzufügen, zum Beispiel den Hintergrund. Aber du willst diesen Hintergrund vorerst schwarz machen , oder was auch immer, grün oder pink, was auch immer, es spielt keine Rolle, ich kann ihn vorerst schwarz machen. Im Grunde können Sie Ihre Elemente jedoch anpassen. Wenn ich auf die Kopfzeile klicke, kannst du sehen, dass ich die Größe anpassen kann, ich kann die Positionierung anpassen. Ich kann mit einem kleinen Pinsel auf dieses kleine Symbol klicken mit einem kleinen Pinsel auf dieses kleine und dort auch die Füllung des Hintergrunds hinzufügen. Ich kann es dort ändern. Vielleicht der Header, wir wollen ein Grün oder wir wollen ein Blau, was auch immer es ist. Dann haben wir eine Hover-Interaktion. Der Liningball ist eine Hover-Interaktion, ich kann auf „ Interaktion hinzufügen“ klicken, dann kann ich weitermachen und damit anfangen, herumzuspielen. Aber das machen wir ein bisschen später. Das ist der Inspector. Sie haben auch Ihre Kommentare direkt neben diesem Symbol. Wenn Sie ein Team haben, können Sie hier Kommentare hinzufügen sagen: „Hey, entwerfen Sie die Seite.“ Wenn Sie ein Team haben, sehen sie diesen Kommentar überall dort, wo Sie das hinzugefügt haben , was wirklich cool ist. Wir haben auch hier Benachrichtigungen, also wenn Sie Website-Besucher bekommen, usw. Oben rechts hast du deine Schaltfläche „Veröffentlichen“, du hast Einladungen. Wenn Sie Ihr Team zur Zusammenarbeit einladen möchten , können Sie dies tun. Du tippst einfach die E-Mail ein und fügst sie dazu hinzu. Super einfach zu machen und großartig, wenn Sie in einer Agentur arbeiten. Sie haben auch Previous, also wenn ich darauf klicke, kann ich meine Website jederzeit live ansehen. Ich kann das natürlich auch senken, und ich kann es noch einmal auf diese Haltepunkte skalieren, und ich kann sehen, wie es live aussieht. Offensichtlich gibt es derzeit keine Inhalte, aber es ist wirklich praktisch. Dann gehst du einfach zurück und klickst auf „Site bearbeiten“, um dorthin zurückzukehren. Wenn du auf die linke Seite gehst, haben wir unsere Menüleisten hier und dann haben wir unsere Elemente hinzufügen. Darauf klicke ich mit der linken Maustaste. Klicken Sie auf „Elemente“. Hier können wir unsere Inhalte hinzufügen. Das Fleisch der Website. Wir können Schaltflächen, Titel, Absätze, Container, Layouter, Repeater , Menüs, Formen, Linien usw. hinzufügen. Wir können auch in diesem Bereich Vermögenswerte sparen. Wir können bereits vorgefertigte Kompositionen verwenden. Ich kann buchstäblich darauf klicken und das direkt auf die Website einfügen, ohne viel tun zu müssen. Wenn ich mit der linken Maustaste darauf klicke, siehst du Boom, er fügt das genau so in unsere Website ein. Ich gehe zurück. Sie haben Layout-Tools. Vorher habe ich noch einmal erwähnt, dass wir Raster haben, damit ich ein Raster hinzufügen kann. Ich kann den Layouter hinzufügen. Es gibt vorgefertigte Abschnitte hier. Wir haben auch den Repeater und auch eine Lichtbox. Das ist großartig für ein Galeriebild oder ein Pop-up. Sie haben benutzerdefinierte vorgefertigte Schaltflächen. Das gefällt mir. Ich muss keinen machen, ich klicke einfach darauf oder ziehe es, lasse es dort hinein fallen, und ich kann den Inspektor öffnen und anfangen herumzuspielen und die Farben und Schatten zu ändern und all das coole Zeug. Wir haben Texte, Menu, Suche. Wir haben Menüleisten und Navbars, eine ganze Reihe verschiedener Sachen hier. Es ist gut, in Ihrer Freizeit zu gehen und zu sehen, was Sie haben. Sie haben auch Kontaktformulare. Dann haben Sie andere Dinge wie zum Beispiel, Sie können Ihrer Website einen Blog hinzufügen. Sie können einen Shop hinzufügen, Sie können eine Buchung, Veranstaltungen, eine Mitgliedschaft, einen Content-Manager, also CMS, und eine mehrsprachige Website hinzufügen eine Buchung, Veranstaltungen, eine Mitgliedschaft, einen Content-Manager, also CMS, , die sich in Beta befindet. Sie haben eine ganze Reihe von Elementen zu verwenden. Der zweite Teil ist der Layer. Wenn ich hier auf dieses Symbol klicke, um unsere Ebene zu erhalten, habe ich nur eine Seite, nämlich die Homepage. Sie können grün sehen, dies ist eine unserer Komponenten, die im dies ist eine unserer Komponenten, Grunde ein wiederverwendbares Symbol ist, und Sie können sehen, dass dies grün sein wird. Ich kann den kleinen Pfeil umschalten und er zeigt mir alle Elemente in dieser Navbar. Dann gehst du zu Sektionen. Ich sehe die Schichten. Wir können hier und so weiter zur Sektion gehen. Ziemlich einfach, wie man Layer benutzt. Das nächste ist Site-Master. Wir können Master-Abschnitte mit mehreren Seiten erstellen. Zum Beispiel die Kopfzeile und eine Fußzeile, dies ist ein Master, was bedeutet, dass es auf jeder einzelnen Seite das Gleiche haben wird. Es wird die Fußzeile und den Master auf jeder Seite haben. Sie können es als Standard festlegen. Sie können es tatsächlich duplizieren und etwas anderes machen. Wenn Sie etwas bearbeiten möchten, würde ich den Header damit bearbeiten , weil er deshalb grün ist und dann auf jede Seite angewendet wird. Der nächste Teil ist Pages. Ich kann mit der linken Maustaste auf „Neue Seite hinzufügen“ klicken. Sie können sehen, dass es sich um eine dynamische Seite handelt, einmal entwerfen unbegrenzte Seiten generieren oder es ist nur eine leere Standardseite, sodass Sie wählen können, was Sie wollen. Wenn ich nur eine Seite hinzufüge, kann ich darauf klicken und jetzt zu Seite gehen, und ich kann dieses Team anrufen und so weiter. Jetzt haben wir verschiedene Seiten, ich kann sie anklicken, und das sieht man. Das eine oder das kleine Home-Icon, das ist Ihre Startseite. Denk einfach daran. Wenn Sie die Einstellungen ändern möchten, können Sie auf die drei Punkte klicken. Du hast Einstellungen, SEO. Sie können den Layer umbenennen, duplizieren und die Seite bearbeiten oder einen Kommentar für Ihr Team hinzufügen. Wir haben auch Site-Styles. Sie möchten mit einem kleinen Tröpfchen auf das A klicken. Wir haben Typografie. Sie können tatsächlich die Kontrolle über die Schriften haben. Sie haben H1 bis H6 und dann haben Sie einen Absatz 1 bis Absatz 3, damit Sie all diese anpassen können. Wenn Sie darauf klicken, können Sie sehen, was es Ihnen zeigen wird. Sie können die Größe, die Kühnheit ändern, kursiv schreiben oder eine Farbe hinzufügen, was auch immer Sie tun möchten. Wenn ich auf „Übernehmen“ klicke, wird das angewendet . Du hast auch Farben. Ich klicke mit der linken Maustaste darauf. Wir können unsere globalen Farben hier bearbeiten, also kann ich unsere Farbpalette ändern. Außerdem haben Sie Seitenübergänge. Wenn Sie beim Seitenwechsel nur allgemeine Übergänge für Seiten festlegen möchten , können Sie dies auf „ Out in“ einstellen, was cool ist. Hier ist der App-Markt. Sie klicken auf die kleinen Quadrate und schauen hier durch, und ich würde sagen, dass Sie wahrscheinlich nicht zu viele installieren, weil Sie Ihre Website nicht stören möchten, aber Sie können herumspielen und sich die beliebtesten ansehen. Wenn Sie auf „Beliebt diesen Monat“ klicken, können Sie sehen, was beliebt ist oder die Teamauswahl. Sie können Team Picks hier sehen. Jede Menge Plugins, die Sie für Ihre Website verwenden können. Schließlich haben Sie den Content Manager auf der linken Seite, den Sie sehen können. Wenn Sie einen Blog oder ein großes Portfolio oder eine große Marketing-Website haben, werden Sie dies verwenden. Für unser Design heute werden wir es einfach halten, also müssen wir das CMS nicht verwenden. Schließlich haben wir oben einige Menüoptionen. Wir haben unsere Slide, damit ich darauf klicken kann. Sie haben Ihre Optionen hier. Sie können einladen, duplizieren, Website übertragen, auf eine kostenpflichtige Version upgraden. Sie haben Dashboard, Rollen und Berechtigungen für Ihr Team Wenn Sie dies ändern möchten, können Sie Ihre Website auch hier verwalten. Sie können auch auf „Anzeigen“ klicken. Sie können vergrößern und verkleinern. Normalerweise verwende ich die Verknüpfungen, die genau hier sind, Control Plus und Minus. Du hast auch Tools hier. Wenn Sie auf den Medienmanager klicken möchten, ist dies eine weitere wichtige Sache, die Sie benötigen. Ich klicke darauf und können wir unsere Assets hochladen. Ich lade meine Bilder hier hoch. Wenn ich auf „Hochladen“ klicke, vom Computer hochlade oder ein paar Dinge ziehen möchte, kann ich jetzt hierher kommen und anfangen, meine Bilder zu ziehen, also ziehe ich das hinein. Ich klicke auf „Site-Dateien“. Du hast auch Unsplash. Sie können sehen, dass Sie direkt darin kostenlose Bilder erhalten können , also ist alles integriert. Meine Dia-Dateien werden hier auftauchen. Ich werde einige der Bilder dorthin ziehen und ablegen , die ich verwenden werde. Es ist super einfach Bilder hinzuzufügen. Sie können sie auch zuschneiden, bearbeiten und bei Bedarf anpassen . Wenn ich darauf klicke, kann ich tatsächlich auf „Verbessern“ klicken, wenn ich Dinge anpassen möchte, kann ich mich automatisch verbessern. Ich kann die Helligkeit einstellen und so weiter. Es ist wie Photoshop. Sie haben Filter, Sie können Dinge ausschneiden, Filter hinzufügen, wenn Sie möchten, es ist ziemlich nützlich. Ich gehe zurück und klicke einfach davon ab. Dann hast du auch den Dev-Modus. Wenn Sie jemand sind, der Ihrer Website benutzerdefinierten Code hinzufügen möchte , arbeiten Sie vielleicht an einer kreativen Website, Sie können auf „Dev-Modus“ klicken und APIs verbinden, Sie können benutzerdefinierten Code hinzufügen CSS, und mach all das Zeug. 5. Flexible Layout: [MUSIK] Ich möchte Ihnen die Kernlayout-Tools in Editor X zeigen , die meiner Meinung nach sehr nützlich sind und sie ziemlich einfach zu bedienen sind. Ich habe gerade eine andere Seite hier bekommen, nur eine grundlegende Seite. Ich habe ein paar Abschnitte, wie Sie hier sehen können. Jetzt gehe ich zu meinen Plus-Elementen und du möchtest zu Layouttools wechseln. Jetzt hast du fünf Tools hier. Sie haben leere Boxen, die auch als Container bezeichnet werden. Sie haben Raster, Sie haben das Layouter-Tool, Sie haben den Repeater und Sie haben auch Lightboxen. Jetzt zeige ich dir die Grundlagen, wie man diese benutzt. Eine leere Box ist nur eine durchschnittliche Schachtel. Sie können sehen, dass Sie hier einige Variationen haben. Zum Beispiel kann ich dieses graue Feld einfach in diesen Abschnitt ziehen und ablegen. Sie können hier sehen, wenn ich in die obere linke Ecke gehe, sehen Sie, dass der Container steht. Wenn ich zu meinen Ebenen gehe, nennt es es auch einen Container. Eine Box ist als Container bekannt , der meiner Meinung nach einfach einen Container nennen sollte, aber im Moment heißt es so. Du kannst es auch dehnen. Wenn ich auf das kleine Symbol oben rechts klicke, füllt der Container hier die gesamte Größe des eigentlichen Abschnitts aus, wie Sie das sehen können. Ich kann weitermachen und die Hintergrundfarbe ändern, wenn ich will. Ich kann da drin machen, was ich will. In diesem Container kann ich anfangen, Objekte, Bilder, Symbole hinzuzufügen , was auch immer es ist. Wenn ich zum Beispiel eine Form hinzufügen möchte, kann ich dort eine Form hineinlegen. Wenn ich jetzt zu meinen Ebenen gehe, kannst du sehen, dass sich in diesem Container eine Grundform befindet. Ich kann diese Form bewegen, ich kann sie skalieren. Ich kann die Farbe ändern. Ich kann damit im Grunde alles machen , was ich will, wie Sie dort sehen können. Jetzt kann ich weitermachen und das Shape löschen. Ich kann den Container auch löschen. Jetzt ist es immer gut , Container zu bauen weil Sie kein Design auffüllen möchten . Wenn Sie etwas im Hintergrund entwerfen oder ändern, können Sie den Container ändern, anstatt die einzelnen Felder des Objekts zu ändern . So benutzt man den Basiscontainer. Jetzt ist das andere Gitter. Raster sind sehr nützlich, wenn Sie einen Abschnitt haben möchten , der in verschiedene Felder oder Spalten oder Zeilen geschnitten ist, liegt es an Ihnen. Zum Beispiel kann ich dieses Zwei-mal-Zwei-Raster verwenden. Ich kann es strecken, ich kann es größer machen, wie Sie dort sehen können. Einfach mit meiner Maus kann ich die Ausrichtungstools verwenden, um sie direkt in der Mitte dieses Abschnitts auszurichten. Ich kann das Raster-Layout tatsächlich ändern. Wenn ich mit der linken Maustaste oben klicke, heißt es Raster wechseln. Ich kann eins nach vier machen. Ich kann ein Vier-mal-eins machen. Ich kann tatsächlich in den erweiterten Modus wechseln und tatsächlich anfangen, die Größe anzupassen. Wenn Sie diese zwei kleinen Linien haben, kann ich sie ziehen und ich kann verschiedene Größen haben , wie Sie dort sehen können. Ich kann auch die Größe, die Höhe erhöhen. Ich kann auf den kleinen Plus-Button klicken, es wird eine Spalte hinzufügen. Du hast so viel Kontrolle darüber, was du tun kannst. Ich kann auch Lücken hinzufügen, vielleicht möchte ich 20 Pixel Lücke. Sie können sehen, dass das eine nette kleine Lücke hinzufügt. Es wird Ihnen einige Richtlinien geben. Ich kann auf „Fertig“ klicken und dann haben wir dieses Raster. Ich kann immer zurückgehen und erweiterten Modus ändern und Teile löschen. Sie klicken auf den Text und klicken auf „Spalte löschen“. Vielleicht will ich einfach so ein Zwei-Raster, das ist in Ordnung. Ich kann auch den Rasterhintergrund unten löschen und auf „Raster löschen“ klicken. Ich lösche diesen Container von früher. Es ist ziemlich einfach , die Gitter zu benutzen. Es ist großartig, wenn Sie Portfoliostücke haben. Jetzt heißt das nächste Werkzeug Layouter-Tool. Sie können hier sehen, dass ich in der Rubrik bin und es gibt hier vorgefertigte Abschnitte. Bei layouter können Sie einen eher responsiven Abschnitt erstellen . Ich werde das vergrößern. Ich klicke hier auf den „Layouter“, mache es etwas breiter und ein bisschen länger. Wenn ich auf „Optionen“ klicke, siehst du, dass ich ein Mosaik habe. Ich kann Steine machen, ich kann Reihen machen und ich kann auch Spalten und einen Schieberegler machen. Jetzt ist das Coole dabei, dass alles ansprechend ist und Sie alles anpassen können. Ich kann das auswählen und ich kann es plus oder minus. Wenn ich mehr Platz einnehmen möchte, kann ich das ändern. Du kannst sehen, ob ich mehrere machen wollte, vielleicht möchte ich das etwas länger machen, du kannst das machen. Was ich dann tatsächlich tun kann, ist, dass ich Bilder einfach per Drag & Drop hier hineinziehen kann , sie hineinziehen und dann strecken kann ich es. Dann kann ich das Bild ändern. Vielleicht haben wir ein Teammitglied, ich kann doppelklicken, um es neu zu justieren, und ich kann auch hier aus den Bildern herausfallen. Ich kann die SMS fallen lassen, wenn ich will. Sie können sehen, ob ich zur mobilen Ansicht komme , damit sie reagiert. Das ist das Coole am Layouter. Es macht es reaktionsschnell und Sie erhalten ein individuelles Aussehen und Gefühl mit diesen Rastern, die Sie haben. Ich kann Bilder hinzufügen. Vielleicht möchten Sie hier ein bisschen Text hinzufügen oder so und den Hintergrund in Schwarz ändern. Da gehst du. Sie können sehen, dass dies das Layouter-Tool ist, und Sie können sehen, dass es reagiert. Offensichtlich müssten die Texte kleiner werden, aber das ist das Layouter-Werkzeug. Jetzt gehe ich einfach in diesen anderen Abschnitt hier. Ich zeige dir den Repeater. Jetzt ist Repeater wirklich großartig, wenn Sie Objekte der gleichen Art wiederholen, für einen Blogbeitrag oder ein Portfolio usw. Sie können sehen, dass Sie all diese wirklich schönen Tools haben. Ich möchte diesen Drag & Drop hinein ziehen und es heißt Ersetzen-Abschnitt, also wird es diesen Abschnitt ersetzen. Schön. Ich werde nur sicherstellen, dass es skaliert ist. Ich klicke drauf. ändere die Hintergrundfarbe. Wir können es grün machen, wenn du willst. Du willst die graue Farbe nicht bekommen. Ich kann das Bild ändern. Wenn ich dort hineinklicke, kann ich beispielsweise hier unser Team auswählen. Man sieht, dass jeder Junge gleich ist. Ich werde nur sicherstellen , dass es so bleibt. Cool. Jetzt kannst du hier den Text sehen, ich kann hier reinkommen und mich daran erinnern. Sie können sehen, um vollständige Elemente anzupassen , die bereits vorhanden sind, klicken Sie auf „Text bearbeiten“. Wenn ich es anpasse, können Sie sehen, dass der Effekt für alle Texte geändert wird, da es im Grunde genommen den gleichen Stil und das gleiche Design für jedes Element wiederholt. Wenn wir es hinzufügen oder abzüglich eines Elements oder eines Teammitglieds, werden diese Änderungen vorgenommen. Zum Beispiel kann ich Absatz 3 bekommen und ihn so grün machen. Sie können sehen, wie es in einem Stapel ist, also ist es gruppiert. Ich kann doppelklicken und den Titel bearbeiten. Überschrift vielleicht möchte ich wie eine Überschrift 3 machen, das wird das ändern. Vielleicht möchte ich den Text in ein Skript ändern. Sie können sehen, dass es alle anderen Titel dort ändern wird. Behalte das einfach im Hinterkopf. Ein Repeater ist wirklich großartig, wenn man ihn richtig benutzt. Sie können den Container auch wechseln. Ich möchte das grün machen. Der Text hier drin kann ich auch einen Text bearbeiten. Dieser wird Absatz gehen, los geht's. Es ist super einfach, Repeater ist großartig. Stellen Sie sicher, dass Sie es benutzen. Jetzt kann ich auch auf „Artikel verwalten“ klicken. Sie können sehen, dass ich einen Artikel duplizieren kann. Wenn ich auf „Duplizieren“ klicke, wird es dupliziert und weitere Teammitglieder hinzugefügt. Vielleicht haben wir ein sechsköpfiges Team, du siehst, dass es es nur wiederholt. Macht es super einfach, das hinzuzufügen. Ich kann auf „ Raster-Layout ändern“ klicken, und Sie können sehen, dass ich das auch ändern kann. Wie üblich kann ich es auch, wenn Sie dort ein individuelles Raster hinzufügen möchten . Benutze Repeater, es ist wirklich nützlich. Jetzt heißt der letzte eine Lightbox. Das sind im Grunde Pop-ups. Vielleicht möchten Sie ein Cookie-Pop Up haben oder Sie haben eine Promo oder was auch immer es ist, dann können wir das absolut haben. Ich klicke darauf, und das wird diese Cookie-Lichtbox hinzufügen. Ich klicke darauf und ich kann die Farbe tatsächlich ändern. Lass uns mit Schwarz gehen. Man kann sagen, dass dies der Cookie-Richtlinienabsatz sind , das ist wirklich cool. Ich kann auf „Overlay einrichten“ klicken. Sie können sehen, dass das Klicken auf die Lightbox schließt, damit ich das aus- und einschalten kann. Ich schließe das vorerst. Ich kann auch einen Triggerpunkt setzen. Sie können die Cookie-Richtlinie sehen und Lightbox automatisch auf Seiten anzeigen. Ich kann „Ja“ sagen. Ich kann zeigen, auf welcher Seite es angezeigt wird. Es wird die Verzögerung machen und Sie können sehen, dass es in der X-Taste befindet, anstatt auf der Schaltfläche Schließen. Sie haben einige Möglichkeiten, Sie darauf anpassen können. Das ist unser Pop-up dort. Sie haben nur ein paar Styling-Optionen, also füllen Sie vorerst einfach die Farbe. Ich klicke auf „Vorschau“ und wir werden sehen, was passiert. Cool. Sobald ich mit der Lightbox zufrieden bin, klicke ich auf „Vorschau“. Skalieren wir die Folie auf die richtige Größe und gehen wir zur Teamseite und dort haben wir sie. Wir haben das Pop-up der Kekse, die zwei Sekunden Licht unten und ich kann auf das kleine „X“ klicken. Im Grunde machen wir das. Wir haben es auf die Teamseite eingestellt. Sie können es anpassen und auf jede beliebige Seite einstellen , die Sie tatsächlich möchten. Das ist super cool, um nützlich zu sein. Im Grunde sind dies die fünf Tools, Sie verwenden können, die Layout-Tools sie sind wirklich nützlich, wirklich großartig und verwenden sie in Ihren Designs. 6. Markenbibliothek + Aufbau von Nav: [MUSIK] Die Website, die wir erstellen werden, ist diese, die ich in Adobe XD gebaut habe. Es ist eine Krypto-Wallet , in der Sie Assets, Token und NFTs in Ihrem Wallet speichern können . Ich werde diese einfache Landingpage einfach schnell aufgepeitscht diese einfache Landingpage einfach und dann kannst du dort auch die mobile Version sehen. Wir werden das bauen und es einfach halten. Wir machen vielleicht ein paar andere Seiten, sehen, wie lange der Kurs weitergeht, aber das werden wir erstellen und wir zeigen Ihnen, wie das geht. Wir sind im Editor X. Jetzt klicke ich mit der linken Maustaste auf meinen Header. Das erste, was ich tun möchte, ist zu meinem Inspect auf der rechten Seite zu gehen , auf den Pinsel zu klicken und den Hintergrund zu ändern. Aber du siehst hier, ich habe meine Farben eigentlich nicht. Ich kann benutzerdefinierte Farbe C hinzufügen, oder ich gehe nach oben links und klicke auf die Farben meiner Markenseite Ich werde hier meine Hauptfarben ändern. Für meinen Hintergrund gehe ich zu XD und du kannst sehen, dass ich einfach die HEX-Codes kopieren kann , die ich bereits erstellt habe. Sie können hier sehen, klicken Sie darauf. Füge meinen HEX-Code ein. Da sind wir los. Klicken Sie auf „Übernehmen“ und bewerben Sie sich und es sollte genau dort ändern. Ich mache das Gleiche auch für die Grautöne. Dort haben wir unsere Farben für den Hintergrund und den Text und dann unsere Aktionsfarben, die im Grunde genommen der Aufruf zum Handeln sind. Unsere Böden und Sachen werden das grüne Zeug sein. Auch für den Text brauche ich hier auch das Grün. Einige der Texte sollen eigentlich grün sein. Schön. Sobald wir das gemacht haben und dann können wir zurückgehen. Ich klicke auf die Kopfzeile klicke auf das Design auf der rechten Seite. Dann siehst du jetzt, welche Farben ich tatsächlich hinzugefügt habe. Sehen Sie sich unsere Themenfarben an. Ich kann weitermachen und diese abgeben. Ich benutze tatsächlich die schwarze Farbe. Ich werde das Gleiche auch für den Körper tun. Das Gleiche gilt für die Fußzeile. Da sind wir los. Jetzt gehe ich zu meiner Kopfzeile und doppelklicke auf das Bild des Logos. Ich klicke auf „Vektorgrafik ändern“. Ich klicke auf meine Site-Dateien auf der linken Seite und wähle das Logo-Design aus, das ich erstellt habe. Boom, es ist sehr schnell. Es lädt einfach so ein. Ich lösche das Menü dort. Ich gehe zum Plus-Button. Ich füge ein Menü hinzu. Ich gehe runter zum Menü und suche. Jetzt möchte ich ein einfaches Menü hinzufügen und wir werden es später anpassen. Nur dieser Header hier, Basic One. Ich bringe es mit. Ich kopiere es. Stellen Sie sicher, dass ich auf die Kopfzeile klicke sie dann mit Control V in die Kopfzeile einfüge . Jetzt können Sie sehen, dass ich meine Seiten hier habe. Jetzt muss ich auch meine andere Seite hinzufügen. Wenn ich zu Seiten gehe, stelle sicher, dass ich eine Seite hinzufüge. Ich nenne dies als Support, Teamblog und Support. Ich klicke auf das Menü und klicke auf „Menü verwalten“. Jetzt kannst du ihn sehen, jeder von ihnen taucht auf, also muss ich die anderen Seiten hinzufügen. Ich klicke auf „Site-Seiten“. Ich klicke auf alle Seiten. Wir überprüfen das und klicken auf „Übernehmen“. Dann sollten sie hier auftauchen. Dann klicke ich wahrscheinlich auf „Menü verwalten“. Wenn ich Dinge bewegen muss, kannst du sie einfach so per Drag & Drop ziehen. Ich gehe zum Inspector, gehe zum Text und ändere die Farbe in Weiß. Deshalb ist es nicht aufgetaucht. Wir können sehen, dass die ausgewählte Seite diese grüne Farbe hat. Das kann ich wahrscheinlich ändern. Wenn ich die Füllfarbe und den Schweben gehe, kannst du sehen, dass es dieses Grün hat, aber vielleicht möchte ich es grau machen oder was auch immer es ist, du kannst diese Dinge ändern. Ich werde tatsächlich auch meine Schriftarten ändern . Ich klicke auf die Website-Farbstile. Ich gehe zu meiner Typografie. Jetzt werde ich mich im Grunde ändern. Ich habe all diese Charakterstile hier in unserem XD gespeichert. Was ich jetzt machen werde , die Schriftart, die ich verwende , ist Space Grotesk. Ich klicke hier auf den kleinen Bleistift. Klicken Sie auf die Suchleiste und geben Sie Space Grotesk ein. Sie haben das, was wirklich großartig ist. Dafür sollte es fett sein, was wirklich cool ist. Dann haben wir auch unsere Absätze. Habe auch unser H2, das 42 Pixel für das erste H1 ist, das wird 56 sein. Ich klicke auf „Übernehmen“. Dieser ist 40. Jetzt geht es Space Grotesk. Es wird mutig sein. Klicken Sie auf „Anwenden“. Das wird die grüne Farbe sein. H3 ist 24, kräftige Farbe grün. Das wird uns später so viel Zeit sparen, also muss ich es nicht manuell machen. Es wird alle unsere Überschriften und unsere Absätze speichern. Ich habe auch Absätze Space Grotesk, das wird 16 sein. Das sollte regelmäßig sein, was großartig ist. Wir haben Absatz 2, der ein White Space Grotesk 16 sein wird und sich bewerben wird. Wir haben eine schwarze Version und eine weiße Version. Dann werden wir auch eine grüne Version haben. Sechzehn, geben Sie Space Grotesk ein und klicken Sie auf „Übernehmen“. Jetzt haben wir unseren gesamten Charakterstil hier gespeichert. Wenn wir beispielsweise etwas wie den Text manuell hinzufügen müssen, gehe ich zum Inspector, klicke auf das Design und klicke auf den Text. Sie können natürlich sehen, dass Sie die Schriftart von hier aus auswählen können. Wenn ich Space Grotesk tippe, kann ich normalerweise dort wechseln. Wenn ich auf das Thema klicke, werden alle unsere gespeicherten Charakterstile , die ich gerade zuvor gemacht habe, in der Bibliothek enthalten. Jetzt kann ich eine davon auswählen. Wenn ich Überschrift 3 oder Überschrift 6 gehe, was auch immer es ist oder Absatz 1, wird es in diejenigen geändert , die Stile, die ich festgelegt habe, wie Sie sehen können. Wenn ich jetzt die Größe ändern möchte, ziehe ich nur die Box, damit ich es wirklich breit machen oder näher bringen kann . Ich gehe zu Elementen. Wir gehen zu Quick Add. Was ich mache, ist meinen Titel hinzuzufügen. Ich klicke und lege das einfach so ein. Super einfach. Ich füge auch einen Absatz hinzu und füge auch einen Button hinzu. Das Coole sind unsere Guides, die du sehen kannst, dass ich eingeschaltet habe, also wird alles dort schnappen, wo wir es eingestellt haben. Wirklich cool. Ich werde diesen Abschnitt nur erweitern. Ich werde einen weiteren Abschnitt platzieren ihn leer machen. Was ich tun kann, ist das einfach nach unten zu ziehen , um die Höhe zu bringen. Ich gehe zu Umschalttaste klicken und auf all diese klicken. Was Sie tun können, ist tatsächlich Stapel oder Gruppe auszuwählen. Wenn Sie es stapeln, wird es im Grunde in einen Stapel gelegt , wodurch es reagiert, wenn Sie es anpassen. Wie du dort siehst, ist das echt cool. Ich liebe es, dass Reaktionsfähigkeit wirklich cool ist. Dieser Text, ich werde ihn ändern, das wird ein H1 sein. Da sind wir los. Wenn Sie in den Stapel klicken, möchten Sie einfach noch einmal hineinklicken. Sie klicken in die richtigen Objekte. Bring das hoch. Schön, das sieht gut aus. Ich bringe das so zu Fall. Doppelklicken Sie auf den Text. Füge das einfach so ein. Doppelklicken wir hier hinein. Du siehst, dass wir unseren Button haben. Ich entwerfe diesen Knopf. Das werde ich ändern. Wir gehen zum Inspector auf der rechten Seite und ändern auch die Farbe. Texte müssen tatsächlich schwarz sein. Das sieht gut aus. Jetzt Button. Ich möchte tatsächlich die Ecken wechseln. Im Inspektor möchten Sie zur dritten Option wechseln , es heißt Ecken. Ich kann alles abrunden. Anstatt es aufzurunden, setze ich es auf Null. Aber wenn ich 100 Pixel setze, sieht man, dass es in eine abgerundete Form kommt. Ich werde 0 setzen, weil ich dort ein flaches Rechteck haben will. Du kannst einen Schatten hinzufügen , der cool ist. Wir können einen solchen Schatten für den Button hinzufügen. Eine andere Möglichkeit, dies zu tun, ist einfach eine Grenze hinzuzufügen. Ich füge nur eine grundlegende Rechteckform hinzu. Ich ändere die Farbe davon. Eine Abkürzung wenn ich es nach hinten bringen möchte, kann ich die Strg-Taste drücken und runter drücken. Sie ist großartig. Ich mache die Grenze, die grüne Farbe. Im Inspector klicke ich auf Board auf das Shape. Ich setze die Deckkraft der Füllung auf null Prozent. Ich benutze hier einfach meine Pfeiltasten. Ich werde es etwas kleiner machen. Um diesen Effekt zu erzielen, können Sie sehen, wie wir diesen kleinen Umriss haben. Es ist im Grunde ein Rechteck mit einem Rand, wie man dort sehen kann, was ich für wirklich cool halte. Ich möchte nur sicherstellen , dass ich Strg drücke, Umschalttaste gedrückt halte und diese beiden auswähle Jetzt haben wir diese Schaltfläche als Gruppe. Ich doppelklicke auf die Schaltfläche in der Gruppe und klicke mit der rechten Maustaste auf die Schaltfläche. Was Sie jetzt tun möchten, möchten wir es in einen Vermögenswert verwandeln. Ich gehe unten runter, es heißt „ Als Vermögenswert speichern“. Ich klicke darauf. Ich nenne es den Hauptknopf. Dann können wir es hinzufügen , um zu sagen, dass es das ist. Ich kann auch eine neue Bibliothek erstellen. Ich klicke einfach auf „Hinzufügen“. Wenn ich nun zum Plus-Button gehe und auf Assets klicke, sollte er hier drin sein. Was ich jetzt mache, ist, dass ich ein Bild hinzufügen werde. Ich ziehe hier ein Bild per Drag & Drop. Ich klicke auf „Bild ändern“. Es wird meine Mediathek laden . Ich klicke hier auf mein Hero-Bild und klicke auf „Aktualisieren“. Schön. Jetzt ziehe ich das einfach so, dass es groß ist und es bis zum Ende dieses Abschnitts dort rastet. Sie können sehen, dass es es automatisch skaliert hat, was mein Leben so viel einfacher macht. Jetzt füge ich mein zweites Bild hinzu, das dahinter stehen wird. Ein kleines Icon-Element hier. Ich drücke Control Down und bringe das an. Sie können auch auf diese kleine Stretch-Schaltfläche in der rechten Ecke klicken und sie auf die volle Breite des tatsächlichen Abschnitts dehnen . Wenn ich das nicht will, kann ich es einfach ausschalten und einfach so skalieren, wie ich es möchte. Ich bringe es einfach hierher zurück. Ich kann meine Umschalttaste benutzen und tippe dort auf die Tasten, nur um diesen Effekt beizubehalten. Schön. Ich denke, das sieht echt cool aus. Es sieht auch so aus wie unser Design hier. 7. Die Homepage aufbauen: Jetzt klicke ich auf „Element hinzufügen“. Ich lasse hier einen Titel fallen und wir möchten auch den Absatztext löschen. Dieser Abschnitt ist einfach ziemlich einfach , aber für diesen müssen wir die Textausrichtung tatsächlich ändern, um ihn zu zentrieren. Ich klicke auf „ Text bearbeiten“ und auf ein weiteres Textwerkzeug , bei dem Sie die Absatzausrichtung haben. Sie können den Zeilenabstand anpassen, auch den Zeichenabstand. Sie können Punktpunkte und nummerierte Listen erstellen, und Sie müssen auch die Richtung des Typs ändern. Du hast auch das Überschriften-Tag und du hast dort eine ganze Reihe von Optionen. Für diesen wird dies ein H2 sein. Ich gehe einfach weiter und fange an, diesen Text so zu kopieren . Ich muss diesen Text einfach so an der Mitte ausrichten . Schön. Nun soll der Absatztext hierher gehen. Da sind wir los. Exzellent. Füge aus irgendeinem Grund zwei hinzu. Ich klicke auf „Text bearbeiten“ und stelle sicher, dass wir auf den weißen eingestellt sind. Manchmal muss man es abklicken und dann auf den Absatz klicken. Schön, einfach so. Ich klicke es ab und skaliere dann einfach so. Schön. Jetzt möchte ich hier ein Element hinzufügen, also haben wir hier drei kleine Abschnitte. Was ich dafür tun kann, kann ich diesen Abschnitt einfach so mitbringen. Ich füge einen weiteren Abschnitt hinzu. Schön. klicke ich auf den Repeater und du kannst sehen, dass sie die drei hier haben. Ich klicke darauf und wir können sehen, dass wir diese drei kleinen Karten haben . Das werde ich schleppen. Sie können sehen, dass sie sie Karten nennen, Sie können eine Liste erstellen, Sie können auch einen Schieberegler machen, Sie können eine Gitterzelle machen, was ziemlich cool ist. Ich behalte es nur auf Karten. Kontrolliere einfach Z das und ich möchte nur sicherstellen, dass das Layout tatsächlich zentriert und schön ist. Für diese Karten möchte ich nur, dass der Hintergrund einfach nichts ist. Ich schalte das aus. Jetzt muss ich unseren Titel hier hinzufügen. Ich gebe den Titel ein. Sie können sehen, wie ich es anfüge, es wiederholt es, was wirklich nützlich ist. Ich ziehe hier rein und du wirst sehen die kleine blaue Box dass die kleine blaue Box so anhängen steht. Ich klicke einfach schnell auf den Absatz „Text bearbeiten“ . Schön. Jetzt fügen wir unsere Icons in den Repeater ein. Was ich tun werde, ist zu Plus zu gehen, ich werde in Form kommen. Anstatt ein Bild zu machen, werden wir tatsächlich eine SVG hochladen. Ich klicke auf Shape. Ich ziehe hier rein und ich werde es anhängen, ich werde es ein bisschen verkleinern. Dann klicke ich auf „Grundform ändern“. Ich gehe zu meinen Site-Dateien und du kannst sehen, dass ich die PNG-Versionen habe, aber wir möchten die SVG-Versionen verwenden. Ich doppelklicke. Dann klicke ich einfach und ändere auch die anderen. Einfach so. Ich komme zurück zu meinem Design. Stellen Sie einfach sicher, dass alles in Ordnung ist. Ich glaube, das war umgekehrt. Ich kopiere meinen Text und füge meinen Text aus dem Design ein. Cool. Das sieht gut aus. Wenn wir den Repeater erweitern müssen, können wir ihn tatsächlich breiter und größer machen. Wie Sie sehen können, können wir es erweitern und der Text wird sich anpassen. Offensichtlich ändern sich die Formen tatsächlich, also müssen wir das wahrscheinlich verkleinern. Achten Sie einfach darauf, wenn Sie mit der Waage oder allem spielen . Wenn ich zum nächsten Abschnitt übergehe, klicke ich auf „Plus Neue Sanktion hinzufügen“, und dieser wird ein leerer Abschnitt sein. Jetzt mache ich wieder einen Repeater. Wir gehen zu Quick Add und ich klicke auf „Repeater“. Ich werde sicherstellen, dass es in der Mitte ist , wenn ich auch einen Titel hinzufüge. Dafür muss ich sicherstellen, dass es zentriert ist, der Text, ich werde das zentrieren und das sollte sein, ich denke auch ein H1. Es ist ein H1 oder H2. Dann werden wir diesen Abschnitt hier so erstellen. Schön. Ich klicke auf den Artikel, damit du sehen kannst, dass du die verschiedenen Gegenstände hast. Ich öffne meine Ebenen. Ich benenne diese Abschnitte um damit ich Zeugnisse, Funktionen, Intro abrufen und einfach doppelklicken kann, um die Ebenen hier zu bearbeiten. Ich weiß was passiert. Sobald ich meinen Repeater habe, gehe ich zum Inspector, klicke auf das Design, fülle den Hintergrund und mache ihm diese schöne graue, dunkelgraue Farbe, die wir dort haben, und dann einfach klick davon ab. Was ich jetzt tun werde , ist, diesen Look zu bekommen , den ich hier habe, ist, dass ich ein Bild einen Text haben muss, und wir müssen auch dieses kleine Häkchensymbol setzen. Ich fange an und setze hier ein Bild an, ziehe es ab , und wir sollten „ anhängen“ sehen . Das haben wir. Dann werde ich das Bild ändern. Ich wähle die Person dort aus. Dann spiele ich auch mit diesem herum , ändere diesen. Was ist, wenn ich das abrunden wollte? Ich sollte in der Lage sein , mit dem erwarteten Klick auf die Ecken zum Bild zu gehen der Lage sein , mit dem erwarteten Klick auf die Ecken und vielleicht 20 Pixel machen, um zu sehen, was passiert. Das ist großartig. Lass uns 100 Pixel machen. Sie können sehen, dass es ein bisschen rund sortiert wird, aber was ich tun möchte, ist, dass ich das einbringen möchte. Es sieht eher aus wie ein Kreis. Wir werden es ein bisschen größer machen. Ich denke, wir werden 500 Pixel machen und das sollte auch diese komplett abrunden . Jetzt füge ich etwas Text hinzu. Ich bringe das Schreiben von Absatztexten hierher, um sicherzustellen , dass er richtig skaliert ist. Jetzt wähle ich Absatz 2 aus, wenn ich auch noch etwas Text hinzufüge. Textfeld „Litte“. In diesem Fall werde ich es in Absatz 3 schreiben. Ich habe endlich die Bildgröße dort eingestellt. Der Text ist nach rechts angedockt. Wenn Sie auf der rechten Seite die Positionierung sehen, docke ich diese nach oben an, und dann sind die Ränder hier 120 Pixel. Wenn ich das anpassen muss, kann ich das anpassen , soweit der Abstand in Ordnung ist. Dann habe ich diesen verifizierten Käufer bekommen, ich brauche nur ein Icon, damit ich den Plus-Button bekomme. Was wir tun können, ist auf „Shape“ zu klicken. Offensichtlich können wir unsere eigenen Formen importieren, aber ich werde nur die Grundform ändern. Sie können bestimmte Formen herausfiltern. Wenn ich darauf klicke, kann ich Vektorgrafiken machen. Sie können auch Kategorien erstellen. Ich suche nach Icons. Dann ändere ich die Kategorie und du bekommst eine ganze Reihe von wirklich coolen Icons. Man sieht, dass es wirklich erstaunlich ist. Ich gebe nur das Häkchen ein. Mal sehen, was auftaucht. Cool. Wir haben das. Ich doppelklicke darauf, sollte das zur Seite hinzufügen. Ich werde das verkleinern. Ich gehe einfach zu meiner Füllfarbe und ändere diese hier in unsere grüne Farbe. Ich ziehe das in die Länge. Ich halte Control Alt, nur damit ich es berühre, und ich werde es verkleinern. Zoomen Sie ein bisschen hinein. Du kannst sehen, dass meine Guides es einrasten. Ich verschiebe den verifizierten Käufer nur ein wenig nach rechts. Nicht zu viel. Boom, da haben wir es. Sie können hier sehen, dass dies eine Feldprüfung war, aber das wird auch funktionieren. Ich klicke drauf. Ich kann sehen, ob ich es anpassen wollte, aber ich denke, ich lasse es einfach so. Schön. Jetzt gehen wir zu unserem nächsten Abschnitt über. Aber zuerst möchte ich nur schnell die Grenze hinzufügen. Sie können auf diesem Foto sehen, dass wir einen leichten kleinen Schlag haben. Wir haben eine Randgröße von eins und ist hier graue Farbe. Ich klicke auf den „Repeater“. Ich klicke auf „Design“ und wir möchten auf „Border“ klicken. Jetzt gehe ich zum Rand, klicke auf die graue Schaltfläche und mache das Pixel ein Pixel. Sie können sehen, dass es um die eigentliche ganze Repeater-Box herum gemacht hat. Das siehst du. Aber ich will es über die tatsächlichen Quadrate dort machen , die Karten. Ich klicke auf „Item“ und ändere dann die graue Farbe des Artikels und ein Pixel. Stellen Sie sicher, dass das 100 Prozent sind. Du kannst sehen, dass es das jetzt hat. Wenn ich auf „Repeater“ klicke, gehe ich zurück zu Border und schalte es einfach aus, setze es auf Null und schaue es mir an. Jetzt haben wir unser Borderline ein Pixel drauf. Super einfach hinzuzufügen, schöne Ränder. Es lässt es nur ein bisschen mehr knallen. Schön. Was ich tun werde, ist, dass ich einen weiteren Abschnitt hinzufügen werde. Wir bleiben bei einem leeren. Was ich tun kann, ist, dass ich einfach diesen ganzen Abschnitt kopieren oder diesen Text kopieren kann . Wenn ich hier runter gehe und dann auf „Einfügen“ drücke, kannst du sehen, dass es einfach den ganzen Abschnitt kopiert. Das ist eine Möglichkeit, die Dinge einfach zu beschleunigen. Wenn ich diesen Abschnitt loswerden möchte, kann ich mit der rechten Maustaste klicken und einfach auf „Löschen“ klicken, und es sollte ihn loswerden. Was wir jetzt tun werden, ist, dass wir hier einfach zu xt gehen. Ich kopiere meinen Text und füge ihn ein. Dieser Text wird ein H1 sein und das kopieren. Ich docke es an die Spitze an. Ändere das Andocken. Da sind wir los. Jetzt haben wir diese vier Icons. Dann Download-Button. dies zu tun, gehen wir zum Plus-Button und wählen den „Layouter“ aus. Ich setze einfach Spalten wie diese ein. Wir haben vier Spalten. Bring das so mit. Ich werde das vergrößern, diesen Abschnitt. Zoomen Sie ein bisschen hinein. Ich ziehe das runter. Halten Sie Strg und Alt gedrückt, um es an den Abschnitt anzuhängen. Ich weiß nicht, was damit passiert ist. Es sollte so sein. Das werde ich ansprechen. Cool. klicke auf „Artikel hinzufügen“. Ich muss jetzt die Objekte hinzufügen. Was ich tun werde, sehe ich mir Plus an und dann füge ich Form hinzu, ziehe es und lege sie dort in die Box ab, und ich werde die Grundform ändern. Ich gehe zu „ Site-Dateien “ und klicke dann auf die SVG, die wir hier von Chrome haben. Klicken Sie auf „Zu Seite hinzufügen“. Ich skaliere es einfach hier hoch. Einfach so. Ich mache das Gleiche auch für die anderen Boxen. Schön. Jetzt klicke ich einfach auf den „Layouter“, ich gehe auf die rechte Seite. Dann ändern wir die Hintergrundfarbe oder schalten sie einfach aus. Das siehst du. Schalte es einfach aus. Ich öffne meine Ebenen, also stelle ich einfach sicher, dass ich den Artikel ausgewählt habe. Ich ziehe einfach. Ich lasse es dort auf dem Design. Zieh das auch. Boom, und los geht's. Wie du dort siehst. Es ist ungefähr die Größe, es muss nur repariert werden, also die Spalten. Gehen wir zu Abstand, gehen wir zu Item. Wir können die Polsterung anpassen. Wenn wir mehr Polsterung hinzufügen müssen, können Sie so etwas auf den Artikel eingeben. Ich füge den Button hier ein. Wie du siehst, scrolle ich nach unten. Ich werde mich einfach anpassen. Ich wusste nicht, was damit passiert ist. passe ich einfach schnell an. Wir haben unsere Seite fertig. Jetzt fügen wir die Fußzeile hinzu. Ich gehe zu KOMPOSITIONEN und gehe zur NAVIGATION und klicke auf „Footers“. Du siehst, dass wir hier ein paar haben. Für mich denke ich, dass ich mit dem mitmachen möchte, weil es dem ähnelt, was wir wollen. Darauf klicke ich. Wenn ich jetzt etwas verkleinere, ich nur sicher, dass sich die Fußzeile unten befindet, also doppelklicke ich, benenne die Fußzeile um und ziehe sie nach unten. Was ich tatsächlich tun kann, ist, dass ich als Master festlegen und als Fußzeile festlegen kann , aber diese Fußzeile ist bereits unten. Ich klicke darauf und klicke auf „Löschen“. Wählen wir diese Fußzeile aus und versuchen es erneut, als Master festlegen und auf „Footer“ klicken. Wir mussten die alte Fußzeile löschen , um diese zu einer Fußzeile zu machen. Jetzt können Sie sehen, dass wir unsere Fußzeile hier haben, und ich werde den Text hier verwenden. Dies wird Absatz 2 sein und was ich tatsächlich tun kann, ist einfach reinzugehen, zu kopieren, in die Kopfzeile zu doppelklicken. Ich habe auf die Vektorgrafik des Logos geklickt. Ich füge es hier unten ein. Da sind wir los. Wir haben das Logo-Pop-up. Ich lasse es in diesen Stapel fallen. Ich verschiebe den Text einfach so nach oben halte ihn ganz einfach. Das schiebe ich hoch. Ich gehe zum Plus, dann gehe ich runter zu Kontakt. Sie sehen dort haben sie abonniert, sie haben Kontaktformulare. Was ich tatsächlich tun kann, ist darauf zu klicken. Es wird diese Liste fallen lassen. Ich kann das hier reinbringen. Ich hab den Stack-Schlüssel. Was ich tun werde, ist, dass ich es in den Stapel bringe. Ich klicke auf den Inspektor. Ich werde das Design dieses Feldes bearbeiten. Ich werde es in diese graue Farbe machen, ich schalte den Rahmen aus dem Text. Ich mache es weiß. Könnte es auch grün machen. Ich möchte das auch weiß machen, Schriftgröße Absatz 2. Ich mache es so, könntest du die Eingabefarben ändern. Sie können all diese Einstellungen wirklich ändern. Ich bringe einfach die Waage, die in die Box passt. Dies ist die Erfolgsbotschaft. Wenn ich eine Vorschau anzeigen möchte, haben wir dort unsere Erfolgsmeldung. Jetzt erscheint das, sobald Sie auf die Schaltfläche „Beitreten“ klicken. Ich weiß nicht, ob du den Text tatsächlich hinzufügen kannst , wie ich es hier getan habe. Im Moment werden wir es einfach so lassen. Ich lösche den Titel des Titelfeldes, also brauchen wir das nicht und ich möchte den erforderlichen Button abnehmen. Klicken Sie auf das kleine Zahnrad und Sie können diese Einstellungen bearbeiten. Sie können bedingte Regeln hinzufügen, wenn Sie möchten. Ich möchte eine Regel für das Wix-Formular hinzufügen, jetzt können wir eine Nachricht schreiben. Ich kann das ausschalten. Ich kann es auf einen Link zu einer externen URL verwandeln, wenn ich möchte. Sie können sogar einen Download hinzufügen, aber Sie müssen dafür upgraden usw. Sie haben eine ganze Reihe verschiedener Dinge hier. Wie auch immer, lass uns zum Stapel hier drüben übergehen. Ich ziehe es hier rüber. Ich füge die Seiten hinzu. Wir haben Download, das wird Absatz 2 sein. Ich füge einige der Margen hinzu. Ich stelle sicher, dass du den Text auswählst und wir haben 15 Pixel. Ich gehe zu Control C, Control V. Ich gehe zu meinem Ebenenbedienfeld. Ich klicke mit der rechten Maustaste. Ich werde duplizieren. Sie können auch Strg D drücken, und es sollte den Text darin hinzufügen. Stellen Sie sicher, dass Sie es links und oben andocken. Noch einmal 15 Pixel. Wählen Sie Layer Control D und nach links aus. Dann werde ich bearbeiten. Wir haben einen Blog und Unterstützung. Dann habe ich diesen Stack. Ich drücke Control C, Control V und füge es ein, und dann fange ich es so ein. Sehr gut und ich werde einfach die anderen löschen. Süß, da haben wir es. Das muss ein bisschen mehr so sein. Ich werde mich ändern, das dort lassen und wir werden Instagram, Facebook und Twitter haben. Ich gehe zum Plus-Button der Elemente. Wir können tatsächlich soziale Medien nutzen. Ich gehe runter, um den richtigen zu finden. Sie möchten zu Embed und Socials gehen, und Sie werden soziale Bindungen finden. Du kannst es so sehen. Sie können jeden Stil auswählen, den Sie wollen. Ich klicke auf diesen Stil. Ich verschiebe es einfach hier rüber. Wir wollen es einfach so in diese Bar stapeln. Jetzt kann ich die sozialen Links einstellen. Was Sie tun möchten, ist darauf zu klicken und auf Social Links festlegen zu klicken. Ich kann Icons hinzufügen, wenn ich will. Aber ich lösche einfach TikTok. Ich denke nur, das sind Instagram, Facebook, Twitter. Instagram, Facebook, Twitter das ist in Ordnung. Ich lösche diese. Ich kann auch auf das Zahnrad klicken. Sie können diese Artikel ändern , was für Twitter ist, und ich kann hier auf den Link klicken und dann kann ich ihn in mein Instagram-Konto ablegen. Jetzt habe ich die sozialen Icons heruntergeladen , die ich möchte. Wie Sie hier sehen können. Was ich jetzt tun kann, ist, dass ich diese Icons ändern kann . Ich klicke auf Hinzufügen. Ich bin zu meinen Site-Dateien gekommen. Ich füge all dies der Galerie hinzu. Ich habe diese Icons hinzugefügt. Ich kann diese hier löschen. Twitter klicken Sie auf Fertig, und es sollte diese Symbole hinzufügen und gegebenenfalls das Layout ändern. Sie können auf den Layer klicken und auf horizontal oder vertikal klicken. Ich möchte ein Foto für dieses machen, ich kann die Symbolgröße sowie vielleicht 25 Abstände verringern. Ich denke, 10 Pixel sollten in Ordnung sein. Ich werde es einfach machen, und ich werde diesen Text löschen und stattdessen einfach die Symbole behalten. Wenn ich dann die Links ändern muss, kann ich auf Social Links klicken und kann ich auf Social Links klicken und ich kann die Links da drin. Schön, es sieht gut aus. Ich bin ziemlich zufrieden damit. Ich klicke auf Vorschau. 8. Team-Seite aufbauen: Jetzt erstellen wir die Teen-Seite, die ich hier entworfen habe. Sie können sehen, dass ich in XD bin und ich habe diese schönen Avatar-Bilder des Teams erstellt . Offensichtlich habe ich diese Bilder von Unsplash entfernt und ich habe einen Farbverlauf in Photoshop erstellt. Sie können in Photoshop sehen, dass ich die Bilder aufgenommen und dann den Farbverlauf und etwas Belichtung und den Schwarz-Weiß-Filter oben hinzugefügt damit diese Bilder einfach schön aussehen und platzen. Aber wir machen sie im Grunde einfach auf Marke, und wir haben hier einen kleinen Jobbereich, wir werden einige dieser Karten erstellen und dann auch die Vorteile mögen. Ich zeige dir, wie man das entwirft. Lasst uns in Editor X springen. Er ist bisher die Teamseite, ich habe im Grunde gerade eine neue Seite erstellt und ich habe den Text bereits von der Homepage hier bekommen. Daraus baue ich einfach. Ich verweise auf meine Editor-EXE-Datei zurück, damit ich den Text einfach kopieren und einfügen kann. Das mache ich sofort. Ich kopiere einfach den Text hier und füge ihn ein. Aus diesem Grund ist es immer gut, Ihre Website vorab zu gestalten , damit Sie einfach kopieren und einfügen können, was es super einfach macht. Ich skaliere nur die Größe des Abschnitts. Ich muss nur sicherstellen , dass dies angedockt ist. Ich gehe zu meinem Inspektor und docke das nach oben an, nicht nach unten, und dann möchte ich den Boden so skalieren. Großartig, super cool. benutze ich den Repeater wieder, der eines meiner Lieblingswerkzeuge ist. Wir können die vorgefertigten verwenden, wenn wir möchten. Aber dafür werden wir einen benutzerdefinierten erstellen, also ziehe ich den Repeater dort hinein. Ich gehe zu meinem Inspektor-Tool und setze die Breite auf 80 Prozent. Ich ziehe das und stelle sicher, dass es auftaucht, füge meinen Texten auf der linken Seite Zeilen hinzu, was wirklich gut aussieht. Was ich jetzt machen werde, ist, dass ich meine Bilder hinzufügen muss. Ich muss schnell hinzufügen und dann gehe ich zum Bild und ziehe es hinein, ich werde das skalieren, es dehnt das Bild aus, ich klicke auf Bild ändern, und dann gehe ich los um meine Bilder hinein zu ziehen. Wählen Sie sie aus und legen Sie sie dort ab. Ich wähle mein Hauptbild aus und möchte nur sichergehen, dass das erste Bild, ich klicke auf das Update, und dann sollte es dort aktualisiert werden. Schön. Ich werde dieses Bild ändern und möchte den Repeater jetzt tatsächlich erweitern , weil wir eine sechste Klasse benötigen. Gehen wir in die Einstellungen ein. Ich klicke auf den Repeater, gehe zu meinen Ebenen und stelle sicher, dass ich hier auf den Repeater klicke. Man kann sehen, dass Karten stehen. Was ich tun möchte, ist auf Artikel verwalten zu klicken. Was Sie tatsächlich tun können, ist duplizieren. Ich kann Punkt 3 duplizieren, und dann mache ich das noch ein paar Mal, und es sollte automatisch den gleichen Stil und das gleiche Design erstellen . Aus irgendeinem Grund muss ich nur die Höhe davon verlängern, weil es den Text T. stieß ich einfach. Einfach so. Super einfach. Schön. Jetzt werde ich nur noch doppelklicken oder Sie klicken auf Bild ändern und wählen dann jetzt diese anderen Bilder aus, und das letzte dort, Boom, ausgezeichnet. Sieht super toll aus. Was ich jetzt mache, ist etwas Text hinzuzufügen. Ich gehe zum Titel, und ich muss die Kontrolle behalten, und es hängt es tatsächlich an den tatsächlichen Repeater dort an . Ich möchte ungefähr 18 Pixel von unten machen. Ich glaube, das wird klappen. Ich klicke auf Text bearbeiten und dann muss ich den weißen Text machen. Ich muss es auf H2 lassen und ich werde es einfach so in Weiß ändern. Ich glaube, das funktioniert. Schön. Jetzt werde ich einfach die Namen der Teammitglieder kopieren und einfügen. Jetzt ist der ganze Text da. Wenn ich es jetzt auf die mobile Ansicht herunterlege, können wir sehen, dass alles da ist, wir müssen es einfach später reparieren und ändern, um es reaktionsschnell zu machen, aber im Moment sieht es ziemlich cool aus. Ich werde nur die Größe dieser Blöcke anpassen da sie tatsächlich etwa 450 Pixel betragen wird . Ich gehe zu meinem Inspektor-Tool und muss auf die Höhe gehen. Lass mich das sehen. Ich ändere es auf 450. Dort können wir es also besser sehen. Jetzt klicke ich einfach auf Vorschau , um schnell auf die richtige Größe zu wechseln , die wir verwendet haben, und cool, damit das Bild gut aussieht. Ich muss nur sicherstellen, dass die Größe das nicht tut. Ich klicke auf den Repeater und möchte sicherstellen , dass er auch oben und nicht nach unten angedockt ist. Ich schalte das aus. Ich ziehe das einfach nach unten, raste es ein und stelle sicher, dass du ein bisschen Platz zwischen dem Titel dort lässt . Ich glaube, das sieht besser aus. Cool. Exzellent. DNS sieht großartig aus. Ich bin damit zufrieden. Jetzt gehe ich zu meinem nächsten Abschnitt. Wir haben hier ein paar SMS. füge noch einmal einen Titel hinzu. Ich werde das dort hineinlegen, ziehen, bis ich diesen Abschnitt hinzufüge , und wir sollten es zum H1 machen. Ich glaube, das wird klappen. Ich werde nur die Breite ändern, ich gehe 50 Prozent. Da sind wir los. Schön. Ziehen Sie es um 50 Pixel von oben nach oben, senden Sie es, ich ziehe auch den unteren Teil dieses Abschnitts dorthin, um ihn zu erweitern. Schön. Jetzt haben wir ein paar Boxen, also wird das wieder ein Repeater sein . Gut alle Repeater. Layout-Tools, Repeater, und wir werden dieses einfach so ziehen und ablegen, und ich werde die Breite 80 Prozent machen. Dafür beträgt die Höhe etwa 300 Pixel. Ich werde sicherstellen, dass ich den Artikel auswähle, und ich werde nur 300 Pixel verwenden, um das mehr Quadrat zu machen, und ich klicke auf das Design und mache den Hintergrund dunkelgrau dass wir hier haben und auch sehen, ob wir dort eine Grenze hinzufügen können. Cool. Wir haben die Grenze in Gang. Wir haben eine schöne Grenze, die wir geschaffen haben. Was ich jetzt mache, ist etwas Text hinzuzufügen. Ich werde dort einen Titel fallen lassen, wir werden auch einen Absatz fallen lassen, und wir werden wahrscheinlich auch noch ein paar Absätze brauchen . Ich klicke auf Text bearbeiten und wähle die weiße Version aus. Los geht's, ich werde einfach noch einmal hineinzoomen, und ich kopiere einfach den Text von hier aus, ich ziehe das raus, dieses wird H2 gehen und wir werden ihn weiß machen und nur die skalieren Breite dort. Wir hacken die SMS nicht ab. Wir haben den visuellen Designer, wir haben diesen Text hier und wir werden ihn auch zum grünen Absatz machen. Wir ziehen es nach oben, ich ziehe das auch ein wenig zur Seite, 25 Pixel von den Rändern entfernt. Jetzt füge ich hier einen weiteren Absatz hinzu. Ich füge das einfach und dann wählen wir den weißen Absatz aus. Stellen Sie sicher, dass es einrastet, schön. Jetzt haben wir hier ein paar nette graue Zecken für das Gehalt. Ich könnte diesen Text einfach so hier kopieren. Jetzt dachte ich nicht, dass ich die richtige Farbe dafür habe. Ich wähle einfach die schwarze Version aus und mache dann diese hellgraue Farbe. Ich spreche das an. Schön. Ich werde das verkleinern. Dann fügen wir hier einen Button zur Ecke hinzu, cool. Ich klicke auf Text ändern, Jetzt anwenden. Wir gehen zur Schaltfläche Design und ändern Sie den Hintergrund auf Null Prozent Deckkraft. Wir werden eine Grenze hinzufügen. Diese Grenze wird sein, sagen wir einfach zwei Pixel und es wird grün, schön sein. Jetzt will ich es nicht wirklich abgerundet, also werde ich die Rundung ausschalten und dann boomen, wir haben fast genau das gleiche Design das wir hier erstellt haben, wie Sie dort sehen können. Mit diesem Knopf kann ich ihn nach links verschieben. Der Text muss eigentlich auch grün sein. Ich gehe zum Design, klicke auf den Text, ändere die Farbe und klicke mit der linken Maustaste auf unsere Themenfarbe. Boom, wir haben unseren Hintern da. Schön. Was wir jetzt tun, ist einfach den Text der anderen durch das zu ersetzen, was ich hier gemacht habe und dann sind wir auch für diesen kleinen Abschnitt fertig. Schön. Jetzt zum nächsten Abschnitt. Ich drücke das Plus erneut, ich wähle einen leeren Abschnitt aus. Ich gehe zu meinen Ebenen und nenne einfach diesen Abschnitt Vorteile. Das ist Jobs, und das ist, ich werde diese Team-Shots einfach nennen. Ich mag es, die Abschnitte ordentlich, schön genannt zu haben. Jetzt gehe ich runter. Wieder einmal ändern wir die Farbe wie gewohnt in die schwarze Farbe. Ich dupliziere diesen Text und lege ihn hier in diesen Abschnitt ein. Stellen Sie sicher, dass Sie Strg C drücken und dann Control V nur zum Kopieren und Einfügen drücken, das sollte funktionieren. Lassen Sie mich es einrasten, feste Pixel. Ich werde auch nur die Höhe skalieren. Wir haben hier etwas SMS. Ich kann diesen Text kopieren, ihn hier einfügen, es sollte in Ordnung sein. Ich wollte nur den Text ändern. Ich möchte diese Texte einfach so zentrieren. Da sind wir los, schön. Jetzt hat dieser einen Repeater ähnlich diesem. Ich kopiere diesen Repeater. Ich füge es ein. Das Coole Ding wird tatsächlich das Ganze duplizieren, was das super einfach macht. Dafür werden wir tatsächlich keinen Hintergrund haben. Ich ziehe die Deckkraft ab und es wird nur einen Punkt-Pixelrahmen haben, wie Sie dort sehen können. Was werden wir jetzt machen? Ich lösche den Haupttext und stelle sicher, dass du es aus dem ersten Feld machst , dann löscht er ihn aus allen anderen Feldern, weil es sich um einen Repeater handelt. Ich werde das löschen, er hat diese Icons, das H3 oder H2 und dann den Absatztext. Ich kann das löschen, ich kann den Button auch löschen und ich denke, wir können loslegen. Dafür gehe ich den Text bearbeiten. Ich gehe H3. Es ist ein bisschen mutig, aber ich werde die Kühnheit ausschalten. Exzellent. Ich skaliere dort die Breite des Containers. Ich ziehe das zur Seite, was cool ist. Wahrscheinlich etwa 40 Pixel oder 50 Pixel. Ich kopiere diesen Text einfach und füge ihn hier ein. Dann schaue ich mir jetzt nur an, wie groß diese Boxen sind. Die Höhe beträgt etwa 210. Das werde ich ändern. Klicken Sie auf das Item und ich gehe zu 210 Pixel. Ziehen Sie den Text und dann zentriere ich einfach alles. Wenn Sie die Umschalttaste gedrückt halten und nach ihnen auswählen, kann ich einfach die Umschalttaste und die Pfeiltasten gedrückt halten und ich tippe so darauf. Schön. Ich repariere die anderen Kisten. Ich möchte nur mein Icon hier hinzufügen. Was ich tun kann, ist zu Plus zu gehen. Ich klicke auf Shape. Ich halte Control Alt gedrückt und stelle sicher, dass es einfach so klickt und einrastet. Ich klicke auf Grundform ändern. Ich habe sie bereits als SVGs und PNGs hochgeladen , nur für alle Fälle. Jetzt muss ich sie einfach schnell in den Manager aufnehmen. Es wird nach Datum sortiert sein. Sie können sehen, dass es als SVGs hochgeladen wird. Es wird ihnen tatsächlich im Manager zeigen , sie sind wunderschön. Ich möchte auf diesen klicken. Da ich es dann schon in XD gemacht habe, muss ich es nur noch exportieren und es ist einfach, das zu tun. Um es wirklich einfach zu halten, kann ich einfach Control Alt halten und adressieren, duplizieren und einfügen. Es fängt tatsächlich an, es in alle Boxen dort einzufügen. Jetzt ist es im Repeater. Wir müssen auch auf Artikel verwalten klicken. Was ich jetzt tun werde, ist, ich auf die drei Punkte klicke und sie wie beim letzten Mal dupliziere. Jetzt habe ich einfach so sechs Kisten. Was ich jetzt mache, ist nur sicherzustellen , dass ich den richtigen Artikel auswähle. Klicken Sie auf die Vektorgrafik. Ich glaube, es gibt ein Duplikat dort. Ich werde die Vektorgrafik ändern. Der nächste ist die Gesundheit. Dann sind wir fertig. Ich kann sehr schnell auf Vorschau klicken. Dann können wir sehen, wie es wie die Teamseite aussieht, es hat die Animation von der ursprünglichen Sache. Ich denke, wir sollten ein bisschen Animationen hinzufügen , damit es besser aussieht. Der Button hat den Hover-Effekt , der wirklich großartig aussieht. Die Texte gingen irgendwie nach links, aber du hast diese Kühlboxen und vielleicht könnte ich dort ein Schwebe-Ding hinzufügen. Was ich machen werde, ist auf Edit. Ich überprüfe nur diese Texte und stelle sicher, dass sie oben angedockt sind. Sie können sehen, dass ich das Andocken ausschalte und sicherstelle, dass es oben angedockt ist. Ich klicke hier auf die Karten und die Gegenstände und mal sehen, ob wir eine Hover-Interaktion hinzufügen können. Was ich jetzt machen möchte, ist, lass uns einen Wachstumseffekt machen. Ich schaffe es 0,5 Sekunden. Erleichtern Sie sich und entspannen Sie sich, das ist wunderschön. Sie können sehen, wie es aussieht wenn Sie mit der Maus darüber fahren. Ich klicke auf Vorschau und sehe, wie es aussieht. Sie können sehen, ob Sie mit der Maus darüber fahren und jetzt haben all diese Elemente den kleinen Animationseffekt, ich denke, das ist ziemlich ordentlich. Sieht ziemlich cool aus, das liebe ich. Wir haben dort einen kleinen Hover-Effekt. Jetzt kann ich dazu auf den Repeater klicken. Ich habe den Repeater ausgewählt. Ich werde sicherstellen, dass ich auf den rechten Repeater klicke , und klicke dann auf das Element da wir dem Repeater keine Animation hinzufügen können, wir können es nur mit dem eigentlichen Element tun. Ich klicke auf den Artikel bei Hover. Dafür können wir noch etwas anderes hinzufügen. Lass uns mit Float gehen. Ich mache das Gleiche, wir machen ungefähr 0,5 Sekunden. Einfach rein und raus. Wie Sie sehen können, wird es das tun. Wenn ich auf Vorschau klicke, kannst du jetzt sehen, was es macht. Das macht es, das ist ziemlich ordentlich. Lass mich das einfach reparieren. Genial, das gefällt mir. Fügt ein bisschen Effekt hinzu, cool. All diese Interaktionen, fügen Sie einfach weitere Details auf der Website hinzu und lassen Sie sie einfach zehnmal besser aussehen. Schließlich fügen wir diesen Elementen eine Animation hinzu. Ich gehe einfach zu den Ebenen, klicke auf das Element, also gilt es für alle. Klicken Sie erneut auf den Blitz. Ich werde gehen, um Hover-Interaktion hinzuzufügen. Lasst uns jetzt was anderes machen. Versuchen wir es vorwärts. Mal sehen, was das macht. Einfach rein und raus. Ich glaube ich gehe, lass uns ein Waschbecken versuchen. Spiel das und es geht runter, das ist nicht so schlimm. Wir können uns auch drehen. Ich glaube, wir bleiben beim Drehen. Dafür belassen wir es auf 0,3 Sekunden. Wir werden das Ein- und Aussteigen erleichtern. Ich klicke auf Vorschau. Klicken Sie auf die Desktop-Ansicht, skalieren Sie diese einfach so, dass es die richtige Größe des Designs für hat, und dann dreht es sich jetzt ein wenig. Das ist ziemlich ordentlich. Das gefällt mir, echt genial. Schön. So wird die Team-Seite erledigt. Ich kann immer zurückgehen und kleine Details und Abschlüsse hinzufügen , aber ich denke, es sieht wirklich gut aus. 9. Reaktionsfreudig machen: [MUSIK] Sobald Sie mit Ihrer Website, Ihrer Seite, was auch immer es ist, zufrieden sind , möchten wir zum anderen Haltepunkt gehen und damit beginnen, ihn anzusprechen. Ich klicke auf den iPad-Haltepunkt, damit wir einige Dinge fehl am Platz sehen können. Du musst das beheben und auch auf dem Handy. Jedes Mal, wenn Sie einen oberen Haltepunkt an der höheren Auflösung ändern , sollte dies auch die Änderung bei den niedrigen vornehmen. Wenn Sie am iPad arbeiten, sollte es auf dem Handy aktualisieren. Ich klicke hier an, dann spreche ich das an. Wir wollen nur sicherstellen, dass alles ziemlich gut passt. Ich muss Dinge skalieren , um es fit zu machen, dann ist das total cool. Wenn ich dort eine Änderung vornehme, kannst du sehen, dass der Desktop-Ansicht es nicht stopfen sollte. In dieser Ansicht füge ich tatsächlich ein Hamburgermenü hinzu. Dafür kann ich die Ebenen ausblenden. Ich möchte mit der rechten Maustaste auf das Menü klicken und auf „Nicht anzeigen“ klicken, und es sollte das ausblenden. Wenn ich zur Desktop-Ansicht gehe, kannst du sehen, dass sie immer noch da ist. Wenn Sie etwas ausblenden möchten, klicken Sie einfach mit der rechten Maustaste auf die Ebene und klicken auf „Nicht anzeigen“. Wenn Sie es erneut anzeigen möchten, klicken Sie einfach auf „Anzeigen“ und es sollte so angezeigt werden. Aber wenn wir zur anderen Ansicht zurückkehren, sollte sie sie nicht preisgeben. In einem Handy sollte es es auch nicht zeigen. Was wir dann tatsächlich tun können ist, dass ich schon ein Hamburgermenü habe und die Farbe einfach auf Weiß ändere. Du kannst es grün machen, wenn du willst. Das funktioniert. Ich werde es ein wenig skalieren, also 40 Pixel. Was wir mit diesem Hamburgermenü machen können, ist dass wir das natürlich verwenden können. Ich klicke auf „Menü öffnen“. Wenn jemand darauf klickt, wird es so aussehen. Es ist in einem Container. Ich kann den Hintergrund ändern, wenn ich also grün oder schwarz machen möchte , was auch immer es ist. Ich glaube, ich mache es einfach grünlich. Das ist unser Hauptgrün. Dann klicke ich das ab und der Text, er kann schwarz sein, das ist völlig in Ordnung. Ich kann den Text ein bisschen größer machen, wenn ich will, vielleicht 24 Pixel. Ich denke, das ist in Ordnung. Wenn ich einfach herausklicke, siehst du, ob ich einfach auf „Vorschau“ klicke und wenn ich auf das Hamburgermenü klicke, kannst du sehen, wie es funktioniert. Es ist bereits eingebaut und macht es super einfach, das zu benutzen. Was ich hier machen werde, ist, dass ich die Größe anpassen werde . Wir haben den Text T. Wir können einen Text bearbeiten. Wir können die Größe fallen lassen, oder was ich tatsächlich tun kann, ist das so hervorzubringen. Ich überprüfe auch die Desktop-Ansicht. Ich werde sehen, dass es dort keine Probleme verursacht. Wir haben dieses Bild. Diesen kann ich es vergrößern. Das hier weiß ich nicht warum es da war, also bringe ich das hin. Ich gehe zu meinem Layout. Jetzt ändere ich einfach die Höhe. Wie Sie sehen können, lege ich dort 300 Pixel hin. Schön. Jetzt sollten dieser Text und dieser Boden unten sein. Das bringe ich einfach mit. Entferne das. Ich ziehe die Box heraus, also 360 Pixel. Ich ziehe das und dann den Download-Button. Es sieht gut aus. werde ich den Text nur noch breiter machen, das Feld dort. Gleiches gilt für diese im Repeater. Ich gehe in die Ebenen. Stellen Sie sicher, dass ich den Text auswähle. Ich kann die Größe des Repeaters tatsächlich vergrößern Wenn ich ihn also herausziehen möchte, sollte er die Probleme dort beheben. Ich möchte auf den Text klicken und kann mit den Rändern herumspielen. Gehen wir 250, und Sie können sehen, dass es etwas mehr Platz hinzufügt. Schön. Auch bei diesem werde ich ein paar Pixel an den Rändern hinzufügen. Ich glaube nicht, dass das funktioniert. Klicken wir auf den Repeater. Ziehen Sie dies an den Rand heraus. Ich füge oben etwas Polsterung hinzu. 50 Pixel, das funktioniert. Dann mache ich das zu einer einzeiligen Sache, also ziehe ich das einfach heraus und ziehe es ein bisschen nach unten wie etwa 28 Pixel. Schön. Sieht viel besser aus. Jetzt können wir hier sehen, dass dieser Text etwas ausgestopft ist, also werde ich das skalieren. Zieh es nach unten. Da sind wir los. Das hat das behoben. Es hat ein bisschen zu viel Größe, also passe ich die Größe und die Ränder oben an oder mache es wie 90 Pixel. Da gehst du. Schön. können wir um die Breite herum spielen. Ich möchte es auf 70 Prozent setzen. Ich überprüfe nur die Desktop-Ansicht. Schön. Es nimmt dort keine Änderungen vor. Jetzt klicke ich auf den mobilen Haltepunkt damit wir das sehen können. Du siehst das Maximum. Wenn wir es vergrößern, wird es 720 sein und dann ist der niedrigste 320, wie wir das sehen können. Das Handy wird sehr klein sein. Jetzt können Sie sehen, dass wir auch wieder einige Anpassungen vornehmen müssen . Bearbeiten wir den Text und ändern die Größe auf 40. [MUSIK] Sobald du das alles getan hast, sollte alles in die Größe passen. Das ist die iPad-Ansicht und dann auch das PhoneView. Passen Sie nur die Größe an. Grundsätzlich geht man einfach auf die Größe, passt die Flüssigkeit an und passt dann die Breite für einen Großteil des Zeugs an. Wenn es sich um einen Repeater oder eine Karte oder ein Layout handelt, ändern Sie einfach das Layout in ein vertikales Layout. Wenn Sie mit der rechten Maustaste klicken, haben sie beispielsweise Einstellungen , hatten die Karten ein ListView. Aber es geht im Grunde darum, den Text richtig anzupassen und ihn gut aussehen zu lassen. Dann war's das. Sobald Sie damit zufrieden sind und immer auf „Vorschau“ klicken können, aber wenn Sie veröffentlichen möchten, klicken Sie einfach auf die Schaltfläche „Veröffentlichen“. Es wird dir einen Editor-X-Link geben. Sie können hier sehen, dass ich dafür bereits einen Link festgelegt habe und ich kann auf „Site anzeigen“ klicken. 10. Animationen hinzufügen: Ich zeige dir, wie du Interaktionen in Animationen hinzufügst . Was Sie tun möchten, ist, dass Sie einen Abschnitt auswählen möchten. Ich wähle hier meinen Hero-Bereich aus. Wie Sie sehen können, ist es ausgewählt. Ich gehe zur rechten Seite des Specter und klicke auf den Thunderbolt und klicke auf „Hover-Interaktion hinzufügen“. Was ich tatsächlich tun kann, ist eine benutzerdefinierte Interaktion hinzuzufügen, also klicke ich dort auf diese Schaltfläche. Jetzt werden Sie einige Aufforderungen erhalten , das Interaktions-Timing einzurichten und Layout- und Designänderungen vorzunehmen. Sie können den Hover-Status festlegen, wenn Sie Mauszeiger auf das anfängliche Laden der Website bewegen. Ich kann das Timing ausschalten. Zum Beispiel, wenn ich das vielleicht so nach oben bewege, und vielleicht bewegen wir das vom Bildschirm. Ich klicke auf „Fertig“. Jetzt kannst du sehen, ob ich zurück zur Hover-Interaktion gehe , es hat die Sekunden da. Also kann ich darauf klicken und ich kann die Sekunden ändern. Vielleicht möchten Sie es auf 0,6 und wir möchten ein - oder aussteigen. Das ist in Ordnung. Das können wir ändern. Das mache ich auch 0,6. Jetzt können Sie sehen, ob ich auf „Play“ klicke , an dem Ort, an dem ich es abgelegt habe , diese Bewegung verwenden und sie herunterbringen wird. So können Sie sehen, dass sie im Grunde genommen sehr einfach einrasten . Ich klicke auf „Fertig“. Wenn ich jetzt auf „Vorschau“ klicke und die Ansicht ändere, kannst du das sehen, wie es funktioniert. Es ist so einfach. Wenn du schwebst, macht es das. Wenn ich zurück zu Edit gehe, möchte ich eigentlich nicht, dass der Hover auf dem Text steht, ich möchte, dass es ein Ausgangszustand ist, also sollte es darauf sein. Ich klicke auf „Fertig“. Schön. Jetzt klicke ich auf den Button. Ich füge eine benutzerdefinierte Interaktion hinzu. Für den Button mache ich das zu einem Hover-Status. Ich mache den Hintergrund, wir können ihn dunkler machen. Wir wollen es dunkelgrün machen. Das wird ganz einfach sein. Eigentlich gehe ich einfach auf 0.3. Ich klicke auf „Spielen“. Ich klicke auf „Fertig“. Dann klicke ich auf „Vorschau“ , um sicherzustellen, dass die Ansicht stimmt. Jetzt können Sie sehen, wie ich darauf schwebe , es wird wirksam. Einfach nur diese kleinen Interaktionen zu machen, macht es einen großen Unterschied. Es macht Ihre Website viel mehr Spaß. Du kannst auch Sachen hinzufügen. Lass uns zum Repeater gehen. Ich klicke selbst auf die Vector Art, und ich kann tatsächlich eine Animation nur auf die Kunst selbst machen . Doppelklicken Sie einfach hinein, stellen Sie sicher, dass Sie sich in den Ebenen innerhalb des Objekts befinden, und klicken Sie auf „Animation“. Jetzt kann ich einfach einfache Animationen wie diese hinzufügen einfache Animationen wie diese anstatt sie dem gesamten Abschnitt hinzuzufügen. Ich kann reinschwimmen, ich kann mich abstellen, was auch immer du tun willst. Es gibt so viele Dinge, die Sie tun können: drehen, aufdecken, hineinschieben. Ich mag das Gleiten, also klicke ich auf „Glide-In“. Ich kann auf „Anpassen“ klicken. So kann ich auch die Richtung, die Entfernung ändern , das kann ich ändern, die Dauer, die Verzögerung und nur zum ersten Mal animieren. Dann klicke ich auf „Spielen“, das siehst du. Wenn ich die Entfernung erhöhen möchte, machen wir es einfach wie 150 Pixel Dauer, lass uns 1,7 Dauer gehen. Dann können wir das spielen. Es ist ein bisschen zu langsam. Da sind wir los. Jetzt haben wir eine benutzerdefinierte Animation. Wenn Sie es auswählen, können Sie sehen, dass es blau ist, sodass Sie sehen können, dass es animiert ist. Jetzt können wir das Gleiche tun. Sie können sehen, weil es sich um einen Repeater handelt, dass er dieselbe Animation anwendet. Wenn ich also nur auffrische, siehst du, dass es so schwebt. Sie können Texten, Symbolen und jeder Ebene Animationen hinzufügen , und so fügen Sie diese coolen kleinen Hover-Effekte und Animationen hinzu. 11. Apps aus dem Markt installieren: [MUSIK] Wir gehen oben links und klicken auf das App Market Icon. Sie können sehen, dass es Sie für die Seiten zum App-Markt zu Hause bringt. Sie erhalten Empfehlungen, Sie werden bekommen, was jetzt im Trend liegt, Sie erhalten dort einige Geschäftslösungen , eine kostenpflichtige Lösung, einige Dinge sind kostenlos, manche Dinge sind auch Testversionen. Du wurdest von Wix gemacht. Wenn Sie eine Galerie hinzufügen möchten, können Sie Wix-Forengruppen, Geschäfte, sogar Buchungen hinzufügen , das sind zusätzliche Kommentare usw. Sie können nach Teamauswahl, neuesten Apps filtern, es gibt 70 verschiedene Dinge, die Sie können fügen Sie tatsächlich hinzu. Wenn Sie hinzufügen möchten, gehen Sie vielleicht zu Leads sammeln. Wir können sehen, dass wir Formulare oder Popups hinzufügen können. Was ich mache, ist, dass ich einen Wix-Chat hinzufüge . Darauf klicke ich. Ich kann sehen, wie es aussieht, als wäre es ein kleiner Chat-Bot, der auftaucht. Wenn jemand auf meiner Website landet, kann er mit dem Kundensupport chatten. Ich werde sehen, dass es ein kostenloser Plan ist, der großartig ist. Ich kann mir die Ansichten ansehen, die Bewertungen. Ich klicke auf Zur Website hinzufügen Wix. Jetzt werde ich das einfach verschieben, inspiziere das. Jetzt können wir sehen, dass die App automatisch direkt an Ihre Website angeschlossen wird. Ich kann auf die Einstellungen klicken, es öffnet den Wix-Chat hier. Ich kann mich damit beschäftigen und die Dinge ändern. Engagieren Sie besuchte Kapital As passen Sie es an. Ich kann auf Chat verwalten klicken. Ich sehe die Chat-Stunden. Dafür müssten Sie ein Upgrade durchführen, aber Sie können die Stunden bearbeiten. Ich kann die Formularfelder und das Online-Formular auswählen. Sie haben so viel Kontrolle darüber , was Sie tatsächlich damit machen können. Ich kann mir das Display anschauen. So sieht es aus. Das sieht ziemlich cool aus. Es verwendet meine verwendeten und bereits festgelegten Schriftarten , die ich auch für das Design eingestellt habe. Ich füge das Logo dort Sie können sehen, dass es das Logo hinzufügt. Ich kann die Farbe der Chats ändern und vielleicht möchte ich es wie die blaue Farbe machen , so dass das Grün dort leicht beeinträchtigt wird. Das ist echt cool. Texte und Icon, das ist in Ordnung. Ich kann das Icon ein- und ausschalten. Ich kann es auch ändern. Ich kann das Logo setzen, wenn ich will. Ich gehe oder du für das abgerundete, ich denke, das ist in Ordnung. Ich kann mir den Text auch anschauen. Schicken Sie innerhalb weniger Stunden eine Nachricht , um Ihnen zu helfen. Ich kann hinzufügen die E-Mail ist remio1 @gmail, das ist ziemlich cool. Das kann ich ändern. Ich kann eine Animation machen. Du übernimmst all diese Kontrolle. Wenn ich mir das Display noch einmal anschaue, wird es so aussehen. Ich kann auf Posteingang öffnen klicken und es wird eine Verbindung zu meinem integrierten Posteingang auf meiner Website herstellen. Wenn ich in den Posteingang gehe, kannst du sehen, wie es aussieht , wenn jemand eine Nachricht sendet, ich bekomme die Nachrichten hier und ich kann antworten. Hey Dan, hier um zu helfen oder was auch immer und ich kann die E-Mail schicken. Sie können sehen, einfach so erhalte ich Kontaktdaten. Ich kann die Einstellungen auch hier bearbeiten. Es ist wirklich einfach zu bedienen und so benutzt man Apps und es ist wirklich cool. Wenn ich auf Vorschau klicke und jemand darauf klickt, kannst du sehen, wie es aussieht. Ihr braucht Hilfe bei der App oder so, was auch immer es ist. Du hast kleine Emojis , die ziemlich beleuchtet sind. Das ist ein wirklich ordentliches Tool, das Sie hinzufügen können, wenn Sie Apps zu Ihrer Website hinzufügen. [MUSIK] 12. Grundlegende SEO: Ich zeige Ihnen, wie Sie eine grundlegende SEO auf Ihren Seiten auf Ihrer Website durchführen . Sie möchten in die linke obere Ecke gehen, auf Seiten klicken und dann zur Startseite navigieren. Sie können offensichtlich jede einzelne Seite bearbeiten. Ich zeige dir vorerst, wie man die Hauptseite macht. Was Sie tun möchten, ist hier auf diese drei kleinen Punkte zu klicken . Sie möchten zu SEO Basics gehen. Sobald ich darauf klicke, erhältst du eine ganze Reihe von Optionen, die du in der oberen Ecke verwalten kannst. Ich kann zur Seite Info gehen. Ich kann die Seite offensichtlich umbenennen. Ich kann das „Home“ nennen, wenn ich will. Es wird mir sagen, dass dies die Homepage ist. Ich kann auf Erweiterte Einstellungen klicken. Ich kann das Caching auch manuell steuern. Ich kann zu Berechtigungen gehen, und im Moment ist es tatsächlich für alle offen, aber vielleicht ist es eine Seite nur für Mitglieder oder eine Anmeldeseite, oder vielleicht ist es eine private Seite. Dann können Sie es auf Passwortinhaber legen und ein Passwort festlegen. Sie können auch nur auf Mitglieder klicken. Wenn dies nur die Mitglieder oder zahlenden Kunden sind, können Sie dies auswählen. Ich gehe zurück und klicke auf alle, damit jeder diese Seite sehen kann. Ich gehe jetzt zu SEO Basics, und dies ermöglicht es uns, den Titel und auch die Absatztexte zu bearbeiten , wenn es um die Meta-Beschreibung in Google oder einer Suchmaschine geht . So oben kann man sehen, dass es nur Heimspektrum steht. Aber was ich tun werde, ist, dass ich das ändern werde. Was ich jetzt tatsächlich tun kann, ist das Titel-Tag zu bearbeiten. Anstatt nur Home Specter zu haben, möchten Sie es mit Schlüsselwörtern spezifischer gestalten . Ich füge etwas Text ein. Specter, eine sichere Ethereum-Geldbörse für Token und NFTs. Jetzt kann ich den Text offensichtlich ändern wenn ich den bearbeiten möchte. Was wir hier haben, ist die Meta-Beschreibung. Sie können sehen, dass es dort keine Beschreibung gibt. Ich füge dort ein paar Texte ein. Jetzt kannst du sehen, dass es auftaucht. Wenn bei Google jemand Specter nachschaut, dann ist das der Text , den er beim ersten Ergebnis sehen wird . Dann kann ich auf Gehe zu URL klicken. Es wird sich öffnen oder Vorschau anzeigen und mir offensichtlich einfach die Seite dort zeigen. Dann unten möchten Sie sicherstellen, dass Suchmaschinen diese Seite indizieren lassen , also erscheint sie tatsächlich in Google. Wenn dies ausgeschaltet ist, werden die Bots in den Suchmaschinen die Seiten und alle Backlinks nicht tatsächlich durchscannen . Sie können auch zu Social Share gehen. Wenn jemand Ihre Website auf Facebook oder Instagram oder einer dieser Plattformen teilt , erhalten Sie normalerweise ein Pop-up, das eine Vorschau der Website enthält. Was Sie tun möchten, ist ein Bild hochzuladen. Es ist nur ein einfacher Zusatz hier. Sie können sehen, dass statt etwas Leeres oder einfach nur zufällig zu haben , die Suche ein Logo oder etwas von der Website auswählt , jedes Bild, es wird mit diesem Bild angezeigt hier und offensichtlich wird es den Titel kopieren, den ich in den SEO Basics gemacht habe , und die Meta-Beschreibung hier. Sie können hier sehen, wie es in der Vorschau auf Social aussieht. Ich kann das Bild offensichtlich anpassen und verschieben, aber dieses Bild war 1.080 mal 600 Pixel, und Sie können sehen, dass es so aussieht. Dann kannst du nach unten scrollen und sie haben Twitter-Einstellungen hier. Twitter sieht ein bisschen anders aus, wie Sie dort sehen können. Ich kann es ändern, um klein oder groß zu sein. Das ist auch wirklich cool und ich kann dort die Metadaten für Twitter bearbeiten. Das ist auch eine andere coole Sache. Du hast fortgeschrittene SEO. Normalerweise spiele ich damit nicht herum. Sie können es als strukturiertes Datenmarkup bezeichnen , damit Sie ein neues Markup hinzufügen können. Du hast Robots Meta Tags. Wenn Sie also nicht möchten, dass Bots so etwas folgen oder indizieren, können Sie das ändern, und dann haben Sie auch zusätzliche Tags , aber normalerweise überlasse ich dies SEO-Experten. Sie können auch einen SEO-Partner bei Wix einstellen und dieser wird Ihnen helfen. Das sind die SEO Basics. Ich würde mit jeder Seite, die Sie entworfen haben, mitmachen und dasselbe tun, und es wird nur bessere Ergebnisse für Sie erzielen. 13. Einbinden: [MUSIK] Ich zeige Ihnen, wie Sie ein Widget in Ihre Website einbetten können . Ich bin in Calendly und klicke auf das Zahnrad und klicke auf Zur Website hinzufügen. Calendly ist mein Kalenderbuchungssystem und ich verwende es für meine Kunden. Ich werde die Option in Zeile einbetten auswählen, und was Sie tun werden, ist einfach auf Code kopieren zu klicken und es wird diesen HTML und JavaScript hier kopieren , was in Ordnung ist. Ich kann die Farben natürlich ändern, aber ich kopiere das einfach , gehe zurück zu Editor x. Jetzt möchten Sie auf Elemente hinzufügen klicken, und Sie möchten zu Einbetten und Social wechseln. Jetzt können Sie sehen, dass Sie ein Widget einbetten können, eine Website einbetten und ein benutzerdefiniertes Element einbetten können . Was ich jetzt tun möchte, klicke auf Widget einbetten, es wird hier ein Kästchen platzieren. Jetzt strecke ich die Box einfach auf. Ich klicke dort auf das Menü klicke auf Code eingeben und klicke auf Control V, um es einzufügen. Jetzt möchte ich auf Aktualisieren klicken. Dann siehst du schon, dass wir unser eingebettetes Calendly-System genau dort haben. Sie können sehen, dass es dort eingebettet ist. Ich kann fortfahren und auf Vorschau klicken. Ich werde hier einfach meinen Desktop auf die richtige Größe ändern . Du siehst, ich kann durchblättern und es hat eine kleine Bildlaufleiste. Ich muss die Ränder in diesem Abschnitt anpassen. Dann kann ich darauf klicken und ich kann einfach so einen Calendly buchen. Super einfach zu machen und wirklich einfach. Wenn ich ein Handy habe, werden wir sehen, wie es auf dem Handy aussieht. Sieh mal, dass es ziemlich reaktionsschnell ist. Offensichtlich hat es die Bildlaufleiste, also müsste ich es wahrscheinlich länger machen. Lassen Sie uns zurück zur Seite bearbeiten. Ich gehe einfach zur Desktop-Ansicht. Ich klicke auf den Abschnitt. Stellen Sie sicher, dass ich den Abschnitt hier auswähle. Dann passe ich einfach die Höhe an. Wir machen die Höhe 1.200. Das ist ein bisschen zu viel. Wir fahren 800 Pixel. Es öffnet es nur ein bisschen mehr, damit wir das sehen können. Dann können wir offensichtlich einige dieser anderen Teile in Calendly loswerden , damit wir einige davon ausschalten und verstecken können und nur ein oder zwei haben , es wird ein bisschen besser aussehen. So bettet man ein Widget ein. Du kannst eine ganze Reihe von Sachen einbetten. 14. Einen Blog erstellen: [MUSIK] Wir werden auch an der Blog-Seite arbeiten. Das werden wir ausbauen. Für diesen Teil füge ich tatsächlich einen Blog hinzu. Ich gehe unten im 11. Menü und klicke auf „Blog“ und du kannst sehen, dass es eine Schaltfläche mit der Aufschrift „Zur Seite hinzufügen“ gibt. Ich klicke auf „ Zur Site hinzufügen“ und Editor X wird sein Ding machen. Jetzt kannst du eine ganze Reihe von Sachen auswählen. Sie können mit dem Schreibteam bloggen, mit den dortigen Mitgliedern bloggen oder einfach nur einen normalen Blog, was wir wollen. Ich klicke auf „Loslegen“. Sobald Sie den Blog hinzugefügt haben und so aussehen wird, erhalten Sie oben eine Suchleiste, in der ich das Design anpassen und auf „Einstellungen“ klicken kann . Sie können Blog suchen oder Parse suchen oder was auch immer es ist. Sie können das auch ein- und ausschalten. Sie können auch auf das Design klicken, damit ich die Füllfarbe oder die Deckkraft ändern kann. Ich mache den Hintergrund so hellgrau und lasse die Deckkraft verringern. Ändern Sie nun die Textfarbe in dieses hellere Grau, platzieren Sie den gesamten Text in hellergrau, wie Sie dort sehen können. Leute, wenn sie Blogbeiträge finden wollen . Wir haben auch diese Blogbeiträge. Denken Sie daran, dass der Inspektor nur die Andockgröße und die Positionierungswerkzeuge enthält , sodass Sie das Design ändern müssen. Es hat einen weißen Hintergrund. Ich muss hier für den Blog auf „Einstellungen“ klicken , da es sich um ein eingebettetes Widget handelt, ich muss das Design hier ändern. Für das Design klicke ich darauf. Sie können sehen, dass wir die Labels, Schaltflächen, Ränder, Beiträge und das Blog-Menü haben. Ich kann auf „Blog-Menü“ klicken, wie Sie dort sehen können. Ich kann zurückgehen, Beiträge und ich kann den Hintergrund der Beiträge nach unten bringen. Wenn ich es ändern möchte, möchte ich vielleicht das Grün machen. Ich dachte, es sieht besser aus mit dem Grau dort. Dann ändere ich ihn mit dem Text vielleicht einfach so in Weiß. Sie können sehen, dass es die Änderungen dort aktualisiert, was wirklich gut aussieht. Ich gehe zurück, Buttons und Ränder, Hintergrundfarbe, das ist nur Bereichshintergrund. Wir bringen es auf null Prozent. Man kann den Hintergrund dort sehen, weil ich dieses weiße Zeug nicht wollte. Die Textfarbe ist in Ordnung. Dieser kleine Umriss ist gut. Sie haben Videoeinstellungen beim Hover, aber ich werde keine Videos haben, was völlig in Ordnung ist. Du hast auch das Layout. Ich kann redaktionell weitermachen. Ich kann Seite an Seite machen und es sollte es so ändern. Du kannst gefliest machen, wenn du willst. Mir gefällt, wie es Ihnen vordetaillierte Informationen gibt. Du kannst einen vollständigen Beitrag haben. Mir gefällt es. Es ist echt gut. Ich klicke auf „Side By Side“. Ich glaube, das gefällt mir wirklich. Es zeigt die Bilder sehr gut. Sie können bestimmte Dinge anzeigen. Wenn ich die Lesezeit loswerden möchte, kann ich das, das Veröffentlichungsdatum, loswerden. Wenn ich das Abzeichen loswerden will, kann ich das auch loswerden. Sie können es so anpassen, wie der Blog wirklich aussehen soll. Views Zähler und Kommentare, ich werde das los, und die Likes Counter, halten Sie es einfach. Was Sie dann tun können, ist tatsächlich zu Einen Beitrag erstellen zu gehen oder ich klicke auf „Beiträge verwalten“. Du siehst hier. Ich klicke auf „Verwalten“ und es bringt mich in mein Back-End-Dashboard, in dem die Blog-Posts gespeichert sind. Auf der linken Seite sehen Sie Blog, und ich habe meinen Überblick, meinen Published, meine Entwürfe, Geplant und Papierkorb. Sie können die gesampelten Beiträge sehen, die es mir gegeben hat. Ich möchte das bearbeiten, also klicke ich auf „Bearbeiten“. Ich gebe 10 Startup ein. Ich kann den Text hier bearbeiten. Sie können sehen, dass ich Text schreiben kann, ich kann „Plus“ drücken, ich kann ein Video, Bilder, Geschenke, Dateien, Teiler hinzufügen . Man kann damit so viele Dinge machen. Ich kann darauf klicken. Ich klicke auf das Bild, doppelklicke darauf und es sollte mich dazu bringen, ich gehe zu Unsplash. Ich tippe kreativ ein. Mal sehen, was auftaucht. Es gibt viele coole Sachen, ich mag das Foto eigentlich. Ich klicke auf „Zur Seite hinzufügen“ und es wird dieses Blog-Bild hinzugefügt, und dann klicke ich dort auf „Löschen“. Dann hast du noch eine andere SMS. Du kannst mit so vielen Dingen herumspielen. Sie können Tags, Kategorien, SEO, Einstellungen hinzufügen, es gibt eine ganze Reihe verschiedener Dinge. Wenn ich dieses Bild ebenfalls ändern möchte, muss ich auf „Aktualisieren“ klicken. Ich gehe auch zu demselben Bild zurück. Lass uns hierher gehen. Es wird mein Anzeige-Coverbild ändern, nicht nur die Bilder im Blog sondern auch mein Anzeigebild dort. Das veröffentlichte Datum sehen Sie 23, den Autor, der ich bin. Wenn Sie Ihr Teammitglied haben, können Sie den Autor in diese Person ändern. Du hast so viele Tools. Sobald ich damit zufrieden bin, klicke ich auf „Speichern“ und dann auf „Veröffentlichen“. Jetzt kannst du sehen, dass mein Blogbeitrag da ist. Gehen wir nun zurück zur Seite und alles sollte geändert werden. Boom. Dort siehst du dort auch mein neues Bild und den Text. Sieht super gut aus. Sie können immer zurückgehen und auf „ Beiträge verwalten“ klicken , um das zu beheben und anzupassen. Es gibt viele Funktionen wenn es darum geht, einen Blog zu erstellen. Du hast hier ein paar Tipps, du hast Vorlagen. Es ist ein wirklich gutes Tool in Bezug auf Editor X.