Czy kiedykolwiek chciałeś zaprezentować stwórz kartę produktu z? Elementor ?
Właśnie to pokażemy w tym samouczku. Aby uzyskać dość dokładne wyobrażenie o tym, o czym dzisiaj będziemy rozmawiać, zapraszamy do obejrzenia poniższego filmu:
Ten samouczek dotyczy prezentowania produktów, które są butami, poprzez podkreślenie ich rozmiarów, kolorów i przycisku kupna każdego z nich. Gdy najedziesz kursorem na każdą z kart, pojawi się ta informacja. Oto krótkie podsumowanie tego, co będziemy robić.
Aby śledzić ten samouczek, zapraszamy do znalezienia zdjęć butów i posiadania wersja Pro Elementora. Jeśli jeszcze go nie masz, kliknij ten link, aby go pobrać.
Wróćmy jednak do tego, po co tu jesteśmy.
Stwórzmy stronę i zmodyfikujmy ją za pomocą Elementor.
W tym przypadku wybierzmy strukturę z 3 kolumnami. Załatwmy to hauteur sur minimalna wysokość , minimalną wysokość na VH i ustaw kursor na 100.
Na karcie Styl wybierz kolor tła, aby #130640
W środkowej kolumnie wstaw a Widżet obrazu wybierając obraz buta z biblioteki.
Przejdź do zakładki Styl i we właściwości obrazu ustaw szerokość na 80
Następnie przeciągnij Widżet tytułu i wpisz tytuł buty Nike - To jest przykład, może to być zupełnie inna marka -
Czytaj także: Jak zoptymalizować układ witryny za pomocą Elementora
Ustaw znacznik HTML na H3 i wyśrodkuj wyrównanie
Przejdź do zakładki Styl i zmień kolor tekstu na biały
Zmień też typografię
Następnie przeciągnij Widżet sekcji wewnętrznej poniżej Widżet tytułu które wstawiłeś powyżej.
Domyślnie ten widżet oferuje 2 kolumny, usuń jedną z nich. W tym Widżet sekcji wewnętrznej, Wstaw a Widżet tytułu.
Podaj to jako tytuł Skaleczenie : i ustaw znacznik HTML na Przęsło.
Na karcie Styl zmień kolor tytułu, rozmiar na 15 i tłuszcz na 300
Na karcie Zaawansowane ustaw tylko prawy margines na 5 i we właściwości pozycjonowanie wybierać Wbudowany (automatyczny).
Dodaj w tej samej sekcji wewnętrznej widżet przycisku z tekstem 8 i odstępem między ikonami równym 0.
Czytaj także: Jak przewijać długi obraz portfolio za pomocą Elementora
Na karcie Styl zmień odpowiednio kolor tekstu i kolor tła przycisku na czarno-biały, aw polu Wewnętrznym marginesie wprowadź odpowiednio 6-10-6-10 dla marginesów Wewnętrzny górny-prawy-dolny-lewy.
Na karcie Zaawansowane ustaw tylko lewy margines na 5, a we właściwości Pozycjonowanie wybierz Wbudowany (Auto).
Powiel ten przycisk 3 razy i zmień tekst 3 ostatnich przycisków na 9,10,11 - możesz to zrobić również za pomocą liter S, M, L, XL, XXL-
Kliknij edytuj sekcję i ustaw Wyrównanie poziome na Środek
Następnie zduplikuj tę sekcję wewnętrzną -Sekcja wewnętrzna- i zmodyfikuj rozmiar według koloru, usuń 3 przyciski, a na tym, który pozostanie, usuń tekst przycisku.
W zakładce Treść przycisku, wybierz ikonę Koła z biblioteki ikon, kliknij Wstaw, aby dodać ją do przycisku.
W zakładce Styl nadaj typografii rozmiar 24 i podlinkuj marginesy wewnętrzne i wpisz 0. W kolorze tła ustaw przezroczystość na min i wtedy możesz zmienić kolor tekstu np. na niebieski.
Następnie zduplikuj ten przycisk 3 razy i zmień kolory pozostałych dwóch na żółty i czerwony. Następnie kliknij sekcję wewnętrzną, aby ją edytować, a na karcie Zaawansowane ustaw marginesy Górny i Dolny na -5 i 10.
Teraz dodamy widżet przycisku poniżej drugiego widżetu sekcji wewnętrznej, wprowadź jako tekst Kup Teraz i Wyrównanie do środka. Na karcie Styl ustaw przycisk na biały, a tekst przycisku na czarny, a następnie ustaw wszystkie promienie obramowania na 20.
Wybierz główną kolumnę, nad którą pracowaliśmy i ustaw wyrównanie Pionowy sur Środowisko, na karcie Styl wybierz typ tła jako Zdegradowany i jako typ wybierz Radialny następnie na głównym kolorze ustaw przezroczystość i lokalizację na 94. Dla drugiego koloru ustaw lokalizację na 77 a promień krawędzi powyżej 10.
Na karcie Zaawansowane ustaw marginesy na 0-35-0-35, a marginesy wewnętrzne na 50-20-50-20.
Następnie możesz ukryć panel, aby zobaczyć, jak wygląda Twoja praca. Zobaczysz, że Twoja karta jest bardzo ładna, ale ożywimy ją, animując niektóre sekcje. W tym celu zamierzamy animować Rozmiar, Kolor i przycisk Kup.
Zobacz także: Jak zmienić nagłówek przewijania strony w Elementorze
Najpierw przejdźmy do pierwszej sekcji wewnętrznej, która wyświetla rozmiar produktu, a na karcie Zaawansowane zdefiniuj Fade In Up jako efekt ruchu — włączona animacja wejścia i opóźnienie animacji 300.
Zróbmy to samo z wewnętrzną sekcją, która wyświetla kolory, ale z opóźnieniem animacji 800. Dla przycisku kup jego opóźnienie wyniesie 1000
Teraz przypiszemy klasę ukryj się najpierw Sekcja wewnętrzna i przycisk Kup. Wybierz pierwszą sekcję wewnętrzną, w zakładce Zaawansowane i we właściwości Zaawansowane wpisz ukryj-najpierw w polu Klasy CSS. Zrób to samo dla drugiej sekcji wewnętrznej i przycisku kup.
Dlatego dodamy kod CSS, który ożywi całą kolumnę. Skopiuj następujący kod:
selektor {
wysokość: 400px;
wyświetlacz: flex;
}
/ * CSS dla Pokaż / Ukryj * /
selektor .ukryj-najpierw {
display: none;
}
selektor: najedź .ukryj-najpierw {
display: block;
}
/ * Transformacja obrazu * /
obraz selektora {
przejście: łatwość 5s;
}
selektor: najedź na obraz {
transform: przetłumacz (-20px, -40px) obróć (-25deg) skala (1.4);
}
/ * Przegląd mobilny * /
@media (maksymalna szerokość: 767px) {
selektor: najedź na obraz {
transformacja: przetłumacz (-20px, 0px) obróć (-10deg) skala (1);
}
selektor {
margines: 50px 10px;
}
}
Wybierz kolumnę, aby ją zmodyfikować i przejdź do zakładki Zaawansowane i w polu Niestandardowy CSS wklej ten kod.
Uwaga: powinieneś wiedzieć, że ta opcja jest dostępna tylko w przypadku wersji ProElementor.
Jeśli to zrobisz, twoja mapa będzie animowana po najechaniu myszą, domyślnie ukrywając rozmiary, kolory i przycisk kup.
Jeśli chodzi o wyjaśnienie kodu, część komentarza zawiera przegląd. Ale modyfikując wartości, zrozumiesz, do czego służy każda instrukcja.
Zobacz także: Jak dodać dwa przyciski obok siebie w tej samej kolumnie? z Elementorem
Jeśli wszystko działa normalnie, zduplikuj tę kolumnę dwukrotnie i usuń pozostałe puste kolumny.
Wszystko, co musisz zrobić, to zastąpić obrazy i tytuły innych bloków i na koniec wyświetlić podgląd swojej pracy.
Właśnie stworzyłeś piękną kartę produktu.
Pobierz Elementor Pro teraz!
Wnioski
Więc ! To tyle w tym samouczku, który pokazuje, jak stworzyć kartę produktu za pomocą Elementora. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać, daj nam znać w 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.
...
