De Divi Gradient Builder gebruiken om cirkelvormige achtergrondvormen te ontwerpen

Rifat T May 18, 2022

Met Divi 's Gradient Builder kun je een breed scala aan achtergronden maken. De kleuren combineren om vormen en patronen te maken die moeilijk alleen te maken zouden zijn. De Gradient Builder in Divi heeft instellingen die het gemakkelijk maken om cirkelvormige patronen te maken, zoals een ronde achtergrondvorm. Dit maakt het gemakkelijk om unieke achtergronden te creëren. In dit bericht zullen we bekijken hoe je de Divi Gradient Builder kunt gebruiken om unieke cirkelvormige achtergrondvormen te maken die de aandacht vestigen op elke sectie of kolom.

Ontwerpvoorbeeld

Hier is een vooruitblik van wat we vandaag gaan bouwen. Hier is het eerste ronde ontwerp van de achtergrondvorm.

Hier is het 2e cirkelvormige ontwerp als achtergrond.

Ontwerpmodule

In plaats van een Divi-layoutsectie, zullen we een aangepaste sectie maken voor deze zelfstudie. De sectie heeft een rij met twee kolommen van gelijke grootte nodig voor de inhoud.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

In de linkerkolom wordt een scheidingslijn geplaatst. Dit zal niet blijken. Hiermee kan onze kolom 1-achtergrond worden weergegeven op kleinere schermformaten. Op kleinere schermen worden alleen kolommen met modules weergegeven. In de rechterkolom worden twee tekstmodules en een contactformulier opgenomen.

Voeg de volgende modules overeenkomstig aan de rij toe.

Sectie Instellingen

Klik op het tandwielpictogram om de instellingen van de sectie weer te geven. Verander dan de achtergrondkleur.

  • Achtergrondkleur: #fff7ef

Scrol op het tabblad Ontwerpen omlaag naar het gedeelte Afstand en breng de volgende wijzigingen aan in de opvulling.

  • Boven: 0px
  • Onder: 0px

Rij-instellingen

Open de rij-instellingen en wijzig de volgende waarden dienovereenkomstig.

  • Kolomhoogten egaliseren: Ja
  • Breedte: 100%
  • Max. Breedte: Geen

Wijzig nu de opvulwaarde vanuit het gedeelte tussenruimte.

  • Vulling: 0px boven, 0px onder

Kolominstellingen

Wijzigingen in de kolomafstand zijn de volgende stap. Tijdens het maken van de cirkelvormige achtergronden keren we terug naar de kolominstellingen. Open de instellingen voor de eerste kolom en breng de wijzigingen aan op het ontwerptabblad.

  • Boven: 8vw
  • Bodem: 8vw
  • Links: 10%
  • Rechts: 10%

Open nu de tweede kolom en breng de volgende wijzigingen aan.

  • Boven: 8vw
  • Bodem: 8vw
  • Rechts: 12%

Verdeelmodule

Open de instelling van de scheidingsmodules in de 1e kolom en wijzig de zichtbaarheid.

  • Zichtbaarheid tonen: Nee

Ga daarna naar het ontwerptabblad en zoek naar het gedeelte Afstand. Selecteer de tablet tab en voeg 15 volt toe aan de vulling aan de boven- en onderkant. De instellingen van de tablet worden gesynchroniseerd met de telefoon.

  • Vulling (tablet): 15vH boven, 15vh onder

Tekstmodule 1

Ga nu naar de eerste tekstmodule in de 2e kolom. Het zal fungeren als titel voor het contactformulier. Wijzig het volgende:

  • Lichaamsinhoud: Neem contact op

Ga naar het ontwerptabblad en wijzig het lettertype en de lettergewicht.

  • Lettertype: Inter
  • Lettergewicht: Licht

Wijzig ook de volgende instellingen.

  • Kleur: #000000
  • Lettergrootte: 78px (desktop), 44px (tablet), 28px (telefoon)
  • Lijnhoogte: 1.1em

Tekstmodule 2

Open de instellingen van de tweede tekstmodule en voeg een beschrijving toe.

Ga naar het ontwerptabblad en voeg de volgende waarden toe aan de aangewezen plaatsen.

  • Lettertype: Inter
  • Lettergewicht: Licht
  • Kleur: #000000

Wijzig ook de volgende waarden.

  • Lettergrootte: 24px (desktop), 20px (tablet), 16px (telefoon)
  • Lijnhoogte: 1.6em

Contactformuliermodule

Open de instellingen voor de contactformuliermodule en activeer Gebruik een Spam Protection Service onder Spam Protection. Geef spambeveiligingsservice in Divi Email Opt-in een leesopdracht om meer te weten.

  • Gebruik een Spam Protection Service: Ja

Velden ontwerp

Ga naar het ontwerp-tabblad van het contactformulier en wijzig de genoemde instellingen.

  • Achtergrondkleur van velden: rgba(0,0,0,0)
  • Tekstkleur: #000000

Breng vervolgens enkele wijzigingen aan in het lettertypegedeelte.

  • Lettertype: Inter
  • Grootte: 16px
  • Lijnhoogte: 1.6em

Knop ontwerp

Scrol omlaag naar de knopoptie en wijzig het volgende.

  • Gebruik aangepaste stijlen: Ja
  • Tekstgrootte: 16px
  • Tekstkleur: #ffffff
  • Achtergrondkleur: #b35330

Verander ook de randradious, het lettertype en het gewicht.

  • Grensstraal: 100px
  • Lettertype knop: Inter
  • Gewicht: gemiddeld

Wijzig nu de instellingen voor het opvullen van knoppen.

  • Knopvulling: 16px (boven, onder), 40px (links, rechts)

Veldrand

Ga nu naar de instelling Rand en breng deze wijzigingen aan.

  • Invoer Randbreedte: 1px
  • Invoerrandkleur: #b35330

Lokale instellingen

Verander de grootte van het veld en maak ze over de volledige breedte.

Sectie Klonen

Dupliceer nu de bestaande sectie 1 keer zodat we in totaal 2 secties kunnen hebben. We gaan er verschillende achtergrondkleuren aan toevoegen.

Achtergrondverloop toepassen

We voegen het achtergrondverloop toe aan de linkerkolom van de rij voor elk van onze cirkelvormige achtergronden. Sommige hebben verloopstops die kunnen worden gestapeld, en andere zullen dezelfde kleuren gebruiken. Het verloop wordt gewijzigd als de stapelvolgorde onjuist is, let hier dus goed op. Er zullen verschillende eenheden worden gebruikt, maar ze beginnen allemaal met een percentage als basis.

Open de rij-instellingen en klik op de eerste kolominstellingen. Blader vervolgens naar de achtergrond en ga naar de verloopachtergrond.

U kunt een verloopstop aan de balk toevoegen door erop te klikken. Door ze te plukken, kun je hun kleur veranderen. Naarmate we verder gaan, veranderen we de percentages op de verloopbalk.

Ronde achtergrondvorm één

Er worden vijf verloopstops gebruikt om een ​​cirkelvormige achtergrond te creëren met veel cirkels binnen cirkels.

Gradiëntstop 1

Volg de instellingen voor 1e hellingstop.

  • Positie: 29
  • Kleur: #ffb482

Gradiëntstop 2

Volg de instellingen voor 2e hellingsstop.

  • Positie: 31
  • Kleur: #a84321

Gradiëntstop 3

Volg de instellingen voor 3e verloopstop.

  • Positie: 51
  • Kleur: #ffc99b

Gradiëntstop 4

Volg de instellingen voor de 4e verloopstop.

  • Positie: 63
  • Kleur: #ffc99b

Gradiëntstop 5

Volg de instellingen voor 5e verloopstop.

  • Positie: 78
  • Kleur: #ffb67f

Instelling voor verloop

Verloopinstellingen moeten worden gewijzigd in Cirkelvormig en gecentreerd. Schakel Verloop plaatsen boven achtergrondafbeelding in, Verloop herhalen en eenheden wijzigen in pixels.

  • Type: Rond
  • Positie: Midden
  • Verloop herhalen: Ja
  • Gradiënteenheid: Pixels
  • Plaats verloop boven achtergrondafbeelding: Ja

Hier is onze uitvoer voor circulaire achtergrondvorm 1.

Ronde achtergrondvorm twee

Er zullen in totaal vijf gradiëntstops zijn in onze tweede cirkelvormige achtergrondvorm. Een deel van een cirkelvormig patroon zal vanuit een hoek worden gezien.

Gradiëntstop 1

Volg de instellingen voor 1e hellingstop.

  • Positie: 31
  • Kleur: #a84321

Gradiëntstop 2

Volg de instellingen voor 2e hellingsstop.

  • Positie: 51
  • Kleur: #ffb482

Gradiëntstop 3

Volg de instellingen voor 3e verloopstop.

  • Positie: 52
  • Kleur: #ffc99b

Gradiëntstop 4

Volg de instellingen voor de 4e verloopstop.

  • Positie: 63
  • Kleur: #ffc99b

Gradiëntstop 5

Volg de instellingen voor 5e verloopstop.

  • Positie: 78
  • Kleur: #ffb67f

Instellingen voor verloop

De volgende stap is het wijzigen van de hellingen. Schakel over naar Circular en plaats deze op de locatie rechtsboven. Gebruik Verloop herhalen, Pixels als eenheid en Verloop boven achtergrondafbeelding plaatsen om een ​​naadloze achtergrondafbeelding te maken. Sluit de module en sla uw configuratie op.

  • Type: Rond
  • Positie: Rechtsboven
  • Verloop herhalen: Ja
  • Gradiënteenheid: Percentage
  • Plaats verloop boven achtergrondafbeelding: Ja

Hier is onze uitvoer voor circulaire achtergrondvorm 2.

Afsluiten

Dit besluit onze tutorial over het maken van aangepaste cirkelvormige achtergrondvormen met de Divi Gradient Builder. Nu kunt u gemakkelijk opvallende achtergronden maken met de Gradient Builder. Het gebruik van ronde vormen is een geweldige manier om een ​​sectie of kolom visueel interessant te maken. Iedereen kan snel en gemakkelijk opvallende cirkelvormige patronen maken door de instructies hier te volgen. U moet experimenteren met de parameters en de stapelvolgorde om te zien wat u kunt bedenken. Bekijk andere Divi-tutorials , wie weet is er iets nuttigs voor het volgende project.

Divi WordPress Theme