Divi: Sådan opretter du en kompakt testimonial-skyder til en header

Kunne du tænke dig at indsætte en kompakt testimonial-skyder til en Divi-header?

Tilføjelse af udtalelser til dit websted er en effektiv måde at opbygge troværdighed for din virksomhed (eller brand) og opbygge tillid blandt besøgende. 

En testimonial-skyder er et praktisk værktøj til at vise vidnesbyrd ét sted. Med det i tankerne giver det mening at tilføje en kompakt testimonial-skyder til din header, så disse udtalelser er en af ​​de første ting, brugeren ser, når de besøger din websted.

I denne tutorial vil vi vise dig, hvordan du opretter en kompakt testimonial-skyder til at vise korte vidnesbyrd i overskriften på din Websted. 

For at gøre dette vil vi ændre Divi Slider-modulet på en sjov og unik måde.

Lad os starte!

Men før du kan opdage vores guide på Divi, det bedste WordPress-tema i verden og det nemmeste at bruge

undersøgelse

Her er den kompakte testimonial-skyder, som vi vil bygge ved hjælp af Divi's Slider-modul.

Og her er den samme testimonial-skyder tilføjet til en global header.

Og sådan ser det ud på mobilen.

Opret en ny side med Divi Builder

For at komme i gang skal du gøre følgende:

Fra WordPress-dashboardet, gå til Sider> Tilføj nyt for at oprette en ny side.

Giv den en titel, der giver mening for dig, og klik Brug Divi Builder

klik derefter på Begynd at bygge (Byg fra skrammer)

Derefter har du et tomt lærred til at begynde at designe i Divi.

Sådan opretter du en kompakt testimonial-skyder i Divi

Tilføj nyt række- og skydermodul

For at komme i gang skal du tilføje en række med én kolonne til sektionen.

Tilføj derefter et Slider-modul til linjen.

Rediger dias

Fjern det andet standarddias under fanen under skyderindstillinger Indhold, og klik derefter for at ændre indstillingerne for det resterende dias.

Slide indhold

Under fanen Indhold fra diasindstillingerne skal du opdatere følgende:

• Titel: "Donec solicitudin molestie malesuada. Vivamus suscipit tortor eget.
• Knap: Læs alle
• Krop: - Tatiana Gagelman

Når du er færdig, skal du gemme diasindstillingerne.

Læs også: Divi: Sådan bruger du baggrundsmaskeindstillinger og mønstertransformeringsindstillinger

Opdater skyderindstillinger

Dupliker slide og skjul kontrolelementer

Efter opdatering af det første slide med indhold, dupliker dette dias for at oprette et eller flere ekstra dias.

Derefter under indstillingsgruppen Elements, skjul skyderkontrollerne ved at opdatere følgende:

• Vis kontrol: NEJ

Opdater baggrunden for alle dias

Dernæst tilføjer vi en baggrund, der vil blive brugt til alle dias.

For at tilføje baggrunden skal du opdatere følgende:

• Baggrundsgradient:
  • Gradientstop 0%: #000000
  • Gradient stopper 100 %: #000000

• Baggrundsbillede:
  • Størrelse: Pasform
  • Position: Center Venstre
  • Blanding: Lysstyrke

Skyderindstillinger

Under fanen Design, opdater følgende:

dæksel

• Brug baggrundsoverlejring: JA
• Baggrundsoverlejringsfarve: rgba(0,0,0,0.7)

Titeltekst

• Titel:
  • Overskriftsniveau: H4
  • Skrifttype: Josefin Sans
  • Skrifttypevægt: Medium
  • Tekstjustering: venstre
  • Tekststørrelse: 16px (skrivebord og tablet), 14px (telefon)
  • Linjehøjde: 1,5 em

Tekstens krop

• Krop:
  • Skrifttype: Josefin Sans
  • Tekstjustering: venstre
  • Tekstfarve: #aaaaaa
  • Bogstavafstand: 0,05em

knap

• Brug brugerdefineret størrelse til knap: JA
• Knap:
  • Tekststørrelse: 1em
  • Tekstfarve: Standard (skrivebord), #000 (Hover)
  • Baggrundsfarve (skrivebord): rgba(255,255,255,0.19)
  • Baggrundsfarve (Hover): #ffffff
  • Kantbredde: 0 pixels
  • Bogstavafstand: 0,05em
  • Skrifttype: Josefin Sans
  • Margin: 0px (øverst og nederst)
  • Polstring: 0px (top og bund), 0,6em (venstre og højre)

Autofyld og animation

Opdater derefter skyderafstanden, så den er kompakt, og indstil den ønskede automatiske animationshastighed.

• Margin: 0px (top og bund)
• Polstring: 1em (top og bund), 5% (venstre og højre)
• Automatisk animation: TIL
• Automatisk animationshastighed: 3500

Tilpasset CSS

Under fanen Avanceret, tilføj følgende tilpassede CSS for at opdatere stilen for hvert skyderelement (titel, knap og pile)

Slide titel

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

Dette vil sikre, at diastitlen ikke skaber et linjeskift på mindre skærme.

Slide knap

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

Dette giver knappen en absolut position, så den sidder godt under titlen og til højre for sliden, hvilket gør skyderen endnu mere kompakt.

Træk pilene

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

Det gør blot skyderens navigationspile mindre for at imødekomme skyderens kompakte størrelse.

Tip: Tilføj den samme baggrundsfarve til kolonnen for jævnere diasovergange

For at gøre dette skal du åbne indstillingerne for skyderens overordnede kolonne og tilføje følgende baggrundsfarve:

• Baggrund: #000000

Tilføjelse af forfatterbaggrundsbilleder til et dias

Hvis du vil inkludere et forfatterbaggrundsbillede til et dias, kan du gøre det ved at tilføje et baggrundsbillede til hvert dias.

Når du har tilføjet baggrundsbilledet til diaset, vil baggrundsbilledet arve de stilarter, der allerede er på plads under skyderen (ikke diaset) indstillingerne.

Resultat

Tjek slutresultatet.

Tilføjelse af den kompakte testimonial-skyder til en overskriftsskabelon

Gem modulet i Divi-biblioteket

Før vi kan tilføje den kompakte testimonial-skyder til en global header, skal vi først registrere modulet i Divi-biblioteket. 

Du kan gøre dette ved at holde markøren over Slider-modulet og klikke på " Tilføj til bibliotek“. Giv derefter et navn til layoutet og klik på knappen " Gem til bibliotek".

Tilføjet kompakt testimonial-modullayout til en header-skabelon

Rediger tilpasset overskrift

Når det nye testimonial-skydermodul er blevet gemt i biblioteket, er vi klar til at tilføje det til en brugerdefineret header.

Adgang til Divi > Theme Builder, klik derefter på ikonet, der giver dig mulighed for at ændre " Tilpasset header".

Indsæt gemt testimonial-skydermodul fra biblioteket

I header-layouteditoren skal du klikke for at tilføje det kompakte testimonial-skydermodul, hvor du vil have det vist.

I mod "Indsæt modul", vælg fanen "Tilføj fra bibliotek". Find den kompakte testimonial-skyder, du har gemt tidligere i biblioteket, og vælg den.

Gem ændringerne, når de er indlæst.

Se også: Divi: Sådan får du vist Fullwidth Header-modulet i fuld skærm

Endelig resultat

Nedenfor er testimonial-skyderen føjet til en global header.

Her har vi testimonial-skyderen uden forfatterens baggrundsbilleder.

Og sådan ser det ud på mobilen.

Download DIVI nu!!!

Konklusion

Kompakt testimonial-skyder kan være en ny tilføjelse til overskriften på hvad som helst Websted søger at øge troværdigheden af ​​sine tjenester på det mest synlige sted på sin hjemmeside. 

Du kan også bruge den til at omdirigere besøgende til en testimonialside eller salgsside for at øge antallet af konverteringer. Vi håber, at dette vil være nyttigt for dig i dine næste Divi-projekter.

Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.

Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.

Tøv ikke med også at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

Men i mellemtiden del denne artikel på dine forskellige sociale netværk.

...