Elke website heeft een contactgedeelte nodig, maar dat betekent niet dat je voor een standaard design moet gaan. Met de schuifeffecten van Divi kunt u een zwevende contactsectie creëren die opvalt. Verbeter uw gebruikersinteractie met een verticaal scrollende lay-out van de contactsectie die bezoekers uitnodigt om met uw te communiceren Contact formulier. In dit artikel laten we u zien hoe u een zwevende contactsectie over de volledige breedte kunt maken die u aan elke pagina kunt toevoegen. U kunt het zelfs toevoegen aan de bovenkant van een voettekst voor de hele site met de Divi Theme Builder.
Hieronder vindt u een gratis downloadbaar bestand met de JSON-layout om te downloaden in uw eigen Divi-bibliotheek. We hebben ook een PSD-sjabloon toegevoegd om u te helpen de kaartachtergrond opnieuw te creëren, evenals een kaartpin SVG, zodat u deze kunt aanpassen met uw eigen kleuren.
Creëer een elementenstructuur
In dit ontwerp gaan we een achtergrondafbeelding gebruiken die een weergave is op Google Map van de locatie die u wilt laten zien. U kunt dit doen met Photoshop of een andere afbeeldingseditor.
Voeg een nieuw gedeelte toe
Dit is het moment om te beginnen met het maken van het zwevende contactgedeelte met de Divi Builder! Het eerste dat we zullen doen, is een nieuwe of bestaande pagina openen en een nieuwe sectie toevoegen.
Voeg op het tabblad inhoud de achtergrond toe van de kaart die u in Photoshop hebt gemaakt.
- Achtergrondafbeelding: uw aangepaste kaart
tussenruimte
Pas vervolgens de instellingen voor de sectie-afstand op het ontwerptabblad aan.
- Boven- en ondermarge: 50vh
- Vulling onderkant: 0vw
zichtbaarheid
Stel vervolgens de overlopen in op zichtbaar.
- Horizontale en verticale overloop: zichtbaar
Positie
Stel ten slotte de Z-index van de sectie in op 10.
- Z Index: 10
Voeg een nieuwe regel toe
Kolomstructuur
Dit is het moment om een paar dingen toe te voegen. Voeg eerst een rij met 2 kolommen toe.
sizing
Open de lijnparameters en pas de maatvoering als volgt aan.
- Breedte
- Kantoor: 90%
- Tablet en telefoon: 80%
- Max breedte: 90%
zichtbaarheid
Klik op het geavanceerde tabblad en pas vervolgens de overlopen aan.
- Horizontale en verticale overloop: zichtbaar
Positie
Voltooi de rij-instellingen door de positie-instellingen te wijzigen.
- Positie: relatief
- Offset-oorsprong: linksboven
- Verticale offset
- Bureaublad: -8vw
Instellingen kolom 1
Achtergrond
Voordat we modules toevoegen, moeten we de afzonderlijke kolommen opmaken. Voeg een achtergrondkleur toe aan kolom 1.
- Effen kleur: # 25274d
Spacing
Pas vervolgens de instellingen voor de afstand aan.
- Boven- en ondervulling
- Desktop en tablet: 7vw
- Linker en rechter opvulling
- Bureaublad: 3vw
- Tablet en telefoon: 6vw
Grens
Voeg vervolgens enkele afgeronde hoeken toe aan de randinstellingen.
- Afgeronde hoeken: 10px alle vier de hoeken
Scroll effecten
Last but not least, gebruik wat verticale beweging in de instellingen voor scrolleffecten. Dit helpt ons om een zwevend effect te creëren.
- Scroll Transform-effecten: verticale beweging
- Verticale beweging / desktop set
- Startoffset: 4
- Mid Offset: 0 (bij 50%)
- Offset beëindigen: -4
- Verticale beweging / tablet en telefoonset
- Startoffset: 4
- Mid Offset: 0 (bij 40% en 60%)
- Einde offset: -3
- Trigger motion effect: midden van element
Kolom 2 instellingen
Positie
Laten we nu verder gaan met de parameters van de tweede kolom. Pas de positieparameters dienovereenkomstig aan.
- Positie: relatief
- Oorsprong van de offset: linksboven
- Verticale offset
- Kantoor: 25vw
Scroll effecten
We voegen ook een verticale beweging toe aan deze kolom.
- Scrolltransformatie-effecten: verticale beweging
- Definieer verticale / desktop-beweging
- Start offset: 2
- Gemiddelde offset: 0 (bij 50%)
- Einde offset: -2
- Definieer verticale beweging / tablet en telefoon
- Start offset: 0
- Gemiddelde offset: 0 (bij 50%)
- Einde offset: -2
- Motion Effect Trigger: Element Top
Voeg een tekstmodule toe aan de 1-kolom
Inhoud
Het is tijd om modules toe te voegen, te beginnen met een tekstmodule in kolom 1. Voeg elke gewenste H2-inhoud toe.
Titeltekst
Ga naar het ontwerptabblad en stijl de H2-tekst als volgt.
- Titel niveau: H2
- Lettertype: Palanquin Dark
- Lettergewicht: vet
- Tekenstijl: TT
- Kleur: geel # ffd868
- Maat
- Kantoor: 5vw
- Tablet: 10vw
- Telefoon: 12vw
- Letterafstand: 4px
Voeg een contactformuliermodule toe aan kolom 1
Inhoud
Voeg onder de tekstmodule een Contact formulier. Dit zijn de velden die we gebruiken:
- Achternaam
- materiaal
- Bericht
Spam Protection
Voordat u de module gaat stylen Contact formulier. schakel spambescherming in en koppel uw ReCaptcha-account.
- Gebruik een service voor spambeveiliging: Ja
- Dienstverlener: ReCaptcha
- Selecteer een account
Velden
Schakel over naar het ontwerptabblad en geef de velden als volgt vorm.
- Achtergrondkleur: donkerblauw # 25274d
- Tekstkleur: lichtgrijs # d1d1d1
- Focus achtergrondkleur: donkerblauw # 25274d
- Focus tekstkleur: lichtgrijs # d1d1d1
- Lettertype: Palanquin
- Stijl: TT
- Tekstgrootte
- Kantoor: 0.9vw
- Tablet: 2vw
- Telefoon: 3vw
- Letterafstand: 1px
knoop
Stileer vervolgens de knop.
- Aangepaste stijlen: Ja
- Tekstgrootte: 20px
- Tekstkleur: donkerblauw # 25274d
- Achtergrondkleur: Geel # ffd868
- Randradius: 7px
- Pictogramkleur: donkerblauw # 25274d
- Bovenmarge: 5px
sizing
Vervolgens passen we de maatparameters aan.
- Breedte: 100%
- Max breedte: 100%
tussenruimte
We zullen ook topvulling toevoegen.
- Bovenvoering: 4vw
grens
Voltooi de moduleparameters door de randparameters aan te passen.
- Ingangen met afgeronde hoeken: 6 px op de vier hoeken
- Invoer Randstijlen: alle vier de zijden
- Breedte ingangsrand: 2px
- Invoer Randkleur: geel # ffd868
Voeg de volgmodule voor sociale media toe aan kolom 2
Inhoud
Ga naar kolom 2 en voeg een social media module toe. Gebruik alle sociale netwerken die u nodig heeft.
Pandrecht
Voeg vóór het stylen links toe naar de overeenkomstige netwerken.
Context van het artikel
Open nu het eerste sociale netwerk en verander de achtergrondkleur.
- Kleur: Donkerblauw # 25274d
Element Icoon
Wijzig op het ontwerptabblad van hetzelfde element de pictograminstellingen als volgt.
- Kleur: geel # ffd868
- Lettergrootte van pictogram
- Bureau en tablet: 31 px
- Telefoon: 26 px
Artikelafstand
Voeg vervolgens een kleine marge toe om de pictogrammen van elkaar te scheiden.
- Rechter marge: 1vw
Kopieer en plak itemstijlen
Om de resterende sociale netwerken te stylen, keert u terug naar het hoofdinhoudsvenster en kopieert u de elementstijlen van het eerste pictogram. Plak vervolgens de elementstijlen op de overige sociale netwerken.
alignement
Schakel over naar het hoofdontwerptabblad en zorg ervoor dat de module links uitgelijnd is.
- Uitlijning van de module: links
sizing
Pas vervolgens de maatvoering van de module aan.
- Breedte: 100%
tussenruimte
Wis ook alle standaardvulling.
- Vulling boven, onder, links en rechts: 0vw
grens
Voeg tot slot afgeronde hoeken toe in de randinstellingen. Hiermee worden de randen van alle pictogrammen tegelijk aangepast.
- Ronde hoeken
- Linksboven en rechts: 7 pixels
- Linksonder en rechts: 0px
Voeg een tekstmodule toe aan de 2-kolom
Inhoud
Voeg onder de sociale media-module nog een tekstmodule toe. Voeg inhoud naar keuze toe. We hebben twee adressen, een telefoonnummer en een e-mailadres toegevoegd. Gebruik vetgedrukt voor de titel van elk item in hoofdletters.
- Hoofdkantoor: 1587 Sukhumvit Soi 21, Bangkok, Thailand.
- Verkooppunt : Emporium Mall, 2e verdieping
- telefoon: (321) 564 2398
- E-mail: [e-mail beveiligd]
verband
Verander de achtergrondkleur van de module.
- Kleur: Donkerblauw # 25274d
Teksten
Schakel over naar het ontwerptabblad en geef de tekst stijl.
- Lettertype: Palanquin
- Kleur: geel # ffd868
- Grootte: 18px
tussenruimte
Voeg ook aangepaste afstandswaarden toe.
- Bovenmarge
- Kantoor: -60px
- Tablet en telefoon: -50 pixels
- Boven-, onder-, linker- en rechtervulling
- Kantoor: 3vw
- Tablet: 6vw
- Telefoon: 8vw
grens
En voltooi de module door afgeronde hoeken toe te voegen in de randinstellingen. Dat is het!
- Afgeronde hoeken: 10 pixels rechtsboven, linksonder en rechtsonder.
overzicht
Nu we klaar zijn met het opnieuw maken van het gedeelte met zwevende contacten, kunt u het resultaat op verschillende schermformaten nog eens bekijken.
Aanvullende bronnen
C'est ressources kan een aanvulling zijn op wat u zojuist hebt gelezen. Ze kunnen aanvullend worden gebruikt of door degenen die niet over de Divi-thema.
- Hoe maak je een popup contactformulier op WordPress toe te voegen
- Hoe u een vervolgkeuzeformulier toevoegt aan de algemene koptekst op Divi
- 5 plug-ins om contactformulieren te maken
Voltooien
Door gebruik te maken van de nieuwe Divi-scrolleffecten, wordt elke standaardlay-out een mooi ontwerp. Door uw eigen achtergrond te creëren, heeft u meer controle over het uiterlijk van het voltooide ontwerp. Als je vragen of suggesties hebt, laat dan een reactie achter in de comments hieronder!