Apakah Anda ingin membuat bagian anggota tim dengan Elementor ?

Nah Anda telah datang ke tempat yang tepat. Hari ini kami akan menunjukkan cara membuat bagian anggota tim yang luar biasa dengan Halaman pembangun Elementor.

Untuk menyelesaikan tutorial ini, Anda memerlukan Versi pro elemen, karena kita gunakan kode CSS khusus yang hanya mungkin dilakukan dengan versi proElementor. Jika Anda belum melakukannya, perbarui.

Dan untuk memahami apa yang kita bicarakan dalam tutorial ini, kami mengundang Anda untuk menonton video berikut:

Untuk memulai, buat halaman dan edit dengan Elementor.

Kemudian masukkan struktur dengan 3 kolom di kolom terakhir, lalu di panel, di bawah tab Isi, atur Tinggi ke Tinggi Min dan pilih Tinggi Min VH lalu atur penggeser ke 100.

Mari kita pilih kolom tengah untuk mengeditnya dan pergi ke tab Advanced. Mari kita atur semua margin internal menjadi 30.

Mari kita sisipkan widget Inner Section pada kolom ini, lalu hapus salah satu kolom yang terdapat pada Inner Section, lalu pada panel di bawah tab Isi, mari kita atur juga tingginya menjadi Min Height dan penggesernya menjadi 450px.

buat bagian anggota tim dengan Elementor

diPenjajaran Vertikal memilih Bas dan melimpah memilih Masker.

Di tab Gaya Ubah Latar Belakang menjadi klasik dan pilih gambar dari perpustakaan Anda.

Baca panduan kami di: Cara membuat kartu produk dengan Elementor

di Posisi Sélectionnez Unggul Terpusat, File Lampiran di bergulir, Katakan lagi di Tidak berulang et Ukuran di Menutupi

buat bagian anggota tim dengan Elementor

Di perbatasan, tentukan perbatasan di 12.

Mari tambahkan efek bayangan. Dalam naungan kotak mari kita modifikasi Vertikal di 22, Flou di 40 et Diffuser di -10.

Ayo tambahkan Widget judul di bagian Internal dan beri nama untuk anggota kami dan centron widgetnya.

Baca juga: Bagaimana mengubah tajuk pada pengguliran halaman dengan Elementor

Di tab Gaya, Mari kita modifikasi warna teks dan tipografi memilih 22 untuk ukuran font dan 500 untuk gemuk, Transformasi di Huruf besar et spasi huruf di 1.2

buat bagian anggota tim dengan Elementor

Lalu mari kita gandakan widget judul dan ubah judul widget kedua dan dalam tipografi pilih 15 untuk ukuran font dan 500 untuk lebar, transformasi pada Défaut dan spasi huruf pada 1.2

buat bagian anggota tim dengan Elementor

Ayo pergi ke tab maju dan tentukan Batas atas di -15. Mari tambahkan widget Ikon Media Sosial ke bagian Batin kita.

buat bagian anggota tim dengan Elementor

Ayo pergi ke tab Gaya, ubah warnanya menjadi Kustom, buat warna primer transparan dan atur margin bagian dalam menjadi 0.30

Di tab maju, Tentukan margin Tinggi pada -15 dan Rendah pada 20

buat bagian anggota tim dengan Elementor

Kemudian pilih kolom Bagian Dalam untuk mengubahnya dan di tab Gaya Pilih tipe klasik dan pada warna mari kita rebut #FFFFFF28.

Baca juga: Cara menggulir gambar panjang portofolio dengan Elementor

Kemudian pilih kolom Bagian Dalam untuk mengubahnya dan di tab maju di lapangan kelas CSS, ayo ambil info anggota

buat bagian anggota tim dengan Elementor

Kemudian pilih Bagian dalam lalu di tab maju di lapangan Kustom CSS, rekatkan kode berikut:

/ * Efek kaca CSS * /

pemilih {

    –Tinggi: 150px;

    –Bawah: -150px;

    overflow: tersembunyi!penting;

}

pemilih .member-info {

    tinggi: var (–tinggi);

    position: absolute;

    latar belakang-filter: blur (15px);

    bawah: 0;

    transisi: .5s ease-in-out;

}

buat bagian anggota tim dengan Elementor

Setelah kode CSS pertama, rekatkan yang berikut ini:

/ * CSS untuk disembunyikan atau ditampilkan di hover * /

pemilih .member-info {

    bawah: var (–bawah);

}

pemilih: arahkan .member-info {

    bawah: 0px;

}

Sekarang ketika Anda mengarahkan kursor ke gambar, informasi anggota muncul.

Gandakan kolom 2 kali dan hapus kolom kosong lainnya

Kemudian pilih Bagian Dalam dan ubah gambar latar belakang menjadi gambar anggota tim lain, ubah nama dan profesinya, lakukan hal yang sama dengan kolom lainnya.

Pratinjau pekerjaan Anda di tablet dan seluler sambil meningkatkan margin dan lainnya untuk tampilan yang lebih baik.

Dan begitulah cara Anda dapat membuat bagian Anggota Tim yang luar biasa

Dapatkan Elementor Pro Sekarang!

Kesimpulan

Jadi ! Itu saja untuk tutorial ini yang menunjukkan cara membuat bagian anggota tim. Jika Anda memiliki masalah tentang cara menuju ke sana, beri tahu kami di komentar.

Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.

Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.

...