Vill du visa ikoner för sociala medier när du håller muspekaren över foton i Divi ?
När du skapar din Om-sida kan du överväga att lägga till ditt företags olika teammedlemmar till en showcase.
När du startar denna designprocess kommer du att märka att tre saker inte kan saknas från början: en bild, ett namn och en position. Men om du vill visa upp dina teammedlemmar ännu mer kan du också överväga att lägga till deras sociala medier-länkar till designen.
Självklart kan du gå på gammaldags sätt och lägga till en 'Följ oss på sociala medier'-modul under personens namn och befattning. Men du kan också välja att lägga till en liten bit av interaktion genom att visa dessa ikoner så snart någon svävar över en av personens bilder.
I dagens handledning visar vi dig exakt hur du gör detta med hjälp av Divi.
Låt oss gå.
undersökningen
Innan vi dyker in i handledningen, låt oss ta en snabb titt på resultatet på olika skärmstorlekar.
Resultat på laptop
Resultat på mobilen
Låt oss börja insikten med Divi!
Lägg till avsnitt 1
Bakgrundsfärg
Lägg till ett nytt avsnitt på sidan du arbetar på.
Öppna avsnittsinställningar och ändra bakgrundsfärgen.
- Bakgrund: #0f0f0f
avstånd
Byt till flik Designa rullgardinsmenyn Förband och ändra sedan avståndsinställningarna.
- Utfyllnad (topp och botten): 100px
Lägg till en ny rad
Strukturen av kolonnen
Fortsätt genom att lägga till en ny rad med följande kolumnstruktur:
Lägg till modul "Text" #1 i kolumnen
Lägg till en titel i storlek H1
Lägg till en första modul "Text" till radkolumnen
Lägg till några innehåll storlek H1 (Rubrik 1) efter eget val.
H1 textinställningar
Byt till flik Designa, dra ned alternativet Rubrik Text och ändra H1-textinställningarna därefter:
- Rubrik Teckensnitt: Alata
- Rubrik Textfärg: #ffffff
- Textstorlek:
- Desktop: 50px
- Surfplatta: 45px
- Telefon: 35px
- Kurslinjehöjd: 1,2 em
Lägg till en "Divider"-modul i kolumnen
synlighet
Därefter kommer vi att lägga till en "Divider"-modul. Se till att alternativet "Visa avdelare" är aktiverat.
- Visa avdelare: JA
Linje
Byt till flik Designa, dra ned alternativet linje och ändra linjefärgen.
- Linjefärg: #ffffff
dimensionering
Dropdown-alternativ Storlek och ändra storleksinställningarna också.
- Divider Vikt: 2px
- Max bredd: 100px
- Höjd: 2px
Lägg till modul "Text" #2 i kolumnen
Lägg till beskrivningsinnehåll
Nästa och sista modul vi behöver i den här raden är en annan "Text"-modul med en innehåll beskrivning av ditt val.
Textinställningar
Byt till flik Designa, dra ned alternativet text och ändra textinställningarna enligt följande:
- Texttypsnitt: Alata
- Textfärg: #7c7c7c
- Storlek: 17px
- Textradshöjd: 1,9 em
avstånd
Ta också bort standardbottenmarginalen.
- Marginal (botten): 0px
Lägg till avsnitt 2
Lutningbakgrund
Lägg till ytterligare ett avsnitt precis under det föregående och använd en gradientbakgrund för den här.
- Vänster färg: #0f0f0f
- Höger färg: #000000
- Vänsterposition: 10%
- Höger position: 90%
avstånd
Byt till flik Designa, dra ned alternativet Förband och ändra sedan avståndsinställningarna.
- Utfyllnad (överst): 0px
- Utfyllnad (botten): 200px
Lägg till en ny rad
Strukturen av kolonnen
Fortsätt genom att lägga till en ny rad i sektionen med följande kolumnstruktur:
dimensionering
Öppna linjeinställningar och ändra storleksinställningarna enligt följande:
- Använd anpassad rännbredd: JA
- Rännans bredd: 2px
Lägg till modulen "Följ sociala medier" i kolumn 1
Lägg till de sociala nätverk du väljer
Den första modulen vi behöver i vår rad är modulen "Följ sociala medier" i kolumn 1. Lägg till de sociala nätverk du väljer.
Ta bort färg från varje socialt nätverk individuellt
Öppna varje socialt nätverk individuellt
Ta bort bakgrundsfärgen.
Lägg till en länk till varje socialt nätverk individuellt
Lägg också till en länk som motsvarar varje socialt nätverk.
Standard bakgrundsfärg
Gå sedan tillbaka till de allmänna modulinställningarna och använd följande bakgrundsfärg:
- Bakgrund: rgba(0,0,0,0)
Bakgrundsfärg på svävaren
Ändra bakgrundsfärg när du svävar.
- Bakgrund (hovra): #494949
Bakgrundsbild
Ladda sedan upp en bakgrundsbild.
- Bakgrundsbildstorlek : Omslag
- Bakgrundsbildsblandning: Multiplicera
uppriktning
Byt till flik Designa och ändra inriktningen.
- Justeringsmodul: Center
icon
Ändra även ikonens färg.
- Ikonfärg: rgba(0,0,0,0)
avstånd
Gå sedan till avståndsinställningarna (Förband) och tillämpa följande värden:
- Marginal (botten): 0px
- Utfyllnad (överst):
- Desktop: 250px
- Surfplatta: 450px
- Telefon: 200px
- Utfyllnad (botten): 20px
gräns
Vi ändrar också gränsinställningarna.
- Rundade hörn: 100px
- Kantbredd: 2px
- Kantfärg: rgba(255,255,255,0)
Gräns vid svävning
Använd en annan kantfärg när du håller muspekaren.
- Kantfärg (Hover): #ffffff
CSS klass
Gå sedan till fliken Advanced Open water och tillämpa en anpassad CSS-klass.
- CSS-klass: team-socials
Anpassad CSS (före)
Och slutför modulinställningarna genom att aktivera svävningsinställningen på elementet "Innan" och genom att kopiera och klistra in följande rader med CSS-kod:
content: "Restons connectés!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;
Lägg till en "Person"-modul i kolumn 1
Lägg till beskrivningsinnehåll
Nästa och sista modul vi behöver i kolumn 1 är en "Person"-modul. Lägg till några innehåll beskrivning av ditt val.
Textinställningar
Byt till flik Designa och ändra textinställningarna enligt följande:
- Textjustering: Center
- Textfärg: Ljus
Titeltextinställningar
Anpassa sedan titeltexten.
- Titeltypsnitt : Alata
- Titel Text Storlek på titeln:
- Desktop: 27px
- Surfplatta: 25px
- Telefon: 22px
Textinställningar för arbetsbeskrivning
Redigera sedan textinställningarna för jobbbeskrivningen.
- Position Font: Alata
- Positionstextstorlek:
- Desktop: 17px
- Surfplatta och telefon: 15px
avstånd
Ändra avståndsinställningarna enligt följande:
- Utfyllnad (topp och botten): 40px
gräns
Och slutför modulinställningarna genom att tillämpa följande kantinställningar:
- Kantbredd: 1px
- Kantfärg: #ffffff
Ta bort återstående kolumner från raden
När du har slutfört kolumn 1-modulerna kan du ta bort de återstående två kolumnerna från raden.
Klona kolumn två gånger
Återanvänd kolumn 1 genom att klona den två gånger.
Klona hela raden
Klona sedan hela raden så många gånger som behövs.
Redigera allt duplicerat innehåll
Lägg till kodmodulen under den sista textmodulen på rad 1 i avsnitt 1
Nu, för att se till att varje socialt nätverk ändrar sin stil så snart hela modulen hålls över, behöver vi några rader med CSS-kod. Vi kommer att placera denna kod i en ny kodmodul som vi lägger till i det första avsnittet, precis under beskrivningstexten
Lägg till CSS-kod
Kopiera-klistra in följande rader med CSS-kod och du är klar:
<style>
.team-socials:hover li a.icon:before {
color: black !important;
}
.team-socials:hover li a.icon {
background-color: white;
}
</style>
undersökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.
office
Ladda ner DIVI nu!!!
Mobil
Ladda ner DIVI nu!!!
Slutsats
I den här artikeln har vi visat dig hur du blir kreativ genom att presentera dina teammedlemmar.
Specifikt har vi visat dig hur du visar ikoner för sociala medier när du håller muspekaren över en av en gruppmedlems bilder. Resultatet är en subtil men ändå rolig interaktion som du kan använda för alla typer av webbplats som du skapar.
Om du behöver fler element för att slutföra dina webbplatsskapande projekt, bläddra också i vår guide på WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Men under tiden, dela den här artikeln på dina olika sociala nätverk.
