Divi: Hvordan lage en kompakt testimonial-glidebryter for en overskrift

Vil du sette inn en kompakt testimonial-glidebryter for en Divi-header?

Å legge til attester på nettstedet ditt er en effektiv måte å bygge troverdighet for virksomheten din (eller merkevaren din) og bygge tillit hos brukerne. Besøkende. 

En testimonial-glidebryter er et hendig verktøy for å vise attester på ett sted. Med det i tankene, er det fornuftig å legge til en kompakt attest-glidebryter i overskriften din slik at disse attester er noe av det første brukeren ser når de besøker nettside.

I denne opplæringen skal vi vise deg hvordan du lager en kompakt attesteringsglidebryter for å vise frem korte attester i overskriften på nettstedet Web. 

For å gjøre dette skal vi modifisere Divi Slider Module på en morsom og unik måte.

La oss starte!

Men før du kan oppdage vår guide på Divi, det beste WordPress-temaet i verden og det enkleste å bruke

undersøkelsen

Her er den kompakte testimonial-glidebryteren som vi skal bygge med Divis Slider-modul.

Og her er den samme attest-glidebryteren lagt til en global overskrift.

Og her er hvordan det ser ut på mobil.

Opprett en ny side med Divi Builder

For å komme i gang må du gjøre følgende:

Fra WordPress-dashbordet, gå til Sider> Legg til nye for å opprette en ny side.

Gi den en tittel som gir mening for deg og klikk Bruk Divi Builder

deretter klikker du Begynn å bygge (Bygg fra bunnen av)

Etter det vil du ha et blankt lerret for å begynne å designe i Divi.

Hvordan lage en kompakt testimonial-glidebryter i Divi

Legg til ny rad og skyvemodul

For å komme i gang, legg til en rad med én kolonne i delen.

Legg deretter til en Slider-modul i raden.

Rediger lysbilde

Under glidebryterinnstillinger fjerner du standard andre lysbilde under fanen Innhold, og klikk deretter for å endre innstillingene for det gjenværende lysbildet.

Lysbildeinnhold

Under fanen Innhold fra lysbildeinnstillingene, oppdater følgende:

• Tittel: «Donec solicitudin molestie malesuada. Vivamus suscipit tortor eget.
• Knapp: Les alle
• Kropp: - Tatiana Gagelman

Når du er ferdig, lagre lysbildeinnstillingene.

Les også: Divi: Slik bruker du bakgrunnsmaskeinnstillinger og alternativer for mønstertransformasjon

Oppdater glidebryterinnstillingene

Dupliser skyve og skjul kontroller

Etter å ha oppdatert det første lysbildet med innhold, dupliser dette lysbildet for å lage ett eller flere ekstra lysbilder.

Så under alternativgruppen Elements, skjul skyvekontrollene ved å oppdatere følgende:

• Vis kontroll: NEI

Oppdater bakgrunnen til alle lysbildene

Deretter legger vi til en bakgrunn som vil bli brukt for alle lysbilder.

For å legge til bakgrunnen, oppdater følgende:

• Bakgrunnsgradient:
  • Gradientstopp 0 %: #000000
  • Gradient stopper 100 %: #000000

• Bakgrunnsbilde :
  • Størrelse: Passform
  • Posisjon: Senter venstre
  • Blanding: Lysstyrke

Skyvekontrollinnstillinger

Under fanen utforming, oppdater følgende:

deksel

• Bruk bakgrunnsoverlegg: JA
• Bakgrunnsoverleggsfarge: rgba(0,0,0,0.7)

Titteltekst

• Tittel:
  • Overskriftsnivå: H4
  • Font: Josefin Sans
  • Skriftvekt: Middels
  • Tekstjustering: venstre
  • Tekststørrelse: 16px (skrivebord og nettbrett), 14px (telefon)
  • Linjehøyde: 1,5 em

Kroppen av teksten

• Kropp :
  • Font: Josefin Sans
  • Tekstjustering: venstre
  • Tekstfarge: #aaaaaa
  • Bokstavavstand: 0,05em

knapp

• Bruk egendefinert størrelse for knapp: JA
• Knapp:
  • Tekststørrelse: 1em
  • Tekstfarge: Standard (skrivebord), #000 (Hover)
  • Bakgrunnsfarge (skrivebord): rgba(255,255,255,0.19)
  • Bakgrunnsfarge (hover): #ffffff
  • Kantbredde: 0 piksler
  • Bokstavavstand: 0,05em
  • Font: Josefin Sans
  • Marg: 0px (øverst og bunn)
  • Polstring: 0px (øverst og bunn), 0,6 em (venstre og høyre)

Autofyll og animasjon

Deretter oppdaterer du glidebryteravstanden for å være kompakt og still inn ønsket automatisk animasjonshastighet.

• Marg: 0px (øverst og bunn)
• Polstring: 1em (øverst og bunn), 5% (venstre og høyre)
• Automatisk animasjon: PÅ
• Automatisk animasjonshastighet: 3500

Tilpasset CSS

Under fanen Avansert, legg til følgende egendefinerte CSS for å oppdatere stilen til hvert glideelement (tittel, knapp og piler)

Lysbildetittel

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

Dette vil sikre at lysbildetittelen ikke vil skape et linjeskift på mindre skjermer.

Skyveknapp

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

Dette gir knappen en absolutt posisjon slik at den sitter godt under tittelen og til høyre for lysbildet, noe som gjør glideren enda mer kompakt.

Dra pilene

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

Det gjør bare glidebryterens navigasjonspiler mindre for å imøtekomme den kompakte størrelsen på skyveknappen.

Tips: Legg til den samme bakgrunnsfargen i kolonnen for jevnere lysbildeoverganger

For å gjøre dette, åpne innstillingene til den overordnede kolonnen til glidebryteren og legg til følgende bakgrunnsfarge:

• Bakgrunn: #000000

Legge til forfatterbakgrunnsbilder til et lysbilde

Hvis du vil inkludere et forfatterbakgrunnsbilde for et lysbilde, kan du gjøre det ved å legge til et bakgrunnsbilde til hvert lysbilde.

Når du har lagt til bakgrunnsbildet til lysbildet, vil bakgrunnsbildet arve stilene som allerede er på plass under glidebryteren (ikke lysbildet) innstillingene.

Resultat

Sjekk ut sluttresultatet.

Legge til den kompakte testimonial-glidebryteren til en overskriftsmal

Lagre modulen i Divi-biblioteket

Før vi kan legge til den kompakte testimonial-glidebryteren til en global overskrift, må vi først registrere modulen i Divi-biblioteket. 

Du kan gjøre dette ved å holde musepekeren over Slider-modulen og klikke på " Legg til i biblioteket". Gi deretter et navn til oppsettet og klikk på knappen " Lagre i biblioteket".

Lagt til kompakt utforming av attestmodul til en overskriftsmal

Rediger egendefinert topptekst

Når den nye testimonial-skyvemodulen er lagret i biblioteket, er vi klare til å legge den til i en egendefinert overskrift.

Tilgang til Divi > Temabygger, klikk deretter på ikonet som lar deg endre " Tilpasset topptekst".

Sett inn lagret testimonial-glidemodul fra biblioteket

I redigeringsprogrammet for overskriftsoppsett klikker du for å legge til den kompakte attesteringsglidemodulen der du vil at den skal vises.

I mod "InsertModule"velger du fanen "Legg til fra bibliotek". Finn den kompakte attesteringsglidebryteren du lagret tidligere i biblioteket, og velg den.

Lagre endringene når de er lastet inn.

Se også: Divi: Hvordan vise Fullwidth Header-modulen i fullskjerm

Endelig resultat

Nedenfor er anbefalingsglidebryteren lagt til en global overskrift.

Her har vi testimonial-glidebryteren uten forfatterens bakgrunnsbilder.

Og her er hvordan det ser ut på mobil.

Last ned DIVI nå!!!

konklusjonen

Kompakt testimonial-glidebryter kan være et nytt tillegg til overskriften på hva som helst nettstedet Web søker å øke troverdigheten til tjenestene sine på det mest synlige stedet på nettstedet. 

Du kan også bruke den til å omdirigere Besøkende til en anbefalingsside eller salgsside for å øke konverteringene. Vi håper dette vil være nyttig for deg i dine neste Divi-prosjekter.

Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.

Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder.

Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.

...