De Divi volle Breedte portfolio Module

De Fullwidth Portfolio-module werkt net als de normale Portfolio-module, behalve dat uw project op een prachtige Fullwdth-manier wordt weergegeven. Het komt ook met een aantal unieke nieuwe lay-outs: Grid & Carrousel. De module werkt door een lijst van uw meest recente projecten weer te geven en kan worden gebruikt door ontwerpers en kunstenaars die een galerij van hun meest recente werk willen weergeven.

fullwidth portfoliomodule

BEKIJK EEN LIVE DEMO VAN DEZE MODULE

Een portfoliomodule met volledige breedte aan uw pagina toevoegen

Voordat u een volledige-breedte portfoliomodule 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.

fullwidth portfoliomodule

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.

fullwidth portfoliomodule

Zoek de fullwidth-portfoliomodule 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 “fullwidth portfolio” kunt typen en vervolgens op enter kunt klikken om de fullwidth portfolio-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: een portfoliomodule over de volledige breedte toevoegen aan een portfolio

In dit voorbeeld ga ik je laten zien hoe je een portfolio kunt presenteren op een portfolio-pagina die de volledige breedte van de pagina beslaat.

fullwidth portfoliomodule

Laten we beginnen.

Gebruik de visuele builder om een ​​sectie met volledige breedte toe te voegen onder de kop van de pagina. Voeg vervolgens een Fullwidth-portfoliomodule toe aan de rij.

fullwidth portfoliomodule

Werk de Fullwidth Portfolio-instellingen als volgt bij:

Inhoud opties

Berichten Nummer: 8
Toon Paginering: NO

Ontwerpopties

Indeling: Grid
Zoomicoon Kleur: # 000000
Hover Overlay Kleur: #ffffff
Lettertype van titel: Standaard, Vet, Hoofdletters
Titel Tekengrootte: 14px
Titel Letterspatiëring: 1px
Meta Lettertype: 12px
Meta Letterspatiëring: 1px

fullwidth portfoliomodule

Dat is het!

Fullwidth Portfolio Content Options

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.

fullwidth portfoliomodule

Portefeuilletitel

Voer een titel in die boven de portfolio wordt weergegeven of laat deze leeg om geen titel te gebruiken.

Categorieën opnemen

Kies welke categorieën u wilt weergeven. Projecten uit categorieën die niet zijn geselecteerd, verschijnen niet in de lijst met projecten.

Berichten nummer

Bepaal hoeveel projecten worden weergegeven. Laat dit veld leeg of gebruik 0 om het bedrag niet te beperken.

Laat de titel zien

Kies of de titel van elk project wordt weergegeven wanneer u over het projectitem zweeft.

Datum weergeven

Kies of de publicatiedatum van elk project wordt weergegeven wanneer u de muisaanwijzer op het projectitem plaatst.

Achtergrond kleur

Definieer een aangepaste achtergrondkleur voor uw module, of laat leeg om de standaardkleur te gebruiken.

Achtergrond afbeelding

Indien gedefinieerd, wordt deze afbeelding gebruikt als achtergrond voor deze module. Om een ​​achtergrondafbeelding te verwijderen, verwijdert u eenvoudig de URL uit het instellingenveld. Achtergrondafbeeldingen verschijnen boven achtergrondkleuren, wat betekent dat uw achtergrondkleur niet zichtbaar is wanneer een achtergrondafbeelding wordt toegepast.

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.

Fullwidth Portfolio Design Options

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.

fullwidth portfoliomodule

lay-out

Kies welke lay-out u wilt gebruiken. Met “Raster” worden al uw items weergegeven in een lay-out met meerdere kolommen en meerdere rijen. De carrousel geeft uw items weer in een rij met naast elkaar geplaatste afbeeldingen die verschuiven om extra items in de lijst weer te geven.

Zoom pictogram kleur

Wanneer u over een item in de portfoliomodule zweeft, verschijnt een overlaypictogram. U kunt de kleur die wordt gebruikt via dit pictogram aanpassen met de kleurenkiezer in deze instelling.

Beweeg Overlay-kleur

Wanneer u over een item in de portfoliomodule zweeft, vervaagt een overlay-kleur boven aan de afbeelding en onder de titeltekst en het pictogram van de portfolio. Standaard wordt een semi-transparante witte kleur gebruikt. Als u een andere kleur wilt gebruiken, kunt u de kleur aanpassen met de kleurenkiezer in deze instelling

Hover Icon Picker

Hier kunt u een aangepast pictogram kiezen dat moet worden weergegeven wanneer een bezoeker zich boven portfolio-items in de module bevindt.

Tekst kleur

Hier kunt u kiezen of uw tekst licht of donker moet zijn.

Titel lettertype

U kunt het lettertype van uw titeltekst wijzigen door het gewenste lettertype in het vervolgkeuzemenu te selecteren. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het lettertype Open Sans voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met de opties vet, cursief, hoofdletters en onderstrepen.

Titel lettergrootte

Hier kunt u de grootte van uw titeltekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks in het invoerveld rechts van de schuifregelaar invoeren. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Titel tekstkleur

Standaard worden alle tekstkleuren in Divi wit of donkergrijs weergegeven. Als u de kleur van uw titeltekst wilt wijzigen, kiest u met deze optie de gewenste kleur in de kleurenkiezer.

Titel Letter Spacing

Letterspatiëring beïnvloedt de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw titeltekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Hoogte van titelregel

Lijnhoogte heeft invloed op de ruimte tussen elke regel van uw titeltekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de schuifregelaar voor bereik om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Meta-lettertype

U kunt het lettertype van uw metatekst wijzigen door het gewenste lettertype in het vervolgkeuzemenu te selecteren. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het lettertype Open Sans voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met de opties vet, cursief, hoofdletters en onderstrepen.

Meta-lettergrootte

Hier kunt u de grootte van uw metatekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks in het invoerveld rechts van de schuifregelaar invoeren. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Meta-tekstkleur

Standaard worden alle tekstkleuren in Divi wit of donkergrijs weergegeven. Als u de kleur van uw metatekst wilt wijzigen, kiest u met deze optie de gewenste kleur in de kleurkiezer.

Meta Letter Spacing

Letterspatiëring beïnvloedt de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw metatekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Meta Line Hoogte

Lijnhoogte heeft invloed op de ruimte tussen elke regel van uw metatekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de schuifregelaar voor bereik om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Gebruik de rand

Als u deze optie inschakelt, wordt er een rand rond uw module geplaatst. Deze rand kan worden aangepast met de volgende voorwaardelijke instellingen.

Rand kleur

Deze optie heeft invloed op de kleur van uw rand. Selecteer een aangepaste kleur in de kleurenkiezer om deze op uw rand toe te passen.

Grensbreedte

Standaard hebben randen een breedte van 1 pixel. U kunt deze waarde verhogen door de bereikschuifregelaar te slepen of door een aangepaste waarde in te voeren in het invoerveld rechts van de schuifregelaar. Aangepaste meeteenheden van ondersteund, wat betekent dat u de standaardeenheid kunt wijzigen van “px” in iets anders, zoals em, vh, vw etc.

Randstijl

Grenzen ondersteunen acht verschillende stijlen, waaronder: effen, gestippeld, onderbroken, dubbel, groef, nok, inzet en begin. Selecteer de gewenste stijl in het vervolgkeuzemenu om deze op uw rand toe te passen.

Fullwidth Portfolio Advanced Options

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.

fullwidth portfoliomodule

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.

Automatische Carrousel

Als de carrouselopmaakoptie is gekozen en u wilt dat de carrousel automatisch schuift zonder dat de bezoeker op de volgende knop hoeft te klikken, schakelt u deze optie in en past u vervolgens de rotatiesnelheid aan indien gewenst.

Automatische carrouselsnelheid

Hier kunt u aangeven hoe snel de carrousel draait, als de optie ‘Automatische carrouselrotatie’ hierboven is ingeschakeld. Hoe hoger het nummer, hoe langer de pauze tussen elke rotatie. (Bijv. 1000 = 1 sec)

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.