Hoe maak je een Sticky Testimonial-module in Divi

Rifat T Apr 21, 2022

Een van de meest intrigerende aspecten van het ontwerpen van lay-outs met Divi is de verscheidenheid aan benaderingen die we kunnen volgen. Modules met inhoud zijn een uitstekend voorbeeld. We kunnen hun inhoudsopties rechtstreeks gebruiken of ze combineren met andere modules om een ​​aantal werkelijk unieke ontwerpen te produceren. Met modulecombinaties kunnen we bijvoorbeeld plakkerige elementen maken. In deze zelfstudie zullen we onderzoeken hoe u uw Divi -testimonial-module plakkerig kunt maken, terwijl u de getuigenis-informatie normaal laat scrollen in deze tutorial.

Ontwerpvoorbeeld

Hier is een voorproefje van wat we gaan maken. Omdat de mobiele versie van dit ontwerp niet plakkerig zal zijn, exposeer ik alleen de desktopversie voor voorbeelddoeleinden.

Sjabloon

Als uitgangspunt ga ik de landingspagina van Divi 's gratis Electrical Services Layout Pack gebruiken. Je kunt getuigenissen op deze pagina zien, maar ze zijn in een heel andere stijl. Om bij de nieuwe stijl te passen, zal ik de getuigenissen bijwerken met nieuwe. Maar ik zal het hernoemen zodat de instellingen kunnen worden weergegeven.

In deze tutorial zullen twee modules worden gebruikt om de testimonial te construeren. De afbeelding, naam, functietitel en bedrijf worden getoond met behulp van de testimonial-module. Ik zal een tekstmodule gebruiken voor de testimonial-inhoud. De tekstmodule blijft normaal scrollen. Totdat de gebruiker klaar is met het lezen van een testimonial, blijft de testimonial-module op zijn plaats. Vervolgens kan de testimonial-module samen met de rest van de tekst scrollen.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

Ontwerp een plakkerige getuigenissectie

Het toevoegen van een rij met één kolom aan een nieuwe sectie is de eerste stap. De titel wordt gecentreerd in deze rij.

Titel tekst

Voeg nu een titeltekstmodule toe aan deze nieuwe rij.

Open de instellingen en maak de volgende aanpassingen.

  • Tekst: Kop 3
  • Inhoud: tevreden klanten

Ontwerpinstellingen

Wijzig het volgende op het tabblad Ontwerpen.

  • Tekstuitlijning: gecentreerd
  • Lettertype: Chakra Petch
  • Gewicht: Vet
  • Kleur: #000000

En om het helemaal af te maken, kies een lettergrootte van 50 pixels op de desktop en tablets, en 20 pixels op mobiele apparaten voor de telefoon. Sla uw wijzigingen op en verlaat de configuratie van de module.

  • Grootte: Desktop 50px, Tablet 28px, Phone20px

Eerste getuigenisrij

Plaats daarna een 2/3, 1/3 rij onder de titel. Deze rij bevat de eerste getuigenis.

Rij-instellingen

Selecteer het ontwerptabblad en schakel het selectievakje Kolomhoogten gelijkmaken in.

  • Kolomhoogten egaliseren: Ja

Kolominstellingen

Open de instellingen van de eerste kolom in combinatie met de instellingen van de rij. Selecteer de Bovenste randstijl in het vervolgkeuzemenu Randstijlen. Breedte moet 2px zijn en kleur moet #ffd600 zijn. Sluit de rijconfiguratie. Dit voegt een gele lijn toe boven de testimonial, vergelijkbaar met degene die we eerder hebben vervangen.

  • Randstijlen: Boven
  • Kleur bovenrand: #ffd600
  • Breedte: 2px

Getuigenistekst

Daarna voegen we de tekstmodule toe die de testimonial-inhoud bevat. Voeg in de linkerkolom, onder de gele lijn, een tekstmodule toe.

Tekstinstellingen voor getuigenissen

Daarna voegen we de tekstmodule toe die de testimonial-inhoud bevat. Voeg in de linkerkolom, onder de gele lijn, een tekstmodule toe.

Voer de inhoud van de getuigenis in de inhoudseditor in.

Navigeer vervolgens naar het tabblad ontwerp. Selecteer Chakra Petch als lettertype. Selecteer Vet als gewicht en Zwart als kleur. Kies 30px voor de desktop en 14px voor de tablet voor de tekstgrootte. De telefoonconfiguratie wordt automatisch gesynchroniseerd met de tablet, dus we hoeven niets bij te werken. De eigenschap Tekstregelhoogte moet worden ingesteld op 2em. Dit resulteert in een kolossale gedrukte getuigenis die de aandacht zal trekken.

  • Lettertype: Chakra Petch
  • Gewicht: Vet
  • De kleur zwart
  • Grootte: Desktop 30px, Tablet 14px
  • Lijnhoogte: 2em

Selecteer Gecentreerd in het vervolgkeuzemenu Tekstuitlijning. Sluit de configuratie van de tekstmodule.

  • Uitlijning: gecentreerd

Getuigenis Module Instellingen

Voeg vervolgens in de rechterkolom een ​​Testimonial-module toe. Dit is plakkerig en bevat de naam van de persoon, de bedrijfsnaam, de functietitel en de foto.

Inhoudsinstellingen

Voer de testimonial-inhoud in de instellingen van de module in. Laat de sectie Body leeg. Dit werd bereikt door het gebruik van de tekstmodule.

  • Schrijver
  • Functietitel
  • Bedrijf
  • Afbeelding

Zet de achtergrond op wit door naar beneden te scrollen.

  • Achtergrond: #ffffff

Klik daarna op het pictogram Pin. Dit is de plakkerige versie van de achtergrond. Wanneer de module plakkerig wordt, verandert de achtergrond van kleur. De achtergrondkleur moet zwart zijn.

  • Kleverige achtergrondkleur: #000000

Citaat Icoon

Navigeer vervolgens naar het tabblad ontwerp. Kies #ffd600 als de kleur voor het Quote-pictogram.

  • Citaatpictogram Kleur: #ffd600

Afbeelding

Verklein de breedte en hoogte van de afbeelding tot 150px door naar beneden te scrollen. Afgeronde hoeken moeten worden ingesteld op 0px.

  • Afbeeldingsbreedte: 150px
  • Afgeronde hoeken: 0px

Tekst

Selecteer de optie Gecentreerd in het vervolgkeuzemenu Tekstuitlijning. Dit plaatst de naam van de auteur, functie en bedrijfsnaam in het midden van de tekst.

  • Tekstuitlijning: gecentreerd

Auteur tekst

Selecteer Chakra Petch voor het lettertype en Vet voor het gewicht en gecentreerd voor de uitlijning onder Auteurtekst. Selecteer zwart als standaardkleur. Selecteer het Pin-pictogram en verander de kleur van de sticky in #ffd600. De Desktop Size moet worden ingesteld op 20px, terwijl de Tablet Size moet worden ingesteld op 14px.

  • Lettertype: Chakra Petch
  • Normale tekstkleur: zwart
  • Vastgezette tekstkleur: #ffd600
  • Grootte: 20px Desktop, 14px Tablet

Positietekst

Blader daarna omlaag naar Positietekst. Selecteer Exo als lettertype. Kies zwart als de standaard tekstkleur. Om de vastgezette kleur op wit in te stellen, klikt u op het pictogram Vastzetten.

  • Lettertype: Exo
  • Normale tekstkleur: #000000
  • Vastgezette tekstkleur: #ffffff

Bedrijfstekst

Scrol omlaag naar het gedeelte met de titel 'Bedrijfstekst'. Selecteer Exo als lettertype. Kies zwart als de standaard tekstkleur. Om de vastgezette kleur op wit in te stellen, klikt u op het pictogram Vastzetten.

  • Lettertype: Exo
  • Normale tekstkleur: #000000
  • Vastgezette tekstkleur: #ffffff

Doos Schaduw

Ga naar het vakgedeelte en selecteer de eerste optie.

  • Box Shadow: eerste schaduwoptie

Scroll-effect

Ga ten slotte naar Scroll-effecten onder het tabblad Geavanceerd. Kies Bureaublad als de kleverige positie en blijf bij de bovenkant als de kleverige positie. Verschuif de Sticky Top met 50px. Columniseer het onderste plakkerige element. Dit instrueert de module over hoe en waar zich te houden.

  • Kleverige positie: blijf bij boven
  • Sticky Top Offset: 50px
  • Onderste plakkerig element: kolom

Kies Niet plakken bij het tabletsymbool voor de plakpositie. Dit voorkomt dat de module aan tablets en smartphones gaat kleven. Sluit de configuratie van de module.

  • Kleverige positie: niet plakken

Nu, terwijl u naar beneden navigeert op het scherm, blijft de testimonialsmodule bovenaan staan ​​en verandert van kleur.

Zodra de module is uitgelijnd met de onderkant van de kolom, schuift deze in lockstep met de kolom.

Dupliceer de rij

Daarna maken we de tweede rij door de eerste rij te kopiëren en te bewerken. Om een ​​rij te dupliceren, plaatst u de muisaanwijzer erop en klikt u op het duplicaatpictogram.

Ga ten slotte naar elke tekst- en testimonial-module afzonderlijk en vervang de bestaande testimonial-inhoud door de nieuwe testimonial-informatie. Sluit na het maken van de nodige aanpassingen de modules en sla de pagina op. Herhaal het dubbele proces om andere getuigenissen toe te voegen. Je hebt nu een boeiende, plakkerige getuigenissectie met twee getuigenissen die opvallen en er fantastisch uitzien.

Definitief ontwerp

Na alle drukte ziet ons ontwerp er eindelijk zo uit.

Laatste gedachten

Dat is het einde van ons onderzoek naar hoe u uw Divi- getuigeniselement plakkerig kunt maken. Divi 's instellingen zorgen voor het plakken van elk element. Wanneer modules worden gecombineerd, zoals tekstmodules voor inhoud en getuigenismodules voor ondersteunend materiaal, kunnen fascinerende ontwerpen ontstaan. De getuigenissen die we hier hebben opgenomen, zijn slechts één manier om de modules van Divi te combineren met plakkerige instellingen.