Studio Editor: De achtergrond van een onderdeel wijzigen

Leestijd 10 minuten
Ontwerp elk onderdeel om te passen bij de behoeften van je klant. Je kunt een kleur, kleurovergang, afbeelding of video kiezen voor de achtergrond van je onderdeel. Voeg een interessante patroonoverlay toe en pas de dekking aan zodat de achtergrond niet te veel aandacht van de inhoud afleidt. 
Werken met breekpunten:
Je kunt de achtergrond van het onderdeel per breekpunt instellen, zodat 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:

  1. Selecteer het onderdeel.
  2. Klik rechtsboven in de Editor op het Inspector openen-pictogram.
  3. Klik onder Ontwerp op het kleurvak.
  4. 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. 
  5. (Optioneel) Gebruik de schuifregelaar om de dekking van de kleur te vergroten of te verkleinen.
Een kleur kiezen voor de achtergrond van het onderdeel uit de kleurkiezer in het Inspector-paneel in de Studio Editor

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:

  1. Selecteer het onderdeel.
  2. Klik rechtsboven in de Editor op het Inspector openen-pictogram.
  3. Klik onder Ontwerp op het kleurvak.
  4. Afhankelijk van je voorkeur, klik je hieronder om te lezen hoe je elk type kleurovergang maakt:
Een vloeiend verloop instellen voor de achtergrond van het onderdeel in de Studio Editor

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:

  1. Selecteer het onderdeel.
  2. Klik rechtsboven in de Editor op het Inspector openen-pictogram.
  3. Klik onder Media op + Afbeelding of video toevoegen
  4. (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. 
  5. Klik op Achtergrond wijzigen.
  6. (Optioneel) Pas de achtergrond van je afbeelding aan in het Inspector-paneel:
    • Focus: Klik op het Focuspunt-pictogramom het deel van de afbeelding 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 afbeelding te wijzigen.
    • Aanpassingsopties: Klik op de dropdown om te kiezen hoe deze afbeelding in het onderdeel moet passen.
Een afbeelding toepassen op de achtergrond van het onderdeel vanuit het Inspector-paneel in de Studio Editor

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:

  1. Selecteer het onderdeel.
  2. Klik rechtsboven in de Editor op het Inspector openen-pictogram.
  3. Klik onder Media op + Afbeelding of video toevoegen.
  4. (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.
  5. Klik op Achtergrond wijzigen.
  6. (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.
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 voorbeeld van een video-achtergrond bekijken op het canvas in de Studio Editor

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:

  1. Selecteer het onderdeel.
  2. Klik rechtsboven in de Editor op het Inspector openen-pictogram.
  3. Schakel onder Achtergrond overlay de Patroonoverlay toepassen-schakelaar in. 
  4. 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.  
De beschikbare patroonoverlays in de Studio Editor verkennen en ze toepassen op een bestaand onderdeel

Vond je dit artikel nuttig?

|