Storefront: Jak podlinkować grafikę?

Data publikacji: 14 maja 2024 Ostatnia aktualizacja: 9 lipca 2024

W Shoper Visual Editor możesz dodać grafikę razem z hiperłączem, w którą po kliknięciu użytkownik zostanie przeniesiony w ustalone przez ciebie miejsce w sieci. Są dwa sposoby na to, aby osiągnąć taki efekt. Z poniższego artykułu dowiesz się jak dodać link do grafiki w Shoper Storefront.

Dodawanie linka do grafiki w module Obrazek

Zaloguj się do Panelu administracyjnego sklepu.
Przejdź do zakładki Wygląd i treści (A) > Wygląd sklepu (B) > Obecny szablon graficzny (C) > Szczegóły szablonu (D) i uruchom edytor, klikając: EDYTUJ UKŁAD I STYL SZABLONU (E).
Panel administracyjny sklepu > Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Edytuj układ i styl szablonu
Rys 1. Uruchom edytor Shoper Visual Editor w technologii Storefront
Panel administracyjny sklepu > Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Edytuj układ i styl szablonu
Rys 1. Uruchom edytor Shoper Visual Editor w technologii Storefront

Jeśli szablon Storefront nie jest ustawiony jako aktywny w sklepie, to przejdź do jego edycji w zakładce: Wygląd i treści > Wygląd sklepu > Twoje szablony graficzne.

Przejdź do wybranej przez siebie edytowalnej strony i utwórz nową sekcję, wiersz lub kolumnę, do której dodasz obrazek.
Shoper Visual Editor > Strona: Kontakt
Rys 2. Przygotuj miejsce na nowy obrazek, używając sekcji, wierszy lub kolumn
Shoper Visual Editor > Strona: Kontakt
Rys 2. Przygotuj miejsce na nowy obrazek, używając sekcji, wierszy lub kolumn
W zakładce DODAJ MODUŁ, wyszukaj i przeciągnij moduł: Obrazek (A) do przygotowanego wcześniej miejsca, a następnie w trybie edycji modułu, kliknij obszar oznaczony przerywaną linią, aby załadować obrazek z dysku twojego komputera (B).
Shoper Visual Editor > Moduł Obrazek > Dodawanie obrazka
Rys 3. Załaduj grafikę z dysku swojego komputera
Shoper Visual Editor > Moduł Obrazek > Dodawanie obrazka
Rys 3. Załaduj grafikę z dysku swojego komputera
Po dodaniu obrazka kliknij checkbox: Obrazek jest podlinkowany (A) i wprowadź adres URL strony, do której obrazek ma przenosić po kliknięciu (B). Możesz także zdecydować czy strona podlinkowana do obrazka ma być wyświetlana w nowym oknie. Jeśli tak, to odznacz checkbox: Otwórz link w tej samej karcie (C).
Shoper Visual Editor > Moduł Obrazek > Dodawanie linka
Rys 4. Wprowadź adres URL docelowej strony, do której ma obrazek przenosić
Shoper Visual Editor > Moduł Obrazek > Dodawanie linka
Rys 4. Wprowadź adres URL docelowej strony, do której ma obrazek przenosić

Dodatkowo w ustawieniach modułu Obrazek znajdziesz następujące ustawienia:

Maksymalna szerokość obrazka: możesz ustawić maksymalną szerokość dodawanego obrazka, podając jej wartość w pikselach.

Alternatywny opis obrazka („alt”): możesz podać dodatkowy opis obrazka, który jest istotny pod kątem pozycjonowania.

Zaokrąglenie rogów obrazka: możesz podać procentową wartość zaokrąglenia narożników obrazka, gdzie 0% to obrazek prostokątny, a 100% to obrazek całkowicie okrągły.

Klasa CSS: możesz modułowi nadać klasę CSS, aby wprowadzać do niego bardziej zaawansowane zmiany w stylach CSS.

Widoczność na urządzeniach: możesz określić na jakich szerokościach ekranu, dla poszczególnych typach urządzeń, moduł obrazek ma być wyświetlany.

Po dodaniu obrazka i linka kliknij: ZAPISZ w ustawieniach modułu Obrazek, a następnie kliknij: ZAPISZ I OPUBLIKUJ ZMIANY W UKŁADZIE w prawym górnym rogu edytora.

Dodawanie linka do grafiki w module Tekst i multimedia

Zaloguj się do Panelu administracyjnego sklepu.
Przejdź do zakładki Wygląd i treści (A) > Wygląd sklepu (B) > Obecny szablon graficzny (C) > Szczegóły szablonu (D) i uruchom edytor, klikając: EDYTUJ UKŁAD I STYL SZABLONU (E).
Panel administracyjny sklepu > Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Edytuj układ i styl szablonu
Rys 5. Uruchom edytor Shoper Visual Editor w technologii Storefront
Panel administracyjny sklepu > Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Edytuj układ i styl szablonu
Rys 5. Uruchom edytor Shoper Visual Editor w technologii Storefront
Przejdź do wybranej przez siebie edytowalnej strony i utwórz nową sekcję, wiersz lub kolumnę, do której dodasz obrazek.
Shoper Visual Editor > Strona: Kontakt
Rys 6. Przygotuj miejsce na nowy obrazek, używając sekcji, wierszy lub kolumn
Shoper Visual Editor > Strona: Kontakt
Rys 6. Przygotuj miejsce na nowy obrazek, używając sekcji, wierszy lub kolumn
W zakładce DODAJ MODUŁ, wyszukaj i przeciągnij moduł: Tekst i multimedia (A) do przygotowanego wcześniej miejsca, a następnie w trybie edycji modułu kliknij: EDYTUJ TREŚĆ (B).
Shoper Visual Editor > Moduł Tekst i Multimedia > Edytuj treść
Rys 7. W edycji modułu: Tekst i multimedia kliknij: EDYTUJ TREŚĆ
Shoper Visual Editor > Moduł Tekst i Multimedia > Edytuj treść
Rys 7. W edycji modułu: Tekst i multimedia kliknij: EDYTUJ TREŚĆ
W osobnym oknie edytora kliknij: ikonę Wstaw/edytuj obrazek (A), załaduj obraz z dysku swojego komputera (B), potwierdź jego dodanie, klikając: OK (C), a następnie kliknij: ZAPISZ (D).
Edytor tekstu > Dodawanie obrazka
Rys 8. Załaduj obrazek z dysku swojego komputera
Edytor tekstu > Dodawanie obrazka
Rys 8. Załaduj obrazek z dysku swojego komputera
Zaznacz dodany obrazek tak, aby podświetlił się na niebiesko (A), a następnie kliknij obrazek prawym przyciskiem myszy i wybierz: Wstaw/edytuj łącze (B).
Shoper Visual Editor > Edytor tekstu
Rys 9. Zaznacz dodany obrazek i wybierz opcję: Wstaw/edytuj łączę
Shoper Visual Editor > Edytor tekstu
Rys 9. Zaznacz dodany obrazek i wybierz opcję: Wstaw/edytuj łączę
W polu URL (A) podaj adres, do którego obrazek ma linkować, kliknij: OK (B), a następnie kliknij: ZAPISZ (C), aby zamknąć edytor.
Shoper VIsual Editor > Edytor tekstu
Rys 10. Wprowadź docelowy adres URL, kliknij: OK, a następnie kliknij: ZAPISZ
Shoper VIsual Editor > Edytor tekstu
Rys 10. Wprowadź docelowy adres URL, kliknij: OK, a następnie kliknij: ZAPISZ
Po dodaniu obrazka i linka kliknij: ZAPISZ w ustawieniach modułu Tekst i multimedia, a następnie kliknij: ZAPISZ I OPUBLIKUJ ZMIANY W UKŁADZIE w prawym górnym rogu edytora.
Warto zapamiętać!
W powyższym artykule zostało wyjaśnione:
  • w jaki sposób dodać moduł Obrazek,
  • w jaki sposób dodać moduł Tekst i multimedia,
  • jak załadować obraz z dysku swojego komputera,
  • jak dodać link do przesłanego obrazka.
Czy ten artykuł był pomocny?
Tak
Nie
Dziękujemy za odpowiedź!
Udostępnij artykuł:

Przetestuj sklep internetowy
przez 14 dni za darmo

Korzystaj ze wszystkich funkcji oprogramowania za darmo i bez zobowiązań.

Testuj wszystkie funkcje przez 14 dni bez zobowiązań. Zakładając sklep poprzez podanie
adresu e-mail akceptujesz nasz Regulamin i Politykę Prywatności