Kontaktsida med kontaktboxar

Tänk även på att om din webbplats använder funktionen "personliga sidor" så får ni på köpet en automatgenererad personlista som finns på adressen xxx.lu.se/peoplelist. Många väljer att skapa en menylänk dit, och att använda de personliga sidornas kategorier för att automatiskt skapa filter för olika personalgrupper i personlistan. En manuell kontaktsida är alltså något annat, det är i grunden en vanlig sida (Page) på vilken du lägger in ett antal kontaktboxar (Contact box). 

 

Skapa kontaktboxar

För att skapa dina kontaktboxar som ska ligga på sidan väljer du Content -> Add content -> Contact box. 

De fält som markeras med en röd asterisk måste alltid fyllas i: 

• Administrative title: Uppge ett internt namn på din Contact box så att du enkelt kan hitta den när du sedan ska lägga in den på själva sidan.

• Name: Fyll i namnet på personen som kan kontaktas, i exemplet Anna Andersson.

• Job title: Fyll i personens titel (titta gärna i Lucat om du är osäker).

• Email: Fyll i personens e-postadress. Denna visas som en länk på sidan.

• Telephone/Mobile number: Fyll i telefonnummer. Dessa visas som länkar på sidan.

• Link: Skriv in och välj en länk i fältet URL och ange en länktext i fältet Link text för att skapa en valfri länk i din kontaktbox. Då du börjar skriva i fältet URL så filtreras automatiskt sidor på din webbplats fram, men det går också bra att bara skriva in en webbadress om du vill länka externt.

• Description: Detta är ett fritextfält där du har möjlighet att ge en lite bredare bild av personen.

För att lägga in en bild på personen, klicka på "Add new or existing image" och följ stegen för detta. Om du vill ha kontroll över hur bilden beskärs, se till att använda en kvadratisk bild, men följ i övrigt rekommendation om en minsta bredd på 1500 pixlar för att bilden också ska vara användbar i andra sammanhang i Drupal. Om bilden har andra proportioner kan du ha glädje av funktionen Focal point med vilken du anger var fokus i bilden ska ligga, så att Drupal beskär bilden med i enlighet med detta. 

Läs mer om bilder och bildstorlekar 

Slutligen kan du lägga till en bakgrundsfärg på hela kontaktboxen. 

Klicka därefter på Save – och du har skapat din första Contact box.

Skapa nu övriga kontaktboxar som du vill ha med på din kontaktsida, enligt stegen ovan.

Lägg in boxarna på en sida via layoutläget 

När kontaktboxarna är skapade så är nästa steg att lägga in dem på en sida (Page). Skapa en sida genom att klicka på Content -> Add content -> Page. Därefter kan du bygga upp grunden till sidan genom att lägga in din ingress och brödtext, samt övergripande kontaktuppgifter och relaterad information i högerspalten. 

Som du säkert märker finns det ingenstans att lägga till Contact box när du redigerar din sida i läget Edit. Du kopplar i stället ihop dina kontaktboxar med sidan i layoutläget, efter det att du fyllt i övrig information och sparat din sida.

När du sparat din sida kommer du vara i läget View. Växla till layoutläget genom att klicka på Layout.

En viktig sak att tänka på är att du kan inte lägga till dina kontaktboxar i alla olika typer av sektioner som gäller för vanliga sidor i layoutläget. När du skapar en ny sida får den en bredare kolumn till vänster och en smalare till höger. Dock är det enbart i den bredare kolumnen som du kan lägga till en Contact box. Se bilden nedan där det enbart är på sidor som är uppbyggda med någon av dessa layouter som du senare kommer att kunna lägga till kontaktboxar i. 

Detta betyder att om du vill lägga till en kontaktruta i högerspalten på sidan så kan du inte använda Contact box. Där rekommenderar vi istället att du använder Info box för att lägga till dessa uppgifter. 

I layoutläget är det så dags att lägga till dina kontaktboxar. Klicka på Add content block nederst i den vänstra kolumnen:

I din högermeny presenteras nu de innehållsblock som du har möjlighet att lägga till. Här finns två olika val för Contact box: skapa en ny kontaktbox eller lägga till en befintlig. Eftersom vi sedan tidigare skapat alla våra kontaktboxar, klickar du på Contact box, library. 

I fönstret Configure content block ska vi leta upp den första vi skapade. Om du inte ser Select content block behöver du först klicka på den svarta pilen så att den riktas nedåt:

När du klickat dig vidare via Select content block kommer ett nytt fönster upp. Som du ser på bilden nedan så befinner du dig alltså i Available Contact boxes, det vill säga i ditt bibliotek. Du kan också skapa nya boxar från grunden om du istället går in under Add Contact box.

I det här exemplet ska du inte skapa nytt utan leta upp en du redan skapat. Du kan skrolla runt och klicka på rätt kontaktbox om du hittar den direkt, men du kan också söka rätt på den. Det du söker efter i Name-fältet är detsamma som du skrev i Administrative title när du skapade kontaktboxen. I exemplet ovan döpte vi vår till Kontakt – Anna Andersson, så om du bara sökt efter Anna Andersson så hade du fått träff ändå.

Klicka på kontaktboxen du vill använda, så det blir en blå ram runt, och välj sedan Use selected. Vill du sedan dubbelkolla innehållet så kan du klicka på Edit, annars klickar du på Add content block.

Var på sidan som din kontaktbox hamnar beror på var markören befann sig då du klickade på Add content block först gången. Mest troligt så ligger den längst ner på sidan. Ska den inte ligga där så flyttar du den genom att dra den på plats. Se bara till så att du är kvar i layoutläget – annars går den inte att flytta. Till sist sparar du din sida, och kommer automatiskt tillbaka till läget View.

Följ stegen ovan för att lägga in flera kontaktboxar på sidan. Med hjälp av textblock kan du lägga in flera vanliga brödtextfält mellan kontaktboxarna där du kan lägga in rubriker eller annan information, till exempel receptionens öppettider, vad studievägledarna kan stå till tjänst med eller vad man ska ha klart för sig innan man kontaktar prao-samordnaren.

Kanske behöver du redigera din kontaktbox med innehåll eller färg? Växla tillbaka till layoutläget. Om du vilar med muspekaren uppe till höger i respektive innehållsblock som finns på sidan, så visas en liten pennikon. Klicka där och välj Edit component.