Gutenberg WordPress (Part 10): Membuat Slider Responsive

Nasikhun A. 04 Jul 2023 3 Menit 0

Advertisements

Jika sudah berhasil mencoba cara membuat header dan footer responsive, selanjutnya Anda perlu membuat slider responsive agar website dapat menyesuaikan pengguna mobile.

Namun, sebelum melakukan pembuatan slider responsif, Anda perlu menyesuaikan homepage-nya terlebih dahulu, kemudian pengaturan background, pengaturan tipografi, dan terakhir baru membuat slider responsif.

Apabila sudah bisa tiga langkah pertama, Anda dapat langsung menuju ke pengaturan slider responsif di langkah ke-4 menggunakan daftar isi di bawah ini.

Advertisements

Langkah 1: Pengaturan Homepage sebagai Landing Page

Saat membuka halaman awal front-end, Anda mungkin heran kenapa homepage yang sudah dibuat sebelumnya tidak muncul. Sedangkan tampilannya kurang lebih seperti ini:

cara membuat slider responsive di WordPress

Tampilan homepage sebelum dilakukan pengaturan.

Halaman homepage dalam Gutenberg WordPress tidak menjadi mode default halaman awal karena WordPress menggunakan pengaturan statis untuk menentukan halaman awal situs.

Anda dapat memasang homepage yang sudah dibuat sebagai landing page dengan melakukan pengaturan sebagai berikut:

  1. Klik menu Pages > pilih page Homepage yang telah dibuat sebelumnya di tutorial membuat slider di WordPress.
    cara membuat slider responsive di WordPress
  2. Pada halaman editor Homepage, klik Settings di kanan atas > klik opsi Template > klik Edit template.
    cara membuat slider responsive di WordPress
  3. Klik text Homepage > masuk ke List View > klik titik tiga.
    cara membuat slider responsive di WordPress
  4. Pilih Remove Heading untuk menghapus block text tersebut.
    cara membuat slider responsive di WordPress
  5. Klik Publish > kemudian klik Back untuk keluar dari editor template.
    cara membuat slider responsive di WordPress
  6. Pada menu WP Admin, pilih Settings > pilih Reading > pada bagian Your homepage displays, pilih A static page > pada opsi Homepage, pilih Hompage. Selanjutnya, klik Save Changes.
    cara membuat slider responsif dengan gutenberg

Ketika Anda masuk ke halaman utama website, maka muncul Homepage yang Anda buat sudah muncul. Kurang lebih tampilannya seperti berikut ini:

cara membuat slider responsif dengan gutenberg

Tampilan homepage yang sudah menjadi landing page.

Langkah 2: Pengaturan Background pada Slider (Carousel)

Selanjutnya, Anda perlu melakukan pengaturan warna pada background slider. Pengaturan ini bersifat opsional. Jadi, tidak terlalu berpengaruh besar terhadap fitur responsif nantinya.

Untuk melakukan pengaturan backrgound, masuk ke menu Page > klik halaman Homepage seperti sebelumnya. Kemudian ikuti langkah berikut:

  1. Buka List View > klik block Carousel.
    cara membuat slider responsif dengan gutenberg
  2. Klik Settings di sebelah kanan atas > pilih Advanced > pilih Background.
    cara membuat slider responsif dengan gutenberg
  3. Klik Custom color > ganti warna background sesuai kebutuhan Anda.
    cara membuat slider responsif dengan gutenberg

Advertisements

Langkah 3: Pengaturan Tipografi pada Slider

  1. Lihat pada List View sebelah kiri dan klik Heading salah satu Corousel Single Column > ubah heading menjadi H6 > pada kolom Settings, klik Styles > pada bagian Typography, pilih ukuran Small (S).
    cara membuat slider responsif dengan gutenberg
  2. Scroll ke bawah, klik + pada bagian Dimensions > pilih Margin > pada bagian Letter Case, pilih Ab > kemudian ubah ukuran margin menjadi 4.
    cara membuat slider responsif dengan gutenberg
  3. Ubah text heading sesuai kebutuhan. Kami mengisi “Cognitive Bias“.
    cara membuat slider responsif dengan gutenberg
  4. Lihat pada bagian List View > pilih block Paragraph > buat teks-nya menjadi Bold > pada bagian Settings, klik Styles > ubah ukuran Typography menjadi Large (L).
    cara membuat slider responsif dengan gutenberg
  5. Selanjutnya, ubah Margin menjadi 4.
    cara membuat slider responsif dengan gutenberg
  6. Jika sudah, silakan isi block Paragraph sesuai kebutuhan. Kami mengisikan teks “Prof. Daniel Kahneman Inagurated as Professor of Behavioral Economics at University of Caliandra, Beraga“.
    cara membuat slider responsif dengan gutenberg
  7. Pilih block Carousel Single Column yang sudah Anda edit, kemudian klik titik tiga > pilih Duplicate sebanyak dua kali sehingga Anda tidak perlu melakukan pengaturan lagi. Carousel Single Column yang lama bisa dihapus.
    cara membuat slider responsif dengan gutenberg

Anda dapat mengisi ulang slider ke dua dan ke tiga yang sudah diduplikasi. Jika sudah, selanjutnya slider tersebut bisa langsung dibuat responsif.

Langkah 4: Membuat Slider Responsif untuk Mobile dan Tablet

Untuk membuat slider menjadi responsif, berikut langkah-langkahnya:

  1. Lihat pada bagian List View dan pilih block Carousel > lihat pada bagian Settings, pastikan opsi Slides to Show dan Slides to Scroll berisi angka 1.
    cara membuat slider responsif dengan gutenberg
  2. Kemudian, klik ikon Tablet pada Basic Options, > ubah Slides to Show dan Slides to Scroll menjadi 1. Ini pengaturan untuk responsif tablet.
    cara membuat slider responsif dengan gutenberg
  3. Klik ikon Mobile pada Basic Options > ubah Slides to Show dan Slides to Scroll menjadi 1. Ini pengaturan untuk responsif mobile.
    cara membuat slider responsif dengan gutenberg
  4. Scroll ke bawah dan klik bagian Dot > aktifkan semua toggle; Enable Dots, Enable Dots in Tablet, dan Enable Dots in Mobile. Pengaturan ini berfungsi untuk memunculkan titik pada bagian bawah slider.
    cara membuat slider responsif dengan gutenberg

Selanjutnya, Anda bisa langsung Publish dan melihat langsung hasilnya melalui front-end.

Advertisements

Penutup

Demikian tutorial cara membuat slider responsive dengan menggunakan editor gutenberg. Selanjutnya Anda perlu membuat list post dan galeri juga menjadi responsif.

Berikut perbandingan tampilan homepage dilihat di mobile, dari yang sebelum dan sesudah dibuat responsif. Selanjutnya, Anda perlu membuat section logo klien menjadi responsif.

membuat slider responsive

Perbandingan slider sebelum responsif (kiri) dan yang sudah responsif (kanan).

Namun, proses pembuatan website sendiri memang memakana waktu. Jangan sampai Anda meninggalkan bisnis karena harus membuat website dengan tampilan yang baik.

Urusan website dapat Anda percayakan ke Tim Tonjoo, pengembang perangkat lunak profesional yang telah berpengalaman menangani website start-up hingga perusahaan multinasional.

Yuk, diskusi bersama kami melalui kontak kami untuk mewujudkan webite yang cocok untuk bisnis Anda!


Baca artikel terkait WordPress, WooCommerce, Plugin dan pengembangan website lainnya dari Moch. Nasikhun Amin di blog Tonjoo Studio.


 

Last Updated on Juli 28, 2023 by Nasikhun A.

Bagikan ke:
Nasikhun A.
Ditulis oleh

Nasikhun A.

A late specializer, data-informed technical writer who is constantly hungry for growth. A lifelong learner who is interested in the marriage between creativity and technology.

Advertisements

Leave a Reply

Alamat email Anda tidak akan dipublikasikan.

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.