Czy chcesz utworzyć sekcję członka zespołu z Elementor ?
Dobrze trafiłeś we właściwe miejsce. Dzisiaj pokażemy Ci, jak stworzyć wspaniałą sekcję członków zespołu za pomocą Strona Builder Elementor.
Aby ukończyć ten samouczek, będziesz potrzebować Wersja pro Elementora, ponieważ my użyj niestandardowego kodu CSS co jest możliwe tylko w wersji proElementor. Jeśli jeszcze tego nie zrobiłeś, zaktualizuj go.
Aby zrozumieć, o czym mówimy w tym samouczku, zapraszamy do obejrzenia następującego filmu:
Aby rozpocząć, utwórz stronę i edytuj ją za pomocą Elementora.
Następnie wstaw konstrukcję z 3 kolumnami do tej ostatniej, a następnie do panelu, pod zakładką Treść, ustaw Wysokość na Wysokość minimalna i wybierz Wysokość minimalna VH, a następnie ustaw suwak na 100.
Wybierzmy środkową kolumnę do edycji i przejdźmy do zakładki Zaawansowane. Ustawmy wszystkie wewnętrzne marginesy na 30.
Wstawmy w tej kolumnie widget Sekcja Wewnętrzna, następnie usuńmy jedną z kolumn zawartych w Sekcji Wewnętrznej, następnie w panelu pod zakładką Treść, ustawmy także wysokość na Min. wysokość i suwak na 450px.
NaWyrównanie w pionie wybierać Bas i przelewowy wybierać Maska.
W zakładce Styl Zmień tło na klasyczny i wybierz obraz z biblioteki.
Przeczytaj nasz przewodnik na: Jak stworzyć kartę produktu za pomocą Elementora
Sur Pozycja wybierać Wyższy skoncentrowany, Plik załącznika sur przewijanie, Powtórz sur Niepowtarzane et Rozmiar sur Pokrywa
W granicach zdefiniuj granice sur 12.
Dodajmy efekty cienia. W Shade of box zmodyfikujmy Pionowy sur 22, zamazany sur 40 et Dyfuzor sur -10.
Dodajmy Widżet tytułu w sekcji Wewnętrzne i podać imię i nazwisko naszego członka oraz cenronów widżet.
Czytaj także: Jak zmienić nagłówek przewijania strony za pomocą Elementora
W zakładce Styl, zmodyfikujmy to kolor tekstu i typografia wybierać 22 dla rozmiaru czcionki i 500 dla smar, Transformacja sur Wielkie litery et odstępy między literami sur 1.2
Następnie zduplikujmy widżet tytułowy i zmodyfikuj tytuł drugiego widżetu, a w typografii wybierz 15 dla rozmiaru czcionki i 500 dla szerokości transformacja włączona Wada i odstępy między literami włączone 1.2
Przejdźmy do zakładki zaawansowany i zdefiniuj Górny margines sur -15. Dodajmy widżet Ikony mediów społecznościowych do naszej sekcji Wewnętrzna.
Przejdźmy do zakładki Styl, zmień kolor na Niestandardowy, ustaw przezroczysty kolor podstawowy i ustaw wewnętrzne marginesy na 0.30
W zakładce zaawansowany, Zdefiniuj marginesy Wysoki na -15 i Niski na 20
Następnie wybierz kolumnę Sekcji wewnętrznej, aby ją zmodyfikować, a w zakładce Styl Wybierz rodzaj klasyczny i na kolor chwyćmy! # FFFFFF28.
Czytaj także: Jak przewijać długi obraz portfolio za pomocą Elementora
Następnie wybierz kolumnę Sekcji wewnętrznej, aby ją zmodyfikować, a w zakładce zaawansowany w polu Klasy CSS, chwyćmy informacje o członku
Następnie wybierz Sekcja wewnętrzna następnie w zakładce zaawansowany w polu Niestandardowe CSS, wklej następujący kod:
/ * Efekt szkła CSS * /
selektor {
–Wysokość: 150px;
–Dół: -150px;
przepełnienie: ukryte! ważne;
}
selektor .informacje-czlonkow {
wysokość: var (–wysokość);
pozycja: absolutna;
filtr tła: rozmycie (15px);
dół: 0;
przejście: 5 s rozluźnienie;
}
Po pierwszym kodzie CSS wklej następujący kod:
/ * CSS do ukrycia lub pokazania po najechaniu myszą * /
selektor .informacje-czlonkow {
dół: var (–dół);
}
selektor: najedź na .member-info {
dół: 0 pikseli;
}
Teraz, gdy najedziesz kursorem na obraz, pojawią się informacje o członkach.
Powiel kolumnę 2 razy i usuń pozostałe puste kolumny
Następnie wybierz sekcję wewnętrzną i zmień obraz tła na obraz innego członka zespołu, zmień jego imię i zawód, zrób to samo z drugą kolumną.
Wyświetlaj podgląd swojej pracy na tablecie i telefonie komórkowym, jednocześnie poprawiając marże i nie tylko, aby uzyskać lepsze oglądanie.
I tak możesz stworzyć wspaniałą sekcję Team Members
Pobierz Elementor Pro teraz!
Wnioski
Więc ! To tyle w tym samouczku, który pokazuje, jak utworzyć sekcję członka zespołu. 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.
...
