Du kan använda HTML embed-blocket för att lägga till anpassad HTML och skript som inte är fördesignade i Sitebuilder på din webbplats. HTML embed-blocket gör att du kan integrera innehåll från andra källor som kalendrar, video- och ljudfiler eller innehåll från en annan webbplats. Du kan också stila denna HTML med CSS.
Lägga till ett HTML embed-block
- Välj en plats där du vill lägga till ditt HTML embed-block och klicka på Add a block (+)-knappen.
- I Block library, rulla nedåt i listan och välj HTML embed för att se de färdigdesignade layouterna för den här blocktypen.
- Klicka på den blocktyp du gillar för att lägga till den på din sida.
Du har tre typer av HTML embed-block som låter dig:
- Bädda in Google Documents
- Bädda in en Google Calendar
- Bädda in en Google Sheet (Spreadsheet)
- Bädda in valfri annan anpassad HTML-kod (premiumblock)
Bädda in Google Docs
När du har valt det fördefinierade blocket för Google Documents visas det på din sida. Inuti blocket har du korta instruktioner för hur du lägger till Google Docs på sidan.
Här är några mer detaljerade instruktioner:
- I Google-dokumentet du vill bädda in på din webbplats, gå till File > Share > Publish to web.
- I fönstret Publish to the web klickar du på Publish för att göra ditt innehåll synligt för alla.
- När dokumentet är publicerat går du till Embed-fliken och kopierar iframe-koden.
- I Sitebuilder, gå till ditt Google Doc-block och klicka på det för att aktivera Iframe settings-ikonen.
- Klistra in koden från Google Docs i fältet i Embed code-fliken istället för exempelkoden och klicka på Submit.
Nu kan du justera storleken på textfältet genom att klicka på blocket och använda storleksändringskontrollerna.
Använd Preview-knappen i topp-baren för att se hur ditt block kommer att se ut när det publiceras. Publicera din webbplats för att göra ändringarna live.
Du kan bädda in flera dokument med den här metoden.
Lägga till Google Sheets (Spreadsheets)
Processen liknar att lägga till ett Google-dokument i blocket. Här är stegen:
- I det Google Sheet du vill bädda in på din webbplats, gå till File > Share > Publish to web.
- I fönstret Publish to the web klickar du på Publish för att göra ditt innehåll synligt för alla.
- När dokumentet är publicerat går du till Embed-fliken och kopierar iframe-koden. Du kan välja att bädda in hela dokumentet eller bara ett blad.
- I Sitebuilder, gå till ditt Google Sheet-block och klicka på det för att aktivera Iframe settings-ikonen.
- Klistra in koden från Google Sheets i fältet i Embed code-fliken istället för exempelkoden och klicka på Submit.
Du kan justera storleken på textfältet genom att klicka på blocket och använda storleksändringskontrollerna.
Använd nu Preview-knappen i topp-baren för att se hur ditt block kommer att se ut när det publiceras. Publicera din webbplats för att göra ändringarna live.
Det är möjligt att bädda in flera kalkylblad och separata blad med den här metoden.
Bädda in Google Calendar
Du kan bädda in Google Calendar direkt på din sida. Det är användbart om du vill att användare ska kunna boka en tid eller ett möte enligt din tillgänglighet. Du kan kombinera Google Calendar med formuläret som tillåter förfrågningar om bokningar och bokning av en specifik tid och datum.
Obs: Din kalender måste vara offentlig för att den ska kunna visas på din webbplats. Den här Google-guiden hjälper dig att göra den offentlig.
För att lägga till en Google Calendar i ditt block, följ dessa steg:
- Öppna din Google Calendar i webbläsaren och gå till dess Settings. I den vänstra sidopanelen väljer du den kalender du vill bädda in.
- Rulla nedåt till sektionen Integrate calendar och kopiera kodsnutten från Embed code-fältet.
- I Sitebuilder, gå till ditt Google Calendar-block och klicka på det för att aktivera Iframe settings-ikonen.
- Klistra in koden från Google Calendar i fältet i Embed code-fliken istället för exempelkoden och klicka på Submit.
Vid behov, justera kalenderns storlek genom att flytta storleksändringskontrollerna uppåt eller nedåt.
Nu kan du använda Preview-knappen i topp-baren för att se hur ditt block kommer att se ut när det publiceras. Publicera din webbplats för att göra ändringarna live.
Du kan bädda in flera kalendrar med den här metoden.
Lägga till anpassad HTML-kod
Innan du börjar, kopiera HTML-koden från den tjänst där du vill hämta koden och ha den redo.
- Håll muspekaren över HTML embed-blocket du har lagt till för att aktivera dess kontrollmeny.
- Klicka på Custom HTML-ikonen för att öppna fönstret för anpassad HTML.
- Klistra in koden i fältet och klicka på Submit. Funktionen för kodvalidering meddelar dig om koden innehåller några fel som kan stå i konflikt med hur Sitebuilder fungerar.
Obs! Koden körs inte medan du arbetar i Sitebuilder. Den körs endast i förhandsgranskningsläge eller på den publicerade webbplatsen.
Anpassa HTML embed-blocket
Blocktyperna för Google Docs, Google Sheets och Google Calendar i HTML embed kan anpassas med hjälp av dess kontrollpanel. Aktivera den genom att klicka på blocket och sedan klicka på ikonen Block settings.
Obs! Blocktypen <HTML> har inte detta alternativ eftersom all anpassning ska göras via den kod du bäddar in. Du kan dock duplicera, ta bort, flytta uppåt och nedåt, samt kopiera och klistra in den här typen av HTML embed-block.
Menyn för blockinställningar består av två flikar: Layout-fliken och Appearance-fliken.
I Layout-fliken kan du välja vilka element som ska visas i blocket. För att dölja ett specifikt blockelement (om du till exempel vill ta bort en knapp) tar du bort den blå bocken bredvid elementets namn.
I Appearance-fliken kan du göra följande ändringar:
- Block style: Ändra blockets färgschema.
- Block spacing: Ändra mellanrummen ovanför och under blocket.
- Media content settings: Lägg till ett svartvitt filter på medieinnehållet i blocket.
När du är klar med att anpassa blockinställningarna klickar du på Save.
