Een social-links-element toevoegen.

DXPR Builder lerenPagina’s bouwenContent toevoegenMarketing

Je krijgt een rij merkpictogrammen die linken naar je socialemediaprofielen. Gebruik hem in een footer, een zijbalk of een contactsectie zodat bezoekers je kunnen vinden en volgen.

Social-links-element met LinkedIn-, GitHub- en Drupal-pictogrammen in cirkelstijl met merkkleuren

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 Social links. De social links komen bovenaan de kolom te staan en het dialoogvenster opent.
  2. Vervang onder Social links de twee voorbeeldrijen door je accounts. Klik op Link toevoegen voor elk extra account. Begin het merk te typen, kies het uit de suggesties, en vul de URL in, zoals https://github.com/dxpr.
  3. Kies een Stijl voor de pictogramvorm. Dit is het veld bovenaan het dialoogvenster, niet het paneel Stijl verderop. Hier is het Cirkel.
  4. Kies een Grootte voor de pictogrammen. Hier is het 3x.
  5. Klik op de kop Pictogramkleuren om hem uit te vouwen, en zet Achtergrondkleur op Merkkleur.
  6. Kies onder Kleur een staal uit het palet. Het palet verschijnt omdat Kleur standaard op Aangepast staat. Hier is hij bijna wit.
  7. 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 accounts die je hebt toegevoegd verschijnen als een rij pictogrammen, en elk pictogram opent zijn profiel. In de video staan LinkedIn, GitHub en Drupal als grote cirkels in hun merkkleuren met witte logo's. Bezoekers zien hem zodra je de pagina opslaat en publiceert.

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

  • Social links: één rij per pictogram, met een merknaam en de profiel-URL. Klik op Link toevoegen voor nog een rij, en gebruik de pijlen om de volgorde te wijzigen.
  • Lay-out: Inline zet de pictogrammen op een rij. Stacked zet elk pictogram op een eigen regel.
  • Stijl: de pictogramvorm: Geen, Afgerond, Cirkel of Vierkant.
  • Grootte: Klein, Groot, of 2x tot 5x.
  • CSS3-hovereffecten: Geen, Disc of Pulse. Elk effect maakt van het pictogram een cirkel.
  • Kleur: de logokleur: Merkkleur, Aangepast of Overerven. Aangepast toont een palet, en Overerven gebruikt de kleur van de omliggende tekst.
  • Achtergrondkleur: de vulling van de vorm, met dezelfde drie keuzes.

Kleur en Achtergrondkleur staan onder de kop Pictogramkleuren. Klik erop om ze te openen.

Als je het niet ziet

  • Social links staat niet in het tabblad Inhoud. Je gebruikersprofiel verbergt ze. Vraag een beheerder om ze in te schakelen in Gebruikersprofielen.
  • Ze zijn weg na het herladen. De pagina is niet opgeslagen. Voeg ze opnieuw toe en klik op Opslaan in de werkbalk bovenaan het inhoudsgebied.
  • Er ontbreekt een pictogram. Zijn rij heeft geen merk of geen URL, dus het element slaat hem over. Vul beide velden van die rij in.
  • Er verschijnt een vorm zonder logo. De merknaam heeft geen passend pictogram, en de rij zegt “No matching brand icon found”. Kies het merk uit de suggesties terwijl je typt.
  • Een pictogram opent de verkeerde pagina. De URL in die rij is fout of onvolledig. Beweeg over het element en open More > Settings en controleer of elke URL begint met https://.

Wat nu?

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