Czy chcesz utworzyć pływający przycisk z włączonym indeksem Z? Elementor ?

Jesteśmy pewni, że znasz przycisk, który pojawia się przed całą zawartością ekranu i zwykle ma okrągły kształt i ikonę pośrodku. Cóż, to pływający przycisk akcji.

Pływający przycisk akcji może wyzwolić akcję lub wysłać cię gdzieś w rejs. Takie jak wyzwalacze wiadomości e-mail, sieci społecznościowych, orientacja odwiedzający subskrybować kanał i wiele innych.

Dans Elementor, istnieją dwie metody tworzenia pływającego przycisku akcji, są one następujące:

  • Poprzez ustawienie indeksu Z
  • Tworząc wyskakujące okienko -Popup-

W tym samouczku pokażemy tylko, jak utworzyć pływający przycisk akcji, ustawiając indeks Z. Aby to się stało, użyjemy wersji pro.

Ale najpierw dowiedz się: Jak zainstalować Elementora na WordPressie

Jak utworzyć pływający przycisk akcji w Elementorze

Możesz skorzystać z darmowej wersjiElementor aby za pomocą tej metody utworzyć pływający przycisk akcji. Musisz jednak wkleić zaprojektowany przycisk na każdej stronie, na której chcesz, aby był wyświetlany na Twojej stronie strona internetowa.

Elementor Pro, możesz również uzyskać dostęp do funkcji niestandardowe CSS, którego użyjemy w tym samouczku.

Przejdź do edytora Elementora; możesz modyfikować istniejące treści (strony, artykuły itp.) lub tworzyć nowe. W tym samouczku zmodyfikujemy stronę.

Najpierw utwórz nową sekcję z pojedynczą kolumną. Wybierz widżet przycisku i przeciągnij go i upuść w obszarze edycji z panelu widżetów. Następnie zmień przycisk teksty Link. 

W tym samouczku użyjemy przycisku jako wyzwalacza do naciśnięcia odwiedzający poruszać się po Witryna internetowa Elementor. Następnie na opcję wyrównanie, ustaw go na droite et, Na koniec zmień taille przycisku Włącz Bardzo duży.

utwórz pływający przycisk z indeksem Z

Jak widać na powyższym GIF-ie, ten przycisk jest nieruchomy w sekcji. Następnie sprawimy, że będzie się poruszał podczas przewijania, utrzymując go w tej samej pozycji.

Przejdź do zakładki zaawansowany. W parametrze Układ, ustaw szerokość na linii (samochód), zdefiniuj pozycja na Stałym, definiować orientacja pozioma na droite i dostosuj to Décalage jak chcesz.

utwórz pływający przycisk z indeksem Z

Następnie zdefiniujemy podstawy tej metody. Na polu Z-Index, wprowadź liczbę 9999 sprawi, że przycisk będzie zawsze z przodu (pływający).

utwórz pływający przycisk z indeksem Z

Teraz nadszedł czas, aby obrócić pływający przycisk akcji. Zawsze pod zakładką zaawansowany, Uzyskać dostęp do zajęcia css z bloku Układ, następnie napisz rotate wewnątrz.

Zobacz także: Elementor: Przedstawiamy najlepszy kreator stron WordPress

Potem idź do bloku Niestandardowe CSS , a następnie wklej w to pole następujący kod:

.rotate.rotate
{transform: rotate(90deg);}

Widać, że pokrętło właśnie się obróciło, ale między bokiem ekranu jest dziwna przerwa. Więc naprawmy to, dostosowując Décalage o -92

utwórz pływający przycisk z indeksem Z

Na koniec zrobimy ostatni mały dotyk dla tego pływającego przycisku akcji. Uzyskaj dostęp do bloku Transformator, wybierz to PRZEGLĄD, dostęp do opcji przesunięcie i ustaw każdą opcję na 7.

utwórz pływający przycisk z indeksem Z

Istnieje kilka opcji osiągnięcia określonej rzeczy w Elementorze. Jeśli chodzi o pływający przycisk, możesz skorzystać z dwóch opcji. Tutaj omówiliśmy tylko jedną metodę, drugą metodą będzie kolejny samouczek.

Czytaj także: Elementor: Jak przeprowadzić migrację witryny WordPress

Jeśli chcesz mieć więcej opcji stylizacji, lepszą alternatywą będzie utworzenie pływającego przycisku akcji za pomocą kreatora Popup, ponieważ będziesz mieć opcje dostosowywania przycisku, a także zachowania, takie jak czas zamykania przycisku, czas trwania, animacja wejścia lub wyjścia itp. .

Właśnie z łatwością wykonałeś to zadanie. Wystarczy podejrzeć działanie tabletu i smartfona, próbując zmienić marginesy, aby dopasować je do każdego urządzenia.

Pobierz Elementor Pro teraz!

Wnioski

Więc ! To wszystko w tym artykule, który pokazuje, jak zastosować efekt powiększenia na karcie profilu. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać, daj nam znać w ciągu commentaires.

Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...