Divi Tutorial: Hvordan bruke bildemodulen på Divi Builder

pari Blair Jersyer | Divi

Divi gjør det enkelt å legge til bilder hvor som helst på bloggen din. Alle bilder støtter progressiv lasting, og kommer med 4 forskjellige animasjonsstiler som gjør det morsomt og engasjerende å navigere på nettstedet ditt. Bildemoduler kan plasseres i hvilken som helst kolonne du lager, og størrelsen deres vil bli justert for å passe.

bildemodul divi.png

Slik legger du til en bildemodul fra Divi

Før du kan legge til en bildemodul på siden din, må du først hoppe inn i Divi Builder. Først når Divi-tema installert på nettstedet ditt, vil du legge merke til en knapp Bruk Divi Builder over innleggsredaktøren når du oppretter en ny side. Klikk på denne knappen for å aktivere Divi Builder og få tilgang til alle Divi Builder-modulene. Klikk deretter på knappen Bruk Visual Builder for å starte generatoren i visuell modus. Du kan også klikke på knappen Bruk Visual Builder når du surfer på nettstedet ditt i forgrunnen hvis du er koblet til WordPress-dashbordet.

divi byggmester

Når du har aktivert Visual Builder, kan du klikke på den grå (+) knappen for å legge til en ny modul på siden din. Nye moduler kan bare legges til innenfor rader. Hvis du starter en ny side, husk å legge til en rad på siden din først.

divi modul image.png

Finn bildemodulen i listen over moduler, og klikk på den for å legge den til siden din. Listen over mods er søkbar, noe som betyr at du også kan skrive ordet "image" og deretter klikke enter for automatisk å finne og legge til image mod! Når modulen er lagt til, vil du bli møtt av modulalternativlisten. Disse alternativene er delt inn i tre hovedgrupper: Innhold , Conception et avansert .

Eksempel på brukstilfelle: Legge til overlappende bilder for å illustrere tjenester på en tjenesteside

Det er utallige måter å bruke bildemodulen på. For dette eksemplet vil jeg vise deg hvordan du legger til bilder på en tjenesteside for et nettsted for små bedrifter. Her vil jeg legge til bildene. Hver røde sirkel representerer et bilde.

legg til et modulbilde divi builder.jpg

Siden det å legge til et bilde på en side er en ganske enkel og grei prosess, kommer jeg til å legge til litt egendefinert stil for å plassere bildene mine slik at de overlapper hverandre, og skaper en stablet effekt.

La oss begynne.

Bruk den visuelle byggmesteren til å legge til en standarddel med 1/4 1/4 1/2 layout. Deretter legger du til en tekstmodul til høyre kolonne 1/2 av raden din. Skriv inn en overskrift og beskrivelse for tjenesten.

Deretter legger du til en bildemodul lengst til venstre 1/4 kolonne.

legg til bilde divi builder.png

Oppdater innstillingene for Image-modulen som følger:

Innholdsalternativer

Bildens URL: [skriv inn URL eller last ned bildet med dimensjonene 500 × 625]

Designalternativer

Tilpasset margin: venstre -60px

Avanserte alternativer

Animasjon: Fra venstre til høyre

animasjon divi image.png

Lagre innstillinger

Legg til en annen bildemodul i den andre 1/4 kolonnen (eller midtre kolonne) og oppdater bildeinnstillingene som følger:

Innholdsalternativer

Bildens URL: [skriv inn URL eller last ned bildet med dimensjonene 500 × 625]

Designalternativer

Tilpasset margin: Topp 100px, -60px venstre

Avanserte alternativer

Animasjon: Fra høyre til venstre

overlappende bilde divi.png

Lagre innstillinger

Dette tar seg av den første delen. Nå for neste serviceseksjon kan vi duplisere delen vi nettopp opprettet for den første serviceseksjonen. Når seksjonen er duplisert, endrer du kolonnestrukturen til en 1/2 1/4 1/4 kolonnelayout (motsatt av den forrige).

velg en seksjon divi.jpg

Dra deretter tekstmodulen med overskriften og beskrivelsen av tjenesten til kolonne 1/2 helt til venstre. Sørg for å skyve de to bildemodulene for å fylle hver 1/4 kolonne (nå til høyre).

Siden bildemodulene er duplikater, må vi laste opp de nye bildene for den aktuelle tjenesteseksjonen. Moduler har også alltid tilpassede marginnstillinger som de to første bildemodulene som ble opprettet. La oss endre det.

Begynn med Bildemodulen i høyre 1 / 4-kolonne, oppdater følgende bildeinnstillinger:

Innholdsalternativer

Bildens URL: [skriv inn URL eller last ned bildet med dimensjonene 500 × 625]

Designalternativer

Tilpasset margin: -60px Venstre (bare)

Avansert fane

Animasjon: Fra høyre til venstre

Til slutt oppdaterer du bildeinnstillingene for 1/4 senter-bildemodulen med følgende:

Innholdsalternativer

Bildens URL: [skriv inn URL eller last ned bildet med dimensjonene 500 × 625]

Designalternativer

Tilpasset margin: 100px opp, -60px høyre

Avansert fane

Animasjon: Fra venstre til høyre

Lagre innstillinger

Nå sjekk ut siden!

eksempel på service side divi.jpg

Alternativer for bildemodulinnhold

I Innhold-fanen finner du alle innholdselementene i modulen, for eksempel tekst, bilder og ikoner. Alt som styrer hva vises i modulen din, vil du alltid finne i denne fanen.

delen image divi area content.png

Bildens URL

Plasser en gyldig nettadresse her, eller velg / last opp et bilde via WordPress-mediebiblioteket. Bilder vil alltid vises rettferdiggjort i kolonnene og spenner over hele bredden på kolonnen din. Imidlertid vil bildet ditt aldri være større enn den opprinnelige størrelsen. Bildens høyde bestemmes av størrelsesforholdet til det opprinnelige bildet.

Åpne i betrakteren

Her kan du velge om bildet ditt skal åpnes i en betrakter når du klikker på det. Hvis dette alternativet er aktivert, vil bildet "zoome" til maksimal størrelse når du klikker i et modalvindu. Det er en flott funksjon for lommebøker.

Link URL

Plasser en gyldig nettadresse i dette feltet for å gjøre bildet ditt om til en lenke. Hvis du lar dette feltet være tomt, blir bildet ditt bare et statisk element.

Åpnings-URL

Du kan velge her om lenken din skal åpnes i et nytt vindu.

Administratormerke

Dette vil endre moduletiketten i konstruktøren for enkel identifisering. Når du bruker WireFrame-visningen i Visual Builder, vises disse etikettene i modulblokken i Divi Builder-grensesnittet.

Designmoduler for bildemoduler

I kategorien Design finner du alle stilalternativene for modulen, for eksempel skrifter, farger, størrelse og avstand. Dette er fanen du vil bruke til å endre utseendet til modulen din. Hver Divi-modul har en lang liste over designinnstillinger som du kan bruke til å endre hva som helst.

alternativ designmodul image divi.png

Bildeoverlegg

Hvis dette alternativet er aktivert, vises en farge og et overleggsikon når en besøkende svever over bildet.

Fargeikon overlegg

Her kan du angi en egendefinert farge for overleggsikonet

Dekke overleggsfarge

Her kan du definere en tilpasset farge for overlegget.

Oversvømmelsesikon

Her kan du definere et tilpasset ikon for overlegget.

Fjern plass under bildet

Dette alternativet påvirker bare bilder når de er den siste modulen i en kolonne. Når dette alternativet er aktivert, fjernes avstanden mellom bunnen av bildet og neste del, slik at bildet kan ramme toppen av neste del av siden.

Bildejustering

Her velger du retningen som bildet ditt flyter i kolonnen. Du kan flyte bildet til venstre, høyre eller holde det sentrert.

Sentrer alltid bildet på mobilen

Ofte er små bilder mer behagelige for øyet på mobile enheter når de er sentrert. Når kolonnene mislykkes, blir bilder som er justert til venstre eller høyre i mindre kolonner, foreldreløse når kolonnene mislykkes og når 100% bredde. Aktivering av denne kolonnen med tvungne bilder for å justere seg til midten av kolonnen på mobil uten å påvirke bildejusteringen på skrivebordene.

Bruk grensen

Aktivering av dette alternativet vil plassere en kant rundt modulen din. Denne rammen kan tilpasses ved hjelp av følgende betingede parametere.

Farge på grensen

Dette alternativet påvirker fargen på grensen din. Velg en egendefinert farge fra fargevelgeren for å bruke den på grensen din.

Bredde av grensen

Som standard er kantene 1 piksel brede. Du kan øke denne verdien ved å dra områdeglidebryteren eller angi en egendefinert verdi i inndatafeltet til høyre for glidebryteren. Tilpassede målenheter støttes, noe som betyr at du kan endre standardenheten fra "px" til noe annet som em, vh, vw etc.

Border style

Kanter støtter åtte forskjellige stiler: solid, prikket, prikket, dobbelt, spor, møne, overlegg og start. Velg ønsket stil fra rullegardinmenyen for å bruke den på grensen din.

Maksimal bildebredde

Som standard er maksimal bildebredde satt til 100%. Dette betyr at bildet vises i sin naturlige bredde med mindre bredden på bildet overstiger bredden på den overordnede kolonnen. I så fall vil bildet være begrenset til 100% av kolonnebredden. Hvis du vil begrense den maksimale bredden på bildet ytterligere, kan du gjøre det ved å angi ønsket maksimal breddeverdi her. For eksempel vil en verdi på 50% begrense bredden på bildet til 50% av bredden i den overordnede kolonnen.

Kraft full bredde

Som standard vises bilder i sin opprinnelige bredde. Du kan imidlertid velge å tvinge bildet til å strekke seg over hele bredden av foreldrekolonnen ved å aktivere dette alternativet.

Tilpasset margin

Margen er plassen som legges til på utsiden av modulen din, mellom modulen og neste element over, under eller til venstre og høyre for den. Du kan legge til egendefinerte marginverdier til hvilken som helst av de fire sidene av modulen. For å fjerne den egendefinerte margen, fjern merverdien fra inndatafeltet. Som standard måles disse verdiene i piksler, men du kan angi egendefinerte måleenheter i inndatafeltene.

Avanserte alternativ for bildemodul

I den avanserte fanen finner du alternativer som mer erfarne webdesignere kan finne nyttige, for eksempel tilpassede CSS- og HTML-attributter. Her kan du bruke tilpasset CSS på alle modulens mange elementer. Du kan også bruke tilpassede CSS-klasser og IDer til modulen, som kan brukes til å tilpasse modulen i barnets temas style.css-fil.

seksjon avansert modul image.png

CSS ID

Skriv inn en valgfri CSS-ID som skal brukes til denne modulen. En ID kan brukes til å lage en tilpasset CSS-stil eller for å koble til bestemte deler av siden din.

CSS klasse

Angi de valgfrie CSS-klassene som skal brukes til denne modulen. En CSS-klasse kan brukes til å lage tilpasset CSS-styling. Du kan legge til flere klasser, atskilt med et mellomrom. Disse klassene kan brukes i Divi-barnetemaet eller i det tilpassede CSS-stilarket du legger til på siden eller nettstedet ditt ved hjelp av Divi-temaalternativene eller innstillingene på Divi Builder-siden.

Tilpasset CSS

Tilpasset CSS kan også brukes på modulen og hvilken som helst av modulens interner. I Custom CSS-delen finner du et tekstfelt der du kan legge til tilpassede CSS-stilark direkte til hvert element. CSS-oppføringer i disse innstillingene er allerede pakket inn i stilkoder. Så bare skriv inn CSS-reglene atskilt med semikolon.

animasjon

Bruk denne rullegardinmenyen til å spesifisere den dovne lasteanimasjonen for bildet ditt. Du kan velge at bildet ditt skal vises fra høyre, venstre, bunn eller øverst.

synlighet

Dette alternativet lar deg kontrollere enhetene som modulen din vises på. Du kan velge å deaktivere modulen din på nettbrett, smarttelefoner eller stasjonære datamaskiner hver for seg. Dette er nyttig hvis du vil bruke forskjellige mods på forskjellige enheter, eller hvis du vil forenkle mobildesignet ved å eliminere visse elementer fra siden.

Alternativ bildetekst

Alt-teksten gir all nødvendig informasjon hvis bildet ikke lastes inn, vises riktig eller i en annen situasjon der en bruker ikke kan se bildet. Det lar også bildet leses og gjenkjennes av søkemotorer.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LAST NED DIVI-TEMA [/vcex_button][/vc_column 1 ][vc_column] /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LAST NED DEN MALER DIVI[/vcex_button][/vc_column][/vc_row]

Andre divisjoner

Legg inn kommentaren

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket *

Dette nettstedet bruker Akismet for å redusere uønsket. Lær mer om hvordan dine kommentarer data blir brukt.