Loopia Sitebuilder: Avancerad bildlayout (BETA)

Du kan använda den nya funktionen för att skapa sammansatta layouter i block med fristående bilder. Tack vare denna funktion kan du lägga till en extra bild ovanpå en befintlig. Med andra ord låter den sammansatta bildfunktionen dig berika en standardillustration med ytterligare element, en intressant bakgrund och mer därtill.

Obs! Detta är en betafunktion. Vi tar gärna emot återkoppling medan vi fortsätter förfina den.

Så här fungerar det:

  1. I redigeraren markerar du den bild du vill arbeta med och klickar på den för att öppna kontrollerna.
  2. I kontrollpanelen klickar du på ikonen Create layout för att lägga till en widget på bilden. Om du hovrar över ikonen visas en kort förklaring av funktionen.
  3. Anpassa widgeten efter dina önskemål.

Tips: När du lägger till en widget i ett block växlar alla bilder i blocket till absolut positionering. Det innebär att du kan flytta dem fritt, justera bredd, höjd, fokuspunkt och andra egenskaper.

Redigera bildwidgeten

För att komma åt inställningarna för bildwidgeten klickar du på den. Du ser då en inställningspanel och storleksjusteringar.

För att infoga en ny bild i widgeten använder du samma steg som för andra bilder:

  1. Klicka på ikonen Upload Image.
  2. Välj en fil från datorn eller från Image library.

Beskärning stöds även i bildwidgeten, vilket beskrivs i artikeln Anpassa dina bilder.

I medieinställningarna kan du:

  • Ersätta bilden i widgeten
  • Lägga till alt-text
  • Sätta en klickåtgärd

För att ändra ordning på bilden i förhållande till andra element i blocket klickar du på ikonen Reorder. Du styr om widgetens bild ska ligga ovanpå basbilden eller i bakgrunden.

Obs! Om du väljer Move backward måste din huvudbild ha en transparent bakgrund för att widgeten ska synas.

För att ta bort widgeten från arbetsytan klickar du på ikonen Delete.

Flytta och ändra storlek på widgeten

För att flytta widgeten använder du dra-och-släpp genom att ta tag i den vita pricken i mitten och dra till önskad position i huvudbilden.

För att ändra storlek tar du tag i de vita markörerna på widgetens kanter och drar för att justera storleken.

Lägg till ett nytt lager

För att börja arbeta i lager:

  1. Lägg till ett anpassat block med en bild.
  2. Klicka på bilden för att aktivera kontrollpanelen.
  3. Klicka på Create layout för att lägga till en ny bildcontainer ovanpå den befintliga.
  4. Nu kan du ladda upp en ny bild i containern och flytta eller ändra storlek på den oberoende (eller sträcka ut den, se nedan).

Välja och redigera lager

Om flera lager överlappar varandra hjälper lagerväljaren dig att nå bakomliggande bilder utan att störa de övre.

  1. Klicka på en bild för att öppna dess kontrollpanel.
  2. Använd Layer selector för att välja vilken bild du vill redigera. Det valda lagret markeras med en ljusare överliggare.
  3. När bilden är vald drar du den runt arbetsytan för att positionera den i containern.

När du flyttar ett lager visas röda lodräta och vågräta linjer som hjälper dig att rikta in det mot andra bilder eller gruppens gränser.

  • Röda linjer visar inriktning mot andra bilder.
  • Blå linjer visar gruppcontainerns kanter.

Om du släpper bilden medan de blå linjerna syns fäster den automatiskt mot gruppens kanter.

Tips: Vid komplexa kompositioner är det ofta praktiskt att flytta ett element strikt längs en axel. Håll ned Shift medan du drar en bild för att enbart flytta den horisontellt eller vertikalt.

Hantera lagrens ordning

För en enklare lagerhantering har du två tydliga alternativ i kontrollpanelen:

  • Move forward flyttar bilden ett lager uppåt.
  • Move backward flyttar bilden ett lager nedåt.

Åtgärderna tillämpas direkt utan att kontrollpanelen stängs. Om bilden redan är i det översta lagret är Move forward inaktiv. Om den ligger längst ned är Move backward inaktiv.

Duplicera lager

Du kan duplicera ett bildlager genom att klicka på Duplicate i kontrollpanelen. Den nya kopian placeras direkt ovanpå originalet, redo att redigeras eller flyttas.

Sträck ut bilder

Med funktionen Stretch kan du låta en bild fylla hela containern automatiskt.

Den första bilden (Lager 1) i en sammansatt grupp är utsträckt som standard. När du lägger till en ny bild (Lager 2 eller högre) ser du en Stretch-ikon i bildens övre högra hörn.

  1. Hovra över ikonen för att se beskrivningen Stretch.
  2. Klicka på den, så sträcker sig bilden över gruppens hela bredd och höjd.

För att ångra utsträckningen klickar du på samma ikon igen (då visas beskrivningen Unstretch).

Obs! När bilden är utsträckt kan du inte ändra storlek eller flytta den manuellt. Du kan sträcka eller släppa flera bilder i samma grupp. Om en bild är mindre än 67 px flyttar Stretch-knappen automatiskt position så att den fortsätter vara synlig.

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