Bild

Bildelementet ger ett bekvämt sätt att lägga in visuellt material på din Funnel- eller webbplatssida och förbättra den övergripande användarupplevelsen. Genom att integrera bilder som kompletterar ditt innehåll kan du skapa en mer engagerande och estetiskt tilltalande sida som fångar besökarnas uppmärksamhet och förmedlar ditt budskap effektivt.

Allmänna inställningar

När du redigerar bildelementet på din Funnel-sida kan de flesta justeringar göras i sektionen General Settings till vänster.

Elementnamn

Överst i den här sektionen hittar du elementnamnet, som är standardbeteckningen för det redigeringsalternativ du arbetar med. Du kan behålla standardnamnet eller byta namn för enklare identifiering när du bygger ut din Funnel-sida.

Image Actions

Välj önskad omdirigeringsåtgärd för din bild i rullgardinsmenyn. Alternativen inkluderar:

• None: Ett klick på bilden utlöser ingen åtgärd.
• Download File: Ladda upp eller välj en fil från ditt mediabibliotek som ska laddas ner när bilden klickas.
• Hide Element: Ange vilka element som ska döljas när bilden väljs.
• Show Element: Ange vilka element som ska visas när bilden väljs.
• Scroll to Element: Välj det element som sidan ska scrolla till när bilden väljs.
• Step: Välj vilket steg bilden ska visa när den klickas.
• Next Step: Omdirigerar till nästa steg i Funneln eller på webbplatsen.
• Call: Initierar ett samtal till det valda numret när bilden klickas.
• SMS: Initierar ett SMS-meddelande till det konfigurerade numret.
• Email Address: Initierar ett e-postmeddelande till den konfigurerade adressen.

Image

Här hanterar du de viktigaste aspekterna av bilden. Det delas upp i:

1. Image: När du klickar på bildikonen öppnas lagringssidan, där du kan ladda upp önskad bild. När uppladdningen är klar dubbelklickar du på bilden för att ladda in den i redigerarens yta.
2. Optimize Image Load: Att optimera bilder för din webbplats kan minska den totala sidstorleken med upp till 80%. Med den här växeln kan du dock aktivera eller inaktivera alternativet efter dina preferenser 
3. Alt Text: Se till att lägga till alt-text av SEO-skäl genom att ge en kort beskrivning av bilden.

Size

Ange bildens bredd och höjd genom att fylla i önskade mått i de avsedda fälten.

Background Color

För att ändra bakgrundsfärgen på ditt bildelement klickar du på det innehållsområde du vill justera. Du kan sedan välja en färg bland de angivna alternativen eller ange en egen färgkod som matchar ditt varumärke.

Styles

Under fliken Styles har du ytterligare anpassningsalternativ, till exempel border-radius, synlighet, custom class och kopiering av CSS-koden för senare användning.

Image Appearance

1. Opacity: Du kan styra hur mycket din text eller ditt innehåll tonas i varje elementruta. Opacity-alternativen sträcker sig från None, Light och Half till Heavy fade.

2. Image Radius: Rullgardinen Border Radius ger alternativ att visa din bild i originalform, som en cirkel eller som en oval.

3. Image Border: Du kan välja önskad typ av kantlinje för din bild. 

4. Image Shadow: Du kan förstärka din bild genom att lägga till en skugga. Välj rullgardinen för border shadow och välj mellan drop shadow och inner shadow.

Spacing Options

Avståndsalternativen i sektionen General Settings låter dig justera padding och marginaler för ditt bildinnehåll.

• Padding (Left, Right, Top, and Bottom): Dessa fyra reglage låter dig flytta innehållet i angiven riktning (vänster, höger, uppåt eller nedåt) beroende på vilket reglage som valts.
• Margin (Top and Bottom): Justera övre eller nedre marginalen för ditt innehåll genom att använda motsvarande reglage.

Align

Du kan justera textens placering efter önskemål och justera den till Left, Center, Right eller justified.

Shadow

Lägg till box shadows efter dina designbehov. Klicka på plusknappen för att tillämpa en standard yttre skugga med förinställda värden, som sedan kan anpassas ytterligare. 

Lägg till flera skuggor genom att klicka på plusknappen för mer avancerade designer. Ändra varje skugga genom att välja mellan outer och inner, och justera parametrar som X-värde, Y-värde, Blur, Spread och Color.

Visibility

Sektionen Visibility låter dig styra visningen av ditt bildelement, så att du kan växla synligheten för skrivbord eller mobila enheter efter dina behov. Du kan förhandsgranska dina ändringar med skrivbords- och mobilalternativen uppe till vänster i Funnel-byggaren för att se hur det ser ut på olika enheter.

Custom Class

Ange eller klistra in din custom class-kod i det angivna fältet.

CSS Selector

För att kopiera en CSS-selektor klickar du på ikonen “copy” till höger om referensnumret.

Animations

För att lägga till rörelse på din sida väljer du alternativet för entrance animation.

Välj bland en mängd animationseffekter som passar din innehållsstil och din målgrupps preferenser. 

För att anpassa animationsdetaljerna klickar du på Adjust Animation. Då kan du ändra scale, duration, delay och easing för din animation.

Använd det här elementet för att ge dina sidor mer visuellt intresse. Man brukar säga att en bild säger mer än tusen ord – använd dem för att stärka ditt varumärkes närvaro och fånga fler leads!