Skärmbild av Friskis&Svettis hemsida baserad på Wordpress

Friskis&Svettis Nackas wordpresstema

Inlägget är en del av en wordpressutbildning för Friskis&Svettis-föreningar i stockholmstrakten.

Vi utgår från ett wordpresstema som Friskis&Svettis i Nacka låtit utveckla med hjälp av Kommunikationsbyrån Tills och utvecklaren/formgivaren Klas Ehnemark.

Skärmbild av Friskis&Svettis hemsida baserad på WordPress

Friskis&Svettis i Nacka använder ett eget tema till sin wordpresswebb.

Temat styr skribenterna hur sidorna ska se ut och fungera för att skapa en bra helhet. Temat följer Friskis&Svettis centrala grafiska designregler.

WordPresstemat använder inte alls inlägg, bara sidor. Det är inte gjort för att blogga.

På startsidan och några andra ställen används bildspel eller ”rullande bilder” för att visa en uppsättning bilder.

På startsidan och andra sidor används puffar för att med bild och korta texter locka besökaren till andra sidor.

Startsidan visar upp schemat i dag och i morgon för Friskis&Svettis Nackas två anläggningar.

På en sida visas ett komplett schema där det är möjligt att boka ett pass. All schemainformation kommer från det schema- och inpasseringssystem som föreningen använder, BRP.

Anläggningarnas öppettider skrivs in på ett enda ställe och visas på flera.

Navigationsmenyn är i en nivå.

Föreningens senaste tweet på Twitter visas i sidhuvudet och där finns också länk till föreningens sida på Facebook.

Rundade hörn på bilder

Det är möjligt att få rundade hörn på bilder utan att bearbeta dem i Photoshop eller liknande verktyg. Rundningen ansluter till designen med ett rundat hörn i sidhuvudet.

Skärmbild som visar hur vi rundar hörnen på en bild i WordPress.

Vi rundar hörnen på en bild i WordPress redigeringsläge

Vi omsluter bilden med shortcoden

[roundcorners] och [/roundcorners]

Resultatet blir:

Skärmbild som visar en bild med rundade hörn i WordPress.

Resultatet i WordPress med rundande hörn på en bild.

Inramning ”redbox”

Vi kan rama in med en röd inramning som knyter an till den grafiska profilen. Inramningen skapas med en ”shortcode” som du skriver i redigeringsfältet. För att kunna tolka koden måste den vara skriven exakt rätt, med raka klamrar.

Skärmbild med exempel på inramning i F&S wordpresstema

Inramning med "redbox" i F&S wordpresstema.

Inramningen som visas i bilden skapas med följande kod:

[redbox title = ”Rubrik för inramningen”]

Lite innehåll. En tabell kunde ha varit bättre exempel.

[/redbox]

 

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

Connect with Facebook