Panduan Bermanfaat untuk Mendesain Elemen Melingkar di Divi

Sesekali desain situs web membutuhkan beberapa elemen melingkar. Ini adalah cara yang bagus untuk keluar dari monoton desain kotak standar pada halaman web. Membuat elemen melingkar mungkin terdengar sederhana (dan memang begitu!), tetapi jika Anda tidak terbiasa dengan beberapa aturan dasar, Anda mungkin mengalami beberapa rintangan yang tidak perlu yang bisa sangat membuat frustrasi.

Misalnya, terkadang sulit untuk membuat konten sejajar dan pas di dalam elemen berbentuk lingkaran dengan jarak yang benar. Atau Anda mungkin merasa sulit untuk membuat lingkaran responsif untuk perangkat seluler. Untuk alasan ini beberapa telah menggunakan latar belakang gambar melingkar untuk konten sebagai gantinya. Tetapi jika Anda tidak ingin menggunakan latar belakang gambar khusus, cara terbaik Anda berikutnya adalah menggunakan CSS. Kabar baiknya adalah Divi menghilangkan kebutuhan untuk membuat CSS kustom Anda sendiri untuk membuat elemen melingkar, membuat prosesnya menjadi lebih mudah. Jadi, jika Anda ingin memberi elemen bentuk lingkaran di Divi, ini adalah postingan untuk Anda.

Dalam tutorial ini, saya akan memandu Anda melalui dasar-dasar cara membuat elemen melingkar di Divi (termasuk bagian, baris, dan modul). Kemudian saya akan menunjukkan kepada Anda betapa mudahnya menerapkan teknik-teknik tersebut pada tata letak yang sudah jadi.

Coba lihat!

Sneak Peek

Unduh Contoh Tata Letak Elemen Edaran GRATIS

Untuk meletakkan tangan Anda pada contoh elemen melingkar yang dirancang dalam tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, buat halaman baru di Divi. Kemudian beri Anda judul halaman dan gunakan pembuat Divi di ujung depan. Pilih opsi "bangun dari awal".

Kami juga akan menambahkan tata letak premade ke halaman kami sedikit kemudian, tetapi untuk saat ini kami dapat mulai membangun dari awal.

Sekarang Anda siap untuk pergi!

Tiga Langkah Dasar untuk Membuat Elemen Melingkar

Sebenarnya ada tiga langkah sederhana untuk membuat elemen melingkar. Untuk mengilustrasikan langkah-langkah ini, saya akan menerapkan langkah-langkah ini ke Modul Ajakan Bertindak menggunakan Divi Builder.

Langkah 1: Elemen ukuran dengan nilai tinggi dan lebar yang sama

Langkah pertama adalah mengatur tinggi dan lebar ke nilai yang sama. Pada dasarnya kita ingin membuat elemen persegi sempurna sebelum kita membuatnya menjadi lingkaran sempurna. Dalam contoh ini, mari berikan modul ajakan bertindak dengan tinggi dan lebar 10vw.

Langkah 2: Tambahkan radius Perbatasan 50% untuk keempat sudut

Langkah kedua adalah mengatur radius batas elemen (atau modul) menjadi 50% di keempat sudutnya. Di Divi, Anda dapat mengubah radius batas elemen di bawah opsi berlabel "Rounded Corners".

Langkah 3: Sejajarkan konten dalam elemen melingkar

Langkah ketiga adalah menyelaraskan konten elemen melingkar. Kita dapat melakukan ini dengan menyesuaikan padding elemen. (Juga, saya membahas cara menggunakan flex untuk memusatkan konten secara vertikal nanti di posting ini)

Dalam contoh ini, kita dapat menambahkan padding berikut untuk mendekatkan konten kita ke pusat elemen melingkar:

Padding Kustom: 18vw atas, 3vw kiri, 3vw kanan

Tentu saja, masih ada penyesuaian yang mungkin perlu dilakukan untuk memastikan teks/konten pas di dalam elemen melingkar di ponsel, tetapi ini mencakup pengaturan dasar.

Anda mungkin memperhatikan bahwa saya menggunakan unit panjang vw untuk mengukur dan memberi ruang pada elemen melingkar saya. Ini berguna untuk membuat desain responsif yang lebih konsisten. Aku akan menjelaskan.

Menggunakan Satuan Panjang Relatif untuk Membuat Elemen Melingkar Responsif

Menggunakan satuan panjang VW untuk tinggi dan lebar

Dari semua unit panjang relatif, unit panjang vw adalah salah satu favorit saya untuk desain responsif. Karena satuan panjang vw relatif terhadap lebar jendela browser (bukan elemen induk), Anda bisa mendapatkan desain yang konsisten yang menyesuaikan dengan lancar dengan ukuran jendela browser.

Mari kita lihat bagaimana contoh modul panggilan bertindak melingkar kita terlihat saat saya mengecilkan lebar browser.

Menggunakan unit panjang VW untuk konten elemen melingkar

Menggunakan unit panjang vw untuk ukuran dan konten elemen melingkar adalah kombinasi yang baik untuk desain responsif. Pada dasarnya, ini memungkinkan konten (seperti teks atau gambar) untuk menyesuaikan secara mulus dengan ukuran elemen lingkaran untuk desain yang konsisten di semua browser. Namun, Anda harus berhati-hati dalam menggunakan satuan panjang vw untuk teks isi karena teks mungkin menjadi terlalu kecil di ponsel. Saya suka menggunakan unit panjang vw untuk judul dan kemudian menyesuaikan ukuran teks isi dengan piksel sesuai kebutuhan.

Juga, jika Anda berencana untuk mempertahankan desain elemen melingkar di layar ponsel, Anda harus menjaga konten Anda seminimal mungkin dan menyesuaikan ukuran elemen melingkar untuk ruang maksimum.

Menggunakan contoh kami saat ini, Anda dapat memberikan teks Judul Anda nilai panjang vw dan kemudian mengubah ukuran modul di ponsel sebagai berikut:

Judul Teks Ukuran: 4vw
Lebar (telepon): 70vw
Tinggi (telepon: 70vw

Seperti yang Anda lihat, semua konten sekarang duduk dengan baik di dalam elemen melingkar pada tampilan ponsel juga.

Bagaimana dengan Pixel?

Jika Anda ingin menggunakan satuan panjang absolut (seperti piksel) untuk mengukur lingkaran Anda, itu tidak masalah. Anda hanya perlu memastikan dan membuat penyesuaian ukuran yang diperlukan di setiap titik henti sementara untuk tampilan tablet dan ponsel untuk memastikan elemen melingkar pas di dalam jendela browser. Dalam beberapa kasus, menggunakan piksel bisa lebih mudah untuk mendapatkan ukuran yang tepat (atau lebih tepatnya) pada layar tablet dan ponsel.

Misalnya, mari kita ambil modul ajakan bertindak yang sama dan gunakan piksel (bukan vw) untuk mengukur dan memberi ruang pada modul kita.

Anda dapat memperbarui tinggi, lebar, dan bantalan sebagai berikut:

Lebar: 500 piksel
Tinggi: 500px
Padding Kustom: 200px atas, 20px kiri, 20px kanan

Desain ini akan terlihat serupa di desktop, tetapi masalah muncul setiap kali Anda melihat elemen melingkar di layar ponsel. Karena ukuran elemen lingkaran menggunakan piksel (satuan panjang absolut), elemen lingkaran akan meluas ke luar wadah dan browser pada tampilan ponsel.

Itulah mengapa penting untuk menyesuaikan lebar dan nilai piksel padding pada tampilan seluler. Misalnya, Anda mungkin perlu mengubah lebar dan tinggi menjadi 300px.

Mengapa satuan % panjang tidak benar-benar berfungsi dengan baik untuk mengukur elemen melingkar

Jika Anda menginginkan solusi yang lebih responsif untuk elemen melingkar, Anda mungkin berpikir bahwa menggunakan persentase adalah jawabannya. Namun, saat mengukur elemen di halaman web, satuan persentase panjang untuk tinggi tidak bekerja dengan cara yang sama seperti satuan persentase panjang untuk lebar. Ini karena tinggi elemen default biasanya dibiarkan default (tinggi: otomatis). Jadi misalnya, jika Anda mencoba untuk mengatur ketinggian 100% ke Modul Divi, modul tidak akan menyesuaikan karena wadah induk (kolom, baris, bagian, dll...) semuanya memiliki nilai ketinggian yang tidak ditentukan. Peramban pada dasarnya tidak mencoba mengatur modul ke 100% tidak ada (yang tidak bisa). Ini tidak berlaku untuk lebar. Lebar default setiap elemen blok (atau div) adalah 100%. Jadi semua bagian, baris, dan modul memiliki lebar 100% default ini kecuali diubah oleh pengaturan. Inilah sebabnya mengapa % panjang unit bukan pilihan terbaik untuk digunakan saat mencoba membangun elemen melingkar yang responsif. Elemen melingkar harus memiliki tinggi dan lebar yang sama pada semua ukuran browser sehingga sulit untuk melakukannya dengan menggunakan satuan persentase panjang untuk tinggi. Namun, ada cara untuk membuat tinggi dan lebar 100% berfungsi dengan lebih banyak CSS khusus yang diterapkan ke elemen induk. Tetapi untuk membuat elemen melingkar di Divi, Anda mungkin menemukan unit panjang vw lebih mudah digunakan.

Menyelaraskan Konten dalam Elemen Melingkar

Jika Anda ingin menyelaraskan konten dalam elemen melingkar, Anda benar-benar memiliki dua opsi yang saya anggap sederhana saat menggunakan Divi. Anda dapat menggunakan padding untuk menyelaraskan konten yang memberi Anda lebih banyak kontrol atas di mana Anda ingin konten ditampilkan dalam elemen lingkaran. Atau Anda dapat menggunakan properti flex (dengan padding) untuk memastikan konten ditampilkan langsung di tengah lingkaran.

Menyelaraskan Konten Elemen Melingkar dengan Padding

Untuk menyelaraskan konten di dalam elemen lingkaran menggunakan padding, saya sarankan menggunakan satuan panjang relatif (seperti % atau vw) sehingga padding akan bertambah atau berkurang dengan ukuran wadah atau lebar browser. Anda tidak ingin menggunakan satuan panjang absolut untuk mengisi bagian dalam elemen melingkar yang ukurannya menggunakan satuan relatif. Hasilnya akan tidak konsisten dan desainnya akan rusak di ponsel. Misalnya, jika Anda memiliki elemen lingkaran yang memiliki tinggi 10vw dan lebar 10vw. Elemen itu akan menyusut ukurannya saat browser menyusut lebarnya. Jika Anda menambahkan bantalan 100px ke bagian atas elemen, 100px akan tetap ada setiap kali Anda menyesuaikan lebar browser dan merusak desain. Namun, jika Anda menambahkan bantalan 3vw, bantalan ini akan menyesuaikan dengan baik dengan elemen.

Inilah mengapa saya menyarankan untuk menggunakan vw padding dalam contoh modul call to action kami.

Menyelaraskan Konten Elemen Melingkar dengan Properti Flex

Jika Anda tidak ingin terlalu khawatir tentang mendapatkan padding atas dan bawah untuk memastikan konten berada di tengah secara vertikal, Anda dapat menggunakan properti flex. Dengan menambahkan beberapa potongan css ke induk (elemen melingkar), Anda dapat memastikan bahwa semua konten tetap berada di tengah secara vertikal. Kemudian Anda dapat menggunakan perataan, padding, atau margin untuk memastikan konten tetap berada di tengah secara horizontal juga.

Inilah yang saya maksud.

Menggunakan contoh kami, buka pengaturan modul ajakan bertindak.

Kemudian atur padding atas dan bawah ke 0px.

Lalu buka tab lanjutan, dan tambahkan potongan CSS berikut ke Elemen Utama:

display:flex;
align-items: center;

Untuk modul khusus ini, ada beberapa bantalan tambahan di bawah deskripsi promo yang akan sedikit menghilangkan keselarasan. Jadi Anda bisa menghilangkannya dengan menambahkan CSS berikut ke Deskripsi Promo:

padding-bottom: 0px

Lihat posting ini tentang cara menyelaraskan konten secara vertikal untuk info lebih lanjut.

Mempraktikkannya: Menambahkan Elemen Melingkar ke Tata Letak yang Dibuat Sebelumnya

Sekarang setelah Anda memiliki pemahaman yang lebih baik tentang cara membuat elemen melingkar di Divi, mari kita lihat bagaimana ini dapat bekerja pada desain tata letak yang sebenarnya. Untuk contoh ini, saya akan menggunakan Halaman Arahan Petani Divi dari Paket Tata Letak Petani.

Muat Tata Letak Halaman Arahan Petani ke Halaman Anda

Untuk memulai, pertama-tama tambahkan Tata Letak Halaman Arahan Petani ke halaman. Untuk melakukan ini, buka menu pengaturan dan bagian bawah Divi Builder dan klik tombol muat dari perpustakaan. Di sembulan beban dari perpustakaan, temukan Paket Tata Letak Petani dan pilih. Kemudian klik untuk menggunakan Halaman Arahan Petani.

Ini akan memuat tata letak ke halaman.

Membuat Header Bagian Melingkar

Untuk contoh pertama, kita akan mengonversi bagian header atas tata letak menjadi elemen melingkar. Untuk melakukan ini, kita akan menggunakan tiga aturan dasar:

1: Elemen ukuran dengan nilai tinggi dan lebar yang sama
2: Tambahkan radius Perbatasan 50% untuk keempat sudut
3: Sejajarkan Konten dalam Elemen Edaran

Buka pengaturan bagian dan perbarui yang berikut ini:

Lebar: 70vw (desktop), 70vw (tablet), 80vw (ponsel)
Lebar maksimum: 1080px
Perataan Bagian: tengah
Tinggi: 70vw (desktop), 70vw (tablet), 80vw (ponsel)
Tinggi maksimal: 1080px

Perhatikan bahwa saya menambahkan nilai tinggi dan lebar tambahan untuk tablet dan ponsel plus saya menambahkan tinggi maksimal dan lebar maksimal juga. Yang penting adalah Anda memastikan semua nilai tinggi dan semua nilai lebar sama.

Sekarang kita perlu menambahkan radius batas 50% di keempat sudut.

Sudut Bulat: 50% (keempat sudut)

Karena ini adalah bagian, konten menyertakan baris dua kolom dengan beberapa modul. Dengan konten sebanyak ini, kita perlu membuat beberapa penyesuaian ukuran pada modul untuk memastikan konten sesuai dengan bagian.

Pertama, buka pengaturan modul teks atas di kolom 1 yang berisi judul bagian. Kemudian perbarui ukuran teks judul sebagai berikut:

Judul Teks Ukuran: 4vw

Kemudian kurangi jumlah teks isi dalam modul teks langsung di bawah modul teks yang berisi header.

Sekarang kita dapat menyelaraskan konten dengan menyesuaikan jarak baris. Buka pengaturan baris dan perbarui yang berikut:

Margin Kustom: 10vw atas (desktop), 5vw (tablet), 0vw (telepon)
Padding Kustom: 3vw kiri, 3vw kanan

Untuk membuat bentuk lingkaran lebih terlihat, kita dapat menambahkan pembagi bagian atas dan memindahkan posisi gambar latar belakang ke Kiri Atas.

Sekarang mari kita lihat hasilnya.

Membuat Modul Blurb Melingkar

Sekarang mari kita coba membuat beberapa uraian melingkar pada tata letak ini. Untuk contoh ini, mari gunakan empat modul uraian di bawah bagian berjudul “Produk Kami”. Setelah Anda menemukannya, buka pengaturan modul uraian di bagian atas kolom 2.

Kemudian perbarui ukuran modul sebagai berikut:

Lebar Gambar: 7vw
Lebar: 50vw (desktop), 80vw (telepon)
Lebar Maks: 400px
Penyelarasan Modul: tengah
Tinggi: 50vw (desktop), 80vw (telepon)
Tinggi Maks: 400px

Selanjutnya, tambahkan radius batas atau sudut membulat Anda:

Sudut Bulat: 50%

Setelah itu, mari kita perbarui desain konten dan spasi sebagai berikut:

Penempatan Gambar/Ikon: Atas
Judul Teks Ukuran: 2vw (desktop), 20px (tablet)
Orientasi teks: tengah

Padding Kustom: 0vw Atas, 0vw bawah, 4vw kiri, 4vw kanan

Terakhir, mari kita sejajarkan konten secara vertikal menggunakan properti flex dengan menambahkan CSS khusus berikut ke Elemen Utama:

display: flex;
align-items: center;

Perluas Gaya Melingkar ke semua Blurb di Bagian

Itu menangani desain melingkar untuk modul pertama kami. Sekarang yang perlu kita lakukan adalah memperluas pengaturan desain modul uraian ke tiga uraian uraian yang tersisa di bagian tersebut. Untuk melakukan ini, klik kanan pada modul blurb yang baru saja kita rancang dan pilih "Extend Blurb Styles". Di pop-up Perpanjang Gaya, pilih untuk memperluas gaya ke seluruh bagian.

Hasil Akhir

Sekarang mari kita lihat hasil akhirnya.

Pikiran Akhir

Saya harap Anda mempelajari beberapa tips bermanfaat tentang cara membuat elemen melingkar di Divi. Dengan memahami tiga langkah dasar dan cara menggunakan satuan panjang dengan benar untuk mengukur dan memberi ruang pada elemen Anda, Anda dapat membuat desain melingkar yang Anda cari dengan cukup mudah. Dan, itu bisa sangat menyenangkan untuk menggabungkan beberapa elemen melingkar pada tata letak Divi yang sudah ada atau yang dibuat sebelumnya. Jangan ragu untuk menjelajah membuat modul melingkar, baris, atau bahkan seluruh bagian!

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!