Een afbeelding toevoegen.

DXPR Builder lerenPagina’s bouwenContent toevoegenTekst en media

Voeg een foto of illustratie toe die zijn kolom vult en meeschaalt met het scherm.

Kleurrijk wervelkunstwerk getoond met het afbeeldingselement van DXPR Builder

Een afbeelding toevoegen

Open je pagina terwijl je bent ingelogd: de builder-knoppen verschijnen als je met de muis over het inhoudsgebied beweegt. Je eerste pagina legt de basis uit.

  1. Beweeg over de kolom en klik op + in de besturingsbalk, of klik op Add Elements op een lege pagina. Open het tabblad Inhoud en klik op Afbeelding. De afbeelding komt bovenaan de kolom te staan en het dialoogvenster opent.
  2. Klik onder Afbeelding op Afbeelding selecteren. Filter in de Mediabrowser op naam als je wilt, vink een foto aan en klik op Geselecteerde invoegen.
  3. Klik op de kop SEO om hem uit te vouwen. Vervang de tekst in Alt-attribuut door een korte beschrijving van de foto.
  4. Klik in het dialoogvenster op Opslaan. Klik daarna op Opslaan in de werkbalk bovenaan het inhoudsgebied om de pagina op te slaan.

Wat je ziet

De standaard Afbeeldingsbreedte is 100%. Schermlezers lezen je alt-tekst voor. Om het schalen te controleren zet je Weergavemodus op Voorbeeld en versmal je je browservenster. Bezoekers zien je wijzigingen nadat je opslaat en publiceert.

Je afbeelding instellen

Beweeg over het element en open More > Settings in de besturingsbalk. Opties:

  • Afbeelding: selecteer een afbeelding uit de media- of bestandsbrowser van je site, upload een bestand, of plak een externe URL.
  • Afbeeldingsbreedte: een CSS-breedte zoals 100% of 300px. De standaard is 100%.
  • Afbeeldingshoogte: een vaste hoogte zoals 400px. Laat hem leeg om de vorm van de foto te behouden.
  • Afbeeldingslink: maakt de afbeelding klikbaar. Vul een URL in of kies een pagina.
  • Doel afbeeldingslink: Zelfde venster of Nieuw venster. Verschijnt zodra je een link toevoegt.
  • Alt-attribuut: in de sectie SEO, een beschrijving voor schermlezers en zoekmachines.
  • Titelattribuut: in de sectie SEO, extra informatie die als tooltip verschijnt als je erover beweegt.

Afbeeldingen laden en paginasnelheid

DXPR Builder beheert het laden van nieuwe afbeeldingen automatisch om pagina's snel te houden en te voorkomen dat inhoud verspringt. Afbeeldingen bovenaan de pagina en in tabbladen, carrousels en marquees blijven klaar om te tonen. Afbeeldingen verderop kunnen laden terwijl bezoekers scrollen.

Afbeeldingen kunnen komen uit je mediabibliotheek, geüploade bestanden of externe URL's. Laat afbeeldingen in de editor volledig laden voordat je opslaat, zodat DXPR Builder de juiste hoeveelheid ruimte kan reserveren. Een afbeelding vervangen werkt zijn afmetingen bij zonder je gekozen weergavegrootte te wijzigen.

Afbeeldingen die al op je site staan worden niet automatisch geüpgraded. Paginasnelheid hangt ook af van de bestandsgrootte van afbeeldingen en andere inhoud. Controleer je gepubliceerde pagina op smalle en brede schermen.

Als je het niet ziet

  • Afbeelding staat niet in het tabblad Inhoud. Je gebruikersprofiel verbergt hem. Vraag een beheerder om hem in te schakelen in Gebruikersprofielen.
  • Hij is weg na het herladen. De pagina is niet opgeslagen. Voeg hem opnieuw toe en klik op Opslaan in de werkbalk bovenaan het inhoudsgebied.
  • Het afbeeldingselement is leeg. Er is geen foto ingesteld in het veld Afbeelding. Beweeg over het element en open More > Settings en klik op Afbeelding selecteren.
  • Er verschijnt een pictogram voor een gebroken afbeelding. Het bestand is verwijderd of verplaatst in de mediabibliotheek. Beweeg over het element en open More > Settings, verwijder de selectie en kies een nieuwe afbeelding.
  • De afbeelding is uitgerekt of platgedrukt. Afbeeldingsbreedte en Afbeeldingshoogte hebben allebei vaste waarden die niet bij de foto passen. Wis Afbeeldingshoogte om zijn vorm te herstellen.

Wat nu?

Tabblad Stijl om de witruimte en achtergrond van je afbeelding aan te passen.