Wilt u weten hoe u de rasterelementen van de Filterable Portfolio-module van Divi ? Volg ons in deze tutorial...
Heb een zone op je Site web je werk laten zien is belangrijk. Als u een stylist bent, kunt u verschillende projecten op uw website maken Site web WordPress om te pronken met uw concepten. Als u een merkbouwer bent, kunt u een portfolio gebruiken om uw werk te laten zien. Bovendien kunnen we nog verder gaan en verschillende categorieën toevoegen voor onze projecten. Het is hier wat doet Divi's Filterable Portfolio-module? .
Met deze module kunnen we ons harde werk op een gemakkelijke en overzichtelijke manier weergeven.
In de tutorial van vandaag zullen we de individuele rasterelementen van de module Filterbare portfolio aanpassen. We gebruiken lay-outs van gratis lay-outpakketten Divi-conferentie et Divi Online yoga-instructeur geleverd bij elke aankoop van Divi .
Zoals met alles over Divi, hebben we de mogelijkheid om deze module aan te passen aan onze behoeften en wensen. Laten we echter, voordat we ingaan op styling, wat meer leren over de module.
Wat is Divi's Filterable Portfolio-module?
Projecten maken deel uit van een aangepast berichttype dat hetzelfde werkt als berichten. Je vindt ze in je WordPress-dashboard.
Hier maakt u uw individuele projecten die uw Filterable Portfolio-module zullen vullen. De module geeft ons twee manieren om onze projecten te tonen: in rasterformaat ou in een formaat op volledige breedte. Voor ons zullen we het rasterformaat gebruiken en aanpassen.
Met de Filterable Portfolio-module kunnen we onze meest recente projecten presenteren. Gebruikers van onze site zien een filterbalk bovenaan ons portfolioraster. Van daaruit kunnen ze door de verschillende portfoliocategorieën bladeren die we in de module laten weergeven.
Hier is een voorbeeld van een rasterconfiguratie van de module met enkele voorbeeldprojecten:
Aandachtspunten bij het maken van Divi's filterbare portfolio
Zoals alle mods Divi, wordt de Filterable Portfolio-module geleverd met een aantal functies die we kunnen aanpassen aan onze behoeften en wensen. De meeste functies die bij de module horen, kunnen dus op het tabblad worden gewijzigd Design vanuit het module instellingen modaal. We kunnen de volgende gebieden en meer bewerken:
- Project titel
- Project categorie
- Vignet
- Tekst filteren
- Miniatuur bij zweven
- Opdelen
Dit is geen volledige lijst en we hebben het nog niet eens gehad over hoe CSS diepere aanpassingen aan deze module heeft toegevoegd!
Hoe we Divi's Filterable Portfolio-module zullen aanpassen
Zoals eerder vermeld, gebruiken we voor deze zelfstudie twee lay-outs: Divi-conferentie et Divi Online yoga-instructeur. Hieronder kun je een overzicht krijgen van het werk dat we gaan doen tijdens deze tutorial.
Opstelling van de elementen van de lay-out "Divi Conference".
Opstelling van de elementen van de lay-out "Divi Online Yoga Instructor".
U kunt beide lay-outs eenvoudig downloaden van Divi Bouwer.
Laten we nu beginnen!
Zie ook: Divi: kies tussen het raster en de volledige breedte-indeling van de module Filterbare portfolio
Aanpassing van Divi's Filterable Portfolio-module: "Divi Conference Edition"
Eerst moeten we de evenementpaginasjabloon uit het Divi Conference Layout Pack installeren. Na het aanmaken van uw nieuwe pagina in WordPress en het activeren van de Divi Builder, gaan we naar de Divi Library.
Ga naar de Divi Layout-bibliotheek
Klik op het pictogram « Laden uit bibliotheek om de Divi Layout Library te openen
Zoek de lay-out in de Divi Layout Library
Gebruik de zoekfunctie in de lay-outbibliotheek van Divi, zoek de aanleg " Conferentie Evenement Pagina".
Lay-out installeren
Nadat u de lay-out hebt geselecteerd, klikt u op de knop " Gebruik deze lay-out om de lay-out op uw pagina te installeren.
Afbeeldingsmodule verwijderen en vervangen
We zullen de onderstaande Afbeeldingsmodule verwijderen om ruimte te maken voor de Filterbare Portfolio-module die we gaan aanpassen. Klik op de " Verwijder nadat u de muisaanwijzer op de afbeelding hebt geplaatst om de foto te verwijderen.
Voeg Divi's Filterable Portfolio-module in
Nu de Afbeeldingsmodule is verwijderd, kunnen we nu ruimte maken voor onze Filterbare Portfolio-module. We gaan op het icoon klikken “ Module toevoegen (het grijze plusteken) en selecteer vervolgens de module in het moduulvak dat verschijnt.
Instellen van het aantal posts en de indeling van de portfolio
Standaard presenteert deze module uw werk in een enkele kolom. We zullen echter de rasterlay-out gebruiken die standaard wordt geleverd met 4 kolommen.
Daarom raden we aan om een veelvoud van 4 (4, 8, 12, 16, etc.) te kiezen als het aantal berichten voor je portfolio.
Voor deze zelfstudie gebruiken we 12 projecten in ons raster.
Begin met het aanpassen van Divi's filterbare portfolio: titel en metatekst
Nu onze projecten in een raster worden weergegeven, gaan we enkele ontwerpelementen van onze geselecteerde sjabloon koppelen. In dit geval gebruiken we de stijl van het Divi Conference Layout Pack in onze nieuwe module.
Tekststijl
- Tekstuitlijning: gecentreerd
- Tekstkleur: Donker
Titel tekststijl
- Titel Kopniveau: H2
- Titellettertype: Krona One
- Tekstkleur: #000000
Metatekststijl
- Metalettertype: Standaard (Open Sans)
- Metatekstkleur: #ff6651
Nu we onze styling voor de titels in het portfolioraster op hun plaats hebben, laten we enkele wijzigingen aanbrengen in de daadwerkelijke vorm van de projectminiaturen zelf.
Wijzig de projectminiatuurrand en afgeronde hoeken
In ons Divi Conference Layout-pakket gebruiken we een unieke combinatie van afgeronde hoeken om een aantal keyframes in het pakket een unieke vorm te geven. Laten we deze stijl toepassen op de miniaturen van onze module.
Beeld
- Afbeelding:
- Afgeronde hoeken: 50px 50px 50px 0px
- Randstijlen: alle
- Randbreedte: 3px
- Kleur: #000000
- Randstijl: effen
Dit geeft onze miniaturen een vorm die overeenkomt met de rest van de andere afbeeldingen in het lay-outpakket.
De zweefoverlay aanpassen
Laten we nog een stap verder gaan met onze styling en een kleine wijziging aanbrengen in de standaardoverlay die bij deze module wordt geleverd. We zullen de kleur veranderen, evenals het pictogram dat direct uit de doos wordt gebruikt.
Superpositie
- Kleur zoompictogram: #bcf5fd
- Kleur zwevende overlay: #ff6651
- Zweefpictogramkiezer: zoomen
Zoals u nu kunt zien, hebben we de merkkleuren voor deze lay-out aan de overlay toegevoegd, evenals het pictogram gewijzigd dat Divi standaard biedt voor de overlay-functie bij zweven in deze module.
Paginering aanpassen
We gaan nu kleine CSS-fragmenten gebruiken om aanvullende aanpassingen aan onze module Filterbare portfolio toe te voegen. Eerst zullen we de paginering van deze module aanpassen. Vervolgens verwijderen we de rand die erboven verschijnt met een enkele regel CSS
Paginering tekst
- Paginering:
- Lettertype: Krona One
- Tekstuitlijning: gecentreerd
- Tekstkleur: #ff6651, #000000 (zweven)
Voor onze CSS schakelen we over naar het tabblad Geavanceerd van onze module. Ten tweede klikken we op het tabblad Aangepaste CSS. Vervolgens voeren we het volgende codefragment in om de rand boven onze paginering te verwijderen, waardoor het er overzichtelijker uitziet.
Portfolio paginering
border-top: 0px;
Divi-instellingen en CSS gebruiken om filtertekst aan te passen
Voor de filtertekst gaan we nog een stap verder. We gaan CSS gebruiken om zowel de achtergrond als de zweefeffecten te wijzigen.
We willen een perfecte continuïteit hebben tussen de nieuw toegevoegde module en de stijl van het lay-outpakket. Laten we eerst onze Divi-instellingen voor het lettertype invoeren.
Filter Criteria Tekst
- Filtercriteria:
- Lettertype: Krona One
- Letterkleur: #ffffff, #000000 (aanwijzen)
Zoals het er nu uitziet, lijkt ons filter verdwenen te zijn. In de standaardstatus is het inderdaad witte tekst op een witte achtergrond. We zullen dit echter op twee plaatsen wijzigen met aangepaste CSS.
Eerst voegen we een CSS-fragment toe aan de pagina-instellingen dat een achtergrond toevoegt aan de filtertekst. Ten tweede zullen we het actieve portfoliofilter aanpassen met behulp van het tabblad Geavanceerd van de module.
Om toegang te krijgen pagina-instellingen, klik op de drie puntjes in het midden van het scherm. dan selecteer tandwielpictogram waarmee de pagina-instellingen worden geopend. Dan jij navigeer naar het tabblad Aangepaste CSS en voer het volgende in om een achtergrond toe te voegen aan de filtertekst.
Aangepaste CSS
In dit CSS-fragment richten we ons op de achtergrondkleur van het filter. We richten ons ook op en stylen de zweeftoestand. Laten we vervolgens op de agenda wat meer CSS aan de module toevoegen en ons tabblad Actief filter markeren.
/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}
Portfoliofilter actieve tabbladstijl
Het actieve tabblad van de fportfolio filter vestigt de aandacht van gebruikers op de huidige portfoliocategorie die ze bezoeken. Momenteel heeft dit filter witte tekst en een lichte achtergrond.
We gaan naar het tabblad Geavanceerd van de module Filterbare portfolio en voeg tekst toe aan de standaard- en zweefstatussen van deze functie. Dit zijn de CSS-eigenschappen die we in een standaardstatus zullen toevoegen:
background: #ff6651;
color: #ffffff !important;
Staat bij zweven
Bij zweven veranderen we de achtergrond in zwart.
color: #000000!important;
Final look van het ontwerp van Divi's filterbare portfolio met "Divi Conference"
Hier is de laatste blik!
En nu, zo ziet het eruit als je zweeft!
Aanpassing van Divi's Filterable Portfolio-module: "Divi Online Yoga Instructor"
Net als bij de Divi Conference Edition vindt u uw lay-out in het Online Yoga Instructor Layout Pack in Divi Builder.
We zullen de lay-out van de bestemmingspagina gebruiken voor deze zelfstudie. Scrol omlaag naar het gedeelte Sectie Klassen met de titel Sectie Alle aankomende lessen.
De module Filterbare portfolio invoegen
Vanaf hier zullen we de rijen met de klassen verwijderen. Klik op het paarse icoontje met drie puntjes erop . Dan, selecteer de draadmodelweergave. Ten slotte verwijdert u de twee rijen met drie kolommen.
Dan zullen we ze vervangen door een enkele kolom in de rij binnenin. Vervolgens voegen we onze Filterable Portfolio-module toe.
Net als in het vorige voorbeeld gebruiken we voor deze module de rasterlay-out met een veelvoud van 4 voor het aantal berichten.
Laten we nu iets anders doen met de informatie die we op de kaart presenteren.
In het tabblad Content, navigeren naar Communie en deselecteer Toon categorieën . Dit betekent dat de Portfolio-module alleen de naam van het project weergeeft zonder de naam van de categorie waarin het zich bevindt.
Aanpassing van filtercriteriatekst, projecttitel en pagineringstekst
Laten we de stijlbasis definiëren voor de tekstdelen van onze module. De hoofdtekst van deze lay-out is Open Sans en het lettertype dat wordt gebruikt voor de hoofdkoppen is Beitel. Daarom zullen we tijdens het stylingproces een combinatie van deze twee lettertypen gebruiken.
Teksten
- Tekstuitlijning: gecentreerd
- Tekstkleur: Licht
Titel tekst
- Titellettertype: Cinzel
- Titel Tekst Kleur: #ffffff
Filter criteria tekst
- Filtercriteria Lettertypegewicht: vet
- Filter Criteria tekst Kleur: #ffffff
Paginering tekst
- Paginering Lettertype Gewicht: Vet
Zo ziet onze filterbare portfoliomodule er nu uit. Het is niet veel, maar we komen er langzaam aan!
Maak een doorzichtige hover-overlay
Laten we ons laten inspireren door de verschillende modules en prachtige verlopen in deze lay-out. Hiervoor maken we een doorschijnende hover-overlay en passen we het pictogram aan dat ook verschijnt bij hoveren.
- Kleur zoompictogram: #323741
- Kleur zwevende overlay: rgba (255 201 165, 0,85)
- Hover Icon Picker: zoek naar een blad en zie het pictogram hierboven
Rand toevoegen aan portfolio-rasterelementen met aangepaste CSS
Net als in ons eerste voorbeeld, zullen we nu CSS gebruiken om meer interesse toe te voegen aan onze module Filterbare portfolio.
Nu gaan we een rand toevoegen rond elk afzonderlijk item in het portfolioraster. Gebruik het onderstaande CSS-fragment in het aangepaste CSS-gedeelte van de pagina-instellingen om onze rand toe te voegen.
We zullen ook "border" gebruiken als de CSS-klasse voor deze module.
- CSS-klasse: grens
Aangepaste CSS
/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}
Hier hebben we nu onze Filterable Portfolio-module met een mooie rand - en opvulling - rond elk rasteritem.
CSS toegevoegd om pagineringsrand te stylen
Laten we, in tegenstelling tot ons vorige voorbeeld, kleur toevoegen aan de rand van onze paginering met CSS. Dit gaat ook in de wijk Instellingen > Aangepaste CSS-pagina .
/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}Filtercriteria tekststijl
Vergelijkbaar met de stijl van onze Divi Conference Portfolio-module, willen we jazz toevoegen aan onze categoriefilters. Nogmaals, we willen putten uit de stijl die al aanwezig is in de sjabloon die ons is verstrekt.
Hier is de CSS die we zullen toevoegen in onze aangepaste CSS-sectie om de achtergrond en zweefbeweging van onze filterbalk te targeten.
/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}Met deze twee nieuwe toevoegingen aan onze aangepaste CSS ziet onze module Filterbare portfolio er zo uit.
Merk echter op hoe het actieve portfoliofilter verloren gaat. Het heeft altijd een lichte achtergrond met witte tekst erop. Laten we naar de module-instellingen gaan en wat CSS toevoegen om dat te veranderen.
Aangepaste CSS
Actief portfoliofilter:
background: #ffffff;
color: #323741 !important;
Module-animatie verwijderen
Om een schonere ervaring te bieden, zullen we de standaardanimatie verwijderen die wordt geleverd met de module Filterbare portfolio. Hiervoor moeten we eerst teruggaan naar onze pagina-instellingen en wat CSS toevoegen die de portfolio-rasterelementen zal targeten en de glijdende overgang dat gebeurt out of the box.
Aangepaste CSS
/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}Wijzig het portfolioraster van vier kolommen in drie
Onze nieuwste CSS-toevoeging zal zijn om onze Filterable Portfolio-module te transformeren van vier kolommen naar drie. Dit geeft ons meer ruimte om onze projecten te zien.
Ook gaan we een extra regel toevoegen aan onze module. U vindt er ook het nieuwste CSS-fragment dat u kunt gebruiken om uw kolommen te converteren.
Aangepaste CSS
Voor dit laatste fragment voegen we de CSS-ID toe #driekolommenraster naar onze module. We houden onze CSS-klasse van vroeger nog steeds intact.
/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}
Download DIVI nu!!!
Conclusie
Zoals bij de meeste Divi-modules, kunnen de instellingen die bij Divi worden geleverd, verder worden ontwikkeld met CSS. Het presenteren van uw werk is een belangrijk onderdeel van het runnen van een online bedrijf, blog of merk.
Daarom is het essentieel om een georganiseerde manier te hebben om je werk weer te geven. Verdien tips die vandaag zijn gedeeld om deel te nemen aan uw eigen ontwerpreis van Divi's Filterable Portfolio-module.
Hopelijk voegt deze techniek nog een nuttige ontwerpvaardigheid toe voor toekomstige projecten.
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.
...
