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.

Sekcja 3 kolumn

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.

Dodaj widżet sekcji wewnętrznej

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.

zastosuj Zoom na mapie za pomocą Elementora

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.

zastosuj Zoom na mapie za pomocą Elementora

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.

zastosuj Zoom na mapie za pomocą Elementora

Powielmy tę kolumnę 2 razy i usuńmy pozostałe 2 kolumny.

zastosuj Zoom na mapie za pomocą Elementora

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.

...