Transkripte
1. Dies wird wir abdecken: Hey, und willkommen in der Skill-Share-Klasse für die Leute, die mich nicht kennen. Mein Name ist Reno. Ich bin eine Designerin aus den Niederlanden. Ich habe Design studiert. Ich arbeite für Kunden und mache Videos über Webdesign. Fürchten Sie diese Marke namens Hebelwirkung Pixel. In der kurzen Klasse werden
wir einen beliebten, transparenten Header oder Menüeffekt erstellen . Kannst du heute auf modernen Webseiten sehen? Das ist schwer zu erreichen, da die meisten Presseteams waren, und deshalb werden wir Elemente oder Pro in Elementen oder Pro verwenden. Wir können das Menü mit Dragon Drop erstellen und Applied ist auf alle Seiten in der kurzen Klasse. Wir werden dieses Menü erstellen, das ein anklickbares Logo hat, klickbare Menüpunkte,
eine Schaltfläche, die auf eine andere Seite und soziale Medien verlinkt, Aiken auf Mobile. Die violette Schaltfläche verschwindet automatisch und die Kontaktseite wird im
Dropdown-Menü angezeigt . Also ich hoffe, du wirst meiner Klasse beitreten und lass uns einfach loslegen
2. Einstellen der grundlegenden Grundlagen: Ich bin hier in der Presse und ich gehe zu meinem Dashboard auf das erste, was
wir tun werden, ist, dass wir hier zu D-Vorlagen gehen und wir werden auf Team
Builder klicken , weil die Kopfzeile Teil vom Team-Builder-Abschnitt ist. Ich werde verkleinern, weil mein Bildschirm zu klein ist. Ok? Eso habe ich bereits Kopf sind, so werde ich das für jetzt löschen, weil wir von Grund auf neu
beginnen s Also das erste, was Sie tun möchten, ist auf Header klicken. Und dann, wenn Sie auf Erstellen eines neuen Headers klicken, können
Sie von hier aus einen neuen Header erstellen. Geben Sie ihm einen Namen Ich werde auf Erstellt die Vorlage klicken eso wir t Spalte
hier eingerichtet haben . Ich werde schließen. Er navigierte vorerst, ich werde auf das Plus klicken und wir brauchen vier Spalten, weil wir einen Teil für das Logo
für die Menüpunkte für den Button und 40 soziale Aikens brauchen . Also werde ich das hier aussuchen, damit wir jetzt vier Spalten haben. Wir wollen ihm etwas Höhen geben. Wir werden uns verstecken und dann auf Minimale Höhen klicken. Ich werde es 90 schaffen. Und das ist eine wichtige Nummer, denn wir müssen uns an diese Nummer erinnern, wenn wir wollen, dass dieser Header über unseren anderen Inhalt steht. Also erinnere dich an diese Nummer. Und jetzt gehen wir zum Kragen. Ich werde ihm ein Hintergrundkragen geben. Wir werden das später löschen. Aber wenn wir mit weißem Text arbeiten, kann
ich nicht sehen, was ich hier mache, weil es einen weißen Hintergrund gibt. Zuerst müssen
wir mit einem schwarzen Hintergrund beginnen, damit ich sehen kann, was ich tue. Aber ich werde ihm vorerst nur 50% Kapazität geben. Also, wenn wir es auf die Homepage anwenden, können
wir tatsächlich sehen, dass es zehn darunter sind. Also gibt es nur für den Moment und wir werden löschen ist später. Und jetzt gehen wir Duty fortgeschritten hier drüben und setzen den SET-Index auf einen TC-Index oder Set-Index Teoh. Stellen Sie sicher, dass unser Header an der Spitze aller anderen Elemente ist. Wenn Sie wirklich sicher sein wollen, legen Sie es
einfach auf 10. Denn manchmal auf Ihrer Website haben Sie bereits mit dieser Nummer gespielt. Also werde ich es um 10 Uhr setzen. Damit ich sicher bin, dass es immer oben auf unserer Seite ist. Klicken Sie einfach auf Update oder veröffentlichen für jetzt und jetzt erhalten Sie diesen Bildschirm und es wird Sie
fragen, wo Sie die Kopfzeile erscheinen soll. Ich wollte auf der ganzen Seite sein, also klicke ich auf Safe and close,
und ich gehe zurück zu meiner Homepage und klicke auf die Aktualisierung, um zu sehen, was passiert. Und jetzt, wie Sie sehen können, ist
es transparent. Aber es ist immer noch oben auf unserer Seite, weil meine Homepage hier endet. Also müssen wir sicherstellen, dass meine Homepages unter der Kopfzeile liegen. Also, wie wir
das erreichen , ist, gehen Sie zurück zu Ihrem Header und spielen Sie dann mit dem unteren Rand. Also habe ich diesen Wert aufgehoben und dann minus 90 hier drüben gesetzt. Wie Sie es bereits hier in der Vorschau sehen können. Jetzt bewegt sich der andere Inhalt, der sich unter diesem Header befindet, in Sicht auf unseren Header um ungefähr . Der gesamte Header ist oben mit dem Z-Index, so dass er transparent wird. Also, wenn wir jetzt auf Update klicken, gehen Sie zurück zu unserer Homepage und klicken Sie auf Aktualisieren. Sie werden sehen, dass es gerade jetzt oben auf unserer Seite ist und wir können das Video sehen. Es stimmt, unsere schwarze Schicht, die eine Transparenz hat. So haben wir auf diese Weise D transparenten Header erstellt.
3. Das Menü mit Drag und Dropen füllen: Also, jetzt werde ich ein paar Elemente in meinem Header spielen. Wenn Sie
beispielsweise ein Logo auswählen,stellen Sie
sicher,dass es sich um ein weißes Versionslogo handelt. beispielsweise ein Logo auswählen, Wenn Sie
beispielsweise ein Logo auswählen,stellen Sie
sicher, Sonst wirst du es nicht sehen. - Natürlich. Also habe ich eine weiße Version meines Logos hier drüben. Gonna Stell, dass wirklich schnell jetzt, um Ihre nie Menü Bilder Regie setzen, nie Menü, Widget von Elementen oder pro Sie kann sehen, es muss nicht Kragen zu schreiben. Also, natürlich müssen wir uns ändern. Das ist Pflicht. Weißer Kragen. Wenn du jetzt auf Weiß klickst, sieht
das viel besser aus und ich mache den Anruf ihn einfach ein bisschen größer, so dass es nur
auf einer Linie sein wird , diese Studentenrechte
ausgerichtet. Okay, hier
drüben, ich will einen Knopf, also ziehe ich den Knopf ein. Starr. Also erscheinen diese Seiten hier drüben, weil ich ein Menü innerhalb von er Pre's erstellt habe. Wenn Sie also auf den Menüpunkt das nie Menü-Widget in einer Seite von elementar Pro klicken und Sie einen D-Menü-Bildschirm
öffnen, können
Sie sehen, dass ich ein Menü innerhalb von Thea Normal War Press Menu Creator erstellt habe, und Sie könnten ein Menü von hier erstellen und Sie könnten einfach in Ihre Seiten von hier ziehen. Und ich habe dafür gesorgt, dass die Kontaktseite nicht von mir aus meinem Menü getrennt ist, weil ich möchte, dass
sich die Kontaktseite innerhalb dieser Schaltfläche befindet. Deshalb gibt es keine Kontaktseite innerhalb des Menüs,
weil ich das verlinken werde, aber auf die Kontaktseite, und ich kann einfach nach der Kontaktseite suchen und sie wie dieser Boom verknüpfen. Das letzte, was ich tun muss, ist die Suche nach ein paar Social Aikens Das hat die
Plattformen hier drüben verändert . Und übrigens,
das ist kein Tutorial für die Grundlagen des Elementaren, oder ich werde hier nicht auf alle Details eingehen. Was ich auch tun möchte, ist, dass d Inhalt vertikal in Sichtweite von jeder
Spalte ausgerichtet wird. Also, was ich tun werde, ist, dass ich zu jeder Spalte
gehe, zuerst zum fortgeschrittenen Leedy-Polster gehe, also wird es nur auf der linken Seite sein und dann zum Layout und zur vertikalen Ausrichtung gehen,
in die Mitte setzen. Also dann wird es perfekt auf den Rest meiner Website abgestimmt werden jetzt Estelle und Base kopiert , die auf die anderen, die Sie sehen können. Stellen Sie nun sicher, dass Sie Größen für alle Ihre Spalten wie diese schreiben müssen. Alles klar, lasst uns für jetzt auf Update klicken und sehen, was ich erstellt habe. Gehen Sie zurück zu meiner Homepage und klicken Sie auf die Aktualisierung. Und wie Sie jetzt sehen können, ist
dies fast die Speisekarte, die ich will. Und jetzt können wir das Schwarze ausschalten. Also gehen wir zurück zum Hauptabschnitt hier drüben. Gehen Sie zurück zur Stele zum Hintergrunde-Typ. Injizieren Sie das einfach. , Wir können nicht wirklich sehen,was wir hier tun, aber wir sind schon fertig. Fast. Kehren Sie wenigstens zu Ihrer Startseite zurück und aktualisieren Sie sie dann. Und wie Sie jetzt sehen können, haben wir einen transparenten Header.
4. Kühlere Animationen mit Verzögerungen hinzufügen: Also habe ich ein paar Dinge getan, um dieses Design ein wenig besser aussehen zu lassen. Ah, zuallererst bearbeite
ich Animationen für jedes einzelne Element. Also, was ich tat, ist ich ging in die erste Spalte 20 voraus, und ich ging zu Bewegungseffekten, die ich verwendet einen tiefen Glauben in unten als 40. Nächste Spalte. Ich habe das Gleiche getan. Bewegungseffekte verblassen von unten, aber dann habe ich eine Verzögerung wie 300 Millisekunden hinzugefügt. Also dann diese Spalte zuerst animiert in der erledigt Diese Spalte wurden in einem Tier animiert. Mädchen werden das für das letzte tun Sie so bei Emotionseffekt und Buddhist auf 600 ziemlich letzte auf 900. Und das ist ein wirklich cooler Effekt, denn jetzt wird es wie eine Animation innerhalb der Kopfzeilen sein. Ein Klick und Update. Gehen Sie zurück zu Ihrer Startseite, aktualisieren Sie und schauen Sie sich die Animation aus dem Menü an. Boom, Boom, Boom, Boom. Ich meine, das ist ziemlich cool.
5. nette Hover-Effekte hinzufügen: Ich habe auch ein paar Hover-Effekte hinzugefügt. Wie Sie sehen können, gibt es hier drüben einen Basiswert. Aber es ist nichts passiert mit dem Button und der Show Show Aikens. Also habe ich einfach auf den Button geklickt. Ich gehe zu Stell und dann können Sie innerhalb des Hovers eine Animation für Schaltflächen einrichten. Ich habe fast immer String verwendet, weil ich denke, das ist die glatteste über sie alle Sieht ziemlich schön und 40 soziale Aikens Ich benutze wachsen Also, wenn Sie nicht zu wachsen Ich kann schweben,
schweben Animation und klicken Sie auf Wachsen Die Symbole werden wachsen Wir können es hier nicht sehen Aber vertrauen Sie mir Wenn Sie zurück zu Ihrer Seite gehen Aktualisieren Sie dies können Sie sehen Ist dies ein schöner Effekt für eine Schaltfläche? Jeder? Soziale Aikens jetzt Tag beginnen zu wachsen.
6. Mobile responsive Optimierung: Okay, also jetzt für das mobile Menü, denn das mobile Menü sieht gerade nicht sehr gut aus. Was ich tun werde, ist, dass ich im Hintergrund zu meinem Stellan zurückgehe, weil ich sehen
will, was ich tue. Ich werde den Modus in den mobilen Modus stellen, und das ist natürlich nicht das, was Sie für ein mobiles Menü wollen. Das erste, was ich tun möchte, ist an einem gewissen Rand innerhalb dieses Hauptabschnitts. Also gehen Sie zu fortgeschrittenen unlink dieses bei 22 rechts, 20 nach links, und dann vielleicht auch 20 nach oben und unten. Nun, ich möchte nicht, dass der Boden im mobilen Menü ist. Also jetzt einfach auf die Schaltfläche klicken und wir gehen, um zu Responsive zu gehen und
diese auf Handy und Tablet-Modus zu verstecken . Gehen Sie nun zur ersten Spalte und geben Sie dies mit etwas wie 30. Also dann, wenn wir auch einen Hauch zu
diesem, gehen Sie zu Layout und vielleicht geben Sie, dass 50 und dann gehen Sie auf die weniger und geben Sie, dass ein Hauch von 20, dann wird es erscheinen, als nächstes, um diesen Knopf zu tun. Also, jetzt ist das letzte, was wir tun wollen, die Stele aus unserem mobilen Menü zu ändern, damit wir die Ausrichtung
ändern können . Zum Beispiel haben
wir nicht viele Stelen, ein Element von Pro für den Toggle Button, was etwas ist, das ich nicht wirklich mag. Ich möchte nur eine benutzerdefinierte einfügen. Ich komme hier rüber, aber vorerst müssen wir nur nach Hamburg. Ich kann, aber wir können hier drüben die Stele wechseln. So klicken wir auf die Hamburg, die ich kann. Du wirst sehen, dass es sich so öffnet. Das ist nicht wirklich so, wie ich es will. Also, was du tun willst, ist, mit dem Narren zu gehen und das zu überprüfen. Und jetzt, wenn Sie auf das mobile Menü klicken, beginnt
es zu öffnen, so sieht es viel besser aus und das Ich kann automatisch in einem X ändern . siehst du hier nicht,
aber das ist es, was dahinter passiert. Ah, dieser Ichan hat auch deinen vertikalen Abstand zu etwas geändert, das anklickbarer ist. Geh auch zum Tackle. Aber an sich will ich keine Hintergrundfarbe hier drüben. Manche können das auf 0% Kapazität ändern, und ich werde den Kragen aus den ICANN-Weißen machen. Das sieht viel besser aus. Ich werde es etwas kleiner machen, weil das ein bisschen schöner aussieht. So sieht es jetzt so aus. Und in dieser Kurzbeschreibung können
Sie sehen, dass diese Spalte neben dieser Spalte steht. Aber ich werde auf meinem Handy überprüfen, ob es das ist, was ich will. Ok? Wie Sie auf meinem Handy sehen können, ist
es nicht perfekt, weil wir vergessen haben, den schwarzen Hintergrund wieder zu löschen. Und da ist auch ein Rand, ein weißer Rand drauf. Also, jetzt werde ich wieder auf meinen Computer gehen, und das ist wahrscheinlich wegen der Entsendung, die wir im Hauptbereich hier drüben eingestellt haben. Also werde ich das vorerst löschen. Der Boden und die Oberseite. Ich sehe hier nicht sehr schön aus, aber das ist vielleicht wegen dieser Kolumne, dass es nicht schön aussieht. Also werde ich zurück zum veralteten und jetzt wieder zurücklauf-Typ gelöscht, gehe zum Update und gehe dann zurück zu meinem Handy. Alles klar, lasst uns die Seite aktualisieren. Und wie Sie jetzt sehen können, sieht
das viel besser aus. Vielleicht brauche ich ein bisschen mehr Spielraum neben dem ich komme. Aber das ist irgendwie das, was ich für einen transparenten Header auf Handy gefragt habe. Ja, das sieht ziemlich nett aus.
7. Alle Seiten zugänglich machen: Also, jetzt sind wir fertig. Aber eines habe ich vergessen, und das ist, dass die Kontaktseite jetzt nicht auf dem Mobiltelefon zugänglich ist. Also, was wir tun müssen, ist zurück zu unserem Menü zu gehen und wir müssen ein Menü für unser Handy erstellen. Das ist ein anderes Menü als für die Peitsche. Also, wenn wir zurück gehen, Teoh der Menübildschirm. Aber Sie können hier finden, müssen wir ein benutzerdefiniertes Menü für unser Mobiltelefon erstellen. So stoppen Main Mobile, zum Beispiel, Erstellen von Menü auf den Seiten, die Sie d Menü und neu ordnen Sie sie sicher dies gehen zurück zu Ihrem Header. Aktualisieren Sie es. Und jetzt müssen wir sicherstellen, dass wir ein benutzerdefiniertes Menü auf Mobilgeräten haben. Also werde ich ein Duplikat von diesem hier machen. Ich werde dieses auf das Top-Hauptmobil ändern und ich möchte, dass dieses auf
Mobile und auf Tablet sichtbar ist. Also werde ich zu fortgeschritten gehen zu Responsive und Disabled Desktop Und für die 1. 1 Ich
möchte die anderen beiden deaktivieren, also gehen Sie zu reagieren und deaktivieren Sie Tablet und Desktop. Und jetzt, wenn wir auf Update klicken, gehen
wir zurück zu unserem eigenen Köder und wir aktualisieren diesen. Wir werden immer noch ein tiefes Menü auf unserem Web zu sehen. So haben wir es gewollt. Und auf meinem Mobiltelefon wird die Kontaktseite angezeigt. Dies
funktioniert
natürlich natürlich genauso für den Tablet-Modus. Sie können ein benutzerdefiniertes Design im Tablet-Modus erstellen, aber ich habe immer das gleiche Design auf dem Tablet verwendet, wie ich für Mobilgeräte verwende. Ja, die meiste Zeit. So mache ich es. Das letzte, was ich Ihnen zeigen möchte, ist, dass Sie auch Ihr Logo anklickbar auf
die Startseite machen können. Hydro, das ist ziemlich einfach. Sie klicken einfach auf Ihr Bild, Sie gehen zum Inhalt, Sie gehen zu Link und dann gehen Sie zu benutzerdefinierten Wandbild, und dann finden Sie einfach Ihre Startseite hier drüben, klicken
Sie darauf, speichern
Sie es, und jetzt Ihr Logo ist anklickbar und wir werden automatisch mit der Startseite verlinkt. Und es gibt noch eine Sache, die ich sagen möchte, und das ist, dass Sie manchmal immer noch einen weißen Hintergrund hier sehen werden, und das liegt daran, dass Ihre Teameinstellungen wahrscheinlich immer noch Ihre
Elementareinstellungen überschreiben . Also, wenn du hier immer noch einen Hintergrund siehst und genau das Gleiche getan hast wie ich. Es liegt wahrscheinlich daran, dass Sie in den Customizer von Ihren Teameinstellungen gehen und
ein paar Dinge hier ändern müssen , aber das hängt von Ihrem Team ab.
8. Du willst mehr wollen?: In Ordnung, also danke. Ah,
viel, um diesen Mini-Kurs anzuschauen. Wenn Sie ein anderes Video wünschen, ist
Siri über erweiterte Element- oder Pro-Funktionen. Dann lassen Sie es mich wissen. Sie können mir eine Nachricht auf Instagram senden. Und ja, das war's. Also vielen Dank fürs Anschauen.