Wizualny edytor CSS do Wordpressa - SiteOrigin CSS

Wordpress to wspaniały silnik, dzięki któremu w kilka sekund możemy postawić stronę internetową. Możemy kilka rzeczy zmienić za pomocą kilką kliknięć, ale najważniejsze jest w WP intuicyjne dodawania i edytowanie treści. Ale jak zmienić tło, jeśli nie mogę tego zrobić w persjonalizacji i w ustawieniach kokpitu? Jak zmienić kolor czcionki jak i jej krój? Jak kompletnie zmienić styl menu?

Każdy wizjoner, który korzysta z darmowych szablonów WP nie jest do końca zachwycony efektem, chce więcej. Żeby przebudować stronę tak, jakby się chciało, trzeba jednak trochę znać język CSS i HTML, a dodatkowym atutem będzie jeszcze znajomość PHP.

Całe szczęście, że i bez tego można bardzo wiele zdziałać. SiteOrigin udostępnia nam kilka narzędzi, dzięki którym można zbudować naprawdę profesjonalne strony. Dziś zaprezentuję SireOrigin CSS. Z tą wtyczką, nie musicie znać języka CSS, a co więcej, możecie w łatwy sposób się jego nauczyć.



  1. Po zainstalowaniu wtyczki, znajdziemy ją w menu Kokpitu pod zakładką "Wygląd" -> "Custom CSS". Otworzy nam się strona, na której widzimy pole tekstowe, w którym osoby znające CSS'a mogą śmiało od razu pisać i korzystać. Ale i dla nich ta wtyczka ma jeszcze coś więcej. 
  2. Po kliknięciu na ikonka "oczka" otworzy nam się edytor wizualny. Tam nie trzeba znać języka, ale dokładniej go omówię poniżej. 
  3. Ta opcja pozwala znawcom języka CSS na zaobserwowanie swoich zmian "na żywo". Nie trzeba więc pisać, akceptować, odświeżać co chwilę strony. Wystarczy tutaj próbować swoich sił i sprawdzać, czy działają. 
Edytor wizualny to prawdziwa poezja, jeśli chodzi o intuicyjną, prostą, skuteczną edycję strony. 



  1. Największe pole to nasza strona, po której jeździmy kursorem i próbuje trafić na "blok" lub element, który chcemy zedytować. Przyda tu się przynajmniej teoretyczna wiedza stylizacji elementów na stronie przez CSS. Bo, jeśli na jednej podstronie chcemy zedytować tekst, to bądźmy pewni, że jest to będzie globalna zmiana na całej stronie. 
  2. Jak już wybierzemy to, co nas interesuje, to przy polach, które oznaczyłem cyfrą 2, 4, 5 i 6 pojawią się różne elementy. W zależności od tego gdzie i na co klikniemy, powinno się w tych polach wszystko zmienić. W polu numer "2" znajdziemy styl CSS jaki nadał autor szablonu dla danego elementu. 
  3. W tym polu możemy my działać. Wybieramy to, co chcemy zrobić. Czy chcemy w danym bloku zmienić rozmiar, kolor czcionki, czy chcemy dodać tło, itp. Są też zaawansowane opcje. Przed ich testowaniem, zachęcam jednak do poczytania trochę o tym, co one oznaczają w języku CSS. 
  4. Tu znajdziemy układ struktury elementu, który zaznaczyliśmy, czyli w jakich blokach, klasach się znajduje po kolei. Bywa, że to co zaznaczyliśmy, nie jest do końca tym elementem, który faktycznie chcieliśmy edytować. To się może zdarzyć i jest to normalne, ponieważ na rozbudowanej stronie znajdzie bardzo wiele bloków i klas i ciężko kursorem będzie trafić w ten jeden odpowiedni, zwłaszcza, że są one wizualnie jakby niewidzialne. Te pole jednak pomoże nam znaleźć odpowiedni element. A jeśli nie w tym polu to...
  5. ... w tym polu, w którym znajdują się z kolei bloki, elementy zawarte w tym, co kliknęliśmy, zaznaczyliśmy. 
  6. Tam znajdziecie dokładną nazwę naszego elementu oraz po prawej stronie haczyk "ok", którym zatwierdzacie zmiany i wracacie do układu z Kokpitu WP. Kliknięcie na haczyk nie oznacza jeszcze akceptację zmiany. Robimy to w układzie na Kokpicie klikając na klasyczne "Save CSS". 
Jeśli nie udało się Wam kliknąć i zedytować konkretnie tego elementu, który chcieliście, może to oznaczać, że nie został indywidualnie sklasyfikowany lub zblokowany. Pozostaje wejść w edytor i zająć się tym, ale to już dla tych, co znają HTML. Myślę, że i bez tego SiteOrigin CSS jest przydatnym narzędziem i wielu osobom pomoże. 

Brak komentarzy:

Obsługiwane przez usługę Blogger.