Cara Membuat Modul Orang dengan Bio di Klik

Diterbitkan: 2017-08-16

Dalam posting ini, kami akan menunjukkan cara membuat modul orang dengan bio di klik. Segera setelah Anda mengklik modul orang lain di baris yang sama, teks dalam bio akan berubah. Kapan saja, Anda dapat menutup bio dengan mengklik modul orang lagi.

Anda dapat menggunakan ini untuk, misalnya, menampilkan beberapa informasi tambahan tentang karyawan Anda di situs web perusahaan Anda. Konsep ini membantu Anda melakukan dua hal: berinteraksi dengan pengunjung Anda dan menghemat tempat di situs web Anda. Satu-satunya waktu bio benar-benar akan ditampilkan adalah setelah pengunjung menunjukkan minat dan memutuskan untuk mengklik elemen dalam Modul Person.

Modul Orang Hasil Dengan Bio di Klik

Sebelum kita masuk ke langkah-langkah berbeda yang harus Anda ikuti untuk mencapai Modul Person dengan bio on click, mari kita lihat hasil akhirnya di desktop:

modul orang dengan bio

dan hasil akhirnya di ponsel dan tablet:

modul orang dengan bio

Dengan ponsel, jika satu bio dibuka, dua bio lainnya akan ditutup secara otomatis. Anda hanya akan memiliki satu bagian bio yang terbuka, meskipun setiap bio memiliki bagiannya sendiri.

Modul Person Dengan Bio di Klik untuk Desktop

Berlangganan Saluran Youtube Kami

Agar semuanya berjalan lancar, kita perlu membuat dua versi: satu untuk desktop dan satu untuk tablet dan ponsel. Masing-masing versi ini akan membutuhkan kode jQuery sendiri. Kami akan memulai dengan versi desktop dan di bagian selanjutnya dari posting kami akan menunjukkan cara membuat versi untuk tablet dan ponsel.

Tambahkan Bagian Standar Orang Dengan Baris Tiga Kolom

Hal pertama yang perlu kita lakukan adalah menambahkan bagian yang berisi Modul Person.

Buka halaman baru (atau halaman di mana Anda ingin menambahkan Modul Person dengan bio) dan tambahkan bagian standar baru. Di dalam bagian itu, tempatkan deretan tiga kolom. Tentu saja, Anda juga dapat menggunakan sejumlah kolom lain, tetapi kode yang akan kita gunakan memperhitungkan Modul 3 Orang. Jika Anda ingin membuat hal yang sama untuk jenis baris lain, Anda harus membuat beberapa modifikasi pada kode jQuery yang akan kami berikan nanti di posting ini.

Pengaturan Baris

Buka pengaturan baris dan di dalam tab konten, tambahkan '#e5e5e5' sebagai warna latar belakang setiap kolom.

person module with bio

Kemudian, pindah ke tab Advanced dan masukkan bayangan kotak berikut ke Elemen Utama dari masing-masing dari tiga baris:

Tambahkan Modul Orang

Hal berikutnya yang perlu Anda lakukan adalah menambahkan Modul Person ke kolom pertama dari baris.

Tab Konten

Di dalam tab Konten modul itu, ketik info dan tautan media sosial dan unggah gambar.

Tab Lanjutan

Kami tidak akan melakukan modifikasi apa pun pada tab Desain modul ini (jangan ragu untuk membuat perubahan apa pun pada tampilan setelahnya). Sebagai gantinya, kita akan langsung ke tab Advanced di mana kita akan menambahkan bayangan kotak yang sama yang kita tambahkan ke kolom baris, ke gambar anggota.

Kloning Modul Orang

Hal berikutnya yang perlu Anda lakukan adalah mengkloning Modul Person dua kali dan menempatkannya di dua kolom lainnya. Kita harus kembali ke bagian ini untuk menambahkan kelas CSS yang berbeda. Tapi sebelum kita melakukannya, kita akan menambahkan bagian bio terlebih dahulu.

Tambahkan Bagian Standar Bio dengan Baris Lebar Penuh

Tambahkan bagian standar lain tepat di bawah bagian sebelumnya yang telah Anda buat. Di bagian ini, kita perlu menambahkan modul teks berbeda yang ditautkan ke berbagai Modul Person. Buka pengaturan bagian dan gunakan warna '#a0a0a0' sebagai warna latar belakang Anda.

Tambahkan Dua Modul Teks

Bergantung pada berapa banyak Modul Teks yang Anda inginkan untuk dimiliki oleh modul orang, Anda dapat menambahkan Modul Teks. Dalam hal ini, kami akan menambahkan dua Modul Teks per Modul Orang.

Modul Teks Pertama

Ketik beberapa teks di Modul Teks pertama dan buka tab Desain. Di dalam tab Desain, buat perubahan berikut pada subkategori Teks:

  • Orientasi Teks: Tengah
  • Ukuran Font Teks: 31
  • Warna Teks: #FFFFFF
  • Tinggi Baris Teks: 1.7em

Modul Teks Kedua

Tambahkan Modul Teks lain dan buat perubahan berikut pada subkategori Teks dari tab Desain:

  • Orientasi Teks: Tengah
  • Ukuran Font Teks: 16
  • Warna Teks: #FFFFFF
  • Tinggi Baris Teks: 1.7em

Klon Setiap Modul Dua Kali

Kedua Modul Teks ini akan sama untuk masing-masing bios. Itu sebabnya Anda harus mengkloning masing-masing Modul Teks dua kali. Beginilah tampilan struktur akhir di bagian belakang halaman:

Kelas CSS yang Berbeda

Tetapkan Kelas CSS ke Modul Orang

Buka tab Advanced dari masing-masing Modul Person dan tetapkan kelas CSS berikut:

  • Modul Orang Pertama: person1
  • Modul Orang Kedua: person2
  • Modul Orang Ketiga: person3

Tetapkan Kelas CSS ke Bagian

Buka pengaturan bagian tempat bios Anda ditempatkan. Buka tab Advanced dan tulis “section_1” ke dalam kelas CSS.

Tetapkan Kelas CSS ke Modul Teks

Sekarang, tambahkan Kelas CSS ke Modul Teks yang telah Anda buat dengan cara berikut:

  • Tertaut ke Modul Orang pertama: div_text_1
  • Tertaut ke Modul Orang kedua: div_text_2
  • Tertaut ke Modul Orang ketiga: div_text_3

Tambahkan Kode CSS Tampilan ke Bagian & Semua Modul Teks

Langkah selanjutnya yang harus Anda lakukan adalah pergi ke tab Advanced dari bagian dan semua Modul Teks. Kemudian, tambahkan baris kode CSS berikut ke Elemen Utama bagian tersebut: 

display: none;

Nonaktifkan di Ponsel & Tablet

Sekarang, nonaktifkan kedua bagian yang Anda buat untuk seluler dan tablet.

Modul Orang Dengan Bio di Klik untuk Tablet & Telepon

Sekarang kami telah menunjukkan cara membuat modul orang dengan bio saat klik untuk desktop, kami akan menunjukkan cara membuatnya juga untuk tablet dan ponsel. Kami telah menonaktifkan bagian sebelumnya untuk ponsel dan tablet. Seperti inilah tata letak desktop di backend:

Dan ini adalah struktur yang kita butuhkan untuk versi tablet & ponsel.

Tambahkan Enam Bagian Baru

Jadi, lanjutkan dan tambahkan enam bagian baru ke halaman. Kemudian, kloning modul orang dan letakkan masing-masing di bagian satu per satu. Pastikan Anda meninggalkan bagian di antaranya, di situlah bio pada akhirnya akan datang.

Selanjutnya, tambahkan clone modul teks dan letakkan di bagian di bawah setiap bagian yang berisi Modul Person. Bio secara default akan ditampilkan di bawah Modul Person di ponsel dan tablet.

.

Kelas & ID CSS yang Berbeda

Setelah Anda meletakkan semua bagian dan modul pada tempatnya, saatnya untuk mulai menambahkan kelas CSS.

Tetapkan Kelas CSS ke Modul Orang

Mulailah dengan membuka modul setiap orang satu per satu dan ubah kelas CSS di tab Lanjutan menjadi:

  • Modul Orang Pertama: mobile_person1
  • Modul Orang Kedua: mobile_person2
  • Modul Orang Ketiga: mobile_person3

Tetapkan Kelas CSS ke Bagian

Selanjutnya, buka semua bagian bio yang berbeda dan tetapkan yang berikut untuk masing-masing bagian:

  • Bagian Bio Pertama: section_mobile_1
  • Bagian Bio Kedua: secton_mobile_2
  • Bagian Bio Ketiga: section_mobile_3

Tetapkan Kelas CSS ke Modul Teks

Kelas CSS terakhir yang harus Anda beri tempat adalah yang ditautkan ke Modul Teks di bagian bio yang berbeda. Menurut bagian bio, tetapkan Kelas CSS berikut ke Modul Teks di dalam bagian itu:

  • Tertaut ke Modul Orang pertama: div_mobile_text_1
  • Tertaut ke Modul Orang kedua: div_mobile_text_2
  • Tertaut ke Modul Orang ketiga: div_mobile_text_3

Tambahkan Kode CSS Tampilan ke Bagian

Selanjutnya, Anda harus membuat semua bagian bio tidak terlihat. Buka tab Advanced dari masing-masing bagian dan salin dan tempel baris kode CSS berikut ke dalam Elemen Utama: 

display: none;

Pastikan Anda menghapus baris kode CSS ini di Elemen Utama setiap Modul Teks. Dalam versi Desktop, kami perlu membuatnya tidak terlihat, tetapi itu tidak diperlukan untuk seluler dan tablet.

Nonaktifkan di Desktop

Sekarang, setelah Anda melakukan semua modifikasi, ada satu hal yang harus dilakukan sebelum menambahkan kode: nonaktifkan tiga bagian bio di desktop. Silakan dan buka masing-masing bagian dan buka tab Lanjutan. Di dalam subkategori Visibilitas pada tab Lanjutan, nonaktifkan bagian di desktop.

Tambahkan Kode jQuery

Sekarang kita telah membuat semua perubahan praktis pada pembuat Divi, saatnya untuk melanjutkan ke langkah terakhir; menambahkan kode jQuery.

Tambahkan Modul Kode Baru

Cara termudah untuk menambahkan kode ke halaman Anda adalah melalui Modul Kode. Anda mungkin akan menggunakan modul orang ini dengan bio di klik pada satu halaman saja. Dengan menggunakan modul kode, Anda akan memastikan kode hanya dimuat saat seseorang berada di halaman itu. Salin dan tempel dua kode terpisah jQuery ke dalam modul kode yang sama.

Tempatkan Kode jQuery Desktop ke Modul Kode Anda

Salin dan tempel baris kode CSS berikut ke Modul Kode Anda untuk membuat bio desktop pada versi klik berfungsi: 

<script text="text/javascript">
jQuery(function ($) {
var text_1_visible = 0;
var text_2_visible = 0;
var text_3_visible = 0;

var section_1 = $(".section_1");
var text_img_1 = $(".div_text_1");
var text_img_2 = $(".div_text_2");
var text_img_3 = $(".div_text_3");

$(".person1").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_1.css("display", "block");
text_img_2.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else if (text_2_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_1.css("display", "block");
text_img_2.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_1.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".person2").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_2.css("display", "block");
text_img_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else if (text_1_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_2.css("display", "block");
text_img_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".person3").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_3.css("display", "block");
text_img_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else if (text_1_visible == 1 || text_2_visible == 1) {
section_1.css("display", "block");
text_img_3.css("display", "block");
text_img_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else {
section_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});
});
</script>

Tempatkan Kode jQuery Tablet & Telepon ke Modul Kode Anda

Dan baris kode berikut untuk membuat versi untuk tablet dan ponsel berfungsi: 

<script text="text/javascript">
jQuery(function ($) {
var text_1_visible = 0;
var text_2_visible = 0;
var text_3_visible = 0;

var section_1 = $(".section_mobile_1");
var section_2 = $(".section_mobile_2");
var section_3 = $(".section_mobile_3");

var text_img_1 = $(".div_mobile_text_1");
var text_img_2 = $(".div_mobile_text_2");
var text_img_3 = $(".div_mobile_text_3");

$(".mobile_person1").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_1.css("display", "block");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else if (text_2_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_1.css("display", "block");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_1.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".mobile_person2").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "block");
text_img_2.css("display", "block");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else if (text_1_visible == 1 || text_3_visible == 1) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "block");
text_img_2.css("display", "block");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else {
section_2.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".mobile_person3").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "block");
text_img_3.css("display", "block");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else if (text_1_visible == 1 || text_2_visible == 1) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "block");
text_img_3.css("display", "block");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else {
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});
});
</script>

Hasil Akhir

Mari kita lihat hasil terakhir setelah Anda mengikuti semua langkah di seluruh posting ini. Beginilah tampilannya di desktop:

modul orang dengan bio

Dan di ponsel dan tablet:

modul orang dengan bio

Membungkus

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat modul orang dengan bio yang disembunyikan dan ditampilkan saat diklik. Dengan menerapkan metode ini, Anda akan dapat menyimpan beberapa tempat di situs web Anda dan hanya menunjukkannya kepada pengunjung Anda setelah mereka menunjukkan minat. Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!