Share on facebook
Share on google
Share on twitter
Share on linkedin

Leer hoe je blob-achtergrondafbeeldingen kunt genereren en toevoegen in Elementor

Leer hoe je blob-achtergrondafbeeldingen kunt genereren en toevoegen in Elementor

Sinds de Elementor update in januari is het mogelijk om zwaardere, pittige en device-agnostische achtergronden toe te voegen. Het toevoegen van achtergrondafbeeldingen aan secties wordt veel gedaan binnen het designen van websites. Echter is het belangrijk dat achtergrondafbeeldingen op een evenwichtige manier naar context worden toegevoegd.

Een eenvoudige en handige manier om achtergrondafbeeldingen toe te voegen is door middel van blobs. Op dit moment zijn blobs een populaire trend. Daarnaast zijn de ontwerppatronen van blobs zeer flexibel omdat ze een neutrale textuur bieden. Door de discrete ontwerpaanraking wordt de leesbaarheid niet verstoort. Blobs zijn relatief eenvoudig in vormformaat. Door de gebogen gladheid van blobs, maakt het voor het oog een uitstekende kandidaat voor achtergrond-overlays

Maak gebruik van de Blobmaker.app

De makers achter de blob generator zijn zcreativelabs. De blobmaker is een geweldig hulpmiddel waarmee je zelf .SVG blog-afbeeldingen kunt genereren, ongeacht de kleur. Ga naar blobmaker.app en je zult verstelt staan. Het is namelijk kinderlijk eenvoudig om zelf een blob te ontwikkelen. Er wordt gebruik gemaakt van een eenvoudige interface met een paar bediedingselementen zoals kleur, complexiteit en contrast. Meer heb je niet nodig om mooie blogs te ontwikkelen.

Blobmaker

Waarom een SVG afbeelding gebruiken?

SVG, staat voor schaalbare vectorafbeeldingen. Zoals de naam al suggereert zijn dit vectorafbeeldingen die scherp schalen naar elke schermresolutie en schaal. Verwacht hier dus geen pixelatie.

Eenmalig SVG uploads inschakelen

Het uploaden van SVG-bestanden van onbekende bronnen kan potentiele beveilingsrisico’s vormen. We raden aan om alleen bestanden van vertrouwde bronnen te uploaden. Schakel deze functie alleen in nadat je de betrokken beveiligingsrisico’s begrijpt en accepteert. 

Om SVG-bestanden in te schakkelen voer je de volgende stappen uit:

  • Ga naar Elementor – Settings – Geavanceerd
  • Enable SVG uploads – Inschakelen

Het is nu mogelijk om SVG’s te uploaden.

SVG inshakelen

De blob-afbeelding instellen als achtergrondoverlay in Elementor

De implementatie opties van een blob zijn letterlijk oneindig. Om het eenvoudig te houden gebruiken we gewoon een random blob om een nette ontwerpaanpassing toe te voegen aan een sectie.

De blob is eenvoudig gegenereerd in de blobmaker.app. Daarnaast is de SVG-bestand al toegevoegd aan de mediagalerij in WordPress.

De eerste stap is om een achtergrondkleur in te stellen voor de sectie. Vervolgens ga ik naar overlay achtergrond en kies ik de blob uit mijn mediagalerij. De positie van de blob is center-center – niet herhalen – aangepast formaat en positie.

blob als achtergrondoverlay

Tips

Er zijn nog een aantal dingen het vermelden waard tijdens het spelen met een blob-afbeelding.

  • Gebruik blobs niet te veel. Ze licht en gaaf, maar wees voorzichtig. Je wilt dat het een accent is op je ontwerp en niet het ontwerp zelf.
  • Gebruik ze alleen als ze zijn uitgelijnd en passend bij je huisstijl
  • Experimenteer met de dekking voor een beter blob effect
  • Gebruik consistente kleuren, zorg ervoor dat de blob kleur binnen het kleurenpallet van jouw huisstijl valt.
  • Gebruik alleen blobs van bekende bronnen.

Heb je al een blob-ontwerp geimplementeerd? Plaats dan een link in het opmerkingsgedeelte. Lukt het niet om een blob toe te voegen aan jouw website? Wij helpen je graag verder.

Betaalbare responsive website in Rotterdam

Wil je meer info over websites?

Een nieuwe website al vanaf
€249,-
Bekijk prijzen

Blijf
op de hoogte

Ontvang aanbiedingen, acties & blijf op de hoogte van recente ontwikkelingen.

Scroll naar top

Afspraak maken bij jou thuis of op kantoor? Maak vandaag nog een gratis afspraak!