Studio Editor: De achtergrond van een onderdeel wijzigen en aanpassen
Leestijd 11 minuten
Ontwerp elk onderdeel op de website die je maakt. Je kunt een kleur, kleurverloop, afbeelding of video voor de achtergrond kiezen en patroonoverlays en scrolleffecten toevoegen om het uiterlijk verder aan te passen.
Werken met breekpunten:
Je kunt de achtergrond van het onderdeel voor elk breekpunt instellen om ervoor te zorgen dat het er op elk apparaat ideaal uitziet.
In dit artikel lees je hoe je:
Tip:
Om het ontwerpproces te versnellen, hebben we talloze kant-en-klare en volledig responsieve onderdelen onder Onderdelen in het Elementen toevoegen-paneel.
Een kleur toevoegen aan de achtergrond van het onderdeel
Kies een kleur voor de achtergrond van je onderdeel, of het nu een van je themakleuren of een aangepaste kleur is. Je kunt vervolgens de dekking instellen als je de voorkeur geeft aan een meer ingetogen achtergrond.
Om de achtergrondkleur van een onderdeel te wijzigen:
- Selecteer het onderdeel.
- Klik rechtsboven in de Editor op het Inspector openen-pictogram
. - Klik onder Ontwerp op het kleurvak.
- Selecteer een kleur, afhankelijk van je voorkeur:
- Themakleuren: Kies een van je websitekleuren.
- Mijn kleuren: Kies een bestaande aangepaste kleur.
- Een nieuwe kleur: Klik op + Toevoegen om een nieuwe kleur toe te voegen aan de kleurkiezer.
- (Optioneel) Gebruik de schuifregelaar om de dekking van de kleur te vergroten of te verkleinen.
Een kleurverloop toevoegen aan de achtergrond van het onderdeel
De Studio Editor biedt verschillende soorten overgangen voor de achtergrond van je onderdeel:
- Radiaal, lineair of conic
: Kies maximaal acht kleuren en bepaal de dekking van elke afzonderlijke kleur in deze overgangen. Je kunt ook de hoek (lineair), het focuspunt (radiaal) of beide (conic) aanpassen om de gewenste look te bereiken. - Vloeiende overgang
:Met deze overgang kun je een mesh-effect creëren door zoveel kleuren te laten overvloeien als je nodig hebt. Je kunt de dekking, grootte en spreiding van elke afzonderlijke kleur in dit kleurverloop regelen.
Om een overgangsachtergrond aan een onderdeel toe te voegen:
- Selecteer het onderdeel.
- Klik rechtsboven in de Editor op het Inspector openen-pictogram.
- Klik onder Ontwerp op het kleurvak.
- Afhankelijk van je voorkeur, klik je hieronder om te lezen hoe je elk type kleurovergang maakt:
Een lineaire, radiale of conic kleurovergang toevoegen
.
.
.
Voeg een vloeiend verloop toe
.
Een afbeelding toevoegen aan de achtergrond van het onderdeel
Voeg een afbeelding toe aan de achtergrond van je onderdeel en pas het focuspunt aan zodat het relevante onderdeel altijd wordt weergegeven. Je kunt je eigen geüploade afbeeldingen gebruiken, een gratis afbeelding van Wix / Unsplash kiezen of een Shutterstock-afbeelding kopen.
Tip:
Je kunt een kleur- of overgangsoverlay bovenop je afbeelding toevoegen. Klik op het kleurvak om een kleur of overgang te selecteren en sleep vervolgens de schuifregelaar om de dekking van deze laag aan te passen.
Om een afbeeldingsachtergrond toe te voegen aan een pagina-onderdeel:
- Selecteer het onderdeel.
- Klik rechtsboven in de Editor op het Inspector openen-pictogram.
- Klik onder Media op + Afbeelding of video toevoegen.
- (In de Media Manager) Kies wat je nu wilt doen:
- Selecteer of upload je eigen afbeelding.
- Klik op het Media van Wix- / Unsplash-tabblad om een van onze gratis afbeeldingen te gebruiken.
- Klik op het Shutterstock-tabblad om een afbeelding van Shutterstock te kopen.
- Klik op Achtergrond wijzigen.
- (Optioneel) Pas de achtergrond van je afbeelding aan in het Inspector-paneel:
- Focuspunt
: Selecteer het deel van de afbeelding dat altijd zichtbaar moet zijn, zelfs wanneer het formaat van het scherm wordt aangepast. - Dekking: Sleep de schuifregelaar om de zichtbaarheid van de afbeelding te wijzigen.
- Aanpassingsopties: Klik op de dropdown om te kiezen hoe deze afbeelding in het onderdeel moet passen.
- Focuspunt
- (Optioneel) Klik op het Scrolleffecten-pictogram
om een scrolleffect te kiezen (bijvoorbeeld: parallax).
Heb je een website bijgewerkt van Editor X naar Studio?
Als je een parallax-effect op een achtergrondafbeelding hebt toegepast, blijft het hetzelfde in Studio – tenzij je het effect verwijdert of de afbeelding vervangt.
In de Studio Editor kun je op een van de volgende manieren een parallax-effect aan een afbeelding toevoegen:
- Stel de afbeelding in als achtergrond van het onderdeel en pas vervolgens een scrolleffect op de achtergrond toe op het onderdeel.
- Voeg de afbeelding toe aan het onderdeel en pas vervolgens een parallax-animatie toe op de afbeelding. Zorg ervoor dat je geen andere animaties op de afbeelding toepast.
Een video toevoegen aan de achtergrond van het onderdeel
Voeg een video-achtergrond toe om een gevoel van beweging aan je onderdeel toe te voegen. Je kunt het focuspunt van de video kiezen, de afspeelsnelheid wijzigen en beslissen of de video al dan niet in een lus wordt afgespeeld.
We hebben een hele bibliotheek met gratis video's die je als achtergrond kunt gebruiken, maar je kunt ook je eigen bestanden gebruiken of een video van Shutterstock kopen.
Tip:
Je kunt een kleur- of overgangsoverlay toevoegen bovenop je video-achtergrond. Klik op het kleurvak om een kleur of overgang te selecteren en sleep vervolgens de schuifregelaar om de dekking van deze laag aan te passen.
Om een video-achtergrond toe te voegen aan een pagina-onderdeel:
- Selecteer het onderdeel.
- Klik rechtsboven in de Editor op het Inspector openen-pictogram.
- Klik onder Media op + Afbeelding of video toevoegen.
- (In de Media Manager) Kies wat je nu wilt doen:
- Selecteer of upload je eigen video.
- Klik op het Media van Wix- / Unsplash-tabblad om een van onze gratis video's te gebruiken.
- Klik op het Shutterstock-tabblad om een video van Shutterstock te kopen.
- Klik op Achtergrond wijzigen.
- (Optioneel) Pas je video-achtergrond aan in het Inspector-paneel:
- Focus: Klik op het Focuspunt-pictogramom het gebied in de video te selecteren dat altijd zichtbaar moet zijn, zelfs wanneer het formaat van het scherm wordt aangepast.
- Dekking: Sleep de schuifregelaar om de zichtbaarheid van de video te wijzigen.
- Afspeelsnelheid: Klik op de dropdown om de snelheid te selecteren (bijvoorbeeld Normaal, 0,25x, 1,25x).
- Afspelen in een lus: Klik op de schakelaar om de manier waarop de video wordt afgespeeld te wijzigen:
- Ingeschakeld: De video wordt in een oneindige lus op de achtergrond afgespeeld.
- Uitgeschakeld: De video wordt slechts één keer afgespeeld voor bezoekers en stopt dan.
- Focus: Klik op het Focuspunt-pictogram
Wil je het live zien?
Klik op de Afspelen-knop op je video om te zien hoe deze er direct op het canvas uitziet.
Een patroonoverlay toevoegen aan de achtergrond van het onderdeel
Pas een interessant patroon toe op de achtergrond van je onderdeel.We hebben een verscheidenheid aan patronen om uit te kiezen, in verschillende kleuren en maten. Blader door de lijst en klik op patronen die je mooi vindt om te zien hoe ze opgaan in de achtergrond.
Om een patroonoverlay toe te voegen aan de achtergrond van het onderdeel:
- Selecteer het onderdeel.
- Klik rechtsboven in de Editor op het Inspector openen-pictogram.
- Schakel onder Achtergrond overlay de Patroonoverlay toepassen-schakelaar in.
- Blader door de beschikbare patronen. Klik op een patroon om het als overlay toe te voegen en te zien hoe het past op je achtergrond.
Een scrolleffect toevoegen aan de achtergrond van het onderdeel
Scrolleffecten op de achtergrond voegen een gevoel van beweging toe aan onderdelen wanneer bezoekers op en neer over de website scrollen. Er zijn talloze effecten om uit te kiezen (bijvoorbeeld Parallax, 3D, Inzoomen), die allemaal de inhoud van je klant kunnen laten opvallen.
Let op:
De beschikbare scrolleffecten zijn afhankelijk van het achtergrondtype dat je voor het onderdeel hebt gekozen.
Om een achtergrond-scrolleffect toe te voegen:
- Selecteer een pagina-onderdeel.
- Klik op het Scrolleffecten-pictogram
.
- Selecteer een effect uit de lijst.
Vond je dit artikel nuttig?
|