Splash-widgeten används för att placera text i ett lager ovanpå en bild (eller bakgrundsfärg), där hela ytan med båda text och bild kan vara klickbar. Widgeten lämpar sig särskilt väl för banners/puffar på startsidan. Du kan även lägga in effekter för inzoomning eller halvgenomskinlig bakgrundsfärg för texten.
En fördel med att lägga in text på bild genom en splash-widget istället för att lägga på texten på en bilden i ett bildediteringsprogram och sedan använda bild-widgeten är att som en splash indexeras texten av sökmotorerna som en rubrik medan text som ligger som en del av en bild indexeras mycket sämre eller inte alls. Så för SEO är det bra att alltid använda splash-widgeten istället för att ta fram bilder som har text i sig.
|
Hitta bra bilder |
Lägga till splashwidget
Gör så här i E37s admin:
- Gå till Webbplats -> Sidor och välj sidan där du vill lägga in en splash.
- Klicka på knappen Lägg till Widget.
- Under den förvalda kategorin Allmänna, välj Splash.
- Under fältet Rubrik fyller du i texten som ska stå på widgeten. (Du har även möjlighet att lägga in en mindre undertext till rubriken i steg 10 nedan.)
- Ange rubriken storlek under Rubrikmall, t.ex. Rubrik H2.
- Ange en Bakgrundsbild. (Bakgrundsfärg används endast om du inte satt någon Bakgrundsbild, så färg behöver inte anges.)
- Ange eventuellt widgetens Höjd. Om inget värde anges avgör bakgrundsbilden widgetens höjd, men om ingen bakgrundsbild används måste höjden sättas för att widgeten ska visas.
- Växla till fliken Widgetinställningar.
- Ange textens Justering, t.ex. centrerad horisontellt och mot mitten vertikalt för att få texten mitt på widgeten.
- Under Tidsstyrning kan du ange datum för när widgenten ska synas och döljas.
- Fyll i en eventuell Undertitel som visas under rubriken.
- Fyll i en Länk för hela ytan, vilket gör widgeten klickbar för besökarna.
- Resterande inställningar definierar eventuella effekter när muspekare rörs över widgeten och textbakgrund, se nedan.
- Klicka på Spara.
Exempel på hur Splash-widgeten används på startsidan hos www.webboptik.se:
Finjustering av textens placering
Utöver grundinställningen för justering av text i sidled och höjdled, kan placeringen finjusteras med hjälp av Använd marginal på innehållsyta på fliken Allmänt.
Exempel 1, "Vi kan läsglasögon" i Webboptik:
Här har Horisontell justering satts till Centrera och Vertikal justering till Justera mot mitten. Med enbart denna inställning skulle dock texten hamna på modellens ansikte, varför en ytterligare justering i höjdled gjorts under Använd marginal på innehållsyta för att knuffa ned texten ytterligare.
Glöm inte att bocka i Placera rubrik inuti innehållsyta när Använd marginal på innehållsyta används (se bild ovan).
Exempel 2, puffen "Svårslagna priser" i Webboptik:
Här har Horisontell justering satts till Vänsterjustera och Vertikal justering till Justera mot mitten. För att få texten en bit ut från vänsterkanten, har nedanstående inställning gjorts under Använd marginal på innehållsyta.
Glöm inte att bocka i Placera rubrik inuti innehållsyta när Använd marginal på innehållsyta används (se bild ovan).
Om du vill lägga en halvgenomskinlig ruta bakom rubriken och undertiteln så går detta göra genom att under tabben Widgetinställningar sätta en Färg på textbakgrund och sätta en Opacitet för textbakgrund.
Inställningarna ovan har använts för splash-widgeten nedan ifrån vår demoshop:
Genom att använda en Rubrikfärg som är med i bildens motiv kombinerat med textbakgrund skapas en snygg effekt där texten känns genomskinlig.
Effekter när muspekaren rörs över widgeten
Färgad overlay
Listrutan Händelse när muspekaren rörs över widgeten har tre olika val för hur text och overlay ska bete ändras när muspekaren förs över splashen.
- Inget — Ingen förändring när muspekaren förs över splashen. (Denna inställning kan fortfarande kombineras med inzoomningseffekten.)
- Visa overlay, text visas alltid — Overlayen (ett färgat lager som kan vara halvgenomskinligt) dyker upp när muspekaren förs över splashen.
- Text och overlay — Med detta val visas inte Rubrik och Undertitel innan normalt. Dessa, och overlayen, dyker upp när muspekaren förs över splashen, dessutom visas overlayen
Det är enkelt att få till en fin toningseffekt på Splash-widgeten när besökaren pekar på den. I webboptik tonas bilden ut i transparent vit färg:
Inställningen för ovanstående effekt har gjorts enligt följande
Om du vill att bakgrundsbilden ska få en animerad inzoomning när muspekaren rörs över splashen så kan du i listrutan Backgrundseffekt när muspekaren rörs över widgeten välja alternativet Zooma in.
Avancerade tips — Justeringar med hjälp av CSS
Under fliken CSS kan du finjustera ytterligare på detaljnivå hur innehållet i widgeten ska visas. De CSS-inställningar som anges här påverkar endast aktuell widget. Exempel: I en Splash-widget har rubrikmallen H3 använts för en text, men just här behöver storleken på texten anpassas för att passa in. Under CSS-fliken, i fältet för CSS-kod, kan då exempelvis följande skrivas:
h3 {font-size:30px;}
Notera att om rubriken till exempel hade haft rubrikmallen H2 så hade du i koden ovan bytt ut "h3" mot "h2".
Undertiteln läggs in i en <p>-tagg, så för att justera den kan exempelvis följande skrivas:
p {font-size:24px;}