De Divi Socialemedia Module

Met de module voor sociale media kunt u op pictogrammen gebaseerde koppelingen maken die verwijzen naar uw online sociale profielen, zoals Facebook, Twitter en Google+. Deze pictogrammen zijn geïntegreerd in het thema, in de strakke stijl van Divi met behulp van onze elegante pictogrammen, waardoor ze de voorkeur hebben boven plug-ins van derden. U kunt koppelingen toevoegen naar meerdere sociale profielen binnen elke module en u kunt de module overal op de pagina toevoegen.

Een module voor sociale media toevoegen aan uw pagina

Voordat u een sociale-mediamodule aan uw pagina kunt toevoegen, moet u eerst in de Divi Builder springen. Nadat het Divi-thema op uw website is geïnstalleerd, ziet u elke keer dat u een nieuwe pagina bouwt een knop Divi Builder gebruiken boven de berichteditor. Als u op deze knop klikt, wordt Divi Builder ingeschakeld en hebt u toegang tot alle modules van Divi Builder. Klik vervolgens op de knop Visual Builder gebruiken om de builder in Visual Mode te starten. U kunt ook klikken op de knop Visual Builder gebruiken tijdens het browsen op uw website aan de voorkant als u bent aangemeld bij uw WordPress-dashboard.

sociale media module

Nadat u Visual Builder hebt ingevoerd, kunt u op de grijze plusknop klikken om een ​​nieuwe module aan uw pagina toe te voegen. Nieuwe modules kunnen alleen binnen Rijen worden toegevoegd. Als u een nieuwe pagina start, vergeet dan niet eerst een rij aan uw pagina toe te voegen. We hebben een aantal geweldige tutorials over het gebruik van Divi’s rij- en sectie- elementen.

sociale media module

Zoek de module voor sociale media in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De modulelijst is doorzoekbaar, wat betekent dat u ook het woord ‘sociale media’ kunt typen en vervolgens op enter kunt klikken om de sociale media-module automatisch te zoeken en toe te voegen! Nadat de module is toegevoegd, wordt u begroet met de lijst met opties van de module. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerp en Geavanceerd .

Gebruiksvoorbeeld: overeenkomende Social Media-pictogrammen toevoegen aan een contactpagina

De contactpagina van een website is de perfecte plek om uw online sociale profielen te presenteren. Dit biedt gebruikers meer mogelijkheden om verbonden te blijven en uw blog of bedrijf te promoten. Voor dit voorbeeld ga ik je laten zien hoe je social media-pictogrammen kunt toevoegen die overeenkomen met het huidige ontwerp van een contactpagina.

sociale media module

Gebruik de visuele builder om een ​​nieuwe normale sectie toe te voegen met een rij met één kolom over de volledige breedte. Voeg een module voor sociale media in uw kolom in.

Klik op het tabblad Inhoud van Instellingen voor sociale media op de knop “nieuw item toevoegen” om een ​​nieuw sociaal netwerk aan uw module toe te voegen. Werk onder de specifieke sociale netwerkinstellingen het volgende bij:

Inhoud opties

Sociaal netwerk: Facebook-
account-URL: [voer de URL van uw Facebook-account in]

Ontwerpopties

Pictogramkleur: # d94b6a (overeenkomende kleur)

sociale media module

Dupliceer vervolgens dat sociale netwerk om nog vier netwerken toe te voegen (Twitter, Google+, LinkedIn en Instagram). Omdat u het netwerk hebt gedupliceerd, is de aangepaste pictogramkleur overgenomen, zodat u alleen elke netwerk- en account-URL hoeft bij te werken.

sociale media module

Nu heb je Social Media-pictogrammen die overeenkomen met het ontwerp van de contactpagina.

sociale media module

Opties voor sociale media-inhoud

Op het tabblad inhoud vindt u alle inhoudselementen van de module, zoals tekst, afbeeldingen en pictogrammen. Alles wat bepaalt wat er in uw module verschijnt, vindt u altijd op dit tabblad.

sociale media module

Voeg een nieuw item toe

Hier voegt u nieuwe netwerken toe aan uw module. Als u op “nieuw item toevoegen” klikt, wordt een volledig nieuw venster geopend met opties die specifiek zijn voor uw nieuwe netwerk (onder de tabbladen Inhoud, Ontwerp en Geavanceerd). Zie hieronder voor individuele netwerkinstellingen voor sociale media.

Nadat u uw eerste netwerk hebt toegevoegd, ziet u een grijze balk met de titel van uw netwerk als een label. De grijze balk heeft ook drie knoppen waarmee u het netwerk kunt bewerken, dupliceren of verwijderen.

Vorm koppelen

Hier kunt u de vorm van uw sociale netwerkpictogrammen kiezen in afgeronde rechthoek of cirkel.

URL wordt geopend

Kies ervoor om uw netwerk-url in een nieuw tabblad of in hetzelfde venster te openen.

Volg knop

Hier kunt u kiezen of u de volgknop naast het pictogram wilt opnemen.

Beheerderslabel

Dit zal het label van de module in de bouwer veranderen voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok in de Divi Builder-interface.

Ontwerpopties voor sociale media

Op het ontwerptabblad vindt u alle stijlopties van de module, zoals lettertypen, kleuren, grootte en afstand. Dit is het tabblad dat u zult gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om vrijwel alles te wijzigen.

sociale media module

Voor deze module bestaan ​​de ontwerpopties uit slechts één item – Tekstkleur.

Tekst kleur

Hier kunt u kiezen of uw tekst licht of donker moet zijn. Als u met een donkere achtergrond werkt, moet uw tekst licht zijn. Als uw achtergrond licht is, moet uw tekst worden ingesteld op donker.

Sociale media geavanceerde opties

Op het tabblad Geavanceerd vindt u opties die meer ervaren webontwerpers nuttig kunnen vinden, zoals aangepaste CSS- en HTML-kenmerken. Hier kunt u aangepaste CSS toepassen op de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID’s toepassen op de module, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw kindthema.

sociale media module

CSS ID

Voer een optionele CSS-ID in die voor deze module moet worden gebruikt. Een ID kan worden gebruikt om aangepaste CSS-stijlen te maken of om koppelingen naar bepaalde delen van uw pagina te maken.

CSS-klasse

Voer optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om aangepaste CSS-stijlen te maken. U kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze klassen kunnen worden gebruikt in uw Divi Child-thema of in de aangepaste CSS die u toevoegt aan uw pagina of uw website met behulp van de Divi Theme Options of Divi Builder-pagina-instellingen.

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en alle interne elementen van de module. In het gedeelte Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS rechtstreeks aan elk element kunt toevoegen. CSS-invoer in deze instellingen is al ingepakt in stijltags, dus u hoeft alleen CSS-regels in te voeren gescheiden door puntkomma’s.

Zichtbaarheid

Met deze optie kunt u bepalen op welke apparaten uw module wordt weergegeven. U kunt ervoor kiezen om uw module afzonderlijk uit te schakelen op tablets, smartphones of desktopcomputers. Dit is handig als u verschillende modules op verschillende apparaten wilt gebruiken of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.

Individuele opties voor sociale media-inhoud

sociale media module

Sociaal netwerk

Hier kunt u het sociale netwerk kiezen dat u wilt weergeven.

Account URL

Hier voert u de URL in voor deze sociale netwerklink. Als u Facebook als uw netwerk hebt gekozen, zou u hier de URL van uw Facebook-pagina plaatsen.

Individuele ontwerpopties voor sociale media

sociale media module

Pictogram kleur

Divi heeft handig standaard de standaardkleuren voor elk sociaal netwerk. Hier kunt u deze pictogramkleur eenvoudig wijzigen in wat u maar wilt.

Individuele geavanceerde sociale media-opties

sociale media module

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en alle interne elementen van de module. In het gedeelte Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS rechtstreeks aan elk element kunt toevoegen. CSS-invoer in deze instellingen is al ingepakt in stijltags, dus u hoeft alleen CSS-regels in te voeren gescheiden door puntkomma’s.