WordPress für Designer: Themes und Layout-Werkzeuge

Featured Box und Icon

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Featured Boxes und Icons, besonders hervorgehobene Bereiche, sind auch recht beliebt. Ihre Anwendung wird in diesem Video demonstriert.

Transkript

So, ich habe jetzt hier eine Section, die ich mit Icons und mit Text füllen möchte. Sozusagen ja, Featured Boxes oder besonders hervorgehobene Bereiche. Und in dem Fall will ich mit drei Bereichen arbeiten. Deswegen suche ich mir hier ein dreispaltiges Layout aus. So, und jetzt muss ich das Ganze natürlich mit Leben füllen. Das heißt, ich klicke hier drauf, um in die Elemente zu wechseln und wir haben da schon etwas, was passt, nämlich die Feature Box. Diese fasse ich einfach an und ziehe sie hier hinein und da haben wir unsere Feature Box, genauso wie ich mir das vorgestellt habe. Den Text könnten wir ändern. So zum Beispiel. Der Rest sieht eigentlich gut aus. Was ich noch machen möchte, ist natürlich das Icon anpassen. Hier ändern wir die Schriftfarbe der Überschrift, hier ändern wir die Schriftfarbe des Textes. Wir können hier jetzt statt dem Icon auch ein Bild einfügen. So, dann wird hier nach dem Bild gefragt, aber ich möchte ein Icon verwenden und zwar passend zur Natur ein Blatt. Natürlich ist das ein bisschen klein, deswegen scrollen wir ein bisschen runter, denn wir können hier die Größe anpassen. Ich mache das in bisschen größer vielleicht 80, 100, 120 ja, machen wir es so, 120. Wir können jetzt hier die Farbe des Icons festlegen und hier die Farbe des Hintergrundes. So, dieser Farbton gefällt mir nicht so gut, dann nehme ich vielleicht eher diesen hier. Hier als nächstes können wir noch festlegen, dass es nicht ein Square, also ein Rechteck sein soll, sondern abgerundet zum Beispiel oder Circle, also ein Kreis, oder ein Hexagon, was dann so aussieht. Ein Batch Icon, das hat ein Sternchen. So, ich nehme jetzt den Kreis, ok. Als nächstes können wir noch eine Border festlegen. Das heißt, wenn unser Kreis eine Outline haben soll zum Beispiel, dann können wir das hier noch hinzufügen. Möchte ich aber nicht, deswegen setzte ich das auf None. Animiert werden kann das Ganze auch. Das ist eine ganz nette Geschichte. Wir können hier bei der Navigation festlegen, wie diese aussehen soll. Hier gibt's zum Beispiel Tada. So sieht das dann aus. Man sieht direkt das Ergebnis. Flip ist auch ganz nett oder Flip nur auf der X-Achse oder Y-Achse oder Fall in Down. Wir haben also viele Animationen, die wir hier ausprobieren können. Ich nehme jetzt hier einfach die Animation Tada, die finde ich passt ganz gut an der Stelle. So, und jetzt können wir natürlich noch weitere Details anpassen. Wie lange die Animation gehen soll oder mit Verzögerung usw. Wir können den Text verlinken. Wir können sagen, in einem neuen Fenster, die Linkfarbe und so weiter und so fort. Hier natürlich noch die Ausrichtung. Gut, wenn wir damit fertig sind, dann wollen wir natürlich weitere Boxen damit befüllen. Dann können wir einfach sagen, Duplicate, dann erhalten wir ein weiteres Element darunter und dieses fassen einfach an und ziehen es hier an die Stelle. Dann sagen wieder Duplicate und ziehen auch das an die Stelle. Und so schnell haben wir jetzt hier unsere drei Feature Boxen erstellt. Wir müssen jetzt nur noch hingehen und den Text ändern sowie das Icon. Allerdings können wir hierbei bei dem Icon immer nur das Icon ändern. Hier das Icon festlegen und die gesamte Größe von der gesamten Grafik. Was ist denn, wenn ich das Icon vielleicht größer haben möchte und den Kreis ein bisschen kleiner? Das geht in dem Fall nicht. Deswegen gibt es noch eine andere Möglichkeit, nämlich das Ganze selbst zu bauen. Das möchte ich auch noch kurz demonstrieren. Ich selektiere die Box und entferne diese. So, dann haben wir einen leeren Bereich. Ich gehe hier in meine Elemente rein, suche jetzt nach Icon. So, da ist das Icon, das ziehe ich jetzt hier rein. Erst mal sieht das nach Nichts aus. Ich suche jetzt erst mal wieder nach Leaf, nach dem Blatt. So, und jetzt als nächstes, können wir mal runter scrollen und dann können wir hier die Farbe festlegen von dem Icon selber und von dem Hintergrund. Als erstes Mal nehme ich hier die Farbe vom Hintergrund, nehme ich mal diesen Farbton hier, vielleicht noch ein bisschen sowas und die Farbe des Blattes setze ich ebenfalls auf Weiß. So, und jetzt, jetzt kommt der entscheidende Punkt. Wir können nämlich jetzt hier die Icon Size und die Background Size festlegen. Das heißt, Icon Size probiere ich mal 60 Pixel. 60 Pixel, das ist fast genauso groß, vielleicht ein kleines bisschen kleiner, machen wir mal 50. So, und jetzt hier die Größe des Kreises und da mache ich jetzt einfach mal 100 Pixel. Mal gucken, wie das aussieht. Könnte ein bisschen größer sein, machen wir mal 120. So, wir können also jetzt ganz genau festlegen, wie groß was sein soll. Und als nächstes haben wir hier drunter die Möglichkeit, die Rundung selber festzulegen. Wenn hier nichts steht, ist das Ganze eckig. Wir können aber jetzt die Rundung, den Border Radius hier festlegen, indem wir zum Beispiel sagen, 10 Pixel. So, dann haben wir eine kleine Rundung. Machen wir mal ein bisschen mehr, machen wir mal 30 Pixel. Wenn wir das aber rund haben möchten, dann ist es am einfachsten, wir gehen hin und sagen 50%. 50 % für jede Kante ergibt einen runden Kreis. Ja, und so sieht das schon mal genauso aus wie hier, nur wir haben mehr Einfluss. Wir können halt hingehen und die Größe festlegen. Der Nachteil ist, wir können das nicht verlinken wie in dem anderen Fall. In dem anderen Fall konnten wir ja zusätzlich noch hier das Ganze verlinken und animieren. Auch Animieren geht in dem Fall hierüber nicht. Was wir jetzt noch brauchen, ist im Endeffekt eine Textbox und eine Headline. Und wie das funktioniert, wissen wir ja. Wir suchen hier nach der Headline, ziehen die hier per Drag and Drop hinein, können diese dann noch anpassen, vielleicht von der Größe her auch, sagen wir, das soll aussehen wie ein h4, dass es etwas kleiner ist. So, hier sagen wir, es ist ein h3 und als nächstes ja, brauchen wir noch den Text. Das heißt, wir gehen wieder hier in die Elemente, suchen nach einem Textelement und ziehen das direkt darunter. So, und hier brauchen wir natürlich was Platzhaltertext. So, den haben wir hier. Ja, dann sieht das eigentlich fast genauso aus. Wir müssen den Abstand noch etwas verringern hier zwischen. Das geschieht in dem Fall über Margin und Padding, was wir per CSS definieren, und das gucken wir uns später an. Wir haben also jetzt gesehen, dass es vorgefertigte Elemente gibt, die wir hier reinziehen können, aber wir können über die einzelnen Elemente hier auch viele, viele Elemente nachträglich einfach selber bauen.

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!