Divi Person-modulen är det bästa sättet att skapa ett personligt profilblock. Detta är ett utmärkt tillägg att använda på About Me-sidor eller de som har teammedlemmar där du vill skapa en bio för enskilda personer. Denna modul kombinerade text, bilder och sociala medier länkar till en sammanhängande modul.
Så här konfigurerar du Divi Person-modulen
Innan du kan lägga till en Divi Person-modul 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 bläddrar i din webbplats i förgrunden om du är inloggad på din WordPress-instrumentpanel.
När du har angett Visual Builder kan du klicka på den grå plusknappen 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. Vi har bra handledning om hur du använder elementen i linjer och sektioner av Divi.
Leta upp personmodulen i modullistan och klicka på den för att lägga till den på din sida. Listan över moduler är sökbar, vilket innebär att du också kan skriva ordet "person" och sedan klicka på Enter för att automatiskt hitta och lägga till personmodulen! När modulen har lagts till hälsas du av listan över modulalternativ. Dessa alternativ är uppdelade i tre huvudgrupper: Innehåll , Conception et advanced .
Exempel på användningsfall: Lägga till avsnittet "Vårt team" på en Om oss-sida
Om oss-sidan är ett bra ställe att presentera dina teammedlemmar med hjälp av Person-modulen. Det lägger till en personlig touch och kan hjälpa till att bygga förtroende hos nya kunder.
I det här exemplet visar jag dig hur du använder personmodulen för att lägga till avsnittet "Vårt team" på en sida om ett litet företag. Jag använder en tre personers, tre kolumn layout som håller avsnittet mer kompakt och matchar den övergripande designen på sidan.
Använd Visual Builder för att infoga ett nytt standardavsnitt med en rad med tre kolumner (1/3 1/3 1/3). Lägg sedan till en personmodul i den första kolumnen.
Uppdatera inställningarna för Personmodul enligt följande:
Innehållsalternativ
Namn: [Ange personens namn]
Position: [Ange personens anknytning]
Ange webbadresser för sociala medieprofiler
Beskrivning: [Skriv in en kort biografi]
Bild: [Ta en bild på 600 x 600]
Designalternativ
Färgikon: # fcbf00
Höverikonfärg: # e0a831
Rubrik teckensnitt: Roboto, fetstil, leverage in-
Rubrikstorlek: 30 pixlar
Rubriktextfärg: # 505050
Avstånd mellan brevhuvud: 1 pixel
Rubrikradhöjd: 1.5 em
Kroppstypstorlek: 18 pixlar
Kroppslinjens storlek: 1.4em
Anpassad stoppning: 15px upp, 15px höger, 15px nedåt, 15px vänster
Avancerade alternativ (anpassad CSS)
Huvudelement:
-webkit-box-skugga: 0 1px 5px rgba (0, 0, 0, 0.2)
-moz-box-skugga: 0 1px 5px rgba (0, 0, 0, 0,2);
boxskugga: 0 1px 5px rgba (0, 0, 0, 0,2);
Spara inställningar
Duplicera nu personmodulen som du just skapat två gånger och dra de duplicerade modulerna till den andra och tredje kolumnen i raden. Eftersom designen har överförts för var och en av de duplicerade ”Person” -modulerna är allt du behöver göra att uppdatera innehållet med bilden, titeln, positionen, webbadresserna till sociala medier och beskrivningen. av personen.
Det är allt!
Personinnehållsalternativ
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.
Förnamn
Detta är namnet på personen du introducerar. Namnet visas högst upp i modulen i större text.
Placera
Positionen visas under namnet i mindre text. Detta används ofta för att hänvisa till en persons professionella position inom ett företagsteam. Till exempel Nick Roach, "Grafisk formgivare".
Facebook-profiladress
Ange webbadressen på din Facebook-sida eller lämna den tom för att inaktivera Facebook-ikonen.
Twitter-profiladressen
Ange webbadressen på din Twitter-sida eller lämna den tom för att stänga av Twitter-ikonen.
Google + -profilens URL
Ange webbadressen på din Google+ sida eller låt den vara tom för att stänga av Google+-ikonen.
LinkedIn-profiladressen
Ange webbadressen på din LinkedIn-sida eller lämna den tom för att stänga av LinkedIn-ikonen.
Beskrivning
Ange innehållet i huvudtexten för din modul här.
Bildadress
Här kan du ladda ner ett foto som du kan använda i biografen.
Bakgrundsfärg
Definiera en anpassad bakgrundsfärg för din modul eller lämna tom för att använda standardfärgen.
Bakgrundsbild
Om den är inställd kommer den här bilden att användas som bakgrund för denna modul. För att ta bort en bakgrundsbild tar du bara bort webbadressen från inställningsfältet. Bakgrundsbilderna visas ovanpå bakgrundsfärgerna, vilket innebär att bakgrundsfärgen inte kommer att synas när en bakgrundsbild appliceras.
Admin-etikett
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.
Designalternativ för Personmodulen
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.
Ikonfärg
Det här alternativet styr färgen på ikoner för sociala medier som visas i varje persons profil. Som standard är dessa ikoner grå, köp kan du ändra denna färg med den här inställningen.
Ikonfärg på svävaren
Du kan också ändra svävarfärgen för ikoner för sociala medier. Välj önskad färg med hjälp av färgväljaren i den här inställningen.
Textfärg
Här kan du välja värdet på din text. Om du arbetar med en mörk bakgrund bör din text vara på. Om du arbetar med en ljus bakgrund bör din text vara mörk.
Rubrik teckensnitt
Du kan ändra typsnittet i rubriktexten genom att välja önskat typsnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi teckensnittet Open Sans för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrukna alternativ.
Rubrikstorlek
Här kan du justera storleken på rubriktexten. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller direkt ange värdet för önskad textstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.
Rubriktextfärg
Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på rubriktexten väljer du önskad färg från färgväljaren med det här alternativet.
Rubrikbokstavsavstånd
Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i rubriktexten, använd avståndsreglaget för att justera utrymmet eller ange önskad avståndsstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storlek för att ändra enhetstyp.
Rubrikrad Höjd
Radhöjden påverkar utrymmet mellan varje rad i rubriktexten. Om du vill öka utrymmet mellan varje rad använder du skjutreglaget för att justera mellanslag eller anger önskad avståndsstorlek i inmatningsfält till höger om markören. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storlek för att ändra enhetstyp.
Kroppsfont
Du kan ändra ditt kroppsteckensnitt genom att välja önskat typsnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi Open Sans-teckensnittet för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrukna alternativ.
Kroppstypstorlek
Här kan du justera din kroppsstorlek. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller direkt ange värdet för önskad textstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra dess enhetstyp.
Kroppstextfärg
Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på din text väljer du önskad färg från färgväljaren med det här alternativet.
Spacing av kropps bokstäver
Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din text, använd skjutreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om skjutreglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra dess enhetstyp.
Höjd på kroppslinjen
Radhöjd påverkar utrymmet mellan varje textrad i din kropp Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om markören. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra dess enhetstyp.
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.
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.
Anpassad stoppning
Infill är utrymmet som läggs till i din modul, mellan modulens kant och dess interna element. Du kan lägga till anpassade utfyllnadsvä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 personmodulen
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-klasser som ska användas för denna modul. 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-barntema eller i den anpassade CSS-stilmall som du lägger till på din sida eller webbplats. webbplats med Divi-temaalternativ eller Divi Builder sidinställningar.
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
Som standard animeras bilder när du rullar på sidan. Här kan du välja animationens riktning eller inaktivera den.
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, smarttelefoner 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 ta bort vissa element från sidan.
[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=”platt” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LADDA 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”]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
Hej!
Tack för dessa mycket användbara artiklar.
Precis som webbadresser till Facebook, Twitter, Google+ eller LinkedIn, vet du om det är möjligt att lägga till en URL till din Instagram-profil tack? Tack 🙂
Salut!
När jag skapar ett projekt eller inlägg och använder Person-podden, varför försvinner Positionsfältet när jag visar projekt eller inlägg med bloggen eller den filtrerbara bloggpoden?
Hur gör man personfältet synligt i en bloggrutevy?
Merci!
God kväll och tack för väntetiden.
Vanligtvis kör sökmoduler inte kortkoder. Därför genererar personmodulen (som alla andra moduler) en kortkod som endast kan återges genom att förhandsgranska artikeln eller sidan och inte från en modul som erbjuder en förhandsgranskning av artikeln eller sidan.