Divi Person-modulen er den beste måten å lage en personlig profilblokk på. Dette er et flott tillegg til å bruke på About Me-sider eller de som har teammedlemmer der du vil lage en biografi for enkeltpersoner. Denne modulen kombinerte tekst, bilder og sosiale medier i en sammenhengende modul.

Slik konfigurerer du Divi Person-modulen

Før du kan legge til en Divi Person-modul på siden din, må du først hoppe inn i 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. 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å din nettstedet Web i forgrunnen hvis du er logget på WordPress-dashbordet.

Når du har angitt 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. Vi har gode veiledninger om bruk av elementene i linjer og seksjoner av Divi.

Finn personmodulen 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 "person" og deretter klikke enter for automatisk å finne og legge til Person-modulen! Når modulen er lagt til, blir du møtt av listen over modulalternativer. Disse alternativene er delt inn i tre hovedgrupper: Innhold , Conception et avansert .

Eksempel på brukstilfelle: Legge til en "Vårt team" -seksjon på en Om oss-side

Om oss-siden er et bra sted å introdusere teammedlemmene dine ved hjelp av Person-modulen. Det gir et personlig preg og kan bidra til å bygge tillit hos nye kunder.

For dette eksemplet vil jeg vise deg hvordan du bruker Person-modulen til å legge til en "Vårt team" -del til en side om en liten bedrift. Jeg skal bruke en tre-personers, tre kolonnelayout som holder seksjonen mer kompakt og samsvarer med den generelle utformingen av siden.

Bruk Visual Builder til å sette inn en ny standarddel med en rad med tre kolonner (1/3 1/3 1/3). Deretter legger du til en personmodul i den første kolonnen.

Oppdater personmodulinnstillingene som følger:

Innholdsalternativer

Navn: [Skriv inn personens navn]
Posisjon: [Skriv inn personens utvidelse]
Skriv inn nettadresser for profiler på sosiale medier
Beskrivelse: [Skriv inn en kort biografi]
Bilde: [Ta et 600 x 600 bilde]

Designalternativer

Fargeikon: # fcbf00
Hold ikonfarge: # e0a831
Topptekst: Roboto, fet skrift, innflytelse
Topptekststørrelse: 30px
Topptekstfarge: # 505050
Avstand mellom brevhode: 1px
Toppradens høyde: 1.5 em
Kroppens skriftstørrelse: 18 px
Kroppslinjestørrelse: 1.4em
Tilpasset polstring: 15px opp, 15px høyre, 15px ned, 15px venstre

Avanserte alternativer (tilpasset CSS)

Hovedelement:
-webkit-boks-skygge: 0 1px 5px rgba (0, 0, 0, 0.2)
-moz-box-shadow: 0 1px 5px RGBA (0, 0, 0, 0,2);
boksskygge: 0 1px 5px rgba (0, 0, 0, 0,2);

Lagre innstillinger

Dupliser nå personmodulen du nettopp opprettet to ganger, og dra de dupliserte modulene til andre og tredje kolonne i raden. Siden designen er overført for hver av de dupliserte “Person” -modulene, er alt du trenger å gjøre å oppdatere innholdet med bilde, tittel, posisjon, sosiale medier og beskrivelse. av personen.

Det er det!

Personinnholdsalternativer

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.

Fornavn

Dette er navnet på personen du introduserer. Navnet vises øverst i modulen i større tekst.

Stilling

Posisjonen vises under navnet i mindre tekst. Dette brukes ofte til å referere til en persons profesjonelle stilling i et bedriftsteam. For eksempel Nick Roach, "Grafisk designer".

Facebook profiladresse

Skriv inn URL-en på Facebook-siden din, eller la den være tom for å deaktivere Facebook-ikonet.

Twitter profil URL

Skriv inn URL-en på Twitter-siden din, eller la den være tom for å slå av Twitter-ikonet.

Google + -profil-nettadressen

Skriv inn URL-adressen på Google + -siden din, eller la den være tom for å slå av Google + -ikonet.

LinkedIn profil URL

Skriv inn URL-adressen på LinkedIn-siden din, eller la den være tom for å slå av LinkedIn-ikonet.

Beskrivelse

Skriv inn innholdet i hovedteksten for modulen din her.

Bilde URL

Her kan du laste ned et bilde du vil bruke i biografen.

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-en fra innstillingsfeltet. Bakgrunnsbilder vises øverst på bakgrunnsfargene, noe som betyr at bakgrunnsfargen ikke vil være synlig når et bakgrunnsbilde blir brukt.

Admin-etikett

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.

Designalternativer for Personmodulen

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.

Ikonfarge

Dette alternativet kontrollerer fargen på sosiale medier-ikoner som vises i hver persons profil. Som standard er disse ikonene grå, kjøp, du kan endre denne fargen ved hjelp av denne innstillingen.

Ikonfarge på svever

Du kan også endre sveverfargen for ikoner på sosiale medier. Velg ønsket farge ved hjelp av fargevelgeren i denne innstillingen.

Tekstfarge

Her kan du velge verdien på teksten din. Hvis du jobber med en mørk bakgrunn, bør teksten være på. Hvis du jobber med en lys bakgrunn, bør teksten din være mørk.

Topptekst

Du kan endre skrifttypen til overskriftsteksten ved å velge ønsket skrift fra rullegardinmenyen. Divi kommer med dusinvis av flotte 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 med fet, kursiv, stor bokstav og understrekingsalternativer.

Topptekststørrelse

Her kan du justere størrelsen på overskriftsteksten. Du kan dra områdeglidebryteren for å øke eller redusere størrelsen på teksten, eller 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ørrelsesverdien for å endre enhetstypen.

Topptekstfarge

Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre fargen på toppteksten, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.

Avstand mellom topptekster

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

Toppradens høyde

Radhøyde påvirker mellomrommet mellom hver rad i overskriftsteksten. Hvis du vil øke avstanden mellom hver rad, bruker du glidebryteren for å justere mellomrom eller angir ønsket avstandsstørrelse i inntastingsfelt 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ørrelsesverdien for å endre enhetstypen.

Kropps skrifttype

Du kan endre kroppsfonten din ved å velge ønsket skrift fra rullegardinmenyen. Divi kommer med dusinvis av flotte 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 med fet, kursiv, stor bokstav og understrekingsalternativer.

Kropp skriftstørrelse

Her kan du justere kroppens tekststørrelse. Du kan dra områdeglidebryteren for å øke eller redusere størrelsen på teksten, eller 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ørrelsesverdien for å endre enhetstypen.

Kropps tekstfarge

Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre fargen på teksten, 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 avstanden mellom hver bokstav i teksten, bruker du skyvekontrollen for å justere mellomrom eller skriver inn ønsket avstandsstørrelse i inntastingsfeltet til høyre for skyveknappen. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Høyde på kroppslinjen

Linjehøyde påvirker mellomrommet mellom hver tekstlinje i kroppen din. Hvis du vil øke mellomrommet mellom hver linje, kan du bruke skyveknappen for å justere mellomrom eller angi ønsket avstandsstørrelse i inndatafeltet plassert 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ørrelsesverdien for å endre enhetstypen.

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.

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.

Tilpasset polstring

Påfyll er plassen som legges til inne i modulen din, mellom kanten av modulen og dens indre elementer. Du kan legge til tilpassede polstringsverdier 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 alternativer for Person-modulen

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.

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

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 klassene kan brukes i Divi-barnetemaet ditt eller i det tilpassede CSS-stilarket du legger til på siden eller nettstedet ditt. nettstedet Web ved å bruke Divi-temaalternativer eller Divi Builder-sideinnstillinger.

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

Som standard animeres bilder mens du blar gjennom siden. Her kan du velge retning for animasjonen eller deaktivere den.

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.

[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

• 5 nettsteder for restaurant bruk Divi tema
• Slik legger du til tekst på et Divi WooCommerce-produkt
• Slik endrer du menyfargen mellom Divi-sider
• Hvordan tilpasse rutenettene til en blogg med Divi
• Hvordan bruke rollen Divi editor på WordPress
• Hvordan lage en Divi-glidebryter på fullskjerm
• Hvordan endre farge på menyer mellom Divi-sider
• Funksjoner du sannsynligvis ikke kjenner til Divi
• Slik bruker du Divi Builder på WordPress
• Slik bruker du Divi video-rullemodulen
• Slik bruker du Divi Builder Flip-modulen
• Hvordan legge til en attestmodul på Divi Builder
• Slik bruker du Divi-tekstmodulen
• Hvordan lage en glidebryter på Divi
• Hvordan redigere en Divi-brukerrolle
• Slik bruker du Divi Social Media-modulen
• Hvordan bruke butikkmodulen på temaet WordPress Divi
• Slik bruker du Divi sidebar-modulen
• Slik bruker du Divi Price Table Module
• Slik bruker du tittelmodulen til Divi-publikasjoner
• Hvordan legge til en videomodul av Divi
• Slik bruker du artikkelen navigasjonsmodulen
• Slik bruker du Divi-søkemodulen
• Slik bruker du Divi-lommebokmodulen
• Slik bruker du personmodulen på Divi Builder
• Slik bruker du lommebokmodulen med Divi filter
• Slik bruker du skyvemodulen med full bredde
• Slik bruker du Divi Builder Image Module
• Slik bruker du navigasjonsmodulen med full bredde på Divi Builder
• Slik bruker du bildegalleriemodulen
• Slik bruker du Divi Builder Full-Width Card Module
• Slik bruker du Divi Full Width Portfolio Module
• Hvordan bruke Divi-modulen i full bredde
• Slik bruker du Divi-tellermodulen
• Slik bruker du glidebryteren for artikler på Divi Builder
• Slik bruker du Divi Email Optin-modulen