Instrukcja edycji szablonów allegro
Edycja naszych szablonów allegro jest bardzo prosta. Problem mogą mieć jedynie osoby, które po raz pierwszy mają styczność z szablonem allegro i nie wiedzą, z czego taki szablon może się składać. Biorąc pod uwagę osoby początkujące, przygotowaliśmy instrukcję, w której pokażemy jak krok po kroku przeprowadzić edycję naszych szablonów. Z instrukcji można dowiedzieć się między innymi jak:
- edytować logo
- podlinkować menu w szablonie
- edytować dane dotyczące kontaktu
- edytować dane dotyczące płatności
- edytować dane dotyczące wysyłki
- podlinkować kategorie
- korzystać z galerii szablonu
- prawidłowo komponować opis przedmiotu
Gwarantujemy, że po przeczytaniu tej instrukcji praca z naszymi szablonami stanie się dużo łatwiejsza i przyjemniejsza, ponadto przyśpieszy prace związaną z wystawianiem kolejnych aukcji.
Zanim przystąpisz do edycji, powinieneś wiedzieć, z czego składa się szablon allegro. Otóż każdy szablon allegro to kod, w którego skład wchodzi: kod języka HTML oraz kod języka CSS. Są to dwa podstawowe języki programowania dzięki, którym projektuje się strony internetowe. Struktura kodu szablonów allegro jest następująca:
- <style>
- <!–
- Kod CSS
- –>
- </style>
- Kod HTML
Jak widać na powyższym przykładzie, kod szablonu allegro można podzielić na 2 części. Pierwszą częścią jest kod CSS umieszczony pomiędzy znacznikami <style><!– Kod CSS –></style>, który odpowiada między innymi za kolorystykę, wielkość elementów oraz tekstu w szablonie. Drugą częścią szablonu jest kod HTML, który zaczyna się zaraz po zamykającym znaczniku –></style>. Kod HTML odpowiada między innymi za wyświetlanie wszystkich widocznych elementów w szablonie.
Podczas edycji szablonu zajmiemy się przede wszystkim edycją kodu HTML, gdyż to w zupełności wystarczy, aby dostosować szablon allegro do indywidualnych potrzeb.Przygotowanie szablonu do edycji
Po pobraniu wybranego szablonu należy go rozpakować. W pliku znajduje się grafika, kod szablonu w postaci pliku tekstowego o nazwie szablon oraz przykład aukcji w postaci pliku tekstowego o nazwie przykładowa aukcja.
Po rozpakowaniu szablonu należy otworzyć plik tekstowy o nazwie szablon dowolnym edytorem tekstu (najlepiej otworzyć go zwykłym notatnikiem). Następnie w kodzie należy odszukać znacznik
–></style>(znacznik ten zamyka style CSS), gdyż po tym znaczniku zaczniemy edycję szablonu allegro.
Powyższy fragment kodu wskazuje podział szablonu na kod CSS i kod HTML. W polu czerwonym znajduje się kod CSS, natomiast za czerwonym polem zaczyna się kod HTML, który należy edytować.
Każdy nasz szablon posiada prawidłowo wyedytowany przykład aukcji. Jeżeli podczas edycji szablonu, któryś element będzie mało zrozumiały, wówczas możesz zobaczyć jak dany element jest prawidłowo wyedytowany w przykładowej aukcji.
Zmiana kodu CSS, który znajduje się pomiędzy znacznikami <style><!– Kod CSS –></style>, bez odpowiedniej wiedzy może skutkować nieodpowiednim wyświetlaniem się szablonu !!! Usunięcie przez przypadek jednego znaku odpowiadającego za ważny element w szablonie może skutkować złym wyświetlaniem się szablonu, dlatego edycję szablonu powinno przeprowadzać się powoli i starannie.Logo
Każdy szablon posiada indywidualne logo pasujące do tematyki oraz kolorystyki szablonu. Poniżej znajduje się kod HTML, który odpowiada za wyświetlanie logo w szablonie.
- <!– LOGO –>
- <div class=”logo”>
- <span><img src=”http://domena.pl/logo.png„></span>
- </div>
- <!– KONIEC – LOGO –>
Aby zmienić logo na indywidualne, należy umieścić adres internetowy prowadzący do obrazka z logo w miejsce, które zostało oznaczone czerwonym kolorem.
Obrazek z logo można również zastąpić zwykłym tekstem, aby to zrobić, należy usunąć znacznik HTML odpowiadający za wyświetlanie obrazków, po czym zamieścić dowolny tekst. Poniżej znajduje się przykład, który pokazuje, jak powinien wyglądać kod HTML, w którym zamiast obrazka z logo znajduje się sam tekst.
- <!– LOGO –>
- <div class=”logo”>
- <span>Tekst</span>
- </div>
- <!– KONIEC – LOGO –>
W miejscu, które oznaczone jest niebieskim kolorem, należy wpisać dowolny tekst, który będzie wyświetlał się zamiast obrazka z logo.
Menu
Menu to miejsce, w którym znajdują się, odnośniki do najważniejszych informacji o sprzedającym. Poniżej znajduje się kod HTML, który odpowiada za wyświetlanie menu w szablonie:
- <!– MENU –>
- <div class=”menu”>
- <ul>
- <li><a href=”http://allegro.pl/listing/user/listing.php?us_id=„>Nasze Aukcje</a></li>
- <li><a href=”http://allegro.pl/show_user.php?uid=„>Komentarze</a></li>
- <li><a href=”http://allegro.pl/SendMailToUser.php?userId=„>Zadaj Pytanie</a></li>
- <li><a href=”http://allegro.pl/my_page.php?uid=„>Strona o Nas</a></li>
- <li><a href=”http://allegro.pl/myaccount/favourites/favourites_sellers.php/addNew/?userId=„>+ do Ulubionych</a></li>
- </ul>
- </div>
- <!– KONIEC – MENU –>
Czerwonym kolorem zostały oznaczone adresy internetowe, które będą odsyłać do poszczególnych podstron. Aby adresy były kompatybilne z kontem allegro, należy na końcu każdego z nich po znaku = dodać numer konta allegro.
Numer konta allegro można zobaczyć, podglądając komentarze danego konta. W adresie internetowym komentarzy na samym końcu po znaku = będzie znajdował się ciąg cyfr, który jest numerem konta allegro.
- http://allegro.pl/show_user.php?uid=1680
Powyżej znajduje się przykład, w którym zaznaczono czerwonym kolorem numer konta allegro.
Dane Kontaktowe
W większości naszych szablonów dane kontaktowe umieszczane są w dwóch miejscach. Poniżej znajdują się dwa przykłady kodu HTML, które odpowiadają za wyświetlanie pierwszego i drugiego pola kontaktowego.
- <!– KONTEKT 1 –>
- <div class=”kontakt-1″>
- <div class=”telefon-1″><span>numer telefonu</span></div>
- <div class=”email-1″><span>adres e-mail</span></div>
- <div class=”gg-1″><span>numer gadu-gadu</span></div>
- <div class=”skype-1″><span>login skype</span></div>
- </div>
- <!– KONIEC – KONTAKT 1 –>
- <!– KONTAKT 2 –>
- <div class=”kontakt-2″>
- <span class=”sidebar-tytul”>KONTAKT</span>
- <div class=”telefon-2″><span>numer telefonu</span></div>
- <div class=”email-2″><span>adres e-mail</span></div>
- <div class=”gg-2″><span>numer gadu-gadu</span></div>
- <div class=”skype-2″><span>login skype</span></div>
- <div class=”adres-2″><span>adres</span></div>
- <div class=”godziny-otwarcia-2″><span>godziny otwarcia</span<</div>
- </div>
- <!– KONIEC – KONTAKT 2 –>
Niebieskim kolorem zostały oznaczone miejsca, w których należy zmienić dane kontaktowe na własne.
Aby pozbyć się wybranej informacji kontaktowej, należy usunąć całą linię kodu HTML, który odpowiada za jej wyświetlanie np.:
- <div class=”skype-2″><span>login skype</span></div>
Powyżej znajduje się fragment kodu HTML, który odpowiada za wyświetlanie kontaktu skype, aby usunąć kontakt skype należy usunąć powyższy fragment kodu HTML.
Kategorie
Kategorie przydają się gdy, ktoś posiada dużo aukcji, które może podzielić na osobne kategorie. Poniżej znajduje się kod HTML, który odpowiada za wyświetlanie kategorii w szablonie.
- <!– KATEGORIE –>
- <div class=”kategorie”>
- <span class=”sidebar-tytul”>KATEGORIE</span>
- <ul>
- <li><a href=”#„>Nazwa kategorii</a></li>
- </ul>
- </ul>
- </div>
- <!– KONIEC – KATEGORIE –>
Czerwonym kolorem zostało oznaczone miejsce, w którym należy umieścić adres internetowy kategorii, natomiast w miejscu oznaczonym kolorem niebieskim należy wpisać nazwę kategorii.
Aby dodać nową kategorię, należy umieścić poniższy kawałek kodu HTML pomiędzy znacznikami <ul> </ul>.
- <li><a href=”#„>Nazwa kategorii</a></li>
Poniżej znajduje się przykład kodu HTML (elementu kategorii), w którym znajdują się trzy kategorie.
- <!– KATEGORIE –>
- <div class=”kategorie”>
- <span class=”sidebar-tytul”>KATEGORIE</span>
- <ul>
- <li><a href=”#„>Pierwsza kategoria</a></li>
- <li><a href=”#„>Druga kategoria</a></li>
- <li><a href=”#„>Trzecia kategoria</a></li>
- </ul>
- </ul>
- </div>
- <!– KONIEC – KATEGORIE –>
Regulamin
Regulamin jest elementem, który przypomina o zasadach aukcji. Poniżej znajduje się kod HTML, który odpowiada za wyświetlanie regulaminu w szablonie.
- <!– REGULAMIN –>
- <div class=”regulamin”>
- <span class=”sidebar-tytul”>REGULAMIN</span>
- <ol>
- <li><p>Punkt regulaminu</p></li>
- </ol>
- </div>
- <!– KONIEC – REGULAMIN –>
Niebieskim kolorem zostało oznaczone miejsce, w którym należy umieścić jeden punkt regulaminu.
Aby dodać nowy punkt regulaminu, należy umieścić poniższy kawałek kodu HTML pomiędzy znacznikami <ol> </ol>.
- <li><p>Punkt regulaminu</p></li>
Poniżej znajduje się przykład kodu HTML, w którym znajdują się trzy punkty regulaminu.
- <!– REGULAMIN –>
- <div class=”regulamin”>
- <span class=”sidebar-tytul”>REGULAMIN</span>
- <ol>
- <li><p>Pierwszy punkt regulaminu</p></li>
- <li><p>Drugi punkt regulaminu</p></li>
- <li><p>Trzeci punkt regulaminu</p></li>
- </ol>
- </div>
- <!– KONIEC – REGULAMIN –>
Darmowa dostawa
Darmowa dostawa to skuteczny sposób, który zachęca klienta do zakupu za daną sumę, w zamian oferując darmową dostawę. W naszych szablonach znajduje się pięć animacji (100zł, 200zł, 300zł, 400zł, 500zł), dzięki którym można poinformować klienta o darmowej dostawie. Poniżej znajduje się kod HTML, który odpowiada za wyświetlanie animacji darmowej dostawy.
- <!– DARMOWA DOSTAWA –>
- <div class=”darmowa-dostawa-100„></div>
- <!– KONIEC – DARMOWA DOSTAWA –>
Pomarańczowym kolorem zostało oznaczone miejsce, w którym należy wpisać cyfrę 100, 200, 300, 400 lub 500, która jest odzwierciedleniem kwoty darmowej dostawy.
Standard allegro
Standard Allegro to wyróżnienie, które informuje klienta, o tym, że czas realizacji zamówienia będzie zgodny z podanym w ofercie, gwarantuje również, że nie przepłacisz kosztów wysyłki, a zakupione przez Ciebie przedmioty będą zgodne z opisem, a w przypadku pytań masz zapewniony doskonały kontakt ze sprzedającym. Poniżej znajduje się kod HTML, który odpowiada za wyświetlanie animacji standardu allegro.
- <!– STANDARD ALLEGRO –>
- <div class=”standard-allegro”></div>
- <!– KONIEC – STANDARD ALLEGRO –>
Płatność
Płatność to miejsce, w którym należy umieścić dane do przelewu internetowego. Poniżej znajduje się kod HTML, który odpowiada za wyświetlanie elementu płatności.
- <!– PŁATNOŚĆ –>
- <div class=”platnosc”>
- <span class=”footer-tytul platnosc-tytul”>PŁATNOŚĆ</span>
- <p>Po zaukupie na aukcji allegro oraz po wybraniu formy płatności „Przy wpłacie na konto” prosimy o wpłatę na poniższe konto bankowe. W tytule wpłaty prosimy podać nick allegro oraz numer aukcji, pozwoli to nam szybciej zidentyfikować kupującego co, powinno znacznie przyśpieszyć wysyłkę towaru.</p>
- <img src=”#„>
- <ul>
- <li>Numer konta bankowego</li>
- <li>Informacje do przelewu</li>
- </ul>
- </div>
- <!– KONIEC – PŁATNOŚĆ –>
Pomarańczowym kolorem został oznaczony tekst informujący o tym, jak powinna wyglądać płatność przy wybraniu opcji wpłaty na konto. Czerwonym kolorem zostało oznaczone miejsce, w którym należy umieścić adres internetowy do obrazka z logo banku (adresy internetowe do logo banków znajdują się pod adresem https://nowoczesneszablony.pl/logo-bankow/). Niebieskim kolorem zostało oznaczone miejsce, w którym należy umieścić numer konta bankowego. Różowym kolorem zostało oznaczone miejsce, w którym należy umieścić resztę informacji do przelewu.
Wysyłka
Wysyłka to miejsce, w którym należy umieścić informacje o wysyłce. Poniżej znajduje się kod HTML, który odpowiada za wyświetlanie elementu wysyłki.
- <!– WYSYŁKA –>
- <div class=”wysylka”>
- <span class=”footer-tytul wysylka-tytul”>WYSYŁKA</span>
- <p>Przesyłki kurierskie wysyłamy za pośrednictwem firmy kurierskiej UPS. Wszystkie przesyłki pakujemy w taki sposób, aby bezpiecznie dotarły do odbiorcy bez możliwości ich uszkodzenia, mimo wszystko przesyłka może zostać uszkodzona podczas transportu. Zawsze sprawdzaj przesyłkę przy dostawcy, w razie jakichkolwiek uszkodzeń przesyłki spisz protokół. Protokół jest potrzebny do ewentualnej reklamacji.</p>
- <img src=”#„>
- <ul>
- <li>Koszt wysyłki</li>
- <li>Koszt wysyłki</li>
- </ul>
- </div>
- <!– KONIEC – WYSYŁKA –>
Pomarańczowym kolorem został oznaczony tekst informujący o wysyłce zakupionego przedmiotu. Czerwonym kolorem zostało oznaczone miejsce, w którym należy umieścić adres internetowy do obrazka z logo firmy kurjerskiej (adresy internetowe do logo firm kurierskich znajdują się pod adresem https://nowoczesneszablony.pl/logo-firm-kurierskich/). Niebieskim kolorem zostało oznaczone miejsce, w którym należy umieścić informacje o płatności za przesyłkę.
Panel miniatur
Nie oferujemy Panelu Miniatur, lecz każdy nasz szablon posiada miejsce do tego przeznaczone. Jakby ktoś zdecydował się na umieszczenie panelu miniatur w szablonie to może umieścić go własnie w tym miejscu. Poniżej znajduje się kod HTML, który odpowiada za wyświetlanie miejsca w którym należy umieścić panel miniatur.
- <!– PANEL MINIATUR –>
- <div class=”panel-miniatur”>
- <div class=”content-tytul”>Panel miniatur</div>
- Tutaj należy umieścić panel mianiatur
- </div>
- <!– KONIEC – PANEL MINIATUR –>
Nazwa przedmiotu
Poniżej znajduje się kod HTML, który odpowiada za wyświetlanie nazwy przedmiotu w szablonie.
- <!– NAZWA PRZEDMIOTU –>
- <span class=”nazwa-przedmiotu”>Nazwa przedmiotu</span>
- <!– KONIEC – NAZWA PRZEDMIOTU –>
Niebieskim kolorem zostało oznaczone miejsce, w którym należy wpisać nazwę oferowanego przedmiotu.
Cena
Poniżej znajduje się kod HTML, który odpowiada za wyświetlanie ceny przedmiotu w szablonie.
- <!– CENA –>
- <span class=”cena”>Cena</span>
- <!– KONIEC – CENA –>
Niebieskim kolorem zostało oznaczone miejsce, w którym należy wpisać cenę oferowanego przedmiotu.
Specyfikacja
Specyfikacja to element w którym można umieścić najistotniejsze informacje o oferowanym przedmiocie. Poniżej znajduje się kod HTML, który odpowiada za specyfikacji w szablonie.
- <!– SPECYFIKACJA –>
- <div class=”specyfikacja”>
- Tutaj należy umieścić specyfikację przedmiotu
- </div>
- <!– KONIEC – SPECYFIKACJA –>
Niebieskim kolorem zostało oznaczone miejsce, w którym należy wpisać specyfikację oferowanego przedmiotu.
Galeria
Galeria w szablonach allegro stała się już standardem, dlatego każdy nasz szablon jest wyposażony w nowoczesną galerię zdjęć, dzięki której sprzedający w łatwy sposób może zaprezentować zdjęcia oferowanego przedmoitu.
Aby poprawnie edytować galerię w szablonie, należy wiedzieć, która część kodu HTML odpowiada za zdjęcie główne, a która za zdjęcia miniatur. Poniżej znajduje się kod HTML, który odpowiada za wyświetlanie galerii.
- <!– GALERIA –>
- <div class=”galeria”>
- <div class=”content-tytul”>Galeria przedmiotu</div>
- <img src=”#”>
- <div class=”galeria-kontener”>
- <div class=”male-zdjecie”><img src=”#”>
- <div class=”duze-zdjecie”><img src=”#”>
- </div>
- </div>
- </div>
- </div>
- <!– KONIEC – GALERIA –>
Pomarańczowym kolorem oznaczony jest fragment kodu HTML, odpowiadający za wyświetlanie głównego zdjęcia. Niebieskim kolorem oznaczony jest fragment kodu HTML, odpowiadający za jedno miniaturowe zdjęcie, które po najechaniu kursorem, wyświetla większe zdjęcie w miejscu zdjęcia głównego.
Aby w galerii było więcej zdjęć należy dodać kod HTML odpowiadający za wyświetlanie miniatury w galerii. Poniżej znajduje się kod HTML, który odpowiada za wyświetlanie jednej miniatury w galerii.
- <div class=”male-zdjecie”><img src=”adres internetowy zdjęcia miniatury„>
- <div class=”duze-zdjecie”><img src=”adres internetowy zdjęcia miniatury„>
- </div>
- </div>
Czerwonym kolorem zostało oznaczone miejsce, w którym należy umieścić adres internetowy JEDNEGO zdjęcia.
Poniżej znajduje się przygład gelerii, w której znajduje się 5 zdjęć (zdjęcie główne i 4 zdjęcia miniatur).
- <!– GALERIA –>
- <div class=”galeria”>
- <div class=”content-tytul”>Galeria przedmiotu</div>
- <img src=”adres internetowy zdjęcia głównego„>
- <div class=”galeria-kontener”>
- <div class=”male-zdjecie”><img src=”adres internetowy zdjęcia 1 miniatury„>
- <div class=”duze-zdjecie”><img src=”adres internetowy zdjęcia 1 miniatury„>
- </div>
- </div>
- <div class=”male-zdjecie”><img src=”adres internetowy zdjęcia 2 miniatury„>
- <div class=”duze-zdjecie”><img src=”adres internetowy zdjęcia 2 miniatury„>
- </div>
- </div>
- <div class=”male-zdjecie”><img src=”adres internetowy zdjęcia 3 miniatury„>
- <div class=”duze-zdjecie”><img src=”adres internetowy zdjęcia 3 miniatury„>
- </div>
- </div>
- <div class=”male-zdjecie”><img src=”adres internetowy zdjęcia 3 miniatury„>
- <div class=”duze-zdjecie”><img src=”adres internetowy zdjęcia 3 miniatury„>
- </div>
- </div>
- </div>
- </div>
- <!– KONIEC – GALERIA –>
Pomarańczowym kolorem oznaczony jest fragment kodu HTML, odpowiadający za wyświetlanie głównego zdjęcia. Niebieskim kolorem oznaczony jest fragment kodu HTML, odpowiadający za zdjęcie 1 miniatury. Fioletowym kolorem oznaczony jest fragment kodu HTML, odpowiadający za zdjęcie 2 miniatury. Brązowym kolorem oznaczony jest fragment kodu HTML, odpowiadający za zdjęcie 3 miniatury. Różowym kolorem oznaczony jest fragment kodu HTML, odpowiadający za zdjęcie 4 miniatury. Czerwonym kolorem zostało oznaczone miejsce, w którym należy umieścić adresy internetowe zdjęć.
Poniżej znajduje się przykład galerii, z wykorzystaniem powyższego kodu HTML.
Oznaczenie kolorami w powyższym przykładzie jest takie samo jak w kodzie HTML galerii, czyli kolorem pomarańczowym zostało oznaczone zdjęcie główne, natomiast kolorem niebieskim, fioletowym, brązowym i różowym zostały oznaczone zdjęcia miniatur.
Opis przedmiotu
W opisie przedmiotu powinny znaleźć się najważniejsze informacje oferowanego przedmiotu. Opis nie powinien być zbyt długi, ale i nie powinno w nim brakować istotnych informacji o przedmiocie. Poniżej znajduje się kod HTML, w którym należy umieścić opis oferowanego przedmiotu.
- <!– OPIS PRZEDMIOTU –>
- <div class=”opis-przedmiotu”>
- <div class=”content-tytul”>Opis przedmiotu</div>
- Tutaj należu umieścić opis przedmiotu
- </div>
- <!– KONIEC – OPIS PRZEDMIOTU –>
Pomarańczowym kolorem zostało oznaczone miejsce, w którym należy umieścić opis oferowanego przedmiotu.
Aby sprawniej i szybciej tworzyć opis oferowanego przedmiotu, warto zapoznać się z najczęściej wykorzystywanymi znacznikami HTML. Kurs HTML, można znaleźć pod adresem: Podstawy HTML.