Wróć

Jak przygotować opis w języku HTML?

Poprawne przygotowanie opisu w formacie html poprawi jakość Twojej oferty, a co za tym idzie zwiększy również zainteresowanie produktem oraz sprzedaż. SW opisach wykorzystywany jest język HTML - uniwersalny język wykorzystywany na każdej stronie internetowej

Ważne

Przed zaimportowaniem opisów do marketplace zwróć uwagę na zdjęcia. Linki (zarówno produktu jak i opisu) muszą być szyfrowane! (zaczynać się od https://). W przypadku podania linku do niezaszyfrowanego nie będziemy w stanie wyeksportować zdjęć oraz opisu do danego produktu.

Poradnik podzielony jest na kilka części:

Opis podstawowych znaczników HTML i wskazówki do ich użycia.
Opis produktu przygotowany za pomocą HTML.
Opis produktu zaimportowany do systemu.
Co powinienem zrobić w przypadku....?

Aby edytować opis przejdź do wybranego produktu, a następnie skorzystaj z ikony edycji(1). Możesz skorzystać z dedykowanego edytora, który nie wymaga znajomości html lub skorzystać z przycisku "Source code"(2) i wkleić przygotowany wcześniej opis html. Pamiętaj o zapisaniu wprowadzonych zmian(3).

Opis podstawowych znaczników HTML i wskazówki użycia

<h3></h3> -- Oznacza nagłówek.
<p></p> -- Znacznik przenosi tekst do nowej linii.
<img src="https://images.morele.net/description/6000000/5947509_2021_07_14_12_28_20556851908.jpeg" /> -- Pozwala dodać obrazek. Link musi być absolutny, zawierający https:// i domenę.
<strong>powoduje pogrubienie</strong>
<a href=LINK DO STRONY>Zawiera Link do strony</a> - System automatycznie zablokuje wszystkie linki zewnętrzne.
style="text-align: center; - pozycja tekstu (wyśrodkowanie). Inne możliwe opcje text-align: left - wyrównanie do lewej, text-align: right - wyrównanie do prawej.
<img max-width="900px;" max-height="900px;"src="https://images.morele.net/description/6000000/5947509_2021_07_14_12_28_20556851908.jpeg" /> - Maksymalana szerokość obrazka (width) 900 pikseli; maksymalna wysokość obrazka (height) 900 pikseli.
<ul></ul> - Lista punktowa. Przykładem użycia jest obecna lista znaczników. Każdy podpunkt należy umieścić w osobnych znacznikach <li></li>.
<ol></ol> - Lista numeryczna. Znacznik użyty do podziału poradnika. Każdy punkt należy umieścić w osobnych znacznikach <li></li>. Aby zmienić kolejność numerowania należy dopisać wartość (np. <li value ="4")To jest 4 punkt</li>.
<div></div> - Służy do tworzenia akapitów lub grupowania treści. za pomocą znacznika możesz np. stworzyć wyróżniające się pole typu "Wskazówki", globalnie sformatować styl całego nagłówka lub umieścić kilka miniatur w rzędzie.

Wskazówki

Opis musi być zgodny z wytycznymi zawartymi w tym poradniku!
Domykaj komendy (zaczynaj od znaku "<" i kończ ">").
Zwróć uwagę na formatowanie - właściwe użycie nagłówków, rozmieszczenie tekstu lub list numerycznych uatrakcyjni wizualnie produkt.
Linki do zdjęć muszą być ABSOLUTNE tzn. zawierać nazwę domeny i https:// (np. https://www.morele.net/static/img/shop/logo/image-logo-morele.svg).
Obrazki powinny być dodawane w maksymalnej rozdzielczości. Wysokość i szerokość zdjęć nie powinna przekraczać 900px.

Opis produktu przygotowany za pomocą znaczników HTML

<div class="desc-items1"><div class="row"><div class="text1 col-sm-12 text-justify"><h3 style="text-align: center;">Wydajność, która da Ci przewagę</h3><p style='text-align:justify'>Procesor wyposażony został w technologię AMD Store MI, która znacznie poprawia szybkość pracy Twojego komputera. Jeżeli posiadasz w swojej stacji roboczej nowoczesne dyski SSD lub HDD, prędkość odczytywania oraz zapisywania danych zauważalnie wzrośnie. Ponadto, możesz liczyć na niezwykłą stabilność podczas wykonywania skomplikowanych czynności na stanowisku. Zapomnij o spadku wydajności.</p><p style='text-align:justify'> </p></div><div class="row"><div class="image col-sm-12 text-center" style="text-align: center;"><img src="https://www.amd.com/system/files/styles/992px/private/2020-10/648625-vermeer-amd-ryzen-chip-flare-1260x709_2.jpg?itok=XwAtSWz2"/>

<div class="row">
<div class="image col-sm-3 text-center"><img style="max-width: 150px;" src="https://images.morele.net/d/151007084920428c53d5c5fdb623f89f5f84dd55e1918855192f1b.png">
<h3 style="text-align: center;">Slot M.2 PCIe - jeszcze szybsza praca dysku SSD</h3>
</div>
<div class="image col-sm-3 text-center"><img style="max-width: 150px;" src="https://images.morele.net/d/150884239534358f94a8c1fc1083e0506c528b769ff87fcebe19e2.png">
<h3 style="text-align: center;">Bezgłośna praca</h3>
</div>
<div class="image col-sm-3 text-center"><img style="max-width: 150px;" src="https://images.morele.net/d/150884239579168ee64c7b5ac7cddd9da49c8059cef01864c15437.png">
<h3 style="text-align: center;">Dłuższy czas pracy na baterii</h3>
</div>
<div class="image col-sm-3 text-center"><img style="max-width: 150px;" src="https://images.morele.net/d/1508842396221804d01c3077f5cabb97dc3fe01ff863e0dcc77c0e.png" >
<h3 style="text-align: center;">Odporność na uszkodzenia mechaniczne</h3>
</div>

Opis zaimportowany do systemu

Wydajność, która da Ci przewagę

Procesor wyposażony został w technologię AMD Store MI, która znacznie poprawia szybkość pracy Twojego komputera. Jeżeli posiadasz w swojej stacji roboczej nowoczesne dyski SSD lub HDD, prędkość odczytywania oraz zapisywania danych zauważalnie wzrośnie. Ponadto, możesz liczyć na niezwykłą stabilność podczas wykonywania skomplikowanych czynności na stanowisku. Zapomnij o spadku wydajności.

Slot M.2 PCIe - jeszcze szybsza praca dysku SSD

Bezgłośna praca

Dłuższy czas pracy na baterii

Odporność na uszkodzenia mechaniczne

Co powinienem zrobić w przypadku....?

Dodałem link, ale zdjęcie się nie wyświetla. Co powinienem zrobić?

Przede wszystkim należy zweryfikować, czy link jest absolutny, tzn. czy zaczyna się od HTTPS:// oraz domeny - https://content.morele.net/AMD/Ryzen-7-3800XT/1.jpg. Będą wyświetlane prawidłowo.

Linki RELATYWNE, czyli takie, których adres odnosi się do miejsca na dysku lokalnym lub nie zawierające pełnego adresu np. /AMD/Ryzen-7-3800XT/1.jpg - Nie będą wyświetlane.

Po zapisaniu opisu widzę komunikat "Brak formatowania - opis powinien być sformatowany w znacznikach HTML".

Należy zweryfikować opis pod kątem poprawności komend HTML. Zwróć szczególną uwagę, czy wszystkie znaczniki są zamknięte, zwłaszcza jeżeli korzystasz z więcej niż jednej komendy - zaczynają się od "<" i kończą na ">".