Chcesz dowiedzieć się, jak stworzyć kartę z efektem portfolio? W tym nowym samouczku pokażemy Ci, jak to zrobić Elementor.
Jeśli nie masz pojęcia, o czym chcemy dzisiaj porozmawiać, zapraszamy do obejrzenia poniższego filmu:
Wróćmy do tego, dlaczego tu jesteśmy.
Aby ukończyć ten samouczek, będziesz potrzebować wersja Pro Elementora, ponieważ będziemy używać niestandardowego kodu CSS, który jest obsługiwany tylko w tej wersjiElementor.
Czytaj także: Jak wyświetlić tekst nad obrazem za pomocą Elementora
Stwórzmy nową sekcję o strukturze 3 kolumnowej, a następnie w panelu zdefiniujmy HAUTEUR sur Minimalna wysokość, a następnie Minimalna wysokość kliknijmy VH i ustaw suwak na 100.
Wybierzmy środkową kolumnę i upuśćmy w tej kolumnie Widżet sekcji wewnętrznej. Widżet Sekcja wewnętrzna jest domyślnie skonfigurowany z 2 kolumnami. Pod dwiema kolumnami upuśćmy widżet Tytuł z tytułem restauracja, wybierać H4 dla tagu HTML i Centrum do wyrównania.
W zakładce zaawansowany widżetu Tytuł, Wejdźmy 30 dla Górny margines
Wybierzmy jeszcze raz naszą sekcję wewnętrzną. W panelu zmodyfikujmy jego HAUTEUR sur Minimalna wysokość i Minimalna wysokość ustawmy kursor na 380. Następnie usuńmy prawą lub lewą kolumnę sekcji Wewnętrzne
Zostawmy to Widżet obrazu w sekcji wewnętrznej i wstaw obraz z naszej biblioteki. wybierzmy Cały dla Rozmiar obrazu et Centrum dla Wyrównanie.
NB: Jeśli chcesz mieć kompletne strony takie jak nasza, zapraszamy do przechwytywania stron za pomocą rozszerzenia Chrome GoFullPage, ale możesz również użyć innego.
Odkryj również: Jak stworzyć galerię obrazów za pomocą Elementora
Następnie w Tab Styl, Kliknij PX de Szerokość, ustawmy suwak na 260 i promienie graniczne sur 10
Następnie zmodyfikujmy Box Shadow, zmieniając rozmycie na 40 i rozproszenie na -10.
W zakładce Zaawansowane, w sekcji pozycjonowanie, wybierać absolutny dla Pozycja, Orientacja pozioma sur NiezręcznyThe Décalage sur 0, L "Orientacja pionowa sur Bas.
Zduplikujmy nasz widżet obrazu dwa razy. Nieuchronnie wszystkie zostaną nałożone na siebie. Wywołajmy Nawigatora, abyśmy mogli uzyskać dostęp do innych widżetów ukrytych przez pierwszy.
Zamieńmy obraz drugiego widżetu i w jego zakładce zaawansowany, zmodyfikujmy je dolne marginesy et Niezręczny chwytając 30 dla każdego. Zobaczysz teraz niewielkie opóźnienie,
Zrób to samo dla trzeciego widżetu obrazu, ale zastosuj marginesy 60 dla marginesów dolnego i lewego. Powinieneś teraz mieć przegląd wszystkich 3 widżetów graficznych.
Wybierzmy nasz widżet sekcji wewnętrznej, przejdź do jego zakładki zaawansowany oraz w dziale Niestandardowe CSS, skopiuj i wklej następujący fragment kodu:
selector .elementor-widget-image{
transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
transform: scale(.65);
}
selector:hover .front-img{
transform-origin: center left;
}
selector:hover .mid-img{
transform-origin: center top;
}
selector:hover .last-img{
transform-origin: bottom right;
}(Jeśli nie masz tej sekcji, to nie masz wersji Pro, jeśli chcesz kontynuować, musisz zaktualizować swoją wersję)
Teraz, jeśli najedziesz kursorem na naszą mapę, zobaczysz animację powiększenia
Wybierzmy nasz pierwszy widżet obrazu (najniższy) i w jego zakładce zaawansowany, chwyćmy front-obraz dla Klasy CSS.
W przypadku drugiego widżetu obrazu wpiszmy w połowie zdjęcia dla klas CSS.
W przypadku trzeciego widżetu obrazu wpiszmy ostatni obraz dla klas CSS.
Zobacz także: Jak stworzyć galerię obrazów z zakładkami za pomocą Elementora
Najedźmy teraz kursorem na naszą kolumnę i zobaczymy wspaniałą animację treść naszej Sekcji Wewnętrznej.
Wyświetlmy naszą stronę w trybie tabletu. Zobaczymy, że obrazy nie będą wyświetlane poprawnie.
Wybierz pierwszy widżet obrazu, na jego karcie Styl, zmodyfikujmy szerokość, klikając PC, a następnie wprowadzając 150 jako szerokość. Zróbmy to samo z pozostałymi 2 widżetami graficznymi.
Wybierzmy naszą sekcję wewnętrzną w jej sekcji Treść, zmodyfikujmy Minimalna wysokość sur 225.
Wyświetlmy też naszą stronę w trybie Smartfona, a priori nie stanowi to żadnego problemu. Jeśli jednak coś przedstawia, wybierzmy naszą sekcję wewnętrzną w jej sekcji Treść, zmodyfikujmy minimalną wysokość.
Teraz zduplikujmy naszą środkową kolumnę 2 razy, a następnie usuńmy 2 pozostałe puste kolumny.
Zmodyfikujmy tytuły tych kolumn, a następnie zmieńmy obrazy
Będziesz musiał mieć wspaniałą sekcję, której oto wyniki:
Proszę bardzo, właśnie wykonałeś to zadanie z łatwością.
Pobierz Elementor Pro teraz!
Wnioski
Tu jest ! To tyle, jeśli chodzi o ten artykuł, który pokazuje, jak stworzyć kartę z efektem portfolio. 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.
...
