Przykładowy wpis: Link (edycja)

1. Sekcja nagłówka, opisu i slidera

W tym miejscu wpis generowany jest automatycznie na podstawie konfiguracji wpisu blogowego

  1. Kategorie - zaznaczyć odpowiednie kategorie (po uprzednim utworzeniu)

    Kategorie
  2. Opis krótki - pobierany jest z sekcji Skrót

  3. Zdjęcia w sliderze - pobierane są automatycznie z sekcji Towary powiązane ze stroną

Przykładowy wygląd:

Przykład Sekcji nagłówka, opisu i slidera

2. Sekcja tekst + zdjęcie

  • W pierwszej części należy zmienić tylko link do zdjęcia (<img src="link")
  • W drugiej części kodu znajduje się wszystko to co widnieje po prawej stronie sekcji (patrz przykład niżej)
    • Tekst przed nagłówkiem jest elementem nieobowiązkowym w zależności od potrzeb
    • Liczba paragrafów (<p>), czyli sekcji z tekstem jest dowolna
    • Button należy odpowiednio zatytuować i dodać do niego właściwy właściwy link (<a href="link")

Kod:

<div class="row blog-text-wrapper"> <div class="col-md-4 blog-text-image"> <img src="https://static2.lou.pl/pol_il_Komplet-Amber-Zielony-boho-set-w-odcieniu-oliwki-1088.jpg" /> </div> <div class="col-12 col-md-8 blog-text"> <span class="before_label">Tekst przed nagłówkiem</span> <h2 class="big_label">Nagłówek tekstu</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit tempus mollis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit tempus mollis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit tempus mollis.</p> <a href="https://lou.pl/" class="btn">Przykładowy button</a> </div> </div>

Przykładowy wygląd:

Przykład sekcji tekstu i zdjęcia

3. Sekcja zdjęcia + najnowsze wpisy blogowe

W tej części umieszczone są zdjęcia i sekcja z najnowszymi wpisami blogowymi. Najnowsze wpisy można zamienić np. na powiązane z tematyką wpisu.

  • W pierwszej części umieszczony jest nagłówek widoczny po lewej stronie oraz większe zdjęcie (dobrze, aby było w orientacji poziomej)
  • W drugiej części do podmiany są dwa małe zdjęcia oraz opis pod nimi
  • Najnowsze wpisy blogowe można zamienić, np. na podobne wpisy blogowe. Ilość wpisów jest dowolna

Kod:

<div class="row blog-separator-wrapper"> <div class="col-12 col-md-7 d-flex flex-wrap blog-separator-image"> <h2 class="big_label">Sukienki wieczorowe na co dzień</h2> <img src="https://lou.pl/data/include/cms/lookbook/denim/1.jpg"/> </div> <div class="col-12 col-md-5 d-flex flex-wrap flex-column justify-content-around"> <div class="d-flex"> <div class="blog-separator-image-right"> <div><img src="https://lou.pl/data/include/img/news/1656340414.png"/></div> <div><img src="https://lou.pl/data/include/img/news/1652962034.jpg"/></div> <span>Anabel - drobna sukienka z ciekawym printem</span> </div> </div> <div class="blog-separator-latest"> <div> <strong>Najnowsze wpisy blogowe</strong> <ul> <li><a href="#">Lorem ipsum dolor sit amet 1</a></li> <li><a href="#">Lorem ipsum dolor sit amet 2</a></li> <li><a href="#">Lorem ipsum dolor sit amet 3</a></li> <li><a href="#">Lorem ipsum dolor sit amet 4</a></li> <li><a href="#">Lorem ipsum dolor sit amet 5</a></li> <li><a href="#">Lorem ipsum dolor sit amet 6</a></li> </ul> </div> </div> </div> </div>

Przykładowy wygląd:

Przykład sekcji zdjęć i najnowszych wpisów

Dodatkowe informacje

  • Aby zachować poprawny wygląd sekcji (np. opisu krótkiego) należy zwrócić uwagę, aby kopiowany tekst nie zawierał żadnych styli (np. innych czcionek w przypadku kopiowania z Worda lub innej strony internetowej)
  • Sekcje 2 i 3 można dowolnie ustawiać i powielać. Zawsze należy kopiować cały kod, a nie jego fragmenty.
  • Sekcja z produktami pod wpisem jest generowana automatycznie na podstawie konfiguracji - Towary powiązane ze stroną
  • Sekcja "Kategorie blogowe" pobierana jest automatycznie na podstawie wszystkich utworzonych i dostępnych kategorii
  • Sekcja "Ostatnio dodane wpisy" zawiera wpisy z zaznaczoną opcją Pokazuj w aktualnościach: w bocznej ramce 1 na wszystkich podstronach. Warto aby to ustawienie miało tylko kilka najnowszych wpisów.