Før du kan legge til en sammendragsmodul på siden din, må du først få tilgang til Divi Builder. Først når Divi-tema installert på din nettstedet Web, vil du legge merke til en knapp Bruk Divi Builder over innleggsredaktøren når du oppretter en ny side. Ved å klikke på denne knappen aktiverer du Divi Builder, som gir deg 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å din nettstedet Web oppstrøms hvis du er logget på WordPress-dashbordet.

Når du har inngått Visual Builder, kan du klikke på den grå pluss-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.

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

bruk sak for å liste bedriftstjenester på hjemmesiden

Siden Sammendrag-modulen kombinerer både bilder og tekst for å vise frem visse funksjoner, kan du bruke den til å legge til en liste over forretningstjenestene på hjemmesiden din. Blurb-modulen lar deg også gjøre ditt bilde / ikon og tittel om til en lenke til tjenestesiden din. For dette eksemplet skal jeg bruke Blurb-modulen til å legge til fire utvalgte tjenester til en hjemmeside.

Hvis du vil legge til de fire uskarpheterne på siden din, bruker du den visuelle byggmesteren til å legge til en standarddel med en rad med fire kolonner. Deretter legger du til en Blurb-modul i den første kolonnen i raden din.

Oppdater Blurb-innstillingene med følgende:

Innholdsalternativer

Tittel: [skriv inn tjenestetittel]
Innhold: [skriv inn en kort beskrivelse av tjenesten]
URL: [legg til en URL til tjenestesiden]
Bruk ikonet: JA
Ikon: [velg et ikon som illustrerer tjenesten din]

Designalternativer

Ikonfarge: # 42bb99 (lag fargen som komplimenterer utformingen av nettstedet)
Bruk skriftstørrelsesikonet: YES
Ikonets skriftstørrelse: 68 px (justerer ikonstørrelsen)
Tekstorientering: Senter -
Skriftstørrelse på hodet: 24 piksler
Skriftstørrelse: 18 px
Kroppslinjehøyde: 1.5em

Nå er den første introduksjonsteksten ferdig.

Dupliser nå sammendragsmodulen du nettopp opprettet tre ganger og dra hver av de dupliserte sammendragene til de tre andre kolonnene. Siden designinnstillingene dine er integrert i dupliserte moduler, er alt du trenger å gjøre å endre innhold (overskrift, innhold, ikon, URL osv.) og endre fargene for å tilpasse dem til hver av tjenestene dine.

Sammendrag Alternativer for innhold

I innholdsfanen finner du alle innholdselementene i modulen, for eksempel tekst, bilder og ikoner. Alt som styrer hva vises i modulen din vil alltid være i denne fanen.

Tittel

Gi teksten din en tittel som vises over teksten i fet skrift. URL-alternativet under tittelfeltet lar deg gjøre tittelen din til en hyperkobling.

Innhold

Dette feltet er der du kan legge inn kroppsinnholdet i teksten din. Uklar tekst vil også dekke hele bredden på kolonnen din opp til 550 px.

URL

Plasser en gyldig nettadresse i dette feltet for å gjøre Blurb-tittelen din til en lenke. Hvis du lar dette feltet være tomt, blir tittelen din bare et statisk element.

Åpningsadresse

Her kan du velge om linken din skal åpnes i et nytt vindu.

Bruk ikonet

Når du bruker Blurbs, kan du velge å bruke et ikon eller et bilde med teksten. Hvis du velger "Ja" for alternativet "Bruk ikon", vil du bli tilbudt følgende alternativer for å tilpasse ikonet ditt. Hvis du ikke velger å bruke et ikon, blir du bedt om å laste opp et bilde i stedet.

icon

Hvis du har valgt “Ja” for “Bruk ikon” -innstillingen, vil dette alternativet vises. Dette alternativet gir deg en liste over tilgjengelige ikoner som du kan bruke med blurb. Bare klikk på ikonet du vil bruke, så vises det i teksten din.

Bilde

Hvis du ikke valgte å bruke et ikon, vises denne innstillingen. Plasser en gyldig nettadresse her, eller velg / last opp et bilde via WordPress-mediebiblioteket. Bilder i oppsummeringsmodulen vises alltid sentrert i kolonnene og strekker seg over hele bredden på kolonnen din opp til 550 px. Imidlertid vil bildet ditt aldri være større enn den opprinnelige opplastningsstørrelsen. Presentasjonsbildets høyde bestemmes av størrelsesforholdet til det originale bildet. Det anbefales derfor å plassere alle presentasjonsbildene i samme høyde hvis du plasserer dem side om side.

Bakgrunnsfarge

Definer en egendefinert bakgrunnsfarge for modulen din, eller la den være tom for å bruke standardfargen.

Bakgrunnsbilde

Hvis dette er angitt, vil dette bildet brukes som bakgrunn for denne modulen. For å fjerne et bakgrunnsbilde, bare fjern URL-adressen fra Innstillinger-feltet. Bakgrunnsbildene vises øverst på bakgrunnsfargene, noe som betyr at bakgrunnsfargen din ikke vil være synlig når et bakgrunnsbilde blir brukt.

Admin-etikett

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

Alternativer for sammendrag av moduldesign

I kategorien Design finner du alle modulstilvalgene, for eksempel skrifter, farger, størrelse og avstand. Denne kategorien lar deg endre utseendet til modulen din. Hver Divi-modul har en lang liste over designinnstillinger som du kan bruke til å tilpasse omtrent hva som helst.

Ikonfarge

Hvis du har valgt “Ja” for “Bruk ikon” -innstillingen, vil dette alternativet vises. Dette alternativet lar deg tilpasse fargen på ikonet ditt. Som standard er ikoner satt til temaets aksentfarge.

Sirkelikon

Hvis du har valgt “Ja” for “Bruk ikon” -innstillingen, vil dette alternativet vises. Dette alternativet lar deg plassere ikonet ditt i en farget sirkel. Hvis du velger "ja" for denne innstillingen, vil du bli tilbudt flere alternativer for å tilpasse fargen og kanten på sirkelen din.

Sirkelens farge

Hvis du valgte "Ja" for "Circle Icon" -innstillingen, vil dette alternativet vises. Her kan du velge en farge du vil bruke til sirkelen din. Denne fargen er uavhengig av fargen på det tidligere valgte ikonet. Ikonet ditt, i fargen, vises i en sirkel med fargen du velger her.

Vis grensen til sirkelen

Hvis du valgte "Ja" for "Circle Icon" -innstillingen, vil dette alternativet vises. Dette alternativet lar deg aktivere en ramme for sirkelen din. Hvis dette alternativet er valgt, vises et ekstra alternativ for å velge kantfarge.

Sirkelfarge

Hvis du valgte "Yes" for "Show Circle Border" -innstillingen, vil dette alternativet vises. Her kan du justere fargen på grensen til sirkelen.

Bilde / ikonplassering

Her kan du velge plasseringen av bildet/ikonet ditt. Det kan enten vises over teksten eller til venstre for teksten. Ved å plassere bildet/ikonet til venstre for teksten din, blir bildet mindre enn om det er plassert på toppen.

Bruk ikonstørrelse på ikonet

Hvis dette alternativet er aktivert, kan du angi en egendefinert størrelse for ikonet som vises over eller to til venstre for blurb.

Tekstfarge

Hvis uklarheten din er plassert på en mørk bakgrunn, bør tekstfargen settes til "Mørk". Omvendt, hvis uklarheten din blir plassert på en lys bakgrunn, bør tekstfargen settes til "Lys".

Tekstorientering

Denne rullegardinmenyen lar deg spesifisere retningen til teksten som skal rettferdiggjøres, sentreres eller rettferdiggjøres.

Topptekst

Du kan endre skrifttypen til overskriften ved å velge ønsket skrift fra rullegardinmenyen. Divi kommer med dusinvis av fantastiske skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din ved å bruke fete, kursive, store og understrekede alternativer.

Topptekststørrelse

Her kan du justere størrelsen på overskriftsteksten. Du kan dra intervallglidebryteren for å øke eller redusere størrelsen på teksten, eller du kan angi ønsket tekststørrelsesverdi direkte i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsen for å endre enhetstypen.

Topptekstfarge

Som standard vises alle tekstfarger i Divi i hvit eller mørk grå. Hvis du vil endre fargen på toppteksten din, velger du fargen du ønsker fra fargevelgeren ved hjelp av dette alternativet.

Avstand mellom topptekster

Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke mellomrommet mellom hver bokstav i overskriftsteksten, bruker du intervallglidebryteren for å justere mellomrom eller angir ønsket avstandsstørrelse i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsen for å endre enhetstypen.

Toppradens høyde

Radhøyde påvirker mellomrommet mellom hver rad i overskriftsteksten. Hvis du vil øke mellomrommet mellom hver rad, bruker du glidebryteren for å justere mellomrom eller angir ønsket avstandsstørrelse i inntastingsfeltet til høyre for markøren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsen for å endre enhetstypen.

Kropps skrifttype

Du kan endre kroppsfonten din ved å velge din foretrukne font fra rullegardinmenyen. Divi kommer med dusinvis av fantastiske skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din ved å bruke fete, kursive, store og understrekede alternativer.

Kropp skriftstørrelse

Her kan du justere størrelsen på kroppsteksten. Du kan dra intervallglidebryteren for å øke eller redusere størrelsen på teksten, eller du kan angi ønsket tekststørrelsesverdi direkte i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsen for å endre enhetstypen.

Kropps tekstfarge

Som standard vises alle tekstfarger i Divi i hvit eller mørk grå. Hvis du vil endre fargen på kroppsteksten, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.

Spacing av kropps bokstaver

Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke mellomrommet mellom hver bokstav i brødteksten, bruker du intervallglidebryteren til å justere mellomrom eller angir ønsket avstandsstørrelse i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsen for å endre enhetstypen.

Høyde på kroppslinjen

Linjehøyde påvirker mellomrommet mellom hver linje med brødtekst. Hvis du vil øke mellomrommet mellom hver linje, bruker du intervallglidebryteren til å justere mellomrommet eller angir ønsket plassstørrelse i inndatafeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsen for å endre enhetstypen.

Bruk grensen

Aktivering av dette alternativet vil plassere en ramme 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. Støtt tilpassede måleenheter, 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, inkludert: solid, prikket, prikket, dobbelt, spor, møne, innfelt og start. Velg stilen du vil ha fra rullegardinmenyen for å bruke den på grensen din.

Maksimal bildebredde

Bruk av en maksimal breddeverdi her vil begrense bredden på presentasjonsbildet. Dette påvirker bare uskarpheter som ikke er i ikonmodus.

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 en tilpasset margin, fjern merverdien fra inndatafeltet. Som standard måles disse verdiene i piksler, men du kan angi egendefinerte måleenheter i inndatafeltene.

Tilpasset polstring

Polstring er plassen som legges til i modulen din, mellom kanten av modulen og dens indre elementer. Du kan legge til egendefinerte polstringsverdier til hvilken som helst av de fire sidene av modulen. For å fjerne en tilpasset margin, fjern merverdien fra inndatafeltet. Som standard måles disse verdiene i piksler, men du kan angi egendefinerte måleenheter i inndatafeltene.

Avanserte alternativer Sammendragsmodul

I kategorien Avansert 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 ID-er til modulen, som kan brukes til å tilpasse modulen i barnets temas style.css-fil.

CSS ID

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

CSS klasse

Skriv inn de valgfrie CSS-klassene som skal brukes for denne modulen. En CSS-klasse kan brukes til å lage tilpasset CSS-styling. Du kan legge til flere klasser, atskilt med et mellomrom. Disse timene kan brukes i din Divi-tema Underordnet eller i den tilpassede CSS-en du legger til på siden din eller din nettstedet Web ved å bruke Divi-temaalternativer eller Divi Builder-sideinnstillinger.

Tilpasset CSS

Tilpasset CSS kan også brukes på modulen og hvilket som helst av modulens interne elementer. I Custom CSS-delen finner du et tekstfelt der du kan legge til CSS direkte til hvert element. CSS-oppføringene i disse innstillingene er allerede innebygd med stilkoder. Så du må bare oppgi CSS-regler atskilt med semikolon.

Bilde / ikon animasjon

Dette styrer retningen til lat lasteanimasjonen.

ALT-tekst fra bildet

Hvis du ikke valgte å bruke et ikon, vises denne innstillingen. Annen tekst 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.

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.

Det er det for denne opplæringen. Vi håper å ha vist deg hvordan du bruker oppsummeringsmodulen på Divi.