Share
We laten je zien hoe je je WordPress-websites drastisch kunt veranderen zonder dat je daarvoor ervaring hebt met CSS. Maar eerst nemen we even de tijd voor een kleine waardering van WordPress.
Oude wordpress interfaceOnthoud dit? Zo zag WordPress er uit toen we er voor het eerst verliefd op werden. Elf jaar later en we zijn er nog steeds verliefd op maar (gelukkig) is het zo veranderd dat het nauwelijks herkenbaar is.
Van een eenvoudig blogplatform tot 's werelds populairste contentbeheersysteem, WordPress is nu de basis van honderdduizenden populaire websites met een leger van ontwikkelaars die op het platform werken en een heel ander leger van ontwikkelaars die zoveel thema's en plug-ins bouwen voor het, dat de verkoop van hen een full-time baan is voor veel mensen. Themeforest is waarschijnlijk de meest bekende themawinkel online en heeft bijna 20.000 thema's, waarvan een grote meerderheid voor WordPress is. Om dat in perspectief te plaatsen, zou u elke 54 jaar elke dag een geheel andere website kunnen hebben!
Je zou moeilijk worden ingedrukt om een vergelijkbaar product te vinden, betaald of gratis, dat maakt het zo gemakkelijkniet-codeerders om zo gemakkelijk van nul naar een volledig functionerende website te gaan.
In de afgelopen jaren hebben we het aanpassen aan WordPress nog eenvoudiger gemaakt dankzij de groeiende lijst met paginabuilders die gebruikers helpen hun eigen ontwerpen gemakkelijk samen te stellen. Combineer deze krachtige architectuurtools met de groeiende lijst met plug-ins voor beveiliging, delen en reageren, het is supereenvoudig om de site te bouwen die u altijd al had gewild.
Al het bovenstaande vermeldt u voor 90%; alle inhoud die u nodig heeft, op een platform dat u vertrouwt; ziet er bijna perfect uit dankzij het harde werk van de ontwikkelaars die geweldige thema's en plug-ins bouwen.
Maar zelfs met de beste thema's wil je altijd kleine veranderingen aanbrengen. Kleine visuele bewerkingen om een thema van u te maken, anders dan iets anders. Of het nu gaat om het afronden van hoeken of het verdikken van randen of het veranderen van de schaduw rond een object, het zijn deze veranderingen die een geweldig thema perfect maken.
Alle bovengenoemde veranderingen komen neer opaanpassen van CSS. Eenvoudig genoeg als je een ontwerper of een ontwikkelaar bent, maar graag de matrix probeert te lezen als je dat niet bent.
Het maken van CSS-wijzigingen betekende vroeger het gebruik van tools die ontworpen waren voor ontwikkelaars, tools zoals Browserinspecteurs om de relevante te vinden CSS selectors en ze handmatig manipuleren. Je zou dan die CSS als tekst moeten kopiëren, deze in een tekstverwerker moeten plakken om er zeker van te zijn dat hij alleen de informatie had die je nodig had en geen browseropties zoals keuzevakjes of de namen van stylesheets had verzameld. Vervolgens maakt u een kindthema voor uw WordPress-site en kopieert u het daarheen, of gebruikt u de aangepaste CSS-vakken die nu met zoveel thema's worden geleverd. Dat is een erg lang proces. Met zoveel stappen wordt je blootstelling aan het maken van fouten enorm vergroot en kan troubleshooting een tijdje zwoegen.
Net zoals paginabouwers het aanpassen van de structuur van een WordPress-site eenvoudiger maakten, maakt CSS Hero visuele bewerking mogelijk. Als een niet-ontwerper kun je naar een hoek kijken en denken "maak het gebogen, het kan niet zo moeilijk", maar dan inspecteer je de code die nodig is om die verandering aan te brengen en het is ontmoedigend;
De CSS-heldinterfaceHet gebruik van CSS Hero lijkt meer op het gebruik van Photoshop of een soortgelijk product. Schuifregelaars stellen u in staat dingen aan te passen zoals opvulling, marges, de scherpte van hoeken en tekengrootten, terwijl u met kleurenpaletten het standaard uiterlijk kunt aanpassen om beter bij het thema en de stijl van uw merk te passen.
Zelfs ervaren ontwerpers en CSS-goeroes waarderen de gebruiksvriendelijke real-time interface. Het maakt dingen gewoon vloeiender, sneller en gemakkelijker aan te passen.
Hoe makkelijk? Zo eenvoudig als het installeren van een plug-in.
CSS Hero wordt niet geleverd met een lange handleiding omdat je het niet nodig hebt. We laten u zien hoe u uw site binnen een paar minuten kunt aanpassen.
CSS Hero-knop boutElke aanpassing begint met de klik van een blauwe bliksemschicht. Dit opent het CSS Hero-menu met aanpassingen direct op de voorkant van uw website, geen rommel maken in het dashboard, wijzigingen aanbrengen en vervolgens weer naar voren gaan om te zien hoe ze eruitzien. Bekijk de veranderingen terwijl u ze maakt.
Wat je doet met de CSS is aan jou, laat het in CSS Hero en het zal werken als een charme zonder verdere actie nodig. Je kunt het ook kopiëren naar eenkind thema of uw aangepaste CSS-paneel. Jouw CSS, jouw regels. Laten we direct naar bewerkingen springen!
Voor deze demonstratie gebruiken we het Divi-thema van Elegant Themes. Dit is een van de tientallen Hero-Ready-thema's (wat betekent dat we alle selectors hebben toegevoegd die je nodig hebt om het direct uit de doos te laten werken). Als je geen Hero-Ready-thema gebruikt, kun je nog steeds je eigen klassen en ID's rechtstreeks toevoegen aan CSS Hero of gebruiken Rocket-modus, maar daar komen we later op terug.
Met uitzondering van het toevoegen van een paar pagina's en een blogpost, zijn we met Divi begonnen zoals het is. We willen je laten zien wat CSS Hero doet met een nieuw thema. We gebruiken een blogpost als een voorbeeld, omdat dit misschien standaard het duidelijkste onderdeel van Divi is. Het is de enige sectie waar je de ingebouwde paginabuilder niet kunt gebruiken, dus hier wil je zeker je advertentie toevoegeneigen persoonlijke tintjes.
Ten eerste willen we die kop wijzigen - het is heel plat - bespaar voor een dunne grijze lijn eronder is er heel weinig aan de hand. We gaan CSS Hero gebruiken om er een slagschaduw onder toe te voegen en deze van de pagina te tillen. CSS Hero wordt geleverd met een aantal opties voor het toevoegen van verschillende soorten slagschaduwen, die allemaal kunnen worden aangepast om het gewenste effect te bereiken.
Box ShadowVervolgens gaan we de kleur heel licht veranderen in gebroken wit. U kunt de ingebouwde kleurselectie gebruiken om deze wijzigingen aan te brengen, of als u van een kleurenschema werkt, kunt u gewoon de RGBA- of HEX-waarden invoeren. Beide worden ondersteund en zijn eenvoudig in te voeren.
Wijzig de kleur van de koptekstachtergrondVervolgens gaan we naar de body-sectie van de blog, door erop te klikken, zodat CSS Hero ons de beschikbare opties kan tonen. Vanaf hier gaan we de achtergrondkleur veranderen in een donkerder grijs. Nu valt onze kop op en als we eenmaal de aanvullende wijzigingen hebben doorgevoerd, zal onze inhoud en zijbalk ook veranderen.
Door de achtergrond van het linkergebied in wit te veranderen, zit het echt van de pagina af, maar de kleur verdunt een beetje aan de rand, zodat we het een donkerdere rand hebben van slechts 1 pixel dik. Een kleine aanpassing aan de randradius geeft de sectie een mooie curve en het aanpassen van de opvulling maakt een mooie rand rond de inhoud.
We hebben de titellettertypen gewijzigd in Helvetica. Een van de meer dan 100 Google-lettertypen die wordt weergegeven in de vervolgkeuzelijst met lettertypen in CSS Hero, maar als u een van de andere 550+ Google-lettertypen wilt toevoegen, kunt u dit eenvoudig doen.
Verander het lettertype: Helvetica
Verander de achtergrond in grijs
Voeg 1px van de rand toe
Een opvulling van 20px toevoegen
Randradius toevoegenStandaard plaatst Divi de afgebeelde afbeelding van een blogpost onder de titel op de volledige breedte. Dit neemt veel ruimte in beslag boven de vouw en duwt de tekst uit het zicht. We hebben CSS Hero gebruikt om de breedte te wijzigen in 50% en de afbeelding goed te laten zweven. Door het nieuwe in te stellen hoogte van de afbeelding naar auto het heeft zijn beeldverhouding behouden en het beeld ziet er perfect uit op alle apparaten. We hebben er ook een beetje aan toegevoegd vulling naar de afbeelding, zodat de tekst er niet direct naast staat. Het toevoegen van licht gebogen hoeken aan de afbeelding met behulp van de schuifknop voor de randstraal in CSS Hero was alles wat nodig was om deze afbeelding er perfect uit te laten zien.
Wijzig de grootte van de Featured Image en voeg een randstraal toeEen paar andere kleine bewerkingen met behulp van CSS Hero, waaronder het hoofdlettergebruik van de metatekst, het wijzigen van de kleur en rand van de knop 'Reactie verzenden' en we zijn redelijk tevreden met hoe het linkerdeel eruitziet. Als we het vergelijken met hoe het er voorheen uitzag, kunt u zien dat er in enkele minuten een enorme verbetering is aangebracht.
Meta staan nu in hoofdlettersWe zijn vervolgens overgegaan naar de zijbalk, die weer standaard vrij eenvoudig is. Door dezelfde technieken te gebruiken die werden gebruikt om onze linkerhandsectie te bewerken, konden we snel een gebogen rand en donkere achtergrond toepassen die dit gedeelte helpen om van de pagina af te springen. We hebben de titellettertypen aangepast aan onze huidige aanpassingen en een bleke kleur gegeven om op te vallen op de donkere achtergrond.
We hebben de koppelingskleuren gewijzigd om ze lichter te maken en hebben ze specifiek getarget voor wanneer de gebruiker zweeft en een andere kleur instelt. We hebben het standaard elektrisch blauw verwijderd en gingen met iets meer in overeenstemming met het thema. Als je dat wilt, kun je ook een andere kleur instellen actief links en links die waren geweest bezocht in het verleden met behulp van CSS Hero.
De zijbalkVia het CSS Hero exporthulpprogramma kunnen we zien wat we zojuist hebben gemaakt op onze site, aan de kant van de code.
Dit kan handig zijn voor diegenen die CSS willen begrijpen, maar ook voor ontwikkelaars die de gegenereerde code gewoon willen exporteren en kopiëren en plakken waar ze maar willen.
Fragment van de volledige CSS, gegenereerd door CSS Hero
U kunt zelfs onze nieuwe inspecteurstool gebruiken om de CSS die u hebt gemaakt te onderzoeken en bekend te raken met de manier waarop deze wijzigingen zijn aangebracht. U kunt Inspector ook gebruiken om kleine wijzigingen in uw CSS aan te brengen, zoals het aanpassen van de tekengrootte, de curve of dikte van een rand, of iets anders. Hoe comfier je krijgt met CSS, des te nuttiger wordt het inspectiegereedschap.
Al met al namen deze aanpassingen iets meer dan vijf minuten in beslag. Vijf minuten om bijna elk element van de blogpost volledig te wijzigen.
Held klaar thema's zijn goed om uit de doos te gaan zoals eerder besproken. De meeste van de populaire WordPress-thema's zijn klaar voor de held, inclusief Generatepress, Enfold, Genesis framework, Pagelines DMS, WooCommerce plugin en LayersWP.
Dit betekent dat er geen configuratie nodig is, maar als dat zo is, is dat ook gemakkelijk. Er zijn twee manieren om dit te doen.
Een relatief nieuwe functie en een waar we dol op zijn, de Rocket-modus, zoekt automatisch naar de stylesheet van jouw thema voor geldige selectors. Als het eenmaal is gevonden, voegt het deze toe aan CSS Hero en staat het uw niet-hero-ready-thema toe buitengewoon goed te werken zonder verdere configuratie. Als je thema om welke reden dan ook onverenigbaar blijkt te zijn met de Rocket-modus, kun je je selectors toevoegen met de ingebouwde configuratietool.
De snelle configuratorAls je de klassen en ID's kent die je thema gebruikt, kun je ze handmatig toevoegen aan CSS Hero en ze targeten, net als elk ander element in een heldklare thema. Hulp nodig bij het vinden van hen? Probeer de tool voor het inspecteren van elementen in de meeste browsers of zoek in de stijlpagina van uw thema naar iets met een punt (.) Ervoor of een hashtag (#). Als alternatief kunnen de meeste high-end thema's documentatie bevatten, hetzij binnen het thema zelf, hetzij op hun website met de relevante selectors die u nodig hebt.
We hebben het eerder al gehad over de structurele voordelen van het gebruik van een paginabuilder om het bouwen van pagina's in WordPress te versnellen / te vergemakkelijken. Maar je wilt toch bepalen hoe ze eruitzien, toch? Hetzelfde kan gezegd worden voor plug-ins die formulieren maken, tabellen toevoegen, enz.
Dat is een van de redenen waarom we verder hebben gekeken dan alleen thema's bij het bouwen van CSS Hero. Je kunt het meteen gebruiken, net zoals bij het bewerken van de blogpagina, met een heleboel coole WordPress-bronnen. Beaver Builder, een zeer populaire paginabuilder is volledig compatibel met CSS Hero, evenals Visual Composer en Contact Form 7. Controleer of de plug-ins die u gebruikt hier compatibel zijn.
Dus dat is het! Zonder CSS (of welke andere programmeertaal dan ook) te kennen, kunt u een volledig responsieve, zeer aangepaste WordPress-website bouwen. Als je iets doet, of iets hebt gebouwd met behulp van CSS Hero, laat het ons dan weten in de comments. We zouden het graag zien!
Accentsconagua