Ustawienia treści landingu - instrukcja do szablonu "TopSpeed"
Aby umieścić treść, należy w polu opisu produktu wstawić bloki w formacie HTML.
Skopiuj kod wymaganego bloku poniżej, zmień opis tekstowy i wstaw go na stronę.
Dla każdego bloku możesz określić jego tło oraz szerokość - na całą stronę lub nie, poprzez dodanie klasy .wrap do znacznika div
Wyjście "Nasze korzyści"
<div class="s-blocks__item-p" style="background:#f7f7f7;">
<div class="p-landing__adv wrap">
<div class="p-landing__adv-title">Nasze korzyści</div>
<div class="p-landing__adv-s">Oto krótka lista naszych zalet</div>
<div class="p-landing__adv-blocks">
<div class="p-landing__adv-bl">
<div class="p-landing__adv-img"><img src="/topspeed/wa-data/public/site/themes/topspeed/img/1.jpg"></div>
<div class="p-landing__adv-t">Adaptacyjny projekt</div>
<div class="p-landing__adv-d">Tworzymy projekty stron i sklepów internetowych.</div>
</div>
<div class="p-landing__adv-bl">
<div class="p-landing__adv-img"><img src="/topspeed/wa-data/public/site/themes/topspeed/img/2.jpg"></div>
<div class="p-landing__adv-t">Optymalizacja SEO</div>
<div class="p-landing__adv-d">Tworzymy projekty stron i sklepów internetowych.</div>
</div>
<div class="p-landing__adv-bl">
<div class="p-landing__adv-img"><img src="/topspeed/wa-data/public/site/themes/topspeed/img/3.jpg"></div>
<div class="p-landing__adv-t">Poprawny i czysty kod</div>
<div class="p-landing__adv-d">Tworzymy projekty stron i sklepów internetowych.</div>
</div>
<div class="p-landing__adv-bl">
<div class="p-landing__adv-img"><img src="/topspeed/wa-data/public/site/themes/topspeed/img/4.jpg"></div>
<div class="p-landing__adv-t">Przyjazność dla użytkownika</div>
<div class="p-landing__adv-d">Tworzymy projekty stron i sklepów internetowych.</div>
</div>
<div class="p-landing__adv-bl">
<div class="p-landing__adv-img"><img src="/topspeed/wa-data/public/site/themes/topspeed/img/1.jpg"></div>
<div class="p-landing__adv-t">Wsparcie i aktualizacje</div>
<div class="p-landing__adv-d">Tworzymy projekty stron i sklepów internetowych.</div>
</div>
<div class="p-landing__adv-bl">
<div class="p-landing__adv-img"><img src="/topspeed/wa-data/public/site/themes/topspeed/img/2.jpg"></div>
<div class="p-landing__adv-t">Prezenty od dewelopera motywu dla wtyczek</div>
<div class="p-landing__adv-d">Tworzymy projekty stron i sklepów internetowych.</div>
</div>
</div>
</div>
</div>
Masz jakieś pytania?
<div class="p-landing__info" style="background-image:url(/topspeed/wa-data/public/site/themes/topspeed/img/1.jpg);">
<div class="wrap">
<div class="p-landing__info-title">Masz jakieś pytania?</div>
<div class="p-landing__info-text">Złóż wniosek online lub zadzwoń do nas<br> <a href="tel:">+48 999 222 111</a>. Odpowiemy na wszystkie Twoje pytania!</div>
<button class="p-landing__info-button button">Uzyskaj poradę</button>
</div>
</div>
Dlaczego warto kupić u nas?
<div style="background:#f5f5f5;">
<div class="p-landing__p-img">
<div class="p-landing__p-img__c" style="background-image:url(/topspeed/wa-data/public/site/themes/topspeed/img/1.jpg);"></div>
<div class="p-landing__p-img__c" style="background:#fff;">
<div class="s-blocks__title">Dlaczego warto kupić u nas?</div>
<div class="page">
<ul>
<li>Mamy najlepsze ceny za najwyższej jakości moduły</li>
<li>Współpracujemy bezpośrednio z producentem</li>
<li>Jesteśmy dużą hurtownią części zamiennych dla serwisów w Warszawie, Gdańsku, Krakowie, Wrocławiu i innych miastach.</li>
<li>Dla wygody naszych klientów posiadamy własne centra serwisowe</li>
<li>Gdy montujesz u nas, gwarancja jest podwojona!</li>
</ul>
</div>
</div>
</div>
<div class="p-landing__p-img p-landing__p-img_rev">
<div class="p-landing__p-img__c" style="background-image:url(/topspeed/wa-data/public/site/themes/topspeed/img/2.jpg);"></div>
<div class="p-landing__p-img__c" style="background:#fff;">
<div class="s-blocks__title">Dlaczego warto kupić u nas?</div>
<div class="page">
<ul>
<li>Mamy najlepsze ceny za najwyższej jakości moduły</li>
<li>Współpracujemy bezpośrednio z producentem</li>
<li>Jesteśmy dużą hurtownią części zamiennych dla serwisów w Warszawie, Gdańsku, Krakowie, Wrocławiu i innych miastach.</li>
<li>Dla wygody naszych klientów posiadamy własne centra serwisowe</li>
<li>Gdy montujesz u nas, gwarancja jest podwojona!</li>
</ul>
</div>
</div>
</div>
</div>
Zwykły tekst
<div class="s-blocks__item-p" style="background:#f5f5f5;">
<div class="page wrap">
<div class="s-blocks__title">O naszym motywie</div>
<p><strong>Topspeed</strong> – to adaptacyjny motyw projektowy dla aplikacji "Sklep", "Zdjęcia", "Blog", "Forum" i "Mailer". Szablon jest zaprojektowany z myślą o SEO. Rentowny sklep internetowy, szybka prędkość ładowania i nowoczesny design zwiększą sprzedaż Twojego sklepu.</p>
<h3>Zalety motywu projektowego:</h3>
<ul>
<li><span class="no-underline bigger"><strong>Adaptacyjny projekt</strong><br>Motyw projektowy dostosowany do urządzeń mobilnych.</span></li>
<li><strong><span class="no-underline bigger">SEO optymalizacja</span></strong><br>Zoptymalizowana pod kątem promocji. Dodano mikro znacznik Schema.org, pliki js przeniesione w dół, wysoka prędkość ładowania strony z gogle speed out of the box: 98/100 dla komputerów, 92/100 dla mobile.</li>
<li><span class="no-underline bigger"><strong>Poprawny i czysty kod</strong></span><br>Poprawny, czysty i przyjazny dla przeglądarek układ, bez użycia frameworków technologii bam. Łatwe i przyjazne dla programistów zmiany układu bloków i rozszerzanie css.<strong><br></strong></li>
<li><span class="no-underline bigger"><strong>Przyjazność dla użytkownika</strong><br>Nawigacja jest sprytna i przyjazna użytkownikowi, z naciskiem na ważne punkty, karty produktów, promocje i banery, dla szybkiej sprzedaży.<br></span></li>
<li><span class="no-underline bigger"></span><span class="no-underline bigger"><strong>Wsparcie i aktualizacje</strong><br>Pomoc w konfiguracji i instalacji, bezpłatne aktualizacje w ramach umowy SLA.</span></li>
<li><strong><span class="no-underline bigger">Prezenty od dewelopera motywu dla wtyczek</span></strong><br>Na wszystkie wtyczki i motywy dewelopera, przy zakupie motywu rabat. Trzeba napisać do postu, z prośbą o rabat i na jaką wtyczkę lub motyw oraz przedstawić numer zamówienia.</li>
</ul>
<div class="p-landing__bg">
<h4>Nasze kontakty</h4>
<p><strong>Wyślij informacje pocztą elektroniczną na adres </strong><a href="#">info@site.com</a></p>
<p>Twój list zostanie przekazany kierownictwu firmy.</p>
</div>
</div>
</div>
Baner na całą szerokość strony
<div class="promo-img" style="background-color:#5968cc;">
<div class="promo-img__wrap wrap">
<div class="promo-img__left"><img class="promo-img__img" src="/topspeed/wa-data/public/site/themes/topspeed/img/promo.png"></div>
<div class="promo-img__right">
<div class="promo-img__title">Wersja mobilna<br>motywu TopSpeed</div>
<div class="promo-img__text">Motyw dostosowany do urządzeń mobilnych</div>
<div class="promo-img__button"><a class="button" href="#">Dowiedz się więcej</a></div>
</div>
</div>
</div>
Opinie o produktach
<div class="s-blocks__item-p r-reviews">
<div class="r-reviews__wrap wrap">
<div class="s-blocks__title">Opinie o produktach</div>
<div class="r-reviews__sl owl-carousel owl-theme-nav-dots owl-theme-nav">
<div class="r-reviews__item">
<div class="r-reviews__item-link">
<span class="r-reviews__item-img">
<img class="lazy-loading-img-scroll js-img-retina" src="/topspeed/wa-data/public/shop/products/04/00/4/images/5/5.250x250@2x.jpg" alt=" "Apple iPhone X"">
</span>
<span class="r-reviews__item-info">
<span class="r-reviews__item-user">Marek</span>
<span class="r-reviews__item-rating">
<em class="icon10 star"></em>
<em class="icon10 star"></em>
<em class="icon10 star"></em>
<em class="icon10 star-half"></em>
<em class="icon10 star-empty"></em>
</span>
<span class="r-reviews__item-name">Super projekt!</span>
</span>
</div>
<div class="r-reviews__item-text">
A ja, pobrawszy zaktualizowaną wersję aplikacji, od razu zahaczyłem o konkursy, które często...
</div>
</div>
<div class="r-reviews__item">
<div class="r-reviews__item-link">
<span class="r-reviews__item-img">
<img class="lazy-loading-img-scroll js-img-retina" src="/topspeed/wa-data/public/shop/products/04/00/4/images/5/5.250x250@2x.jpg" alt=" "Apple iPhone X"">
</span>
<span class="r-reviews__item-info">
<span class="r-reviews__item-user">Paweł</span>
<span class="r-reviews__item-rating">
<em class="icon10 star"></em>
<em class="icon10 star"></em>
<em class="icon10 star"></em>
<em class="icon10 star-half"></em>
<em class="icon10 star-empty"></em>
</span>
<span class="r-reviews__item-name">Super projekt!</span>
</span>
</div>
<div class="r-reviews__item-text">
A ja, pobrawszy zaktualizowaną wersję aplikacji, od razu zahaczyłem o konkursy, które często...
</div>
</div>
<div class="r-reviews__item">
<div class="r-reviews__item-link">
<span class="r-reviews__item-img">
<img class="lazy-loading-img-scroll js-img-retina" src="/topspeed/wa-data/public/shop/products/04/00/4/images/5/5.250x250@2x.jpg" alt=" "Apple iPhone X"">
</span>
<span class="r-reviews__item-info">
<span class="r-reviews__item-user">Justyna</span>
<span class="r-reviews__item-rating">
<em class="icon10 star"></em>
<em class="icon10 star"></em>
<em class="icon10 star"></em>
<em class="icon10 star-half"></em>
<em class="icon10 star-empty"></em>
</span>
<span class="r-reviews__item-name">Super projekt!</span>
</span>
</div>
<div class="r-reviews__item-text">
A ja, pobrawszy zaktualizowaną wersję aplikacji, od razu zahaczyłem o konkursy, które często...
</div>
</div>
</div>
</div>
</div>