Divi: Så avslöjar du innehåll när du håller muspekaren över flikar

Vill du ha innehåll som avslöjas när man svävar över utdragbara vinkelflikar in Divi ?

Det är alltid roligt att upptäcka nya och kreativa sätt att interagera med användare med hjälp av hovringseffekter. Ett bra sätt att göra detta är att avslöja innehåll när du svävar med hjälp av utdragbara hörnflikar. Detta gör att användaren kan föra muspekaren över en flik i hörnet av en kolumn eller bild för att utöka en överlagring med en innehåll ytterligare användbarhet för användaren.

I den här handledningen kommer vi att skapa en layout Divi helt unik som kommer att avslöja innehåll vid hovring med hjälp av expanderbara vinkelflikar. Faktum är att vi kommer att visa dig hur man designar en utdragbar hörngering för alla fyra hörn av en kolumn i Divi.

Låt oss börja!

undersökningen

Här är en snabb titt på layouten för de expanderbara hörnflikarna som vi kommer att bygga tillsammans. Lägg märke till hur vackert symmetriska hovringseffekterna och innehållet är.

Skapa en ny sida med Divi Builder

Från WordPress-instrumentpanelen, gå till Sidor> Lägg till nytt för att skapa en ny sida.

Ge den en titel som är vettig för dig och klicka Använd Divi Builder

klicka sedan på Börja bygga (Bygg från grunden)

Efter det har du en tom duk för att börja designa i Divi.

Skapa layouten för utökningsbara innehållsöverlägg i Divi

Design av en utdragbar hörngering från det nedre högra läget

För att börja, lägg till en rad med två kolumner i det vanliga avsnittet.

Innan du lägger till en modul, uppdatera linjeparametrarna enligt följande:

• Använd anpassad rännbredd: JA
• Rännans bredd: 4

För detta första element som visas kommer vi att skapa en kolumnbakgrundsbild som kommer att ha en hörnflik (med hjälp av en modul blurb) längst ner till höger i kolumnen som expanderar och täcker hela kolumnen/bilden vid hovring.

Läs också vår guide om Divi: Hur man skapar ett rutnät för flytande kolumner vid hovring

Låt oss börja med att lägga till en Blurb-modul.

Lägg till Blurb-modul till kolumn 1

Inställningar för kolumn 1

När texten är på plats öppnar du radinställningarna, uppdaterar följande:

• Bakgrundsbild [infoga bild]
• Bakgrundsbildstorlek: Verklig storlek

OBS: För det här exemplet använder vi de genomskinliga bakgrundsbilderna för öl tagna från layoutpaketet «Bryggeri". De är 128 pixlar gånger 359 pixlar, vilket är anledningen till att vi använder den faktiska bildstorleken.

Kant till kolumn 1

• Rundade hörn: 10px längst ner till höger
• Kantbredd (höger och botten): 2px
• Kantfärg (höger och botten): #e94558

Anpassad CSS och overflow

På fliken Avancerat lägger du till följande anpassade CSS till huvudelementet:

height: 400px;

Dropdown-alternativ 'Synlighet' och gör följande ändringar:

• Horisontellt överflöde: Dold
• Vertikalt överflöde: Dold

Lägg till innehåll till Blurb-modulen

Vi är nu redo att börja anpassa Blurb-modulen i kolumn 1. Öppna modulinställningarna och uppdatera följande:

• Titel: Mango IPA
• Kropp:

<p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
<p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
<p>4.8% ABV / 4 IBUs</p>

• Bild: Lägg till samma bild som används för kolumnbakgrunden

Anpassning av Blurb-modul

Ge texten en bakgrundsfärg som svävar på följande sätt:

• Bakgrund (Skrivbord): transparent
• Desktop (hovra): rgba(255,255,255,0.9)

Under fliken Designa, uppdatera följande:

• Bild/ikonplacering: Höger
• Titeltypsnitt: Oswald
• Teckensnittsvikt: Halvfet
• Typsnittsstil: TT
• Textstorlek: 40px
• Brödtextfärg (skrivbord): transparent
• Brödtextfärg (svävare): #121212

• Bild/ikonbredd: 100px (dator), 64px (telefon)
• Innehållsbredd: 100 %
• Höjd: 100%
• Stoppning (Skrivbord): 15 % (överst och neder), 8 % (vänster och höger)
• Stoppning (sväva): 8 % (överst, botten, vänster och höger)

• Rundade hörn (Skrivbord): 20px uppe till vänster
• Rundade hörn (Hover): 10px uppe till vänster
• Kantbredd (överst och vänster): 4px (skrivbord), 2px (hovra)
• Kantfärg (överst och vänster): #e94558

Transformeringsalternativ (Skrivbord)

• Transformskala (X och Y): 50 %

• Transformera Översätt
  • Y-axel: 50 %
  • X-axel: 30 %

Läs också vår guide om: Divi: Hur man skapar en klibbig sidfot med "Reveal"-effekt

• Transform Ursprung: botten och höger

Transformeringsalternativ (hovra)

• Transformeringsskala (Y och X) (Hover): 100 %

• Transformera Översätt (Y och X) (Sveving): 0 %

För att vända den utvalda bilden på höger sida, lägg till följande anpassade CSS till området Blurb-innehåll :

direction: rtl

OBS: "rtl" står för "Höger till vänster", som ändrar standardordningen för innehållet (vänster till höger).

Resultat

Låt oss se slutresultatet av att vår hörnflik expanderar från den nedre högra positionen. Lägg märke till hur den expanderar för att fylla hela kolumnen när du håller muspekaren.

Design av en utdragbar hörngering från nedre vänstra positionen

Duplicera kolumn

För att skapa hörnfliken som expanderar från den nedre vänstra positionen kan vi återstarta designen genom att duplicera hela kolumnen. Öppna radinställningar och dubblera kolumn 1. Ta sedan bort den extra kolumnen så att du bara har två exakta dubbletter.

Uppdatera inställningarna för 2-kolumnen

Öppna sedan kolumn 2-inställningarna och uppdatera följande:

• Rundade hörn: 10 px längst ner till vänster
• Kantbredd (höger): 0px
• Kantbredd (vänster): 2px
• Färg: #e94558

Uppdatera parametrarna för Blurb-modulen

Uppdatera sedan Blurb-inställningarna enligt följande:

• Textjustering: höger
• Rundade hörn (Skrivbord): 20px uppe till höger
• Rundade hörn (Hover): 10px uppe till höger
• Vänster kantbredd: 0px
• Höger kantbredd: 4px (skrivbord), 2px (hovra)
• Höger kantfärg: #e94558

• Transform Translate (X-Axis) (Skrivbord): -30 %
• Transform Origin (Desktop): längst ner till vänster

Se sedan till att ta bort den anpassade CSS i Blurb-innehållsområdet.

Resultat

Här är resultatet. Lägg märke till hur den här är symmetrisk med den första och växer från den nedre vänstra positionen i kolumnen.

Design av en utdragbar hörngering från det övre högra läget

Vi är nu redo att påbörja våra sista två expanderande hörngeringsdesigner. För att få ett försprång, låt oss duplicera hela raden som innehåller texten vi redan har designat.

Uppdatera inställningarna för 1-kolumnen

Öppna sedan inställningarna för dubblettraden, öppna sedan inställningarna för kolumn 1 och uppdatera följande:

• Rundade hörn: 10px uppe till höger
• Nedre kantbredd: 0px
• Övre kantbredd: 2px
• Översta kantfärg: #e94558

Uppdatera parametrarna för Blurb-modulen

Öppna sedan Blurb-modulinställningen och uppdatera följande:

• Rundade hörn (Skrivbord): 20px längst ner till vänster
• Rundade hörn (Hover): 10px längst ner till vänster
• Övre kantbredd: 0px
• Nedre kantbredd: 4px (skrivbord), 2px (hovra)
• Nedre kantbredd: #e94558

• Transform Translate (Y-axel) (Skrivbord): -50 %
• Transform Ursprung: uppe till höger

Anpassad CSS

Just nu kan vi bara se den nedre vänstra delen av presentationsmodulen som inte visar vår titel som de andra två presentationerna i raden ovan. För att kunna visa titeln på fliken måste vi flytta om titeln längst ner till vänster i texten med anpassad CSS.

Lägg till följande anpassade CSS till området Blurb-titel :

position: absolute;
bottom: 0;
left: 15px;

Lägg sedan till följande CSS i innehållsområdet Blurb-innehåll :

direction: rtl;
height: 100%;

Design av en utdragbar hörngering från det övre vänstra läget

För vår fjärde och sista expanderande hörnflikareffekt placerar vi den i det övre vänstra hörnet för att slutföra den symmetriska designen av hela rutnätslayouten.

Uppdatera inställningarna för 2-kolumnen

Öppna inställningar för kolumn 2 under radinställningar och uppdatera följande:

• Borders Hörn: 10 px uppe till vänster
• Nedre kantbredd: 0px
• Övre kantbredd: 2px
• Översta kantfärg: #e94558

Uppdatera parametrarna för Blurb-modulen

Öppna sedan Blurb-modulens textinställningar i kolumn 2 och uppdatera följande:

• Rundade hörn (Skrivbord): 20px längst ner till höger
• Rundade hörn (Hover): 10px nedre höger
• Övre kantbredd: 0px
• Nedre kantbredd: 4px (skrivbord), 2px (hovra)
• Nedre kantfärg: #e94558

Uppdatera sedan omvandlingsalternativen:

• Transform Translate (Y-axel) (Skrivbord): -50 %
• Transform Ursprung: överst till vänster

Anpassad CSS

Lägg sedan till följande anpassade CSS till området Blurb-titel :

position: absolute;
bottom: 0%;
right: 0%;

Lägg även till följande CSS i rutan Blurb-innehåll :

height: 100%;

Avsluta designen av layouten

Avsnittets bakgrundsfärg

Lägg till en sektionsbakgrundsfärg enligt följande:

• Bakgrund: #efefef

Lägg till titel

För att skapa titeln, lägg till en rad i en kolumn i mitten av de två raderna

Lägg sedan till en textmodul.

Lägg till innehållet: "Seasonal".

Uppdatera sedan följande inställningar:

• Typsnitt: Merriweather
• Teckensnittsvikt: Fet
• Stil: TT
• Textjustering: Centrerad
• Textfärg: #999999
• Storlek: 50px (dator), 30px (surfplatta), 24px (telefon)
• Bokstavsavstånd: 1em

• Utfyllnad (vänster): 50px (dator), 30px (surfplatta), 24px (telefon)

Slutresultat

Kolla in slutresultatet av layouten med expanderande hörnflikar.

Och här är designen på mobilen.

Ladda ner DIVI nu!!!

Slutsats

Hörnflikarna som visas i denna handledning kommer definitivt att fungera för alla typer av innehåll du vill visa på din webbplats Divi. 

Du behöver inte heller använda alla fyra hörnen. Du kan till exempel skapa en rutnätslayout för bilder genom att bara använda flikarna i det övre högra hörnet för att visa innehåll när du håller muspekaren.

Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.

Du kan 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.

.