Transcription
Wir werden hier super kreativ sein, wo wir so einen Akkordeon-Effekt haben werden, und wenn Sie darüber schweben, öffnen sich die Akkordeons fast wie von selbst. Ich nenne es Akkordeon-Effekt, weil es das irgendwie ist. Sie haben ein Bild, Sie haben ein bisschen Text, und wenn Sie schweben, wie Sie hier sehen können, bewegt sich der Text, und Sie könnten andere Elemente wie Schaltflächen, Videos, was auch immer Sie möchten, dort haben.
Nun, ich wollte dies ursprünglich mit dem Akkordeon in Elementor machen, aber ich hatte Schwierigkeiten, es zum Laufen zu bringen. Ich hätte auch Schieberegler verwenden können, aber ich wollte nicht den Weg der Verwendung von Vorlagen einschlagen, hauptsächlich weil ich es relativ einfach halten möchte. Die Methode, die ich hier verwenden werde, funktioniert vielleicht nicht für jeden, und Sie könnten sagen: „Nun, wir wollen es eigentlich nicht auf diese Weise machen“, aber vertrauen Sie mir, es funktioniert, und alles, was wir tun werden, ist die Verwendung von Spalten.
Wir werden etwas CSS-Code im Abschnitt und in der Spalte haben, und die Idee ist, dass, wenn Sie über die Spalte schweben, diese sich ausdehnt, aber auch die Inhalte innerhalb dieser Spalte erscheinen. Wir könnten also ein Bild haben, und Sie schweben darüber, wie Sie sehen können, und dann erscheinen die Wörter und die Schaltfläche. Sie müssen übrigens keine Schaltfläche haben; ich habe sie nur hinzugefügt, um Ihnen die Möglichkeit zu zeigen. Also, lassen Sie uns zur Sache kommen. Das ist wirklich einfach, wenn Sie diese Schritte befolgen.
Schritt eins: Wir werden einen Abschnitt haben. Das Wichtigste dabei ist, dass ich sagen würde, wenn Sie eine volle Breite haben möchten, können Sie das tun. Wenn Sie eine Box-Breite und vier möchten, werde ich etwa 900 wählen, nur damit Sie hier alles auf dem Bildschirm sehen können. Ich werde auch eine Mindesthöhe von etwa 400 für den Moment einstellen, okay? Ähm, auch hier könnten Sie die Bildschirmgröße anpassen, was auch immer Sie möchten. Beachten Sie einfach die Größe Ihrer Bilder, Ihres Inhalts, und Sie müssen möglicherweise ein wenig an den linken und rechten Rändern und anderen Dingen, die ich hier tun werde, herumtüfteln. Also, wirklich, wirklich einfach: Wir haben eine Breite und wir haben eine Mindesthöhe.
Nun, wenn es um die Spaltenposition geht, habe ich die Option „Strecken“, „Oben“, „Mitte“ oder „Unten“. Ich werde „Strecken“ wählen. Der Grund dafür ist, dass, wenn wir die Elemente einfügen, Sie möchten, dass sie sich strecken, okay? Andernfalls werden Sie ein kleines Problem mit dem Text bekommen. Ich werde die vertikale Ausrichtung auf „Mitte“ setzen. Ich werde auch sagen, dass der Überlauf „versteckt“ ist. Wenn Sie das nicht tun, könnten Text und Wörter herauskriechen, dasselbe gilt für Bilder. Aber lassen Sie es einfach als „versteckt“. Und ich werde auch den Abschnitt strecken. Manchmal musste ich das nicht tun, und es funktionierte gut; manchmal tat ich es, okay? Ich bin mir nicht ganz sicher, warum, aber ich habe „Strecken“, „Mitte“, „versteckt“ und dann auch den Abschnitt „strecken“. Das ist alles, was wir für das Layout tun werden.
Nun, wir könnten genauso gut auch etwas Code einfügen, solange wir hier sind. Also gehen wir zu „Erweitert“ und dann zu „Benutzerdefiniertes CSS“. Und hier unten werde ich etwas Code einfügen. Dieser Code, werden Sie bemerken, bezieht sich auf „.acc-item“. „acc-item“ wird die ID oder der Klassenname sein, den wir der Spalte geben, denn was wir ihr sagen werden, ist, dass, wenn Sie darüber gehen und sozusagen darüber schweben, sie sich in Bezug auf die Größe flexibel anpassen wird. Wenn Sie mit diesen Werten, wo ich „flex 1“ und „8“ habe, herumspielen möchten, tun Sie das bitte und seien Sie mein Gast. Sie werden sehen, was passiert, wenn Sie „flex 1“ hier unten einfügen: Es bewegt sich kaum. Sie fügen „flex 20“ ein, und es geht ein bisschen zu weit. „Acht“ funktionierte wirklich, wirklich gut. Und wenn Sie nachahmen, was ich hier tue, würde ich sagen, verwenden Sie diese Zahlen. Aber dieser Code dort ist für den Abschnitt und sagt ihm, dass, wenn Sie über die Spalte schweben, sie sich jetzt einzeln ausdehnen wird.
Gut, jetzt machen wir unsere allererste Spalte. Wir wissen, dass sie „acc-item“ heißt, also können wir das gleich übernehmen. Wir gehen zu unserer allerersten Spalte, gehen zu „Erweitert“, und ich werde den Klassennamen „acc-item“ dort einfügen. Und sofort können Sie fast sehen, wie es sich ein wenig bewegt und verschoben hat, sobald ich das getan habe. Machen Sie sich noch keine Sorgen.
Das Nächste, was wir tun werden, bevor wir weiteres CSS und ein bisschen mehr Styling hinzufügen, ist das Einfügen des Hintergrundbildes. Sie müssen dies individuell pro Spalte des Akkordeons tun, aber es ist relativ einfach. Wir stellen einfach sicher, dass wir in der Spalte sind, gehen zu „Stil“, gehen zu „Hintergrundtyp“, und ich werde jetzt eines der Bilder auswählen. Okay, jetzt erstreckt sich das Bild irgendwie über die gesamte Breite, aber das liegt daran, dass wir es noch nicht eingestellt haben. Wir werden „Mitte Mitte“ wählen. Ich werde „gescrollt“, „keine Wiederholung“ wählen, und die Größe wird eine Farbe sein. An diesem Punkt wird das Bild ein bisschen seltsam aussehen, aber bitte vergessen Sie nicht, dass wir irgendwann weitere Akkordeons bekommen werden, und dann wird sich die Bildgröße entsprechend anpassen. Machen Sie sich also nicht zu viele Gedanken darüber, wie das aussieht. Wenn Sie fortfahren möchten, würden Sie am Ende nur wieder daran herumtüfteln. Also bin ich im Moment damit zufrieden.
Nun, bevor wir fortfahren oder etwas anderes tun, werde ich anfangen, die Überschriften einzufügen, denn das ist wirklich, wirklich wichtig, wenn es um die Größe geht. Ich werde eine Überschrift wie diese einfügen und diese Überschrift „der erste Tab“ oder so ähnlich nennen. Und ich werde das Styling nicht auf Weiß ändern, und ich werde die Größe einfach auf so etwas verkleinern. Sie wären offensichtlich etwas präziser mit Ihren Poppins und Ihrer Latter und Ihren Monster Ratten und so weiter. Ich habe mich einfach für Standard entschieden, weil ich Ihnen nur zeige, wie das funktioniert.
Nun, wir gehen zurück zur Spalte und passen sie jetzt ein wenig an. Gehen wir zu „Layout“. Ich werde sagen, die vertikale Ausrichtung ist „Unten“, also hat es sie jetzt unten platziert. Und deshalb sagte ich, machen Sie die Überschrift. Habe die Überschrift drin. Jetzt können Sie sehen, was passiert, wenn Sie anfangen, die Spalte zu bearbeiten. Sie könnten denken: „Oh ja, ich habe es geschafft“, aber tatsächlich ist sie jetzt nach oben gegangen, was wir nicht wollen. Also werde ich „Unten“ wählen, und ich werde sagen, die horizontale Ausrichtung ist „Zentriert“.
Nun, ich werde diese Überschrift anklicken. Ich werde zu „Erweitert“ gehen, okay? Ich werde zu „Transformieren“ gehen, und ich werde dies jetzt um 90 Grad drehen. Also werden wir auf „Drehen“ klicken, und ich werde 90 wählen, aber wir werden tatsächlich minus 90 machen. Und der Grund, warum es verschwunden ist, ist, weil wir die Ankerpunkte nicht gesetzt haben. Also werde ich sagen, gehen Sie nach links, und es ist immer noch nicht sichtbar. Bleiben Sie dran, okay? Und dann werde ich den Y-Ankerpunkt so wählen. Nur um es noch einmal zu wiederholen: Wir haben die Überschrift hinzugefügt, okay? Wir haben sichergestellt, dass die Spalte hier eine vertikale Ausrichtung „Unten“ und eine horizontale Ausrichtung „Mitte“ hat. Ich bin zurück zu meinem Text gegangen, habe dann die Drehung um minus 90 gemacht, damit es so geht, und dann habe ich hier unten meinen X-Ankerpunkt so auf links und meinen Y-Ankerpunkt in der Mitte gesetzt.
Nun, Sie werden bemerken, dass es im Moment ziemlich direkt an der Grenze liegt. Hier können Sie jetzt zum Tab „Erweitert“ gehen, für die äh, Sie könnten zur Überschrift gehen, und ich könnte, wenn ich möchte, einfach so etwas tun. Ich werde 15 eingeben, nur um es ein wenig wegzubewegen, und das ist bisher in Ordnung. Und ich werde das nur noch einmal überprüfen, indem ich das mache. Das sieht gut aus. Wenn Sie es weiter vom Rand entfernt haben möchten, würden Sie den linken Rand dort erhöhen. Bisher ist das in Ordnung.
Aber es gibt eine wichtige Sache, die Sie mit dieser gedrehten Überschrift tun müssen. Entschuldigung, ja, die gedrehte Überschrift. Wir müssen sie tatsächlich „gedrehte Überschrift“ nennen, denn die Idee ist, dass, wenn wir über die Spalte schweben, diese gedrehte Überschrift verschwindet. Sie könnten jetzt etwas CSS-Code hinzufügen, wodurch es beim Schweben so etwas tut, was ich ein bisschen fehlerhaft fand und es für mich nicht sehr gut funktionierte. Also habe ich es so gemacht: Sie haben diese Überschrift, und wenn Sie darüber schweben, verschwindet diese, und die Überschrift, die jetzt horizontal ist, erscheint. Also werde ich diese „gedrehte Überschrift“ nennen. In Ordnung, Sie können sie nennen, wie Sie wollen, aber das hält es im Moment wirklich, wirklich einfach.
Ich werde diese Überschrift jetzt duplizieren, richtig, und ich werde diese Überschrift eine „gerade Überschrift“ nennen. Ist das richtig? Ja, „gerade Überschrift“. Nun, den Transformationseffekt dafür werden wir in Bezug auf die linke Achse komplett entfernen. Ich denke, ich kann es wieder auf Null setzen.
Nun, es gibt einen Tipp, den ich Ihnen geben möchte, den ich entdeckt habe, nachdem ich angefangen hatte, daran zu arbeiten: Wenn ich zum Navigator gehe und wir die Überschrift haben, werde ich diese einfach doppelt anklicken, okay, und diese die, ich werde sie „R-Überschrift“ nennen, weil es die gedrehte Überschrift ist. Und dann haben wir die zweite, wo wir sie dupliziert und gerade gemacht haben, und ich werde sie „S-Überschrift“ nennen. Wenn Sie die S-Überschrift nach der gedrehten Überschrift haben, drückt sie die gedrehte Überschrift nach oben, und ich möchte eigentlich, dass die gedrehte Überschrift unten ist. Also habe ich, anstatt alles durcheinanderzubringen, anstatt mit dem linken, rechten, oberen, unteren Rand herumzuspielen, sie einfach so hochgehoben. Und was das jetzt bewirkt, ist, dass, obwohl es jetzt diese gerade Überschrift weiter nach oben geschoben hat, wenn Sie es jetzt betrachten, es jetzt etwas höher ist. Das ist in Ordnung, weil ich nicht möchte, dass es sich unten befindet, wenn Sie die eigentliche Folie oder das Bild betrachten. Damit bin ich einverstanden.
Nun, es gibt noch eine andere Sache, die ich erwähnen möchte: Abhängig von Ihrem Bildtyp könnte das Bild ziemlich hell sein, und Sie werden die weiße Schrift nicht sehen, wenn Sie eine weiße Schriftart gewählt haben. Aber der Code, den wir für die Spalte hinzufügen werden – wir haben ihn noch nicht hinzugefügt, und wir werden ihn hinzufügen – Sie können tatsächlich eine Hintergrundüberlagerung hinzufügen. Also, da wir das jetzt gemacht haben, lassen Sie uns unseren Code in die Spalte einfügen. Ich meine, das ist alles, was Sie tun müssen. Und mein einziger Tipp ist jedoch, dass, wo ich es „gerade Überschrift“ genannt habe, wenn Sie auch zum Beispiel eine Schaltfläche wie diese einfügen würden, damit Sie auch eine Schaltfläche präsent haben können, nennen Sie die Schaltfläche auch „gerade Überschrift“. Nennen Sie im Grunde alle „gerade Überschrift“, damit Sie nicht mehrere CSS-Code-Teile schreiben müssen. „Gerade Überschrift“ und der Code, den wir hinzufügen werden, wird funktionieren. Wir lassen die Schaltfläche vorerst drin, okay? Wir lassen die Schaltfläche vorerst drin, nur damit Sie sehen können, wie es aussieht, und wir nennen sie auch „gerade Überschrift“. Da haben wir es, „gerade Überschrift“, ja.
Gut, jetzt werden wir in die Spalte den Code einfügen, der nicht nur eine Hintergrundüberlagerung hinzufügt, sondern auch besagt, dass, wenn Sie schweben, dieser ausgeblendet und jene angezeigt werden, und wenn Sie nicht darüber schweben, verschwinden sie, und dieser zeigt den vertikalen an. Okay, ich habe diesen Code so oft in meinen Videos verwendet, und Sie sollten ihn inzwischen erkennen, wenn Sie mir gefolgt sind. Ähm, also, hier ist es: Ich habe einen Code hinzugefügt. Dieser besagt, dass die gerade Überschrift, die diese hier war, eine Deckkraft von Null hat. Sie hat eine 0,5-Sekunden-Übergang, wenn sie erscheint, aber die Deckkraft ist von Anfang an Null. Sie können sie nicht sehen. Wenn Sie schweben, wird die gerade Überschrift eins, also der Text, die Schaltfläche, wenn Sie ein Video hinzugefügt und es „gerade Überschrift“ genannt haben, werden sie alle sichtbar. Wenn Sie schweben, verschwindet die gedrehte Überschrift, die hier oben ist. Wenn Sie also nicht schweben, ist sie bereits sichtbar. Und dann habe ich hier drüben auch die Hintergrundüberlagerung erwähnt. Ähm, ich meine, Sie können sehen, was passiert ist, sobald ich den Code eingefügt habe, und es ist schwarz geworden. Es hat also eine schwarze Farbe, und die Deckkraft ist 0,6. Beobachten Sie, was passiert, wenn ich dies auf Null setze: Es ist weg. Wenn ich es auf Eins ändere, wird es rein schwarz. Lassen wir es bei 0,6. Also sage ich, fügen Sie eine Überlagerung von 0,6 hinzu. Sie könnten dies von Anfang an auf der Spalte tun, aber ich habe festgestellt, dass, wenn Sie das getan haben, als Sie Ihr Hintergrundbild hinzugefügt haben, es auch auf den Text angewendet wurde, was mich wirklich, wirklich völlig verwirrt hat. Also mache ich es einfach so, und dann, wenn Sie schweben, ist die Hintergrundfarbe immer noch schwarz, aber ich habe jetzt gesagt, die Deckkraft ist Null, also geht es von 0,6 zu keiner Überlagerung mehr. Und wenn ich schwebe, sehen Sie, was hier passiert.
Nun, die gedrehte Überschrift ändert sich nicht. Ich glaube, ich habe ihr den falschen Namen gegeben, also werde ich nur noch einmal überprüfen, ob ich ihr den richtigen Namen gegeben habe. Ich habe sie „rotated headers“ genannt. Lassen Sie mich das einfach entfernen. Da haben Sie es. Richtig, also da haben wir es: Es ist „rotate header“, nicht „rotated header“. Wenn ich also jetzt darüber schwebe, können Sie sehen, dass der Text verschwindet, und die Hintergrundüberlagerung ändert sich, und der Text erscheint jetzt hier. Also, das funktioniert alles.
Nun, es gibt eine Sache, die ich hier schnell hinzufügen muss, die ich vergessen habe, und das ist tatsächlich wichtig, okay? Wenn ich zu meinem Navigator gehe und zurück zu meiner Überschrift gehe, wenn Sie zum CSS-Code für die Überschrift für beide gehen, okay, werde ich „Selektor Leerraum kein Leerraum kein Umbruch“ einfügen. Das verhindert, dass der Text überlappt, denn ich habe festgestellt, dass manchmal beim ersten Tab der Text überlappt, und das ist wirklich ärgerlich, wenn das passiert. Und ich sage bei der gedrehten Überschrift, okay, stellen Sie einfach sicher, dass Sie diesen CSS-Code auch hier haben. Keine Sorge, in der Beschreibung dort werde ich Schritt für Schritt alles auflisten, was Sie tun müssen. Also werde ich sagen: „Gut, Sie müssen jetzt tun, tun, tun, tun, tun, tun, tun.“ Nun, ich gehe Schritt für Schritt vor, aber ich werde Ihnen sagen, das kommt in Ihren Abschnitt, das kommt in Ihre Spalte. Stellen Sie sicher, dass Sie Ihre Klassen so benennen, und Sie sollten in Ordnung sein.
Also, jetzt haben wir diesen Effekt. Ich habe ihn dupliziert und ein anderes Bild für den ersten, zweiten, dritten Tab und für den vierten eingefügt. Ich glaube, ich habe auch den vierten Tab gemacht. Ich habe den Text nicht geändert, aber die Idee ist, dass Sie hier ein Überschriftwort haben können und hier verschiedene Überschriftwörter, vielleicht etwas umfangreicher. Denken Sie jedoch daran, dass es keinen Zeilenumbruch gibt, also überlegen Sie, wie viele Wörter Sie einfügen werden. Aber das Schöne daran, es auf diese Weise zu tun, ist, dass es eine Spalte ist. Wenn Sie eine Schaltfläche hinzufügen möchten, die irgendwohin führt, können Sie das tun. Wenn Sie keine Schaltfläche haben möchten, nehmen Sie sie heraus.
Nun, wenn ich zum dritten Tab gehe, das zweite Mal, den dritten, den ersten, gehen wir zum vierten. Dort haben Sie verschiedene Bilder, und das kann wirklich, wirklich gut funktionieren mit etwas einfachem CSS-Code für Ihren Abschnitt, Ihre Spalte, und dann fügen Sie Ihre Elemente hinzu. Sie müssen nur sicherstellen, dass Sie den richtigen Klassennamen eingeben. Nun, wie sieht das auf dem Handy aus, denn das ist immer die brennende Frage. Wenn Sie zum Handy gehen, wird es ziemlich eng aussehen, und das ist es, worüber Sie manchmal nachdenken müssen, in Bezug auf diesen Effekt, den wir hier gemacht haben. Möchten Sie das immer noch für das Handy tun? Und ich würde tatsächlich einfach sagen, es ist hier nicht immer ein großartiger Effekt, weil es nicht wirklich gut funktioniert. Also würde ich sagen, dass, ähm, wo immer wir den CSS-Code haben, den wir hinzugefügt haben, Sie das „@media“ verwenden, und Sie könnten sagen, bis zu einer maximalen Breite von 500 Pixeln wird es das tun, wenn Sie das nicht getan haben. Entschuldigung, wenn Sie „@media“ verwenden, wird es es nur für unter 500 Pixel anzeigen. Alles darüber hinaus, dort wird es wieder zu einer vielleicht vollen Spalte wechseln. Vergessen Sie also nicht, dass dies Spalten sind, richtig? Übrigens, schauen Sie hier, wir haben nicht festgelegt und wir haben nicht festgelegt, was die Maße sind, aber wenn Sie zur mobilen Ansicht gelangen, können Sie, ähm, Entschuldigung, lassen Sie mich das noch einmal tun, Sie könnten hierher gehen und hundert so eingeben, und solange Ihr Abschnitt und Ihre Spalte, Sie haben, ähm, getestet, dass der Code in diesem Medien-Query ist, wissen Sie, die Klammer „max-width: 500px“, werden Sie diesen Effekt nicht bekommen, und Sie werden jetzt Ihre individuellen Elemente haben, die für Sie funktionieren könnten, oder Sie könnten zu einem richtigen Akkordeon wechseln.
Aber für den Desktop ist dies für mich, denke ich, eine wirklich coole, vereinfachte Art, Elemente zu haben. Ich meine, Sie könnten Produktkategorien, Menüseiten, ähm, Blogkategorien, Galerien, viele, viele verschiedene Dinge haben, wo Sie jetzt einen kleinen Ausschnitt mit einem Bild zeigen. Ich meine, ich habe geschaut, ich meine, okay, schauen Sie, lassen Sie uns einfach diese Spalte hier drüben nehmen, richtig? Gehen wir zu „Erweitert“, gehen wir zu „Benutzerdefiniertes CSS“, und ich habe gesagt, die Deckkraft ist 0,6. Lassen Sie uns sie vielleicht auf 0,3 senken, okay? So ist es jetzt nicht mehr so dunkel wie zuvor, sodass Sie etwas mehr vom Bild-Styling dort bekommen. Und ich werde Sie wissen lassen, dass, wenn Sie, lassen Sie mich zum Navigator gehen, lassen Sie uns einige dieser zusätzlichen duplizierten entfernen, die ich hinzugefügt habe. Lassen Sie uns einfach diese eine duplizieren, dann lassen Sie uns diese duplizieren und lassen Sie uns diese duplizieren. Sie werden jetzt etwas mehr von dem, ähm, mehr vom Bild sehen. Und natürlich möchten Sie vielleicht die Größe anpassen, die wir hier haben. Also, während es bei diesem ersten Tab näher an der linken Seite ist als an der rechten Seite, müssen Sie einfach hineingehen. Also werde ich zur gedrehten Überschrift gehen, und anstatt 15 könnte ich das auf etwa 32 ändern, was auch immer, richtig? So können Sie es jetzt auf eine bestimmte Art und Weise aussehen lassen, mit Ihrem Text genau in der Mitte. Hey, schauen Sie, ich hoffe, das hilft. Der Code dafür ist in der Beschreibung. Das hat viel Ausprobieren und viele Fehler gekostet, ähm, aber es funktioniert. Ähm, ich hoffe, Sie liken, abonnieren, teilen und folgen. Und ja, es gibt andere Wege, aber ich hoffe, das hilft Ihnen, ein bisschen Spaß zu haben, und es ist einfacher Code, wissen Sie, es ist nicht umwerfend, und es verwendet nur Spalten. Also, legen Sie los und haben Sie Spaß. Passen Sie auf sich auf. Ich sehe Sie bald.