Wilt u gebruik maken van de Filterable Portfolio module van Divi en weet je niet welke indeling je moet kiezen?
De module « Filterbare portfolio "Om Divi geeft u twee lay-outopties om uit te kiezen. Beide opties hebben voordelen en werken zeer goed voor bepaalde doeleinden.
In dit artikel zullen we de volledige breedte en rasterlay-outs van deze module vergelijken om u te helpen beslissen wat u nodig heeft voor uw Site web.
We zullen ook beide lay-outs aanpassen om te zien hoe ze in één lay-out werken Divi.
Laten we beginnen!
overzicht
Laten we eerst eens kijken wat we in deze zelfstudie gaan maken.
Desktopversie van de rasterlay-out
Download DIVI nu!!!
Telefoonversie van rasterlay-out
Desktopversie van de lay-out Fullwidth
Lees ook: Divi: schaduw- en zweefeffecten gebruiken om interactieve inhoud te maken
Telefoonversie van lay-out Fullwidth
De lay-out van de filterbare portfoliomodule wijzigen
Standaard toont de module "Filterbare portfolio" de lay-out over de volledige breedte. U kunt de lay-out wijzigen om items in een raster weer te geven. Open eerst de moduleparameters:.
Selecteer vervolgens het tabblad Design. De eerste optie is Layout. Het heeft een vervolgkeuzelijst met een paar keuzes. Selecteer het om te kiezen tussen Volle breedte et Raster.
Als u de optie kiest die momenteel niet is geselecteerd, wordt de module opnieuw geladen en worden de portfolio-items in deze lay-out weergegeven. Het onderstaande voorbeeld toont de rasterlay-out.
Vergelijking van filterbare portfoliomodule-indeling
De twee lay-outs zijn heel verschillend, maar ze hebben enkele overeenkomsten. Beide tonen het filter bovenaan de module, de titel en meta onder de itemafbeeldingen en de paginering onderaan de module.
Hier is een blik op hoe ze anders zijn.
Indeling over de volledige breedte
Volledige breedte geeft een grote afbeelding weer met een portfolio-element dat de volledige breedte van het portfoliogebied beslaat. Afbeeldingen worden in hun oorspronkelijke vorm weergegeven en worden vergroot om in de beschikbare breedte te passen.
Het voegt niet veel ruimte toe tussen portemonnee-items. We raden aan om het aantal berichten te beperken tot een paar. Het onderstaande voorbeeld toont de lay-out over de volledige breedte met 2 palen.
Rasterindeling
De rasterlay-out geeft maximaal 4 items op een rij weer. Het voegt meer ruimte tussen de elementen toe. Afbeeldingen worden bijgesneden om miniaturen van dezelfde grootte te maken, ongeacht de grootte en vorm van de afbeelding.
Voor deze hebben we de module beperkt tot het weergeven van vier berichten om de paginering weer te geven.
Wanneer elke lay-out van de Filterable Portfolio-module gebruiken?
Beide arrangementen hebben hun voordelen. Hier zijn enkele tips over wanneer u elke lay-out moet gebruiken.
Indeling over de volledige breedte
Gebruik de lay-out Volledige breedte als u maar een paar items wilt weergeven of als u zich op een paar items wilt concentreren.
Gebruik deze lay-out ook wanneer u uitgelichte afbeeldingen wilt markeren of onder de aandacht wilt brengen.
Rasterindeling
Gebruik de rasterlay-out wanneer u veel items wilt weergeven of wanneer u wilt dat een lay-out meer items in een kleinere ruimte toont.
Hoe u filterbare portfoliomodulelay-outs kunt aanpassen
Nu we hebben gezien hoe u lay-outs kunt selecteren, hoe ze werken en wanneer u ze moet gebruiken, gaan we kijken hoe u deze twee lay-outs kunt aanpassen.
We gebruiken de Portfolio-pagina van de Gratis schilderlay-outpakket verkrijgbaar in Divi. Hier is de originele pagina.
We zullen het portfolio vervangen door de Filterable Portfolio-module en dezelfde afbeeldingen en titels gebruiken.
We maken twee versies: een met een lay-out over de volledige breedte en een met een rasterlay-out.
De rasterlay-out van de filterbare portfoliomodule aanpassen
We beginnen met de rasterlay-out. Ik zal de kleuren en lettertypen uit de originele lay-out gebruiken.
Inhoud
Open ze moduleparameters: en voer 4 in voor de Aantal berichten. Selecteer alles categorieën die u in de module wilt weergeven.
- Aantal berichten: 4
- Inbegrepen categorieën: Selecteer categorieën
Aanleg
Selecteer vervolgens het tabblad Design en kies Raster in de lay-outopties.
- Lay-out: raster
Beeld
Scroll naar Beeld en kies de optie VakSchaduw. Verander het schaduwkleur in rgba (0,0,0,0.05).
- Doos schaduw: 4ème optie
- Schaduwkleur: rgba(0,0,0,0.05)
Teksten
Scroll dan naar beneden naar Teksten en wijzig de uitlijning In het midden. Dit centreert het filter, de titel, de meta en de paginering.
- Tekstuitlijning: Midden
Titel tekst
Scroll dan naar beneden naar Titel Tekst en wijzig de volgende instellingen.
- Titel Lettertype: Merriweather
- Titel Tekst Kleur: #000000
Verander de grootte van de politie op 26px voor desktops, 20px voor tablets en 18px voor telefoons.
- Titel Tekstgrootte: Desktop 26px, tablet 20px, Telefoon 18px
Criteriumtekst filteren
Scroll dan naar beneden naar Tekst filtercriteria en wijzig de volgende instellingen:
- Filtercriteria:
- Lettertype: Montserrat
- Lettergewicht: Vet
- Stijl: TT
- Tekstkleur: #fd6927
- Tekstgrootte: 12px
Metatekst
Scroll dan naar beneden naar Metatekst. Verander het politie in Montserrat en de couleur in #fd6927.
- Metatekstgrootte: Montserrat
- Metatekstkleur: #fd6927
Definieer de grootte op 12 pixels, deletterafstand op 2 pixels en de hoogmoed van lijn op 1,2 em.
- Tekstgrootte: 12px
- Meta-letterafstand: 2px
- Meta Line Hoogte: 1,2 em
Paginering tekst
Scroll ten slotte naar beneden naar Paginering Tekst en verander het politie in Montserrat, en zet de couleur lettertype op zwart. Sluit de module en sla uw instellingen op.
- Lettertype voor paginering: Montserrat
- Tekstkleur paginering: #000000
De filterbare portfoliomodule aanpassen in een lay-out over de volledige breedte
Laten we nu de module configureren in een lay-out over de volledige breedte.
We gebruiken dezelfde ontwerpkenmerken als de rasterlay-out, maar we zullen een paar wijzigingen aanbrengen die goed werken voor deze lay-out. We zullen wat eenvoudige CSS gebruiken om enkele kleine aanpassingen aan te brengen.
Inhoud
Open ze moduleparameters: en verander het aantal publicaties naar 2. Dit houdt de pagina kleiner en overzichtelijker met grote afbeeldingen. Selecteer alles categorieën die u in de module wilt weergeven.
- Aantal berichten: 2
- Inbegrepen categorieën: Kies categorieën
Communie
Scroll naar Elementen en deactiveren Toon categorieën. Laat de anderen ingeschakeld. Categorieën zijn nog steeds ingeschakeld voor het filter, maar ze worden niet weergegeven met de titel.
- Toon categorieën: NEE
Aanleg
Selecteer het tabblad Design. Sous Layout, laat de Lay-out ingesteld op Volle breedte, wat de standaardinstelling is.
- Lay-out: volledige breedte
Beeld
Scroll dan naar beneden naar Beeld . Kies de optie box Shadow en verander het couleur schaduw in rgba (0,0,0,0.05).
- Doos schaduw: 4ème optie
- Schaduwkleur: rgba(0,0,0,0.05)
Teksten
Scroll dan naar beneden naar Tekst. Verander de uitlijning In het midden. Het filter, de titel en de paginering worden gecentreerd met de afbeeldingen.
- Tekstuitlijning: Midden
Titel tekst
Scroll dan naar beneden naar Titel tekst . Verander het politie naar Merriweather en verander de couleur in het zwart.
- Titel Lettertype: Merriweather
- Titel Tekst Kleur: #000000
Verander de grootte van de politie op 40px voor desktops, 20px voor tablets en 18px voor telefoons.
- Titel Tekstgrootte: Desktop 40px, tablet 20px, Telefoon 18px
Criteriumtekst filteren
Scroll dan naar beneden naar Tekst filtercriteria en wijzig de volgende instellingen:
- Filtercriteria:
- Lettertype: Montserrat
- Lettergewicht: Vet
- Stijl: TT
- Tekstkleur: #fd6927
Paginering tekst
Scroll dan naar beneden naar Paginering Tekst. Verander het politie in Montserrat, verander de poids halfvet en stel de in letterkleur op #fd6927. Sluit de module en sla uw instellingen op.
- Lettertype voor paginering: Montserrat
- Kleur: #fd6927
- Lettergewicht: Semi Vet
CSS-titeltekst
Open het tabblad Geavanceerd en scroll naar Portfoliotitel. Selecteer het bureaubladpictogram. Kopieer onderstaande code voor verschillende schermformaten. Sluit de module en sla uw instellingen op.
Portfoliotitel:
- Desktop
padding-bottom:40px- Tablet
padding-bottom:30px- Telefoonnummer
padding-bottom:20px
Resultaten
Desktopversie van de rasterlay-out
Telefoonversie van rasterlay-out
Download DIVI nu!!!
Desktopversie van de lay-out over de volledige breedte
Zie ook: Divi: Hoe verander je het verloop van een achtergrond bij zweven
Telefoonversie van de lay-out over de volledige breedte
Download DIVI nu!!!
Conclusie
Dit is onze kijk op het gebruik van een lay-out over de volledige breedte versus een raster in de module Filterbare portfolio van Divi. Kiezen tussen de twee lay-outopties is eenvoudig.
Elke optie heeft voordelen en moet anders worden ontworpen om met uw Site web. Maak gewoon een paar aanpassingen om ervoor te zorgen dat uw module goed werkt met elke Divi-lay-out.
We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren.
Aarzel niet om ook onze gids te raadplegen over de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
