Rand- en achtergrondafbeeldingen blijven populaire ontwerpelementen bij het bouwen van websites. Door de juiste achtergrondafbeeldingen te gebruiken, kunt u persoonlijkheid en stijl aan uw site toevoegen zonder tijd en geld te besteden aan aangepaste afbeeldingen. En randen zijn handig om structuur aan te brengen inhoud.
Vandaag gaan we deze twee dingen samenbrengen door achtergrondafbeeldingen als randen te ontwerpen. Divi heeft een reeks handige opties voor het aanpassen van achtergrondafbeeldingen, waardoor het gemakkelijk wordt om achtergrondafbeeldingen te ontwerpen voor unieke randontwerpen. Hierdoor kunnen we kleuren, verlopen, kaderschaduwen en overvloeimodi op allerlei creatieve manieren combineren.
Laten we beginnen.
Wat je nodig hebt om te beginnen
Om te beginnen heb je het volgende nodig:
- Le Divi-thema geïnstalleerd en actief
- Een nieuwe pagina gemaakt om helemaal opnieuw te bouwen op de front-end (visuele constructor)
- Afbeeldingen om voor te gebruiken inhoud fictief
Daarna heb je een leeg canvas om in te ontwerpen Divi.
Algemene tips voor het maken van randpatronen voor achtergrondafbeeldingen
Voordat u begint met bouwen, zijn hier enkele algemene tips om in gedachten te houden bij het maken van randpatronen voor de achtergrondafbeelding.
# 1 Kies afbeeldingen met veel textuur
Meestal wilt u dat uw grenzen smaller zijn. Dit betekent dat u niet veel van de afbeelding kunt zien. Het is daarom handig om afbeeldingen te gebruiken die veel textuur hebben. U kunt bijvoorbeeld een foto van een landschap, een bos bloemen of een hoge toren gebruiken. Hier zijn enkele afbeeldingen die ik gebruik voor deze tutorial.
# 2 Gebruik verlopen en transparantie met de randen van de achtergrondafbeelding
Achtergrondafbeeldingen kunnen op zichzelf soms een mooie rand voor uw interieur zijn inhoud. Maar meestal wilt u overlays aan uw achtergrondafbeelding toevoegen om kleur te verkrijgen of om achtergronden donkerder of lichter te maken. Achtergrondverlopen zijn een geweldige manier om gelaagdheid aan uw achtergrondafbeeldingen toe te voegen en unieke randontwerpen te creëren.
# 3 Gebruik de samenvoegmodi
Door overvloeimodi op uw achtergrondafbeeldingen te gebruiken, kunt u unieke kleuren en texturen toepassen op randpatronen. Het enige dat u hoeft te doen, is een achtergrondkleur of verloop toevoegen aan uw achtergrondafbeelding en vervolgens een overvloeimodus voor de achtergrondafbeelding selecteren. Kleur, Helderheid, Vermenigvuldiging en Scherm zijn enkele geweldige overvloeimodi voor de randen van achtergrondafbeeldingen.
Gebruik afgeronde hoekopties voor unieke vormen
Niet alle randen hoeven rechte randen te hebben. Meng het een beetje! Opties voor afgeronde hoeken Divi kunt u deze hoeken creatief vormgeven.
Gebruik parallax-achtergrondafbeeldingen als randen
Het mooie van parallax is dat het design tot leven brengt met beweging. Als u bovendien achtergrondafbeeldingen met parallax gebruikt voor uw randontwerpen, kunt u subtiele bewegingen creëren die opvallen en uw inhoud laten opvallen.
Randontwerp achtergrondafbeelding in Divi
Nu we het algemene idee begrijpen dat ten grondslag ligt aan het creëren van grenspatronen voor de achtergrondafbeelding, laten we er een paar samen voorstellen. We zullen 2 verschillende modellen bouwen. Elke module heeft een eenvoudige presentatiemodule om als fictieve inhoud te dienen. En we zullen de kolomparameters gebruiken om de achtergrondafbeeldingrand van de module toe te voegen.
Laten we beginnen met ons eerste ontwerp.
#1 grens achtergrondafbeelding
Dit eerste ontwerp heeft een smalle achtergrondafbeeldingsrand met een gebiedsschaduw om het meer op een frame voor de inhoud te laten lijken.
Hier is hoe het te ontwerpen.
Voeg eerst een rij van twee kolommen toe aan een gewone sectie.
Samenvatting module toevoegen
Voeg vervolgens een blurb-module in de linkerkolom toe.
Zodra de blurb op zijn plaats is, opent u de instellingen voor blast-tekst en extraheert u de standaardafbeelding zodat alleen de titel en de inhoud van het hoofdgedeelte zichtbaar zijn.
Geef vervolgens uw tekst een witte achtergrond.
Werk vervolgens de parameters van het presentatieontwerp als volgt bij:
- Teksttitel: Oswald
- Lichaamspolitie: Lato
- Marge 5% bovenaan, 5% onderaan, 5% links, 5% rechts
- Bekleding: 7% bovenaan, 7% onderaan, 10% links, 10% rechts
- Afgeronde hoeken: 20px rechtsboven, 20px linksonder
- Box Shadow: zie screenshot
Voeg een achtergrondafbeelding toe aan de kolom
Dit zorgt voor onze presentatiemodule. Laten we nu onze achtergrondafbeeldingsrand toevoegen. Om dit te doen zullen we een achtergrondafbeelding toevoegen aan de kolom met de Blurb-module. Open de rij-instellingen, vervolgens de instellingen voor kolom 1 en voeg de volgende achtergrond toe:
- Achtergrondafbeelding: [upload de afbeelding van uw keuze]
- Achtergrondkleur: #303a7a
- Mengsel Achtergrondafbeelding: Helderheid
Werk vervolgens de afgeronde hoeken en de schaduw van de doos als volgt bij:
- Afgeronde hoeken: 20px rechtsboven, 20px linksonder
- Box Shadow: zie screenshot
Eindresultaat
Controleer nu het definitieve ontwerp.
Rand achtergrondafbeelding # 2
Dit volgende ontwerp benadrukt het feit dat het gebruik van sterk gestructureerde afbeeldingen prachtige randen kan creëren, vooral wanneer u ze combineert met de overvloeimodi voor afbeeldingen.
Hier is hoe het te ontwerpen.
Voeg de Blurb-module toe
Om het ontwerp te maken, gaan we de blurb-tekst toevoegen aan kolom 2 van dezelfde rij die ontwerp # 1 bevat. Ga je gang en kopieer ontwerplay-outmodule # 1 en plak deze in kolom 2. Vervolgens, update de instellingen van de presentatiemodule als volgt:
- Afgeronde hoeken: standaardinstellingen herstellen
- Marge: 10% bovenaan, 10% onderaan, 10% links, 10% rechts
- Bekleding: 15% bovenaan, 15% onderaan, 10% links, 10% rechts
- Breedte van de rand: 1px
- Randkleur: #ffffff
Voeg een achtergrondafbeelding toe aan de kolom
Open onze lijn en open de lijninstellingen en voeg een achtergrondverloop toe aan de 2-kolom.
- Verloop achtergrond links: #f7e0a5
- Rechter achtergrondverloop Kleur: rgba (237,240,0,0.79)
- Richting van de helling: 90eg
- Startpositie: 50%
- Eindpositie: 0%
Voeg vervolgens een achtergrondafbeelding toe met een mooi verloopeffect.
- Achtergrondafbeelding: [download afbeelding]
- Achtergrondafbeelding mix: kleur
Zoals u kunt zien, behoudt de kleurovervloeimodus de helderheid van de twee kleurovergangen achter de afbeelding om een mooi afbeeldingsrandpatroon met zachte kleuren te creëren.
Eindresultaat
Ontdek het eindresultaat van het ontwerp.
Laatste gedachten
Het creëren van randen met afbeeldingen is een gemakkelijke manier om schoonheid en persoonlijkheid aan uw ontwerp toe te voegen. Het ontwerp dat in deze tutorial wordt benadrukt, is gemaakt om de mogelijkheden van Divi te benadrukken bij het ontwerpen van unieke randen. Daarom zijn de ontwerpen met de verschillende kleurencombinaties grenzeloos. Dus, verkrijg wat afbeeldingen en ontdek meer het ontwerp van randen met afbeeldingen op Divi.
Voor je gezondheid.
