Divi tutorial: Sådan bruger du Social Media-modulet

Divis modul til sociale medier giver dig mulighed for at oprette links baseret på ikoner, der peger på dine online sociale profiler, såsom Facebook, Twitter og Google+. Disse ikoner er integreret i temaet i Divis egen stil ved hjælp af dets stilfulde ikoner, hvilket gør dem at foretrække frem for at bruge tredjeparts plugins. Du kan tilføje links til flere sociale profiler i hvert modul, og du kan tilføje modulet hvor som helst på siden.

Sådan føjes et modul på sociale medier til din side

Før du kan tilføje et socialt mediemodul til din side, skal du først hoppe ind i Divi Builder. En gang Divi-tema installeret på din hjemmeside, 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 dit websted i forgrunden, hvis du er tilsluttet dit WordPress-dashboard.

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.

Find modulet for sociale medier på listen over moduler, og klik på det for at tilføje det til din side. Listen over mods er søgbar, hvilket betyder, at du også kan skrive ordet "Følg os på sociale medier" og derefter klikke på "enter" for automatisk at finde og tilføje det sociale mediemodus! 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 tilsvarende ikoner på de sociale medier til en kontaktside

Et websteds kontaktside er det perfekte sted at fremvise dine online sociale profiler. Dette giver flere muligheder for brugerne at forblive forbundet og fremme din blog eller din virksomhed. For dette eksempel vil jeg vise dig, hvordan du tilføjer sociale medieikoner, så de matcher det aktuelle design af en kontaktside.

Brug den visuelle builder til at tilføje et nyt almindeligt afsnit med en række fuld bredde på en kolonne. Indsæt et modul til sociale medier i din kolonne.

På fanen Indhold i modulindstillingerne skal du klikke på knappen "Tilføj et nyt element" for at tilføje et nyt socialt netværk til dit modul. Opdater følgende under specifikke sociale netværksindstillinger:

Indholdsindstillinger

Socialt netværk:
URL til Facebook-konto: [indtast URL til din Facebook-konto]

Design muligheder

Ikonfarve: # d94b6a (assorteret farve)

Kopier derefter dette sociale netværk for at tilføje fire andre netværk (Twitter, Google+, LinkedIn og Instagram). Siden du duplikerede netværket, er farven på det brugerdefinerede ikon overført. Så du skal bare opdatere hver netværks-URL og konto.

Nu har du sociale medieikoner, der matcher designet til kontaktsiden.

Indstillinger for sociale medier Indhold

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.

Tilføj et nyt objekt

Det er her, du tilføjer nye netværk til dit modul. Ved at klikke på "tilføj et nyt element" åbner du et helt nyt vindue med valgmuligheder, der er specifikke for dit nye netværk (under fanerne "Indhold", "Design" og "Avanceret"). Se nedenfor for individuelle indstillinger for sociale medier.

Når du har tilføjet dit første netværk, ser du en grå bjælke med din netværkstitel vist som en etiket. Den grå bjælke har også tre knapper, der giver dig mulighed for at redigere, duplikere eller slette netværket.

Link formular

Her kan du vælge formen på dine sociale netværksikoner enten i afrundet rektangel eller i cirkel.

URL åbnes

Vælg at åbne din netværks-URL i en ny fane eller i det samme vindue.

Følg knappen

Her kan du vælge, om den næste knap ved siden af ikonet skal medtages eller ej.

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.

Indstillinger for design af sociale medier

På 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 udseendet.

For dette modul består designmulighederne af et enkelt element - Tekstfarve.

Tekstfarve

Her kan du vælge, om din tekst skal være lys eller mørk. Hvis du arbejder på en mørk baggrund, skal din tekst være lys. Hvis din baggrund er lys, skal din tekst være mørk.

Avancerede indstillinger for sociale medier

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.

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 oprette brugerdefineret CSS-styling. Du kan tilføje flere klasser adskilt af et mellemrum. Disse klasser kan bruges i dit Divi-underordnede tema eller i det brugerdefinerede CSS-stilark, som du tilføjer til din side eller til dit websted ved hjælp af tema muligheder Divi eller parametre på Divi Builder-siden.

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.

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.

Individuelle indstillinger for sociale medier

Socialt netværk

Her kan du vælge det sociale netværk, du vil vise.

Konto URL

Det er her, du indtaster URL'en til dette sociale netværkslink. Hvis du vælger Facebook som dit netværk, er det her, du placerer URL'en på din Facebook-side.

Individuelle designmuligheder på sociale medier

Ikonfarve

Divi tilbyder standardfarver til hvert socialt netværk defineret som standard. Her kan du nemt ændre denne ikonfarve til hvad du vil.

Avancerede indstillinger for sociale medier

Tilpasset CSS

[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-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 = "udvidet" align = "center" font_family = "Raleway" font_weight = "700 ″ stil =" flad "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" faPL D fa-LOAD" DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Divi tutorial: Sådan bruger du Social Media-modulet

Sådan føjes et modul på sociale medier til din side