Divis sosiale medier-modul lar deg lage lenker basert på ikoner som peker på dine sosiale profiler på nettet, for eksempel Facebook, Twitter og Google+. Disse ikonene er integrert i temaet, i Divis egen stil ved hjelp av de stilige ikonene, noe som gjør dem å foretrekke fremfor å bruke tredjeparts plugins. Du kan legge til lenker til flere sosiale profiler i hver modul, og du kan legge til modulen hvor som helst på siden.

Slik legger du til en modul på sosiale medier på siden din

Før du kan legge til en sosial mediemodul 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 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.

følg oss på sosiale nettverk.png

Finn den sosiale mediemodulen 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 "Følg oss på sosiale medier" og deretter klikke "enter" for automatisk å finne og legge til sosiale medier 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 tilsvarende sosiale medier-ikoner på en kontaktside

Et nettsteds kontaktside er det perfekte stedet for å vise frem dine sosiale profiler på nettet. Dette gir flere muligheter for brukere til å holde kontakten og fremme bloggen din eller din bedrift. For dette eksemplet skal jeg vise deg hvordan du legger til sosiale medier-ikoner for å matche gjeldende utforming av en kontaktside.

legg til sporingsknapper på en kontaktside divi wordpress.jpg

Bruk den visuelle byggeren til å legge til en ny vanlig seksjon med en rad full bredde på en kolonne. Sett inn en modul for sosiale medier i kolonnen din.

I Innhold-fanen i modulinnstillingene klikker du på knappen "Legg til et nytt element" for å legge til et nytt sosialt nettverk i modulen din. Oppdater følgende under spesifikke sosiale nettverksinnstillinger:

Innholdsalternativer

Sosialt nettverk:
URL til Facebook-konto: [skriv inn din URL til Facebook-konto]

Designalternativer

Ikonfarge: # d94b6a (assortert farge)

legg til en matchende color.jpg

Dupliser deretter dette sosiale nettverket for å legge til fire flere nettverk (Twitter, Google+, LinkedIn og Instagram). Siden du dupliserte nettverket, har fargen på det egendefinerte ikonet blitt overført. Så du trenger bare å oppdatere hver nettadresse og konto.

dupliserte sosiale nettverk divi.jpg

Nå har du sosiale medieikoner som samsvarer med utformingen av kontaktsiden.

sosialt nettverk display.png

Alternativer for sosiale medier

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.

innhold for divi følger oss på sosiale nettverk module.png

Legg til et nytt objekt

Det er her du legger til nye nettverk i modulen din. Ved å klikke på "legg til et nytt element", vil du åpne et helt nytt vindu med alternativer som er spesifikke for det nye nettverket ditt (under fanene "Innhold", "Design" og "Avansert"). Se nedenfor for individuelle nettverksinnstillinger for sosiale medier.

Etter at du har lagt til ditt første nettverk, vil du se en grå linje vises med nettverkstittelen din som en etikett. Den grå linjen har også tre knapper som lar deg redigere, duplisere eller slette nettverket.

Link skjema

Her kan du velge formen på dine sosiale nettverksikoner enten i avrundet rektangel eller i sirkel.

URL åpnes

Velg å åpne nettverksadressen din i en ny fane eller i samme vindu.

Følg knappen

Her kan du velge om du vil ta med neste knapp ved siden av ikonet eller ikke.

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.

Alternativer for sosiale medier

I kategorien Design finner du alle alternativene for modulstyling, 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 utseendet.

endre utseendet divi.png

For denne modulen består designalternativene av et enkelt element - Tekstfarge.

Tekstfarge

Her kan du velge om teksten skal være lys eller mørk. Hvis du jobber med en mørk bakgrunn, bør teksten være lys. Hvis bakgrunnen din er lys, bør teksten være mørk.

Avanserte alternativer for sosiale medier

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.

avanserte innstillinger divi.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 din eller på nettstedet ditt ved hjelp av temalternativer Divi eller parametere for 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.

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.

Individuelle alternativer for sosiale medier

optin innhold divi.png

Sosialt nettverk

Her kan du velge det sosiale nettverket du vil vise.

Konto URL

Det er her du skriver inn URL-en for denne koblingen til det sosiale nettverket. Hvis du valgte Facebook som nettverk, vil du plassere URL-adressen til Facebook-siden din.

Individuelle designalternativer for sosiale medier

individuell stil option.png

Ikonfarge

Divi tilbyr standardfarger for hvert sosiale nettverk som er definert som standard. Her kan du enkelt endre denne ikonfargen til hva du vil.

Avanserte alternativer for sosiale medier

forhåndsalternativmodul følger oss divi.png

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.

[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-nedlasting"] LAST NED DIVI-TEMAET [/ vcex_button] [/ width»_vc_column] » 1/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_download "icon_right =" faOW D fa-LOAD "] DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andre divisjoner