Met de Portfolio-module van Divi kunt u uw werk overal op uw site weergeven met elke kolomstructuur. In deze tutorial laat ik je zien hoe je de wallet-module op Divi gebruikt.
Een Divi Wallet-module toevoegen
Voordat je een portfoliomodule aan je pagina kunt toevoegen, moet je eerst in de Divi Builder springen. Zodra de Divi-thema geïnstalleerd op uw Site web, je ziet 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 bladert Site web op de voorgrond als u bent ingelogd op 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 portfoliomodule in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De lijst met modules is doorzoekbaar, wat betekent dat u ook het woord "portfolio" kunt typen en vervolgens op "Enter" kunt klikken om de portfoliomodule automatisch 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: een portfoliomodule toevoegen aan een portfoliopagina
Voor dit voorbeeld zal ik je laten zien hoe je een portfolio op een portfolio-pagina presenteert.
Laten we beginnen.
Gebruik de visuele builder om een normale sectie toe te voegen met een rij over de volledige breedte (1 kolom) onder de paginakop. Voeg vervolgens een filterbare portfoliomodule toe aan de rij.
Werk de portefeuille-instellingen als volgt bij:
Inhoud opties
Aantal artikelen: 8
Toon paginering: NO
Ontwerpopties
Lay-out: raster
Zoomkleurpictogram: #ffffff
Overlaykleur zweven: rgba (224,153,0,0.58)
Titellettertype: standaard, vetgedrukt, hoofdletters
Titel Lettergrootte: 14px
Titel Letterafstand: 1px
Meta-tekengrootte: 12px
Meta-afstand tussen letters: 1px
Geavanceerde opties (aangepaste CSS)
Portfolio titel:
text-align: center;
Meta-berichtenportfolio:
text-align: center;
Dat is alles!
Opties voor portfolio-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.
Item nummer
Bepaal het aantal weergegeven projecten. Laat leeg of gebruik 0 om het aantal niet te beperken.
Categorieën opnemen
Kies de categorieën die u wilt weergeven. Projecten uit categorieën die niet zijn geselecteerd, verschijnen niet in de lijst met projecten.
Titel tonen
Kies of de titel van elk project wel of niet wordt weergegeven wanneer u met de muis over het projectitem beweegt.
Categorieën weergeven
Hier kunt u categorielinks in- of uitschakelen.
Paginering bekijken
Hier kunt u paging voor deze feed in- of uitschakelen.
Achtergrondkleur
Definieer een aangepaste achtergrondkleur voor uw module of laat leeg om de standaardkleur te gebruiken.
Achtergrond afbeelding
Indien ingesteld, wordt deze afbeelding gebruikt als achtergrond voor deze module. Om een achtergrondafbeelding te verwijderen, verwijdert u gewoon de URL uit het instellingenveld. De achtergrondafbeeldingen verschijnen bovenop de achtergrondkleuren, wat betekent dat de achtergrondkleur niet zichtbaar is wanneer een achtergrondafbeelding wordt toegepast.
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.
Portfolio-module ontwerpopties
Op het tabblad Ontwerpen vindt u alle stijlopties voor de module, zoals lettertypen, kleuren, grootte 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 alles te wijzigen.
Aanleg
Kies de indeling die u wilt gebruiken. "Raster" geeft al uw items weer in een lay-out met meerdere kolommen en meerdere rijen. Fullwidth geeft elk project op zijn eigen rij weer met behulp van grote ongesneden en brede afbeeldingen.
Zoom pictogram kleur
Wanneer u de muisaanwijzer over een item in de portfoliomodule beweegt, verschijnt een overlay-pictogram. U kunt de kleur die voor dit pictogram wordt gebruikt, aanpassen met de kleurkiezer in deze instelling.
Laagkleur op viaduct
Wanneer u de muisaanwijzer over een item in de portfoliomodule beweegt, verschijnt er een overlay-kleur boven aan de afbeelding en onder de titeltekst en het pictogram van de portfoliotitel. Standaard wordt een semi-transparante witte kleur gebruikt. Als je een andere kleur wilt gebruiken, kun je de kleur aanpassen met de kleurkiezer in deze instelling
Hover selectie pictogram
Hier kunt u een aangepast pictogram kiezen om weer te geven wanneer een bezoeker met de muis over portfolio-items in de module zweeft.
Tekstkleur
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 te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor 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 verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Titel tekstkleur
Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de tekstkleur van uw titel wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurkiezer.
Afstand van titelletters
Letterafstand is van invloed op 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 maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Hoogte van de titelregel
Regelhoogte is van invloed op de ruimte tussen elke regel van uw titeltekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld in rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Metas-lettertype
U kunt het lettertype van uw metatekst wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.
Metas lettergrootte
Hier kun je de grootte van je metatekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Metatekstkleur
Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de kleur van uw metatekst wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurenkiezer.
Meta-afstand tussen letters
Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter van 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 maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Hoogte van koppelingen in het metagebied
Rijhoogte heeft invloed op de ruimte tussen elke rij in uw metatekst.Als u de ruimte tussen elke rij wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld in rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.
Gebruik de rand
Als u deze optie inschakelt, wordt er een rand rond uw module geplaatst. Deze rand kan worden aangepast met behulp van de volgende voorwaardelijke parameters.
Kleur van de rand
Deze optie heeft invloed op de kleur van uw rand. Selecteer een aangepaste kleur uit de kleurkiezer om deze op uw rand toe te passen.
Breedte van de rand
Standaard zijn de randen 1 pixel breed. U kunt deze waarde verhogen door de bereikschuifregelaar te slepen of een aangepaste waarde in het invoerveld rechts van de schuifregelaar in te voeren. Aangepaste maateenheden worden ondersteund, wat betekent dat u de standaardeenheid kunt wijzigen van "px" in iets anders zoals em, vh, vw enz.
Randstijl
Randen ondersteunen acht verschillende stijlen: effen, gestippeld, gestippeld, dubbel, groef, rand, overlay en start. Selecteer de gewenste stijl in het vervolgkeuzemenu om deze op uw rand toe te passen.
Geavanceerde portfolio-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 u voor deze module wilt gebruiken. Een CSS-klasse kan worden gebruikt om aangepaste CSS-stijlen te maken. Je kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze klassen kunnen worden gebruikt in uw Divi-kindthema of in de aangepaste CSS-stylesheet die u aan uw pagina of website toevoegt. Site web met behulp van Divi-themaopties of Divi Builder-pagina-instellingen.
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.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” 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 DIVI THEMA [/vcex_button][/vc_column][vc_column width=” 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 DE 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
Ciao, is het mogelijk om een portfolio op 3 kolommen en scorrimento te hebben? Zie hoelig elementi da visualizzare, vorrei far sì che venissero visualizzati as delle slide che scorrono verso sx… Nee dus kijk eens naar het idee… Grazie!
Hallo, ik zou graag willen weten of het mogelijk is om een presentatie te houden in de vorm van een raster met drie kolommen en niet vier. Standaard staan mijn projecten horizontaal op een rij met vier en omdat ik er zes wilde plaatsen, had ik graag een presentatie gehad over drie kolommen en twee rijen. Ik heb de opties doorzocht maar kon er niets over vinden ...
Bij voorbaat dank voor uw hulp.
Hallo, kun je me uitleggen waarom er een zeer grote ruimte is tussen elke kolom van mijn portfolio, onder de elementen. Niet links en rechts maar onder de rijen. Hartelijk bedankt.
Hallo, als we een overzicht hebben, kunnen we u beter adviseren.
Merci.
2019-09-21 screenshot op 14.49.53 copie.jpg
Hallo, je bericht bevat geen link naar de screenshot. U kunt deze tool gebruiken om het te doen: https://screenshot.net/fr/
Hallo,
Weet je of het mogelijk is om een uittreksel toe te voegen dat zichtbaar is voor de portfolio onder de titel?
dank u bij voorbaat
Goede avond Sally,
Nog niet getest, sorry.