Share This

Framework Gantry 5 dla Wordpress - zakładka "Styles"

 Zobacz 1 część tutorialu

1. W zakładce "Styles" mamy do dyspozycji kilka zdefiniowanych stylu i możemy je dodatkowo modyfikować.

 

strony www, Lublin, Puławy, Gantry5, WordPress

 

2. Na górze po lewej stronie mamy okno umożliwiające wybór layoutu strony - czyli układu pozycji widżetów / particles - cząstek. Dopiero po wyborze layoutu powinniśmy modyfikować poszczególne elementy z menu poniżej: Styles / Layout / Content /

Jedynie pozycja "Page Settings" dostępna jest przy "Base Outline". Wybieram  "Home - Particles" czyli jest to prawdopodobnie układ przypisany do strony startowej.

strony www, Lublin, Puławy, Gantry5, WordPress

 

 3. Czym jest Layout - przechodzę na chwilę do zakładki "Layout" - Home Particle

Layout to siatka / układ pozycji widżetów. Możemy tu dodawać kolejne pozycje widżetów w sekcjach. Mamy tu sekcje:

- Navigation

- Header

- Intro

- Features

- Utility ..... i jeszcze więcej.

Layoutów mamy do wyboru kilka nie oznacza to że musimy korzystać z więcej niż jednego. Przy małej stronie jeden taki układ widżetów będzie wystarczający. Przypisujemy go do wybranych pozycji menu za pomocą zakładki "Assignments"

Dopiero po wybraniu Layout zaczynamy ustalać jego kolorystykę w zakładce "Styles" do której teraz wrócimy. Zwróćcie uwagę że sekcje które widzicie poniżej "Navigation", "Header" i kolejne mają swoje odpowiedniki w zakładce "Styles"

strony www, Lublin, Puławy, Gantry5, WordPress

 

4. Wybraliśmy zdefiniowany layout: Home - Particles

Teraz możemy wybrać jeden z kilka zdefiniowanych Preset'ów - miniaturki odpowiadają ich kolorystyce

strony www, Lublin, Puławy, Gantry5, WordPress

 

5. Presety zmieniamy klikając w miniaturkę a następnie w niebieskie button "Save Styles" po prawej. Preset aktywny oznaczony jest żółtą gwiazdką.

strony www, Lublin, Puławy, Gantry5, WordPress

 

6. Tak wyglądają 4 pierwsze Presers'y motywu Helium frameworka Gantry 5 dla WordPress

strony www, Lublin, Puławy, Gantry5, WordPress

 

 7. Core Styles - style podstawowe

Możemy tu ustawić

 - Base Styles - kolor tła i tekstów na stronie - ale jeśli w sekcjach poniżej ustawimy inne to ustawienia z sekcji będą nadrzędne

- Accent Colors - akcenty kolorystyczne są zdefiniowane dla niektórych elementów strony

- Font Families - czcionki z serwerów google dla całej strony i tytułów. Trzeba pamiętać że nie wszystkie fonty google mają polskie znaki. Lista fontów google z polskimi znakami pod tym linkiem

- Link Colors - kolory linków

 

strony www, Lublin, Puławy, Gantry5, WordPress

 

 8. Zmiana kolorów jest bardzo łatwa i odbywa się za pomocą widocznego poniżej modułu

 

strony www, Lublin, Puławy, Gantry5, WordPress

 

 9. Możliwe jest także ustawieni przeźroczystości - modyfikuje się standardowy kolor za pomocą suwaka z prawej strony. Mamy wtedy do czynienia ze skalą rgba. Standardowa skala Red Green Blue + Alpha (przeźroczystość) dla strony www Lublin na WordPress.

strony www, Lublin, Puławy, Gantry5, WordPress

 

 10. Ustawianie fontów google jest także bardzo łatwe - ale trzeba zapoznać się z listą fontów które obsługują polskie znaki. Panel edycji fontów wywołujemy ikonką "A"

 

strony www, Lublin, Puławy, Gantry5, WordPress

 

 

 11. Mamy tu pełną listę fontów google wraz z podglądem - a także ich wyszukiwarkę

strony www, Lublin, Puławy, Gantry5, WordPress

 

 12. W czasie przeglądania możemy zawęzić listę fontów do wybranej kategorii

 

strony www, Lublin, Puławy, Gantry5, WordPress

 

 

 13. Wybraną czcionkę oznaczamy w checkbox'ie. Dla strony www Puławy z językiem polskim musimy wybrać parametr "Latin Exended" - następnie klikamy button"Select"

 

strony www, Lublin, Puławy, Gantry5, WordPress

 

 

 14. Większość sekcji ma możliwość zdefiniowania koloru tła i koloru tekstu. Niektóre w zależności od szablonu pozwalają na ustawienie obrazka tła i włącznie zdefiniowanego w presets motywu gradientu nad tym obrazkiem. Zmianę obrazka można wykonać klikając na ikonkę obrazka.

strony www, Lublin, Puławy, Gantry5, WordPress

 

 

15. Po kliknięciu w ikonkę obrazka pojawia się pop-up. Obrazy wczytywane są z katalogu gantry-media i podkatalogów. Jeśli chcemy wczytać tu inne obrazki z naszego komputera możemy zrobić to za pomocą słabo widocznego linku "selecting item". Pamiętajmy że na strony internetowe Lublin wczytujemy obrazki w formatach .jpg i .png inne formaty są używane rzadziej. Pamiętaj żeby nazwy plików:

- nie miały polskich znaków

- tylko małe litery i cyfry

- bez spacji

Na fotce Andy Miller CEO RocketTheme.com która jest producentem frameworka Gantry5 a także szablonów dla Joomla , WordPress i Grav.

strony www, Lublin, Puławy, Gantry5, WordPress

 

 16. Offcanvas Styles - sekcja Offcanvas jest widoczna kiedy wywoła się ją ikonka - toogle - czyli ikonką symbolizującą menu mobilne. W nietórych wypadkach sekcja offcanvas może być widoczna także na dużych ekranach - można to ustawić właśnie w tym panelu - mamy do wyboru: Mobile Menu (menu mobilne) i Always (zawsze). Możemy określić także szerokość panelu w wartościach "rem". W szablonach / Motywach Gantry 5 "rem" pojawia się do określania wielkości większości elementów.

strony www, Lublin, Puławy, Gantry5, WordPress

 

 

 17. Sekcja Offcanvas widoczna po lewej po wywołaniu przez ikonkę menu mobilne - widok na ekranie smartfonu

strony www, Lublin, Puławy, Gantry5, WordPress

 

 

 18. Configuration Styles

- Breskpoints - tu możemy określić szerokość strona na poszczególnych wielkościach ekranów

- Menu - ustawienia szerokości i sposobu animacji meni wysuwanego z głównego menu - to ustawienia globalne bo innym miejscu będziemy mogli to zdefiniować dokładniej - dla każdej pozycji menu oddzielnie.

strony www, Lublin, Puławy, Gantry5, WordPress

 

Zobacz inne części tutorialu o Gantry 5 dla Wordpress 

 

WordPress i framework Gantry 5 dla strony internetowe Lublin cz1

Zakładka styles framework Gantry 5 - WordPress dla strony internetowe Lublin cz2

Zakładka Layout framework Gantry 5 - WordPress dla strony www Lublin cz3

Funkcja Inheriting we frameworku Gantry 5 dla WordPress cz4 - strony www Lublin

Outlines w Gantry 5 - tworzenie kopii motywu frameworku Gantry 5 - WordPress dla strony www Lublin cz5

Dodawanie pozycji widżetu do layoutu we frameworku Gantry 5 dla WordPress - strony www Lublin cz6

Dodawanie pozycji widżetu do layoutu we frameworku Gantry 5 dla WordPress - strony www Lublin cz7

Jak zmieniać szerokość pozycji widgetu w layout frameworka Gantry 5 dla WordPress - strony www Lublin cz8

Page Content - pozycja wpisów - w layout frameworka Gantry 5 dla WordPress - strony www Lublin cz9

Przydało się? - Udostępnij

Blog - popularne

Akeeba Kickstart - czyli jak przywrócić stronę internetową Joomla 3 z kopii zapasowej Akeeba Backup

Przenosimy stronę na CMS joomla na inny serwer. Mając wykonaną za pomocą Akeeba Backup kopię strony www możemy ją przenieść w krótkim czasie na dowolny serwer. Czas wysyłania na serwer rozpakowanych...
Czytaj dalej

Jak dodać firmę do Google Maps

Tworząc firmową stronę internetową prawie zawsze umieszczamy na niej mapę z lokalizacją firmy. Czasy statycznych map graficznych minęły dawno temu. Teraz najczęściej szukamy firm na google które ma...
Czytaj dalej

Jak wykonać przekierowanie DNS domeny zarejestrowanej na home.pl na serwer nazwa.pl - na którym...

Przekierowanie DNS wykonujemy kiedy domenę zarejestrowaliśmy w jednej firmie, a hosting dla naszej strony internetowej wykupiliśmy w innej. Dzisiaj pokażę jak przekierować domenę zarejestrowaną na...
Czytaj dalej

WordPress - jak wykonać kopię zapasową strony www na WordPress za pomocą Akeeba Backup

WordPress podobno nie sprawia problemów, ale dmuchając na zimne - kopię strony www należy wykonać jeśli zależy nam na bezpieczeństwie naszych danych. Akeeba Backup to narzędzie które powstało jako...
Czytaj dalej

Jak zrobić banner slideshow w joomla 3 - dodatek Roksprocket dla strony www na joomla

Roksprocket dla Joomla czyli jak zrobić banner dla naszej strony internetowej na joomla. Roksprocket do moduł którego wersja występuje także dla wordpressa. Można za jego pomocą wykonać nie tylko...
Czytaj dalej

Jak dodać film z youtube stronę www na joomla - dodatek AllVideos od Joomla Works

Niezbyt często korzystam w wykonywanych stronach www z możliwości osadzania w nich wideo. Jeśli klienci mają przygotowane materiały wideo warto je wykorzystać nie tylko z powodu lepszego zapoznania...
Czytaj dalej

Akeeba Backup - jak wykonać kopię strony www na CMS Joomla 3

Akeeba Backup pozwala na tworzenie kopii na wszystkich wersjach joomla - tu w wersji dla Joomla 3 Mając stronę internetową utrzymywaną na dobrym hostingu nie musimy martwić się o wykonywanie kopii...
Czytaj dalej

Zarządzanie użytkownikami w Joomla 3. Jak zmienić nazwę użytkownika, hasło, mail w zaleczu joomla

Edycja profilu użytkownika, zmiana hasła do zaplecza joomla czy maila konkretnego użytkownika w joomla 3 są bardzo proste - oczywiście jeśli mamy dostęp do zaplecza naszej strony www Lublin na...
Czytaj dalej

Jak sprawdzić szybkość wczytywania strony www

Jeszcze kilka lat temu kiedy o CMS'ach nie było nic wiadomo królowały proste strony www oparte na html'u. Łącza internetowe nie były zbyt szybkie wiec przyjmowało się że strona startowa witryny nie...
Czytaj dalej