Loopia Sitebuilder: Custom-blocket

Om du inte hittar ett lämpligt block i vårt blockbibliotek, eller om du bara vill vara kreativ, kan du välja ett Custom-block och fylla det med eget innehåll.

Du kan använda Custom-blocket för att skapa en unik blocklayout genom att placera blockets element (widgets) på ditt eget sätt. Med hjälp av motsvarande widgets kan du till exempel placera en bild bredvid ett formulär, en video bredvid en knapp och så vidare.

Lägga till ett Custom-block

Custom-blocket ligger högst upp i blockbiblioteket. När du lagt till blocket på arbetsytan behöver du lägga till widgets som motsvarar dina behov. Klicka på den gula knappen Add widget för att göra det.

Vilka widgets finns?

Våra widgets är indelade i sektioner så att det är enkelt att navigera bland dem. Du kan också söka efter en widget genom att skriva in din sökning i sökfältet högst upp i Widget library.

Nedan följer en lista över sektionerna och deras widgets.

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 in andra widgets i.

Du bör använda en av Grid & Columns-widgetarna för att dela in blocket i vertikala sektioner. Om du vill lägga widgets ovanpå varandra (inte sida vid sida) kan du hoppa över den här sektionen.

Om du däremot vill arrangera dina widgets sida vid sida, välj en av widgetarna nedan:

  • 2 columns widget: Använd den när du vill dela in ditt Custom-block vertikalt i två kolumner. Du kan lägga till separata widgets i båda kolumnerna.
  • 3 columns widget: Använd den när du vill dela in blocket vertikalt i tre kolumner. Du kan lägga till separata widgets i alla tre kolumnerna.
  • 4 columns widget: Använd den när du vill dela in blocket vertikalt i fyra kolumner. Du kan lägga till separata widgets i alla fyra kolumnerna.
  • Media on the right/left widget: Dessa replikerar layouten i Om oss-blocket. Mellanrummet mellan kolumnerna är större än i 2 columns widget, vilket ökar läsbarheten när ett stort medieelement placeras vid sidan av texten.

Du kan ändra antalet kolumner per rad eller växla elementlayout i blockinställningarna.

Obs: Du kan bara lägga till en av Grid & Columns-widgetarna i ett enskilt Custom-block. Det går till exempel inte att lägga en 2-column widget ovanpå en 3-column widget eller inuti den. Du kan dock lägga till två Custom-block och använda en 2-column widget för det ena och en 3-column widget för det andra.

Column settings

När du lagt till en ny kolumn kan du lägga widgets i den. Dessutom, när du markerar en kolumn och går till dess inställningar kan du ändra utseendet på kolumnen du arbetar med, till exempel:

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

Du kan även justera alla kolumner i blocket samtidigt:

  • 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 för extra vägledning.

Widgetinställningarna kan variera beroende på vald justering. Om en ruta till exempel innehåller bilder och är vänsterjusterad, så ser storleksändring till att bilden förblir placerad till vänster. Om bilden är centrerad centrerar storleksändringen automatiskt innehållet, inklusive textelement.

Stretch columns-funktionen

Det här alternativet låter dig sträcka ut alla tillgängliga kolumner så att de matchar den fulla bredden och höjden av den högsta kolumnen i varje rad. Om en layout har två rader rutor med varierande antal och storlekar, ser den här funktionen till att uppställningen blir jämn över båda dimensionerna och förbättrar den övergripande designkonsekvensen.

Om du satt kolumnbredden till "Fixed" eller kolumnhöjden till "Hug", kan du manuellt justera justeringsinställningarna för att centrera kolumnerna efter behov.

Basic

Dessa widgets är grundläggande element på alla webbplatser: knappar, textbehållare, ikoner, bilder med mera.

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

  • Text: Här kan du lägga till text i ditt block, inklusive länkar.
  • Image: Med den här widgeten kan du lägga till en bild i ditt block.
  • Button: 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 var för sig.
  • Spacer: Låter dig lägga till extra utrymme mellan två andra widgets, till exempel bild och text, och justera dess höjd.
  • 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 ett ytterligare 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.
  • List with icons: Kombinerar ikonelement med textelement. Perfekt om du vill ge en lista över dina tjänster. Den här widgetens element 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: Lägg till en bild i ditt block.
  • Video: Använd den när du vill placera en spelbar video i ditt Custom-block.
  • Music: Bädda in en ljudfil, till exempel ett spår som finns på SoundCloud eller 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 genom den här widgeten kan du också bädda in andra tredjepartslösningar som fungerar genom en iframe-kod. Det kan vara ett Google-dokument, en Google-kalender, en Elfsight-widget eller liknande. Om koden du vill bädda in inte är iframe kan du lägga till den via HTML-widgeten.

Social

Med Social-widgets 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 smak eller ta bort dem du inte behöver.
  • Follow us: Samma som Social icons-widgeten, men innehåller även textelementet "Follow us". Du kan ändra den texten också.

Anpassa blockinställningarna

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 på ikonen Block settings.

Fliken Layout är inte aktiv för Custom-blocket eftersom du anger din layout 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 mellanrummet ovanför och under blocket.
  • Vertical alignment: Justera ditt innehåll till toppen, mitten eller botten av blocket.
  • Columns layout: Välj antal element per rad.
  • Background settings: Lägg till en bakgrundsbild till blocket.

När du anpassat blockinställningarna klart, klicka på Save för att bekräfta ändringarna.

Duplicera widgets

Alla widgets i Custom-blocket kan dupliceras. För att duplicera en widget, håll muspekaren över den för att aktivera kontrollpanelen och klicka sedan på Duplicate-knappen.

Elementen i List with icons-widgeten 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 widgets i den.

Ändra storlek på widgets

Du kan ändra storlek på widgets som innehåller media: Image-, Video- och Music-widgets. För att ändra storlek på någon av dem, klicka på widgeten och dra Resize-kontrollen längst ner på mediet.

Text-widgeten kan ändras genom att dra i kontrollerna på sidorna av widgeten.

Flytta en widget

Alla widgets kan flyttas inom ett Custom-block. För att flytta en widget, håll muspekaren över den, klicka sedan på Move-knappen och dra den till den nya platsen.

Obs: När du flyttar en kolumn flyttas också alla widgets som finns i den.

Ta bort en widget

Håll muspekaren över widgeten och klicka på Delete-knappen för att ta bort den.

Obs: När du tar bort en kolumn tas också alla widgets som finns i den bort.

Redigera text i widgetarna

För att redigera demoinnehållet, klicka på textstycket och börja skriva din nya text. Du kan också kopiera och klistra in befintligt innehåll från din textredigerare.

Redigera bilder

Du kan ersätta demobilder i Custom-blocket med dina egna foton. Se vår separata guide om hur du anpassar dina bilder för detaljerade instruktioner.

Redigera knappar

Du kan redigera knappar i ditt Custom-block så att de leder till olika sidor på din webbplats eller till en extern URL. För att redigera länkar i knappar, se våra separata guider om att redigera och ta bort knappar.

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