Spis treści:

• Ważne zmienne Magento 2
• Podstawowe elementy formatowania tekstu
• Buttony
• Kolory
• Przykład ułożenia elementów w kolumnach (różne wariacje)
• Gotowe przykłady użyte już na produkcji (zdefiniowane wstępy do opisów)
• Gotowy przykład użyty już na produkcji (cecha: color)
• Gotowy przykład użyty już na produkcji (cecha: styl)
• Gotowy przykład użyty już na produkcji (cecha: przeznaczenie)

Podstawowe zmienne Magento 2

{{store direct_url='torebki.html'}}

{{media url='wysiwyg/obrazek.jpg'}}

{{media url='wysiwyg/nazwa-folderu/obrazek.jpg'}

Podstawowe elementy formatowania tekstu

[h2] Tytuł Produktu

To jest przykład [p] paragrafu z krótkim opisem produktu. [em] pochylenia testu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id erat ac lectus [strong] pogrubienia tekstu malesuada pellentesque vel ut nisi. I przykładowego [u] podkreślenia tekstu.

[h3] Główne cechy produktu

Lista wypunktowana [ul]:

• Wysokiej jakości materiał
• Odporny na wodę
• Wygodny w noszeniu
• Unikalny design

Dostępne rozmiary: S, M, L, [del] XL

[h4] Szczegóły produktu

To jest przykład [em] rozszerzonego opisu produktu. [strong] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec elit nec quam lacinia dictum. Nulla facilisi. Sed eget turpis massa. Praesent fringilla, lectus id facilisis ultricies, neque nisi rhoncus velit, in bibendum odio sapien nec felis. Nulla facilisi. Proin nec consectetur elit. Nulla facilisi.

[h5] Instrukcje użytkowania

To jest przykład przekreślenia instrukcji użytkowania produktu. Aenean efficitur ipsum eu justo blandit, vel gravida quam interdum. Sed vestibulum, lorem vel bibendum pharetra, risus eros condimentum est, a tincidunt ipsum lectus sit amet odio. Maecenas vitae mollis nunc. Pellentesque euismod quam ut nibh fringilla, vitae vulputate lectus rhoncus. Nullam accumsan turpis eu elit auctor, a dictum elit sodales. Integer ut vehicula dolor, a tincidunt odio. To przykład użycia dowolnego koloru za pomocą: style="color:orange".

[h6] Przykłady zastosowania produktu

Lista numerowana [ol]:

1. Do użytku domowego
2. W biurze
3. Na zewnątrz
4. Na specjalne okazje

Jeśli jesteś zainteresowany zakupem tego produktu, kliknij tutaj w link [a]: Kup Teraz.

Tekst wycentrowany
(.align-center lub style="text-align:center;") Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto asperiores cupiditate, doloremque dolorum ducimus esse exercitationem impedit porro possimus quasi quibusdam quod rem, voluptas. Expedita fuga neque nisi unde voluptates!

Tekst wyrównany do prawej
(.align-right lub style="text-align:right;") Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto asperiores cupiditate, doloremque dolorum ducimus esse exercitationem impedit porro possimus quasi quibusdam quod rem, voluptas. Expedita fuga neque nisi unde voluptates!

Kod HTML

<h2>Tytuł Produktu</h2><p>To jest przykład paragrafu z krótkim opisem produktu. <em>pochylenia testu Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em> Nullam id erat ac lectus <strong>pogrubienia tekstu malesuada pellentesque</strong> vel ut nisi. I przykładowego &nbsp;<u>podkreślenia tekstu.</u></p><h3>Główne cechy produktu</h3><p>Lista wypunktowana</p><ul><li>Wysokiej jakości materiał</li> <li>Odporny na wodę</li> <li>Wygodny w noszeniu</li> <li>Unikalny design</li></ul><p><strong>Dostępne rozmiary:</strong> S, M, L, <del> XL</del></p><h4>Szczegóły produktu</h4><p>To jest przykład <em>rozszerzonego opisu</em> produktu. <strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong> Integer nec elit nec quam lacinia dictum. Nulla facilisi. Sed eget turpis massa. Praesent fringilla, lectus id facilisis ultricies, neque nisi rhoncus velit, in bibendum odio sapien nec felis. Nulla facilisi. Proin nec consectetur elit. Nulla facilisi.</p><h5>Instrukcje użytkowania</h5><p>To jest przykład <del>przekreślenia instrukcji użytkowania</del> produktu. Aenean efficitur ipsum eu justo blandit, vel gravida quam interdum. Sed vestibulum, lorem vel bibendum pharetra, risus eros condimentum est, a tincidunt ipsum lectus sit amet odio. Maecenas vitae mollis nunc. Pellentesque euismod quam ut nibh fringilla, vitae vulputate lectus rhoncus. Nullam accumsan turpis eu elit auctor, a dictum elit sodales. Integer ut vehicula dolor, a tincidunt odio. To przykład użycia <span style="color:orange">koloru pomarańczowego</span>.</p><h6>Przykłady zastosowania produktu</h6><p>Lista numerowana:</p><ol><li>Do użytku domowego</li> <li>W biurze</li> <li>Na zewnątrz</li> <li>Na specjalne okazje</li></ol><p>Jeśli jesteś zainteresowany zakupem tego produktu, kliknij tutaj w link: <a href="#">Kup Teraz</a>.</p><p class="align-center">Tekst wycentrowany<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto asperiores cupiditate, doloremque dolorum ducimus esse exercitationem impedit porro possimus quasi quibusdam quod rem, voluptas. Expedita fuga neque nisi unde voluptates!</p><p class="align-right">Tekst wyrównany do prawej<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto asperiores cupiditate, doloremque dolorum ducimus esse exercitationem impedit porro possimus quasi quibusdam quod rem, voluptas. Expedita fuga neque nisi unde voluptates!</p>

Dostępne buttony (linki jako przyciski)

Kod HTML

<a href="#" class="btn btn-primary">przycisk cemny</a> <a href="#" class="btn btn-secondary">przycisk jasny</a> <a href="#" class="btn btn-outline">przycisk z obramowaniem</a> <a href="#" class="btn btn-outline-reverse">przycisk z obramowaniem ciemnym</a>

Zdefiniowane klasy kolorów

Kod HTML

<p class="color-gold">tekst złoty</p><p class="color-red">tekst czerwony</p><p class="color-green">tekst zielony</p><p>tekst czarny</p><p class="text-white">tekst biały</p>

Przykład ułożenia elementów w kolumnach (różne wariacje):

Nagłówek H2

blok: flex-align-start, text: align-right

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Dowiedz się więcej

Kod HTML

<div class="with-image flex-start"><div class="column-one align-right"><h2>Nagłówek H2</h2><strong>pogrubiony podnagłowek</strong> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><a href="#" class="btn btn-outline btn-proceed" title="Dowiedz się więcej">Dowiedz się więcej</a></div><div class="column-two"><img data-src="{{media url='wysiwyg/obrazek.jpg'}}" class="lazyload" alt="Test" width="710" height="500"></div></div>

Nagłówek H3
w dwóch liniach

blok: flex-align-end, text: align-left, color-gold

.with-background-white: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Dowiedz się więcej

Kod HTML

<div class="with-image flex-align-end"><div class="column-one"><img data-src="{{media url='wysiwyg/obrazek.jpg'}}" class="lazyload" alt="Test" width="710" height="710"></div><div class="column-two"><h3>Nagłówek H3<br>w dwóch liniach</h3><strong class="color-gold">złoty podtytuł</strong> <p class="with-background-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br><br><a href="#" class="btn btn-secondary btn-proceed" title="Dowiedz się więcej">Dowiedz się więcej</a></p></div></div>

Nagłówek H4

blok: flex-align-center, text: align-center

.with-background-white: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Dowiedz się więcej

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Nagłówek H5

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Nagłówek H6

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Kod HTML

<div class="with-image flex-align-center"><div class="column-one align-center"><h4>Nagłówek H4</h4><strong>wycentrowany i pogrubiony podtytuł</strong> <p class="with-background-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p><a href="#" class="btn btn-primary btn-proceed" title="Dowiedz się więcej">Dowiedz się więcej</a></p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h5>Nagłówek H5</h5><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><h6>Nagłówek H6</h6><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div><div class="column-two"><img data-src="{{media url='wysiwyg/obrazek.jpg'}}" class="lazyload" alt="Test" width="710" height="1000"></div></div>

Kod HTML

<div class="with-video flex-align-center"><div class="column-one"><div class="responsive-iframe"><iframe class="lazyload" loading="lazy" data-src="https://player.vimeo.com/video/..." width="640" height="1138" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div></div><div class="column-two align-left"><h4>Tytuł Video<br>w 2 liniach</h4><strong>pogrubiony podtytuł</strong></div></div>

Kod HTML

<div class="with-video video-transparent-bg flex-align-center"><div class="column-one align-right"><h4>Tytuł wyrównany<br>do prawej</h4><strong>pogrubiony podtutuł wyrównany do prawej</strong></div><div class="column-two"><div class="responsive-iframe format_16-9"><iframe loading="lazy" src="https://player.vimeo.com/video/..." width="640" height="1138" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div></div></div>

Kod HTML

<div class="with-video flex-align-center"><div class="column-one"><div class="responsive-iframe format_9-16"><iframe loading="lazy" src="https://player.vimeo.com/video/..." width="640" height="1138" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div></div><div class="column-two align-left"><h4 class="color-gold">Złoty tytuł<br>w 2 liniach</h4><strong>pogrubiony podtytuł</strong></div></div>

Kod HTML

<div class="with-video flex-align-center"><div class="column-one align-right"><h4>Tytuł Video<br>w 2 liniach</h4><strong>pogrubiony podtytuł</strong></div><div class="column-two"><div class="responsive-iframe format_9-16"><iframe loading="lazy" src="https://player.vimeo.com/video/..." width="640" height="1138" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div></div></div>

Kod HTML

<div class="with-video column-full align-center"><br><h4>Tytuł Video na całej szerokości</h4><div class="responsive-iframe"><iframe loading="lazy" src="https://player.vimeo.com/video/..." width="640" height="1138" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div></div>

Kod HTML

<div class="column-full align-center"><br><h4>Tytuł na całej szerokości</h4></div><div class="with-video flex-align-center"><div class="column-one"><div class="responsive-iframe format_16-9"><iframe loading="lazy" src="https://player.vimeo.com/video/..." width="640" height="1138" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div></div><div class="column-two"><div class="responsive-iframe format_16-9"><iframe loading="lazy" src="https://player.vimeo.com/video/..." width="640" height="1138" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div></div></div>

Kod HTML

<div class="column-full align-center"><br><h4>Tytuł na całej szerokości</h4></div><div class="with-video flex-align-center video-transparent-bg"><div class="column-one"><div class="responsive-iframe format_16-9"><iframe loading="lazy" src="https://player.vimeo.com/video/..." width="640" height="1138" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div></div><div class="column-two"><div class="responsive-iframe format_16-9"><iframe loading="lazy" src="https://player.vimeo.com/video/..." width="640" height="1138" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div></div></div>

Gotowe przykłady użyte już na produkcji (zdefiniowane wstępy):

Kod HTML

<div class="column-full align-center"><h5>Poznaj ją: Hit sprzedażowy O bag.</h5><h4 class="color-gold">Body O bag Standard</h4><p>wybrało już ponad ... Polek i nadal bije rekordy sprzedaży!<br>O bag standard jest torebką, która genialnie odpowiada na kobiece potrzeby torebki na co dzień.</p></div><div class="flex-align-center"><div class="column-one align-center"><h4><span class="color-gold">2xP</span> = praktyczność + pojemność do potęgi O bag</h4></div><div class="column-two with-background-white"><p>Czy w Twojej torebce można znaleźć dosłownie wszystko? Czy Twoja torebka czasem musi pomieścić pół domu? Body O bag standard jest pojemne i pomieści wszystkie najpotrzebniejsze rzeczy.</p><p>Telefony całej rodziny, klucze, zabawki syna, dokumenty, zakupy codzienne, obiad do pracy, termo kubek, kosmetyki, szczotka, książka… <strong>Ile dobra musi zmieścić torebka na co dzień?</strong> Jeśli szukasz torebki do pracy, na małe zakupy lub Mummy bag, w której zmieścisz rzeczy swoje i dziecka - to genialna opcja dla Ciebie.</p><p>A ten materiał… - kobiety go kochają za miękkość w dotyku i łatwość czyszczenia! Wystarczy przetrzeć i jest jak nowa.</p></div></div><div class="flex-align-center"><div class="column-one align-center"><h4><span class="color-gold">S</span> jak stylowe zmiany</h4></div><div class="column-two with-background-white"><p>Do pracy Torebkę na bazie body O bag standard kobieta nosić może codziennie. A komplety (uchwyty, organizery i opaski) zmieniać według stroju i nastroju. Dzięki temu, mając jedną torebkę i szczyptę kreatywności - możesz być codziennie odrobinę... inna.</p><p>Kobiety doceniają możliwość <strong>dopasowania O bag do siebie</strong>. Jeśli torebka jest nieodłącznym elementem Twojej stylizacji - nie ważne czy idziesz na trening czy do pracy - O bad standard będzie zawsze Ci towarzyszyć.</p></div></div><div class="flex-align-center"><div class="column-one align-center"><h4><span class="color-gold">W</span> jak wielo-okazyjna</h4></div><div class="column-two with-background-white"><p>Czy torebka towarzyszy Ci non stop? O bag standard pasuje i do pracy i do szkoły i na studia. Weźmiesz ją i na spacer i na codzienne zakupy. Będzie Ci służyła niezależnie od pory roku, bo jest nieprzemakalna. To niezawodny klasyk, który kobiety chętnie zabierają w podróż. Bo pomieści dużo i zawsze można na nią liczyć.</p><p><strong>O bag standard to najlepiej sprzedające się body O bag</strong>. Te klasyczne Shopperki sprostają oczekiwaniom nawet najbardziej wymagających wielbicielek stylu. O bag standard świetnie sprawdzi się w pracy, szkole, studiach. Jest genialna do wózka dziecięcego.</p><p>Jeśli planujesz rozpoczęcie przygody z O bag - zdecydowanie rekomendujemy właśnie to body.</p></div></div><div class="with-video video-transparent-bg flex-align-center"><div class="column-one align-center"><h4>Jak skonfigurować O bag</h4></div><div class="column-two"><div class="responsive-iframe"><iframe frameborder="0" scrolling="no" width="640" height="1138" class="lazyload" loading="lazy" data-src="https://player.vimeo.com/video/805226516?h=5322b5bd9c&amp;title=0&amp;byline=0&amp;portrait=0"></iframe></div></div></div><div class="with-video flex-align-center"><div class="column-one"><div class="responsive-iframe"><iframe frameborder="0" scrolling="no" width="640" height="1138" class="lazyload" loading="lazy" data-src="https://player.vimeo.com/video/805416539?h=5322b5bd9c&amp;title=0&amp;byline=0&amp;portrait=0"></iframe></div></div><div class="column-two align-left"><h4>Jak czyścić i pielęgnować torebki O bag</h4></div></div>

Kod HTML

<div class="flex-align-center"><div class="column-one align-center"><h4 class="color-gold">Body O bag mini</h4><p>pasuje wszędzie tam, gdzie się wybierasz. <strong>Mimo że jest mini to może naprawdę maxi.</strong> Zaproś do swojej garderoby to urocze body, a się z nim nie rozstaniesz!</p></div><div class="column-two"><div class="with-background-white"><p><strong>Praktyczny wybór</strong><br>Możesz mieć jedną, wygodną i trwała torebkę. A paski i organizery dobierać do stylizacji. W ten sposób klasyczny, ponadczasowy fason przemienisz nie do poznania.</p><p><strong>Trwała i łatwa w czyszczeniu</strong><br>O bag mini to bardzo trwała i wytrzymała torebka. Jest łatwa w czyszczeniu. Gdy się zabrudzi - wystarczy ją przetrzeć i jest jak nowa.</p><p><strong>Konfiguracja</strong><br>Do O bag mini sama dobierzesz dodatki i zmienisz torebkę nie do poznania! Dobierz uchwyty - małe lub duże - wszystko jak lubisz i miej ją praktycznie na każdą okazję! Dzięki O bag każdego dnia możesz wyglądać trochę inaczej. Komponować torbę po swojemu - według nastroju, humoru i ubioru. Bo to torba uniwersalna, która podkreśli zarówno sportową, casualową, jak i klasyczną kreację. <strong>Sama skomponuj O bag mini!</strong></p><p>Body O bag mini to klasyczna torebka, która posłuży Ci na spacer, do pracy. To praktyczna opcja do wózka dziecięcego. Jest doskonałym wybór do jeśli chcesz stworzyć własną torebkę na co dzień!</p><p>Jeśli planujesz rozpoczęcie przygody z O bag - zdecydowanie rekomendujemy właśnie to body.</p></div></div></div>

Kod HTML

<div class="flex-align-end"><div class="column-one align-center"><p>W ilu krajach była Twoja torebka? Poznaj:</p><h4 class="color-gold">O bag beach</h4><div class="with-background-white"><p>Body, które uwielbia małe i duże podróże. Zabierzesz je wszędzie tam, gdzie Ty lubisz.</p><p>O bag beach to idealna baza do skomponowania <strong>nieprzemakalnej</strong> i trwałej torebki nie tylko na wakacje!<br>W niej będziesz wyglądać szałowo na plaży, basenie i zakupach! Doskonale pasuje do <strong>letnich stylizacji.</strong> Ale można nosić ją przez cały rok. Jest poręczna w użytkowaniu, wszystko w niej łatwo odnajdziesz - a wiesz, że to ważne:-).</p></div></div><div class="column-two"><div class="with-background-white"><p><strong>wakacyjny tip O bag</strong><br>Body O bag beach to sprytny pomysł, by oszczędzić miejsce w walizce. Pakujesz jedno body, różne dodatki i masz codziennie inną torebkę! Dobierz stylowe dodatki (paski i organizery) i wykaż się kreatywnością. Miej za każdym razem nową torebkę!</p><p><strong>Body O bag beach jest:</strong><br>- idealna na podróż, bo wszystko się w niej zmieści. Nawet rzeczy dziecka. Rewelacja! <br>- na weekendowy wyjazd w sam raz<br>- pomieści zapasy na plażę i ekwipunek dla 4 osobowej rodziny!<br>- przeniesiesz w niej nie tylko swoje rzeczy, ale też i zabawki dziecka, psa, czasem młotek, drugie śniadanie...</p><p><strong>Nie uwierzysz, co kobiety noszą w O bag beach!</strong><br>Kobiety zdradziły nam, że O bag beach bywała pojemnikiem chłodzącym napoje latem jak i wiaderkiem na plaży. To naprawdę trwała torebka, idealna do zadań specjalnych, która już pakuje się, by jeździć z Tobą wszędzie.</p><p><strong>To co, jaka podróż w tym roku?</strong><br>Body O bag beach to baza do torby plażowej, letnich stylizacji, na wakacje, basen, wycieczkę. Ale na wakacjach podróże się nie kończą... Zakochaj się bez pamięci w tym kształcie i noś go cały rok!</p></div></div></div>

Kod HTML

<div class="column-full align-center"><h4>Miłość do body <span class="color-gold">O bag moon light!</span></h4><p>Nic nie jest w stanie jej powstrzymać. Najpierw dostrzegasz piękne kolory i doskonałe wymiary. A im dłużej nosisz tą torebkę, tym bardziej ją uwielbiasz. To takie piekne miłosne perpetum mobile.</p></div><div class="flex-align-center"><div class="column-one align-left"><div class="with-background-white"><p><strong>Tip od O bag</strong><br>Nie musisz kupować nowej torebki, bo stara się znudziła. Możesz wymienić w niej akcesoria i... zakochać się w niej od nowa.</p><p><strong>Body O bag moon light</strong> z łatwością dostosujesz do swojego stroju i nastroju:) Wymieniając w niej pasek możesz mieć wielofunkcyjną torebkę - do ręki, na eleganckie wyjście, a nawet na rower - kiedy przerzucisz ją na długim pasku lub włożysz do koszyka. To świetna opcja <strong>dla kobiet aktywnych</strong>, które zawsze lubią dobrze wyglądać.</p></div></div><div class="column-two"><div class="with-background-white"><p>Z body O bag moon light stworzysz doskonałą torebkę na wyjścia. Jest wygodna i z łatwością pomieści Twoje najpotrzebniejsze skarby, takie jak portfel, komórka, klucze. To też <strong>doskonały rozweselacz</strong> - bo jest taka piękna, że gdy się w niej przeglądniesz - uśmiech rozświetli Twoją buzię!</p><p><strong>O bag moon light</strong> jest też praktyczna - wytrzymała, wodoodporna i mega łatwa w czyszczeniu - wystarczy ją przetrzeć i jest jak nowa.</p><p><strong>Body O bag moon light</strong> to półokrągła sprytna listonoszka, która posłuży Ci na spacer, do pracy, na imprezę. To doskonały wybór do skomponowania torebki na co dzień!</p></div></div></div>

Kod HTML

<div class="flex-align-center"><div class="column-one align-center"><p>Kochasz przyciągać wzrok?</p><h4 class="color-gold">O bag urban mini</h4><p>to body jest właśnie dla Ciebie.</p></div><div class="column-two"><div class="with-background-white"><p>Ma oryginalny materiał i gładko poddaje się dowolnej stylizacji. Bo z body O bag urban mini możesz złożyć <strong>wiele torebek</strong> - na przykład wymieniając uchwyty. O bag to torebka idealna dla kobiety <strong>kochającej styl</strong>. To torebka, która dopasuje się do Ciebie (a nie na odwrót) i dotrzyma Ci kroku!</p><p>Sama dobierz torebkowe kompozycje na bazie O bag urban mini. Dzięki temu Twoja torebka będzie unikatem i oryginałem samym w sobie.</p><p>Bo O bag to 3xO: Obłędna moda, Oryginalny fason i Oczywiście kobiece piękno!<br>O bag urban to klasyczna aktówka do szkoły, pracy, na studia i na co dzień. To doskonały wybór dla oryginalnej kobiety!</p></div></div></div>

Kod HTML

<div class="flex-align-center"><div class="column-one align-center"><h4 class="color-gold">Klapy do torebek O bag</h4><p>Witaj w magicznym świecie O bag. Tutaj, jak za dotknięciem magicznej różdżki, Twoja torebka dzisiaj może być ina niż wczoraj, a jutro inna niż dziś. W krainie O bag zmiana zawsze jest mile widziana i zachodzi gdy tylko jej zapragniesz. Dlatego nie bój się i zaszalej ze stylizacjami. Wybierz stylowe klapy do torebek. Baw się konfiguracją. Ciesz się wrażeniem, jakie wywołujesz.</p></div><div class="column-two"><div class="with-background-white"><h5>Klapa do torebki O bag — nowe oblicze Twojego stylu</h5><p>W O bag możesz korzystać z dobrodziejstwa konfigurowalnej torebki. Do wyboru masz niesamowitą gamę pasków, uchwytów, organizerów i innych akcesoriów torebkowych. Jednak, gdy chcesz naprawdę zaszaleć i pokazać swój styl, koniecznie zacznij od nowej klapy do torebki. Zdziwisz się, jak w kilka sekund Twoja torebka przejdzie całkowitą metamorfozę, wyłącznie za sprawą nowej klapy O bag. Tylko nie zapomnij, jak teraz wygląda Twoja nowa/stara torebka.</p><h5>Odmień O bag łatwo</h5><p>Wahasz się, czy spróbować? Rozumiem, ale odwagi, jesteś pewną siebie kobietą i wiem, że dasz sobie radę ze wszystkim. Nową klapę do torebki zamontujesz w mniej niż minutę. Sprawdź sama, jakie to proste. A jak już zaczniesz zabawę i odkryjesz przyjemność, jaką to sprawia, jestem pewna, że będziesz to robić bardzo często.</p><h5>Nowa klapa do torebki O bag — wykrzycz swój sty</h5><p>Kolor, wzór, zdobienia — daj się urzec ferii klap do torebek O bag. Ich niesamowite możliwości sprawiają, że kobiety z rozkoszą podkręcają upragniony efekt swoich kreacji. Dobierz klapę do swojej torebki, by gustownie pasowała do Twojego stylu. Za każdym razem, niezależnie od okazji. To jest właśnie urok prawdziwej przyjaciółki, zawsze możesz na niej polegać.</p></div></div></div>

Gotowy przykład użyty już na produkcji (cecha: color):

Niebieski

To kolor głębin, tego co magiczne i schowane ale przez to - jakże pociągające. Stylowo i pięknie wygląda kobieta, sunąc piaszczystą włoską plażą na tle błękitnego morza z torebką Obag w tym samym kolorze. Widzisz tam siebie? Zachwycaj stylem, obok którego nikt nie przejdzie obojętnie. Tak, ten kolor robi wrażenie, pokaż się w O bag.

Kod HTML

<div class="with-image flex-align-center"><div class="column-one"><img data-src="{{media url='wysiwyg/color_icons/710_500_niebieski.jpg'}}" class="lazyload" alt="Niebieski" width="710" height="500"></div><div class="column-two"><h4 style="color: #45bbe3;">Niebieski</h4><p>To kolor głębin, tego co magiczne i schowane ale przez to - jakże pociągające. Stylowo i pięknie wygląda kobieta, sunąc piaszczystą włoską plażą na tle błękitnego morza z torebką Obag w tym samym kolorze. Widzisz tam siebie? Zachwycaj stylem, obok którego nikt nie przejdzie obojętnie. Tak, ten kolor robi wrażenie, <strong>pokaż się w O bag</strong>.</p></div></div>

Gotowy przykład użyty już na produkcji (cecha: styl):

Zabawa modą jest jak powrót do dzieciństwa. A zabawa w konfigurację O bag jak zabawa lalkami. Pamiętasz swoją pierwszą, koronkową sukienkę? Jeśli lubisz delikatne stroje i zabawa modą to "Twoje drugie ja" - ten O bag z chęcią będzie Ci towarzyszyć. Bo torebka do koronek musi podkreślać, jak pięknie wyglądasz.

Kod HTML

<div class="with-image flex-align-center"><div class="column-one"><img data-src="{{media url='wysiwyg/style_icon/710_600_koronka.jpg'}}" class="lazyload" alt="Koronka" width="710" height="600"></div><div class="column-two align-left"><p>Zabawa modą jest jak powrót do dzieciństwa. A zabawa w konfigurację O bag jak zabawa lalkami. Pamiętasz swoją pierwszą, koronkową sukienkę? Jeśli lubisz delikatne stroje i zabawa modą to "Twoje drugie ja" - ten <strong>O bag z chęcią będzie Ci towarzyszyć</strong>. Bo torebka do koronek musi podkreślać, jak pięknie wyglądasz.</p></div></div>

Gotowy przykład użyty już na produkcji (cecha: przeznaczenie):

Stylowa w pracy?

Oczywiście. Twoja nowa O bag ma 5 cech idealnej torebki do pracy:
1. Pojemna, niczym studnia bez dna. Z łatwością pomieścisz w niej wszystkie swoje rzeczy.
2. Wytrzymała - nie boi się lądowania na ziemi, ściskania i przerzucania, obracania i tarmoszenia.
3. Łatwa w czyszczeniu, przecierasz gąbeczką i jest jak nowa!
4. Piękna jak Ty, doskonale zwieńczy Twoją stylizację
5. Wielookazyjna: taka, która będzie pasować i do szpilek i do trampek.

Taka jest właśnie O bag. To codzienna towarzyszka. Swobodnie ją skonfigurujesz i dopasujesz do okazji, stylu i swojego humoru. Wymienisz organizer (środek) i uchwyty. Tak będziesz mieć codziennie inną torebkę! Pokaż się w O bag: idealnej torbie do pracy!

Kod HTML

<div class="with-image flex-align-center"><div class="column-one"><img data-src="{{media url='wysiwyg/destiny_icon/710_710_do_pracy.jpg'}}" class="lazyload" alt="Do pracy" width="710" height="710"></div><div class="column-two"><h4>Stylowa w pracy?</h4><p>Oczywiście. Twoja nowa O bag ma 5 cech idealnej torebki do pracy:<br>1. <strong>Pojemna</strong>, niczym studnia bez dna. Z łatwością pomieścisz w niej wszystkie swoje rzeczy.<br>2. <strong>Wytrzymała</strong> - nie boi się lądowania na ziemi, ściskania i przerzucania, obracania i tarmoszenia.<br>3. <strong>Łatwa w czyszczeniu</strong>, przecierasz gąbeczką i jest jak nowa!<br>4. <strong>Piękna</strong> jak Ty, doskonale zwieńczy Twoją stylizację<br>5. <strong>Wielookazyjna</strong>: taka, która będzie pasować i do szpilek i do trampek.<br><br><strong>Taka jest właśnie O bag</strong>. To codzienna towarzyszka. Swobodnie ją skonfigurujesz i dopasujesz do okazji, stylu i swojego humoru. Wymienisz organizer (środek) i uchwyty. Tak będziesz mieć codziennie inną torebkę! <strong>Pokaż się w O bag</strong>: idealnej torbie do pracy!</p></div></div>