Divi Person-modulet er den bedste måde at oprette en personlig profilblok på. Dette er en god tilføjelse til brug på About Me-sider eller dem, der indeholder teammedlemmer, hvor du vil oprette en biografi for individuelle mennesker. Dette modul kombinerede tekst, billedsprog og sociale medielinks til et sammenhængende modul.

Sådan konfigurerer du Divi Person-modulet

Før du kan tilføje et Divi Person-modul til din side, skal du først hoppe ind i Divi Builder. En gang Divi-tema installeret på din Websted, vil du bemærke en knap Brug Divi Builder over indlægseditoren, når du opretter en ny side. Klik på denne knap for at aktivere Divi Builder og få adgang til alle Divi Builder-modulerne. Klik derefter på knappen Brug Visual Builder for at starte generatoren i visuel tilstand. Du kan også klikke på knappen Brug Visual Builder når du gennemser din Websted i forgrunden, hvis du er logget ind på dit WordPress-dashboard.

divi builder

Når du har indtastet Visual Builder, kan du klikke på den grå plus-knap for at tilføje et nyt modul til din side. Nye moduler kan kun tilføjes inden for rækker. Hvis du starter en ny side, skal du huske at føje en række til din side først. Vi har gode tutorials om brug af elementerne i linjer og sektioner af Divi.

personmodul divi.png

Find personmodulet på listen over moduler, og klik på det for at føje det til din side. Listen over moduler kan søges, hvilket betyder at du også kan skrive ordet "person" og derefter klikke på enter for automatisk at finde og tilføje personmodulet! Når modulet er tilføjet, vil du blive mødt af listen over modulindstillinger. Disse muligheder er opdelt i tre hovedgrupper: Indhold , Conception et avanceret .

Eksempel på brugssag: Tilføjelse af sektionen "Vores team" til en Om os-side

Siden Om os er et godt sted at introducere dine teammedlemmer ved hjælp af Person-modulet. Det tilføjer et personligt præg og kan hjælpe med at opbygge tillid til nye kunder.

I dette eksempel viser jeg dig, hvordan du bruger Person-modulet til at føje et "Vores team" -afsnit til en side om en lille virksomhed. Jeg vil bruge et tre personers, tre kolonnelayout, der holder sektionen mere kompakt og matcher det overordnede design af siden.

side om os.jpg

Brug Visual Builder til at indsætte et nyt standardsektion med en række med tre kolonner (1/3 1/3 1/3). Føj derefter et personmodul til den første kolonne.

modul person wordpress divi.png

Opdater personmodulindstillingerne som følger:

Indholdsindstillinger

Navn: [Indtast personens navn]
Position: [Indtast personens lokalnummer]
Indtast URL'er til profiler på sociale medier
Beskrivelse: [Indtast en kort biografi]
Billede: [Tag et 600 x 600 billede]

Design muligheder

Farveikon: # fcbf00
Hover-ikon Farve: # e0a831
Overskrift skrifttype: Roboto, fed, gearing in-
Skriftstørrelse på overskrift: 30 pixel
Farve på sidehovedtekst: # 505050
Mellemrum for brevhoved: 1 pixel
Overskrift rækkehøjde: 1.5 em
Krops skriftstørrelse: 18 pixel
Body Line Size: 1.4em
Tilpasset polstring: 15px op, 15px højre, 15px ned, 15px venstre

Avancerede indstillinger (brugerdefineret CSS)

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

skift profil person divi.png

Gem indstillinger

Dupliker nu det personmodul, du lige har oprettet to gange, og træk de duplikerede moduler til anden og tredje kolonne i rækken. Da designet er blevet overført til hvert af de dobbelte “Person” -moduler, skal du blot opdatere indholdet med billedet, titlen, positionen, webadresserne til de sociale medier og beskrivelsen. af personen.

Det er alt!

resultat modul person divi.jpg

Personindholdsindstillinger

I fanen indhold finder du alle modulets indholdselementer, såsom tekst, billeder og ikoner. Alt det der styrer hvad vises i dit modul vil altid findes på denne fane.

indholdsvalg divi.png

Fornavn

Dette er navnet på den person, du introducerer. Navnet vises øverst i modulet i større tekst.

Position

Positionen vises under navnet i mindre tekst. Dette bruges ofte til at henvise til en persons professionelle position inden for et virksomhedshold. For eksempel Nick Roach, "Grafisk designer".

Facebook profil URL

Indtast URL'en på din Facebook-side, eller lad den være tom for at deaktivere Facebook-ikonet.

Twitter profil URL

Indtast URL'en på din Twitter-side, eller lad den være tom for at slå Twitter-ikonet fra.

Google+ profil URL

Indtast URL'en på din Google+ side, eller lad den være tom for at slå Google+ ikonet fra.

LinkedIn profil URL

Indtast URL'en på din LinkedIn-side, eller lad den være tom for at slå LinkedIn-ikonet fra.

Beskrivelse

Indtast indholdet af hovedteksten til dit modul her.

Billede URL

Her kan du downloade et foto, der skal bruges i biografen.

Baggrundsfarve

Definer en brugerdefineret baggrundsfarve til dit modul, eller lad den være tom for at bruge standardfarven.

Baggrundsbillede

Hvis indstillet, bruges dette billede som baggrund for dette modul. For at fjerne et baggrundsbillede skal du bare fjerne URL'en fra indstillingsfeltet. Baggrundsbillederne vises oven på baggrundsfarverne, hvilket betyder, at baggrundsfarven ikke vil være synlig, når der anvendes et baggrundsbillede.

Admin Label

Dette vil ændre moduletiketten i konstruktøren for nem identifikation. Når du bruger WireFrame-visningen i Visual Builder, vises disse etiketter i modulblokken i Divi Builder-grænsefladen.

Design muligheder for Person-modulet

Under fanen Design finder du alle indstillingerne for modulstyling, såsom skrifttyper, farver, størrelse og afstand. Dette er den fane, du vil bruge til at ændre udseendet på dit modul. Hvert Divi-modul har en lang liste over designindstillinger, som du kan bruge til at ændre alt.

parametre design modul person divi.png

Ikonfarve

Denne indstilling styrer farven på de sociale medieikoner, der vises i hver persons profil. Som standard er disse ikoner grå, køb, du kan ændre denne farve ved hjælp af denne indstilling.

Ikonfarve, når du holder markøren

Du kan også ændre svæverfarven for ikoner på sociale medier. Vælg den ønskede farve ved hjælp af farvevælgeren i denne indstilling.

Tekstfarve

Her kan du vælge værdien af ​​din tekst. Hvis du arbejder på en mørk baggrund, skal din tekst være tændt. Hvis du arbejder med en lys baggrund, skal din tekst være mørk.

Overskrift skrifttype

Du kan ændre skrifttypen på din overskriftstekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, hovedstad og understregningsmuligheder.

Overskrift skriftstørrelse

Her kan du justere størrelsen på din overskriftstekst. Du kan trække områdeskyderen for at øge eller formindske størrelsen på din tekst eller direkte indtaste den ønskede tekststørrelsesværdi i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.

Sidehovedtekstfarve

Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre farven på din overskriftstekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.

Mellemrum i overskrift

Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din overskriftstekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstandsstørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.

Overskrift rækkehøjde

Rækkehøjde påvirker mellemrummet mellem hver række i din overskriftstekst. Hvis du vil øge mellemrummet mellem hver række, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstandsstørrelse i indtastningsfelt til højre for markøren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.

Body skrifttype

Du kan ændre din kropsskrifttype ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, hovedstad og understregningsmuligheder.

Krops skrifttypestørrelse

Her kan du justere din kropstekststørrelse. Du kan trække områdeskyderen for at øge eller formindske størrelsen på din tekst eller direkte indtaste den ønskede tekststørrelsesværdi i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.

Krops tekstfarve

Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre farven på din tekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.

Afstand mellem kropsbreve

Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din tekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.

Højde på kropslinjen

Linjehøjde påvirker mellemrummet mellem hver tekstlinje i din krop Hvis du vil øge afstanden mellem hver linje, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand i indtastningsfeltet placeret til højre for markøren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.

Brug grænsen

Aktivering af denne mulighed placerer en kant omkring dit modul. Denne kant kan tilpasses ved hjælp af følgende betingede parametre.

Farve på grænsen

Denne indstilling påvirker farven på din kant. Vælg en brugerdefineret farve fra farvevælgeren for at anvende den på din kant.

Bredden af ​​grænsen

Som standard er kanterne 1 pixel brede. Du kan øge denne værdi ved at trække områdeskyderen eller indtaste en brugerdefineret værdi i indtastningsfeltet til højre for skyderen. Understøttede brugerdefinerede måleenheder, hvilket betyder at du kan ændre standardenheden fra "px" til noget andet som em, vh, vw osv.

Grænsestil

Grænser understøtter otte forskellige stilarter: solidt, prikket, prikket, dobbelt, rille, ryg, overlay og start. Vælg din ønskede stil i rullemenuen for at anvende den på din kant.

Tilpasset margen

Margenen er det rum, der er tilføjet på ydersiden af ​​dit modul, mellem modulet og det næste element over, under eller til venstre og højre for det. Du kan tilføje tilpassede margenværdier til en af ​​de fire sider af modulet. For at fjerne den tilpassede margen skal du fjerne merværdien fra indtastningsfeltet. Som standard måles disse værdier i pixels, men du kan indtaste brugerdefinerede måleenheder i inputfelterne.

Tilpasset polstring

Infill er det rum, der tilføjes inde i dit modul, mellem kanten af ​​modulet og dets interne elementer. Du kan tilføje tilpassede polstringsværdier til en af ​​modulets fire sider. For at fjerne den tilpassede margen skal du fjerne merværdien fra indtastningsfeltet. Som standard måles disse værdier i pixels, men du kan indtaste brugerdefinerede måleenheder i inputfelterne.

Avancerede indstillinger for Person-modulet

På den avancerede fane finder du muligheder, som mere erfarne webdesignere måske finder nyttige, såsom tilpassede CSS- og HTML-attributter. Her kan du anvende brugerdefineret CSS på ethvert af modulets mange elementer. Du kan også anvende tilpassede CSS-klasser og ID'er til modulet, som kan bruges til at tilpasse modulet i dit barns temas style.css-fil.

option design modul divi.png

CSS ID

Indtast et valgfrit CSS-ID, der skal bruges til dette modul. Et ID kan bruges til at oprette en brugerdefineret CSS-stil eller til at linke til bestemte sektioner på din side.

CSS klasse

Indtast de valgfri CSS-klasser, der skal bruges til dette modul. En CSS-klasse kan bruges til at skabe brugerdefineret CSS-styling. Du kan tilføje flere klasser, adskilt af et mellemrum. Disse klasser kan bruges i dit Divi-barnetema eller i det tilpassede CSS-stylesheet, du tilføjer til din side eller hjemmeside. Websted ved at bruge Divi-temaindstillinger eller Divi Builder-sideindstillinger.

Tilpasset CSS

Brugerdefineret CSS kan også anvendes på modulet og ethvert af modulets interner. I sektionen Custom CSS finder du et tekstfelt, hvor du kan tilføje tilpassede CSS-stilark direkte til hvert element. CSS-poster i disse indstillinger er allerede pakket i typografikoder. Så indtast bare CSS-reglerne adskilt af semikolon.

Animation

Som standard animeres billeder, når du ruller gennem siden. Her kan du vælge retningen for animationen eller deaktivere den.

synlighed

Denne mulighed giver dig mulighed for at kontrollere de enheder, som dit modul vises på. Du kan vælge at deaktivere dit modul på tablets, SmartPhones eller desktops individuelt. Dette er nyttigt, hvis du vil bruge forskellige mods på forskellige enheder, eller hvis du vil forenkle mobildesignet ved at fjerne 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=”flad” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD 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”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andre Divi tutorials