Przejdź do treści
← Wróć do poradników

Osadź wirtualny spacer, projekt lub portfolio na swojej stronie

5 min czytania

Kod do osadzenia jest dostępny w każdym planie, także w Darmowym. Wklejasz go raz; potem odwiedzający zawsze widzą aktualną wersję spaceru. Ten poradnik pokazuje, gdzie znaleźć kod, którą z dwóch wersji wybrać i gdzie go wkleić w popularnych kreatorach stron.

Pobierz kod

  1. Otwórz spacer w studiu i kliknij kartę Udostępnij.
  2. W sekcji Osadź na swojej stronie za pierwszym razem zaznacz oświadczenie o prawach i kliknij Pobierz kod do osadzenia. To samo oświadczenie co przy publikacji, bo osadzony spacer jest w praktyce publiczny, nawet jeśli jest dostępny tylko przez link.
  3. Wybierz opcje:
    • Motyw: Dopasuj do odwiedzającego (auto), Jasny lub Ciemny. Dopasuj go do strony, na której wklejasz kod.
    • Pokaż twórców: pokazuje w panelu informacji spaceru osoby, które oznaczono jako twórców.
    • Nawigacja dwoma palcami na telefonach: na telefonie jeden palec przewija Twoją stronę, a dwa palce poruszają spacerem. Włącz tę opcję, gdy spacer jest w środku długiej strony.
    • Akcent (od planu Pro wzwyż): Twój kolor wyróżnień dla przycisków.
  4. Wybierz wersję kodu i kliknij Skopiuj kod.

Zalecana wersja czy stała wysokość?

Wersja Zalecana to iframe i mały skrypt z prewalk.co. Skrypt dopasowuje rozmiar osadzenia do zawartości, a gdy odwiedzający kliknie spacer, ten otwiera się na pełnym ekranie na Twojej stronie, więc odwiedzający nigdy jej nie opuszcza. Używaj jej wszędzie tam, gdzie możesz wkleić HTML zawierający znacznik <script>.

Wersja Stała wysokość to sam iframe, bez skryptu. Używaj jej w kreatorach, które usuwają skrypty, albo gdy reguły strony na nie nie pozwalają. Ustawiasz Wysokość (px). Pełny ekran korzysta z trybu pełnoekranowego przeglądarki; w Safari na iPhonie, która nie pozwala na niego w osadzonych treściach, spacer otwiera się zamiast tego w nowej karcie.

Najpierw wypróbuj wersję Zalecaną. Jeśli osadzenie nigdy nie zmienia rozmiaru ani nie otwiera się na pełnym ekranie, kreator zablokował skrypt: przełącz na stałą wysokość.

Platforma po platformie

WordPress (edytor blokowy). Edytuj stronę, kliknij + i dodaj blok Własny HTML. Wklej kod. Wyświetl podgląd bloku, a potem zaktualizuj stronę. W edytorze klasycznym przed wklejeniem przełącz edytor na kartę Tekst lub Kod.

Wix. W edytorze kliknij Dodaj elementy, potem Osadź kod i wybierz Osadź HTML. Wklej kod w pole HTML. Wix uruchamia osadzenia we własnej ramce, więc jeśli wersja Zalecana nie zmienia rozmiaru, użyj wersji Stała wysokość i ustaw odpowiednią wysokość elementu.

Squarespace. Edytuj stronę, dodaj blok i wybierz Code. Ustaw typ na HTML i wklej kod. Squarespace pozwala na skrypty w płatnych witrynach, więc wersja Zalecana działa; w witrynie w okresie próbnym użyj stałej wysokości, jeśli kod wyświetla się jako tekst.

Webflow. Dodaj element Embed (w sekcji Components) i wklej kod. Webflow pokazuje go w opublikowanej witrynie, a nie w designerze.

Google Sites i inne kreatory, które blokują skrypty. Wybierz Stała wysokość. Dodaj element „Osadź kod” i wklej iframe.

Zwykły HTML. Wklej kod w treści strony w miejscu, w którym ma się pojawić spacer.

Osadź projekt lub całe portfolio

  • Projekt: otwórz projekt w studiu; jego panel Udostępnij ma te same opcje Osadź na swojej stronie. Osadzenie pokazuje okładkę, spacery, galerię i rzuty bez menu Prewalk.
  • Twoje portfolio: na stronie profilu kliknij Udostępnij, a potem Osadź swoje portfolio. Wybierz Układ (Siatka lub Karuzela), Elementy (od 6 do 48), Pokaż (spacery i projekty, tylko spacery, tylko projekty), filtr Kategoria, Tag lub Projekt, Motyw i to, czy pokazywać Nagłówek profilu. Wszystko, co opublikujesz później, samo pojawi się w osadzeniu.

Dopisek „Obsługiwane przez Prewalk”

W planie Darmowym kod zawiera pod osadzeniem mały link „Obsługiwane przez Prewalk”, a odtwarzacz pokazuje plakietkę Prewalk. Od planu Pro wzwyż plakietki nie ma, a osadzenie ma Twoje logo i kolor akcentu z sekcji Ustawienia → Identyfikacja wizualna.

Decyduj, gdzie otwierają się osadzenia

W sekcji Ustawienia → Identyfikacja wizualna:

  • Zezwalaj na osadzanie jest domyślnie włączone. Gdy to wyłączysz, każde osadzenie Twoich prac pokaże zwykłą kartę „Niedostępne”; linki do spacerów nadal działają.
  • Dozwolone strony (od planu Pro wzwyż): wpisz strony internetowe, na których mogą się otwierać Twoje osadzenia, po jednej w wierszu, maksymalnie 20. Pusta lista oznacza: wszędzie. firma.com i www.firma.com to różne adresy, a *.firma.com obejmuje subdomeny.

Wyświetlenia i znacznik na liście Pierwsze kroki

Wczytanie osadzenia nie liczy się jako wyświetlenie. Liczy się pierwsze przeciągnięcie, dotknięcie lub naciśnięcie przycisku w osadzeniu. Na liście Pierwsze kroki w studiu krok „Osadź spacer na swojej stronie” zostaje oznaczony jako wykonany, gdy spacer zostanie wyświetlony w osadzeniu na innej stronie internetowej. Przeglądarka odwiedzającego musi przesłać z wyświetleniem adres strony (referrer), a wyświetlenia na samej stronie prewalk.co się nie liczą.

Częste błędy

  • Wklejanie kodu do zwykłego bloku tekstowego. Kod wyświetla się jako tekst. Użyj bloku HTML, Kod lub Osadź.
  • Pominięcie punktów przejścia powrotnego przed osadzeniem. Odwiedzający utkną na Twojej stronie, a nie w serwisie Prewalk.
  • Pozostawienie motywu Ciemny na białej stronie lub odwrotnie.
  • Osadzenie spaceru dostępnego tylko przez link w przekonaniu, że pozostanie prywatny. Każdy na tej stronie może go obejrzeć.
  • Zmiana nazwy użytkownika. Adresy osadzeń portfolio i publicznych projektów ją zawierają: stary adres działa przez 30 dni, a potem przestaje. Osadzenia spacerów i prywatnych projektów używają identyfikatora i działają dalej.

Dalej

Udostępnij wirtualny spacer: WhatsApp, portale ogłoszeniowe, stopka e-mail i kod QR

Udostępnij: 𝕏 LinkedIn WhatsApp