Bagaimana Mendesain Bagian Pembicara Tamu dengan CTA yang Efektif di Divi

Baik Anda memiliki podcast atau mengadakan WordCamp (atau acara pembicara apa pun), selalu ada baiknya untuk memiliki bagian pembicara tamu untuk situs web Anda. Seperti testimonial, menampilkan pembicara tamu adalah cara yang efektif untuk mempromosikan nilai dan membangun kredibilitas dengan audiens Anda. Bagian pembicara tamu juga merupakan tempat kunci untuk menarik beberapa kandidat baru untuk acara atau episode Anda berikutnya. Tutorial ini menunjukkan cara mendesain bagian pembicara tamu yang tidak hanya menampilkan pembicara dengan cara yang elegan, tetapi juga mendorong pembicara baru untuk melamar dengan ajakan bertindak yang efektif.

Namun sebelum kita masuk, berikut adalah sekilas desain akhir.

Sneak Peek

Dan ini adalah bonus efek hover yang akan saya tunjukkan juga.

Mari kita mulai!

Berlangganan Saluran Youtube Kami

Membangun Struktur Dasar dan Konten

Jika Anda belum melakukannya, buat halaman baru dan gunakan Divi Builder untuk membangun di bagian depan.

Itu, tambahkan bagian baru dengan satu baris kolom.

Tambahkan modul teks ke baris dengan Konten berikut:

<h2>Guest Speaker</h2>

Selanjutnya, tambahkan modul pembagi langsung di bawah modul teks.

Sekarang kita akan menambahkan baris baru dengan struktur empat kolom untuk menampung pembicara tamu kita.

Di kolom pertama baris, tambahkan modul orang.

Perbarui konten modul Person sebagai berikut:

Nama: [kosong]
URL Profil Facebook: [tambahkan “#” untuk saat ini]
URL Profil Twitter: [tambahkan “#” untuk saat ini]
URL Profil LinkedIn: [tambahkan "#" untuk saat ini]

Untuk deskripsi, tambahkan berikut ini:

<h4>James <strong>Smith</strong></h4>
<hr style="width: 90px; float: left;">

Catatan: tag hr menghasilkan garis pembagi yang memiliki beberapa gaya sebaris untuk dibuat dengan lebar 90px dan melayang ke kiri. Tag kuat yang melilit nama belakang membuatnya berani untuk elemen desain yang unik.

Sekarang setelah Anda memiliki konten, simpan pengaturan modul orang.

Salin modul orang yang baru saja Anda buat dan tempel ke setiap kolom yang tersisa sehingga Anda memiliki modul orang yang sama di masing-masing dari empat kolom. Untuk menyalin dan menempel Anda dapat menggunakan opsi menu klik kanan atau tombol pintas cmd+c cmd+v (mac) atau ctrl+c ctrl+v (win).

Buka pengaturan modul orang di kolom 4 dan perbarui konten sehingga hanya berisi yang berikut:

Nama: "Ini Bisa Jadi Anda!"
Deskripsi: “Gunakan tombol di bawah ini untuk melamar berbicara di acara kami.”

Simpan pengaturan Anda.

Selanjutnya, tambahkan modul tombol langsung di bawah modul orang di kolom 4 dan perbarui konten teks tombol menjadi "Terapkan Sekarang". Dan simpan pengaturan Anda.

Kembali ke modul tiga orang pertama di kolom 1-3 dan tambahkan gambar untuk setiap potret pembicara tamu. Pastikan ukurannya sama dengan dimensi tinggi dan lebar yang sama dan cukup besar untuk memperhitungkan lebar kolom pada semua ukuran browser (idealnya 600 piksel kali 600 piksel).

Seperti inilah tampilan tata letak Bicara Tamu Anda saat ini.

Menata Tata Letak Pembicara Tamu

Menata Bagian

Buka pengaturan bagian dan perbarui yang berikut ini:

Gambar Latar Belakang: [Saya menggunakan salah satu dari Tata Letak Agensi kami]

Warna Kiri Gradien Latar Belakang: #293039
Warna Kanan Gradien Latar Belakang: rgba(41,48,57,0.89)
Gaya Pembagi Atas: lihat tangkapan layar
Warna Pembagi Atas: #293039
Tinggi Pembagi Atas: 30vw

Mengubah Lebar Baris

Karena kita ingin kedua baris kita memiliki lebar yang sama, gunakan multiselect untuk memilih kedua baris dan klik salah satu ikon pengaturan untuk membuka pengaturan elemen.

Kemudian perbarui yang berikut ini:

Lebar Kustom: 80%

Sekarang kedua baris Anda akan memiliki lebar khusus yang sama.

Menata Headline

Buka pengaturan modul teks yang berisi judul bagian Anda "Pembicara Tamu" dan perbarui yang berikut:

Judul 2 Font: Montserrat
Judul 2 Berat Font: Tebal
Judul 2 Gaya Font: TT
heading 2 Perataan Teks: kanan
Judul 2 Warna Teks: #74bf46
Judul 2 Ukuran Teks: 70px (desktop), 50px (smartphone)

Simpan Pengaturan.

Sekarang buka pengaturan Divider dan perbarui yang berikut:

Warna: #ffffff
Tinggi: 0px
Lebar: 90px
Penyelarasan Modul: kanan

Menata Modul Orang

Karena kami ingin memberikan gaya awal yang sama untuk semua modul person kami, gunakan multiselect untuk memilih masing-masing dan kemudian klik ikon pengaturan salah satu modul untuk menerapkan modal pengaturan elemen.

Perbarui Pengaturan elemen berikut:

Warna Ikon: #74bf46
Judul Font: Montserrat
Judul Font Berat: Ringan
Warna Teks Judul: #ffffff
Ukuran Teks Judul: 20px
Font Tubuh: Montserrat
Warna Teks Tubuh: #ffffff
Spasi Huruf Isi: 2px
Tinggi Garis Tubuh: 1.8em

Menata Modul Orang CTA

Kami menggunakan modul orang ini sebagai ajakan untuk bertindak yang menarik pembicara tamu baru untuk melamar keterlibatan berbicara. Jadi, kita dapat membiarkan gambar default (siluet) aktif sebagai cara kreatif untuk menampilkan tempat kosong. Tetapi ada beberapa penyesuaian gaya yang perlu kita tambahkan untuk melengkapi desain. Buka pengaturan modul orang di kolom 4 dan perbarui yang berikut ini.

Lebar Batas Gambar: 18px
Warna Batas Gambar: #d2d2d2
Opasitas Gambar: 50%

Judul Font Berat: Tebal
Judul Baris Tinggi: 1.5em

Sekarang yang tersisa untuk dilakukan adalah menata tombol kita. Buka pengaturan modul tombol dan perbarui yang berikut:

Warna Teks Tombol: #293039
Warna Latar Tombol: #74bf46
Radius Perbatasan Tombol: 50px
Font Tombol: Montserrat
Berat Huruf: Tebal

Sekarang mari kita lihat hasil akhirnya.

Kiat Bonus: Efek Arahkan Zoom Gambar

Jangan lupa tentang semua opsi hover bawaan yang tersedia di Divi. Bahkan, Anda dapat melihat beberapa tutorial inspiratif tentang efek hover ini di blog kami. Tetapi untuk desain ini, saya pikir saya akan berpikir sedikit di luar kotak dan memberi Anda beberapa potongan CSS yang akan menyebabkan gambar orang Anda sedikit diperbesar (atau diskala) saat dilayangkan.

Jika Anda mencari efek hover yang halus untuk membedakan modul person Anda, berikut adalah cara melakukannya.

Gunakan multiselect untuk memilih modul orang di kolom 1, 2 dan 3. Buka pengaturan elemen. Di bawah tab lanjutan masukkan CSS berikut di bawah Elemen Utama :

overflow: hidden;

Kode ini akan menjaga gambar yang diperluas agar tidak meluas di luar wadah modul.

Selanjutnya tambahkan CSS berikut di bawah Gambar Anggota :

transition: all 0.3s; 

Ini menambahkan transisi yang mulus saat ukuran gambar diskalakan.

Untuk menambahkan css pada hover, klik ikon hover dan pilih tab hover dan masukkan CSS berikut:

transform: scale(1.1) translateY(-4.5%);

Ini menskalakan (atau memperluas) gambar ke ukuran yang sedikit lebih besar dan menaikkannya sedikit.

Sekarang gambar akan memiliki efek zoom halus pada hover.

Pikiran Akhir

Yah, saya harap Anda menikmati tutorial ini atau setidaknya meninggalkan beberapa tips desain yang berguna. Tata letak bagian pembicara tamu ini dapat digunakan dalam berbagai cara. Aplikasi sempurna lainnya adalah untuk halaman karyawan untuk secara bersamaan mencantumkan karyawan saat ini dan mendorong orang lain untuk melamar suatu posisi. Jangan ragu untuk berbagi beberapa ide dengan kami.

Saya berharap untuk mendengar dari Anda di komentar di bawah.

Bersulang!