Unlimited PowerPoint templates, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Business
  2. WordPress

Cara Membuat Situs Web WordPress yang Responsif (Dengan Tema)

by
Read Time:10 minsLanguages:
This post is part of a series called How to Make Responsive Business Websites (Tutorial Guide).
25 Best Responsive Business Website Design Examples
How to Make Responsive Business Websites With Templates

Indonesian (Bahasa Indonesia) translation by Kholisa Nurrahmah (you can also view the original English article)

Menggunakan desain situs web yang responsif bukan lagi pilihan saat membangun situs web. Dalam istilah awam, sebuah desain situs web yang responsif membuat situs anda terlihat bagus dengan tidak mempermasalahkan perangkat mana yang pengunjung anda gunakan untuk melihat dan berinteraksi dengan konten (isi).

Mengingat lebih dari 80% orang memiliki telepon selular pintar, memastikan situs web anda responsif adalah suatu keharusan. Menurut statistik pemasaran telepon selular dari 2016, 57% pengguna mengatakan bahwa mereka tidak akan merekomendasikan bisnis dengan situs telepon selular yang dirancang dengan buruk dan 88% konsumen yang mencari jenis bisnis lokal di perangkat seluler kemudian menelepon atau pergi ke sana untuk bisnis dalam waktu 24 jam.

Ketika anda menerima keduanya dalam pertimbangan, Hal ini mudah untuk memahami mengapa isi situs web anda yang dapat mudah mengakses diberbagai perangkat. Syukurlah, membuat situs web WordPress anda yang responsif adalah hal yang mudah dengan ada banyaknya tema responsif.

Dalam tutorial ini, kami akan menunjukkan kepada anda cara memilih tema WordPress yang responsif, cara menggunakan tema responsif untuk situs anda, dan memberi anda sumber daya untuk mempelajari lebih lanjut tentang desain responsif dan menciptakan tema WordPress responsif anda sendiri.

Cara Memilih Tema WordPress yang Responsif

Ketika anda menetapkan tema responsif untuk situs anda, ada beberapa hal yang perlu anda pertimbangkan. Bergantung pada industri anda, penting untuk memilih tema yang tidak hanya memiliki desain menarik namun fitur penting yang membantu pengunjung anda mempelajari lebih lanjut tentang bisnis anda dan beralih dari Prospek (kemungkinan) ke pembelian oleh klien.

Berikut adalah beberapa hal penting yang harus dicari ketika mencari tema WordPress responsif untuk situs anda.

1. Pertimbangkan Fitur-fitur

Ketika hal ini berkaitan dengan fitur, anda pasti ingin mencari tema yang memiliki fitur yang sesuai dengan industri anda. Misalnya, jika anda adalah agensi kreatif atau seorang perancang, anda pasti menginginkan tema yang memungkinkan menampilkan portofolio anda serta testimonial (tanda pujian) dari klien sebelumnya.

Jika anda menjual produk, carilah tema yang terintegrasi dengan baik dengan plugin e-commerse  (Toko Online) atau anda menyediakan tampilan tabel harga. Sama halnya, jika anda mengandalkan pada kemampuan untuk pemesanan klien dari situs anda, carilah tema yang memiliki formulir pemesanan yang terpasang dengan perangkat lain.

Beruntungnya, terdapat banyak tema WordPress dari industri khusus yang memiliki semua fitur yang diperlukan dan responsif.

2. Pemeriksaan untuk Pilihan Perubahan  

Anda ingin mencari tema yang memiliki pilihan perubahan yang fleksibel. Dalam kebanyakan kasus, tema anda dilengkapi dengan panel pengaturan tema yang memungkinkan anda untuk menyesuaikan warna, jenis tulisan, mengunggah logo anda, dan banyak lagi.  Jika anda ingin bereksperimen dengan tata letak yang berbeda, pilih tema yang terintegrasi dengan page builder atau memiliki cara alternatif untuk menyusun tata letak yang berbeda untuk halaman anda.

3. Mencari Sebuah Tema WordPress yang Responsif dengan Desain yang Menarik

Terakhir, carilah tema yang memiliki desain menarik yang mirip dengan tampilan situs web anda. Hal ini menghemat waktu yang anda butuhkan untuk menghabiskan waktu memodifikasi atau membangun tata letak halaman anda dari awal dan akan lebih mudah bagi anda untuk menyesuaikannya.

Setelah menemukan tema WordPress responsif yang anda sukai, yang harus anda lakukan adalah membeli dan mendownload file zip ke komputer anda. Temukan tema WordPress yang responsif pada ThemeForest atau Envato Elements:

Cara untuk Memulai dengan Situs Responsif Anda

Setelah mendapatkan tema anda, sekarang saatnya untuk mulai membangun situs web responsif anda. Anda harus membeli nama domain dan rencana menjadi pemilik dimana anda akan menginstal WordPress dan tema pilihan anda.

Ini juga merupakan ide yang baik untuk menyiapkan isi yang akan masuk ke situs anda sehingga anda cukup menyalin dan menempelkan konten (isi) ketika waktunya untuk mengunggahnya, daripada menghabiskan waktu untuk mencarinya.

1. Nama Domain

Langkah pertama adalah membeli nama domain untuk situs anda. Ini akan mengizinkan pengunjung dan pelanggan anda menemukan situs web anda di web. Jadi, Hal ini penting untuk memilih nama yang akan mewakili bisnis atau merek anda. Bila memungkinkan, cobalah memasangkan nama domain anda dengan ekstensi .COM. Anda dapat memilih untuk memberi nama situs web anda sama seperti nama bisnis anda atau anda dapat memilih nama anda sendiri jika anda membangun portofolio pribadi, blog, atau situs web resume (ringkasan).

2. Rencana Hosting (Penyimpanan Data)

Setelah anda menyelesaikan nama domain anda, anda harus memilih rencana Hosting (penyimpanan data) sehingga orang-orang dapat mengakses situs anda. Ada banyak pilihan ketika datang ke hosting (penyimpanan data), dari yang murah, rencana bersama untuk lebih mahal, dikelola rencana hosting (penyimpanan data) Wordpress.

Jika anda tidak yakin harus mulai dari mana, pertimbangkan Envato Hosted. Envato Hosted menawarkan hosting WordPress yang dikelola premium seharga $ 19USD (ditambah pajak yang berlaku) per bulan namun manfaat sebenarnya adalah mereka dapat menginstal dan menyiapkan WordPress sesuai dengan tema yang anda pilih dan mengurus detail teknis pemasangan situs anda.

Rencana Envanto Hosted juga mencakup:

  • Hingga 100.000 kunjungan bulanan dalam lintasan masuk, ruang disk 5GB, dan luas bidang bulanan sekitar 100GB.
  • Backup harian, keamanan server, dan pemantauan situs, serta dukungan berkelanjutan dari tim pakar WordPress kami.

3. Konten dan Gambar

Terakhir, luangkan waktu untuk menyiapkan semua konten (isi) yang akan masuk di situs anda. Ini biasanya mencakup gambar, salinan yang akan masuk ke halaman terpenting anda seperti halaman About (Tentang), Services (Layanan) atau Work With Us (Bekerjasama dengan Kami). Jika anda memiliki beberapa departemen, pertimbangkan termasuk data diri dan kepala bagian dari orang-orang yang mengelola setiap departemen sehingga pengunjung anda tahu siapa yang harus dihubungi.

Mempersiapkan konten (isi) anda terlebih dahulu memperbolehkan anda untuk menyalin dan menempelkannya di tempat konten (isi) demo yang tersedia dengan tema yang paling modern.

Cara Membuat Situs Anda

Sekarang setelah anda menyelesaikan semuanya pada tempatnya, saatnya membuat situs anda. Hal pertama yang harus anda lakukan adalah menginstal WordPress. Kemudian, anda dapat menginstal tema anda, plugin yang diperlukan, dan melanjutkan dengan pengaturan tema dan penyesuaian.

Untuk keperluan tutorial ini, kita akan menggunakan tema Wordpress Oshine responsif. Tema Oshine menampilkan desain modern dan responsif dan dapat digunakan untuk berbagai tempat.  Ini mencakup lebih dari 30 lebih demo yang dapat diimpor dengan sekali klik dan digunakan untuk mengatur situs anda dengan cepat.

Oshine responsive WordPress themeOshine responsive WordPress themeOshine responsive WordPress theme
Tema Oshine

1. Instal (Pemasangan) WordPress

Seperti yang telah disebutkan sebelumnya, langkah pertama adalah menginstal (memasang) WordPress.  Perusahaan hosting (Penyimpanan data) anda akan mengirimkan surat elektronik selamat datang yang berisi tautan ke dasbor akun hosting (penyimpanan data)  anda atau panel kontrol beserta nama pengguna dan kata sandi anda. Klik link dan masukkan informasi yang tersedia.

Setelah anda masuk, anda akan dapat mencari bagian yang diberi label WordPress Install, One-click Installers, Softaculous Installers, atau yang serupa. Temukan ikon WordPress, mengkliknya, dan ikuti petunjuknya. 

Dalam kebanyakan kasus, anda akan disambut dengan layar yang meminta anda memasukkan nama dan deskripsi situs anda, nama pengguna dan kata kunci yang anda inginkan, serta surat elektronik anda. Isi kolom dengan informasi anda lalu tekan tombol Install.

Setelah beberapa menit, WordPress akan terinstal (terpasang), yang berarti anda sekarang bisa masuk ke dashboard WordPress anda. Cukup kunjungi www.yoursitename.com/wp-admin (ganti yoursitename.com dengan nama domain anda yang sebenarnya) dan masukan username (Nama pengguna) dan kata kunci yang anda buat saat proses pengintalan (pemasangan).

2. Pemasangan Tema WordPress

Di dasbor WordPress anda, buka Appearance > Themes > Add new. Kemudian, klik Upload Theme.

Installing a responsive WordPress themeInstalling a responsive WordPress themeInstalling a responsive WordPress theme
Memasang tema Oshine

Temukan folder zip yang diunduh yang berisi file tema dan mengunggahahnya. Setelah pemasangan selesai, klik Activate.

3. Pemasangan Plugin yang Dibutuhkan

Setelah mengaktifkan tema, anda akan diumumkan pemberitahuan di dasbor dengan pesan bahwa plugin tertentu diperlukan agar tema memiliki semua fungsinya. Klik tautan Begin installing plugins akan diarahkan secara langsung ke layar pemasangan .

Install the required pluginsInstall the required pluginsInstall the required plugins
Memasang plugin yang dibutuhkan

Pilih semua plugin dan klik Install. Setelah itu, masuk ke Plugins > All plugins > Inactive dan pilih all inactive plugins lalu pilih opsi Activate dari menu bagian bawah.

Cara Menyesuaikan Situs Anda

Bagian selanjutnya dari pembuatan situs web anda melibatkan pengimporan konten (isi) demo, menggantinya dengan tema pengaturan anda sendiri, dan memodifikasi pengaturan tema untuk dimasukkan jenis huruf, warna, logo, dan lainnya.

1. Impor Konten (isi) Demo

Cara tercepat untuk menyiapkan situs anda adalah dengan memasang konten (isi) demo. Ini akan membuat tema anda terlihat seperti demo yang anda pilih, dengan semua halaman yang dibuat dan disiapkan sehingga semua yang harus anda lakukan adalah mengganti konten (isi).

Untuk memulai, buka tema WordPress Oshine responsif dan arahkan ke tab Import. Pilih versi demo yang diinginkan dan pilih konten (isi) yang ingin anda pasang. Dalam kasus kami, saya telah memilih semua konten (isi) dan mengklik tombol Install. Tunggu sampai proses selesai dan situs anda akan siap untuk penyesuaian. Lihatlah untuk memastikan proses impor berhasil.

importing demo contentimporting demo contentimporting demo content
Mengimpor konten (isi) demo di Oshine.

Mari kita lanjutkan dengan mengganti konten demo. Di dasbor WordPress anda, buka Pages (Halaman) dan klik tombol Edit pada halaman yang ingin anda kerjakan. Dalam contoh ini, kita akan memperbaiki beranda.

Tema WordPress Oshine responsif menggunakan pembangun halaman Tatsu untuk membuat tata letak semua halaman di situs anda sehingga mudah untuk memperbaikinya. Cukup klik tombol Edit With Tatsu dan anda dapat memodifikasi tata letak, menambahkan modul tambahan, dan banyak lagi.

Tatsu EditorTatsu EditorTatsu Editor
Editor Tatsu

Untuk mengedit elemen pada halaman anda, cukup klik pada bagian halaman yang ingin anda edit, masukkan teks anda sendiri dan sesuaikan pengaturan sesuai dengan keinginan anda. Anda juga dapat menambahkan elemen tambahan seperti kotak teks, tombol, ikon, video, gambar, dan lainnya.

modulesmodulesmodules
Menambahkan modul ke tema WordPress yang responsif.

2. Penyesuaian Tampilan Visual

Setelah Anda selesai mengganti konten (isi) dengan konten (isi) anda sendiri, saatnya untuk menampilkan tampilan visual situs anda. Pergi ke Oshine Options untuk mulai menyesuaikan situs anda. Anda akan melihat ada beberapa pilihan di sini.

Anda dapat mengunggah logo dan gambar latar anda sendiri, menyesuaikan jenis huruf yang digunakan di situs anda, mengontrol gaya mobile (ponsel), mengatur informasi yang ditampilkan di bagian bawah halaman dan bagian atas halaman, dan banyak lagi. Anda juga dapat menyesuaikan setelan default untuk gaya global, memasukkan informasi kontak anda serta skrip pelacakan seperti kode Google Analytics dan mengoptimalkan kinerja situs anda dengan meminimalkan gaya halaman dan skrip.

Cara Membuat Tema Situs yang Responsif dan Alasan untuk Melakukannya

Menggunakan sebuah tema pra pembuatan WordPress adalah cara terbaik untuk menghemat waktu dan memastikan situs anda responsif. Namun, Anda dapat membawa situs anda ke tingkat berikutnya dengan membangun tema WordPress responsif anda sendiri dari awal.

Meskipun ini mungkin tampak menakutkan, ini memberikan anda kendali tertinggi atas desain dan fitur situs anda. Jika anda penasaran cara membuat tema responsif anda sendiri atau ingin mempelajari lebih lanjut tentang desain situs yang responsif, berikut adalah beberapa tutorial untuk membantu anda memulai.

1.       Desain Web Responsif untuk Pemula

Kursus ini memandu anda melalui dasar-dasar desain responsif, menjelaskan pendekatan mobile-first (aktif-pertama) dan tata letak yang berbeda yang digunakan dalam desain web responsif serta menangani topik yang lebih terkini seperti memastikan gambar anda responsif dan menggunakan penggunaan media untuk mengendalikan tata letak anda website untuk berbagai perangkat.

Membangun sebuah Tema WordPress Telpon Selular Responsif Pertama

Tutorial langkah-demi-langkah ini memandu anda melalui proses menggunakan permulaan tema dan mengubahnya menjadi responsif, dengan mengingat pendekatan mobile-first (aktif-pertama). Anda akan belajar menambahkan gaya untuk perangkat seluler dan transisi untuk menata tema anda untuk perangkat desktop.

Tujuh Plugin untuk Membantu Pengguna Telepon Selular Anda

Di berita ini, Anda akan menemukan tujuh plugin WordPress yang bermanfaat yang akan mengoptimalkan situs anda untuk perangkat telepon selular; dari memastikan gambar dan widget anda responsif terhadap plugin yang disertakan khusus untuk memastikan situs anda terlihat bagus di perangkat seluler, meskipun tema anda belum responsif.

Memulai dengan Situs Responsif Anda

Membuat situs web responsif mungkin tampak menakutkan tapi tema WordPress yang responsif  membuat tugas itu lebih mudah, bahkan untuk pemula yang lengkap.    Gunakan tutorial kami di atas sebagai referensi dan jelajahi sumber tambahan tentang desain web responsif. Dan jika anda memerlukan tema WordPress yang responsif, lihat koleksi yang berkualitas tinggi, tema Wordpress responsif untuk industri apa pun. 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.