Czy chcesz dowiedzieć się, jak powiększyć kartę profilu za pomocą wtyczki do tworzenia stron? Elementor ?
W tym nowym samouczku Elementor, pokażemy Ci, jak zastosować efekt powiększenia na karcie profilu, pokazując nazwę profilu oraz jego ikony sieci społecznościowych.
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.
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.
Dodajmy widżet Sekcja wewnętrzna w środkowej kolumnie. Widżet sekcji wewnętrznej jest domyślnie skonfigurowany z 2 kolumnami, usuńmy jedną z nich. Skonfigurujmy resztę w panelu, modyfikując jego HAUTEUR sur Minimalna wysokość i Minimalna wysokość ustawmy kursor na 400.
W zakładce Styl, zmodyfikujmy Nakładka w tle, Kliknij klasyczny na typie tła i wybierz obraz z biblioteki, a w ustawieniach obrazu wybierz Wyśrodkowany Wyśrodkowany na pozycji Pokrywa na rozmiar. nieprzezroczystość na 1 i
W sekcji granice kliknij % i wejdź 4 dla wszystkich promieni krawężnika.
W liczbie pól ustaw suwak na 0 sur PoziomyW 70 sur PionowyW 63 sur zamazanyW -60 sur audycja. Powinieneś zobaczyć piękny efekt cienia pod twoim obrazem.
W sekcja wewnętrzna przesuń Widżet tytułu. Jako tytuł wpisz Steve Jobs, w zakładce Styl wybierz kolor biały # FFFFFF. W typografii wybierz Rozmiar 20.
Następnie wybierz kolumnę widżetu sekcji wewnętrznej i na karcie Styl wybierz typ obramowania, klikając Jednolita, wszystkie szerokości na 1 i kolory na #FFFFFF.
W zakładce zaawansowany, zmień marginesy na 15 i marże wewnętrzne włączone 20.
Teraz wstaw ikony mediów społecznościowych, przeciągając widżet Ikony mediów społecznościowych do sekcji Wewnętrzne.
Edytuj linki do mediów społecznościowych w zakładce Treść klikając opcję Każda sieć społecznościowa. Jeśli chcesz dodać inne sieci społecznościowe, kliknij przycisk Dodajer element?
W polu Ikona kliknij Biblioteka ikon i na pasku wyszukiwania wpisz pierwsze litery swojej sieci społecznościowej, gdy tylko ją znajdziesz, wybierz ją i kliknij przycisk Wstaw.
Następnie przejdź do zakładki Styl, w sekcji ikona, zmień kolor na Personnalisé.
Przeczytaj także nasz przewodnik; Jak dodać paginację za pomocą Elementora
Sur Głównym kolor, ustaw przezroczystość na minimum.
Sur Dodatkowy kolor, wybierz kolor # FFFFFF. W polu Rozmiar wpisz 20, Margines wewnętrzny włączony 0.4.
Teraz kliknij na zakładkę zaawansowany, oraz w dziale pozycjonowanieKliknij Personnalisé, na szerokość niestandardowa, wchodzić 0.
Odkryj też Jak korzystać z próbnika kolorów z Elementor
Sur Pozycja, wybierz absolutny, na zmiany 15Na Orientacja pionowa choisir Basi przesunięcie sur 20.
Wybierz ponownie Sekcja wewnętrzna i w zakładce zaawansowany, w sekcji Niestandardowe CSS (Jeśli nie masz tej sekcji, szybko uaktualnij do wersji pro Elementora, aby kontynuować)
Skopiuj i wklej następujący kod do tej sekcji:
/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
overflow: hidden !important;
}
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
-webkit-transform-origin: left;
transform-origin: left;
}
selector:hover .elementor-background-overlay{
-webkit-transform: scale(2);
transform: scale(2);
}
Z góry nie powinieneś widzieć zbyt wiele, ale jeśli najedziesz kursorem na obraz, zobaczysz powiększenie zastosowane do obrazu.
Teraz skopiuj i wklej następujący kod po poprzednim kodzie, aby pokazać lub ukryć niektóre elementy kolumny:
/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.75s !important;
transition: all 0.75s !important;
}
selector:hover .elementor-column{
opacity: 1;
}
Teraz, gdy tylko najedziesz na obraz, powiększenie zostanie zastosowane do obrazu i pojawią się nazwy i ikony sieci społecznościowych.
Powielmy tę kolumnę 2 razy i usuńmy pozostałe 2 kolumny.
Zmień obraz tła sekcji wewnętrznych, a także nazwę i linki sieci społecznościowych.
Proszę bardzo, właśnie wykonałeś to zadanie z łatwością. 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.
...