Share
Vi ska visa dig hur du kan göra allvarliga visuella förändringar på dina WordPress-webbplatser med absolut ingen tidigare erfarenhet av CSS. Men först, låt oss ta en minut för lite WordPress uppskattning.
Gamla wordpress gränssnittKom ihåg det här? Det här var vad WordPress såg ut när vi först blev kär i det. Elva år senare och vi är fortfarande kär i det men (tack och lov) det har förändrats så mycket det är knappt igenkänt.
Från en enkel bloggplattform till världens mest populära innehållshanteringssystem är WordPress nu grunden till hundratusentals populära webbplatser med en armé av utvecklare som arbetar på plattformen och en hel annan armé av utvecklare bygger så många teman och plugins för det att sälja dem är ett heltidsjobb för många människor. Themeforest är förmodligen den mest kända temabutiken på nätet, och de präglar nästan 20 000 teman, varav en stor majoritet är för WordPress. För att få det i perspektiv kan du ha en helt annan webbplats varje dag i 54 år!
Du skulle vara svårt att hitta en jämförbar produkt, betald eller gratis, vilket gör det så enkelt föricke-kodare att gå från noll till en helt fungerande webbplats så enkelt.
Under de senaste åren har vi sett anpassning till WordPress gjort ännu enklare tack vare den växande listan av sidbyggare som hjälper användarna att enkelt kombinera sina egna mönster. Kombinera dessa kraftfulla arkitekturverktyg med den växande listan av säkerhet, dela och kommentera plugins, det är super enkelt att bygga den webbplats du alltid har velat ha.
Allt som nämns ovan kommer att få dig 90% av vägen allt innehåll du behöver, på en plattform du litar på ser nästan perfekt tack vare det hårda arbetet hos utvecklarna bygger stora teman och plugins.
Men även med de bästa teman kommer du alltid att vilja göra små förändringar. Lite visuella ändringar för att göra ett tema ditt, annorlunda än någonting annat. Oavsett om det rundar av hörn eller förtjockande gränser eller byter skugga runt ett objekt, är det dessa ändringar som gör ett bra tema perfekt.
Alla ovan nämnda förändringar kommer ner tillAnpassa CSS. Lätt nog om du är en designer eller en utvecklare, men som att försöka läsa matrisen om du inte är.
Att göra CSS-ändringar brukade innebära att använda verktyg utformade för utvecklare, verktyg som Webbläsarinspektörer att hitta relevanta CSS-väljare och manipulera dem manuellt. Du måste då kopiera den CSS som text, klistra in den i en textredigerare för att se till att den bara hade den information du behövde och inte hämtat webbläsaralternativ som kryssrutor eller namnen på stilark. Du skapar antingen ett barntema för din WordPress-webbplats och kopierar det där eller använder de anpassade CSS-rutorna som nu kommer med så många teman. Det är en väldigt lång process. Med så många steg är din exponering för att göra misstag kraftigt ökad och felsökning kan vara en tid hog.
Precis som sida byggare gjort det enklare att ändra strukturen på en WordPress-webbplats, gör CSS Hero visuell redigering möjlig. Som en icke-designer kan du titta på ett hörn och tänka "gör det krökt, det kan inte vara så svårt", men då inspekterar du koden som behövs för att göra den förändringen och det är skrämmande.
CSS Hero InterfaceAnvända CSS Hero känns mer som att använda Photoshop eller en liknande produkt. Med reglaget kan du justera saker som vaddering, marginaler, skarpa hörn och teckenstorlekar, medan färgpalettar gör att du kan justera standardutseendet för att bättre matcha ditt varumärkes tema och stil.
Även veterandesigners och CSS-guruer uppskattar det användarvänliga realtidsgränssnittet. Det gör bara saker smidigare, snabbare och lättare att justera.
Hur enkelt? Så enkelt som att installera ett plugin.
CSS Hero skickas inte med en lång bruksanvisning eftersom du inte behöver den. Vi ska visa dig hur du kan anpassa din webbplats om ett par minuter.
CSS Hero-bultknappVarje anpassning börjar med att klicka på en blå blixtbult. Detta öppnar CSS Hero-menyn med anpassningar direkt på framsidan på din webbplats, ingen röra runt i instrumentbrädan, gör ändringar och sedan gå tillbaka för att se hur de ser ut. Titta på förändringarna hända när du gör dem.
Vad du gör med CSS är upp till dig, lämna det i CSS Hero och det kommer att fungera som en charm utan ytterligare åtgärder behövs. Du kan också kopiera den till enbarntema eller din anpassade CSS-panel. Din CSS, dina regler. Låt oss hoppa rakt i redigeringar!
För den här demonstrationen använder vi Divi-temat med eleganta teman. Det här är en av dussintals hjälte-färdiga teman (vilket innebär att vi har lagt till alla de väljare du behöver för att få det att fungera direkt ur lådan). Om du inte använder ett hjältefärdigt tema kan du fortfarande lägga till egna klasser och ID direkt i CSS Hero, eller använda Raketläge, men vi kommer senare till det.
Med undantag för att lägga till ett par sidor och ett blogginlägg, har vi påbörjat med Divi ganska "som det är". Vi vill visa dig vad CSS Hero gör för ett nytt tema. Vi använder ett blogginlägg som ett exempel eftersom det kanske är som standard, den vanligaste delen av Divi. Det är den enda sektionen där du inte kan använda den inbyggda sidobyggaren, så det är här du vill absolut lägga till dinegna personliga känslor.
Först och främst vill vi byta det här huvudet - det är väldigt plattbesparat för en tunn grå linje under den är det väldigt lite på gång. Vi ska använda CSS Hero för att lägga till en droppskugga under den och höja den från sidan. CSS Hero levereras med en massa alternativ för att lägga till olika typer av droppskuggor, som alla kan tweaked för att hjälpa dig att få önskad effekt.
Box ShadowNästa kommer vi att ändra färgen väldigt lite till vitvit. Du kan använda den inbyggda färgväljaren för att göra dessa ändringar, eller om du arbetar utanför ett färgschema kan du bara mata in RGBA- eller HEX-värdena. Båda stöds och är enkla att mata in.
Ändra rubriken BakgrundsfärgNästa kommer vi att rikta oss till kroppsdelen av bloggen, genom att klicka på den så CSS Hero kan visa oss vilka alternativ som finns. Härifrån kommer vi att ändra bakgrundsfärgen till en mörkare grå. Nu står vår rubrik ut och när vi gör de ytterligare ändringarna, så kommer vårt innehåll och sidofält.
Genom att ändra den vänstra bakgrunden till vitt sätter den sig verkligen på sidan, men färgen später ut lite vid kanten, så vi har givit den en mörkare kant bara 1 pixel tjock. En liten justering av gränsen radie ger sektionen en fin kurva och justering av vadderingen gör en fin kant runt innehållet.
Vi har ändrat titelrubrikerna till Helvetica. En av över 100 Google-teckensnitt som visas i teckensnittsmenyn i CSS Hero, men om du vill lägga till en av de andra 550 + Google-tecknen är det lätt att göra.
Ändra teckensnittet: Helvetica
Ändra bakgrunden till grå
Lägg till 1px av gränsen
Lägger 20px på vaddering
Lägger till radie i radSom standard lägger Divi den presenterade bilden från ett blogginlägg under titeln i full bredd. Detta tar upp mycket utrymme ovanför vikten och skjuter texten ur sikte. Vi har använt CSS Hero för att ändra bredden till 50% och flyta bilden rätt. Genom att ställa in den nya höjd av bilden till bil Det har hållit sitt bildförhållande och bilden ser perfekt ut på alla enheter. Vi har också lagt till lite stoppning till bilden så texten inte sitter bredvid den. Lägga lite svängda hörn till bilden med hjälp av glidreglaget i CSS Hero var allt som behövdes för att göra bilden så perfekt.
Ändra storlek på den utvalda bilden och lägg till en radieradiusNågra andra små redigeringar med hjälp av CSS Hero, inklusive att aktivera metateksten, ändra färg och kant på knappen "Skicka kommentar" och vi är ganska nöjda med hur den vänstra delen ser ut. Om vi jämför det med hur det såg ut förut kan du se en stor förbättring har gjorts inom några minuter.
Meta är nu i storlekVi flyttade sedan vidare till sidofältet som återigen är ganska vanligt. Genom att använda samma tekniker som användes för att redigera vår vänstra handsektion kunde vi snabbt applicera en krökt kant och en mörk bakgrund som hjälper det här avsnittet att hoppa av sidan. Vi ändrade titelfonterna för att matcha våra nuvarande anpassningar och gav dem en blek färg för att hjälpa till att sticka ut på den mörka bakgrunden.
Vi ändrade länkfärgerna för att göra dem ljusare och riktade dem specifikt till när användaren svävar och ställer in en annan färg. Vi blev av med den vanliga elektriska blåen och gick med något lite mer i linje med temat. Om du ville, kan du också ställa in en annan färg för aktiva länkar och länkar som hade varit besökt tidigare med hjälp av CSS Hero.
SidofältetGenom CSS Hero exportverktyget kan vi se vad vi just skapat på vår sida, på kodsidan.
Detta kan vara användbart för dem som vill börja förstå CSS, såväl för devs som bara vill exportera den genererade koden och kopiera och klistra vart de vill.
Fragment av hela CSS, genererad av CSS Hero
Du kan även använda vårt nya inspektörsverktyg för att granska CSS som du har skapat och bli bekant med hur dessa ändringar görs. Du kan använda inspektören för att göra små ändringar i din CSS, precis som att justera teckensnittstorleken, kurvan eller tjockleken på en kant eller något annat. Den comfier du får med CSS, desto mer användbar blir inspektionsverktyget.
Sammantaget tog dessa anpassningar drygt fem minuter. Fem minuter för att helt ändra nästan alla delar av blogginlägget.
Hjälte klar teman är bra att gå ur lådan som diskuterats tidigare. De flesta av de populära WordPress-teman är hjälte redo, inklusive Generatepress, Enfold, Genesis Framework, Pagelines DMS, WooCommerce plugin och LayersWP.
Det betyder att ingen konfiguration är nödvändig, men om det är så är det enkelt också. Det finns två sätt att gå om det.
En relativt ny funktion och en som vi är ganska förtjust i, Raketläge, söker automatiskt efter tema i stilarket för giltiga väljare. När den hittades kommer den att lägga till dem i CSS Hero och låta ditt icke-hjälte redo tema fungera extremt bra utan någon ytterligare konfiguration. Om ditt tema visar sig vara oförenligt med Rocket Mode, kan du lägga till dina väljare med det inbyggda konfigurationsverktyget.
SnabbkonfiguratornOm du känner till klasserna och ID: erna som ditt tema använder kan du manuellt lägga till dem i CSS Hero och rikta dem på samma sätt som om du skulle ha något annat element i ett hjälteberedt tema. Behöver du hjälp med att hitta dem? Prova inspektionsverktyget i de flesta webbläsare eller leta efter temat stilark för allt med en punkt (.) Framför den eller en hashtag (#). Alternativt kommer de flesta avancerade teman att innehålla dokumentation, antingen inom själva temat eller på deras hemsida med relevanta selektörer du behöver.
Vi nämnde tidigare om de strukturella fördelarna med att använda en sidobyggare för att påskynda / underlätta processen med att bygga sidor i WordPress. Men du vill fortfarande kontrollera hur de ser ut, eller hur? Detsamma kan sägas om plugins som bygger formulär, lägger till bord etc.
Det är en av anledningarna till att vi har tittat bortom bara teman när vi bygger CSS Hero. Du kommer att kunna använda det genast, precis som visat när du redigerar bloggsidan, med en massa coola WordPress-resurser. Beaver Builder, en mycket populär sidbyggare, är helt kompatibel med CSS Hero, liksom Visual Composer och Contact Form 7. Kontrollera om plugins du använder är kompatibla här.
Så det är det! Utan att någonsin veta CSS (eller något annat programmeringsspråk för den delen) kan du bygga en fullt mottaglig, mycket anpassad WordPress-webbplats. Om du gör, eller har byggt något som använder CSS Hero, var god och låt oss veta i kommentarerna. Vi skulle gärna se det!
Accentsconagua