Mudah!, Installasi Tema Website dan Konfigurasi Halaman WordPress

Installasi Tema dan Konfigurasi Elementor Website

Langkah 1 – Login

Masuk ke laman login akun portofolio website kalian dengan mengunjungi link folioku.id/wp-admin. Silahkan masuk dengan akun yang diberikan malalui email.

Langkah 2 – Installasi Tema Website

Installasi Tema Website adalah langkah penting dalam mendesain situs Anda. Pastikan Anda mengikuti semua langkah dengan benar untuk hasil yang optimal.

Selama proses Installasi Tema Website, Anda mungkin juga ingin mempertimbangkan tema lain yang sesuai dengan kebutuhan situs Anda.

Pilih menu Apperance -> pilih tema Blocky dengan klik Activate. Selanjutnya ikuti perintah yang ada sampai pemasangan template terpasang.

Setelah menyelesaikan Installasi Tema Website, Anda dapat melanjutkan ke langkah konfigurasi berikutnya.

Pastikan untuk memeriksa kembali semua pengaturan yang relevan setelah Installasi Tema Website dilakukan.

Install Tema

Tunggu beberapa saat sampai website berhasil diinstall oleh sistem.

Langkah 3 – Konfigurasi Website dengan Elementor

Buat atau Edit Halaman

Untuk membuat halaman baru, pergi ke Pages > Add Pages.

Edit Halaman

Untuk mengedit halaman yang sudah ada, pergi ke Pages > All Pages, lalu arahkan kursor ke halaman yang ingin Anda edit dan klik Edit with Elementor.

Edit With Elementor

Klik ‘Edit with Elementor’: Setelah Anda berada di halaman editor WordPress standar, Anda akan melihat tombol biru Edit with Elementor di bagian atas. Klik tombol ini untuk masuk ke antarmuka Elementor.

Mengenal antarmuka Elementor

Setelah Anda mengklik “Edit with Elementor”, Anda akan melihat antarmuka unik Elementor. Antarmuka ini terbagi menjadi dua bagian utama:

  • Area Konten (Kanan): Ini adalah pratinjau langsung dari website Anda. Semua perubahan yang Anda lakukan akan terlihat di sini secara real-time.
  • Panel Elementor (Kiri): Ini adalah tempat Anda menemukan semua elemen (widget) yang bisa Anda seret dan lepas, serta opsi pengaturan untuk bagian, kolom, dan widget Anda.
Antarmuka Elementor
Menggunakan Widget Dasar (Element)

Widget adalah blok bangunan utama di Elementor. Ada berbagai macam widget untuk teks, gambar, video, tombol, dan banyak lagi.

  1. Menambahkan Widget:
    • Di Panel Elementor (kiri), gulir ke bawah untuk melihat daftar widget yang tersedia.
    • Pilih widget yang ingin Anda gunakan (misalnya, Heading untuk judul atau Text Editor untuk paragraf).
    • Seret (Drag) widget tersebut dari Panel Elementor dan Lepas (Drop) ke area konten di sebelah kanan. Anda akan melihat area bergaris biru yang menandakan di mana widget akan ditempatkan.
  2. Mengatur Widget:
    • Setelah widget ditempatkan, klik widget tersebut di area konten. Panel Elementor di sebelah kiri akan berubah menampilkan pengaturan spesifik untuk widget tersebut.
    • Biasanya ada tiga tab pengaturan:
      • Content: Untuk mengubah isi widget (misalnya, teks judul, sumber gambar, tautan tombol).
      • Style: Untuk mengubah tampilan visual (misalnya, warna teks, ukuran font, padding, margin, border).
      • Advanced: Untuk pengaturan lebih lanjut seperti efek gerak, responsif, atribut ID/CSS kelas, dan lainnya.
    • Eksplorasi setiap tab untuk menyesuaikan widget sesuai keinginan Anda.

Membangun Struktur Halaman: Bagian dan Kolom

Setelah Installasi Tema Website, Anda dapat mulai menambahkan konten yang menarik untuk pengunjung situs Anda.

  1. Menambahkan Bagian Baru:
    • Di area konten, Anda akan melihat tombol “+” di bagian bawah atau di antara bagian-bagian yang sudah ada. Klik ini untuk menambahkan bagian baru.
    • Anda akan diminta untuk memilih struktur bagian (jumlah kolom) yang Anda inginkan, misalnya, satu kolom penuh, dua kolom, atau tiga kolom.
  2. Mengatur Kolom:
    • Setiap Bagian dapat berisi satu atau lebih Kolom. Anda bisa menyeret widget ke dalam Kolom ini.
    • Untuk mengubah ukuran Kolom, cukup seret pembatas antara kolom di area konten.
  3. Pengaturan Bagian/Kolom:
    • Klik ikon enam titik (Edit Section) di bagian atas Bagian untuk membuka pengaturannya di Panel Elementor.
    • Klik ikon kolom (Edit Column) di dalam Bagian untuk membuka pengaturan Kolom.
    • Seperti widget, Bagian dan Kolom juga memiliki tab Layout/Content, Style, dan Advanced untuk penyesuaian. Anda bisa mengatur latar belakang, padding, margin, border, dan lainnya.
Responsifitas dan Pratinjau

Sangat penting untuk memastikan website Anda terlihat bagus di semua perangkat (desktop, tablet, mobile).

  1. Mode Responsif:
    • Di bagian bawah Panel Elementor, klik ikon Monitor (Responsive Mode).
    • Anda akan melihat ikon desktop, tablet, dan ponsel. Klik ikon-ikon ini untuk melihat pratinjau website Anda di berbagai ukuran layar.
    • Anda bisa melakukan penyesuaian spesifik untuk setiap mode (misalnya, menyembunyikan widget tertentu di mobile, mengubah ukuran font).
  2. Pratinjau Perubahan:
    • Untuk melihat bagaimana website Anda akan terlihat di browser secara penuh, klik ikon Mata (Preview Changes) di bagian bawah Panel Elementor.

Menyimpan dan Mempublikasikan

Setelah Anda puas dengan desain Anda, saatnya menyimpan dan mempublikasikan.

  1. Menyimpan Draft:
    • Klik tombol panah ke atas di samping tombol “Update” atau “Publish” di bagian bawah Panel Elementor.
    • Pilih Save Draft untuk menyimpan pekerjaan Anda tanpa mempublikasikannya.
  2. Mempublikasikan/Memperbarui:
    • Klik tombol Publish (jika halaman baru) atau Update (jika halaman sudah ada) di bagian bawah Panel Elementor.
    • Setelah dipublikasikan/diperbarui, perubahan Anda akan terlihat langsung di website Anda.