Wil je een Contact formulier naar uw website dankzij de module Contactformulier van Divi? Hier zijn 3 aanpassingsideeën...
de vormen Contactgegevens zijn een essentieel onderdeel van veel websites. Hun belangrijkste doel is om intuïtief te zijn en bezoekers te helpen gemakkelijk contact op te nemen.
Maar dat betekent niet dat alles vormen contacten moeten een nauwkeurig en vooraf gedefinieerd uiterlijk hebben. Een intuïtieve beleving combineer je eenvoudig met een mooi design. Dit is precies wat we in deze tutorial gaan doen.
We zullen 3 unieke ontwerpen van de module delen Contactformulier de Divi die u kunt maken met alleen de ingebouwde opties van Divi.
Laten we gaan!
Overzicht van de ontwerpen van de Divi Contactformulier module
Desktop-versies
Laten we beginnen met een kijkje te nemen naar de desktopversie van de verschillende ontwerpen van de module Contactformulier die we in deze tutorial zullen ontwerpen.
Mobiele versies
En zo zien ze eruit op kleinere schermformaten:
Download DIVI nu!!!
Hoe de Divi Contact Form module aanpassen: 3 voorbeelden
Lees ook: Divi: Hoe maak je een teamledensectie als carrousel
Creatie van het contactformulier #1
Voeg een nieuw gedeelte toe
Achtergrond met kleurovergang
Laten we beginnen met het eerste voorbeeld! Voeg een nieuwe sectie toe, ga naar achtergrondinstellingen en voeg een verloopachtergrond toe.
- Verloop stopt
- 34%: #4c00ff
- 34%: #ffd400
- Soort: rond
- Gradiëntrichting: linksonder
tussenruimte
Ga vervolgens naar de optie Afstand op het tabblad Ontwerp en wijzig de instellingen als volgt.
- Opvulling (boven en onder): 200px
Voeg een nieuwe regel toe
Structuur van de kolom
Voeg een nieuwe rij toe met behulp van de volgende kolomstructuur:
Kolom 1: Achtergrondkleur
Zonder nog modules toe te voegen, open rij-instellingen, vervolgens kolom 1-instellingen en voeg de onderstaande achtergrondkleur toe
- Achtergrond: rgba(255,255,255,0.55)
Kolom 1: Achtergrondafbeelding
Voeg ook een achtergrondafbeelding toe aan de eerste kolom.
- Achtergrondafbeelding Herhalen: geen herhaling
- Achtergrondafbeelding mengen: scherm
Kolom 2: Achtergrondafbeelding
En een witte achtergrondkleur voor de tweede kolom.
- Achtergrond: #ffffff
sizing
Wijzig vervolgens de maatparameters.
- Egaliseer kolomhoogten: JA
tussenruimte
Verwijder ook alle standaard aangepaste opvullingen.
- Opvulling (boven en onder): 0px
Randradius kolom
Voeg een randradius toe aan beide kolommen op het tabblad Geavanceerd.
border-radius: 10px;
Voeg een tekstmodule toe aan kolom 1
Voeg inhoud toe
Het is tijd om de verschillende modules toe te voegen! Voeg een tekstmodule toe aan de eerste kolom met inhoud naar keuze.
Tekst instellingen
Ga vervolgens naar het tabblad Ontwerp van de module Tekst en breng enkele wijzigingen aan.
- Tekst:
- Lettertype: voldoen
- Tekstkleur: #333333
- Grootte: 100px
- Lijnhoogte: 1 em
- Uitlijning: midden
tussenruimte
Voeg ook aangepaste vulwaarden toe.
- Opvulling (boven): 600px
- Opvulling (onderkant): 100px
Schaduw doos
Gebruik een subtiele doosschaduw om diepte aan het ontwerp toe te voegen.
- Doos Schaduwvervaging Sterkte: 80px
- Box Shadow Spread-sterkte: -16px
- Schaduwkleur: rgba(0,0,0,0.3)
Voeg een afbeeldingsmodule toe aan kolom 2
Upload een afbeelding
Ga verder door een afbeeldingsmodule toe te voegen aan de tweede kolom. Upload een afbeelding naar keuze.
sizing
Wijzig de formaatinstellingen voor deze module.
- Breedte: 25% (desktop), 50% (tablet), 60% (telefoon)
- Module-uitlijning: midden
tussenruimte
Creëer een overlap met een negatieve bovenmarge.
- Marge (boven): -60%
grens
Wijzig de randen van de afbeelding als volgt:
- Afgeronde hoeken: 100px (alle hoeken)
Voeg Tekst #1 module toe aan kolom 2
Voeg inhoud toe
Voeg net onder de afbeeldingsmodule een tekstmodule met inhoud toe.
Tekst instellingen
Bewerk de tekstinstellingen voor deze module.
- Tekst:
- Lettertype: voldoen
- Tekstkleur: #333333
- Tekstgrootte: 44px
- Oriëntatie: Centrum
Voeg Tekst #2 module toe aan kolom 2
Voeg inhoud toe
Voeg vervolgens nog een tekstmodule toe.
Tekst instellingen
Wijzig ook de tekstinstellingen voor deze module.
- Tekst:
- Lettertype: Arial
- Tekstkleur: #ffd400
- Tekstkleur: 18px
- Letterafstand: 2px
- Oriëntatie: Centrum
tussenruimte
Voeg vervolgens een ondermarge toe.
- Marge (onder): 100px
Voeg de module Contactformulier toe aan kolom 2
Activeer de optie "Make Fullwidth" in het veld Naam en e-mail
De laatste module die nodig is, is de module Contactformulier. Voordat u iets anders doet, opent u de naam- en e-mailvelden en wijzigt u de lay-out.
- Maak Fullwidth: ja
Voeg een onderwerpveld toe
Om dit ontwerp te maken, hebben we een ander veld voor het onderwerp toegevoegd.
Spam Protection
Schakel vervolgens de captcha-optie uit.
- Gebruik Basic Captcha: NEE
Tekstinstellingen formulierveld
Breng enkele wijzigingen aan in de tekstinstellingen van het formulierveld van deze module Contactformulier
- Velden:
- Achtergrondkleur: rgba(255,255,255,0)
- Lettertype: Arial
- Lettergewicht: Licht
- Tekstgrootte: 16px
- Letterafstand: 2px
Knop instellingen
We veranderen ook het uiterlijk van de knoppen.
- Gebruik aangepast formaat voor knop: JA
- Knop:
- Tekstkleur: #ffd400
- Randbreedte: 0 pixels
- Letterafstand: 2px
- Lettertype: Arial
- Lettertype: U
- onderstrepen Kleur: #4c00ff
tussenruimte
Voeg vervolgens enkele aangepaste opvulwaarden toe.
- Opvulling (onderkant): 100px
- Opvulling (links en rechts): 50px
grens
En voeg een subtiele onderrand toe aan elk van de velden.
- Voert de breedte van de onderrand in: 2px
- Invoer Onderste randkleur: #efefef
Afstand tussen afzonderlijke velden
Voeg ten slotte een ondermarge toe aan elk van de afzonderlijke velden behalve het berichtveld.
- Marge (onder): 20px
Creatie van het contactformulier #2
Voeg een nieuw gedeelte toe
Achtergrond met kleurovergang
Laten we verder gaan met het volgende voorbeeld! Voeg een nieuwe sectie toe met een verloopachtergrond.
- Gradiëntstops:
- 50%: #562fef
- 50%: #ffffff
- Gradiënttype: Lineair
tussenruimte
Voeg aangepaste opvulwaarden toe aan de afstandsinstellingen in deze sectie.
- Opvulling (boven en onder): 200px
Voeg een nieuwe regel toe
Structuur van de kolom
Voeg een nieuwe rij toe met behulp van de volgende kolomstructuur:
Achtergrond kleur
Zonder nog modules toe te voegen, opent u de rij-instellingen en voegt u een achtergrondkleur toe aan de rij.
- Achtergrondkleur: #ffffff
Achtergrond met 2 kolommen met kleurovergang
Voeg een verloopachtergrond toe aan de tweede kolom in de rij.
- Gradiëntstops:
- 0%: #9932ff
- 100%: #562fef
- Soort: lineair
- Besturing: 160 graden
sizing
Pas ook de parameters voor de lijngrootte aan.
- Gebruik aangepaste gootbreedte: JA
- Gootbreedte: 1
- Egaliseer kolomhoogten: JA
tussenruimte
Voeg vervolgens aangepaste afstandswaarden toe.
- Lijn:
- Opvulling (boven en onder): 0px
- Kolom 1:
- Opvulling: 100px (boven), 50px (onder)
- Opvulling (links en rechts): 50px
- Kolom 2:
- Opvulling (boven en onder): 100px
- Opvulling (links en rechts): 50px
grens
Voeg '20px' toe aan elk van de lijnranden.
Schaduw doos
Voeg ten slotte een subtiele doosschaduw toe aan de lijn.
- Doos Schaduwvervaging Sterkte: 45px
- Box Shadow Spread-sterkte: -11px
- Sadow-kleur: rgba (0,0,0,0.3)
Voeg een tekstmodule toe aan kolom 1
Voeg inhoud toe
Het is tijd om de modules toe te voegen! Begin met een tekstmodule in de eerste kolom.
Tekst instellingen
Bewerk de tekstinstellingen voor deze module.
- Tekst:
- Lettergewicht: Ultra Bold
- Lettertype: TT
- Kleur: #562fef
- Grootte: 100px (desktop), 80px (tablet), 60px (telefoon)
- Letterafstand: -10px
- Lijnhoogte: 1 em
tussenruimte
Voeg ook een ondermarge toe.
- Marge (onder): 50px
Voeg de module Contactformulier toe aan kolom 1
Communie
De tweede module die we nodig hebben in de eerste kolom is een Contact Form module. Zodra je de module hebt toegevoegd, zet je de optie 'Use Basic Captcha' uit.
- Gebruik Basic Captcha: NEE
Tekstinstellingen formulierveld
Wijzig vervolgens de achtergrondkleur van de formuliervelden.
- Achtergrondkleur velden: #ffffff
Knop instellingen
Speel ook met de knopinstellingen om een pictogramknop te maken in plaats van een tekstknop.
- Gebruik aangepaste stijlen voor knop: JA
- Knop:
- Tekstgrootte: 73px
- Tekstkleur: rgba(0,0,0,0) (standaard),
- Achtergrondkleur: rgba(255,255,255,0) (zweven)
- Randbreedte: 0px
- Pictogramkleur: #9932ff
- Toon alleen pictogram bij zweven voor knop: NEE
Schaduw doos
Voeg ten slotte een subtiele vakschaduw toe aan elk van de velden.
- Doos Schaduwvervaging Sterkte: 36px
- Box Shadow Spread-sterkte: -14px
- Schaduwkleur: rgba(0,0,0,0.3)
Voeg een tekstmodule toe aan kolom 2
Voeg inhoud toe
De eerste module die we nodig hebben in de tweede kolom is een andere tekstmodule.
Tekst instellingen
Nadat u de inhoud heeft toegevoegd, bewerkt u de tekstinstellingen voor deze module.
- Tekst:
- Lettergewicht: Ultra Bold
- Lettertype: TT
- Kleur: #ffffff
- Grootte: 23px
- Letterafstand: -1px
Voeg Blurb-module #1 toe aan kolom 2
Voeg inhoud toe
De tweede module die we nodig hebben is een Blurb-module. Ga je gang en voer wat contactgegevens in.
Selecteer het icoon
Kies vervolgens een bijbehorend icoon.
Pictogram instellingen
Wijzig de instellingen voor dit pictogram.
- Pictogramkleur: #ffffff
- Plaatsing afbeelding/pictogram: rechts
Instellingen voor titeltekst
Ga verder door enkele wijzigingen aan te brengen in de instellingen voor de titeltekst.
- Titel tekstgrootte: 15px
- Titelletterafstand: -0,5 pixel
tussenruimte
En voeg een bovenmarge toe.
- Marge (boven): 120px
Kloon de Blurb-module twee keer
Als je klaar bent met het bewerken van de eerste Blurb-module, kun je doorgaan en de module twee keer klonen.
Wijzig de inhoud en het pictogram van de twee duplicaten
Bewerk de inhoud en pictogrammen van de twee duplicaten om verschillende soorten contactgegevens met bezoekers te delen.
Wijzig de afstand tussen de twee duplicaten
De bovenmarge van de twee duplicaten moet ook worden gewijzigd.
- Marge (boven): 30px
Creatie van het contactformulier #3
Voeg een nieuw gedeelte toe
Achtergrond kleur
Laten we verder gaan met het derde voorbeeld! Voeg een nieuwe sectie toe met de volgende achtergrondkleur:
- Achtergrondkleur: #3491CE
tussenruimte
Ga verder door aangepaste opvulwaarden toe te voegen in de afstandsinstellingen.
- Opvulling (boven en onder): 200px
Voeg regel #1 . toe
Structuur van de kolom
Voeg vervolgens een nieuwe rij toe met behulp van de volgende kolomstructuur:
Voeg een tekstmodule toe
Voeg inhoud toe
Het is tijd om modules toe te voegen! De eerste module die we aan de eerste kolom moeten toevoegen, is een tekstmodule. Voer een inhoud naar keuze in.
Tekst instellingen
Wijzig vervolgens de tekstinstellingen.
- Tekst:
- Lettergewicht: Ultra Bold
- Tekstkleur: rgba (255,255,255,0.24)
- Tekstgrootte: 100px (bureaublad), 70px (tablet), 36px (telefoon)
- Lijnhoogte: 1 em
- Oriëntatie: Centrum
tussenruimte
Voeg ook een negatieve ondermarge toe.
- Marge (onder): -100px
Voeg regel 2 . toe
Structuur van de kolom
De tweede rij die we nodig hebben om dit voorbeeld te voltooien, bevat de volgende kolomstructuur:
Achtergrond met kleurovergang
Zonder nog modules toe te voegen, opent u de lijninstellingen en voegt u een verloopachtergrond toe.
- Gradiëntstops:
- 50%: #11CE84
- 50%: #10C77F
- Gradiënttype: Lineair
- Besturing: 160 graden
sizing
Wijzig ook de maatparameters.
- Gebruik aangepaste gootbreedte: JA
- Gootbreedte: 1
- Egaliseer kolomhoogten: JA
tussenruimte
Voeg vervolgens enkele opvulwaarden toe.
- Opvulling: 150px (boven), 100px (onder)
- Opvulling: 50px (links en rechts)
grens
Ga vervolgens naar randinstellingen en voeg '20px' toe aan elk van de hoeken. Gebruik ook een onderrand.
- Afgeronde hoeken: 20px
- Breedte onderste rand: 10px
- Kleur onderrand: #1ba35a
Schaduw doos
Voltooi de lijninstellingen door een subtiele doosschaduw toe te voegen.
- Doos Schaduwvervaging Sterkte: 80px
- Box Shadow Spread-sterkte: -24px
- Schaduwkleur: rgba(0,0,0,0.3)
Voeg de module Contactformulier toe aan kolom 1
Activeer de optie "Make Fullwidth" in het veld Naam en e-mail
De eerste module die we nodig hebben in de eerste kolom van de rij is een Contact Form module. Open het naam- en e-mailveld en wijzig de lay-outinstellingen.
- Maak volledige breedte: JA
Communie
Schakel dan de captcha uit.
- Gebruik Basic Captcha: NEE
Knop instellingen
En verander de knopinstellingen.
- Gebruik aangepaste stijlen voor knop: JA
- Tekstkleur knop: #ffffff
- Gradiëntstops:
- 50%: #3AA0E3
- 50%: #3491CE
- Verlooptype: lineair
- Gradiëntrichting: 155 graden -
- Breedte knoprand: 0 pixels
- Knoprandstraal: 10px
- Box Shadow Spread-sterkte: -2px
- Schaduwkleur: #0a60af
Zie ook: Divi: het winkelmandje en de zoekpictogrammen van de module "Fullwidth Menu" aanpassen
grens
We voegen ook '5px' afgeronde hoeken toe aan elk van de velden.
Voeg een tekstmodule toe aan kolom 2
Voeg inhoud toe
In de tweede kolom is de eerste module die we nodig hebben een tekstmodule. Ga je gang en voer wat inhoud in.
Achtergrond kleur
Verander dan de achtergrondkleur.
- Achtergrond: rgba(255,255,255,0.13)
Tekst instellingen
Bewerk ook met tekstinstellingen.
- Tekst:
- Lettergewicht: licht
- Tekstkleur: #ffffff
- Tekstgrootte: 15px
- Letterafstand: -0,5 px
tussenruimte
En voeg aangepaste opvulling toe om de module ruimte te geven om te ademen.
- Opvulling (boven en onder): 12px
- Opvulling (links en rechts): 10px
grens
We voegen ook '20px' toe in de linkerbovenhoek en linkerbenedenhoek. Bovendien voegen we een linkerrand toe.
- Afgeronde hoeken: 20px (linksboven en linksonder)
- Breedte linkerrand: 34px
- Kleur linkerrand: #edf000
zichtbaarheid
Om dit ontwerp bij verschillende schermformaten te laten passen, schakelen we de tekstmodule op de telefoon en tablet uit.
Kloon de tekstmodule twee keer
Als je klaar bent met het bewerken van de eerste tekstmodule, ga je gang en kloon je de module twee keer.
Wijzig de inhoud van de twee duplicaten
Wijzig de inhoud van de twee duplicaten in iets anders.
Wijzig de afstand tussen de twee duplicaten
En voeg een bovenmarge toe om ruimte te creëren tussen elk van de modules.
- Marge (boven): 20px
Wijzig de rand van de twee duplicaten
Wijzig ten slotte de kleur van de linkerrand van elk van de duplicaten afzonderlijk.
- Kleur 1: #00faff
- Kleur 2: #00f76f
Zie ook ons artikel over Een responsieve accordeonschuifregelaar maken
overzicht
Desktop versie
Nu we alle stappen hebben doorlopen, laten we een laatste blik werpen op de ontwerpen van de Divi Contact Form-module op desktop.
Mobile
En dit is wat u kunt verwachten van Divi's ontwerpen van contactformuliermodules op kleinere schermformaten:
Download DIVI nu!!!
Conclusie
In dit bericht hebben we 3 geweldige Divi Contact Form-moduleontwerpen gedeeld die u gemakkelijk kunt gebruiken en aanpassen voor elke website die u maakt.
de vormen Contacten zijn een essentieel onderdeel van veel websites, dus het is belangrijk om ervoor te zorgen dat uw ontwerp uw bezoekers overtuigt om contact op te nemen.
We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren.
Aarzel niet om ook onze gids te raadplegen over de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...