Med Divis Social Media-modul kan du skapa länkar baserat på ikoner som pekar på dina sociala profiler online, som Facebook, Twitter och Google+. Dessa ikoner är integrerade i temat, i Divis egen stil med dess snygga ikoner, vilket gör dem att föredra framför att använda plugins från tredje part. Du kan lägga till länkar till flera sociala profiler i varje modul och du kan lägga till modulen var som helst på sidan.
Så lägger du till en modul för sociala medier på din sida
Innan du kan lägga till en social mediamodul 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 surfar på din webbplats i förgrunden om du är ansluten till 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.
Leta upp den sociala mediamodulen i listan över moduler och klicka på den för att lägga till den på din sida. Listan med mods är sökbar, vilket innebär att du också kan skriva in ordet "Följ oss på sociala medier" och klicka sedan på "enter" för att automatiskt hitta och lägga till sociala medier mod! 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 motsvarande ikoner för sociala medier på en kontaktsida
En webbplatss kontaktsida är det perfekta stället att visa upp dina sociala profiler online. Detta ger fler möjligheter för användare att hålla kontakten och främja din blogg eller ditt företag. För det här exemplet ska jag visa dig hur du lägger till ikoner för sociala medier för att matcha den aktuella designen på en kontaktsida.
Lägg till ett nytt vanligt avsnitt med den visuella byggaren med en rad full bredd på en kolumn. Infoga en modul för sociala medier i din kolumn.
På fliken Innehåll i modulinställningarna klickar du på knappen "Lägg till ett nytt element" för att lägga till ett nytt socialt nätverk i din modul. Uppdatera följande under specifika sociala nätverksinställningar:
Innehållsalternativ
Socialt nätverk:
URL till Facebook-konto: [ange URL till ditt Facebook-konto]
Designalternativ
Ikonfärg: # d94b6a (blandad färg)
Kopiera sedan detta sociala nätverk för att lägga till ytterligare fyra nätverk (Twitter, Google+, LinkedIn och Instagram). Sedan du duplicerade nätverket har den anpassade ikonfärgen överförts. Så du behöver bara uppdatera varje nätverks-URL och -konto.
Nu har du ikoner för sociala medier som matchar designen på kontaktsidan.
Alternativ för sociala medier
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.
Lägg till ett nytt objekt
Det är här du lägger till nya nätverk i din modul. Genom att klicka på "lägg till ett nytt element" öppnar du ett helt nytt fönster med alternativ som är specifika för ditt nya nätverk (under flikarna "Innehåll", "Design" och "Avancerat"). Se nedan för individuella nätverksinställningar för sociala medier.
När du har lagt till ditt första nätverk ser du en grå stapel med din nätverksrubrik visas som en etikett. Det grå fältet har också tre knappar som låter dig redigera, duplicera eller ta bort nätverket.
Länkform
Här kan du välja formen på dina sociala nätverksikoner antingen i rundad rektangel eller i cirkel.
Url öppnas
Välj att öppna din nätverks-URL i en ny flik eller i samma fönster.
Följ knappen
Här kan du välja om du vill inkludera nästa knapp bredvid ikonen.
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.
Alternativ för sociala medier design
På fliken Design hittar du alla modulstylingsalternativ, 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 utseendet.
För den här modulen består designalternativen av ett enda element - Textfärg.
Textfärg
Här kan du välja om din text ska vara ljus eller mörk. Om du arbetar med en mörk bakgrund bör din text vara ljus. Om din bakgrund är ljus bör din text vara mörk.
Avancerade alternativ för sociala medier
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-klasserna som ska användas för den här modulen. 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-underordnade tema eller i det anpassade CSS-formatmallen som du lägger till på din sida eller webbplats med hjälp av temalternativ Divi eller parametrar på Divi Builder-sidan.
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.
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, smartphones 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 eliminera vissa element från sidan.
Individuella alternativ för sociala medier
Socialt nätverk
Här kan du välja det sociala nätverk du vill visa.
Kontoadress
Det är här du anger webbadressen för denna sociala nätverkslänk. Om du väljer Facebook som ditt nätverk, är det här du skulle placera webbadressen till din Facebook-sida.
Individuella alternativ för design av sociala medier
Ikonfärg
Divi erbjuder standardfärger för varje socialt nätverk som definierats som standard. Här kan du enkelt ändra denna ikonfärg till vad du vill.
Avancerade alternativ för sociala medier
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.
[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 NER DIVI TEMA [/ vcex_button] [/ width»_vc_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "tom" layout = "expanderad" align = "center" font_family = "Raleway" font_weight = "700 ″ stil =" platt "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" EMPL D fa-LOAD ] 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