Tilpas Divi Portfolio med CSS

Tilpas Dit Divi Portfolio med CSS: Fra 4 til 2, 3, 5 eller 6 Kolonner

Som designer eller kreativ person er det altid en god idé at have en online portfolio, der kan vise dit arbejde frem. I den digitale tidsalder vi lever i, er det at opbygge et personligt brand en fantastisk måde at skille sig ud fra konkurrencen. Med dette in mente er det en god idé at bruge Divi til at skabe din portfolio-hjemmeside. Divi har to indbyggede moduler, der kan hjælpe dig med at bygge din portfolio: Portfolio Modulet og det Filtrerbare Portfolio Modul. Begge giver dig mulighed for at vise dit arbejde på to forskellige måder. Mens Portfolio Modulet er en god måde at vise dit arbejde på, giver det Filtrerbare Portfolio Modul dig mulighed for at vise mere af dit arbejde og leveres med et filter, der gør det muligt at præsentere dit arbejde på en mere organiseret måde. Som standard viser vores portfoliomoduler dit arbejde i enten én eller fire kolonner, afhængigt af det layout du vælger. I denne tutorial vil vi dog bruge CSS til at ændre kolonnerne i Divis portfoliomodulet.

I denne tutorial vil vi bruge Divis Filtrerbare Portfolio Modul fra det GRATIS Print Designer Layout Pack. Specifikt vil vi bruge Print Designer Gallery Page Template fra layoutpakken. Der er to layout-stile i Divis portfoliomoduler. Grid Layoutet kommer med fire kolonner. Fullwidth Layoutet kommer i én kolonne. Vi vil bruge Grid Layoutet og CSS til at ændre kolonnerne i Divis portfoliomodul. Med CSS vil vi ændre kolonnerne i modulet til 2, 3, 5 og 6 kolonner. Modulet vil også være responsivt for både tablets og mobile enheder.

Eksempler på Forskellige Kolonner i det Filtrerbare Portfolio Modul

Her er slutresultatet af det arbejde, vi vil udføre i denne tutorial:

• Ændring af Divis Filtrerbare Portfolio Modul til 2 Kolonner
• Modificering af Divis Filtrerbare Portfolio Modul til 3 Kolonner
• Opdatering af Divis Filtrerbare Portfolio Modul til 5 Kolonner
• Redigering af Divis Filtrerbare Portfolio Modul til 6 Kolonner

Styling af det Filtrerbare Portfolio Modul

Før vi anvender CSS til at ændre antallet af kolonner i vores Filtrerbare Portfolio Modul, skal vi først style det, så det matcher vores skabelon.

Ændring af Layoutet

For at starte skal vi ændre vores modullayout. For at gøre dette klikker vi på tandhjulsikonet for at åbne modulindstillingerne for vores Filtrerbare Portfolio Modul.

Derefter klikker vi på Design-fanen. Når vi kommer ind på denne fane, klikker vi på Layout-fanen. Derefter ændrer vi layoutet på modulet fra Fullwidth til Grid.

Her kan vi se, at standard Grid Layoutet indeholder fire kolonner.

Styling af Portfolio Billedminiature

Nu hvor vi har vores Grid Layout på plads, lad os style portfolio-billedet.

Styling af Billed-Overlayet

Først begynder vi med at style overlayet. Rul ned og klik på Overlay-fanen. Brug følgende indstillinger til at tilføje et hvidt, gennemsigtigt overlay til billedet:

Overlay Indstillinger:

Tilføjelse af Billedkant

Efter styling af overlayet vil vi tilføje en kant. For at gøre dette skal du rulle ned til Billede-fanen. Brug følgende indstillinger til at style kanten:

Billede Indstillinger:

Styling af Titel Tekst

Dernæst vil vi style titelteksten i modulet. Lad os rulle ned til Titel Tekst-fanen. Derefter vil vi bruge følgende indstillinger til at style titlen:

Titel Tekst Indstillinger:

Bemærk, at vi bruger den samme skrifttype, som bruges i hele Print Designer Layout Pack.

Styling og Tilføjelse af CSS for Filter Kriterie Tekst

For Filter Kriterie Teksten vil vi bruge et par linjer brugerdefineret CSS i den avancerede fane i modulindstillingerne. Før vi tilføjer CSS'en, lad os style indstillingen. Først vil vi anvende den samme skrifttypefamilie og farve på Filter Kriterie Teksten.

Filter Kriterie Tekst Indstillinger:

For nu gemmer vi vores ændringer ved at klikke på det grønne flueben i modalboksen for det Filtrerbare Portfolio Modul. Vi er dog ikke færdige med Filter Kriterie Teksten endnu. Vi vil navigere til Sideindstillingerne for at begynde at bygge den brugerdefinerede CSS til vores projekt. For at gøre dette klikker vi på den lilla cirkel med menupunktet i midten af vores skærm.

Når vi har klikket på denne knap, vil vi kunne klikke på tandhjulsikonet. Tandhjulsikonet vil føre os ind i modalboksen for Sideindstillinger.

Når vi er i Sideindstillinger, klikker vi på den Avancerede fane. Derefter indsætter vi følgende CSS i boksen Brugerdefineret CSS:

/* Ændrer baggrundsfarve på filtre */ .et_pb_filterable_portfolio .et_pb_portfolio_filters li a { background: none; border: none; } .et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover { background: #ffffff; color: #323741 !important; } 

Bemærk, at vi kommenterer vores CSS! Glem ikke at gøre det, da vi vil vende tilbage for at tilføje til vores CSS, efterhånden som vi skrider frem i denne tutorial. Gem dine ændringer ved at klikke på den grønne fluebenknap nederst i modalboksen. Lad os nu gå tilbage til at redigere det Filtrerbare Portfolio Modul.

Styling af Meta Tekst

Nu vil vi style metateksten, der vises under portfolio-elementets titel. Vi ønsker at få den til at skille sig lidt mere ud fra titlen. For at gøre dette navigerer vi til Design-fanen i det Filtrerbare Portfolio modul og ruller ned til Meta Tekst-fanen. Som med de andre tekstkomponenter i vores modul, vil vi bruge skrifttypen Inter. Vi følger op med de understøttende designvalg, der er angivet nedenfor:

Meta Tekst Indstilling:

Styling af Pagineringstekst

Næste punkt på stylingblokken vil være Pagineringsteksten i vores modul. Vi vil kalde vores Printer Designer Layout Pack tilbage ved at bruge den samme skrifttype. Vi vil dog tilføje et strejf af vores blå til hover-effekten af dette aspekt af modulet. Vi vil også skabe noget interesse ved at gøre pagineringsteksten markant større end dens nuværende størrelse.

For at gøre dette skal vi først rulle ned til Pagineringstekst-fanen og klikke på den. Derefter bruger vi følgende stylingindstillinger:

Pagineringstekst Indstillinger:

Vi vil gå et skridt videre med vores Pagineringstekst. Vi ønsker at fjerne standardkanten, der vises oven på Pagineringsteksten. For at gøre det klikker vi på den Avancerede fane i vores modalboks. Derefter tilføjer vi følgende linje CSS:

/* Portfolio Paginering CSS */ border: none; 

Når du har gjort dette, kan vi nu gå videre til at tilføje brugerdefineret CSS for at give vores modul de sidste detaljer. Klik på den grønne fluebenknap for at gemme dine ændringer. Du kan også gemme siden, bare for en sikkerheds skyld, hvis du ikke har gemt dit arbejde undervejs i tutorialen (glem ikke at gøre det!).

Tilpasning af det Filtrerbare Portfolio Modul med CSS

Nu hvor vi er færdige med at designe vores Filtrerbare Portfolio Modul i Divi, vil vi nu bruge CSS til at ændre antallet af kolonner, vi vil have i vores modul. Men først vil vi foretage en mindre justering. Vi vil bruge CSS til at fjerne den indledende overgang, der følger med modulet som standard.

For at gøre dette flytter vi ind i Sideindstillingerne for at få adgang til Brugerdefineret CSS-fanen.

Derefter tilføjer vi følgende CSS til vores Brugerdefineret CSS:

/* Fjern overgang */ .et_pb_filterable_portfolio .et_pb_portfolio_item.active { transition: none; } .et_pb_portfolio_item { animation: none!important; transition: none !important; } 

Vi tilføjer dette under den forrige CSS, vi tilføjede til styling af filtrene. Sådan ser vores Filtrerbare Portfolio nu ud, med alle vores stylingredigeringer.

Lad os nu ændre kolonnenummeret fra 4 til 2.

CSS Designændringer for Vores Filtrerbare Portfolio Modul

Først og fremmest er det vigtigt at huske på, når man bruger dette modul, at tage højde for antallet af indlæg, du vil vise på hver side. For at vores CSS skal fungere korrekt, husk at vise et antal indlæg, der er deleligt med antallet af kolonner, du har. For eksempel, hvis du vil vise din portfolio i 6 kolonner, ville det være bedst at vise et minimum af 6 indlæg i dit postantal. Hvis du vil vise flere indlæg, ville det være bedst at have 12, 18, 24 osv. indlæg i modulet.

Du kan finde postantallet under Indholds-fanen i de Filtrerbare Portfolio og Portfolio Moduler.

Før vi tilføjer vores CSS, skal vi knytte en CSS-klasse til vores modul. For at gøre dette genåbner vi modulindstillingerne, klikker på den Avancerede fane og tilføjer vores CSS-klasse til vores modul. Vi bruger klassen column-portfolio. Så vi ikke bliver forvirrede, mens vi bevæger os gennem denne tutorial, vil vi præfikse denne klasse med antallet af kolonner, vi vil oprette.

Ændring af det Filtrerbare Portfolio Modul til To Kolonner

For at ændre antallet af kolonner i vores modul fra 4 kolonner til 2 kolonner, går vi igen til Sideindstillingerne. Derefter tilføjer vi følgende CSS:

/* 2 Kolonne Portfolio */ @media (min-width: 981px) { .two-column-portfolio .et_pb_grid_item { width: 47.25%!important; margin-right: 5.5%!important; } .two-column-portfolio .et_pb_grid_item:nth-child(3n) { margin-right: 5.5%!important; } .two-column-portfolio .et_pb_grid_item:nth-child(2n) { margin-right: 0!important; } .two-column-portfolio .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) { clear: none!important; } .two-column-portfolio .et_pb_grid_item.first_in_row { clear: unset; } } 

Bredden af vores første selector (.two-column-portfolio .et_pb_grid_item) bestemmer kolonnens bredde. margin-right-egenskaben, som vi bruger i hele dette CSS-snippet, tilføjer noget polstring (eller mellemrum) omkring vores portfolio-elementer. Her er, hvordan vores nye, to-kolonne modul ser ud.

Brug af CSS til at Ændre det Filtrerbare Portfolio Modul til Tre Kolonner

Nu vil vi ændre vores modul fra 2 kolonner til 3 kolonner. Her er et nyt CSS-snippet til at gøre dette:

/* 3 Kolonne Portfolio */ @media (min-width: 981px) { .three-column-portfolio .et_pb_grid_item { width: 29.66%!important; margin-right: 5.5%!important; } .three-column-portfolio .et_pb_grid_item:nth-child(3n) { margin-right: 0!important; } .three-column-portfolio.et_pb_grid_item:nth-child(4n) { margin-right: 5.5%!important; } .three-column-portfolio .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) { clear: none!important; } .three-column-portfolio .et_pb_grid_item.first_in_row { clear: unset; } } 

Husk, at efter at have tilføjet denne CSS, skal vi ændre postantallet til et tal, der er deleligt med 3. Lad os vælge 9.

Ændring af Antallet af Kolonner i det Filtrerbare Portfolio Modul til Fem Kolonner

Her er snippet'et til at få vores modul til at have 5 kolonner.

/* 5 Kolonne Portfolio */ @media (min-width: 981px) { .five-column-portfolio .et_pb_grid_item { width: 15.6%!important; margin-right: 5.5%!important; } .five-column-portfolio .et_pb_grid_item:nth-child(3n) { margin-right: 5.5%!important; } .five-column-portfolio .et_pb_grid_item:nth-child(5n) { margin-right: 0!important; } .five-column-portfolio .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) { clear: none!important; } .five-column-portfolio .et_pb_grid_item.first_in_row { clear: unset; } } 

Igen, husk at ændre postantallet! Vi går efter et højere tal her... vi går helt op til 15!

Redigering af Antallet af Kolonner i det Filtrerbare Portfolio Modul til Seks Kolonner

Endelig vil vi ændre vores portfolio til seks kolonner. Vi skal dog foretage en mindre justering, når vi bruger følgende CSS-snippet. Vi går ind i modulindstillingerne en sidste gang og tilføjer en linje CSS. Denne CSS vil ændre størrelsen på Portfolio Billedet. Årsagen til, at vi gør dette, er at sikre, at vi kan passe vores polstring (mellemrum) og kant inden for seks-kolonne layoutet.

For at gøre dette navigerer vi til den Avancerede fane i vores Filtrerbare Portfolio modul, og tilføjer følgende linje CSS til muligheden Portfolio Billede:

/* Portfolio Billede Brugerdefineret CSS */ .portfolio-image-css { width: 90%; } 

Nu hvor vi har denne CSS på plads, kan vi gå tilbage til Sideindstillingerne og tilføje dette CSS-snippet for at give modulet seks kolonner:

/* 6 Kolonne Portfolio */ @media (min-width: 981px) { .six-column-portfolio .et_pb_grid_item { width: 16%!important; margin-right: 5px!important; } .six-column-portfolio .et_pb_grid_item:nth-child(3n) { margin-right: 5px!important; } .six-column-portfolio .et_pb_grid_item:nth-child(6n) { margin-right: 0!important; } .six-column-portfolio .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) { clear: none!important; } .six-column-portfolio .et_pb_grid_item.first_in_row { clear: unset; } } 

For dette snippet vil du bemærke, at vi har ændret målingen af vores højre margen. Årsagen til, at vi gør dette, er, at vi stadig kan bevare de tykke hvide kanter, som vi implementerede i designfasen af denne tutorial. Så vi reducerede vores margen til 5px. Vi brugte også 18 indlæg i vores postantal.

Lad os Opsummere!

Da vi er nået til slutningen af din tutorial, håber jeg, at du har kunnet se, hvordan vi kan tilpasse standardmodulerne, der følger med Divi, ved hjælp af CSS. Da vi lever i en stadigt voksende digital tidsalder, er det altid en god idé at investere tid i at opbygge en online tilstedeværelse. Det kan se ud som at tilføje dit arbejde online i form af en digital portfolio! Vi håber, at denne tutorial vil hjælpe dig med at gøre din portfolio unik.

Hvis du vil læse andre artikler, der ligner Tilpas Divi Portfolio med CSS, kan du besøge kategorien Teknologi.