Divi: Hur man skapar en kompakt rekommendationsreglage för en rubrik

Vill du infoga en kompakt rekommendationsreglage för en Divi-huvud?

Att lägga till rekommendationer på din webbplats är ett effektivt sätt att bygga upp trovärdighet för ditt företag (eller ditt varumärke) och bygga upp förtroende hos användarna. besökare. 

En skjutreglage för vittnesmål är ett praktiskt verktyg för att visa upp rekommendationer på ett ställe. Med det i åtanke är det vettigt att lägga till en kompakt rekommendationsreglage i din rubrik så att dessa vittnesmål är en av de första sakerna som användaren ser när de besöker din webbplats.

I den här handledningen kommer vi att visa dig hur du skapar en kompakt rekommendationsreglage för att visa upp korta vittnesmål i rubriken på din webbplats. 

För att göra detta kommer vi att modifiera Divi Slider Module på ett roligt och unikt sätt.

Låt oss börja!

Men innan du kan upptäcka vår guide på Divi, det bästa och enklaste att använda WordPress-tema i världen

undersökningen

Här är den kompakta testimonialsreglaget som vi kommer att bygga med hjälp av Divis Slider-modul.

Och här är samma rekommendationsreglage som lagts till i en global rubrik.

Och så här ser det ut på mobilen.

Skapa en ny sida med Divi Builder

För att komma igång måste du göra följande:

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.

Hur man skapar ett kompakt vittnesbördsreglage i Divi

Lägg till ny rad- och skjutmodul

För att komma igång lägger du till en rad med en kolumn i avsnittet.

Lägg sedan till en Slider-modul till raden.

Redigera bild

Ta bort den andra standardbilden under fliken under reglageinställningar Innehåll, klicka sedan för att ändra inställningarna för den återstående bilden.

Bildinnehåll

Under fliken Innehåll från bildinställningarna uppdaterar du följande:

• Titel: "Donec solicitudin molestie malesuada. Vivamus suscipit tortor eget.
• Knapp: Läs allt
• Kropp: — Tatiana Gagelman

När du är klar sparar du bildinställningarna.

Läs också: Divi: Hur man använder inställningar för bakgrundsmask och alternativ för mönsteromvandling

Uppdatera skjutreglageinställningar

Duplicera skjut och dölj kontroller

Efter att ha uppdaterat den första bilden med innehåll, duplicera den här bilden för att skapa en eller flera ytterligare bilder.

Sedan under alternativgruppen Elements, dölj skjutreglagen genom att uppdatera följande:

• Visa kontroll: NEJ

Uppdatera bakgrunden för alla bilder

Därefter lägger vi till en bakgrund som kommer att användas för alla bilder.

För att lägga till bakgrunden, uppdatera följande:

• Bakgrundsgradient:
  • Gradientstopp 0%: #000000
  • Gradienten stannar 100 %: #000000

• Bakgrundsbild:
  • Storlek: Passform
  • Position: Mitten Vänster
  • Blandning: Ljusstyrka

Reglageinställningar

Under fliken Designa, uppdatera följande:

lock

• Använd bakgrundsöverlägg: JA
• Bakgrundsöverläggsfärg: rgba(0,0,0,0.7)

Titeltext

• Titel:
  • Rubriknivå: H4
  • Typsnitt: Josefin Sans
  • Teckensnittsvikt: Medium
  • Textjustering: vänster
  • Textstorlek: 16px (dator och surfplatta), 14px (telefon)
  • Linjehöjd: 1,5 em

Textens kropp

• Kropp:
  • Typsnitt: Josefin Sans
  • Textjustering: vänster
  • Textfärg: #aaaaaa
  • Bokstavsavstånd: 0,05 em

knapp

• Använd anpassad storlek för knapp: JA
• Knapp :
  • Textstorlek: 1em
  • Textfärg: Standard (skrivbord), #000 (hovra)
  • Bakgrundsfärg (Skrivbord): rgba(255,255,255,0.19)
  • Bakgrundsfärg (Hover): #ffffff
  • Kantbredd: 0 pixlar
  • Bokstavsavstånd: 0,05 em
  • Typsnitt: Josefin Sans
  • Marginal: 0px (överst och botten)
  • Utfyllnad: 0px (topp och botten), 0,6em (vänster och höger)

Automatisk fyllning och animering

Uppdatera sedan skjutreglagets avstånd så att det blir kompakt och ställ in önskad hastighet för automatisk animering.

• Marginal: 0px (överst och botten)
• Vaddering: 1em (topp och botten), 5% (vänster och höger)
• Automatisk animering: PÅ
• Automatisk animationshastighet: 3500

Anpassad CSS

Under fliken Advanced Open water, lägg till följande anpassade CSS för att uppdatera stilen för varje reglageelement (titel, knapp och pilar)

Bildrubriken

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Detta säkerställer att bildrubriken inte skapar en radbrytning på mindre skärmar.

Skjutknapp

position:absolute;
bottom: 1em;
right: 6%;

Detta ger knappen en absolut position så att den sitter långt under titeln och till höger om bilden, vilket gör reglaget ännu mer kompakt.

Dra pilar

font-size: 30px;
margin-top: -15px;

Det gör bara skjutreglagets navigeringspilar mindre för att passa skjutreglagets kompakta storlek.

Tips: Lägg till samma bakgrundsfärg i kolumnen för jämnare bildövergångar

För att göra detta, öppna inställningarna för skjutreglagets överordnade kolumn och lägg till följande bakgrundsfärg:

• Bakgrund: #000000

Lägga till författarens bakgrundsbilder till en bild

Om du vill inkludera en författares bakgrundsbild för en bild, kan du göra det genom att lägga till en bakgrundsbild till varje bild.

När du har lagt till bakgrundsbilden till bilden kommer bakgrundsbilden att ärva de stilar som redan finns på plats under skjutreglaget (inte bilden).

Resultat

Kolla in slutresultatet.

Lägga till det kompakta rekommendationsreglaget till en rubrikmall

Spara modulen i Divi-biblioteket

Innan vi kan lägga till den kompakta testimonialreglaget till en global rubrik måste vi först registrera modulen i Divi-biblioteket. 

Du kan göra detta genom att hålla muspekaren över Slider-modulen och klicka på " Lägg till i biblioteket". Ge sedan ett namn till layouten och klicka på knappen " Spara i biblioteket".

Lade till kompakt vittnesbördsmodullayout till en rubrikmall

Redigera anpassad rubrik

När den nya rekommendationsreglagemodulen har sparats i biblioteket är vi redo att lägga till den i en anpassad rubrik.

Tillgång till Divi > Theme Builder, klicka sedan på ikonen som låter dig ändra " Anpassa sidhuvud".

Infoga sparad skjutreglage för vittnesmål från biblioteket

I rubriklayoutredigeraren klickar du för att lägga till den kompakta rekommendationsreglagemodulen där du vill att den ska visas.

I moden "InsertModule"väljer du fliken "Lägg till från biblioteket". Hitta det kompakta rekommendationsreglaget du sparade tidigare i biblioteket och välj det.

När du har laddat, spara ändringarna.

Se även: Divi: Hur man visar Fullwidth Header-modulen i helskärm

Slutresultat

Nedan är skjutreglaget för vittnesmål som lagts till i en global rubrik.

Här har vi rekommendationsreglaget utan författarens bakgrundsbilder.

Och så här ser det ut på mobilen.

Ladda ner DIVI nu!!!

Slutsats

Kompakt rekommendationsreglage kan vara ett nytt tillägg till rubriken för vad som helst webbplats försöker öka trovärdigheten för sina tjänster på den mest synliga platsen på sin webbplats. 

Du kan också använda den för att omdirigera besökare till en rekommendationssida eller försäljningssida för att öka konverteringarna. Vi hoppas att detta kommer att vara användbart för dig i 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.

Tveka inte att också 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.

.