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.
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.
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.
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)
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.
Nå har du sosiale medieikoner som samsvarer med utformingen av kontaktsiden.
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.
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.
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.
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
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
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
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
- 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