W artykule:
Zawsze fajnie jest eksperymentować z CSS i projektowaniem stron internetowych. Ale ręczne wiercenie kolorami, przyciskami i innymi rzeczamiamaboby mogą się bardzo szybko zestarzeć, jeśli chcesz szybko zaimplementować lub przetestować coś. I dlatego istnieją wtyczki takie jak Microthemer.
Microthemer jest wtyczką visual CSS editor, która pozwala zobaczyć wszelkie zmiany, które wprowadzasz na swojej stronie internetowej. Jego intuicyjny interfejs przenosi kod CSS do interfejsu front-end, więc wszystko, co musisz zrobić, to dosłownie przesuwać elementy strony za pomocą myszy.
Microthemer pozwala na wizualizację wszelkich zmian CSS i ułatwia modyfikowanie wyglądu witryny za pomocą kliknięcia przycisku. Ale tak proste, jak się wydaje, ta wtyczka jest nie tylko dla początkujących WordPress lub osób cierpiących na fobie edycji kodu. Dzięki funkcjom takim jak niestandardowe pakiety projektowe i zintegrowany edytor kodu, Microthemer ułatwia życie zarówno początkującym, jak i profesjonalistom.
Zmiana witryny lub motywów wtyczek za pomocą pakietów projektowych
Microthemer pozwala całkowicie zmienić styl witryny za pomocą pakietów projektowych.
Pakiety projektowe Microthemer zawierają foldery, selektory, ręcznie kodowane CSS i obrazy tła, które inni użytkownicy wcześniej stworzyli za pomocą Microthemer. Dzielą się na dwa rodzaje: skórki i rusztowania.
Skórki
Skórki zmieniają wygląd motywu lub wtyczki. Microthemer udostępnia zarówno skórki tematyczne, jak i skórki wtyczek—pierwsza zmienia wygląd motywu witryny, a druga pozwala modyfikować wtyczki. Istnieje kilka skórek dostępnych dla popularnych wtyczek, takich jak Formularz kontaktowy 7. Dodatkowo Microthemer ma sprytny samouczek na temat importowania lub eksportowania własnego pakietu projektowego w Centrum pomocy technicznej.
Po pobraniu skórki za pomocą pakietu projektowego można nadpisać istniejące style lub scalić skórkę z istniejącymi ustawieniami.
Łączenie jest często preferowane, ponieważ jest mniej uciążliwe. Microthemer po prostu dołącza foldery, selektory i niestandardowy kod w pakiecie projektu do istniejących ustawień. Nadpisanie zastąpi wszystkie wcześniej zastosowane style.
Rusztowania
Rusztowania niczego nie zmieniają. Zgodnie z bazą wiedzy Microthemer, celem rusztowania jest ” rusztowanie własnego procesu projektowania.”
Rusztowania Microthemer zawierają liczne selektory, które kierują się elementami HTML określonego motywu lub wtyczki, ale nie zawierają żadnych nowych reguł stylu. Co oznacza, że możesz wprowadzić własne style. Podobnie jak w przypadku skórek, możesz mieć rusztowania tematyczne i rusztowania wtyczek.
Możesz eksportować rusztowania do pakietów projektowych w ten sam sposób, w jaki eksportujesz Skórki. Aby wyeksportować istniejący pakiet projektowy bezpośrednio z Microthemer, wystarczy wybrać opcję eksportu z menu Pakiety—spowoduje to wyeksportowanie dowolnych folderów, selektorów lub ręcznie kodowanych CSS, które chcesz wyeksportować do rusztowania pakietu projektowego.
Rusztowania ułatwiają proces projektowania. Biorąc pod uwagę, że większość rusztowań Microthemer jest wykonana przez doświadczonych Guru CSS, są doskonałym sposobem na uproszczenie procesu projektowania.
Przeprojektowanie przycisków (lub czegokolwiek innego!) jednym kliknięciem
Mam obsesję na punkcie dobrze zaprojektowanych przycisków. Czego tu nie lubić? Ładny, interaktywny przycisk sprawia, że wrażenia użytkownika są nieskończenie lepsze. I z pewnością można to zrobić w Mikrotemerze.
Sposób działania Microthemera polega na modyfikowaniu selektorów CSS. Etykiety można dołączać do selektorów, aby ułatwić ich pobieranie i dostosowywanie.
Tak więc, jeśli chcesz zmodyfikować konkretny przycisk na swojej stronie, możesz wykonać następujące czynności:
Po pobraniu i aktywacji wtyczki, dostęp do obszaru roboczego Microthemer. Wybierz przycisk, który chcesz przeprojektować, klikając dwukrotnie element lub klikając ikonę docelową. Zdecydowałem się zmodyfikować ten przycisk CTA na mojej stronie:
Przed modyfikacją czegokolwiek musisz utworzyć selektor. Wprowadź nazwę selektora, wybierz folder, w którym chcesz go utworzyć, tak jak zrobiłem to poniżej, i kliknij Utwórz Selektor.
Po utworzeniu selektora możesz zmienić wszystko, co chcesz! Na przykład możesz zmienić czcionkę przycisku:
Zmiana czcionki przycisku.
Lub kolor przycisku:
Zmiana koloru przycisku.
Albo rozmiar!
Zmiana rozmiaru przycisku.
Kierując poszczególne elementy, możesz szybko dostosować wszystko w swojej witrynie bez manipulowania poszczególnymi fragmentami kodu. Możesz więc nie tylko dostosowywać przyciski, ale także zmieniać poszczególne elementy i elementy i przekształcać je w cokolwiek chcesz.
A to z pewnością ułatwia życie.
Przyprawianie Czcionek
Dobra, więc nie tak kategoryzowalibyśmy Google fonts—prawdopodobnie mieściłyby się one w bardziej praktycznej kategorii. Jednak dobra czcionka ma duże znaczenie dla każdej strony internetowej. Zanim zagłębisz się w rzeczywisty tekst witryny, czcionka jest tym, co komunikuje się z Tobą w pierwszej kolejności.
Microthemer pozwala na łatwe dodawanie Google fonts do swojej strony internetowej bez żadnych kłopotów. Wszystko, co musisz zrobić, to utworzyć selektor dla elementu, który chcesz utworzyć i zastosować wybraną czcionkę Google.
Po utworzeniu selektora tekstu (nazwałem go “Test tytułu sekcji”), Wybierz Google Font… opcja z rozwijanej listy. Następnie wybierz dowolną czcionkę Google, która Ci się spodoba, i presto!
Wybór czcionki Google.
Nowa czcionka Google dla tytułu sekcji-za pomocą kilku kliknięć.
Jeśli jesteś ciekaw kodu generowanego przez Mikrothemer, możesz uzyskać do niego dostęp poprzez Widok opcja menu pod Wygenerowane CSS & JS. W takim przypadku zmiana czcionki pojawia się tutaj:
Możesz również zmienić czcionkę ręcznie za pomocą edytora kodu Microthemer, co omówimy dalej.
Dodawanie niestandardowego kodu za pomocą zintegrowanego edytora kodu
Jeśli jesteś bardzo szczególny co do kodu, nie martw się-Microthemer ma twoje plecy.
Możesz przełączyć edytor kodu z Widok opcja menu, która wyświetla edytor kodu u góry.
Więc jeśli chcę ręcznie zmienić czcionkę dla tej samej sekcji tytułowej, jak to zrobiliśmy w poprzednim przykładzie, wszystko, co musisz zrobić, to utworzyć selektor z tym celem sekcji. Microthemer generuje ten kod automatycznie po kliknięciu przycisku Utwórz:
I ręcznie wprowadź niestandardową zmianę czcionki.
Na przykład, jeśli zdecyduję się zmienić czcionkę na Arial, po prostu w edytorze Microthemer wrzucę następujący kod:
I zaczynamy.:
Turn Back Time
Jeśli jesteś doświadczonym programistą WordPress (lub dowolnym programistą), wiesz, że kopie zapasowe są kluczowe. Nie ma nic gorszego niż to tonące uczucie, że nie można powrócić do poprzedniej wersji po popełnieniu strasznego błędu. Na szczęście Microthemer jest tutaj, aby to wszystko naprawić.
Microthemer pozwala szybko i bezboleśnie przywrócić poprzednie ustawienia do stanu, w jakim były. Więc nie musisz wchodzić i ciągle bawić się kodem ręcznie. Nie ma większego problemu niż manipulowanie kodem.
Microthemer pozwala przywrócić wszystkie zmiany lub powrócić do poprzednich wersji. Aby wyświetlić historię wersji, wystarczy wybrać ikonę wersji. Możesz wyświetlić historię wersji i powrócić do określonego punktu w czasie:
… Lub wybierz inną opcję przywracania, np. Wyczyść style lub Zresetuj wszystko. Po zresetowaniu wszystkiego wszystkie ustawienia zostaną przywrócone do pierwotnego stanu.
Wrapping Up
Wizualne edytory CSS, takie jak Microthemer, nie są koncepcją rewolucyjną. Jednak, gdy zrobisz to dobrze, wydajna wtyczka, taka jak Microthemer, może stać się atutem dla każdego programisty WordPress. Wprowadzanie zmian za pomocą jednego kliknięcia jest zawsze atrakcyjną koncepcją, jeśli jesteś stale naciskany na czas.
Oczywiście zawsze możesz samodzielnie zmodyfikować CSS całej witryny, jeśli masz umiejętności. Ale czy nie jest miło wiedzieć, że są inne opcje, które mają ułatwić Ci życie?
