Loopia Sitebuilder: Custom-block

Om du inte hittar något lämpligt block i vårt blockbibliotek, eller om du bara känner dig kreativ, välj ett Custom-block och fyll det med ditt eget innehåll.

Du kan använda Custom-blocket för att skapa en unik blocklayout genom att arrangera blockelementen (widgetarna) på ditt eget sätt. Genom att använda motsvarande widgetar kan du till exempel ha en bild bredvid ett formulär, en video bredvid en knapp, och så vidare.

Lägga till ett Custom-block

Custom-blocket är placerat högst upp i blockbiblioteket.

Efter att du har lagt till blocket på arbetsytan behöver du lägga till widgetar som motsvarar dina behov. Klicka på den gula knappen Add widget för att göra detta.

Vilka widgetar finns tillgängliga?

Våra widgetar är indelade i sektioner för att göra det enkelt att navigera. Du kan också söka efter den widget du behöver genom att skriva i sökfältet högst upp i Widget library.

Nedan finner du listan med sektioner och tillhörande widgetar.

Grid & Columns

Grid & Columns hjälper dig att forma layouten i ditt Custom-block. De fungerar som avgränsare med behållare som du sedan lägger till andra widgetar i.

Du bör använda en av Grid & Columns-widgetarna för att dela in ditt block i vertikala sektioner. Om du vill lägga widgetar ovanpå varandra (istället för bredvid varandra) kan du hoppa över den här sektionen.

Om du däremot vill arrangera dina widgetar bredvid varandra, välj en av widgetarna nedan:

  • 2 columns widget: Använd den här när du vill dela in ditt Custom-block vertikalt i två kolumner. Du kan lägga till separata widgetar i båda kolumnerna.
  • 3 columns widget: Använd den här om du vill dela in ditt Custom-block vertikalt i tre kolumner. Du kan lägga till separata widgetar i alla tre kolumner.
  • 4 columns widget: Använd den här om du vill dela in ditt Custom-block vertikalt i fyra kolumner. Du kan lägga till separata widgetar i alla fyra kolumner.
  • Media on the right/left widget: Dessa efterliknar layouten i Om oss-blocket. Mellanrummet mellan kolumnerna är större än i 2 columns-widgeten. Det förbättrar läsbarheten när ett stort medieelement infogas bredvid texten.

Du kan ändra antal kolumner per rad eller byta elementlayout i blockinställningarna.

Obs! Du kan bara lägga till en av Grid & Columns-widgetarna i ett och samma Custom-block. Det går till exempel inte att placera en 2-kolumnswidget ovanpå en 3-kolumnswidget eller inuti den. Du kan däremot lägga till två Custom-block och använda en 2-kolumnswidget för det ena och en 3-kolumnswidget för det andra.

Kolumninställningar

När du har lagt till en ny kolumn kan du lägga till widgetar i den. När du markerar en kolumn och går till dess inställningar kan du dessutom ändra utseendet på den kolumn du arbetar med, exempelvis:

  • färgschema,
  • justering,
  • kantlinje,
  • skugga,
  • hörn,
  • mellanrum

Samt alla kolumner i detta block:

  • layout,
  • justering,
  • kolumner per rad,
  • kolumnbredd,
  • kolumnhöjd,
  • kantlinjer,
  • skuggor,
  • hörn,
  • mellanrum

Obs! När du håller muspekaren över ett inställningsnamn visas verktygstips med ytterligare vägledning.

Widgetinställningarna kan variera beroende på vald justering. Om en ruta exempelvis innehåller bilder och är vänsterjusterad kommer storleksändring att se till att bilden förblir vänsterjusterad. Om bilden är centrerad kommer storleksändringen automatiskt att centrera innehållet, inklusive textelement.

Stretch columns-funktionen

Den här funktionen gör att alla tillgängliga kolumner sträcks ut till samma höjd och bredd som den högsta kolumnen på varje rad. Om en layout innehåller två rader med rutor av varierande antal och storlek säkerställer funktionen jämn justering i båda dimensionerna och ger en mer konsekvent design.

Om du har ställt in kolumnbredden på ”Fixed” eller kolumnhöjden på ”Hug” kan du manuellt justera justeringsinställningarna för att centrera kolumnerna efter behov.

Basic

Dessa widgetar är grundelementen på alla webbplatser: knappar, textbehållare, ikoner, bilder med mera.

Här är hela listan över Basic-widgetar:

  • Text: Här kan du lägga till valfria textstycken i ditt block, inklusive länkar.
  • Image: Med hjälp av den här widgeten kan du lägga till en bild i ditt block.
  • Button: Den här lägger till en knapp i ditt block, som du sedan kan länka.
  • 2 Buttons: Lägger till två knappar samtidigt. Du kan redigera dem separat.
  • Spacer: Låter dig lägga till extra utrymme mellan två andra widgetar, exempelvis bild och text, och justera höjden.
  • Form: Använd den här för att lägga till ett kontaktformulär i ditt Custom-block.
  • Quote: Består av olika element: ett textelement, ett litet bildelement (om du vill lägga till ett foto) och ytterligare ett textelement där du kan lägga till ett namn.
  • Icon: Hjälper dig att lägga till en ikon för sociala medier eller någon annan ikon från vår samling. Ett snyggt litet medieelement som gör att din webbplats ser mer professionell ut.
  • List with icons: Kombinerar ikonelement med textelement. Perfekt om du vill lista de tjänster du erbjuder. Elementen i den här widgeten kan dupliceras.
  • HTML: Lägg till den här widgeten om du vill lägga till anpassad kod i ditt block.

Media

Om du vill lägga till ett foto på din webbplats eller bädda in en ljudkomposition, välj en av Media-widgetarna:

  • Image: Med hjälp av den här widgeten kan du lägga till en bild i ditt block.
  • Video: Använd den här widgeten när du vill placera en spelbar video inuti ditt Custom-block.
  • Music: Bädda in ett ljudspår, till exempel ett stycke som ligger på SoundCloud eller en annan ljudplattform. Det fungerar på samma sätt som video via en länk eller en inbäddningskod, beroende på vad plattformen erbjuder.
  • Embed: Förutom att kunna lägga till video eller ljud via den här widgeten kan du också bädda in valfri annan tredjepartslösning som fungerar via en iframe-kod. Det kan vara ett Google-dokument, en Google-kalender, en Elfsight-widget eller liknande. Om en kod du vill bädda in inte är en iframe kan du lägga till den via HTML-widgeten.

Social

Genom att använda Social-widgetar kan du lägga till ikoner för sociala medier och länka dem till dina konton på sociala medier.

  • Social icons: Fyra av de populäraste ikonerna för sociala medier på ett ställe. Du kan byta ut dem efter eget tycke eller ta bort dem du inte behöver.
  • Follow us: Samma som widgeten Social icons, men den innehåller också textelementet ”Follow us”. Du kan ändra den texten också.

Anpassa blockinställningar

Precis som med andra block kan du anpassa Custom-blocket med hjälp av dess kontrollpanel. Aktivera den genom att klicka på blocket och sedan klicka på ikonen Block settings.

Layout-fliken är inte aktiv för Custom-blocket eftersom du anger layouten med hjälp av Grid & Columns i Widget library.

I fliken Appearance kan du göra följande ändringar:

  • Block style: Ändra blockets färgschema.
  • Block spacing: Ändra mellanrummen ovanför och under blocket.
  • Vertical alignment: Justera ditt innehåll till blockets topp, mitten eller botten.
  • Columns layout: Välj antal objekt per rad.
  • Background settings: Lägg till en bakgrundsbild i blocket.

När du är klar med att anpassa blockinställningarna klickar du på Save för att bekräfta ändringarna.

Duplicera widgetar

Alla widgetar inuti Custom-blocket kan dupliceras. För att duplicera en widget håller du muspekaren över den för att aktivera dess kontrollpanel och klickar sedan på Duplicate-knappen.

Elementen i widgeten List with icons kan också dupliceras inuti själva widgeten. Håll muspekaren över listobjektet och klicka på Duplicate.

Obs! När du duplicerar en kolumn dupliceras även alla widgetar i den.

Ändra storlek på widgetar

Du kan ändra storlek på widgetar som innehåller media: Image-, Video- och Music-widgetar. För att ändra storlek på någon av dem klickar du på widgeten och drar i Resize-kontrollen som ligger längst ner på medieelementet.

Text-widgeten kan storleksändras genom att dra i kontrollerna på widgetens sidor.

Flytta en widget

Alla widgetar kan flyttas inuti ett Custom-block. För att flytta en widget håller du muspekaren över den och klickar sedan på Move-knappen och drar den till den nya platsen.

Obs! När du flyttar en kolumn flyttas även alla widgetar i den.

Ta bort en widget

För att ta bort en widget håller du muspekaren över den och klickar sedan på Delete-knappen.

Obs! När du tar bort en kolumn tas även alla widgetar i den bort.

Redigera text i widgetarna

För att redigera demoinnehållet klickar du på textstycket och börjar skriva din nya text. Du kan också kopiera och klistra in befintligt innehåll från textredigeraren du använder.

Redigera bilder

Du kan ersätta demobilderna i Custom-blocket med dina egna foton.

Redigera knappar

Du kan redigera knapparna i ditt Custom-block så att de leder till olika sidor på din webbplats eller till en extern URL.

Was this article helpful?

Related Articles

Få hjälp via fjärrsupport

Klicka på knappen nedan för att starta fjärrsupport via ISL. Ange sessionskoden du fått från oss och klicka på Anslut, så är vi med dig alldeles strax!

Starta fjärrsupport