Vill du göra dina sociala medieikoner klibbiga med Divi?
Med Divis inbyggda "klibbiga" alternativ kan du enkelt designa en klibbig "Social Media Follow"-modul som kommer att hålla dessa sociala medieikoner framme när användaren rullar ner på sidan.
Dessutom, genom att lägga till anpassad stil till modulen i det klibbiga tillståndet, kan vi skapa unika designövergångar när vi byter till det klibbiga tillståndet medan vi rullar.
Så om du letar efter full kontroll över din knappdesign på sociala medier, är den här handledningen för dig!
undersökningen
Här är en kort översikt över resultatet som vi kommer att få i denna handledning.
Skapa en ny sida med "Divi Builder"
Från WordPress-instrumentpanelen, gå till "Sidor > Lägg till nytt"
Ge den en titel som är vettig för dig och klicka sedan på "Använd DiviBuilder"
För den här handledningen kommer vi att använda en fördefinierad layout. För att göra detta, klicka på "Bläddra i layouter"
Hitta och välj layout "Mode designer"
Välj layout "Landning" Klicka sedan på "Använd den här layouten"
Design av modulen "Social Media Follow" i Divi
Skapandet av sektionen
Lägg till en ny vanlig sektion i layouten.
Flytta sedan det nya avsnittet till toppen av sidan (eller var du vill lägga till dina sociala medier följ länkar).
Öppna avsnittsinställningarna och uppdatera bakgrundsfärgen så att den matchar layouten enligt följande:
- Bakgrundsfärg: #fff9f2
Under fliken Designaexpandera alternativet Avstånd och ändra följande parametrar:
- Utfyllnad (topp och botten): 10px
Skapandet av linjen
Lägg till en rad i en kolumn inuti avsnittet.
Öppna linjeinställningarna, dra ned alternativet Avstånd och ändra inställningarna enligt följande:
- Använd anpassad rännbredd: JA
- Rännans bredd: 1
- Bredd: 100 %
- Max bredd: 100 %
Fortsätt genom att scrolla nedåt i alternativet Förband
- Utfyllnad (topp och botten): 0px
Skapande av den klibbiga "Social Media Follow"-modulen
När sektionen och linjen är på plats, lägg till en ny modul "Följ sociala medier" vid linjen.
Uppdatering av modulinställningar
Öppna inställningarna för modulen "Följ sociala medier".
Det första vi behöver göra är att lägga till en klibbig position till modulen.
Under fliken Advanced Open water, dra ned alternativet Ruleffekter och uppdatera följande:
- Sticky Position: Håll dig till toppen
När positionen är i det klibbiga tillståndet kommer du att kunna rikta in stilen på modulen i det klibbiga tillståndet (ungefär som du kan för hovratillståndet). Detta kan göras genom att hålla muspekaren över ett alternativ och klicka på nålikonen.
Under fliken Designa, uppdatera följande:
- Justeringsmodul: Center
- Ikonfärg: #000000 (Skrivbord), #ffffff (Hover), #ffffff (Sticky)
- Bredd: 100 %
- Max bredd: 100 %
- Utfyllnad: 20px (överst), 12px (botten), 10px (vänster och höger)
Inställningar för sociala medier
När modulinställningarna är klara kan vi nu rikta vår uppmärksamhet mot att styla de individuella sociala medieikonerna.
För att göra detta kommer vi först att anpassa en social nätverksikon. Sedan kommer vi att duplicera det sociala nätverket för att skapa de andra.
Du bör redan ha två sociala nätverk under fliken innehåll som standard. Ta bort en och klicka för att redigera den återstående.
Väl i de sociala nätverksinställningarna väljer du ett socialt nätverk och uppdaterar bakgrundsfärgerna för skrivbord, hovring och klibbiga tillstånd.
- Socialt nätverk : TikTok (eller vad du vill)
- Bakgrund: transparent (Skrivbord), #fe2c55 (Hover), #000000 (Sticky)
TRICK: Bakgrundsfärgen ändras automatiskt för att matcha varumärket för sociala medier. Du kan kopiera den här färgen och lägga till den som bakgrundsfärg för svävarstatus för ikonen. Detta kommer att visa det sociala nätverkets standardbakgrundsfärg när du håller muspekaren över ikonen.
Du kan nu växla mellan flikarna för att se bakgrundsfärgen för alla tre tillstånden (skrivbord, hovra och sticky).
Låt oss sedan ge ikonen en snygg oval form och en kant för att matcha layouten bättre. Under fliken Designa, uppdatera följande:
- Rundade hörn: 50 %
- Kantbredd: 1px
- Kantfärg: #000000 (Skrivbord), Transparent (Hover)
För närvarande har ikonen en cirkelform. För att få en mer oval form ändrar vi avståndsinställningarna enligt följande:
- Marginal (vänster och höger): 15px (Skrivbord), 0px (Sticky), 0px (telefon)
- Utfyllnad (vänster och höger): 16px (dator), 14px (surfplatta), 0px (telefon)
Duplicera socialt nätverk
Nu när vi har designat det första sociala nätverket kan vi duplicera ikonen för att skapa andra.
För att göra detta, öppna modulinställningarna Media SocialFollow och klicka på dubblettikonen. För det här exemplet, låt oss skapa 4 till.
Nu behöver vi bara uppdatera vart och ett av de nya sociala nätverken. Eftersom detta kommer att ändra bakgrundsfärgen måste du också uppdatera bakgrundsfärgen för varje.
För att göra detta, öppna inställningarna för det andra sociala nätverket och uppdatera följande:
- Socialt nätverk: Facebook
- Bakgrund: transparent (Skrivbord), #3b5998 (Hover)
Fortsätt med samma process för att uppdatera resten av de sociala nätverken.
Slutresultat
Låt oss nu se resultatet som erhållits på olika skärmstorlekar.
Ladda ner DIVI nu!!!
Ladda ner DIVI nu!!!
Slutsats
Knappar för sociala medier är nästan alltid en nyckelfunktion på en webbplats. De är ett av de primära sätten att koppla sociala mediekanaler till en webbplats. Det är därför modulen "Följ sociala medier" of Divi innehåller alla nätverksikoner och designalternativ du behöver för att skapa den perfekta lösningen för din webbplats.
Vi hoppas att denna handledning kommer att vara användbar för dig i dina nästa Divi-projekt. Om du vill veta mer om Divi, tveka inte att besöka vår katalog med Divi tutorials. Du kan också konsultera Hur man skapar bloggsidan med Divi Blog-modulen
Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarfältet nedan.
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden, dela den här artikeln på dina olika sociala nätverk.
.
