Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

WordPress für Designer: Themes und Layout-Werkzeuge

Flip-Card

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Wie Sie selbst animierte Flip-Cards – Karten, die sich per MouseOver herumdrehen lassen – in Cornerstone erstellen, darum geht es in diesem Film.

Transkript

So, als nächstes schauen wir uns einen Bereich an, der sich umkehren kann, also eine Flip-Card. Diese wollen wir ganz einfach einfügen, indem wir in die Elemente gehen. Und dann suchen wir nach "card". Dann sehen wir hier schon so ein Icon von einer Karte, die sich hier so drehen soll. Und diese ziehen wir uns jetzt einfach hier in den Bereich, wo wir sie gerne hätten, also hier an dieser Stelle. Und da ist sie schon. Wir sehen jetzt, bei Mouse over, dass sich die Karte umdreht. Und wie sie sich umdrehen soll, das können wir hier festlegen, vielleicht eher nach rechts, oder nach unten. Hier können wir also fleißig experimentieren. Und als nächstes können wir noch sagen, dass diese zentriert sein soll. Okay, natürlich. Dann können wir hier festlegen, wie der Abstand sein soll, also hier dieser Abstand vom Text zum äußeren Rand. Das ist das Padding. Und den Abstand können wir zum Beispiel höhersetzen. Dann wird die Box natürlich größer, oder auch kleiner. Vielleicht nehmen wir irgendwas dazwischen. Ich nehme mal 8 %. Das sieht eigentlich ganz gut aus. So, und jetzt geht es weiter. Wir haben hier den Titel, den wir ändern können, und hier den Text. Wir haben hier die Outline, die wir haben. Die können wir hierüber festlegen. Ohne Outline, finde ich, sieht es irgendwie seltsam aus. Irgendwie ist man es gewohnt, dass diese Dinger eine Outline haben. Wir können hier die Stärke definieren. Vielleicht machen wir es ein bisschen fetter mit 10 Pixeln. Wir können hier die Schriftfarbe definieren. Wir können hier die Hintergrundfarbe definieren. Wir können hier das Icon auch austauschen gegen ein Bild. Wir können hier das Icon selber festlegen. Ich finde, das passt mit dem Boot eigentlich ganz gut. Dann hier die Größe. Und das stelle ich einfach mal ein bisschen größer, auf, sagen wir mal, 50, vielleicht sogar noch ein bisschen größer, okay. Hier können wir die Iconfarbe festlegen. Das setze ich jetzt auch auf weiß. So. Hier die Rückseite, "Back Title". Hier der Text. Hier ebenfalls für die Rückseite die Outline und die Farbe. Und hier, wie fett die Outline sein soll. Und die setze ich dann auch auf 10. Auch für die Rückseite können wir die Schriftfarbe definieren und, ob es einen Button geben soll oder nicht. Wir können nämlich hier den Button deaktivieren. Und dann haben wir keinen mehr. Mit Button haben wir hier die Option, festzulegen, was in dem Button steht, "Click Me!", und hier können wir den Link festlegen und die Textfarbe in dem Button und den Hintergrund von dem Button. Wir haben hier also eine lange, lange Liste mit Optionen, um eine solche Flip-Card zu erstellen.

WordPress für Designer: Themes und Layout-Werkzeuge

Erstellen Sie Ihre Wordpress-Website mit X-Themes und Cornerstone – ganz ohne Quellcode

5 Std. 8 min (56 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!