Portfolio-Website: Elementor und WordPress, Webdesign ohne Code

1. Einführung: Wir sind hier alle Kreative. Wir haben alle große Talente und wir alle brauchen ein Online-Portfolio , damit wir der Welt diese unglaublichen Fähigkeiten zeigen können Vielleicht bist du Fotograf, Illustrator oder Grafikdesigner In jedem Fall sollte Ihr Portfolio von Ihnen stammen. Es sollte deine Persönlichkeit zur Schau stellen. Wenn Sie Wordpress verwenden, können Sie mit einer vorgefertigten Vorlage beginnen. Nun, dadurch wird Ihr persönlicher Stil verloren gehen. Wenn Sie jedoch mit einer leeren Seite beginnen, kann alles passieren, was Sie möchten. All das könnten wir mit dem Elemental Page Builder machen. Schauen wir uns das an. Ich bin John Wolfgang Miller. Ich bin jetzt seit 20 Jahren professioneller Designer und helfe Ihnen gerne beim Aufbau Ihres Online-Portfolios. Wordpress kann etwas komplex werden, besonders wenn Sie es noch nie benutzt haben. In diesem Kurs werde ich Ihnen beibringen, wie Sie den Elemental Page Builder verwenden Das ist ein Online-Programm , für das keine Programmierkenntnisse erforderlich sind Es kommt nur auf kreativen Designspaß an. Am Ende all dessen verfügen Sie über die erforderlichen Fähigkeiten, um Ihr eigenes Portfolio zu erstellen und ihm Ihren eigenen persönlichen Stil zu verleihen. Und so werden Sie die am besten aussehende Website der Welt haben . Mach dir eine Tasse Tee und setz dich zu mir und lass uns anfangen. 2. Kursprojekt: Ihr Hauptprojekt hier ist heute die Erstellung einer einseitigen Portfolio-Website. Wir werden hier nur die kostenlose Version von Elemental verwenden , sodass Sie viel über die Verwendung dieses Programms lernen können , ohne etwas bezahlen zu müssen Wir werden dann mit Ihrem ersten Heldenbereich beginnen und zeigen, wer Sie sind und worum es in Ihrem Portfolio geht Dann schauen wir uns Ihre Bildergalerie an. Ich zeige dir, wie du eine sehr coole Galerieanzeige einrichtest und werde dir auch die Elementare, Animationsoptionen und die Lichtpunkte im Bild vorstellen Wenn das abgeschlossen ist, erstellen Sie den Fußzeilenbereich Ihrer Website in den Sie alle Kontakt- oder Social-Media-Links einfügen können Wenn die Desktop-Version der Website fertig ist, werde ich Ihnen zeigen, wie einfach es ist, alles sowohl auf dem Tablet als auch auf dem Handy perfekt zum Laufen zu bringen sowohl auf dem Tablet als auch auf dem Handy perfekt zum Laufen Folgen Sie jeder Lektion nacheinander und prüfen Sie, ob Sie jeden Teil selbst aufbauen können , bevor Sie mit dem nächsten fortfahren. Wenn Sie genau die gleiche Website wie ich hier erstellen möchten , nur um all Ihre Fähigkeiten zu erweitern. Oder Sie können die Bilder, die ich verwende, hier im Bereich Ressourcen herunterladen . Laden Sie die gesamte Datei herunter und laden Sie alles in Ihre Medienbibliothek hoch. Oder wenn du dich jetzt mit Elementor wohl genug fühlst, verwende deine eigenen Bilder und zeige mir dein eigenes cooles Portfolio mit deinem eigenen coolen Stil In diesem Kurs und in all meinen Kursen werde ich viele verschiedene Dinge behandeln und viele verschiedene Fähigkeiten zeigen Ich empfehle dir, die Videos im Laufe der Zeit abzuspielen und zu pausieren. Und falls ich einen Teil dieses Kurses wiederholen soll, drücken Sie einfach diese 15-Sekunden-Taste, genug Zeit, damit Sie sich den ganzen Teil noch einmal ansehen können, falls Sie Probleme mit der Videoqualität Du kannst hier in Skillshare sehen, wir kommen einfach her und klicken auf dieses Zahnradeinstellungen-Symbol Es ist auf automatisch eingestellt und je nach Ihrer Internetgeschwindigkeit wird es möglicherweise nicht in der höchstmöglichen Qualität angezeigt Versuchen Sie einfach, dies auf 720 oder 1080 Pixel zu ändern, und Sie werden sofort eine große Qualitätsänderung feststellen. Wenn du den ganzen Kurs beendet hast. Stellen Sie sicher, dass Sie hier im Projektbereich einen Link und einen Screenshot Ihrer Website hochladen einen Link und einen Screenshot Ihrer Website . Ich gebe dir sofort mein Feedback. Ich freue mich auch über Bewertungen von all meinen Schülern , um zu sehen, was für Sie in diesem Kurs am besten funktioniert hat. Komm her und hinterlasse mir eine vollständige Bewertung. Okay, lass uns anfangen. 3. Technische Einrichtung: Hier sind wir bei elementor.com. Dies ist der Ort, an den Sie normalerweise kommen würden, um mit Elementor zu beginnen, auch mit der Möglicherweise haben Sie bereits alles eingerichtet. Möglicherweise haben Sie bereits einen Hosting-Dienst und Elementor ist möglicherweise bereits installiert Wenn Sie dies tun, können Sie einfach mit der nächsten Lektion fortfahren. Ich empfehle jedoch, ein paar Minuten hier zu bleiben , um sicherzugehen, dass Sie alles richtig eingerichtet haben. Für diesen Kurs verwenden wir nur die kostenlose Version von Elemental Leider müssen Sie beim Erstellen einer Website auch das Hosting einrichten Hosting ist im Grunde das Unternehmen , das Ihre Website für Sie speichert , und Elemental bietet diesen Service selbst Für die Einrichtung fallen jedoch monatliche Kosten an Wenn Sie mit der Maus nach oben fahren, wo Hosting steht , und auf Hosting für WordPress klicken , können Sie mehr erfahren Dies ist der Service , den sie anbieten, und wie Sie sehen können, beginnt er bei nur 299€ pro Monat Es ist also sehr billig, aber es ist immer noch etwas, wofür Sie bezahlen müssen. Wenn Sie auf C-Pläne klicken, , wie Sie sehen können, dafür unterschiedliche Pakete zu unterschiedlichen Preisen, je nach Größe Ihrer Website. Leider ist in Elemental keine kostenlose Version verfügbar Es gibt jedoch einen anderen Dienst , der kostenloses Hosting anbietet Und für diese Lektion empfehle ich, dies nur zu verwenden, um loszulegen , ohne Geld aushändigen zu müssen. Das ist WozMa. Dies ist der kostenlose Hosting-Service , den ich empfehle Es ist sehr einfach zu bedienen und kann für immer kostenlos bleiben. Wenn Sie diesen ausprobieren und er bei Ihnen nicht funktioniert, schauen Sie sich einfach den Abschnitt „Über uns“ an und sehen Sie, welche anderen Dienste ich empfehle Also komm auf diese Website. Die URL lautet Wosma Punkt IO, und dann kommen Sie hier nach oben, wo Lösungen stehen, und wählen Sie Hosting für WordPress Wenn Sie dann diese Seite sehen, klicken Sie hier, dort steht Deploy for free Sie werden zu dieser Seite weitergeleitet, auf Sie Ihr Wordpress-Setup einrichten können . Und ich werde hier jeden Schritt durchgehen, aber es ist trotzdem sehr einfach zu verstehen. Zuallererst der Name der App hier oben. Es wurde bereits ein einzigartiger Name für Sie generiert. Aber du kannst hier deinen eigenen Namen eintragen, also nenne ich ihn einfach Wolfgang. Dann Serverstandort. Sie haben zwei Möglichkeiten: Belgien und die Vereinigten Staaten. Wählen Sie das Land aus, in dem Sie die Website einrichten, am nächsten liegt Land aus, in dem Sie die Website einrichten Klicken Sie dann hier unten, wo es heißt: Konfigurieren Sie Ihre Wordpress-Site. Und geben wir unserer Seite einen Titel. Nochmals, ich nenne diesen Wolfgang. Die Sprache ist für mich Englisch. Dann Admin-Benutzername und Admin-Passwort und Admin-E-Mail. Hier richten Sie Ihr eigenes eindeutiges Login für das Backend Ihrer Website ein. Also hier drin schreibe ich in meinem Namen. Hier werde ich mein eigenes Passwort eingeben. Dann füge ich unten meine E-Mail-Adresse hinzu und klicke dann auf Jetzt bereitstellen. Sie werden zu dieser Seite weitergeleitet. Ihre Website ist bereits eingerichtet, aber wie Sie hier oben sehen können, heißt es, dass Ihre Website 1 Stunde lang online sein wird , damit sie online bleibt Erstellen Sie ein kostenloses Konto. Sie müssen dies nicht tun, wenn Sie es nicht am Laufen halten möchten. Aber wenn Sie das tun, empfehle ich Ihnen einfach , hier auf diese Schaltfläche zu klicken, sich kostenlos anzumelden und sich für ein kostenloses Konto bei WozMa zu Ich verwende auch hier dieselben Anmeldedaten und klicke auf Anmelden. Sie haben jetzt also ein kostenloses Konto in WozMa eingerichtet Hier können Sie auf Ihr WordPress-Dashboard zugreifen und Ihr Domainname ist hier oben, und das haben Sie auf der ersten Seite eingegeben Das ist vielleicht nicht der Domainname den Sie für Ihre Website verwenden möchten, aber zum Testen und Einrichten Ihrer Website bleiben wir vorerst dabei. Wenn Sie einen neuen Domainnamen hinzufügen möchten, werde ich Ihnen ganz am Ende dieses Kurses zeigen, wie das geht. Aber vorerst bleiben wir bei diesem. Um also einzusteigen und mit dem Erstellen Ihrer Website zu beginnen, klicken Sie hier oben, wo WordPress-Admin steht. Und hier sind wir jetzt im WordPress-Dashboard. Von hier aus können wir anfangen , alles zu bauen. Wenn Sie Wordpress noch nie benutzt haben, werde ich Sie durch einige der grundlegenden Einstellungen führen. Aber das Wichtigste, was Sie wissen müssen, ist, dass sich das Menü für alles hier auf der linken Seite befindet Als erstes müssen wir Elementor installieren. Elementor ist ein Plug-In. das zu tun, komm hierher nach links und bewege den Mauszeiger über Plug-ins und wähle Neues Plug-In hinzufügen Geben Sie dann in das Suchfeld hier oben Elementor ein. Sie werden den Elementor-Website-Builder hier sehen Klicken Sie auf Jetzt installieren und wählen Sie dann Aktivieren Dann siehst du diese Seite und du musst dich entweder anmelden, wenn du bereits ein Elementar-Konto hast oder dich für ein neues registrieren, falls nicht Klicken Sie einfach auf diese Schaltfläche mit der Aufschrift Anmelden und melden Sie sich dann entweder hier an oder klicken Sie auf Konto erstellen, falls Sie noch keines haben Klicken Sie dann auf diese Schaltfläche , um die Site zu verbinden. Möglicherweise wird diese Option angezeigt, wenn Sie sich bereits für die Pro-Version von Alimental angemeldet Das brauchen wir für diesen Kurs jedoch nicht. Wir verwenden nur die kostenlose Version, du kannst also auch einfach klicken, ich mache es später. Dann wird Elemental dir eine Reihe von Fragen stellen, die du beantworten kannst, wenn du willst, aber das wird keinen Unterschied für die Seite machen , die wir heute erstellen Ich werde einfach auf Überspringen klicken und erneut überspringen. Überspringen. Dann sehen Sie diese Seite, auf Sie aufgefordert werden, ein Thema für Ihre Website einzurichten . Um eine Website in Wordpress zu erstellen, müssen Sie mit einem Thema beginnen. Wir werden das Hello Elemental Theme verwenden, bei dem es sich im Grunde um ein leeres Theme handelt, sodass Sie alles erstellen können, was Sie wollen Wenn Sie also diese Optionen sehen, einfach sicher, dass Hello auf der linken Seite das ist, auf das geklickt wurde, und klicken Sie dann auf Mit diesem Thema fortfahren Dann stellt Elemental Ihnen eine Reihe von Fragen, um Sie im Grunde dazu zu bringen, ein Upgrade durchzuführen, um für die Pro-Version zu bezahlen Aber auch das brauchen wir für diesen Kurs nicht. Einfach hier unten klicken, rechts unten, wo es heißt Weiter mit kostenlos. Jetzt hast du Elementor installiert. Sie werden also zunächst diese Seite sehen. Es wurde eine einzige Entwurfsseite für Sie erstellt. Wir müssen uns um diese Seite keine Gedanken machen. Es wird Ihnen jedoch diese Frage stellen. Wie möchtest du anfangen? Klicken Sie einfach auf die leere Seite hier auf der rechten Seite und beginnen Sie von vorne. Da wir diese Seite dann nicht verwenden, kommen Sie einfach hierher ganz oben links, wo Sie dieses Elementor-Symbol sehen können , klicken Sie darauf und dann auf Zu WordPress beenden Dann siehst du den WordPress-Editor. Gehen Sie auch hier einfach nach oben links und klicken Sie auf dieses Symbol, um den Vorgang zu beenden. Jetzt haben wir in diesem Aufbau das Hello Elemental Theme ausgewählt , und das wird manchmal automatisch installiert Wenn ja, wirst du hier auf der linken Seite das Wort Hallo sehen Aber wenn es dort nicht erscheint, bedeutet das, dass das Theme nicht installiert wurde. Und wenn ja, klicken Sie auf Aussehen und dann oben, wo Thema hinzufügen steht. Hello Elementor sollte einer der ersten sein , die du hier siehst. Wenn ja, fahren Sie einfach mit der Maus darüber und klicken Sie auf Installieren. Wenn nicht, kommen Sie hier zu der Stelle, an der Suchthemen stehen, und geben Sie das Wort Hallo ein Und vielleicht sehen Sie ein paar verschiedene Optionen. Scrollen Sie erneut einfach nach unten, bis Sie diese Seite mit der Aufschrift Hallo Elementor sehen, und klicken Sie auf Installieren Klicken Sie dann auf Aktivieren. Wenn es dort vorher nicht auftauchte, erscheint das Wort Hallo jetzt hier auf der linken Seite. Wenn Sie es sehen, bewegen Sie den Mauszeiger über das Wort Hallo und klicken Sie dann auf Einstellungen Wir müssen nur eine technische Backend-Einstellung vornehmen , um sicherzustellen , dass unsere Seite so sauber wie möglich ist Wenn Sie also dieses Fenster sehen, klicken Sie hier oben auf das Fenster mit der Aufschrift Struktur und Layout. Dann werden Ihnen hier zwei Optionen angezeigt, und Sie müssen beide ankreuzen. Lassen Sie uns also zunächst die Kopf- und Fußzeile des Themes deaktivieren. Und dann lassen Sie uns den Seitentitel ausblenden. Das bedeutet nur, dass wir mit einer völlig leeren Seite beginnen . Wenn Sie mit dem Aufbau Ihrer Website beginnen, wird nichts da sein . Und noch eine letzte Sache, die du zeigen musst : Komm hier auf der linken Seite zu Elementor und bewege den Mauszeiger über den Editor und gehe zu den Einstellungen Sie werden hier viele Optionen sehen, und die einzige, die wir uns ansehen ist diese hier auf der rechten Seite mit der Aufschrift Atomic Editor . Klicke darauf. Auf dieser Seite wird etwas mehr über den Atomic Editor erklärt . Es ist eine neue Funktion , die Elementor eingeführt hat, um Ihnen beim Erstellen einer Website zu helfen Es handelt sich jedoch eher um einen fortgeschrittenen Builder-Service, der etwas technisch und komplex werden kann technisch und komplex und auf den wir in diesem Kurs überhaupt nicht in diesem Kurs überhaupt Wenn Sie also auf diese Registerkarte mit der Aufschrift Atomic Editor geklickt haben , scrollen Sie einfach nach unten zu dieser Schaltfläche mit der Aufschrift Deaktivieren und klicken Sie darauf Aufschrift Deaktivieren und klicken Sie Kreuzen Sie dieses Kästchen an und klicken Sie auf Deaktivieren. Und das ist alles. Wir haben das gesamte technische Setup vorgenommen. Jetzt können wir mit dem Aufbau Ihrer Website beginnen. 4. Elementar: 101: Nun, das ist eingerichtet, komm hier zu den Seiten und wähle alle Seiten Wie Sie hier sehen können, werden einige Seiten automatisch mit dem Thema geliefert. Wir brauchen keine dieser Seiten, aber diese ist live. Das wurde veröffentlicht, wie Sie hier sehen können. Also lass uns das einfach ausschalten, weil es nur eine leere Seite ist, die nicht existieren muss. Wenn wir also mit der Maus auf Quick Edit zeigen, hast du hier ein paar Optionen, aber die, die wir uns ansehen, ist der Status Wie Sie sehen, ist es veröffentlicht, und Sie können es in einen Entwurf ändern Jetzt werden wir unsere eigene Live-Seite erstellen. Das ist sehr einfach. Klicken Sie auf Neu hinzufügen. Und Sie werden zu dieser Seite weitergeleitet. Dies ist der reguläre WordPress-Editor. Alles, was wir hier tun müssen, ist unserer Seite einen Titel zu geben. Scrollen Sie also hier nach oben , wo es heißt, Titel hinzufügen , und geben Sie den Namen dieser Seite ein. Meins wird John Wolfgang Design sein. Scrollen Sie dann hier nach rechts, wo „Entwurf speichern“ steht, und klicken Sie darauf. Dann komm zurück nach links und klicke auf Mit Elemental bearbeiten Bevor wir mit diesem Teil des Kurses beginnen, muss ich dir nur zeigen, dass Elemental seit der Erstellung des Videos einige kleine Änderungen am Menübereich oben vorgenommen hat am Menübereich oben Alles, worüber ich spreche, ist immer noch da. Es ist alles nur an etwas anderen Orten. Also zeige ich es dir jetzt einfach. Als ich dir gezeigt habe, dass sich die Seiteneinstellungen hier oben befinden, ist sie nicht mehr da. Es ist jetzt im Drop-down-Menü hier drüben, also klicken Sie einfach auf diese Schaltfläche. Wenn ich dir die Seiteneinstellungen in diesem Zahnrad oben hier gezeigt habe, es sich nicht mehr in der Mitte der Seite Es ist hier auf der linken Seite , wo du dieses Symbol siehst. Und wenn ich zu irgendeinem Zeitpunkt über Struktur spreche, war das Symbol früher links, aber jetzt ist es hier auf der rechten Seite, und das war's. Alles andere ist immer noch genau das Gleiche. Und willkommen zurück im Element oder Editor. Wie Sie sehen können, verwenden wir die neueste Menüversion. Und es ist immer gut , einfach hereinzukommen und mit allen Einstellungen hier herumzuspielen , damit Sie wissen, wo alles befindet, bevor Sie beginnen. Ich werde hier schnell jeden Teil der Menüleiste oben durchgehen . Zuallererst, dieses Element oder Logo, das ist ein Drop-down-Menü. Und hier haben wir den Theme Builder. Mach dir darüber keine Sorgen. Das ist nur ein Pro-Element, das wir heute nicht verwenden. Geschichte. Nun, wenn Sie einen Fehler machen, können Sie natürlich zu früheren Versionen und Tastenkombinationen zurückkehren . Ich denke, das sagt dir nur alle Abkürzungen , um den gesamten Prozess zu beschleunigen. Dann das Plus-Symbol Element hinzufügen. Hier siehst du alle Elemente, alle Widgets, die wir auf dieser Website verwenden werden. Und dieses Drop-down-Menü, das in verschiedene Unterabschnitte, Layout-Container und Raster Das ist es, was wir verwenden, um mit der Erstellung aller Elemente, jedes Bereichs unserer Website zu beginnen jedes Bereichs unserer Website Du hast deine Grundlagen. Du hast auch deine Profi-Sektion. Natürlich können Sie über all diesen Dingen ein kleines Vorhängeschloss sehen , aber machen Sie sich darüber keine Sorgen Wir können nichts davon verwenden, aber nichts davon wird für irgendetwas benötigt , was wir heute bauen Wir sind gerade mit der kostenlosen Version fertig. Also können wir diesen Teil schließen und dann bekommst du alle allgemeinen Einstellungen, alles, was du brauchst, Bildkarussel, Testimonials Das sind also die Elemente. Dann haben wir Seiteneinstellungen. Hier können Sie Einstellungen ändern, die für die gesamte Website gelten. Wenn Sie also eine Website mit mehreren verschiedenen Seiten erstellen , jede Einstellung hier jede einzelne Seite relevant, die Sie erstellen. Wenn wir dann diese Seite schließen und dann auf die Seite mit der Aufschrift Struktur klicken, erhalten Sie dieses kleine Popup-Fenster. Das wurde früher der Navigator genannt. Und falls Sie mit älteren Versionen von Elemental vertraut sind, hieß es Navigator Es heißt jetzt Struktur, aber es macht genau dasselbe Und ich werde das besprechen, wenn wir mit dem Aufbau Ihrer Website beginnen. Und als Nächstes ist dies der Responsive-Bereich. Das ist sehr, sehr wichtig, und darauf werden wir später im Unterricht noch eingehen. Hier können wir verschiedene Geräte auswählen: Desktop, Tablet und Handy. Und dann dieser hier, Vorschau ändert sich. Das ist großartig, denn während Sie an der Website arbeiten, können Sie auf „Vorschau der Änderungen“ klicken und dann sehen, wie sie für alle anderen aussehen würde , die sich Ihre Website ansehen, wenn sie live geht. Das ist also alles. Jetzt können wir mit dem Aufbau Ihrer Website beginnen. 5. Portfolio: Held: Lassen Sie uns mit dem Aufbau des Heldenbereichs Ihrer Website beginnen. Was ich Ihnen hier zeigen werde, ist wie man einen ganzen Seitenöffner macht. Scrollen Sie hier nach oben zum Plus. Wählen wir die Flexbox so, wie wir sie haben wollen. 50, 50. Wählen wir diese eine von zwei Spalten aus, die in unserem Container abgelegt wurden. Es gibt nur zwei Dinge, die wir hier ändern wollen, die Höhe und die Breite. Zuallererst die Höhe, wie Sie sehen können, teilt sie sich hier auf, aber wir wollen , dass sie die gesamte Seite ausfüllt Lass uns einfach auf die Punkte oben klicken und sicherstellen, dass wir links den Bearbeitungscontainer haben Dann komm zu diesem Abschnitt in dem Mindesthöhe steht Dann dieses kleine Drop-down-Menü hier auf der rechten Seite, wo X steht, wählen Sie H. H steht für visuelle Höhe. Dies ist ein Prozentsatz in Bezug auf die Höhe , die es ausfüllen soll. 100% der Seite. Buchstäblich, schreib hier einfach 100 rein. Sie werden sehen, dass jeder Abschnitt ganz unten auf der Seite gelandet ist. Wir haben unsere Körpergröße sortiert. Als Nächstes schauen wir uns noch einmal die Breite des Inhalts an, hier auf der linken Seite, wie Sie sehen können, ist sie derzeit umrahmt ist sie derzeit umrahmt Wir wollen nicht, dass es verpackt ist. Wir wollen, dass es in voller Breite ist. Wie Sie hier sehen können, haben Sie eine Art gepunktete Linie und dann links und rechts ein leeres Feld Wir ändern es auf volle Breite, es geht auf die volle Breite der Seite. Sie können jedoch immer noch nur winzige Leerzeichen dazwischen sehen . Dies ist eine Standardeinstellung in Elementor, bei der jedem Container, den Sie auf der Seite platzieren , automatisch einen Rand oder eine Polsterung hinzugefügt wird Um Ihnen schnell zu zeigen, wie Sie das ändern können, klicken Sie einfach mit der rechten Maustaste auf eine beliebige Stelle auf der Seite und bringen Sie die Struktur zurück Wählen Sie dann den Behälter , in dem Sie die Polsterung herausnehmen möchten Gehen wir hier einfach zum Hauptteil über. Klicken Sie hier auf die oberste Ebene, den Hauptcontainer. Dann komm hier auf der linken Seite zu Advanced. Dies sind die beiden Abschnitte, die wir uns hier ansehen. Es ist sowohl Rand als auch Polsterung. Sie sind jedoch auf das Standardelement oder die Standardgrößen eingestellt, um diesen Rand herauszunehmen , und bei der Polsterung wird hier einfach Null eingegeben Und machen Sie dasselbe mit der Polsterung Wie Sie sehen, wenn ich einen von ihnen ändere , werden alle geändert Und das liegt daran, dass, wie Sie hier sehen können, die Werte miteinander verknüpft sind Wenn Sie jemals unterschiedliche Beträge auf beiden Seiten benötigen, klicken Sie einfach auf diese Schaltfläche, um die Verknüpfung aufzuheben. Und dann wirst du sehen, dass du verschiedene Beträge hinzufügen kannst 50 oben, 50 unten, aber links und rechts immer noch Null, aber wir wollen insgesamt Null Dann können Sie sich dafür entscheiden, das für alle Container hier drin zu tun , indem Sie sie einzeln auswählen. Jetzt werde ich drei verschiedene Dinge hinzufügen. Zuallererst werde ich die Hintergrundfarbe des Hauptcontainers ändern . Dann zeige ich Ihnen, wie Sie ein Bild auf der linken Seite hinzufügen und wie Sie den Text auf der rechten Seite hinzufügen. Lassen Sie uns zunächst mit der Hintergrundfarbe beginnen. Gehen wir zum Hauptcontainer hier in der Struktur. Dann hier auf der linken Seite, wähle Stil. Hier können Sie den Hintergrund des gesamten Containers ändern . In Bezug auf den Hintergrundtyp haben Sie einige verschiedene Optionen. Klassisch, das wäre nur ein gerader Farbverlauf. Eine Farbe übergeht mit anderen Farbe oder Video- oder Diashows, das sind mehrere Bilder, die von einem zum nächsten gleiten Spielen Sie selbst damit herum. Schau, was für dich funktioniert. Ich möchte es jedoch einfach halten und einfach eine klassische Farbe verwenden. Ich werde auf dieses Symbol klicken. Jetzt haben Sie zwei Möglichkeiten. Sie können wählen, ob Sie eine Farbe oder ein ganzes Bild hinzufügen möchten. Ich suche in diesem Bereich nach einer Farbe. Deshalb werde ich zu diesem grauen Feld wechseln, das durchgestrichen ist und anzeigt, dass keine Farbe ausgewählt wurde. Das ist der Farbwähler. Sie können hier Ihre Farbe auswählen oder manuell einen Hex-Code eingeben Zuallererst wählt dieser hier oben die Farbe aus und das ist die Deckkraft dieser Farbe Stellen wir das auf 100% der Farbe ein , die hier ausgewählt ist Nun, das ist schwarz, deshalb ist es zu 100% schwarz geworden. Wenn ich diesen nach links und rechts ziehe , habe ich oben verschiedene Optionen. Jetzt suche ich nach einer rosa, magentafarbenen Farbe. Ich werde es bis zu diesem Punkt ziehen. Sie können jedoch hier unten sehen, dass ich immer noch die schwarze Version dieser Farbe auswähle. Wenn ich einfach dieses kleine Symbol nehme und es nach oben und unten ziehe, kann ich hier auswählen und die Farbe auswählen, nach der ich suche. Weil dieses Symbol oben ist. Ich kann jetzt damit herumspielen. Wähle einfach eine Farbe, die wirklich repräsentiert, wer ich bin und welchen Stil ich habe. Die andere Möglichkeit besteht darin, hier unten manuell einen Hex-Code einzugeben. Sie wissen nicht, was ein Hex-Code ist, oder Sie benötigen einen Rat zur Auswahl von Farben, wo Sie danach suchen müssen. Hinterlassen Sie mir hier im Diskussionsbereich eine Frage und ich werde mich so schnell wie möglich bei Ihnen melden. Ich habe jedoch eine Lieblingsfarbe. Was ich tun werde, ist das hier einzufügen. Ich werde den gesamten Text hier hervorheben. Und dann füge ich meine gewählte Farbe ein, das ist 00f. Das ist die Farbe, die ich für mein gesamtes Branding verwende . Meine Visitenkarte hätte diese Farbe. Mein Logo hätte diese Farbe. Wenn Sie eine Farbe ausgewählt haben, ist es wichtig, dass sie konsistent ist. Jetzt füge ich ein Hintergrundbild für den ersten Container hinzu, den hier auf der linken Seite. Komm zurück, um den Container zu strukturieren und auszuwählen. Wenn Sie nun normalerweise ein Bild hinzufügen möchten, so wie das gemacht wird, wenn Sie hier zum Plus kommen, dann wählen Sie den Bildbereich hier in Basic und ziehen ihn per Drag & Drop in den Container, den Sie ansprechen möchten. Damit gibt es jedoch ein Problem. Das Bild füllt nicht den gesamten Raum aus, den wir für diesen Container haben. Das ist nicht möglich, da es auf verschiedenen Geräten, in verschiedenen Größen usw. angezeigt wird. Lassen Sie uns das Bild löschen, klicken Sie mit der rechten Maustaste und wählen Sie Löschen Dann komm zurück zu Container. Klicke darauf. Dann komm hier auf der linken Seite rüber, um den Container zu bearbeiten und wähle Stil. Stellen Sie sicher, dass Sie sich unter Hintergrundtyp wieder in diesem Hintergrundbereich befinden, und wählen Sie Klassisch. Hier wählen wir eher ein Bild als eine Farbe als Hintergrund. Klicken Sie hier auf das Plus. Ich werde hier klicken, um die Datei auszuwählen , die ich von meinem Computer hochladen möchte. In diesem Ordner habe ich zwei Bilder von mir. Ich möchte dieses hier auswählen, und wenn es hochgeladen wurde, wählen Sie einfach Auswählen. Wie Sie sehen können, wurde dadurch das Bild von mir als Containerhintergrund hinzugefügt. Daher füllt es den gesamten Container. Zum Glück stimmt die Ernte aber nicht ganz, oder? Es ist zu groß. Es schneidet mir also mein halbes Gesicht ab, um das zu bearbeiten. Komm rüber nach links. Schau dir diese Abschnitte hier an. Standort positionieren, anhängen, wiederholen und anzeigen. Lassen Sie uns zunächst mit der Position beginnen. Es ist als Standard festgelegt, aber hier können Sie die Position wählen. Egal, ob es links, rechts, oben oder unten sein soll, ich möchte, dass es in der Mitte ist. Also werde ich Mitte, Mitte wählen. Also, das ist ein sehr guter Anfang. Das sieht dann gut aus, was die Wiederholung angeht. Nun, das bedeutet, dass Sie dasselbe Bild in der Box viele Male wiederholen können. Das will ich nicht. Ich werde dann bei der Displaygröße Nein wählen, das ist wichtig. Sie haben hier ein paar Optionen. Sie können „Cover“ oder „Enthalten“ wählen. Du wählst, das war's. Das heißt, Sie können das ganze Bild sehen, und deshalb haben Sie oben und unten Leerraum . Ich werde das Cover wählen, weil, wie Sie sehen konnten, das die Box perfekt gefüllt hat. Das Bild wird jetzt ganz oben und unten auf der Seite angezeigt, und dann ist die einzige Aufteilung links und rechts. Ich kann jedoch alles sehen. Ich kann mein Gesicht sehen, ich kann meinen Computer, meinen Arm, meine Tasse sehen. Es ist alles gut, also bleibe ich bei diesem. Das haben wir jetzt erledigt. Nun, nur ein kleiner Tipp für dich hier. Ich empfehle, das einfach ständig zu speichern, denn wenn Ihr Computer abstürzt, können Sie zu dem zurückkehren, was Sie gerade getan haben. Sie müssen es nicht noch einmal tun, um das zu tun. Lass uns einfach herkommen , wo Veröffentlichen steht. Klicken Sie auf diesen kleinen Dropdown-Pfeil und dann auf Entwurf speichern, der gespeichert ist. Das heißt, wenn Ihr Computer jetzt abstürzt kehren Sie immer noch zu genau dem zurück, was Sie haben. Okay, wir haben die linke Seite unseres Helden. Lass uns auf der rechten Seite arbeiten. Lassen Sie uns diesen Container hervorheben. Was wir hier tun wollen, ist Text hinzufügen. Gehen wir hier rüber zum Plus, wählen wir eine Überschrift aus und ziehen sie dann hinein. Jetzt wurde gerade der Standardtext auf alle Standardeinstellungen übertragen. Sie werden hier auf der linken Seite sehen: Nun, zuerst haben wir den Titel, das ist der Text , der erscheinen wird. Was ich hier hinzufügen möchte, ist mein Name. Also werde ich John Wolfgang Miller einsetzen. Als Nächstes wählen wir das HTML-Tag. Klicken Sie auf dieses Drop-down-Menü und Sie werden H 1h2h3 usw. sehen H steht für Headed. Dies ist aus Google-Gründen und aus SEO-Gründen eingerichtet. heißt, H one ist die Einführungsüberschrift, der Einführungstitel Ihrer Seite. Und dann folgen weitere Überschriften, die Sie haben, weiter unten. Sie wählen H zwei und H drei, wenn es sich um wählen H zwei und H drei, wenn es eine Unterüberschrift handelt, da dies die Einführung zu unserer Seite ist die wichtigste Ich werde H eins wählen. Und ein kleiner Tipp für dich sollte wirklich nur ein H One auf der Seite haben und es sollte das Erste sein, was erscheint. Irgendwelche Fragen zu Titeln, irgendwelche Fragen zu H-one-Überschriften und SEO das erneut in die Diskussionen und ich werde mich so schnell wie möglich bei Ihnen melden Jetzt werden wir uns die Position dieses Textes im Container ansehen die Position dieses Textes im Container Kommen wir zurück zum Container, klicken Sie auf diesen, dann möchten Sie Layout wählen. Hier auf der linken Seite sehen wir uns Justified Content an und wir schauen uns Align-Artikel an. Begründen Sie zunächst den Inhalt. Dadurch wird ausgewählt, wo es in dem Container erscheinen soll , für den es bereits eingestellt ist. Wir können das Zentrum oder das Ende wählen. Ich zeige dir einfach das Ende. Es ist ganz unten , wo wir es haben wollen. Wir wollen es in der Mitte haben. Dann wählen wir das, eine Zeile Items. Nun, das heißt wiederum, es ist automatisch so eingestellt , dass es am Ende, auf dieser Seite oder wieder in dem Sinne beginnt . Wählen wir das Zentrum. Ich habe die Position meines Textes sortiert. Lass uns noch einmal auf den Text klicken. Wählen Sie entweder hier oben in der Struktur Überschrift aus. Ich klicke eigentlich nur auf den Text selbst. Dann komm her zum Stylen. Hier können wir die Art und Weise ändern , wie dieser Text angezeigt wird. Wir können die Ausrichtung wählen, es linksbündig und wieder zentralisiert sein soll. Wir können die Farbe ändern und wir können die momentan verwendete Typografie ändern, sie ist linksbündig, und damit bin ich zufrieden Aber die Farbe, nun ja, ich möchte nicht, dass sie auf einem Agenda-Hintergrund schwarz Lass uns auf diesen klicken. Ziehen wir einfach dieses kleine Symbol hierher ganz links, um reines Weiß auszuwählen. Reines Weiß wird immer mit sechs dargestellt, unabhängig davon, welche Farbe Sie hier unten ausgewählt haben, die hinterste Ecke auf dieser Seite, und diese Seite wird immer reinweiß und reines Schwarz sein Nun, ich will reines Weiß. Als Nächstes werde ich die Struktur hierher verschieben , sodass sie meinen Text nicht verdeckt. Dann wähle ich dieses Stiftsymbol hier. Bei der Typografie können Sie hier alles auswählen, was Sie der angezeigten Typografie wünschen Sie können die Familie wählen. Hier drin und du kannst das System wählen. Dies sind die grundlegenden, die Sie überall sehen. Google, diejenigen, die kostenlos von Google sind. Dann geht es einfach ewig so weiter. Das ist wirklich, da sind möglicherweise andere Einstellungen drin, aber ja, wie Sie sehen können, gibt es hier einfach viele verschiedene Schriftarten. Darauf kommen wir zurück. Was ich tatsächlich tun werde, ist eine auszuwählen, von der ich bereits weiß. Das geht genauso wie die Farbe, die ich als Hintergrund gewählt habe. Ich habe eine Schriftart ausgewählt, die ich für mein gesamtes Branding verwende. Wenn Sie Informationen darüber wünschen , wo Sie Schriften finden wo Sie Ideen für Typografie finden Nochmals, schreib mir einfach eine Nachricht in Diskussionen, aber ich werde in diesen schreiben, den ich kenne und ich weiß, dass ich ihn liebe. Er heißt Bunge Das ist eine tolle Schrift, weil sie mich wirklich repräsentiert. Sie ist sehr groß, sehr fett und hat einen 80er-Jahre-Stil Da der Text einfarbig weiß ist, funktioniert er sehr gut auf dem hellen Agena-Hintergrund Wählen wir Bunge. Sie haben hier einige andere Optionen. Dieses eine Gewicht, nun ja, das ist angemessen, wenn Sie eines ausgewählt haben , das mehrere verschiedene Gewichte hat, so etwas wie Futura oder Helvetica, sie werden mehrere verschiedene Optionen für dünnes Extralicht haben dünnes Diese ist nur eine einzige fett gedruckte Variante das als Standard in Bezug auf die Transformation beibehalten wird Standard in Bezug auf die Transformation beibehalten Nun, Sie können wählen, ob es in Großbuchstaben oder Kleinbuchstaben geschrieben werden soll Großbuchstaben oder Kleinbuchstaben geschrieben bedeutet nur, dass der erste Buchstabe jedes Wortes groß geschrieben wird. Wie Sie sehen können, handelt es sich jedoch bereits um eine Großbuchstabenschrift Ich brauche nichts davon. Ich werde mir hier nur die Größe ansehen . Im Moment ist es zu klein, ich werde es einfach nach rechts ziehen und es viel größer machen. Ich denke, es geht darum, wie groß ich es haben möchte. Ich möchte, dass es viel Platz in diesem Behälter ausfüllt. Wie Sie sehen können, gibt es ein ziemlich großes Problem damit, dass es zu groß ist, um in den Behälter zu passen. Was wir hier tun müssen, ist etwas, wofür er arbeitet, mein Stil passt zu meinem Namen. Ich werde das Wort ein wenig aufteilen, um das zu tun. Ich werde dir nur ein paar sehr einfache grundlegende Dinge beim Programmieren zeigen , versprochen. Kein Code, aber das ist ein wirklich einfacher Code, über den Sie Bescheid wissen sollten. Komm her zum Inhalt. Das ist der Titel , den wir hier haben. Ich möchte das Wort Wolfgang in zwei Wörter aufteilen , Wolf und Gang. Dazu habe ich in diesem Titelfeld einfach das Wort Wolfgang ausgewählt diesem Titelfeld einfach das Wort und in der Mitte geklickt. Alles, was ich hier tun werde, ist etwas Code einzugeben. zunächst auf Ihrer Tastatur Wählen Sie zunächst auf Ihrer Tastatur diese spitze Klammer, die spitze Klammer, die sich auf einem Mac-Buch unten am unteren Licht befindet, wählen Sie die linke Seite Schreiben Sie dann diese beiden Buchstaben R ein und wählen Sie dann den Buchstaben auf der rechten Seite Da hast du es. Du wirst sehen, dass Wolf und Gang in zwei separate Wörter aufgeteilt wurden. Nun, das hat es durcheinander gebracht , jetzt sind John und Wolf auf derselben Linie. Wie werde ich das reparieren Nun, zuerst werde ich zu den Wörtern John und Wolf gehen, um das Leerzeichen herauszunehmen , das schon drin war, und dann eine weitere Pause einbauen. Da haben wir's. Das gefällt mir wirklich. Das funktioniert jetzt wirklich gut. John Wolf Gang Miller. Ich denke, selbst das Wort Miller lässt sich nicht so gut trennen, aber es besteht aus sechs Buchstaben. Ich werde eine kleine Trennung zwischen dem L und dem L machen. Auch hier das gleiche Problem zwischen Gang und Mill. Lass uns da eine Pause einlegen. Da haben wir's, John Miller. Das fasst mich wirklich zusammen, wer ich bin und weißt du was? Ich denke , das Display funktioniert wirklich gut. Kleiner Tipp für dich hier. Dieser kleine Pfeil auf der linken Seite ist ein großartiges Element oder eine tolle Einstellung , ist ein großartiges Element oder eine tolle Einstellung , mit der Sie das Panel ausblenden können. Wenn ich darauf klicke, verschwindet alles andere, auch das Strukturfenster. Jetzt kann ich genau sehen, wie das für jeden aussehen würde , der meine Website besucht, denn so würden sie es sehen. Jetzt klicken wir einfach erneut auf den Pfeil, um alle Tools zurückzubringen. Dann speichern wir es erneut. Hier oben bei Save Draft haben wir jetzt einen fertigen Heldenbereich. Lass uns zu deiner Portfolio-Galerie übergehen. 6. Portfolio: Galerie-Raster: Jetzt fügen wir unter dem Helden einen weiteren Abschnitt hinzu. Scrollen wir nach unten. Wir werden hier mit zwei Dingen befassen, mit Containern und Grids. Es wird im Grunde ein Raster in einem Container und dann Container innerhalb eines Rasters sein einem Container und dann Container innerhalb eines Rasters Ich werde dir zeigen, wie du diese verschiedenen Elemente benutzt und das wird dir eine sehr coole Art zeigen deine gesamte Galerie zu präsentieren. Wir werden mit einem normalen Container beginnen. Klicken Sie auf das Plus, wählen Sie Flexbox und dann einfach diese aus. Ein einspaltiges Zeigedeck. Dann lass uns hier rauf zum Plus gehen. Wählen wir das Raster aus und ziehen es in den Container. Das ist ein Raster. Ein Raster funktioniert so, dass Sie die Anzahl der Spalten und die Anzahl der Zeilen in jeder Spalte wählen können die Anzahl der Spalten und die Anzahl der Zeilen in jeder Spalte wählen . Es hat immer exakt dieselbe Breite. Es gibt dir ein schönes, gleichmäßiges Layout. Ich werde mich für vier Spalten entscheiden. Ich möchte, dass das alles in einer Zeile angezeigt wird. So sieht mein Grid aus. Jetzt möchte ich hier eine Reihe verschiedener Bilder einfügen, sodass ich ein wirklich cooles Display-Raster erstelle, das viele der verschiedenen Dinge, die ich in meiner Karriere gemacht habe, so zeigt verschiedenen Dinge, die ich in meiner Karriere gemacht habe , wie Sie es normalerweise tun würden. Auch hier kommen Sie zum Plus und fügen ein Bild hinzu , das ein Bild in diese Spalte einfügt. Wenn ich dann jedoch versuche, ein anderes Bild in derselben Spalte einzufügen, wird es dort nicht angezeigt, sondern es geht automatisch zum nächsten Teil des Rasters über. Sie können in jeder Spalte nur eine Sache haben. Ich möchte jedoch mehrere verschiedene Bilder haben. Das muss ich tun. Kommen Sie wieder zum Plus und wählen Sie einen Behälter aus und legen Sie einen Behälter in die Spalte. Was Sie hier sehen können, ist ein Container in einer Spalte des Rasters, der sich in einem Hauptcontainer befindet. Das bedeutet jetzt, dass ich mit diesem Container mehrere verschiedene Bilder hineinlegen kann. Ich werde diese beiden Bilder , die hier sind, eigenständig löschen. Ich werde den Mauszeiger über dieses rosafarbene Symbol bewegen, rechten Maustaste klicken und Löschen wählen Das Gleiche gilt für diesen Rechtsklick. Löschen. Jetzt möchte ich ein Bild in diesen Container legen Hier links zu den Widgets, ziehe das Bild und lege es dort ab. Wenn ich dann noch eines darunter hinzufügen möchte, komme wieder hierher zum Plus, hierher zum Plus, wähle ein Bild aus und lege es dort ab. Wie Sie hier sehen können, haben wir die kleine rosafarbene Linie, die entweder darüber oder darunter liegt. Das bedeutet, dass sie sich in diesem Container befindet, entweder über oder unter dem Bild, das sich dort befindet. Lass es uns einfach unten eintragen. Jetzt geht's los, wir haben jetzt zwei Bilder in einem Container , der sich in dieser Spalte befindet. Ich glaube, ich möchte drei oder vielleicht vier Bilder in diesem Container haben. Ich kann einfach hierher gehen , um ein Element hinzuzufügen und ein weiteres hinzuzufügen. Aber ein schnellerer Weg, das zu tun, ist, hierher zu kommen, um zu strukturieren. Wir befinden uns im Container und wir wissen, dass wir diese beiden Elemente im Container haben. Sie können sehen, dass es hier mit einem kleinen Drop-down-Menü eingerichtet ist, in dem die Dinge so eingestellt sind, dass angezeigt wird, was sich darin befindet. Alles, was ich tun werde, ist einfach mit der Maus über das letzte Bild zu fahren, mit der rechten Maustaste zu klicken und dann Duplizieren zu wählen Ich werde das zweimal machen. Ich habe jetzt vier Bilder in diesem Container. Jetzt möchte ich das noch dreimal neu erstellen. Auch hier wird es lange dauern, bis alles manuell erledigt ist Alles, was ich tun werde, ist diesen Container hier auszuwählen. Ich schalte einfach den Pfeil aus, damit ich nicht sehen kann, was drin ist. Dann klicke ich mit der rechten Maustaste darauf. Dupliziere das Datum, dass ich das hier habe. Wenn ich jetzt auf den Pfeil klicke, wird ein Raster eingerichtet, in dem die verschiedenen Teile meines Portfolios angezeigt werden . Gehen wir zuerst zurück in den Editor. Nun, wie Sie anhand der Abstände hier sehen können, ist es verpackt und genau das wollen wir Wir wollen eigentlich ein bisschen Leerraum auf beiden Seiten dieses Hauptcontainers, weil Weißraum aus gestalterischer Sicht sehr wichtig ist Es hilft dabei, alles , was sich darin befindet, einzurahmen. Zunächst muss ich nur ein wenig mit dem Abstand in diesem Hauptcontainer herumspielen . Offensichtlich haben wir links und rechts einen kleinen Leerraum. Fügen wir oben und unten einen hinzu. Lassen Sie uns den Hauptcontainer wählen. Komm nochmal zu Advanced rüber. Wir werden mit dem Rand und der Polsterung herumspielen Rand und der Polsterung Ich möchte die Verknüpfung der Werte für beide aufheben. Lassen Sie uns eine Polsterung von 100 Pixeln oben und 100 Pixeln unten platzieren Pixeln oben und 100 Pixeln unten Wie Sie sehen können, haben wir jetzt einen schönen weißen Bereich rund um das gesamte Raster , der gut aussieht Es gibt ihm nur ein bisschen mehr Luft zum Atmen wenn Sie mehrere Bilder haben, das ist sehr wichtig. Nun, die eine Sache, die hier etwas falsch ist, und sehen Sie, ich bin Grafikdesigner, fallen immer solche Dinge auf, ich möchte, dass alles gleichmäßig ist. Sie können sehen, dass der Abstand zwischen diesen beiden Bildern kürzer ist als der Abstand zwischen den einzelnen Spalten. Das liegt wiederum daran, dass sich die Standardeinstellung für jeden Container in diesem Raster befindet. Gehen wir zu Container eins über, kommen wir zu Advanced und ändern wir all diese Werte auf Null. Auch hier können Sie sehen, dass alles richtig angeordnet ist. Dann schreibe ich, um auf die erste Container-Kopie und dann auf den verbleibenden Container-Stil zu klicken . Nun, da haben wir's. Das ist perfekt. Ich habe keine Kopfschmerzen mehr als Grafikdesigner. Ich kann einen absolut gleichmäßigen Abstand zwischen den Spalten und den Reihen von erkennen . Jetzt möchte ich einfach anfangen, jedes einzelne Bild hinzuzufügen . Gehen wir zum ersten Bild hier drüben. Klicken Sie auf das Stiftsymbol oben rechts hier auf der linken Seite, wo es heißt Bild erneut auswählen sehen Sie nur das graue Platzierungsbild Dort sehen Sie nur das graue Platzierungsbild . Zuerst wollen wir das natürlich nicht. Lass uns auf dieses Bild klicken. Wenn ich die Medienbibliothek öffne, kann ich jedes einzelne Bild sehen, das ich hochgeladen habe. Wenn du ein bisschen mehr über das Hochladen von Bildern erfahren möchtest , gehen wir zu meinem Profil auf Skill Share und suchen nach diesem Video, das dir schnell erklärt, was zu tun ist, wenn wir Bilder auf Wordpress hochladen Was zählt, ist das Verhältnis dieses Bildes, die Dateigröße und der Dateiname Schauen Sie sich dieses kurze Video an, Sie werden ein bisschen mehr verstehen. Wenn Sie alle Ihre Bilder zum Hochladen bereit haben oder klicken Sie hier und wählen Sie Dateien. Was ich hier habe, sind drei verschiedene Bildordner. Sie haben alle unterschiedliche Verhältnisse, einige von ihnen sind drei mal zwei, manche sind zwei mal drei, und wieder andere sind quadratisch. Öffne einfach jedes davon, um es dir zu zeigen. Lassen Sie mich das so ändern, dass es drei mal zwei aufzählt. Jedes Bild, das ich hier habe ist auf genau dieses Verhältnis eingestellt, drei mal 23 mal 23 mal zwei. Dann habe ich dieselben Bilder, die alle auf zwei mal drei angeordnet sind . Die ganze Lunge. Das hat sowieso zu zweit funktioniert . Dann ist die letzte Wahl, die ich habe, eins nach dem anderen quadratisch. Auch hier dieselben Bilder, derselbe Inhalt, nur auf unterschiedliche Weise präsentiert. Was ich hier tun werde, ist jedes einzelne dieser Bilder hochzuladen. Ich werde nicht alle verwenden, aber ich habe dafür gesorgt, dass alle meine Bilddateien so klein wie möglich sind, sodass sie nicht zu viel Platz im Backend meiner Website beanspruchen . Lassen Sie uns zunächst alle quadratischen, hellen, alle davon auswählen . Wählen Sie Öffnen. Wenn sie alle hochgeladen haben. Kommen Sie hierher, um erneut Dateien hochzuladen, wählen Sie Dateien aus, wählen Sie zwei von drei und laden Sie alle hoch. Dann die letzten 13 mal zwei. Laden Sie die auch hoch. Wenn sie alle hochgeladen sind, wählen Sie einfach die erste , die in Ihrer Galerie erscheinen soll. Ich werde eine Drei mal Zwei wählen. Ich denke, ich werde diesen hier wählen. 51 Kunstgalerie. Jetzt fragst du dich vielleicht, warum ich dieselben Bilder in unterschiedlichen Verhältnissen hochgeladen habe ? Nun, das ist nur, um ein bisschen kreativer zu sein. Es war zwar wichtig, dass alle Zwischenräume, Zeilen und Spalten identisch sind, ich halte es nicht für wichtig, dass die Größe oder das Verhältnis der Bilder gleich sind. Lass es mich dir einfach zeigen. Lass uns Nummer zwei wählen. Bild Nummer zwei in dieser Spalte. Hier möchte ich ein quadratisches Bild einfügen. Nun, das waren die ersten, die ich hochgeladen habe. Lass uns eine davon wählen. Vielleicht dieser eine Tauchgang in Fidschi. Dann möchte ich ein Verhältnis von zwei zu drei wählen, ein Portraitbild Lass uns auf Bild bearbeiten klicken. Wählen Sie das Bild hier oben aus. Das waren die zweiten, die ich hochgeladen habe, nicht wahr? Scrollen wir nach unten zu einem von denen. Vielleicht dieser hier. Ja, das ist zwei mal drei. Und es ist ein Mädchen, das ein T-Shirt trägt , das ich für eine Firma namens Get entworfen habe. Wählen wir das aus. Da haben wir's. Wir haben jetzt ein bisschen Abwechslung in Bild, Form und Größe. Das bedeutet auch, dass es hier nicht immer aufgereiht ist, was einem ein bisschen mehr ins Auge fällt eine Sache mehr hervorhebt als etwas anderes das ansehe, weißt du, was ich denke, auf der Grundlage, dass ich in dieser Spalte viele verschiedene Größen habe, denke ich, dass drei Bilder wahrscheinlich ausreichen würden Ich glaube nicht, dass ich vier brauche. Lass uns einfach runtergehen und den letzten löschen. Klicken Sie mit der rechten Maustaste auf das Symbol und wählen Sie Löschen. Jetzt füge ich einfach drei verschiedene Bilder zu jeder Spalte hinzu, Bilder mit unterschiedlichen Verhältnissen. Und dann können wir mit der Position aller Bilder herumspielen der Position aller und schauen, was bei der Erstellung eines kreativen Rasters am besten funktioniert . Ich werde einfach damit beginnen, das vierte Bild aus jeder Spalte zu löschen . Lösche das. Vielleicht ändere ich meine Meinung irgendwann. Es könnte besser funktionieren. Wenn ich möchte, dass vielleicht 43 mal zwei Bilder in der Spalte bleiben , dann passiert das. Kein Problem. Ich füge einfach ein weiteres Bild-Widget hinzu. Aber jetzt wähle ich einfach eine andere Auswahl an Bildern aus , die mein Grafikdesign-Portfolio am besten zur Geltung bringen. Spielen Sie damit herum und versuchen Sie, eine gute Auswahl an Bildern auszuwählen. Manche, die etwas weiter entfernt sein können, manche, die etwas näher sind, manche, die Menschen haben, manche, die das nicht tun. Es ist gut, da ein bisschen Abwechslung reinzubringen. Wählen Sie einfach aus, was Ihnen am besten gefällt. Zeigt, wer Sie sind und welchen Stil Sie haben, welche Elemente Sie hervorheben. Sie müssen nicht alles zeigen, was Sie jemals in Ihrer Karriere getan haben. Such dir einfach die besten Teile aus. Was an diesem Raster wirklich gut funktioniert , ist, dass ich ein bisschen Abwechslung habe. Wenn ich einfach auf den Pfeil klicke, passt alles auf eine einzige Desktop-Seite. Mir gefällt, dass die Leute, wenn sie durch meine Website scrollen, diesen Heldenbereich sehen, in dem sie mich und meinen Namen sehen. Und wenn sie dann nach unten scrollen, können sie alles auf einmal sehen. Das ist sehr cool. Ich denke jedoch, dass ich hier immer noch einfach mit dem Display herumspielen kann, mit der Struktur von allem. Lass uns auf den Pfeil klicken. Ich denke, was ich will, ist, dass wir am Ende jeder Spalte eine unterschiedliche Ausrichtung haben, ich denke nicht, dass wir oben dieselbe Ausrichtung haben sollten . Ich werde einfach den Inhalt in jedem Container in jeder Spalte zentralisieren Inhalt in jedem Container in jeder Spalte Gehen wir hier zurück zur Struktur. Selbst wenn ich das Menü bei jedem einzelnen hier schließe, die ersten 1.1, die ich für alle machen möchte, klicke auf den Container, gehe hier zu Layout und wähle dann Justify. Inhalt wieder in die Mitte stellen. Und richten Sie die Elemente dann wieder in der Mitte aus. Nun, das hat nichts bewegt, warum? Weil es im Stromnetz ist. Und das ist tatsächlich die höchste Säule von allen. Ich klicke jedoch mit der rechten Maustaste auf diesen Container, wähle Kopieren und dann Einfügen Bei den nächsten drei werden wir sehen, was passiert. Stil einfügen. Da haben wir's. Stil A einfügen. Wenn ich jetzt auf meinen kleinen Pfeil zum Ausblenden klicke , sind wir fertig. Das sieht wirklich toll aus. Das fühlt sich einfach ein bisschen kreativer an. jetzt jemand von oben nach unten scrollt, Wenn jetzt jemand von oben nach unten scrollt, sieht er, dass alles in einem schönen Muster angezeigt wird , so wie es nicht unbedingt in einem Raster, sondern in einem Raster ist Wenn das kreativ sinnvoll ist, klicken wir einfach auf den Pfeil hier. Nun, nur eine Kleinigkeit. Je mehr ich mir das ansehe, ich weiß es nicht. Ich denke, es ist nur ein bisschen falsch die Platzierung der einzelnen Bilder angeht. Ich glaube, ich möchte, dass es bei den beiden in der Mitte etwas größer beiden in der Mitte und bei den links oder rechts etwas kürzer den links oder rechts Ich werde das Panel noch einmal anzeigen . Ich werde nur ein Bild von einem Ort an einen anderen ziehen , um damit herumzuspielen. Zuallererst möchte ich, dass dieses Bild des Mädchens in Spalte zwei oben hier oben steht. Alles, was ich tun werde, ist, den Mauszeiger über das rosafarbene Bildbearbeitungssymbol Halte meine Maus gedrückt und ziehe sie nach oben über das nächste Bild Da bist du, es wird in diesen Behälter geworfen. Sie können hier auf der Struktur zwei Bilder in diesem Container sehen . Wir haben jetzt vielleicht vier. Lassen Sie uns das hier runter verschieben , zurück an die Stelle, wo das letzte Bild war. Ja, da haben wir's. Okay, ich bin jetzt wirklich zufrieden mit dem Layout. Nun, jeder Container, nun ja, er hat eine andere Höhe, also sind sie nicht exakt aufeinander ausgerichtet. Keiner dieser Abschnitte reiht sich an, wissen sie, dass sie es nicht tun. Funktioniert wie ein Labyrinth, in dem Ihre Augen herumlaufen können Ich denke, das ist eine großartige Galerieausstellung all meiner besten Arbeiten Gehen wir zurück zum Editor und speichern wir den Entwurf. 7. Portfolio: Galerie-Animation und Lightbox: Jetzt möchte ich dir zwei weitere coole Dinge zeigen, die du in Elementor mit deinen Bildern machen kannst Wir werden uns das Leuchtkasten-Display ansehen. Das würden Ihre Benutzer sehen wenn sie auf ein Bild klicken würden. Aber zuerst werden wir uns die Animation ansehen. Was ich dir für die Animation zeigen möchte, viele verschiedene Optionen dafür hast du in Elementor Was wir tun können, ist, jedes Element so zu nehmen , dass es auf eine bestimmte Weise auftaucht Ich werde Ihnen zunächst zeigen, wie das für das gesamte Grid funktionieren würde. Ich klicke einfach auf das Raster und komme dann hierher, um fortzufahren. Wir haben es hier mit Bewegungseffekten zu tun. Der Teil, den wir uns ansehen wollen, ist die Animation des Eingangs. Der Moment ist auf Standard gesetzt, was nur bedeutet, dass er nichts bewirkt. Kommen Sie jedoch rein, Sie Drop-down-Menü und Sie haben hier tatsächlich viele verschiedene Optionen. Wähle einfach eine zufällige aus oder so. Diese sind immer lustig. Aufmerksamkeitssuchende. Bounce bedeutet nur, dass das gesamte Raster einfach hineinspringt , wenn jemand zu diesem Teil Ihrer Seite scrollt . Das ist eigentlich ganz nett Pulse, ja, es gibt viele verschiedene komische Dinge, die du damit machen kannst Das hängt nur von deinem Stil ab und davon, was dich deiner Meinung nach am besten repräsentiert. Aber obwohl ich gerne kreativ bin, möchte ich es ganz einfach und ordentlich halten. Das, was ich dafür immer wähle, ist ein einfaches Fading und man kann sehen, dass das ziemlich schnell da reingekommen Sie können jedoch damit herumspielen dass die Animationsdauer auf normal eingestellt Stellen Sie es einfach auf langsam ein. Da haben wir's. Das ist ein viel netterer, langsamerer Eingang Was wir dort haben, ist eine Animation für das gesamte Raster , die auf einmal angezeigt werden kann Aber ich möchte ein bisschen kreativer sein und für jedes Bild im Container etwas anderes machen für jedes Bild im Container etwas anderes . Lass uns das einfach ausschalten. Um das zu tun, klicken Sie hier auf dieses kleine X. Und das bringt es entweder auf die Standardeinstellung zurück oder Sie können sich dafür entscheiden, dies nicht zu tun. Jetzt hat das gesamte Raster keine Eingangsanimation mehr. Ich werde die Eingangsanimation für jedes Bild ändern . Gehen wir einfach wieder zum ersten Bild, 51, klicken Sie auf Bild bearbeiten, gehen Sie dann hier zu Erweitert und scrollen Sie nach unten zu Motion Effects Und das ist nur für diese Animation zum Bildeingang. Auch hier werde ich Fade-In wählen. Auch hier werde ich Slow wählen. Wenn ein Benutzer jetzt zu diesem Teil der Seite scrollt, wird nur dieses einzelne Bild angezeigt Ich möchte, dass sie alle angezeigt werden. Wenn ich nur jedes einzelne Bild auswählen und genau dasselbe auswählen würde, würde alles gleichzeitig auftauchen. Genau das versuchen wir einfach aus dem Netz zu vermeiden. Animation. Wenn ich mich zum Beispiel nur für das nächste entscheiden würde, würde ich in Fidschi tauchen Komm rein, wähle Bewegungseffekte, Eingang, Animation, Einblendung und dann Langsam Wir sagen dir was, schauen wir uns einfach an, wie das aussieht. Damit die Benutzer das tun können, kommen wir hierher und klicken auf Entwurf speichern. Dann klicken wir einfach auf dieses kleine Auge, um eine Vorschau der Änderungen anzuzeigen, die mich auf die Seite bringen. So werden all Ihre Benutzer Ihre Website sehen. ich dann zum Galeriebereich scrolle, werden Sie sehen, dass beide dort eingeblendet Mach das einfach ein bisschen schneller, damit du es sehen kannst . Lass uns nachladen Da haben wir's. Sie verblassen also beide, aber sie verblassen beide mit derselben Geschwindigkeit Gehen wir einfach zurück zu unserem Editor. Was ich mir hier ansehen möchte, ist eine Animationsverzögerung, eine leichte Verzögerung, wenn die Animation stattfindet. Wir können den ersten hier sehen, 51, mit einem Bewegungseffekt. Der kann so bleiben wie er ist. Lass uns auf Fidschi tauchen gehen. Gehen wir zu Bewegungseffekten langsam über. Setzen wir eine Verzögerung von 500 Millisekunden ein. Ich zeige Ihnen gleich, wie schnell das , dann wirklich Oz. Lassen Sie uns das ändern, Speichern wir den Track und schauen uns dann eine Vorschau der Änderungen an ich nach unten scrolle, werden Sie feststellen, dass diese drei Bilder mit leicht unterschiedlichen Geschwindigkeiten aufgenommen werden. Laden wir die ganze Seite noch einmal neu. Da haben wir's. Das ist perfekt. Diese drei Bilder kommen zu etwas unterschiedlichen Zeiten rein. Alles, was ich jetzt tun möchte, ist, für jedes einzelne Bild eine völlig zufällige Zeit auszuwählen , sodass sie alle eingeblendet werden, aber keines gleichzeitig. Gehen wir zurück zum Editor und ich ändere sie alle auf eine andere Geschwindigkeit. Ich werde einfach superschnell an jedem von ihnen arbeiten, aber lassen Sie sich selbst Zeit dafür. Spielen Sie mit jeweils unterschiedlichen Geschwindigkeiten herum. Und öffne und lade die Seite immer wieder neu , damit du eine gute Balance findest , die perfekt zu dir passt So sieht die Galerie jetzt aus. Wenn Sie nach unten scrollen, werden Sie sehen dass sie alle zu leicht unterschiedlichen Zeiten angezeigt werden. Das ist ein wirklich cooler kreativer Stil , den Sie Ihrem eigenen Portfolio hinzufügen können. Lass uns diesen einfach neu laden. Da hast du's. So. Sie haben ein Raster, das auf coole Weise präsentiert wird, das auch auf sehr coole Weise animiert ist. Das wird jedes Mal die Aufmerksamkeit der Leute auf sich ziehen. Eine weitere Sache, die Sie sich ansehen sollten, ist die Leuchtkasteneinstellung. Gehen wir zurück zum Editor. Jetzt möchte ich Ihnen die Lightbox-Einstellung zeigen. Dies ist etwas , das Sie zu Ihrer Portfolio-Website hinzufügen können . Wenn Benutzer zu Besuch kommen, können sie auf das Bild klicken, das Bild viel größer sehen und ein bisschen mehr darüber erfahren, und ein bisschen mehr was Sie bei diesem Job gemacht haben. Das ist sehr einfach einzurichten. Komm hier zu deinem ersten Bild und klicke auf dein Bildbearbeitungs-Symbol Dann komm hier rüber zum Inhalt auf der linken Seite. Was wir uns hier ansehen, ist der Linkbereich. Sie haben zwei Möglichkeiten. In diesem Drop-down-Menü können Sie eine benutzerdefinierte URL hinzufügen, wenn Sie Benutzer auf eine andere Website weiterleiten möchten , vielleicht um das Projekt zu zeigen , an dem Sie gearbeitet haben. Aber was wir hier sehen, ist der Leuchtkasten, also wählen wir die Mediendatei. Der Leuchtkasten ist auf die Standardeinstellungen eingestellt. Das heißt, wenn jemand auf Ihre Website kommt und auf das Bild klickt, wird er genau das sehen. Klicken Sie einfach auf den Pfeil , damit Sie mehr sehen können. Sie sehen das Bild hier fast im Vollbildmodus mit ein paar Symbolen. Dies ist ein Fehler, Bildschirm aus, Teilen und Schließen. Es hat diesen hellschwarzen Hintergrund , der wirklich cool aussieht und das ist eine großartige Möglichkeit, Ihr gesamtes Portfolio zu präsentieren. Die Leute können in der Galerie auf das klicken, was ihnen gefällt , und wählen , ob sie noch viel mehr sehen möchten. Ich möchte jedoch ein paar Änderungen daran vornehmen. Ich möchte die Farbe des Hintergrunds ändern. Ich möchte, dass hier unten unter dem Bild etwas mehr Informationen erscheinen, nur um all meinen Benutzern das Projekt zu erklären , an dem ich gearbeitet habe. Lassen Sie uns diesen mit dem Pfeil schließen. Klicken Sie erneut auf dieses Bild und stellen Sie sicher, dass Sie Ihren Entwurf gespeichert haben, bevor Sie dies tun. Dann komm hierher zum Leuchtkasten-Panel und klicke darauf. Dadurch werden die Seiteneinstellungen aufgerufen. Es ist der Leuchtkasten in den Seiteneinstellungen, was bedeutet, dass alles, was Sie hier ändern , sich auf der gesamten Website ändert. Sie haben einige Optionen, aus denen Sie hier wählen können. Dies sind die vier Symbole , die wir oben rechts angezeigt haben, als wir uns das vorhin angesehen haben. Also Bildschirm zoomen, teilen und so weiter. Dann siehst du Titel und Beschreibung. Das wird unter dem Bild angezeigt , das bereits für die Anzeige eingerichtet wurde. Das Problem ist, dass wir das nicht für dieses Bild oder eines der Bilder eingerichtet haben. Ich zeige dir in ein paar Sekunden , wie das geht. Zuallererst wollen wir die Hintergrundfarbe ändern. Ich mag das helle Schwarz. Aber weil ich eine sehr mutige und helle Website habe, Beispiel eine hellere, kräftigere Farbe, um dort wieder reinzukommen, kannst du hierher kommen, auf dieses Symbol klicken und deine eigene Farbe wählen. Oder eine schnellere Möglichkeit, dies zu tun, oder eine, über die Sie die volle Kontrolle haben, besteht darin, hier auf dieses Symbol zu klicken. Dadurch werden Ihnen die globalen Farben Ihrer Website angezeigt. Diese wurden alle als Standardeinstellungen übernommen. Innenelement oder Primärfarbe, Sekundärfarbe, Text, Farbe, Akzent. Wenn Sie hier auf dieses Symbol klicken, können Sie diese Einstellungen ändern. Das heißt, wenn Sie diese Primärfarbe überall auf der Website wählen, wird sie sich auf der gesamten Website ändern. Im Moment bin ich jedoch sehr zufrieden mit dieser kräftigen, hellblauen A-Ionen-Farbe. Ich werde mich dann für diese entscheiden. Um ehrlich zu sein, gibt es hier nichts anderes , was ich wirklich ändern müsste. Aber du hast andere Möglichkeiten. Sie können selbst damit herumspielen. Größe des hohen Balkensymbols, lassen Sie uns das etwas höher einstellen. Dies sind die kleinen Symbole , die sich ganz rechts befanden. Sie waren vielleicht ein bisschen klein. Stellen wir sie auf 225 ein. Speichern Sie das und kommen Sie dann wieder rein, wenn Sie etwas ändern oder es wieder so machen müssen , wie es vorher war. Lass uns das speichern und dann zurück zum Editor gehen. Dann klicken wir auf dieses erste Symbol und sehen, wie das aussieht. Los geht's, lass uns auf den Pfeil klicken. Wir sehen jetzt diesen viel helleren, kräftigeren, blauen Hintergrund. Wir sehen hier oben etwas größere Symbole. Ich denke, sie funktionieren wirklich gut. Und sie sind toll, dass sie in Weiß sind, weil ich denke, dass das auf dieser Hintergrundfarbe gut funktioniert. Was Sie hier unten sehen können, das haben wir uns vor einer Sekunde angesehen, den Titel und die Beschreibung des Bildes, das hier unten angezeigt wird. Das Problem ist, dass wir es nicht für dieses Bild eingerichtet haben. Gehen wir zurück zum Editor. Lass uns das hier schließen. Klicken Sie dann auf den Pfeil und wählen Sie dann Ihr erstes Bild aus. Dann hüpf hier rüber. Es heißt Bild auswählen und auf das Bild klicken. Auch dies ändert nichts daran , welches Bild ausgewählt wurde. Damit können Sie sowohl den Titel als auch die Beschreibung bearbeiten . Die Textinformationen für jedes Bild immer hier auf der rechten Seite eingerichtet. Jetzt wurde der Titel, den Sie bereits in der Lightbox sehen konnten, bereits in der Lightbox sehen konnten, automatisch aus dem Dateinamen übernommen. Deshalb hat es all diese kleinen, diese kleinen Linien zwischen jedem Wort. Ich werde die einfach rausnehmen. Das Highlight, das Löschen, dann die Beschreibung. Nun, hier kannst du einfach in die Beschreibung schreiben , worum es im Bild geht. Das ist aus einer Kunstgalerie namens 51. Ich habe meine Beschreibung bereits geschrieben . Ich werde es hier einfügen. Da hast du's. Eine Tragetasche mit einem 51-Logo , das das schwarz-weiße Logo hervorhebt. Perfekt. Wählen wir nun Select. Wenn ich jetzt auf das Bild klicke, wirst du sehen, wie es jetzt aussieht. Also lass uns auf den Pfeil klicken. Wir haben den hellblauen Hintergrund und dann haben wir den Titel und die Beschreibung. Das ist großartig. Benutzer können auf die Website kommen, sie können ein Bild auswählen, sie können darauf klicken und sie können viel mehr erfahren. Klicken Sie auf Ihren Pfeil. Jetzt müssen Sie nur noch jedes einzelne Bild durchgehen und dies für jedes einzelne tun, da die Beschreibung offensichtlich für jedes Bild anders ist. Lass uns auf dieses eine Bearbeitungsbild hier oben links oder auf den Bildtitel klicken . Lassen Sie uns diese Bindestriche wieder herausnehmen und dann in die Beschreibung schreiben Dabei handelte es sich zwar um zwei vom BG Tourism Board gesponserte Deckblätter für das Tauchen auf Fidschi vom BG Tourism Board gesponserte Deckblätter für das Und wähle jetzt, wenn ich darauf klicke, siehst du die vollständigen Informationen unten Jetzt muss ich nur noch alles durchgehen und es zu jedem einzelnen Bild hinzufügen. Wenn das erledigt ist, sind wir alle bereit. Lass uns das einfach speichern. Schauen wir uns die Änderungen an. Du wirst sehen, was wir haben. Wir haben den Helden, wir haben eine sehr coole animierte Galerie, die auftaucht. Und wenn Benutzer auf ein einzelnes Bild klicken, sehen sie dieses Bild viel größer. Und sie werden viel mehr Informationen über die Arbeit erfahren, die Sie gemacht haben. 8. Portfolio: Kontakt-Fußzeile: Jetzt fügen wir die Fußzeile Ihrer Website hinzu, das Ende der gesamten Das Ende der Website, die Abmeldung. Ich schätze, was ich hier reinstellen möchte , sind Links zu meinen Social-Media-Seiten und einer Karte, damit die Leute mich besuchen können. Fangen wir hier von vorne an. Lass uns einen neuen Container hinzufügen. Lass uns auf das Plus klicken. Lass uns Flexbox wählen. Was ich hier haben will, sind zwei Spalten. Nochmals. Ich möchte jedoch, dass die Spalte auf der linken Seite etwas kleiner ist, da ich dort nur einige Social-Media-Symbole haben möchte. Und dann möchte ich eine Karte von meinem Büro hier auf der rechten Seite haben. Anstatt die 50, 50 auszuwählen, nehmen wir zuerst diesen, lassen Sie uns die Anzeige dieses Fußes ändern. Wir möchten, dass er sich von dem oben genannten unterscheidet. Offensichtlich gehen wir hier oben vom hellen Rosa ins Weiße über. Ich möchte nicht, dass Weiß zu Weiß wird. Ich brauche etwas Separates, das Gegenteil von Weiß, reines Schwarz. Lass uns hier auf diese Punkte klicken. Bearbeiten Sie den Container, gehen Sie hier zum Stylen hoch, wählen Sie Classic und dann lassen Sie uns einfach eine Farbe auswählen. Klicken Sie erneut darauf, wie ich bereits sagte Wenn Sie dieses kleine Stück ganz nach unten links ziehen , wird es reines Schwarz 00000 Das will ich. Wie Sie sehen können, sind die beiden internen Behälter da drin, aber sie reichen bis zum Rand. Was ich will, ist mehr Polsterung oben und unten. So wie ich es oben hatte. Ich bin nicht hier, um voranzukommen. Lass uns zur Polsterung gehen. Lassen Sie uns die Verknüpfung der Werte aufheben und dann sagen wir einfach , dass es 100 oben und 100 unten Nein, 100, nicht 1.000 Da sind wir. Wir haben jetzt etwas Platz über und unter dem, was wir hier reingehen werden. Was möchte ich hier hinzufügen? Nun, ich möchte nur einen kleinen Titel, eine kleine Abmeldung und dann ein paar Social-Media-Symbole. Dann fügen wir die Karte hier auf der linken Seite hinzu. Kommen wir zum Plus, gehen wir in die Richtung, werfen wir das in diesen Container. Ich möchte das hier einfach noch mal nennen . Lass uns einfach nochmal die Anzeige ändern. Gehen wir also zur Textfarbe Stil auf schwarzem Hintergrund, du bist weiß, und dann zur Typografie. Ich möchte, dass sie genauso angezeigt wird wie die Kopfzeile oben Klicken Sie auf Standard und schreiben Sie in Bunge, unabhängig davon, welche Typografie Sie für Ihren Einführungstitel ausgewählt haben für Ihren Einführungstitel ausgewählt Da haben wir's. Das liebe ich. Eine letzte Sache. Kommen Sie hier zum Inhalt Noch einmal, stellen Sie sicher, dass es sich nicht um ein H1h2 handelt Perfekt. Lass es uns so belassen. Mir gefällt die Größe sehr gut. Es muss nicht wahnsinnig groß sein, wie das hier oben, nur mehr hier, Punkt, Punkt, Punkt. Darunter möchte ich meine sozialen Medien hinzufügen. Ich bin hier, um Elemente hinzuzufügen. Dann findest du es vielleicht in diesem großen Menü hier. Es ist jedoch einfacher, einfach das Widget einzugeben, für das Sie nach sozialen, sozialen Symbolen suchen . Auch hier gilt: Drag-Drop unter deinem Titel. Stellen Sie sicher, dass Sie die rosafarbene Linie unten sehen. Da haben wir's. Dies ist in der gesamten Standardeinstellung weggelassen. Zuallererst ist die Ausrichtung auf diese Weise zentralisiert. Linksbündig zu sein, sodass sie unter dem m oder mehr liegt. Dann ist die Form abgerundet, hat eine gekrümmte Kante. Ich kann Quadrat wählen, ich kann Kreis wählen, ich denke Kreis. die sozialen Symbole angeht, nun ja, ich habe Facebook, Twitter oder X, wie es jetzt bekannt ist, und Youtube. Ich möchte jedoch drei leicht unterschiedliche angeben. Ich möchte damit prahlen, dass Instagram, Hände und Dribble in jeder kreativen Branche arbeiten Du wirst verstehen, was Hants und Dribble sind. Es gibt auch großartige Möglichkeiten, Ihr Portfolio in den sozialen Medien zu präsentieren Ihr Portfolio in den sozialen Medien Um diese zu ändern, klicken wir hier auf den ersten Link, Facebook. Dies ist das Symbol, das für diesen Link ausgewählt wurde , offensichtlich Facebook. Lass uns auf das Symbol klicken. Sie werden die Elementor-Symbolbibliothek sehen. Hier können Sie jedes Symbol auswählen , das Sie hier verwenden möchten deckt die meisten Social-Media-Kanäle hier ab. Das, was ich will, ist Instagram. Du kannst es nicht sofort sehen. Geben Sie auch hier oben den Namen Instagram und wählen Sie dort Einfügen. Wir haben das Instagram-Logo Twitter hinzugefügt. Klicken Sie auf das Symbol Nz für Youtube. Lass uns das auf Dribble ändern. Da ist es Das sind die drei, die ich will. Da haben wir's. Das zeigt die drei Dinge meine Benutzer sehen und anklicken sollen. Zuallererst muss ich die URL für jedes dieser Elemente hinzufügen . Fangen wir hier mit Dribble an. Da wir gerade dabei sind, kannst du es eintippen, oder es ist einfach einfacher, es zu kopieren und einzufügen Aber lassen Sie mich das einfach eintippen. eingeben, stellen Sie sicher, dass Sie HTPS, Doppelpunkt, dann Dribble, Ripple, B.com, Schrägstrich, John-Design angeben dann Dribble, Ripple, B.com, Schrägstrich, Dann klicken Sie einfach auf dieses kleine Symbol auf der rechten Seite der Aufschrift Link-Optionen Stellen Sie sicher, dass für soziale Medien, für die Website einer anderen Person, diese immer ausgewählt ist, um sie in einem neuen Fenster zu öffnen. Es bedeutet nur, dass ein separates Fenster geöffnet wird. Das bedeutet, dass die Leute immer noch auf Ihrer Website sind. Es nimmt sie nicht weg. Lass mich das einfach kopieren. Https hier. Slash-Design von Hunt.com. Instagram. Buchstabiere es richtig.com Schrägstrich John, Design Alle meine Links und meine Icons sind eingerichtet. Das Einzige, was ich ändern möchte, dass die Jagden und die Driven ihre offiziellen Farben zeigen Aber Instagram hat keine Farbe gewählt, warum? Weil Instagram nicht wirklich eine Farbe hat. Ist es ein Farbverlauf mit mehreren verschiedenen Farben? Es hat nur diese schwarze Hintergrundfarbe , die auf unserem schwarzen Hintergrund in der Instagram-Auswahl nicht wirklich funktioniert . Gehen Sie hier zu Farbe, klicken Sie auf dieses Drop-down-Menü und wählen Sie Benutzerdefiniert. Was ich machen möchte, nun, ich kann jede Farbe wählen, die ich hier eingeben möchte. Da dies jedoch Instagram ist und weil es unser Instagram-Kanal ist, werde ich eine Agendafarbe wählen , die ich oben ausgewählt habe. Bringen wir das zurück. Lassen Sie uns eine Struktur aufrufen dann zum Container ganz oben auf der Seite gehen . Dann komm hier nach links, um zu stylen. Dort siehst du die Farbe wir gewählt haben. Sie können den Mauszeiger darüber bewegen Denken Sie daran, dass es am einfachsten ist, darauf zu klicken und eine schnelle Kopie Scrollen Sie dann auf den sozialen Symbolen Instagram nach unten . Und was ich hier ändern möchte, ist die Grundfarbe. Lass uns auf diesen klicken. Füge meinen Hex-Code ein, das sieht toll aus. Klicken Sie hier einfach auf den Pfeil. Das gefällt mir wirklich. Die sehen echt cool aus. Ich denke, das einzige Problem, das ich mit ihnen habe, ist, dass sie ein bisschen groß sind und es nicht wirklich genug Platz zwischen ihnen gibt . Wenn Sie so etwas ändern möchten, ganz einfach, stellen Sie sicher, dass ganz einfach, stellen Sie sicher, die sozialen Symbole auf dem hervorgehoben sind. Hier ist ein Stil, hier kannst du mit verschiedenen Dingen herumspielen. Größe, du kannst diesen einfach nach oben und unten ziehen , um die Größe des Ganzen zu ändern. Polsterung handelt es sich offensichtlich um den Raum um das Symbol herum Bei der Polsterung handelt es sich offensichtlich um den Raum um das Symbol herum, bis hin zu Null um das Symbol herum Ziemlich groß, vielleicht 0,5 Abstand. Das ist der, den ich ändern möchte, damit ich fünf Pixel zwischen jedem Kreis habe. Lass uns einfach ein bisschen hochlegen, 15 hoch und runter drücken. Da haben wir's. Ich finde , das sieht viel besser aus. Dann noch eine letzte Sache, die Sie hier tun können , nämlich ein ziemlich lustiges Symbol. Klicke darauf. Lassen Sie uns einfach Maus über die Animation fahren, damit, wenn ein Benutzer auf Ihre Website kommt und den Mauszeiger über dieses Symbol bewegt , eine sehr coole Sache entstehen kann Wenn Sie auf Ihr Drop-down-Menü klicken, werden sie größer oder kleiner . Dass sie schrumpfen Spiel einfach mit all diesen, ich meine, ein paar verrückten hier drin herum ich meine, ein paar verrückten hier drin Lass uns einfach sehen, was wir haben. Schräg. Das ist eigentlich ziemlich cool Ja, such dir hier einfach eine aus, von der du denkst, dass sie zu dir und deiner Persönlichkeit passt. Ich mag es einfach, wenn der Psychiater so sein möchte . Klicke auf den Pfeil Ja, es zeigt nur, dass sie sich so bewegen, dass es nicht aktiv ist und es wahrscheinlicher ist, dass die Leute darauf klicken. Okay, so ist unsere linke Spalte sortiert. Lassen Sie uns jetzt einfach eine Karte hier einfügen. Kommen Sie wieder hier zu Ihrem Plus eines Elementtyps im Wort Map, Google Maps. Das werden wir hinzufügen, es per Drag & Drop in Ihren Container ziehen. Dies ist automatisch so eingerichtet, dass eine Google-Karte angezeigt wird. Jetzt wurde nur ein Standardstandort ausgewählt, nämlich Last-Minute-London, aber wir möchten diesen Standort so ändern, dass sich unser Büro befindet. Nun, diejenigen unter Ihnen, die den Film Finding Nemo gesehen haben , kennen diese Adresse in Australien, die Wallaby Street 47 ist Lass uns das einfach reinstecken. Da haben wir's. Da ist die Wallaby Street 47 , die sich in Blackwall in New South Wales befindet, ausgewählt , die sich in Blackwall in New South Wales befindet Und womit Sie hier herumspielen können, ist der Zoom. Wie Sie jetzt sehen können, ist es ziemlich weit draußen, was Ihnen zeigen wird, wo im Land mein Büro ist. Aber lassen Sie uns einfach ein bisschen vergrößern oder ein bisschen herauszoomen, um zu sehen, was passiert. Ich habe herangezoomt, ich habe das auf 13 geändert und das hat gerade gezeigt, wo mein Büro nur die Städte zeigt , die an den Stränden liegen, und vielleicht all das Wasser und so Gehen wir einfach ein bisschen weiter bis zu 15, glaube ich. Ja, da haben wir's. Also können wir sehen, dass das die Wallaby Street ist und wir können sehen, wo das im Verhältnis zu allem anderen ist Nun, Sie können auch mit der Höhe herumspielen, aber da ich nicht viel auf der linken Seite habe, möchte ich es nicht wirklich zu viel größer machen , als es ist, will ich ehrlich sein Sie können einfach mit einer Pixeleinstellung herumspielen. Ich denke sogar ein bisschen kleiner. Vielleicht 250 Pixel. 150. 250, vielleicht 300, glaube ich. Ja, ich finde, das sieht perfekt aus. Jetzt ist mein Fuß hier besser sortiert, Social-Media-Symbole und eine Karte, wo sich das Büro befindet. Lass uns wieder hierher gehen. Speichern wir den Entwurf und uns dann eine Vorschau der Änderungen an. Was Sie hier sehen können, ist jetzt eine vollständige Website. Sie werden sehen, wie einfach und schnell das zu machen war. Jetzt müssen Sie nur noch dem folgen, was ich Ihnen hier gezeigt habe , und es in Ihrem eigenen Stil neu erstellen Dein Bild hier auf der linken Seite, wähle ein Bild, das dich oder deine Arbeit am besten repräsentiert Wählen Sie hier den Titel Ihrer Website, vielleicht den Firmennamen oder Ihren Namen. Wählen Sie dann Ihr Galeriedisplay aus, wie es angezeigt werden soll, welche Bilder Sie wählen und dann Ihren Fuß. Wählen Sie hier aus, was Sie möchten, verwenden Sie einfach die Social-Media-Symbole. Sie können eine Telefonnummer oder eine E-Mail-Adresse angeben, wenn Sie möchten dass andere Sie direkt kontaktieren. Ich möchte nur, dass sie wissen, wo mein Büro ist, und dann können sie die Anfahrtsbeschreibung finden. Aus Desktop-Sicht ist alles geklärt. Jetzt müssen wir uns ansehen, wie es sowohl für Tablets als auch für Handys ändern können. 9. Mobil- und Tablet-Design: Wir haben die Desktop-Version Ihrer Website Ihres Portfolios für Sie vorbereitet. Wir müssen jedoch sicherstellen, dass es auf Desktop, Tablet und Handy einwandfrei funktioniert . Elementary ist so eingerichtet, dass das Tablet die Abschnitte vom Desktop erbt und Handy die Abschnitte vom Tablet erbt Sie müssen in dieser Reihenfolge daran arbeiten, auch wenn Sie vielleicht denken, dass Mobilgeräte die wichtigste Arbeit Ein letzter Punkt bedeutet nur, dass Sie alles auf dem Desktop zum Laufen bringen, es für das Tablet bearbeiten und das dann für das Handy bearbeiten. Auf dem Desktop ist alles sortiert. Klicken wir hier oben auf dieses Symbol, um es in ein Tablet umzuwandeln, und wir können das Tablet bearbeiten. Sie werden zuerst sehen, wie alles aussieht. Es hat nur genau das kopiert, was wir auf dem Desktop gemacht haben, und es für das Tablet geändert. Ich glaube, das entspricht fast der Art und Weise, wie Menschen Dinge auf Tablets betrachten, egal ob sie sie im Hoch- oder Querformat betrachten. Ich denke, das, was wir auf dem Desktop gemacht haben, nachzubilden , funktioniert Es gibt jedoch einige Probleme mit dem Abstand und der Größe Fangen wir mit dem Helden an. Das Hauptproblem hier ist offensichtlich die Größe des Textes hier drüben, oder? Lass uns darauf klicken. Dann kommen wir hier rüber zum Stil, gehen wir zu Typografie. Klicken Sie auf dieses Symbol und lassen Sie es uns dann ändern. Es ist auf 130 Pixel eingestellt, was toll ist, wenn man es hat. Dieser große Desktop, kein Tablet. Gehen wir vielleicht zu etwa der Hälfte dieser Größe über, 65. Vielleicht ein bisschen größer. Du kannst einfach weiter auf diesen kleinen Auf- und Ab-Abschnitt hier drüben drücken . Vielleicht 90. Ich denke, das funktioniert wirklich gut, nicht wahr? Ich glaube, ich mag immer noch die 50, 50 aufgeteilt von links nach rechts. Und ich finde, das sieht wirklich gut aus. Aber mein Gesicht, wow, du kannst es sehen. Aber ein bisschen, mein Haar ist abgeschnitten. Lassen Sie uns einfach die Position des Hintergrundbilds ändern , das sich, wie Sie sich erinnern werden, hier in diesem Container befindet. Klicken Sie entweder auf Ihr graues Symbol oder gehen Sie hier zu Structure. Dann komm hier nach links und wähle Stil. Wie Sie hier sehen können, hat dies wiederum das übernommen, was wir für den Desktop getan haben. Jetzt haben wir es in die Mitte gestellt. Ich finde zentralisiert gut, aber mal sehen, wie es aussieht. Mittig links davon verliert man viel mehr von mir. Man kann nur meinen Ellbogen sehen. Versuchen wir es nach rechts. Auch hier nicht ganz genug. Was ich hier tun muss, ist die letzte Auswahl dafür zu wählen, was hier benutzerdefiniert ist. Ich kann mit der X-Position und der Y-Position herumspielen. Die Y-Position ist in Ordnung , da sie ganz oben im Bild steht. Und ganz unten im Bild ist es nur die X-Position. Lass uns einfach damit herumspielen. Ziehe dieses kleine Symbol von links nach rechts und mach es so, dass du damit zufrieden bist? Ich denke, lass uns vielleicht zu einer schönen Zahl gehen, 350. Minus 350. Da haben wir's. Ich klicke hier auf meinen Pfeil. Die Fledermaus ist perfekt. Ich bin zentralisiert. Ich lächle, und Sie können meinen Namen rechts hier auf dem Tablet sehen . Perfekt. Scrollen wir jetzt einfach nach unten zu diesem Display. Jetzt haben wir hier ein paar verschiedene Optionen. Ich denke, das funktioniert als vierspaltiges Raster. Sie können dies jedoch ändern, wenn Sie es hier ändern, wird es auf dem Desktop nicht geändert. Wenn Sie hier nach rechts kommen und auf Grid klicken, sehen Sie verschiedene Optionen für Desktop, Tablet und Handy. Wenn wir wollten, dass es zwei Spalten gibt, würde ich diese Zahl hier einfach auf zwei ändern. Wenn ich dann auf den Pfeil klicke, kannst du sehen, dass die Bilder anders angezeigt werden. Es ist von vier Spalten auf zwei Spalten gestiegen. Ich denke jedoch nicht, dass das sehr gut funktioniert, weil dann komische Leerzeichen und seltsame Leerzeichen hier drin sind. Ich denke, es würde nur auf diese Weise funktionieren , wenn es vier Spalten oder eine Spalte wäre. Schauen wir uns eine Spalte an. Nun, das ist wirklich erstaunlich, nicht wahr? Zeigt alles in voller Breite an. Ich weiß es jedoch nicht, ich glaube, ich würde gerne vier hinzufügen. Ich glaube, ich werde das zurücklegen. Und ich denke, ich werde mich für eine einzige Kolumne auf dem Handy entscheiden, so wie wir sie jetzt haben. Es ist dasselbe, es ist auf dem Desktop. Nur ein kleines Problem ist hier nur der Abstand zwischen den Rändern des Bildschirms. können wir ändern. Wir brauchen nur ein bisschen mehr Polsterung Klicken wir auf diese Punkte oben, um den Container hier zu bearbeiten und erneut voranzukommen. Es wird übernommen, was wir für Desktop eingerichtet haben Wenn ich auf diesen Punkt klicke und eine Null eintippe, wird sie wieder auf Null gesetzt. Lassen Sie uns dann die Verknüpfung aufheben. Schwenken an der Spitze. Nun, ich denke, sie sollten etwas kleiner sein. Vielleicht 50. Das ist gut. Die untersten 50. Ich brauche nur ein bisschen Polsterung rechts und links Versuchen wir es vielleicht mit 25 Pixeln rechts, 25 Pixeln links. Klicken wir auf den Pfeil oder lieben wir ihn. Das ist ein toller Schritt vom Helden runter in den Galeriebereich. Und rate mal, wenn ich auf eines davon klicke, erhalte ich immer noch das Display. Es wird automatisch auf eine Breitenanzeige umgestellt. Auf dem Tablet ist das der Galeriebereich, jetzt ist es nur noch der Fuß Ich glaube, mir gefällt das hier immer noch. Aber vielleicht sollten es nicht zwei Spalten sein. Vielleicht müssen wir das in eine einzige Spalte ändern. Lass uns hier auf die Punkte klicken. Wir werden das Layout der internen Spalten bearbeiten . Nur auf dem Tablet befinden wir uns im Hauptbehälter. Komm rüber zum Layout. Was Sie hier haben, ist die Richtung. Wie Sie hier sehen können, verläuft sie in einer Reihe, die horizontal ist Zwei Spalten, eine links, eine rechts. Wenn ich auf diesen klicke, wird er vertikal. Es ist jetzt gestapelt, und das funktioniert auf Tablets viel besser Ich denke, wir müssen hier nur mit dem Abstand zwischen allem herumspielen Gehen wir zunächst zum Hauptcontainer. Lass uns wieder weitermachen. Lass uns einfach das machen, was wir oben gemacht haben , und mit den Einstellungen herumspielen. Tatsächlich möchte ich genau die gleichen Padding-Einstellungen vornehmen. Ich schreibe hier 50 rein. Hebt den Link auf, rechts auf 25 und links auf 25. Jetzt haben wir den gleichen Abstand wie oben, einen schönen Abstand von 50 Pixeln oben und 25 Pixel unten links und rechts Wie Sie jedoch sehen können, ist es so, als würde man Dinge auf der Karte ändern, geht nicht bis zum Rand Dann je mehr hier, naja , das ist in zwei Zeilen. Ich möchte, dass das auf einer einzigen ist. Der Grund dafür ist nur der Abstand der beiden internen Behälter. Dieser war auf 33% eingestellt und dieser auf 66%, ein Drittel und 23. '. Aber jetzt, wo sie übereinander sitzen, sollte das für jeden Fall 100% sein. Wenn ich es hier ändere, wird es vom Desktop aus nicht geändert. Nehmen wir diesen ersten Container. Klicke auf dein graues Feld, dann hier drüben, anstelle von Pixeln, ändere diese 2% und gib hier 100 ein. Wir werden nun sehen, dass die gesamte Breite dieses Containers der Breite des Aufnahmecontainers entspricht. Machen wir dasselbe für die Karte. 100 gesendet. Das sieht viel besser aus. Jetzt bevorzuge ich dieses Display sehr. Wie gesagt, wir werden verstehen, dass alles, was wir hier ändern, sich nicht ändert. Auf dem Desktop können Sie jederzeit zurückgehen und das überprüfen. Klicken Sie auf Desktop, das sind immer noch zwei Spalten, die von links nach rechts verlaufen, wohingegen sie auf dem Tablet gestapelt sind Das ist unsere Tablet-Version. Das ist alles, was Hero arbeitet. Galeriearbeiten, Werke. Schauen wir uns jetzt das Handy an. Auch hier wird alles vererbt , was wir auf dem Tablet gemacht haben. Aus diesem Grund sind diese beiden Spalten jetzt gestapelt. Scrollen wir einfach nach oben und beginnen mit dem Hier. Dieser ist etwas anders. Warum? Nun, weil es mobil ist. Daher eine Spalte links und eine Spalte rechts. Das würde nie funktionieren, oder? Dafür ist es zu dünn. Es hat die beiden Säulen übereinander gestapelt die beiden Säulen übereinander Alles, was ich hier tun muss, ist mit der Größe und dem Abstand der einzelnen Elemente herumzuspielen der Größe und dem Abstand der einzelnen Lassen Sie uns zunächst die Größe dieses Textes hier ändern. Komm rüber zur Typografie. 90 ist zu groß für Handys. Ändern wir es vielleicht auf 50, vielleicht 60. Ich finde das ziemlich gut. Ich denke jedoch immer noch, dass oben zu viel Platz und oben nicht genug Platz für mich selbst ist. Ich klicke auf den Pfeil, der dort weniger Platz zeigt. Was wir tun müssen, ist einen Abstandshalter hinzuzufügen. Dies ist im Grunde eine leere Spalte . Darin befindet sich kein Bild Es ist nur die Größe der Behälter, die ihn umgeben, weil er gestapelt ist Deshalb ist dieser viel kleiner als der darunter liegende Fügen wir dem Element einen Abstandshalter von hier hinzu. Klicken Sie erneut auf das Plus und wählen Sie den Abstandhalter aus . Geben Sie ihn einfach Wenn du es nicht sehen kannst und es an den Anfang der Spalte hier drüben ziehst, dann kannst du hier mit dem Leerzeichen herumspielen Verwenden wir diese Drag-Leiste hier drüben. Dann lass es uns einfach auf die perfekte Größe bringen. Ich denke, 260 Pixel sind vielleicht genau richtig. Lass uns auf den Pfeil klicken. Das Bild von mir ist viel besser. Und dann der Text, naja, er befindet sich immer noch unter dem Bild und man kann alles auf einmal sehen. Es hat immer noch die gleiche Wirkung wie auf dem Desktop und auf dem Handy, aber jetzt ist es nur noch gestapelt und nicht mehr in separaten Spalten links oder rechts Scrollen wir jetzt einfach nach unten zum Galeriebereich. Was hier automatisch gemacht wird ist, diese vier Spalten auf Mobilgeräten in eine einzige Spalte zu ändern . Das ist definitiv das, was wir wollen. Wenn wir nach unten scrollen, werden Sie einfach sehen, wie das alles funktioniert. Zwischen den einzelnen Tablets befinden sich keine zufälligen Leerzeichen. Es hat die gleiche Einstellung zwischen den einzelnen Bildern. Das funktioniert wirklich gut. Auch hier wurde die Polsterung übernommen , die wir für Tablets eingerichtet haben Lassen Sie uns das einfach für Mobilgeräte ändern . Gib ihm etwas mehr Platz. Scrollen wir nach oben. Klicken Sie auf diese Punkte oder wählen Sie den Container hier in der Struktur aus, wenn Sie wissen, wo er sich befindet. Wie Sie sehen können, gibt es die 50 und die 25. Ich denke, das ist an allen Rändern zu viel. Ich glaube, vielleicht 15 Pixel rundum. Ja, das ist mir viel lieber. Ich glaube nicht, dass es oben viel Platz braucht und hier braucht es nicht so viel Platz. Raus, sieht fantastisch aus. Lassen Sie mich nochmal mit einem Klick auf eines dieser Displays wie diesem klicken. Jetzt haben wir das Bild oben und den Text unten. Es ist jedoch perfekt für die Verwendung auf Desktop, Tablet und Handy konvertiert . Hero sieht in tollen Galerien aus, sieht fantastisch aus, um ehrlich zu sein. Ich denke, dieser Pota-Bereich funktioniert auch sehr gut. Ich werde nur auf diese Punkte klicken. Ändern Sie diese Einstellung auf die Einstellung, die ich für die obige Galerie eingerichtet habe, nur um die Konsistenz von 15 zu gewährleisten. Ich denke, das funktioniert links und rechts sehr gut. Da es sich jedoch um die Fußzeile handelt, denke ich, dass sie oben und unten etwas mehr Platz benötigt , nur um dem Text und den Symbolen etwas mehr Luft zum Atmen zu geben Text und den Symbolen etwas mehr Luft zum Atmen Lassen Sie uns diese dann trennen. Lass uns einfach oben nachschauen, vielleicht ändern wir das auf 30. Unten doppelt, ebenfalls 30. Da haben wir's. Ich liebe es. Es war so einfach, alles, was Sie auf dem Desktop gemacht haben, zu nehmen und es für Tablets und Handys geringfügig zu ändern. Schauen wir uns jetzt alle drei an. Das ist Desktop, sieht toll aus. Auch hier hat sich nichts geändert, weil wir es in dieser Reihenfolge gemacht haben. Wir haben mit dem Desktop angefangen, dann sind wir zum Tablet und dann zum Handy übergegangen. Das ist Desktop. Das ist auch ein Tablet. Perfekt. Das ist mobil. Ich liebe es. Jetzt haben Sie also eine vollständige Portfolio-Website. Nur noch eine Sache müssen wir tun. Lassen Sie uns das schließen und veröffentlichen wir es. Lass uns es zum Leben erwecken. 10. Deine Website starten: Nachdem Ihre Website veröffentlicht wurde, klicken hier auf das Elementor-Symbol auf der linken Seite und verlassen Sie dann Wordpress Dann klicken Sie hier auf dieses Wordpress-Symbol. Und dann noch eine letzte Sache zum Einrichten: Gehen Sie hier zum Erscheinungsbild und wählen Sie Anpassen. Ignoriere, was du hier auf der rechten Seite siehst. Dies sind nur grundlegende WordPress-Einstellungen. Dies sind Dinge, die du außerhalb von Elementor tun kannst, aber deine Seite wird nicht so angezeigt , wie wir sie dort auf der rechten Seite sehen können Das Einzige, was ich hier ändern möchte, ist die Identität der Website. Also klicken Sie auf diesen. Wie Sie hier sehen können, ist es im Titel der Website enthalten. Das habe ich früher in Elemental eingerichtet. Unter dem Slogan steht jedoch nur mein WordPress-Blog. Das ging quasi automatisch rein. Was ich hier eigentlich schreiben möchte, ist nur ein einziger Satz darüber, wer ich bin und was ich Kunden bieten kann. Also füge ich diesen ein. Und ich habe John Wolfgang Miller gesagt, Kreativstudio, das mit Digitaldruck und Branding arbeitet. Fassen Sie sich einfach in einer Zeile zusammen. Dies hilft, wenn Leute bei Google nach Ihnen suchen. Dann die letzten beiden Dinge, dein Logo und dein Seitensymbol. Auch dies ist Ihr Firmenlogo. Es erscheint derzeit nicht auf Ihrer Website, kann aber in Google-Suchanfragen auftauchen. Und Ihr Seitensymbol ist, wie Sie hier sehen können, das in den Browser-Tabs erscheint , wenn Sie im Internet suchen Wenn Sie mehrere verschiedene Tabs geöffnet haben, ist es das winzige Logo, das sich neben dem Titel Ihrer Website befindet. Um das zu wählen, werde ich für beide dasselbe Logo verwenden. Klicken Sie hier auf Logo auswählen. Wenn Sie es bereits hochgeladen haben, wählen Sie es aus der Medienbibliothek aus. Wenn nicht, klicken Sie auf Dateien hochladen und suchen Sie sie auf Ihrem Computer. Dies ist der , den ich ausgewählt habe. Dies ist mein Firmenlogo , das meine Initialen enthält. Also wähle ich das, wähle aus. Überspringe das Zuschneiden. Ich muss das Bild nicht zuschneiden Es hat so wie es ist die perfekte Form und Größe. Und dann wählen wir das Site-Symbol. Es wird genau derselbe sein. Nur für diesen, und Sie werden sehen, dass die empfohlenen Bildabmessungen 512 mal 512 Pixel betragen. Das ist genau die gleiche Größe, die ich für diesen eingestellt habe. Dann klicken Sie einfach auf Veröffentlichen. Dann klicken Sie hier auf die ARL und gehen Sie zu dieser URL namens Homepage-Einstellungen. Hier wählen Sie aus, welche Seite Ihrer gesamten Website die Startseite sein soll. Die erste, die jeder sieht, wenn er Ihre Website besucht. hier also eine statische Seite und wählen Sie aus diesem Drop-down-Menü die aus, die wir gerade eingerichtet Also hier habe ich es John Wolfgang Design genannt. Das ist es. Ihre Websites sind jetzt startklar, klicken Sie hier auf Veröffentlichen. Und schließen Sie dann diese Seite hier, indem Sie auf das X klicken Sie haben jetzt eine Live-Website, und wenn Sie mein Feedback zum Website-Build wünschen, verwenden Sie einfach den Domainnamen, den WozMa Ihnen bei der Registrierung gegeben hat. Wenn es sich jedoch um einen Dienst handelt, den Sie für alle auf der Welt online stellen möchten , können wir den Domainnamen in einen Namen ändern, den Sie woanders gekauft haben Loggen Sie sich dazu wieder in Ihr WozMa-Konto ein und klicken Sie auf der Website, die wir gerade eingerichtet haben, auf kürzlich bereitgestellte Apps Website, die wir gerade eingerichtet haben, Und dann klicken Sie hier unten auf Domains konfigurieren. Hier können Sie also einen Domainnamen hinzufügen , den Sie möglicherweise woanders gekauft haben. Einer der beliebtesten Orte, um einen Domainnamen zu kaufen , ist so etwas wie Go Daddy. Wenn Sie das gekauft haben, können Sie es auf die Website verweisen, die Sie gerade erstellt haben. Nehmen Sie also den Domainnamen und geben Sie ihn hier in dieses Feld ein. Und dann klicken Sie auf Hinzufügen. Sie haben hier einige Optionen. Fahren Sie einfach mit der empfohlenen Version oben fort, was bedeutet, dass sie mit der WWW-Version und ohne WWW funktioniert . Und Sie sind bis zu dieser Seite durchgekommen, und das sind die beiden Codezeilen, die Sie zu Ihrem DNS-Anbieter hinzufügen müssen. Das ist also der Domain-Name-Systemanbieter, also vielleicht Go Daddy Crazy Domains, einer dieser Online-Dienste. Welchen auch immer Sie verwenden, wenn nicht klar ist, wo Sie ihn eingeben sollen, senden Sie mir hier eine Nachricht, und ich werde Sie für diesen senden Sie mir hier eine Nachricht, speziellen Dienst darüber informieren , wie Sie ihn einrichten müssen Also müssen wir reingehen und diesen A-Record-Code hier und diesen C-Name-Record hier einrichten A-Record-Code hier und diesen C-Name-Record hier Und wenn das alles erledigt ist, klicken Sie einfach bei beiden auf Aktualisieren. Es kann bis zu 72 Stunden dauern, bis es tatsächlich funktioniert, aber das passiert normalerweise innerhalb von etwa einer Stunde. Testen Sie also weiter Ihren Domainnamen, und wenn alles eingerichtet ist, werden Sie Folgendes sehen. Es leitet die Benutzer zu der Website Sie mit dem richtigen Domainnamen eingerichtet haben, und Sie können diesen auf der ganzen Welt in sozialen Medien teilen und all Ihren Freunden mitteilen. 11. Vielen Dank: Danke, dass Sie sich diese ganze Klasse angesehen haben. Ich hoffe, Sie haben viel mehr über Elementar gelernt und haben jetzt ein fantastisches Portfolio. Wenn die Website fertig ist, stellen Sie sicher, dass Sie sie hier im Projektabschnitt unten veröffentlichen. Und ich gebe Ihnen sofort mein Feedback. Wenn Sie Fragen zu etwas in der Klasse haben, posten Sie das in Diskussionen und ich werde so schnell wie möglich antworten. Und klicke unten auf meinen Namen, um mein vollständiges Skillshare Profil zu sehen. In jetzt sehen Sie alle meine Klassen, von denen mehr über elementare und fragen sich auch über das Hochladen von Bildern auf Ihre Website. Und vergiss nicht, mir zu folgen. So finden Sie es jedes Mal heraus, wenn ich eine brandneue Klasse hochlade. Okay, das ist alles. Haben Sie einen tollen Tag.