Do you speak Jimdo ?
Landing page
Nie jest to typowa Landing Page z całą świtą argumentów marketingowych i komercyjnych, opracowanych przez armię konsultantów z dyplomami matura plus pięć, lecz tylko wizytówka graficzna pokazująca, że z Jimdo można zrobić prostą, ale sympatyczną stronę wejściową na naszą witrynę.
Taką małą Landing Page zrobioną dla przyjemności.
Co wcale nie oznacza, że będzie ona pozbawiona estetycznego impaktu przyciągającego uwagę i zainteresowanie żeglujących po necie.
Strony Jimdo mogą być doskonałymi wizytówkami dla wszystkich zawodów o konotacji artystyczno-graficznej, jak strony fotografów, architektów, artystów plastyków, dizajnerów, twórców mody…
Jimdo posiada bardzo duży potencjał graficzny.
Połączony z niezwykła łatwością zarządzania treścią stron - daje nam szansę, na bycie podwójnym freelancer'em – jako artysta i jako webmaster.
Spis treści
Na czym to polega?
Strona Jimdo skomponowana jest z tych samych elementów, co miliony innych stron html.
Header – nagłówek
Navigation – menu nawigacji pionowe, poziome lub mix obydwu
Sidebar – kolumna boczna - w niektórych szablonach jimdo przypisanym jej obszarem, dzieli się z menu nawigacji
Footer – stopka strony
Content – kolumna z główną zawartością
Wystarczy usunąć cztery pierwsze elementy i uwolnioną w ten sposób przestrzeń wykorzystać na wpięcie tekstu lub elementu graficznego.
Należy pamiętać o tym, że każdy szablon jest inny i te podstawowe elementy strony mogą mieć inne nazwy. Każdy szablon jest składanką prostokątnych bloków pomieszanych ze sobą, poukładanych obok siebie lub wchodzących jeden w drugi. Co może utrudniać identyfikację elementów których zachowanie chcemy zmienić na naszej landpage.
Jak to zrobić?
Oto etapy, które pozwolą nam otrzymać ten efekt.
- tworzymy nową stronę w menu nawigacji
- otwieramy jej kod źródłowy, aby znaleźć jej numer identyfikacyjny
- identyfikujemy następnie w naszym szablonie nazwy elementów które musimy usunąć z naszej landpage.
- co pozwoli przygotować nam magiczny kod css
- który wpinamy z kolei do headera naszej strony.
Znaleźć numer strony
Aby to zrobić, będzie nam potrzebny wgląd do kodu źródłowego naszej przyszłej landing page.
Kazda strona Jimdo jest unikatowa i niepowtarzalna tak jak numer telefonu na przykład, lub numer rejestracyjny samochodu.
W Operze i Firefoxie wystarczy wcisnąć kombinację klawiszy Ctrl+U, w Safari i Gogle Chrome – Ctrl+Alt+U.
Otworzy nam się zwykła strona w formacie tekstowym, na której szukamy linii wyglądającej tak:
<body class="body cc-page cc-pagemode-default cc-content-parent"
id="page-246098512">
i notujemy 9-cio cyfrowy numer, który u Was będzie inny, niż ten na powyższym rysunku.
Bądźcie na 100% pewni, że zanotowaliście numer nowo utworzonej strony, którą zamierzacie zamienić na landing page. Żeby przez pomyłkę nie poddać niepotrzebnym torturom html/css innej gotowej strony Waszej witryny.
Kolejność reguł CSS
Dla lepszego zrozumienia tego co robimy, zwrócić należy uwagę na to, w jakiej kolejności stosowane są przez przeglądarkę reguły stylu CSS w momencie wyświetlania obojętnie jakiej strony html.
- pierwszeństwo ma styl „inline” określony bezpośrednio w kodzie html danej strony między tagami <body i ... /body>
- następnie styl wpięty w header między tagami <head i ... /head>
- a dopiero potem - jeżeli dwa powyższe przypadki nie istnieją - styl określony w zewnętrznym arkuszu stylu, powiedzmy naszstyl.css.
My skorzystamy z drugiej możliwości wpinając w header naszej strony kilka lini kodu, co "zmusi przeglądarkę" do wyświetlenia naszej landing page w sposób "inny", niż pozostałe strony naszej witryny, które będą wyświetlane według reguł ustalonych w zewnętrznym arkuszu CSS przez twórcę szablonu strony Jimdo, którą wybraliśmy.
Przykład kodu z mojej strony
Zachowanie lub prezentację elementów stron html regulujemy przy pomocy ich właściwości, którym dajemy wartości dostosowane do efektu, który chcemy uzyskać.
Na mojej, przykładowej landpage "nie widać" żadnego z elementów wymienionych powyżej.
Uzyskamy to przypisując każdemu elementowi, który chcemy usunąć, właściwość display z wartością none jak na poniższym przykładzie
Oto kompletny przykład kodu, który działa z moim modelem szablonu.
<style type="text/css">
/*<![CDATA[*/
#page-246098512 #footer {display: none;}
#page-246098512 #sidebar {display: none;}
#page-246098512 #navigation {display: none;}
#page-246098512 #content {width:100%; background:#D10D0D;}
#page-246098512 #wrapper {border-width: 0px;}
#page-246098512 #wrapper_rechts {width: 100%; border: none;}
#page-246098512 #container {background:#D10D0D; border-width:0px;}
#page-246098512 #emotion {display: none;}
#page-246098512 #emotion-header {display: none;}
#page-246098512 #nav_top {display: none;}
/*]]>*/
</style>
Uwaga! Dwie pierwsze i dwie ostatnie linie są obowiązkowe nawet,
gdy zmieniacie tylko jedną linię kodu w headerze.
Różne typy szablonów
W porównaniu z innymi szablonami mój okazał się bardziej skomplikowany, lub - nie znalazłem prostszej metody dotarcia do celu.
Ale w momencie, gdy otrzymałem szukany efekt przestałem szukać a ponieważ działa, więc podaję kod taki, jaki jest. Oczywiście, będzie on przydatny tylko tym osobom, które używają tego samego szablonu, co ja.
Inni muszą zidentyfikować nazwy, którymi autor szablonu nazwał – header, content, sidebar, navigation i footer.
Ja użyłem do tego celu pluginu do Firefoxa, który nazywa się WebDeveloper. Bardzo czytelny i intuicyjny będzie Wam bardzo pomocny w zmaganiach z css i html.
Autorem jest Chris Pedrick a tutaj podaję link na jego stronę - http://chrispederick.com/work/web-developer/
Można go również zainstalować bezpośrednio ze strony Mozilla addons - https://addons.mozilla.org/pl/firefox/addon/web-developer/
Jego instalacja dorzuci w Firefoxie nową wstążkę z dziesiątką podmenu, gdzie na pewno znajdziecie użyteczne narzędzia. Aby zobaczyć Wasze CSS otwórzcie podmeniu – Arkusz CSS -> Pokaż CSS.
Jadąc windą w dół szukamy sekcję nazwaną Layout. Tutaj znajdziemy, oprócz innych dziwolągów, coś takiego jak div#header, div#content, div#sidebar itd., itd… Już jesteśmy blisko celu. Jeszcze raz podkreślam, że w zależności od wybranego szablonu interesujące nas elementy mogą mieć nieco inne nazwy, np. div#cc-tp-content.
Innym dodatkiem do Firefoxa jest Firebug który można znaleźć tutaj - https://addons.mozilla.org/pl/firefox/addon/firebug/
Ponadto, każda z nowoczesnych przeglądarek posiada swój własny zestaw narzędzi dewloperskich.
Przygotowanie kodu
Jeżeli jeszcze tego nie zrobiliśmy:
- tworzymy nową pustą stronę
- tworzymy na niej moduł Tekst i wpisujemy kilka słów. Będziemy mieć punkt odniesienia, który pozwoli nam na kontrolę pozycji tekstu na nowej pustej stronie
- gdy znamy już numer naszej strony i nazwy elementów do ukrycia
- przygotujmy w Notatniku plik tekstowy z następującą zawartością:
<style type="text/css">
/*<![CDATA[*/
/* #page-xxxxxxxxx #footer {display: none;} */
#page-xxxxxxxxx #sidebar {display: none;}
#page-xxxxxxxxx #navigation {display: none;}
#page-xxxxxxxxx #header {display: none;}
/*]]>*/
</style>
Gdzie wszystkie "iksy" należy zastąpić numerem
naszej nowej landpage.
Dopóki nasza strona nie jest skończona, linię modyfikującą
footer należy "zakomentować" przy pomocy /* ... i ... */
co spowoduje, że footer będzie widoczny w czasie pracy nad
naszą stroną. Chodzi o to, aby mieć dostep do przełącznika
Podgląd / Edytowanie - ułatwi nam to test poszczególnych
modyfikacji.
Idziemy teraz do
Panelu Admina
> Ustawienia
>Strona Internetowa
>Opracowanie Nagłówka
i wklejamy przygotowany kod.
Klikamy na Zapisz , klikamy na Podgląd i jeżeli wszystko działa tak jak planowaliśmy znaczy to, że jesteśmy doskonałymi webmastrami, albo, że mamy cholerne szczęście. Jeżeli nie, to trzeba sprawdzić nasz kod, czy jest poprawnie napisany, czy nie ma pomyłki w nazwach elementów i czy dobrze zidentyfikowaliśmy elementy naszej strony.
Wstawić zdjęcie lub tekst
Gdy wreszcie uda nam się otrzymać pustą stronę, możemy teraz wpiąć na niej element Pole tekstowe lub Zdjęcie wybierając je w panelu edycyjnym Jimdo.
No i oczywiście, nie należy zapomnieć o linku pozwalającym na wejście na pozostałe strony naszej witryny. Gdy wszystko działa bez zarzutu, możemy odkomentować w headerze linię footera. Na witrynach dwu-językowych, najlepiej jest zainstalować dwa odsyłacze, każdy do innej wersji językowej.
Na zakończenie
Rejestrując witrynę w Jimdo, podpisujemy ogólne warunki umowy, które określają reguły gry wiążące nas z dostawcą tej usługi.
Mamy prawa - to dobrze, ale mamy również pewne obowiązki, które ograniczają możliwości naszej ingerencji w kod html Jimdo. Ponieważ tego typu strony istnieją na witrynach zrobionych przy pomocy Jimdo Free można przypuszczać, że niewielkie modyfikacje mogą być tolerowane. Ale nie należy posuwać się zbyt daleko w zmiany oryginalnego kodu Jimdo. A jest to do sprawdzenia w ogólnej umowie handlowej, którą możemy znaleźć w stopce głównej strony polskiej. Udanych i ciekawych stron życzę.
Write a comment