Divi gör det enkelt att lägga till bilder var som helst på din blogg. Alla bilder stöder progressiv laddning och kommer med 4 olika animationsstilar som gör det roligt och engagerande att navigera på din webbplats. Bildmoduler kan placeras i valfri kolumn du skapar och deras storlek kommer att anpassas för att passa.
Så här lägger du till en bildmodul från Divi
Innan du kan lägga till en bildmodul på din sida måste du först hoppa in i Divi Builder. När Divi-tema installerat på din webbplats kommer du att märka en knapp Använd Divi Builder ovanför inläggsredigeraren när du skapar en ny sida. Klicka på den här knappen för att aktivera Divi Builder och få tillgång till alla Divi Builder-moduler. Klicka sedan på knappen Använd Visual Builder för att starta generatorn i visuellt läge. Du kan också klicka på knappen Använd Visual Builder när du surfar på din webbplats i förgrunden om du är ansluten till din WordPress-instrumentpanel.
När du har aktiverat Visual Builder kan du klicka på den grå (+) knappen för att lägga till en ny modul på din sida. Nya moduler kan bara läggas till inom rader. Om du börjar en ny sida, kom ihåg att först lägga till en rad på din sida.
Leta reda på bildmodulen i listan över moduler och klicka på den för att lägga till den på din sida. Listan med mods är sökbar, vilket innebär att du också kan skriva ordet "image" och sedan klicka på Enter för att automatiskt hitta och lägga till bildmod! När modulen har lagts till hälsas du av listan över modulalternativ. Dessa alternativ är uppdelade i tre huvudgrupper: Innehåll , Design et advanced .
Exempel på användningsfall: Lägga till överlappande bilder för att illustrera tjänster på en tjänstesida
Det finns otaliga sätt att använda bildmodulen. I det här exemplet visar jag hur du lägger till bilder på en tjänstesida för en webbplats för småföretag. Här kommer jag att lägga till bilderna. Varje röd cirkel representerar en bild.
Eftersom att lägga till en bild på en sida är en ganska enkel och okomplicerad process, kommer jag att lägga till lite anpassad stil för att placera mina bilder så att de överlappar varandra, vilket skapar en staplad effekt.
Låt oss börja.
Använd den visuella byggaren för att lägga till en standardavdelning med en 1/4 1/4 1/2 layout. Lägg sedan till en textmodul till höger kolumn 1/2 av din rad. Ange en rubrik och beskrivning för tjänsten.
Lägg sedan till en bildmodul längst till vänster 1/4 kolumnen.
Uppdatera inställningarna för bildmodulen på följande sätt:
Innehållsalternativ
Bild-URL: [skriv in URL eller ladda ner bilden med måtten 500 × 625]
Designalternativ
Anpassad marginal: vänster -60px
Alternativ avancées
Animering: Från vänster till höger
Spara inställningar
Lägg till en annan bildmodul i den andra 1/4 kolumnen (eller den mellersta kolumnen) och uppdatera bildinställningarna enligt följande:
Innehållsalternativ
Bild-URL: [skriv in URL eller ladda ner bilden med måtten 500 × 625]
Designalternativ
Anpassad marginal: Topp 100px, -60px vänster
Alternativ avancées
Animering: Från höger till vänster
Spara inställningar
Detta tar hand om det första avsnittet. Nu för nästa serviceavdelning kan vi kopiera det avsnitt som vi just skapade för det första servicesektionen. När sektionen är duplicerad, ändra kolumnstrukturen till en 1/2 1/4 1/4 kolonnlayout (motsatsen till den tidigare).
Dra sedan textmodulen med rubriken och beskrivningen av tjänsten till kolumn 1/2 längst till vänster. Se till att skjuta de två bildmodulerna för att fylla varje 1/4 kolumn (nu till höger).
Eftersom bildmodulerna är dubbletter måste vi ladda upp de nya bilderna för just den tjänsten. Moduler har alltid anpassade marginalinställningar som de två första bildmodulerna som skapats. Låt oss ändra det.
Börja med bildmodulen i den högra 1 / 4-kolumnen och uppdatera följande bildinställningar:
Innehållsalternativ
Bild-URL: [skriv in URL eller ladda ner bilden med måtten 500 × 625]
Designalternativ
Anpassad marginal: -60px vänster (endast)
Avancerad flik
Animering: Från höger till vänster
Slutligen uppdaterar du bildinställningarna för 1/4 mittkolumnbildmodulen med följande:
Innehållsalternativ
Bild-URL: [skriv in URL eller ladda ner bilden med måtten 500 × 625]
Designalternativ
Anpassad marginal: 100px upp, -60px höger
Avancerad flik
Animering: Från vänster till höger
Spara inställningar
Kolla nu på sidan!
Alternativ för bildmodul innehåll
På fliken innehåll hittar du alla innehållselement i modulen, till exempel text, bilder och ikoner. Allt som styr vad visas i din modul hittas alltid på den här fliken.
bild URL
Placera en giltig webbadress här, eller välj / ladda upp en bild via WordPress-mediebiblioteket. Bilder visas alltid lämnade motiverade i sina kolumner och spänner över hela kolumnens bredd. Din bild kommer dock aldrig att vara större än sin ursprungliga storlek. Bildens höjd bestäms av bildförhållandet för din originalbild.
Öppna i betraktaren
Här kan du välja om din bild ska öppnas i en tittare när du klickar på den. Om det här alternativet är aktiverat kommer din bild att "zooma" till sin maximala storlek när du klickar i ett modalt fönster. Det är en utmärkt funktion för plånböcker.
Länkadress
Placera en giltig webbadress i det här fältet för att göra din bild till en länk. Om du lämnar fältet tomt lämnar du bara din bild som ett statiskt element.
Öppnings-URL
Du kan välja här om din länk öppnas i ett nytt fönster.
Administratörsetikett
Detta ändrar moduletiketten i konstruktorn för enkel identifiering. När du använder vyn WireFrame i Visual Builder visas dessa etiketter i modulblocket i Divi Builder-gränssnittet.
Designmoduler för bildmoduler
På fliken Design hittar du alla stilalternativ för modulen, som teckensnitt, färger, storlek och avstånd. Det här är fliken du använder för att ändra utseendet på din modul. Varje Divi-modul har en lång lista med designinställningar som du kan använda för att ändra vad som helst.
Bildöverlägg
Om det här alternativet är aktiverat visas en överläggsfärg och ikon när en besökare svävar över bilden.
Färgikonsöverlägg
Här kan du ställa in en anpassad färg för överläggsikonen
Täck överlagringsfärg
Här kan du definiera en anpassad färg för överläggningen.
Överflygningsikon
Här kan du definiera en anpassad ikon för överläggningen.
Ta bort utrymmet under bilden
Det här alternativet påverkar endast bilder när de är den sista modulen i en kolumn. När det här alternativet är aktiverat tas avståndet mellan bildens botten och nästa avsnitt bort, vilket gör att bilden kan ramas upp i nästa avsnitt på sidan.
Bildjustering
Här väljer du i vilken riktning din bild flyter i kolumnen. Du kan flyta bilden åt vänster, höger eller hålla den centrerad.
Centrera alltid bilden på mobilen
Ofta är små bilder mer tilltalande för mobila enheter när de är centrerade. När kolumnerna misslyckas blir bilder som är justerade åt vänster eller höger i mindre kolumner föräldralösa när kolumnerna misslyckas och når 100% bredd. Aktivera den här kolumnen med tvingade bilder att anpassa sig till mitten av kolumnen på mobilen utan att påverka bildinriktningen på skrivbordet.
Använd gränsen
Om du aktiverar det här alternativet placeras en kant runt din modul. Denna kant kan anpassas med följande villkorliga parametrar.
Färg på gränsen
Det här alternativet påverkar färgen på din kant. Välj en anpassad färg från färgväljaren för att tillämpa den på din kant.
Bredden av gränsen
Som standard är gränserna 1 pixel breda. Du kan öka detta värde genom att dra områdesreglaget eller ange ett anpassat värde i inmatningsfältet till höger om reglaget. Anpassade måttenheter stöds, vilket innebär att du kan ändra standardenheten från "px" till något annat som em, vh, vw etc.
Gränsstil
Gränser stöder åtta olika stilar: solid, prickad, prickad, dubbel, spår, ås, överlägg och start. Välj önskad stil i rullgardinsmenyn för att tillämpa den på din gräns.
Maximal bildbredd
Som standard är den maximala bildbredden inställd på 100%. Detta innebär att bilden visas i sin naturliga bredd såvida inte bildens bredd överstiger bredden på den överordnade kolumnen, i vilket fall bilden kommer att begränsas till 100% av kolumnbredden. Om du vill begränsa bildens maximala bredd ytterligare kan du göra det genom att ange önskat maximalt breddvärde här. Till exempel skulle ett värde på 50% begränsa bildens bredd till 50% av bredden på den överordnade kolumnen.
Tvinga full bredd
Som standard visas bilder med sin ursprungliga bredd. Du kan dock välja att tvinga bilden att spänna över hela bredden på den överordnade kolumnen genom att aktivera det här alternativet.
Anpassad marginal
Marginalen är utrymmet som läggs till på utsidan av din modul, mellan modulen och nästa element ovanför, under eller till vänster och höger om den. Du kan lägga till anpassade marginalvärden till någon av modulens fyra sidor. Ta bort den anpassade marginalen genom att ta bort mervärdet från inmatningsfältet. Som standard mäts dessa värden i pixlar, men du kan ange anpassade måttenheter i inmatningsfälten.
Avancerade alternativ för bildmodul
På den avancerade fliken hittar du alternativ som mer erfarna webbdesigners kan hitta användbara, till exempel anpassade CSS- och HTML-attribut. Här kan du använda anpassad CSS på något av modulens många element. Du kan också tillämpa anpassade CSS-klasser och ID på modulen, som kan användas för att anpassa modulen i ditt barns temas style.css-fil.
CSS ID
Ange ett valfritt CSS-ID som ska användas för den här modulen. Ett ID kan användas för att skapa en anpassad CSS-stil eller för att länka till vissa delar av din sida.
CSS klass
Ange de valfria CSS-klasserna som ska användas för den här modulen. En CSS-klass kan användas för att skapa anpassad CSS-styling. Du kan lägga till flera klasser, åtskilda av ett mellanslag. Dessa klasser kan användas i ditt Divi-underordnade tema eller i det anpassade CSS-stilarket som du lägger till på din sida eller på din webbplats med hjälp av Divi-temalternativ eller Divi Builder-sidinställningarna.
Anpassad CSS
Anpassad CSS kan också tillämpas på modulen och vilken modul som helst. I avsnittet Anpassad CSS hittar du ett textfält där du kan lägga till anpassade CSS-formatmallar direkt till varje element. CSS-poster i dessa inställningar är redan inslagna i stiltaggar. Så skriv bara in CSS-reglerna åtskilda av semikolon.
animering
Använd den här rullgardinsmenyn för att ange lazy loading animation för din bild. Du kan välja att bilden ska visas från höger, vänster, botten eller uppifrån.
Synlighet
Med det här alternativet kan du styra enheterna där din modul visas. Du kan välja att inaktivera din modul på surfplattor, smartphones eller stationära datorer individuellt. Detta är användbart om du vill använda olika mods på olika enheter, eller om du vill förenkla mobildesignen genom att eliminera vissa element från sidan.
Alternativ bildtext
Alt-texten ger all nödvändig information om bilden inte laddas, visas korrekt eller i någon annan situation där en användare inte kan se bilden. Det gör också att bilden kan läsas och kännas igen av sökmotorer.
[vc_row center_row= »yes »][vc_column width= »1/2″][vcex_button target= »blank » layout= »expanded » align= »center » font_family= »Raleway » font_weight= »700″ stil= »platt » custom_background= »#18b69d » custom_hover_background= »#118d7a » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-nedladdning »]LADDA NED DET DIVI TEMA [/vcex_button][/vc_column][vc_column width= »1/2″][vcex_button url= »https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials » target= blank » layout= »expanderad » align= »center » font_family= »Raleway » font_weight= »700″ style= »platt » custom_background= »#c4226e » custom_hover_background= »#8d184f » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-ladda ner »]LADDA NED DEN TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andra Divi tutorials
- 5 webbplatser för restaurang användning Divi tema
- Så här lägger du till text på en Divi WooCommerce-produkt
- Så här byter du menyfärg mellan Divi-sidor
- Hur du anpassar rutorna på en blogg med Divi
- Hur man använder roll Divi editor på Wordpress
- Hur man skapar en Divi-skjutreglage på full skärm
- Hur man ändrar menyens färg mellan Divi-sidor
- Funktioner du antagligen inte känner till Divi
- Så här använder du Divi Builder på WordPress
- Så här använder du Divi video-rullningsmodulen
- Så här använder du Divi Builder Flip-modulen
- Hur man lägger till en vittnesmodul om Divi Builder
- Så här använder du Divi-textmodulen
- Hur man skapar en reglage på Divi
- Hur man redigerar en Divi-användarroll
- Så här använder du Divi Social Media-modulen
- Hur man använder butikmodulen på temat WordPress Divi
- Så här använder du Divi sidebar-modulen
- Så här använder du Divi Price Table Module
- Hur man använder titelfodulen i Divi-publikationer
- Hur lägger jag till en videomodul av Divi
- Så här använder du artikelnavigationsmodulen
- Så här använder du Divi-sökmodulen
- Så här använder du Divi-plånboksmodulen
- Hur man använder personmodulen på Divi Builder
- Hur man använder plånboksmodulen med Divi-filter
- Hur man använder skjutreglaget med hela bredden
- Så här använder du Divi Builder Image Module
- Så här använder du Divi Builder med fullbredd navigationsmodul
- Hur man använder modulen för bildgalleri
- Så här använder du Divi Builder Full-Width Card Module
- Så här använder du Divi Full Width Portfolio Module
- Hur du använder Divi-modulen med full bredd
- Så här använder du Divi Counter Module
- Hur man använder artiklarna på Divi Builder
- Så här använder du Divi Email Optin-modulen