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
Divi-achtergrondafbeelding

tussenruimte

Pas vervolgens de instellingen voor de sectie-afstand op het ontwerptabblad aan.

  • Boven- en ondermarge: 50vh
  • Vulling onderkant: 0vw
Divi 1 sectie afstand configuratie

zichtbaarheid

Stel vervolgens de overlopen in op zichtbaar.

  • Horizontale en verticale overloop: zichtbaar
zwevend contactgedeelte

Positie

Stel ten slotte de Z-index van de sectie in op 10.

  • Z Index: 10
Positie van de Divi-sectie

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.

Rij heeft twee kolommen divi

sizing

Open de lijnparameters en pas de maatvoering als volgt aan.

  • Breedte
    • Kantoor: 90%
    • Tablet en telefoon: 80%
  • Max breedte: 90%
Divi line-parameter

zichtbaarheid

Klik op het geavanceerde tabblad en pas vervolgens de overlopen aan.

  • Horizontale en verticale overloop: zichtbaar
Divi lijn overloop configuratie

Positie

Voltooi de rij-instellingen door de positie-instellingen te wijzigen.

  • Positie: relatief
  • Offset-oorsprong: linksboven
  • Verticale offset
    • Bureaublad: -8vw
Scheidingslijnpositie configureren

Instellingen kolom 1

Achtergrond

Voordat we modules toevoegen, moeten we de afzonderlijke kolommen opmaken. Voeg een achtergrondkleur toe aan kolom 1.

  • Effen kleur: # 25274d
Kolomkleur 1 div

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
De sectie configuratie-afstand heeft twee kolommen

Grens

Voeg vervolgens enkele afgeronde hoeken toe aan de randinstellingen.

  • Afgeronde hoeken: 10px alle vier de hoeken
Divi sectie afgeronde randen

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
Pas het scroleffect van de divi-sectie aan

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
Aanpassing van Divi-kolommen

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
Divi-scrolleffect

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.

Module-inhoud kolom 1

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
Divi-lettertypeaanpassing in koptekst

Voeg een contactformuliermodule toe aan kolom 1

Inhoud

Voeg onder de tekstmodule een Contact formulier. Dit zijn de velden die we gebruiken:

  • Achternaam
  • E-mail
  • materiaal
  • Bericht
Div contactformulier toevoegen

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
Divi contactformulier spam bescherming

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
Veldkleuren aanpassen 1

knoop

Stileer vervolgens de knop.

  • Aangepaste stijlen: Ja
  • Tekstgrootte: 20px
  • Tekstkleur: donkerblauw # 25274d
  • Achtergrondkleur: Geel # ffd868
  • Randradius: 7px
  • Pictogramkleur: donkerblauw # 25274d
  • Bovenmarge: 5px
Pas divi-knopstijl aan 1
Kleurconfiguratie van de Divi-knop

sizing

Vervolgens passen we de maatparameters aan.

  • Breedte: 100%
  • Max breedte: 100%
Divi maatconfiguratie

tussenruimte

We zullen ook topvulling toevoegen.

  • Bovenvoering: 4vw
Divi-afstand

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
Divi grensconfiguratie

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.

  • Facebook
  • Twitter
  • Linkedin
Module volg ons op sociale netwerken

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
Wijzig achtergrond deel 1

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
Pas de divi-kleur aan

Artikelafstand

Voeg vervolgens een kleine marge toe om de pictogrammen van elkaar te scheiden.

  • Rechter marge: 1vw
Afstand instellen voor sociaal delen

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.

Stijlelement kopiëren
Plak divi-elementstijl

alignement

Schakel over naar het hoofdontwerptabblad en zorg ervoor dat de module links uitgelijnd is.

  • Uitlijning van de module: links
Kies uitlijning

sizing

Pas vervolgens de maatvoering van de module aan.

  • Breedte: 100%
Configureer gedeelde maatvoering

tussenruimte

Wis ook alle standaardvulling.

  • Vulling boven, onder, links en rechts: 0vw
Configureer de divi-afstand

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
Grensconfiguratie Divi-module

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]
Configuratie divi text module adres

verband

Verander de achtergrondkleur van de module.

  • Kleur: Donkerblauw # 25274d
Achtergrondconfiguratie tekstmodule

Teksten

Schakel over naar het ontwerptabblad en geef de tekst stijl.

  • Lettertype: Palanquin
  • Kleur: geel # ffd868
  • Grootte: 18px
divi module tekstlettertype

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
divi afstandsmarge

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.
Afgeronde rand divi-tekstmodule

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.

zwevend contactgedeelte

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.

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!