Share
Vi skal vise deg hvordan du kan gjøre alvorlige visuelle endringer på WordPress-nettstedene dine med absolutt ingen tidligere erfaring med CSS. Men først, la oss ta et minutt for en liten WordPress-takknemlighet.
Gamle wordpress-grensesnittHusk dette? Dette er hva WordPress så ut som når vi først ble forelsket i det. Elleve år senere, og vi er fortsatt forelsket i det, men (heldigvis) er det forandret så mye det er knapt gjenkjennbart.
Fra en enkel blogging-plattform til verdens mest populære innholdshåndteringssystem, er WordPress nå grunnlaget for hundretusenvis av populære nettsteder med en hær av utviklere som jobber på plattformen, og en helt annen hær av utviklere bygger så mange temaer og plugins for det, som selger dem, er en heltidsjobb for mange mennesker. Themeforest er trolig den mest berømte temabutikken på nettet, og de skryter nesten 20.000 temaer, hvorav et stort flertall er for WordPress. For å sette det i perspektiv, kan du ha en helt annen nettside hver dag i 54 år!
Du vil bli presset hardt for å finne et sammenlignbart produkt, betalt eller gratis, som gjør det så lett forikke-kodere å gå fra null til en fullt fungerende nettside like enkelt.
I de senere år har vi sett tilpassing til WordPress enda enklere, takket være den voksende listen over sidebyggere som hjelper brukerne til å trekke sammen sine egne design med letthet. Kombiner disse kraftige arkitekturverktøyene med den voksende listen over sikkerhet, deling og kommentere plugins, det er super enkelt å bygge nettstedet du alltid har ønsket.
Alt nevnt ovenfor vil gi deg 90% av veien; alt innholdet du trenger, på en plattform du stoler på; ser nesten perfekt takket være det harde arbeidet til utviklerne, bygger gode temaer og plugins.
Men selv med de beste temaene vil du alltid gjøre små endringer. Lite visuelle redigeringer for å lage et tema ditt, forskjellig fra noe annet. Enten det er avrunding av hjørner eller fortykning av grenser eller skygge rundt et objekt, er det disse endringene som gjør et godt tema perfekt.
Alle endringene nevnt ovenfor kommer ned tiltilpasse CSS. Enkel nok hvis du er designer eller utvikler, men som å prøve å lese matrisen hvis du ikke er det.
Å gjøre CSS-endringer pleide å bety å bruke verktøy utviklet for utviklere, verktøy som Nettleserinspektører å finne det aktuelle CSS selectors og manipulere dem manuelt. Du må da kopiere det CSS som tekst, lim det inn i en tekstredigerer for å forsikre deg om at den bare hadde den informasjonen du trengte, og ikke hadde hentet nettleseralternativer som boksene eller navnene på stilark. Du vil da enten lage et barnemne for ditt WordPress-nettsted og kopiere det der inne, eller bruk de egendefinerte CSS-boksene som nå kommer med så mange temaer. Det er en veldig lang prosess. Med så mange trinn er eksponeringen for å lage feil økt, og feilsøking kan være en tid hog.
Akkurat som sidebyggere gjort det enklere å endre strukturen på et WordPress-nettsted, gjør CSS Hero muligvis visuell redigering. Som en ikke-designer kan du se på et hjørne og tenke "gjør det buet, det kan ikke være så vanskelig", men så inspiser du koden som trengs for å gjøre det forandret, og det er skremmende;
CSS Hero InterfaceBruke CSS Hero føles mer som å bruke Photoshop eller et lignende produkt. Skyvekontrollene lar deg justere ting som polstring, marginer, skarphet av hjørner og skriftstørrelser, mens fargepaletter lar deg justere standardutsnittet for å bedre passe merkevaren og stilen din.
Selv veterandesignere og CSS-guruer setter pris på det brukervennlige sanntidsgrensesnittet. Det gjør bare tingene jevnere, raskere og enklere å justere.
Hvor lett? Så enkelt som å installere et plugin.
CSS Hero sendes ikke med en lang bruksanvisning fordi du ikke trenger det. Vi skal vise deg hvordan du kan tilpasse nettstedet ditt om et par minutter.
CSS Hero bolt knappenHver tilpasning starter med å klikke på en blå lynbolt. Dette åpner CSS Hero-menyen med tilpasninger rett på forsiden av nettstedet ditt, uten å snu rundt i dashbordet, gjør endringer og deretter gå tilbake for å se hvordan de ser ut. Se endringene skje når du lager dem.
Hva du gjør med CSS er opp til deg, la det være i CSS Hero, og det vil fungere som en sjarm uten at det trengs ytterligere tiltak. Du kan også kopiere den til enbarn tema eller ditt egendefinerte CSS-panel. Din CSS, dine regler. La oss hoppe rett inn i redigeringer!
For denne demonstrasjonen bruker vi Divi-temaet med elegante temaer. Dette er en av dusinvis av Hero-Ready-temaer (som betyr at vi har lagt til alle seleksjonene du trenger for å få det til å fungere rett ut av boksen). Hvis du ikke bruker et Hero-Ready-tema, kan du fortsatt legge til egne klasser og IDer rett inn i CSS Hero, eller bruk Raketmodus, men vi kommer videre til det senere.
Med unntak av å legge til et par sider og et blogginnlegg, har vi startet med Divi ganske mye som det er. Vi vil vise deg hva CSS Hero gjør til et nytt tema. Vi bruker et blogginnlegg som et eksempel fordi det kanskje er som standard, den enkleste delen av Divi. Det er den eneste delen der du ikke kan bruke den innebygde sidenbyggeren, så det er her du vil mest definitivt legge til dinegne personlige detaljer.
Først vil vi bytte den overskriften, det er veldig flatt, lagre for en tynn grå linje under den, det er veldig lite på gang. Vi skal bruke CSS Hero til å legge til en dropshadow under den og heve den av siden. CSS Hero kommer med en rekke alternativer for å legge til forskjellige typer drop shadows, som alle kan tweaked for å hjelpe deg med å få ønsket effekt.
Box ShadowDeretter skal vi endre fargen svært lite til offwhite. Du kan bruke den innebygde fargevalgeren til å gjøre disse endringene, eller hvis du jobber av et fargeskjema, kan du bare legge inn RGBA- eller HEX-verdiene. Begge støttes og er enkle å skrive inn.
Endre topptekstfargeDeretter skal vi målrette mot kroppsdelen av bloggen, ved å klikke på den så CSS Hero kan vise oss de tilgjengelige alternativene. Herfra skal vi endre bakgrunnsfargen til en mørkere grå. Nå står vår overskrift ut og når vi gjør de ekstra endringene, så vil innholdet og sidebjelken.
Ved å endre det venstre områdebakgrunnen til hvitt setter det seg virkelig på siden, men fargen fortynner litt ved kanten, slik at vi har gitt den en mørkere kant bare 1 pixel tykk. En liten justering til grenseradiusen gir snittet en fin kurve og justering av polstring gir en fin kant rundt innholdet.
Vi har endret tittelskrifter til Helvetica. En av over 100 Google-skrifttyper som vises i skriftmenyen i CSS Hero, men hvis du vil legge til en av de andre 550 + Google-skriftene, er det enkelt å gjøre.
Endre skriften: Helvetica
Endre bakgrunnen til grå
Legg til 1px av grensen
Legger til 20px med polstring
Legger til grenseradiusSom standard legger Divi til kjennetegnet bilde fra et blogginnlegg under tittelen i full bredde. Dette tar opp mye plass over klaffen og skyver teksten ut av visningen. Vi har brukt CSS Hero til å endre bredden til 50% og flyte bildet riktig. Ved å sette den nye høyde av bildet til auto den har beholdt aspektforholdet og bildet ser perfekt ut på alle enheter. Vi har også lagt til en liten bit av padding til bildet slik at teksten ikke sitter rett ved siden av den. Hvis du legger litt buede hjørner til bildet ved hjelp av glidebryteren i kantlinjen i CSS Hero, var alt som trengs for å få dette bildet til å se perfekt ut..
Endre størrelsen på det valgte bildet og legg til en kantlinjeNoen få andre små redigeringer ved hjelp av CSS Hero, inkludert kapitalisering av metateksten, endring av fargen og grensen til "send kommentar" -knappen, og vi er ganske fornøyd med hvordan den venstre delen ser ut. Hvis vi sammenligner det med hvordan det så ut før, kan du se en stor forbedring har blitt gjort om noen minutter.
Meta er nå i stor bokstavVi flyttet videre til sidelinjen, som igjen, som standard, er ganske vanlig. Ved å benytte de samme teknikkene som ble brukt for å redigere vår venstre håndseksjon, kunne vi raskt bruke en buet kant og mørk bakgrunn som hjelper denne delen å hoppe av siden. Vi endret tittelskrifter for å matche våre nåværende tilpassinger og ga dem en blek farge for å skille seg ut på den mørke bakgrunnen.
Vi endret koblingsfarger for å gjøre dem lettere og målrettet dem spesielt når brukeren svinger og setter en annen farge. Vi ble kvitt standard elektrisk blå og gikk med noe litt mer i tråd med temaet. Hvis du vil, kan du også sette en annen farge for aktiv lenker og lenker som hadde vært besøkt i det siste ved hjelp av CSS Hero.
SidebjelkenGjennom CSS Hero-eksportverktøyet kan vi se hva vi nettopp har opprettet på nettstedet vårt, på kodesiden.
Dette kan være nyttig for de som ønsker å begynne å forstå CSS, også for devs som bare vil eksportere den genererte koden og kopiere og lime inn hvor de vil.
Fragment av hele CSS, generert av CSS Hero
Du kan til og med bruke vårt nye inspektørverktøy for å undersøke CSS som du har opprettet, og bli kjent med hvordan disse endringene gjøres. Du kan bruke inspektøren til å gjøre små endringer i CSS, for eksempel å justere skriftstørrelsen, kurven eller tykkelsen til en kant eller noe annet. Den comfier du får med CSS, jo mer nyttig blir inspektørverktøyet.
Alt i alt tok disse tilpassingene litt over fem minutter. Fem minutter å fullstendig endre nesten alle elementer i blogginnlegget.
Helt klar temaer er gode å gå ut av boksen som diskutert tidligere. De fleste av de populære WordPress-temaene er helt klar, inkludert Generatepress, Enfold, Genesis-rammeverk, Pagelines DMS, WooCommerce-plugin og LayersWP.
Dette betyr at ingen konfigurasjon er nødvendig, men hvis det er det, er det også lett. Det er to måter å gå om det.
En relativt ny funksjon, og en som vi er ganske glad i, Rocket-modus, vil automatisk søke på temaets stilark for gyldige velgere. Når det er funnet, vil det legge dem til CSS Hero og la det ikke-helt-klare temaet virke ekstremt godt uten videre konfigurasjon. Hvis temaet ditt av en eller annen grunn viser at den er uforenlig med rakettmodus, kan du legge til valgene dine med det innebygde konfigurasjonsverktøyet.
HurtigkonfiguratorenHvis du kjenner klassene og IDene som temaet ditt bruker, kan du manuelt legge dem til CSS Hero og målrette dem på samme måte som du ville noe annet element i et helt-tema. Trenger du hjelp til å finne dem? Prøv inspeksjonselementverktøyet i de fleste nettlesere eller søk temaet stilark for alt med en prikk (.) Foran den eller en hashtag (#). Alternativt vil de fleste high end-temaer inkludere dokumentasjon, enten innenfor selve temaet eller på deres hjemmeside med de relevante velgerne du trenger.
Vi nevnte tidligere om de strukturelle fordelene ved å bruke en sidebygger for å fremskynde / gjøre prosessen med å bygge sider i WordPress enklere. Men du vil fortsatt kontrollere hvordan de ser ut, ikke sant? Det samme kan sies for plugins som bygger skjemaer, legger til bord osv.
Det er en av grunnene til at vi har sett utover bare temaer når vi bygger CSS Hero. Du kan bruke det med en gang, akkurat som vist når du redigerer bloggsiden, med en rekke kule WordPress-ressurser. Beaver Builder, en veldig populær sidebygger, er fullt kompatibel med CSS Hero, som er Visual Composer og Contact Form 7. Sjekk for å se om plugins du bruker, er kompatible her.
Så det er det! Uten å vite CSS (eller noe annet programmeringsspråk for den saks skyld) kan du bygge et fullt responsivt, svært tilpasset WordPress-nettsted. Hvis du gjør, eller har bygget noe som bruker CSS Hero, må du bare gi oss beskjed i kommentarene. Vi vil gjerne se det!
Accentsconagua