Met de Social Media-module van Divi kunt u links maken op basis van pictogrammen die verwijzen naar uw online sociale profielen, zoals Facebook, Twitter en Google+. Deze pictogrammen zijn geïntegreerd in het thema, in Divi's eigen stijl met behulp van de stijlvolle pictogrammen, waardoor ze de voorkeur hebben boven het gebruik van plug-ins van derden. U kunt in elke module links naar meerdere sociale profielen toevoegen en u kunt de module overal op de pagina toevoegen.
Een module voor sociale media toevoegen aan uw pagina
Voordat je een social media-module aan je pagina kunt toevoegen, moet je eerst in Divi Builder springen. Zodra de Divi-thema geïnstalleerd op uw website, ziet u een knop Gebruik Divi Builder boven de berichteditor wanneer u een nieuwe pagina maakt. Klik op deze knop om Divi Builder te activeren en toegang te krijgen tot alle Divi Builder-modules. Klik vervolgens op de knop Gebruik Visual Builder om de generator in visuele modus te starten. U kunt ook op de knop klikken Gebruik Visual Builder wanneer u door uw website op de voorgrond bladert en u bent verbonden met uw WordPress-dashboard.
Nadat u Visual Builder heeft geopend, 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 begint, vergeet dan niet om eerst een rij aan uw pagina toe te voegen.
Zoek de sociale media-module in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De lijst met mods is doorzoekbaar, wat betekent dat je ook het woord "Volg ons op sociale media" kunt typen en vervolgens op "invoeren" kunt klikken om automatisch de sociale media-mod te zoeken en toe te voegen! Zodra de module is toegevoegd, wordt u begroet door de lijst met moduleopties. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerpfase et vergevorderd .
Voorbeeld use case: bijbehorende social media iconen toevoegen aan een contactpagina
De contactpagina van een website is de perfecte plek om uw online sociale profielen onder de aandacht te brengen. Dit biedt meer mogelijkheden voor gebruikers om verbonden te blijven en bevorderen jouw blog of uw bedrijf. Voor dit voorbeeld laat ik je zien hoe je social media-iconen kunt toevoegen die passen bij het huidige ontwerp van een contactpagina.
Gebruik de visuele builder om een nieuwe reguliere sectie toe te voegen met een rij over de volledige breedte van één kolom. Voeg een social media-module in uw column in.
Klik op het tabblad Inhoud van de module-instellingen op de knop "Een nieuw element toevoegen" om een nieuw sociaal netwerk aan uw module toe te voegen. Werk onder specifieke sociale netwerkinstellingen het volgende bij:
Inhoud opties
Sociaal netwerk:
Facebook-account-URL: [voer de URL van uw Facebook-account in]
Ontwerpopties
Pictogramkleur: # d94b6a (geassorteerde kleur)
Dupliceer vervolgens dit sociale netwerk om vier andere netwerken toe te voegen (Twitter, Google+, LinkedIn en Instagram). Sinds u het netwerk heeft gedupliceerd, is de kleur van het aangepaste pictogram overgedragen. U hoeft dus alleen maar elke netwerk-URL en account bij te werken.
Nu heb je pictogrammen voor sociale media die overeenkomen met het ontwerp van de contactpagina.
Opties voor sociale media-inhoud
Op het inhoudstabblad vind je alle inhoudselementen van de module, zoals tekst, afbeeldingen en iconen. Dat alles controleert wat verschijnt in uw module, vindt u altijd op dit tabblad.
Voeg een nieuw object toe
Hier voegt u nieuwe netwerken toe aan uw module. Door op "een nieuw element toevoegen" te klikken, opent u een geheel nieuw venster 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 heeft toegevoegd, ziet u een grijze balk verschijnen met uw netwerktitel als een label. De grijze balk heeft ook drie knoppen waarmee u het netwerk kunt bewerken, dupliceren of verwijderen.
Link formulier
Hier kunt u de vorm van uw pictogrammen voor sociale netwerken kiezen in een afgeronde rechthoek of in een cirkel.
URL wordt geopend
Kies ervoor om uw netwerk-URL op een nieuw tabblad of in hetzelfde venster te openen.
Volg knop
Hier kunt u kiezen of u de volgende knop naast het pictogram wilt opnemen.
Admin-label
Hierdoor wordt het modulelabel in de constructor gewijzigd voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok van de Divi Builder-interface.
Ontwerpopties voor sociale media
Op het tabblad Ontwerpen vind je alle stijlopties voor de module, zoals lettertypen, kleuren, maatvoering en spatiëring. Dit is het tabblad dat u gaat gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om het uiterlijk te wijzigen.
Voor deze module bestaan de ontwerpopties uit een enkel element - Tekstkleur.
Tekstkleur
Hier kunt u kiezen of uw tekst licht of donker moet zijn. Als u op een donkere achtergrond werkt, moet uw tekst licht zijn. Als uw achtergrond licht is, moet uw tekst donker zijn.
Geavanceerde sociale media-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 elk van de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID's op de module toepassen, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw child-thema.
CSS ID
Voer een optionele CSS-ID in om voor deze module te gebruiken. Een ID kan worden gebruikt om een aangepaste CSS-stijl te maken of om naar bepaalde secties van uw pagina te linken.
CSS-klasse
Voer de optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om een aangepaste CSS-stijl 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-stylesheet die u aan uw pagina of website toevoegt met de thema-opties Divi of parameters van de Divi Builder-pagina.
Aangepaste CSS
Aangepaste CSS kan ook worden toegepast op de module en elk van de interne onderdelen van de module. In de sectie Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS-stijlpagina's rechtstreeks aan elk element kunt toevoegen. CSS-vermeldingen in deze instellingen zijn al verpakt in stijltags. Voer dus gewoon de CSS-regels in, gescheiden door puntkomma's.
zichtbaarheid
Met deze optie kunt u de apparaten bedienen waarop uw module verschijnt. U kunt ervoor kiezen om uw module afzonderlijk op tablets, smartphones of desktops te deactiveren. Dit is handig als u verschillende mods 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
Sociaal netwerk
Hier kunt u het sociale netwerk kiezen dat u wilt weergeven.
Account-URL
Hier voer je de URL in voor deze sociale netwerklink. Als je Facebook als je netwerk hebt gekozen, zou je hier de URL van je Facebook-pagina plaatsen.
Individuele ontwerpopties voor sociale media
Icoon kleur
Divi biedt standaardkleuren voor elk sociaal netwerk dat standaard is gedefinieerd. Hier kunt u deze pictogramkleur eenvoudig wijzigen in wat u maar wilt.
Geavanceerde sociale media-opties
Aangepaste CSS
Aangepaste CSS kan ook worden toegepast op de module en elk van de interne onderdelen van de module. In de sectie Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS-stijlpagina's rechtstreeks aan elk element kunt toevoegen. CSS-vermeldingen in deze instellingen zijn al verpakt in stijltags. Voer dus gewoon de CSS-regels in, gescheiden door puntkomma's.
[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" extended "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DOWNLOAD HET DIVI-THEMA [/ vcex_button] [/ width_column] [»]vc_column » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] DOWNLOAD TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Andere Divi-zelfstudies
- 5 websites voor restaurant gebruik Divi thema
- Tekst toevoegen aan een Divi WooCommerce-product
- Hoe de menukleur tussen Divi-pagina's te veranderen
- Hoe de rasters van een blog personaliseren met Divi
- Hoe de rol Divi editor op WordPress
- Een Divi-schuifregelaar op volledig scherm maken
- Hoe de kleur van menu's tussen Divi-pagina's te veranderen
- Functies die u waarschijnlijk niet kent over Divi
- Divi Builder gebruiken op WordPress
- Hoe de Divi-scrolmodule video te gebruiken
- Hoe de Divi Builder Flip-module te gebruiken
- Hoe een getuigenismodule op Divi Builder toe te voegen
- Hoe de Divi-tekstmodule te gebruiken
- Hoe maak je een schuifregelaar op Divi
- Hoe u een Divi-gebruikersrol kunt bewerken
- Hoe de Divi Social Media-module te gebruiken
- Hoe de shopmodule te gebruiken met het thema WordPress Divi
- Hoe de Divi zijbalkmodule te gebruiken
- Hoe de Divi Price Table-module te gebruiken
- Hoe de titelmodule van Divi-publicaties te gebruiken
- Hoe een videomodule van Divi toe te voegen
- Hoe de artikelnavigatiemodule te gebruiken
- Hoe de Divi-zoekmodule te gebruiken
- Hoe de Divi wallet-module te gebruiken
- Hoe de persoonsmodule op Divi Builder te gebruiken
- De walletmodule gebruiken met Divi-filter
- De schuifregelaarmodule op de volledige breedte gebruiken
- Hoe de Divi Builder-beeldmodule te gebruiken
- De navigatiemodule op de volledige breedte van Divi Builder gebruiken
- Hoe de afbeeldingengalerij-module te gebruiken
- Hoe de Divi Builder kaartmodule met volledige breedte te gebruiken
- Hoe de Divi Full Width Portfolio Module te gebruiken
- Hoe de Divi header-module over de volle breedte te gebruiken
- Hoe de Divi Counter-module te gebruiken
- De schuifregelaar voor artikelen gebruiken in Divi Builder
- Hoe de Divi Email Optin-module te gebruiken