Cara Menampilkan Layanan dengan Indah di Perangkat Seluler dengan Divi (Unduh Gratis!)

Jika Anda berfokus pada desain yang mengutamakan seluler, pos ini mungkin dapat membantu Anda. Kami telah membuat dua contoh tampilan layanan yang bagus yang terlihat bagus pada ukuran layar yang lebih kecil. Lebih dari itu, mereka secara khusus dirancang untuk terlihat terbaik di seluler sambil tetap mempertahankan desain yang bagus di desktop. Dalam posting ini, kami akan menunjukkan kepada Anda langkah demi langkah cara membuatnya kembali dari awal. Kami berharap tutorial ini akan menginspirasi Anda untuk melepaskan kreativitas Anda saat merancang bagian layanan untuk situs web apa pun yang Anda buat. Di akhir tutorial, Anda juga dapat mengunduh file JSON dari kedua bagian.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas dua contoh ponsel yang akan kita buat ulang.

Contoh 1

Contoh #2

Mari Mulai Membuat Ulang Contoh #1

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Baru

Latar Belakang Gradien

Buat halaman baru dan tambahkan bagian reguler ke dalamnya. Buka pengaturan bagian dan tambahkan latar belakang gradien.

• Warna 1: #ff0f83
• Warna 2: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Kiri
• Posisi Awal: 20%
• Posisi Akhir: 20%

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Tambahkan Modul Teks #1

Tambah isi

Modul pertama yang kita perlukan adalah Modul Teks. Tambahkan beberapa konten ke kotak konten.

Pengaturan Teks

Lalu, buka tab desain dan ubah pengaturan teks.

• Font Teks: Poppins
• Berat Font Teks: Berat
• Warna Teks: #ffffff
• Ukuran Teks: 20vw
• Tinggi Baris Teks: 1em

• Kekuatan Kabur Bayangan Teks: 0.95em
• Warna Bayangan Teks: rgba(0,0,0,0.13)
• Orientasi Teks: Tengah

Tambahkan Modul Teks #2

Tambahkan Konten H2

Tambahkan Modul Teks lain tepat di bawah yang sebelumnya. Masukkan beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

Lalu, buka tab desain dan ubah pengaturan teks H2.

• Judul 2 Font: Poppins
• Judul 2 Berat Font: Tebal
• Judul 2 Perataan Teks: Tengah
• Judul 2 Warna Teks: #000000
• Judul 2 Ukuran Teks: 10vw (Telepon & Tablet), 10vw (Desktop)

Jarak

Buat tumpang tindih antara kedua modul teks menggunakan beberapa margin atas negatif.

• Margin Atas: -12vw (Telepon), -10vw (Tablet), -8vw (Desktop)

Tambahkan Baris #2

Struktur Kolom

Lanjutkan dengan menambahkan baris lain menggunakan struktur kolom berikut:

Latar Belakang Gradien

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan latar belakang gradien.

• Warna 1: #3239ff
• Warna 2: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Kanan
• Posisi Awal: 30%
• Posisi Akhir: 30%

Perekat

Buka pengaturan ukuran berikutnya dan biarkan baris memenuhi seluruh lebar layar.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Tambahkan beberapa nilai spasi juga. Nilai-nilai ini akan memastikan semuanya terlihat bagus di semua ukuran layar.

• Padding Kiri: 0vw (Ponsel & Tablet), 15vw (Desktop)
• Padding Kanan: 0vw (Ponsel & Tablet), 15vw (Desktop)

CSS khusus

Kami juga menempatkan dua kolom tepat di samping satu sama lain dengan menambahkan satu baris kode CSS di tab lanjutan.

display: flex;

Tambahkan Modul Teks ke Kolom 1

Tambahkan Konten H3 & Tautan

Sekarang kita bisa mulai menambahkan modul! Tambahkan Modul Teks ke kolom pertama dengan beberapa salinan H3 dan tautan.

Warna latar belakang

Kemudian, buka pengaturan latar belakang modul dan tambahkan warna latar belakang.

• Warna Latar Belakang: rgba (255,255,255,0,95)

Pengaturan Teks

Lanjutkan dengan mengubah orientasi teks dalam pengaturan teks modul.

• Orientasi Teks: Tengah

Pengaturan Teks Tautan

Ubah juga pengaturan teks tautan.

• Font Tautan: Poppins
• Berat Font Linke: Tebal
• Gaya Font Tautan: Garis Bawah
• Warna Garis Bawah Tautan: #000000
• Warna Teks Tautan: #000000
• Ukuran Teks Tautan: 3vw (Telepon), 2vw (Tablet), 1vw (Desktop)

Pengaturan Teks H3

Bersamaan dengan pengaturan teks H3.

• Judul 3 Font: Poppins
• Judul 3 Berat Font: Ultra Ringan
• Judul 3 Warna Teks: #000000
• Judul 3 Ukuran Teks: 4vw (Telepon), 3vw (Tablet), 2vw (Desktop)
• Heading 3 Text Line Height: 1.9em untuk bentuk lingkaran atau 3em untuk bentuk oval

Jarak

Untuk membuat bentuk dari modul ini, kita akan menambahkan beberapa margin kustom dan nilai padding dalam pengaturan spasi.

• Margin Kiri: 5vw
• Margin Kanan: -5vw
• Padding Atas: 17vw (Telepon), 20vw (Tablet), 15vw (Desktop)
• Padding Bawah: 17vw (Telepon), 20vw (Tablet), 15vw (Desktop)

Berbatasan

Kami mengubah persegi menjadi lingkaran menggunakan sudut membulat dengan menambahkan '100vw' ke masing-masing sudut.

Bayangan Kotak

Dan untuk membuat beberapa kedalaman, kita akan menambahkan bayangan kotak yang halus.

• Kekuatan Buram Bayangan Kotak: 100px
• Warna Bayangan: rgba (0,0,0,0.12)

Modul Teks Klon 4 Kali

Sekarang setelah kita selesai memodifikasi Modul Teks pertama, kita dapat melanjutkan dan mengkloningnya empat kali. Tempatkan dua duplikat di kolom kedua.

Ubah Duplikat #1

Jarak

Lanjutkan dengan memodifikasi pengaturan spasi duplikat pertama.

• Margin Atas: 20vw
• Margin Kiri: -5vw
• Margin Kanan: 5vw

Ubah Duplikat #2

Warna latar belakang

Buka duplikat kedua berikutnya dan ubah warna latar belakang.

• Warna Latar Belakang: rgba(255.248.209.092)

Jarak

Ubah juga pengaturan spasi.

• Margin Atas: -5vw

Ubah Duplikat #3

Warna latar belakang

Kemudian, buka duplikat ketiga dan ubah warna latar belakang.

• Warna Latar Belakang: rgba(219.255.223.0.95)

Jarak

Ubah pengaturan spasi berikutnya.

• Margin Atas: -5vw
• Margin Kiri: -5vw
• Margin Kanan: 5vw

Ubah Duplikat #4

Jarak

Buka duplikat terakhir juga dan tambahkan beberapa margin atas negatif untuk menyelesaikan desain.

• Margin Atas: -5vw

Mari Mulai Membuat Ulang Contoh #2

Tambahkan Bagian Baru

Ke contoh kedua! Tambahkan bagian baru ke halaman Anda.

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Tambahkan Modul Teks

Tambahkan Konten H2

Modul pertama yang kita perlukan adalah Modul Teks. Masukkan beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

Lalu, buka tab desain dan ubah pengaturan teks H2.

• Judul 2 Font: Poppins
• Judul 2 Perataan Teks: Tengah
• Judul 2 Warna Teks: #333333
• Judul 2 Ukuran Teks: 7vw (Telepon & Tablet), 4vw (Desktop)

Tambahkan Modul Pembagi

Visibilitas

Tambahkan Modul Pembagi tepat di bawah Modul Teks. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

Warna

Lalu, buka tab desain dan ubah warna pembagi.

• Warna: #333333

Perekat

Bermain-main dengan pengaturan ukuran juga.

• Berat Pembagi: 5px
• Lebar: 12%
• Penyelarasan Modul: Pusat

Tambahkan Baris #2

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang putih.

• Warna Latar Belakang: #ffffff

Perekat

Buka pengaturan ukuran berikutnya dan biarkan baris memenuhi seluruh lebar layar.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Tambahkan beberapa nilai margin dan padding khusus di samping untuk mengoptimalkan desain untuk semua ukuran layar.

• Margin Atas: 2vw
• Margin Bawah: 2vw
• Padding Atas: 10vw (Ponsel & Tablet), 5vw (Desktop)
• Padding Bawah: 10vw (Ponsel & Tablet), 5vw (Desktop)
• Padding Kiri: 2vw (Ponsel & Tablet), 20vw (Desktop)
• Padding Kanan: 2vw (Ponsel & Tablet), 20vw (Desktop)

Bayangan Kotak

Kami juga menggunakan bayangan kotak yang halus.

• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba (0,0,0,0.07)

CSS khusus

Last but not least, tempatkan kedua kolom di samping satu sama lain dengan menambahkan satu baris kode CSS ke elemen utama di tab lanjutan.

display: flex;

Tambahkan Modul Blurb ke Kolom 1

Pilih Ikon

Sekarang kita dapat mulai menambahkan modul! Satu-satunya modul yang kita butuhkan di kolom 1 adalah Modul Blurb. Pilih ikon pilihan Anda.

Latar Belakang Gradien

Kemudian, tambahkan latar belakang gradien.

• Warna 1: #7b28ef
• Warna 2: #29b6e5
• Arah Gradien: 142 derajat

Pengaturan Ikon

Ubah pengaturan ikon berikutnya.

• Warna Ikon: #ffffff
• Penempatan Ikon: Atas
• Gunakan Ukuran Font Ikon: Ya
• Ikon Ukuran Font: 5vw (Ponsel & Tablet), 4vw (Desktop)

Perekat

Dan ubah di sekitar pengaturan ukuran.

• Lebar: 48% (Ponsel & Tablet), 78% (Desktop)

Jarak

Kami juga menambahkan beberapa nilai margin dan padding khusus untuk mengoptimalkan desain di semua ukuran layar.

• Margin Atas: 2vw (Telepon)
• Padding Atas: 8.5vw (Telepon), 9vw (Tablet), 6vw (Desktop)
• Padding Bawah: 3vw (Telepon), 5vw (Tablet), 4vw (Desktop)

Berbatasan

Ubah modul menjadi lingkaran berikutnya dengan menambahkan '100vw' ke masing-masing sudut di pengaturan perbatasan.

Bayangan Kotak

Kami juga menambahkan bayangan kotak.

• Posisi Vertikal Bayangan Kotak: 10px
• Kekuatan Penyebaran Bayangan Kotak: 5px
• Warna Bayangan: rgba(2.185.252.0.35)

Tambahkan Modul Teks #1 ke Kolom 2

Tambahkan Konten H3

Ke kolom kedua! Modul pertama yang kita butuhkan ada yang judulnya Text Module. Tambahkan beberapa konten H3.

Pengaturan Teks H3

Lalu, buka tab desain dan ubah pengaturan teks H3.

• Judul 3 Font: Poppins
• Judul 3 Ukuran Teks: 4vw (Telepon), 3vw (Tablet), 2vw (Desktop)

Jarak

Tambahkan beberapa nilai spasi kustom berikutnya.

• Margin Atas: 0vw (Telepon), 3vw (Tablet & Desktop)
• Margin Kiri: -20vw (Telepon & Tablet), 0vw (Desktop)
• Margin Kanan: 0vw
• Padding Bawah: 2vw (Ponsel & Tablet), 1vw (Desktop)
• Padding Kiri: 5vw (Ponsel & Tablet), 2vw (Desktop)

Berbatasan

Seiring dengan batas kiri.

• Lebar Batas Kiri: 5px
• Warna Batas Kiri: #f4f4f4
• Gaya Batas Kiri: Ganda

Tambahkan Modul Pembagi ke Kolom 2

Tampilkan Pembagi

Modul kedua yang kita butuhkan adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Lalu, buka tab desain dan ubah warna pembagi.

• Warna: #f4f4f4

Gaya

Ubah gaya pembagi di pengaturan gaya berikutnya.

• Gaya Pembagi: Ganda

Perekat

Lanjutkan dengan memodifikasi opsi yang berbeda dalam pengaturan ukuran.

• Berat Pembagi: 5px
• Tinggi: 0px

Jarak

Dan bermain-main dengan nilai spasi juga.

• Margin Kiri: -20vw (Telepon & Tablet), 0vw (Desktop)

Tambahkan Modul Teks #2 ke Kolom 2

Tambah isi

Modul berikutnya yang kita butuhkan di kolom kedua adalah Modul Teks lainnya. Tambahkan beberapa isi tubuh pilihan.

Pengaturan Teks

Kemudian, buka tab desain dan ubah pengaturan teks.

• Ukuran Teks: 2vw (Telepon), 1.7vw (Tablet), 0.8vw (Desktop)
• Orientasi Teks: Kiri

Jarak

Bermain-main dengan nilai spasi juga.

• Margin Atas: 0vw
• Margin Kiri: -20vw (Telepon & Tablet), 0vw (Desktop)
• Margin Kanan: 0vw
• Padding Atas: 3vw (Ponsel & Tablet), 2vw (Desktop)
• Padding Kiri: 5vw (Ponsel & Tablet), 2vw (Desktop)

Berbatasan

Dan tambahkan batas kiri.

• Lebar Batas Kiri: 5px
• Warna Batas Kiri: #f4f4f4
• Gaya Batas Kiri: Ganda

Tambahkan Modul Tombol ke Kolom 2

Tambahkan Salinan

Modul berikutnya dan terakhir yang kita butuhkan di kolom kedua adalah Modul Tombol. Tambahkan beberapa salinan.

Pengaturan Tombol

Kemudian, buka tab desain dan ubah pengaturan tombol.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 2.5vw (Telepon), 2vw (Tablet), 1vw (Desktop)
• Warna Teks Tombol: #4f77e8
• Lebar Perbatasan Tombol: 1px
• Warna Batas Tombol: #4f77e8

• Radius Perbatasan Tombol: 1px
• Font Tombol: Poppins

Jarak

Ubah juga nilai spasi.

• Margin Atas: 4vw (Ponsel & Tablet), 2vw (Desktop)
• Margin Kiri: -20vw (Telepon & Tablet), 0vw (Desktop)

Baris Klon Dua Kali

Sekarang setelah kita selesai memodifikasi baris dan semua modulnya, kita dapat mengkloningnya dua kali.

Ubah Ikon

Pastikan Anda mengubah ikon untuk kedua Modul Blurb.

Ubah Latar Belakang Gradien

Ubah juga latar belakang gradien.

• Warna 1: #ff2885
• Warna 2: #d6ac24

• Warna 1: #70ff1e
• Warna 2: #2699ff

Ubah Warna Bayangan Kotak

Cocokkan warna bayangan kotak dengan latar belakang gradien baru.

• Warna Bayangan: rgba (255,208,2,0.37)

• Warna Bayangan: rgba(42,255,0,0,37)

Ubah Batas Tombol & Warna Teks

Dan lengkapi desain dengan mengubah batas tombol dan warna teks.

• Warna Teks Tombol: #e96c54
• Warna Batas Tombol: #e96c54

• Warna Teks Tombol: #4dcb93
• Warna Batas Tombol: #4dcb93

Unduh Bagian Layanan Seluler secara GRATIS

Untuk mendapatkan bagian layanan seluler gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. 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!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil seluler dari kedua contoh.

Contoh 1

Contoh #2

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda dua cara kreatif tentang cara menampilkan layanan di perangkat seluler menggunakan opsi bawaan Divi saja. Kami berharap pendekatan mobile-first ini akan menginspirasi Anda untuk menjadi kreatif juga. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!