7 Modul Webiste

Membuat Website Dengan
Elementor
Penulis:
Salim Hartono
M Abdul Azis M M
Penyunting:
Desain Sampul:
Azrul Haswad
Penerbit:
Alamat Penerbit:
Cetakan Pertama:
Hak cipta dilindungi oleh undang-undang,. Dilarang mengutip atau

memperbanyak sebagian atau seluruh isi buku ini tanpa izin tertulis dari
penerbit.
Kata Pengantar
Segala puji bagi Allah Rob semesta Alam yang memberi kita nikmat iman dan islam,
serta nikmat kesehatan sehingga modul praktikum Pemrograman Web ini bisa selesai. Tak
lupa sholawat serta salam kita limpah curahkan kepada Baginda yang mulia, Rasulullah
shallallahu ‘alaihi wasallam, beserta keluarga, sahabat dan para pengikutnya yang setia
mengikuti sunnah sunnah beliau hingga akhir zaman, dan semoga kita bisa mendapat
syafa’atnya kelak di hari akhir.
Modul ini merupakan salah satu bahan ajar pendukung untuk mata pelajaran Pemrograman
Web, dari modul ini diharapkan siswa dapat dengan mudah mempelajari, memahami dan
mempraktekkan materi-materi yang diajarkan di dalam kelas. Meskipun memiliki judul
“Pemrograman Web” tapi di dalam modul ini tidak akan menjelaskan tentang bahasa
pemrograman, karena yang akan dipelajari dalam pengembangan web disini lebih fokus
ke penggunaan CMS, apa itu CMS? CMS (Content Management System) merupakan
sebuah software web yang bertujuan untuk memudahkan dalam mengelola konten dalam
sebuah website tanpa harus memiliki pengetahuan tentang bahasa pemrograman.
Kami sadar bahwa penulisan modul ini bukan merupakan buah hasil kerja keras penulis
sendiri. Ada banyak pihak yang sudah berjasa dalam membantu penulis di dalam
menyelesaikan modul ini, seperti pengambilan data, pemilihan materi, soal, dan lain-lain.
Maka dari itu, penulis mengucapkan banyak terimakasih kepada semua pihak yang telah
membantu memberikan wawasan dan bimbingan sebelum maupun ketika menulis buku
panduan ini.
Penulis juga sadar bahwa buku yang dibuat masih belum bisa dikatakan sempurna. Maka
dari itu, penulis meminta dukungan dan masukan dari para pembaca, agar kedepannya
penulis bisa lebih baik lagi di dalam menulis sebuah modul pembelajaran.
Bogor, 22 Juni 2021
Tim Penulis
Modul Website dengan Elementor iii

Prakata
Alhamdulillahirabbil’aalamin, segala puja dan puji syukur penulis panjatkan kepada
Allah Yang Maha Pengasih dan Maha Penyayang. Tanpa karunia-Nya, mustahillah
modul ini terselesaikan tepat waktu mengingat tugas dan kewajiban lain yang bersamaan
hadir. Penulis benar-benar merasa tertantang untuk mewujudkan modul. Modul ini ditulis
berdasarkan keinginan penulis yang sering mengamati ketidaktahuan siswa terhadap
perkembangan teknologi terkhususnya tentang web. Para siswa begitu sering mencari
hal-hal yang kurang bermanfaat di internet. Itu adalah salah satu bentuk yang kurang
baik bagi siswa. Kebiasaan negatif ini sebenarnya dapat diarahkan untuk menuju kepada
keterampilan pembuatan website. Terlebih, pembelajaran di SMP IDN juga mencantumkan
materi tentang pembuatan website. Berdasarkan kondisi tersebut, penulis berusaha
menyusun modul ini dengan memuat beragam cara pembuatan website. Terselesaikannya
penulisan modul ini juga tidak terlepas dari bantuan beberapa pihak. Karena itu, penulis
menyampaikan terima kasih kepada SMP IDN karena telah memberikan kesempatan agar
bisa membuat modul ini. Dengan kepercayaan tersebut, penulis berkeyakinan bahwa itu
dapat mendukung penulis dalam upaya meningkatkan kualitas diri dan karya untuk waktu
yang akan datang. Semua bentuk kemudahan yang telah diberikan benar-benar bermanfaat
bagi penulis untuk belajar menjadi pribadi yang lebih baik. Selain itu, penulis juga
menyampaikan rasa terima kasih kepada segenap Guru-Guru IT SMP IDN untuk semua
bantuan, motivasi, dan saran-sarannya. Meskipun telah berusaha untuk menghindarkan
kesalahan, penulis menyadari juga bahwa buku ini masih mempunyai kelemahan sebagai
kekurangannya. Karena itu, penulis berharap agar pembaca berkenan menyampaikan
kritikan. Dengan segala pengharapan dan keterbukaan, penulis menyampaikan rasa
terima kasih dengan setulus-tulusnya. Kritik merupakan perhatian agar dapat menuju
kesempurnaan. Akhir kata, penulis berharap agar buku ini dapat membawa manfaat
kepada pembaca. Secara khusus, penulis berharap semoga buku ini dapat menginspirasi
generasi bangsa ini agar menjadi generasi yang tanggap dan tangguh. Jadilah generasi
yang bermartabat, kreatif, dan mandiri.
Bogor, 22 Juni 2021

Tim Penulis
iv SMP IDN
Daftar Isi
Kata Pengantar...............................................................................................................iii
Prakata............................................................................................................................iv
Daftar Isi........................................................................................................................v
Daftar Gambar...............................................................................................................vi
BAB I - Website dan Hosting......................................................................................1
A. Tujuan Pembelajaran........................................................................................1
B. Indikator Pencapaian........................................................................................1
C. Website dan Hosting.........................................................................................2
D. Tugas................................................................................................................19
BAB II - Website Masjid.............................................................................................20
C. Membuat Subdomain.......................................................................................21
D. Menginstall Wordpress.....................................................................................22
E. Membuat Website dengan Wordpress...............................................................28
BAB III - Website Sekolah..........................................................................................96
C. Install Wordpress di Subdomain.......................................................................97
D. Membuat Website Menggunakan Elementor...................................................107
BAB IV - Personal Website.........................................................................................187
C. Install Wordpres di Domain Utama..................................................................188
D. Elementor.........................................................................................................197
Modul Website dengan Elementor v

Daftar Gambar
Gambar 1........................................................................................................................2
Gambar 2........................................................................................................................21
Gambar 3........................................................................................................................97
Gambar 4.1.....................................................................................................................188
vi SMP IDN
BAB I - Website dan Hosting
A. Tujuan Pembelajaran
Melalui Problem Based Learning, Discovery Learning, Project Based Learning,
ceramah, diskusi, dan eksperimen peserta didik mampu memahami materi tentang
penggunaan, jenis, dan fungsi dalam membuat website dan memenuhi indikator
pencapaian kompetensi dalam materi ini serta memiliki karakter yang religius, sopan,
jujur, disiplin, tanggung jawab.
B. Indikator Pencapaian
Nah, di setiap pembelajaran pasti ada tujuan yang harus dicapai, secara kemampuan
ada beberapa indikator pencapaian yang harus dicapai di bab ini, yaitu kemampuan
kognitif (kemampuan dalam memahami suatu ilmu yang dipelajari), dan
kemampuan motorik (kemampuan dalam mempraktekkan suatu ilmu yang sudah
dipelajari).
1. Kemampuan Kognitif
a. Memahami jenis website
b. Menjelaskan jenis website Blog
c. Menjelaskan jenis website company profile
d. Menjelaskan jenis website personal branding
e. Menjelaskan pengertian hosting
f. Memahami fungsi hosting
g. Memahami fungsi domain
h. Memahami jenis hosting
i. Memahami jenis domain
j. Memahami cara daftar akun di idcloudhost
k. Memahami cara mendapatkan hosting di idcloudhost
l. Memahami cara mendapatkan domain di idcloudhost
m. Memahami cara membuat domain dan subdomain
2. Kemampuan Motorik
a. Terampil mempresentasikan jenis-jenis website
b. Terampil dalam mendemonstrasikan website blog
c. Terampil dalam mendemonstrasikan website company profile
d. Terampil dalam mendemonstrasikan website personal branding
Modul Website dengan Elementor 1

e. Membuat akun di idcloudhost
f. mendaftar hosting di idcloudhost
g. mendaftar domain di idcloudhost
h. Membuat domain dan subdomain di idcloudhost
C. Website dan Hosting

1. Website
Kebanyakan atau hampir semua orang sering mendengar kata web atau
website, tapi apakah orang tersebut juga tahu pengertian atau definisi dari website
tersebut? Website adalah suatu halaman web yang saling berhubungan yang
umumnya berisikan kumpulan informasi berupa data teks, gambar, animasi, audio,
video maupun gabungan dari semuanya yang biasanya dibuat untuk personal,
organisasi dan perusahaan.
Gambar 1.1 Dashboard website IDN Boarding School
Website IDN bisa dikunjungi di link berikut : https://idn.sch.id/. Pada

website tersebut terdapat informasi yang disajikan kepada setiap pengunjung,
mulai dari profil sekolah, PSB (Penerimaan Siswa Baru), informasi terkait
kegiatan akademis di dalamnya, bagaimana cara menghubungi IDN dan banyak
lagi. Website IDN masuk ke dalam jenis website company profile, ada beberapa
jenis website yang harus diketahui sebelum mulai masuk menjadi seorang Web
Development. Hal itu bertujuan agar seorang web development mampu menganalisa
kebutuhan dari seorang customer/Pelanggan yang membutuhkan sebuah website
untuk kepentingan pribadi/organisasinya.
2. Hosting dan Domain
2 SMP IDN
Web Hosting atau biasa disebut hosting itu berfungsi sebagai tempat
penyimpanan data atau file dari sebuah aplikasi atau website secara online, sehingga
bisa diakses oleh orang banyak dengan jaringan internet. Jadi langkah pertama
untuk membangun sebuah website agar bisa online adalah dengan memiliki sebuah
web hosting. Sedangkan Secara singkat, domain adalah alamat website. Alamat
yang kita tuliskan pada URL bar browser favorit kita dengan berakhiran .com, .co.
id, .id, .ac.id itulah yang disebut dengan nama domain. Salah satu penyedia jasa
web hosting dan domain yang cukup terkenal adalah idcloudhost.
a. Mendaftar akun hosting di idcloudhost,
1. Untuk mendaftar akun di idcloudhost, pertama kunjungi website berikut
https://s.id/daftarserver
2. Klik tombol Produk kemudian pilih Cloud Hosting
Gambar 1.2 Dashboard website idcloudhosting
Maka akan diarahkan ke halaman berikut :
Gambar 1.3 Dashboard website paket hosting
3. Setelah itu kita scroll kebawah, di bagian “Harga Hosting” kemudian

pilih paket hosting yang “Starter Pro” pilih paket “Tahunan” kemudian
klik tombol “Pesan Sekarang”

Gambar 1.4 Konfirmasi pembelian paket hosting
4. Setelah kita menekan tombol “Pesan Sekarang” maka kita akan diarahkan
ke halaman berikut:
Gambar 1.5 Membuat nama domain
a. pertama pilih register a new domain

b. buat nama domain yang sesuai kebutuhan, disini penulis
menggunakan nama “santriidn”. silahkan sesuaikan dengan
kebutuhan masing-masing.
c. kita disini menggunakan domain “.com” (dot com)
d. klik tombol check, jika domain kita tersedia maka akan muncul
seperti gambar berikut:
4 SMP IDN
Gambar 1.6 Konfirmasi nama domain
e. Klik tombol “Continue” untuk melanjutkan.
catatan : tidak boleh membuat nama domain yang mengandung

unsur game, anime, porno dan sejenisnya yang banyak terdapat
keburukan didalamnya.
5. Setelah tombol “continue” di tekan, kita akan masuk ke halaman

berikutnya :
a. pilih mode pembayaran yang tahunan/annually :
Gambar 1.7 Mode pembayaran
b. Location pilih Indonesia

Gambar 1.8 Pemilihan lokasi
c. Untuk penambahan fitur/addons pilih yang none saja.
Gambar 1.9 Fitur penambahan addons
d. Untuk additional service, kita biarkan teruncheck seperti seperti

gambar berikut:
Gambar 1.10 Additional services
e. Dibagian Order Summary, check kembali paket hosting dan

harga, pastikan sudah sesuai dengan yang kita pilih di awal.
Kemudian klik Continue untuk melanjutkan
6 SMP IDN
Gambar 1.11 Order Summary
6. Pada bagian (¾) Domains Configurations, biarkan kosong seperti gambar

berikut kemudian klik tombol “Continue” di bagian pojok kanan bawah:
Gambar 1.12 Domains Configuration
7. Setelah kita tekan tombol “Continue” pada halaman sebelumnya, sekarang

kita masuk ke halaman Review dan Checkout.
a. Pastikan harga hosting dan domain sudah sesuai.

Gambar 1.13 Review Hosting dan Domain
b. Pilih mata uang untuk pembayaran dan masukan kode promo jika
kita memiliki kode promo, jika tidak biarkan kosong.
Gambar 1.14 Pemilihan mata uang dan kode promo
c. Pada bagian “Billing Detail”, buat kita yang sudah memiliki

akun silahkan ganti ke “Existing Customer Login” jika belum
memiliki akun pilih “Create a New Account”, isi form sesuai
dengan permintaan.
8 SMP IDN
Gambar 1.15 Personal Informations
Note:
Untuk nomer telpon bisa menggunakan nomer guru IT yang
mengajar di kelas.
d. Pada bagian billing address, isikan data sama persis seperti

gambar berikut.
Gambar 1.16 Billing Address
e. Pada bagian additional required information isi seperti pada

gambar berikut, pada form whatsapp number kita kosongkan saja.
Gambar 1.17 Additional required information
f. Pada bagian Account Security, masukan password yang kuat. tips

untuk password yang kuat adalah menggunakan kombinasi huruf
besar dan kecil, angka dan simbol.

Gambar 1.18 Account Security
g. Pada bagian Domain Registrant Information kita skip dan

biarkan seperti pada gambar berikut.
Gambar 1.19 Domain Registrant Information
h. Pada bagian Payment Details, pilih Bank Syariah Mandiri

sebagai metode transfer pembayaran.
Gambar 1.20 Metode pembayaran

note:
Konfirmasi kepada guru sebelum memilih metode pembayaran,
karena metode pembayaran setiap guru bisa berbeda, tapi penulis
lebih merekomendasikan Bank Syariah Mandiri.
10 SMP IDN
i. Pada bagian yang lain, Join Our Mailing List dan Additional
Notes, kita biarkan kosong seperti gambar berikut.
Gambar 1.21 Join Our Mailing List dan Additional
j. Pada bagian Order Summary, pastikan barang yang kita beli sudah
benar, ceklis pada bagian term on service, dan klik Checkout
untuk melakukan konfirmasi pembayaran. Bisa dilihat seperti pada
gambar berikut.
Gambar 1.22 Konfirmasi pembayaran
Note:
Pastikan harga yang harus dibayar sudah sama seperti instruksi,
jika tidak maka tidak akan diproses.
k. Setelah melakukan checkout, maka sistem akan mengecek apakah

data yang kita masukan sudah benar, jika belum benar maka akan
keluar peringatan untuk mengisi data dengan benar. Jika berhasil
maka kita akan diberikan invoice seperti gambar berikut.

Gambar 1.23 Invoice Pembayaran Cloud
Pada gambar diatas terdapat beberapa informasi, nomor invoice,

detail pembayaran, metode transfer dan sebagainya. Invoice
tersebut juga sudah di kirim ke email yang kita gunakan sebelumnya
untuk mendaftar.
l. Silahkan kirim nomor invoice kalian masing masing ke link

berikut, https://s.id/invoice-me. Jangan sampai salah memasukan
nomor invoice.
Gambar 1.24 Nomor Invoice
12 SMP IDN
Gambar 1.25 Harga +kode Unik
Note:
Konfirmasi pembayaran akan dilakukan oleh guru IT masing-
masing paling lama 1x24 Jam.
Sampai disini kita sudah berhasil melakukan pendaftaran akun di

idcloudhost, langkah selanjutnya adalah menunggu pembayaran cloud
oleh guru IT kita masing-masing.
b. Tugas Kelompok
Sebagai bahan evaluasi belajar yang sudah kita lakukan, sekarang saatnya
menguji seberapa jauh pemahaman kita terhadap materi yang sudah disampaikan
sebelumnya. ikuti petunjuk dibawah ini, kemudian kerjakan dengan waktu kurang
lebih 30 menit.
Tugas Kelompok :
a. Buatlah sebuah kelompok maksimal terdiri dari 2-3 siswa.
b. Buatlah sebuah presentasi singkat dalam bentuk google slide, maksimal 4 slide.
c. Materi yang disampaikan adalah :
- apa itu website
- buatlah perbedaan antara website blog, company profile, dan website
personal branding
d. Waktu mengerjakan adalah 30 menit
e. Presentasikan karyamu di depan kelas dan teman-teman yang lain.
f. Waktu presentasi tidak lebih dari 5 menit perkelompok.
g. Kumpulkan link google slide pada link berikut https://s.id/tugas-kelompok1

3. cPanel
Ok, kita lanjutkan pembahasan dalam membuat hosting, tapi sebelum kita masuk
ke dalam pembahasan cPanel, ada beberapa hal yang harus kita lakukan untuk
verifikasi akun kita.
1. Cek email kita, pastikan ada email yang dikirim oleh idCloudhost
Gambar 1.26 Email Verifikasi
2. Klik tombol “Verify your Email Address” untuk memverifikasi akun

idCloudhost kita.
3. Maka kita akan diarahkan ke halaman verifikasi, kemudian klik tombol
“Continue to Client Area” yang ada pada halaman tersebut.
Gambar 1.27 Tombol Client
4. Setelah kita menekan tombol client, maka kita akan diarahkan ke halaman
dashboard client kita, terdapat beberapa informasi tentang server kita.
14 SMP IDN
Gambar 1.28 Dashboard Client
Informasi pada gambar di atas :

a. Kotak A - Berisi service/layanan apa saja yang kita gunakan di idcloudhost
b. Kotak B - Berisi Domain yang kita miliki, disini kita hanya memiliki satu
domain, yaitu satriidn.com
c. Kotak C - berisi tagihan/invoice yang belum dibayar
d. Kotak D - berisi tiket yang kita miliki, disini kita belum memiliki tiket
apapun.
e. Kotak E - Layanan aktif yang kita miliki, untuk masuk ke dalam dashboard
Managing, silahkan klik produk yang ada pada kotak E.
5. Sekarang kita sudah berada di dashboard managing, untuk masuk ke dalam

cPanel silahkan klik tombol “Login to cPanel”
Gambar 1.29 Dashboard Managing

6. Setelah kita menekan tombol “Login To cPanel” maka kita akan masuk ke
halaman dashboard cPanel.
Gambar 1.30 Dashboard cPanel
Setelah kita berhasil masuk ke halaman cPanel, kita tentu harus tau apa
itu cPanel. cPanel adalah panel kontrol yang digunakan untuk melakukan
pengaturan pada layanan web hosting yang meliputi manajemen file, database,
domain, security, software dan konfigurasi lainnya.
Secara sederhana, fungsi cPanel adalah untuk memudahkan pengelolaan

website yang ada dalam akun hosting Anda. cPanel sangat memudahkan
konfigurasi yang berkaitan dengan domain dan hosting. Di samping itu,
cPanel juga dapat menambahkan beberapa aplikasi tambahan yang perlu
dipasang guna mendukung website agar bekerja dengan baik.
Setelah kita tahu pengertian dan fungsi, sekarang mari kita berkenalan dengan
fitur-fitur dari cPanel. Sebenarnya ada banyak banget fitur-fitur di cPanel, tapi
kita hanya akan membahas beberapa saja yang akan sering kita gunakan.
a. Fitur Pengelolaan File Website
Secara garis besar, cPanel menyediakan fitur pengelolaan file yang bisa
digunakan untuk menghapus, menyunting, dan menyalin file website yang
ada di hosting. Selain itu, terdapat juga pengaturan FTP yang bisa Anda
gunakan untuk mengakses file website dari aplikasi FTP Client tanpa harus
login cPanel terlebih dahulu.
16 SMP IDN
Gambar 1.31 Fitur Pengelolaan File Website
● File Manager ─ dipakai untuk mengunggah, membuat, menghapus,

dan mengubah file tanpa perlu FTP atau aplikasi lainnya;
● Images ─ dipakai untuk mengatur file berbentuk gambar. Di
sini, Anda bisa mengubah ukuran gambar dan mengubah format
gambar;
● Directory Privacy ─ digunakan untuk membatasi akses pengguna
ke pengaturan tertentu lewat password;
● Disk Usage ─ menampilkan persentase penggunaan disk;
● Web Disk ─ dipakai untuk mengakses files di cPanel seperti halnya
local drive di sebuah komputer;
● FTP Accounts ─ dipakai untuk mengakses dan mengelola File
Transfer Protocol (FTP);
● FTP Connections ─ digunakan untuk menghubungkan atau
memutuskan koneksi FTP;
● Backup ─ digunakan untuk melakukan backup konten website dan
konten cPanel dalam bentuk zip;
● File Restoration ─ dipakai untuk merestorasi file yang di-backup;
● Backup Wizard ─ gunakan fitur ini untuk mendapat bantuan ketika
melakukan backup.
b. Fitur pengelolaan Domain

Salah satu menu cPanel mengizinkan kita untuk melakukan pengaturan
domain. Menu tersebut berisi fitur addon domain, subdomain, redirect, dan
lain sebagainya. Fitur yang tersedia di sana dapat kita manfaatkan untuk
mengatur bagaimana cPanel menangani permintaan pada saat browser
mengakses domain kita.

Gambar 1.32 Fitur Pengelolaan Domain
● Site Publisher ─ dapat dipakai untuk membuat website dengan

berbagai pilihan template. Opsi ini juga bisa dipakai untuk
menampilkan informasi kontak dengan jelas;
● Addon Domains ─ dipakai untuk menambahkan domain dalam
satu akun cPanel;
● Subdomains ─ dipakai untuk menambahkan subdomain dalam
akun cPanel;
● Aliases ─ dipakai untuk menambahkan URL alias untuk sebuah
website;
● Redirects ─ dipakai untuk melakukan redirect dari satu halaman
spesifik ke sebuah website. Fitur ini juga dapat dipakai untuk
menambahkan URL versi lebih singkat pada sebuah website;
● Simple Zone Editor ─ dipakai untuk membuat dan mengedit A
dan CNAME records;
● Advanced Zone Editor ─ buat, ubah, atau hapus A, AAAA,
CNAME, SRV, and TXT dari DNS records;
● Zone Editor ─ merupakan fungsi gabungan dari Simple Zone
Editor dan Advanced Zone Editor. Dipakai untuk menambahkan,
mengedit, atau menghapus A, AAAA, CNAME, SRV, MX, dan
TXT dari DNS records.
c. Fitur Softaculous Apps Installer

Softaculous adalah auto installer yang ada di dalam panel hosting. Ia
berfungsi untuk mempermudah kita melakukan instalasi berbagai CMS
(Content Management System). Dengan adanya Softaculous, kita juga
bisa melakukan instalasi aplikasi secara otomatis di mana kita tidak perlu
melakukan instalasi secara manual.
18 SMP IDN
Gambar 1.32 Fitur Softaculous Apps Installer
Diatas adalah beberapa fitur-fitur dari cPanel yang akan sering kita
gunakan, sebenarnya masih ada lagi fitur-fitur yang tidak kalah penting
untuk dibahas. Seperti SEO And Marketing Tools, Database, Security dan
lainya. Tapi saat ini kita mulai dengan tiga fitur yang paling sering kita
gunakan nanti.
Ok, sampai disini kita sekarang sudah bisa membuat dan memiliki akun
hosting, mengerti sebagian fungsi dari cPanel. pada bab berikutnya kita
akan langsung praktek membuat website.
D. Tugas
Tugas Individu:
a. Buatlah sebuah presentasi singkat dalam bentuk google slide, maksimal 4
slide.
b. Materi yang disampaikan adalah :
- jelaskan secara singkat tentang hosting yang sudah kamu pelajari
- jelaskan secara singkat tentang domain yang sudah kamu pelajari
- jelaskan secara singkat tentang cPanel yang sudah kamu pelajari
c. Waktu mengerjakan adalah 30 menit
d. Gunakan bahasamu sendiri
e. Tidak diperkenankan menggunakan materi orang lain, kerjakan sendiri.
f. Presentasikan karyamu di depan kelas dan teman-teman yang lain.
g. Waktu presentasi tidak lebih dari 5 menit per siswa.
h. Kumpulkan link google slide pada link berikut https://s.id/tugas-individu1

BAB II - Website Masjid
kognitif (kemampuan dalam memahami suatu ilmu yang dipelajari), dan kemampuan
motorik (kemampuan dalam mempraktekkan suatu ilmu yang sudah dipelajari).
a. Menjelaskan langkah-langkah mendaftar domain/subdomain.
b. Memahami cara instal Wordpress di hosting idcloudhost
c. Menjelaskan langkah-langkah instal wordpress di idcloudhost
d. Memahami theme yang sesuai dengan kebutuhan website.
e. Memahami perbedaan URL admin dan user
f. Memahami cara install plugin di wordpress
g. Menjelaskan cara install plugin
h. Memahami cara membuat post dan laman di wordpress
i. Menjelaskan cara post artikel dan laman di wordpress.
j. Memahami cara edit theme di wordpress
k. Menjelaskan cara edit theme di wordpress.
a. Menggunakan di hosting idcloudhost
b. Menerapkan tema yang sesuai dengan kebutuhan pada website
c. Menggunakan url admin untuk masuk ke dashboard wordpress
d. Menggunakan plugin di wordpress
e. Membuat posting artikel dan laman di wordpress
f. Memodifikasi tema sesuai kebutuhan
g. Terampil mempresentasikan jenis-jenis website
h. Terampil dalam mendemonstrasikan website masjid.
20 SMP IDN
C. Membuat Subdomain
Setelah kita tadi belajar apa itu cPanel dan fungsi dari masing-masing bagiannya.
Maka, mari kita langsung saja membuat website pertama yaitu website Masjid Al-
Muhajirin.
Subdomain adalah ekstensi dari sebuah domain. Subdomain memiliki fungsi yang
terpisah dari domain utama, sehingga dapat kita gunakan untuk menginstal website
lain. Format dari subdomain adalah seperti ini: subdomain.domainkita.com. Nah,
cara membuat subdomain akan kita bahas langkah demi langkah dalam bab ini.
Contohnya, kita sudah memiliki domain santriidn.com. Kemudian, kita ingin membuat
website masjid dan sekolah untuk domain utama. Masjid dan sekolah ini dapat kita
letakkan di domain utama kita menggunakan subdomain. Berikut cara membuat
Subdomain:
1. Login cPanel, pada bagian Domains pilih Subdomains untuk menambahkan
Subdomain.
Gambar 2.1 Menu Subdomains
2. Setelah pilih Subdomains, isilah seperti ini:
Gambar 2.2 Membuat Subdomain
a. Subdomain: Isi dengan nama subdomain yang ingin kita gunakan. Pada
bagian ini hanya ekstensi subdomain yang dimasukkan.

b. Domain: Silakan pilih domain yang ingin kita tambahkan subdomain tapi
pada bagian ini akan terisi otomatis karena kita hanya punya satu domain.
c. Dokumen Root: Folder dari subdomain. Folder ini dibuat dalam direktori
public_html. Pada bagian ini juga akan terisi otomatis setelah kita sudah isi
bagian Subdomain dan Domain.
d. Setelah sudah terisi, pilih Create. Dan akan muncul pesan seperti ini:
Gambar 2.3 Notifikasi Berhasil
3. Pastikan Subdomain sudah berhasil dibuat. Cek pada bagian Modify a Subdomain,
apakah subdomain yang sebelumnya kita buat sudah berhasil dibuat.
Gambar 2.4 Mengecek Subdomain
D. Menginstall Wordpress
Tadi kita sudah selesai membuat Subdomain, sebenarnya Subdomain sudah bisa
dibuka tetapi tampilannya hanya folder saja dan ini tidak bisa disebut sebagai website.
Maka dari itu salah satu cara kita untuk membuat website adalah dengan menginstall
wordpress.
1. Kembali lagi ke cPanel, pada bagian Software pilih Wordpress Manager by
Softaculous .
Gambar 2.5 Memilih Wordpress
22 SMP IDN
2. Setelah, klik Install. Karena kita belum menginstall Wordpress.
Gambar 2.6 Menginstall Wordpress
3. Akan terlihat tampilan seperti ini dan isilah sesuai dengan keinginan:
Gambar 2.7 Setting Penginstalan Wordpress
a. Choose the version you want to install: Versi wordpress yang akan kita
install, tapi disini kita memakai versi yang terbaru dari wordpress.
b. Choose Installation URL: Di Link mana kita akan mau menginstall
wordpress. Disana terlihat dua link yaitu
1. https://santriidn.com sebagai domain
2. https://almuhajirin.santri.id.com sebagai sub domain
Kita pilih yang link kedua, karena kita mau menginstall wordpressnya
disana. Oh ya, dibagian In directory seharusnya ada isinya yaitu WP. Kita
hapus saja WPnya, karena akan berpengaruh ke link websitenya.

Gambar 2.8 Setting Penginstalan Wordpress 2
c. Site Name: Nama Website (biasanya akan tampil di sebelah kiri atas)
d. Site Description: Deskripsi Website
e. Admin Username: Username Admin
f. Admin Password: Password Admin
g. Admin Email: Email yang akan digunakan admin.
h. Select Language: Memilih bahasa yang akan digunakan, disini kita

memakai English.
i. Classic Editor: Sebuah plugin yang dikelola oleh tim Wordpress untuk
memulihkan editor Wordpress yang sebelumnya.
24 SMP IDN
j. Advanced Options: Kita tidak perlu mengetahuinya, karena didalam

Advanced Options terdapat pengaturan untuk backup database, auto
upgrade wordpress plugin dan lain-lain yang terkait dengan upgrade.
k. Select Theme: Kita perlu memilih tema untuk website, kita pilih tema
Rugby.
Gambar 2.11 Memilih Tema
l. Demo: Kita bisa melihat tampilan tema terlebih dahulu sebelum

menginstalnya.

m. Select Theme: Atau bisa langsung memilih temanya.
Gambar 2.12 Notifikasi Memakai Gambar
n. Klik Yes. Untuk memakai semua gambar yang ada di tema.
Gambar 2.13 Menginstall Tema
o. Clear selection: Jika kita ingin mengganti tema, bisa memilih Clear
selection.
p. Install: Jika ingin menggunakan tema yang sudah dipilih, klik Install.
4. Kita sebelumnya sudah selesai untuk mengatur penginstalan wordpress. Maka,

kita hanya menunggu proses installnya selesai.
26 SMP IDN
Gambar 2.14 Menunggu Proses Install
5. Maka, akan terlihat tampilan seperti ini:
Gambar 2.15 Proses Install Wordpress Berhasil
a. Link yang menuju website

b. Link yang menuju dashboard Wordpress

E. Membuat Website dengan Wordpress
Setelah tadi kita sudah melewati step by step dimulai dari membuat subdomain
sampai menginstall wordpress. Pada pembahasan ini kita membuat website dari
masing-masing menunya, setelah itu baru kita masuk ke fitur-fitur yang dimiliki oleh
menu. Sebelum itu, silahkan didownload assets website yang akan kita butuhkan
melalui link https://s.id/assetsWeb .
Berikut menu yang akan kita butuhkan nanti diantaranya:

● Beranda
● Kegiatan
● Jadwal Sholat
● Blog
● Tentang
Maka mari kita langsung saja masuk ke pembahasannya:

1. Halaman Beranda
a. Mengubah logo, menu dan header
Gambar 2.16 Tampilan Header
28 SMP IDN
1. Mengubah logo dan header beranda
Berikut langkah-langkahnya:
a. Masuk ke dashboard (sub bab menginstall wordpress bagian ke 5)
Gambar 2.17 Dashboard Wordpress
b. Klik Visit Site (terletak dibagian paling kiri)
Gambar 2.18 Visit Site
c. Maka, kita akan diarahkan ke website. Tapi disini ada perbedaan

yaitu terdapat beberapa menu pada bagian atasnya.
Gambar 2.19 Bagian Customize
Pada pembahasan ini kita hanya akan menggunakan Customize.

d. Pilih Customize. Maka, kita akan melihat menu pada bagian
sebelah kiri dan pilihlah bagian Header, Footer, Templates,

Pages.
Gambar 2.20 Menu Customize
e. Pilih Header.
Gambar 2.21 Menu Customize 2
f. Maka, kita akan melihat tampilan seperti ini:
30 SMP IDN
Gambar 2.22 Tampilan Edit Header
Arahkan kursor kita ke logo yang ingin di edit.
Gambar 2.23 Edit Logo
g. Akan muncul menu disebelah kiri, pilihlah bagian Logo Style. Dan
pilih tong sampah untuk menghapus logo yang sebelumnya.
Gambar 2.24 Edit Logo 2
h. Kita upload logo yang diinginkan.

Gambar 2.25 Upload File
i. Maka, hasilnya akan seperti ini:
Gambar 2.26 Hasil Edit Logo
j. Karena gambar yang ada di Header masih belum kita ubah, mari
kita ubah. Klik tanda jendela pada section bawah.
Gambar 2.27 Edit Section
k. Setelah itu akan muncul menu seperti dibawah ini. Pilih Options.
32 SMP IDN
Gambar 2.28 Edit Column
l. Klik image, dan upload gambar (yang ada di link asset web).
Gambar 2.29 Mengupload Gambar Header

m. Ubahlah posisi gambar menjadi seperti ini:
Gambar 2.30 Memposisikan Gambar
n. Setelah kita menambahkan gambar di section bawah, sekarang

kita akan menambahkan gambar di section atas. Klik jendela di
sebelah section logo.
o. Caranya sama seperti seperti sebelumnya dan gambarnya pun

juga sama persis.
p. Maka, setelah kita menambahkan gambar pada Header.
Tampilannya akan seperti ini:
34 SMP IDN
Gambar 2.32 Tampilan Akhir Header
q. Jangan lupa untuk mengklik Update, agar logo yang sudah kita
edit bisa berubah di website.
Gambar 2.33 Button Update
r. Kembali ke menu Customize, kita akan mengubah teks Masjid

Al-Muhajirin menjadi Al-Muhajirin. Pilih bagian Site Identity.
Gambar 2.34 Menu Customize 2

s. Ubahlah Site Titlenya menjadi Al-Muhajirin.
Gambar 2.35 Menu Site Identity
t. Jangan lupa untuk mengklik Publish, agar bisa langsung

tersimpan di website.
u. Maka, hasil akhirnya seperti ini:
Gambar 2.36 Hasil Akhir Logo
2. Mengedit Header Beranda

Kita sudah membuat Header untuk dimasing-masing menunya, tapi
di Header (menu) beranda belum berubah. Maka, mari kita mengubahnya.
Berikut langkah-langkahnya:
a. Masih di menu Customize, pilihlah bagian Header, Footer,
Templates, Pages.
b. Pilih Home Header.
36 SMP IDN
Gambar 2.37 Menu Header, Footer, Templates, Pages.
c. Tampilannya akan seperti ini:
Gambar 2.38 Tampilan Home Header
d. Ikutilah langkah-langkah mengubah logo dari pada bagian

header f sampai n .
Gambar 2.39 Mengubah Logo
e. Arahkan kursornya ke teks How Long Can, dan pilihlah icon

pensil.

Gambar 2.40 Mengubah Teks
f. Pada menu sebelah kiri, Edit titlenya menjadi:
Gambar 2.41 Edit Title Teks
g. Hapus teks YOU LAST, dengan klik ikon tong sampah.
Gambar 2.42 Menghapus title
h. Edit title lorem ipsum, caranya seperti sebelumnya. Gantilah

dengan teks ini:
Gambar 2.43 Mengedit title
i. Klik column pada bagian atas logo.
38 SMP IDN
Gambar 2.44 Column
j. Pilih bagian Options - Image - Choose Your Image.
Gambar 2.45 Menambahkan gambar header home
k. Atur posisi dan letak gambar menjadi seperti ini:

Gambar 2.46 Memposisikan gambar
l. Disini ada masalah di bagian pojok kanan dan kiri, yaitu

gambarnya belum sama.
Gambar 2.47 Tampilan header home
m. Cara memperbaikinya, dengan arahkan kursor yang ditandai merah

diatas dan klik di bagian tersebut. Kemudian tambahkan gambar
(lihat pada bagian j).
40 SMP IDN
Gambar 2.48 Tampilan header home 2
n. Jikalau merasa teksnya kurang terlihat, kita bisa mengubahnya

pada bagian Heading Styles.
Gambar 2.49 Mengubah warna teks title
o. Jangan lupa untuk mengklik Update, agar header yang sudah kita
edit bisa berubah di website (atau tersimpan).
Gambar 2.50 Button update
p. Nah, kita tadi sudah tahu cara membuat header. Langkah

selanjutnya adalah bagian menu.
3. Mengatur menu
Kita harus kembali ke dashboard wordpress untuk mengatur menu.
Karena kita masih ada di menu customize, maka kita harus keluar terlebih
dahulu.
a. Klik tanda silang.

b. Setelah itu kita akan menuju ke tampilan website.
Gambar 2.52 Tampilan website
c. Klik bagian Dashboard, untuk kembali ke dashboard wordpress.
Gambar 2.53 Menu kembali ke dashboard
d. Setelah kita sudah ke dashboard, klik Appearance -> Menus.
42 SMP IDN
Gambar 2.54 Dashboard wordpress
e. Maka, akan terlihat seperti ini:
Gambar 2.55 Tampilan wp-admin menu
f. Mari, kita ubah nama menunya sesuai yang kita butuhkan.

Gambar 2.56 Mengatur menu
Berikut menu yang diubah:

● Home => Beranda
● Coaches => Tentang
● About => Kegiatan
● Contact => Jadwal Sholat
Kalau sudah diubah, jangan lupa untuk klik Save Menu.
g. Kalau sudah, tampilan menu di website akan seperti ini.
Gambar 2.57 Tampilan menu
h. Coba kita klik salah satu menu, yaitu tentang. Perhatikan url
websitenya dan nama headernya, masih belum berubah. Maka,
kita harus mengubah nama page (halamannya).
44 SMP IDN
Gambar 2.58 Url website
Gambar 2.59 Header dari salah satu menu
4. Mengatur page (halaman)

Sesuai dengan masalah yang ada di atas, maka solusinya kita harus
mengatur nama pagenya terlebih dahulu. Sebenarnya page dan menu
itu saling berhubungan satu sama lain. Seperti permasalahan diatas, jika
nama halamannya Coaches, maka url dan nama headernya juga Coaches.
Berikut cara mengaturnya:
a. Klik Pages -> All Pages
Gambar 2.60 Menu Pages

b. Kita akan melihat banyak nama page, yang mana namanya sama
dengan nama menu sebelum kita ubah.
Gambar 2.61 Nama-nama page
c. Kita coba di salah satu page, yaitu About. Klik About, maka kamu
akan melihat editor page.
Gambar 2.62 Tampilan editor page
46 SMP IDN
d. Kita hanya perlu mengubah nama About menjadi Kegiatan.
Abaikan hal-hal yang lainnya, karena nanti akan kita bahas.
Gambar 2.63 Mengubah nama page
e. Kita kebagian Permalink untuk mengubah url website. Dan

ubahlah URL Slugnya dengan kegiatan. Hasil url website yang
sudah bisa kita lihat di bawahnya.

Gambar 2.64 Mengubah url
f. Jangan lupa, untuk klik Update yang berada pada bagian pojok
kanan atas. Untuk menyimpan perubahan.
48 SMP IDN
g. Buka websitenya. Kita coba klik menu kegiatan, hasilnya bisa kita
lihat pada url dan nama headernya. Keduanya sudah berubah.
Gambar 2.65 Url website yang sudah diubah
Gambar 2.66 Nama header yang sudah diubah
h. Kembali ke editor page. Kita harus kembali ke dashboard

wordpress, untuk mengubah semua nama pagenya. Dengan cara,
klik logo wordpress yang ada di pojok atas kiri.
Gambar 2.67 Button kembali ke dashboard
i. Lakukanlah pada semua page yang ingin kita ubah. Dan ubahlah
nama page, dengan seperti ini .
Berikut page yang diubah:
● Home => Beranda
● Coaches => Tentang
● About => Kegiatan
● Contact => Jadwal Sholat

Gambar 2.68 Nama-nama page yang sudah diubah
j. Mengubah nama page sudah kita ubah, maka mari kita lanjut ke
tahap selanjutnya yaitu menambahkan tentang pada page beranda.
b. Menambahkan tentang pada beranda
Setelah tadi kita sudah mengatur header, maka selanjutnya adalah
menambahkan tentang masjid di menu beranda. Tentang akan kita bisa isi
dengan latar belakang, profil atau yang lainnya. Mari kita langsung saja
caranya:
1. Masuk ke page beranda

Karena kita masih berada di dashboard, mari kita pindah ke menu
customize lagi. Caranya sama seperti yang sudah kita bahas sebelumnya.
a. Kalau kita sudah masuk ke menu customize, klik Header, Footer,
Templates, Pages.
50 SMP IDN
b. Kita scroll sedikit kebawah, dan klik beranda pada bagian Edit
Pages.
Gambar 2.70 Menu Edit Page
c. Kita akan melihat tampilan beranda.

Gambar 2.71 Page beranda
d. Kita scroll sedikit kebawah, maka kamu akan melihat tampilan

seperti ini:
Gambar 2.72 Tampilan tentang sebelum diubah
e. Tampilan diatas akan kita sesuaikan dengan tentang masjid yang

kita inginkan.
f. Kita ubah gambarnya terlebih dahulu, klik gambar yang ada di
pojok kanan. Dan pilih icon pensil, maka kita akan melihat Edit
Image.
52 SMP IDN
Gambar 2.73 Edit Image
g. Klik icon tong sampah untuk membuang gambar sebelumnya, dan

uploadlah gambar. Kita bisa ambil gambar dari pexels.
Gambar 2.74 Mengupload gambar
h. Arahkan kursor kita keatas gambar. Maka akan terlihat icon jendela.
Klik icon jendela. Icon jendela ini berfungsi untuk mengatur

column pada gambar.
Gambar 2.75 Icon mengedit column
i. Atur widgets space dan column widthnya
j. Kita hapus satu persatu teks dan gambar yang tidak terpakai.
54 SMP IDN
Gambar 2.77 Menghilangkan teks dan gambar
k. Setelah teks dan gambar yang tidak terpakai sudah dihapus. Maka,
tampilannya akan seperti ini:

Gambar 2.78 Sesudah teks dan gambar dihilangkan
l. Kita style teks GAME REPORT dan ubah menjadi TENTANG

MASJID.
m. Ubahlah teksnya menjadi seperti ini:
<h1><span style=”color: #115adc”>Tentang</span> Masjid</h1>
n. Sekarang kita edit teks yang di bawahnya. Cara editnya masih

sama dengan sebelumnya dan masukan teks seperti ini:
56 SMP IDN
Gambar 2.80 Mengedit teks
o. Setelah tadi kita mengupload gambar dan edit teksnya. Maka

tampilannya akan seperti ini:
Gambar 2.81 Tampilan tentang masjid
p. Jangan lupa untuk mengklik Update, agar tersimpan.
c. Menambahkan agenda pada beranda

Selanjutnya kita tambahkan agenda di beranda, agenda ini akan isi dengan
gambar-gambar kegiatan masjid seperti pembagian sedekah untuk anak
yatim, pengajian, khutbah dan lain-lainnya. Kita akan edit column yang ada
di bawah tentang masjid. Ini columnnya:

Gambar 2.83 Tampilan agenda sebelum diubah
1. Menghapus teks dan gambar yang tidak terpakai
Gambar 2.84 Teks dan gambar yang akan dihapus
a. Hapus teks, dengan klik tong sampah.
Gambar 2.85 Cara agar teks terhapus
b. Hapus image slider, dengan klik tong sampah.
58 SMP IDN
Gambar 2.86 Cara agar image slider terhapus
c. Maka, tampilannya akan seperti ini:
Gambar 2.87 Tampilan agenda sebelum diubah
2. Mengedit teks (title)

Tadi kita sudah menghapus teks dan image slider yang tidak kita pakai.
Selanjutnya kita mengedit teks GAME SCHEDULE.
a. Klik icon pensil agar kita bisa mengedit, pada teks GAME
SCHEDULE.
Gambar 2.88 Cara agar bisa mengedit teks
b. Edit teks menjadi seperti ini:

<h1><span style=”color: #115adc”>A</span> genda kegiatan</
h1>
Gambar 2.89 Edit Title
c. Maka, tampilannya akan seperti ini:
Gambar 2.90 Tampilan teks yang sudah diubah
3. Menambahkan widgets
Setelah tadi kita sudah mengubah teksnya menjadi agenda kegiatan,
maka langkah selanjutnya ada menambahkan galeri menggunakan
salah satu widgets yaitu Grid Gallery.
a. Kita masih berada di edit title agenda kegiatan. Klik tanda silang.
Gambar 2.91 Edit title
60 SMP IDN
b. Maka, kita akan melihat tampilan seperti ini:
Gambar 2.92 Page Layer
c. Scroll sedikit ke bawah, maka kita akan melihat widgets Grid

Gallery.

Gambar 2.93 Grid Gallery
d. Drag and drop grid gallery, pastikan berada persis di bawah teks
agenda kegiatan.
Gambar 2.94 Memposisikan grid gallery
e. Maka, akan seperti ini:
Gambar 2.95 Widgets grid gallery
f. Klik icon pensil pada grid gallery, dan tambahkanlah gambar.
62 SMP IDN
Gambar 2.96 Edit grid gallery
g. Kita ambil gambar dari website masjid istiqlal. (*disini gambarnya

bukan untuk menjiplak atau meniru tapi hanya untuk belajar saja,
usahakan menggunakan gambar dari source yang lain). Dan
aturlah menjadi seperti ini:
Gambar 2.97 Edit grid gallery
Keterangan:

● Columns count: mau berapa jumlah gambar dalam satu kolom
● Columns Gap: berapa jarak antar gambar sesuai kolom nya
● Row Gap: berapa jarak antar gambar sesuai barisnya
● Size: disini ada banyak pilihan, tapi kita pilih full agar gambar
kelihatan jelas
h. Maka, tampilannya akan seperti ini:
Gambar 2.98 Tampilan agenda kegiatan sesudah diubah

i. Oke, kita sudah selesai menambahkan agenda kegiatan.
d. Menambahkan blog pada beranda
Setelah kita menambahkan agenda kegiatan, maka langkah selanjutnya
adalah menambahkan blog atau artikel di beranda. Nah, di bagian ini kita
tidak akan belajar membuat artikel terlebih dahulu, tapi nanti kita akan
belajar membuat artikel pada bagian halaman Blog.
1. Menghapus bagian yang tidak terpakai

a. Kita hapus bagian about us sampai dengan happy viewers.
Dengan klik icon tong sampah.
Gambar 2.99 Bagian about us
64 SMP IDN
Gambar 2.100 Bagian testimonials
b. Sisakan bagian Blog, karena kita akan mengeditnya sesuai dengan

yang kita inginkan. Posisi blog akan berada di bawah bagian
agenda kegiatan.
Gambar 2.101 Bagian blog
2. Mengatur bagian blog agar sesuai

a. Pertama kita akan mengatur title BLOG. Aturlah titlenya menjadi
seperti ini:
<h1>Blo<span style=”color: #115ADC”>G</span></h1>


Gambar 2.102 Mengedit title blog
b. Maka, title blog akan berada ditengah. Sesuai dengan yang sudah
kita atur pada Alignmentnya.
Gambar 2.103 Tampilan title blog
c. Hapus teks yang ada di bawah title blog karena kita tidak akan
menggunakannya. Klik icon tong sampah pada bagian teksnya.
Gambar 2.104 Menghapus teks
66 SMP IDN
d. Selanjutnya kita tambahkan gambarnya. Oh ya, untuk gambarnya
nanti akan kita gunakan juga pada halaman blog.
Gambar 2.105 Gambar dari salah satu artikel
e. Kalau sudah ditambahkan, arahkan kursor ke tanggal dan hapuslah.
Gambar 2.106 Menghapus tanggal dan tahun

f. Tampilannya akan seperti ini:
Gambar 2.107 Tampilan gambar salah satu artikel
g. Hapus teks Why Lead Generation is Key for. Karena kita tidak
membutuhkannya.
h. Ubah teks Business Growth menjadi seperti ini:
<h4 style=”color:#115ADC”>Makna, Rukun & Syarat Kalimat
Tauhid</h4>
Gambar 2.108 Judul artikel
68 SMP IDN
i. Selanjutnya ubahlah teks yang berada dibawah judul artikel
menjadi isi artikel tersebut. Ambillah isinya hanya 4 sampai 5 baris
Gambar 2.109 Isi artikel
j. Ubah warna border button more details menjadi biru (#115ADC)

dan ganti teksnya menjadi selengkapnya.
Gambar 2.110 Mengganti teks button

Gambar 2.111 Mengedit button
k. Tampilan akhirnya akan seperti ini:
Gambar 2.112 Tampilan akhir artikel
70 SMP IDN
l. Lakukanlah langkah-langkah yang sudah kita pelajari sebelumnya.
Sampai 4 artikel berubah tampilannya seperti ini:
Gambar 2.113 Tampilan blog
e. Menambahkan footer
Mungkin kita belum tahu apa itu Footer ?
Footer adalah bagian atau space yang biasanya ada dibagian bawah suatu
website, berbeda dengan Header yang biasanya ada dibagian atas website.
Biasanya isi dari Footer adalah hak cipta, link tambahan, sumber daya dan
sponsor-sponsor yang lainnya. Nah, kita sudah tahu apa itu Footer. Mari
kita langsung saja ke prakteknya.
1. Kita kembali ke menu customize. Pilih Header, Footer, Templates,
Pages. Setelah itu pilih Footer.

Gambar 2.114 Menu customize
2. Maka, kita akan melihat tampilan seperti ini:
Gambar 2.115 Tampilan footer
3. Pertama, kita akan mengubah About Us menjadi Tentang Masjid.
4. Kita ubah teks yang ada di bawah title Tentang Masjid. Ubah menjadi
seperti ini:
“Masjid Al-Muhajirin terus berusaha membangun Ummat dan
Mensejahterakan Masyarakat. Logo Masjid Al-Muhajirin terdiri dari
bulan dan bintang. Ini adalah wujud dari semangat kami, untuk menjadi
Muslim yang salih seutuhnya tanpa kehilangan makna islam.”
5. Maka, tampilannya akan seperti ini:
72 SMP IDN
Gambar 2.117 Tampilan footer kepemilikan
6. Selanjutnya, kita ubah title Quick Link menjadi Link Tambahan.
7. Maka, akan seperti ini:
Gambar 2.119 Tampilan Footer Link Tambahan

8. Selanjutnya kita akan menghapus title Flickr Feed dan gambarnya. Biar
cepat kita akan menghapus columnnya saja. Baik title dan gambarnya
akan terhapus otomatis. Arahkan kursor ke atas, sampai muncul icon
seperti ini:
Gambar 2.120 Tampilan footer flickr feed
9. Setelah itu, kita akan melihat pada pojok kanan akan ada Edit Column.
Dan klik icon tong sampah untuk menghapus column.
Gambar 2.121 Menghapus column
10. Tampilan footer akan tampak seperti ini:
Gambar 2.122 Tampilan footer
74 SMP IDN
11. Selanjutnya, kita ubah title Contact Us menjadi Kontak Kami. Klik
icon pensil pada title Contact Us. Dan ubah menjadi seperti ini:
12. Kita ubah lokasi, nomor telepon dan emailnya.
Gambar 2.124 Footer tentang kami
13. Untuk mengubahnya kita harus ke dashboard wordpress, dan pilih

Pagelayer -> Settings.
Gambar 2.125 Menu Pagelayer

14. Pilih Information, isi address, phone number dan contact email.
Jangan lupa untuk Save Changes.
Gambar 2.126 Mengubah informasi pada footer
15. Reload ulang websitenya. Maka akan tampilannya akan seperti ini:
Gambar 2.127 Tampilan footer tentang kami
16. Silahkan jika mau ingin menghapus credit, tapi untuk mengedit
teksnya tidak akan bisa karena untuk bisa mengeditnya harus
menggunakan Pagelayer pro yang mana itu berbayar.
Gambar 2.128 Credit
76 SMP IDN
17. Oh ya, kita belum mengubah background pada footer. Masih
menggunakan background bawaan dari template. Untuk mengubahnya,
kita klik dimanapun selama itu masih didalam garis merah.
Gambar 2.129 Area untuk mengubah background
18. Pilih Options => Background Style => Upload Image. Pilihlah gambar
yang sesuai untuk footer.
Gambar 2.130 Edit row

19. Tampilan footer terakhir adalah seperti ini:
Gambar 2.131 Tampilan akhir footer
20. Kita hanya perlu membuat/mengatur footer pada beranda saja, jadi
kita tidak perlu membuat footer per masing-masing halaman website.
Karena footer akan otomatis sama pada setiap halaman website.
2. Halaman Tentang
Selanjutnya kita ke halaman tentang, untuk isinya adalah tentang masjid yang
sudah kita buat sebelumnya pada bagian tentang masjid di halaman beranda.
a. Kembali ke menu customize, pilih Header, Footer, Templates, Pages =>
Tentang. Scroll sedikit kebawah agar bisa menemukan Tentang.
Gambar 2.132 Edit page tentang
b. Selanjutnya, hapus bagian coaches.
Gambar 2.133 Bagian coaches
78 SMP IDN
c. Sekarang yang tersisa hanya bagian Mario Johnson. Edit title Mario
menjadi Tentang Masjid, caranya sama seperti sebelumnya. Dan hapus
title Johnson.
d. Karena, teks Masjid masih berwarna kuning. Maka, solusinya adalah

menghilangkan warnanya. Klik Heading Styles dan hapus colornya.
Gambar 2.135 Heading Styles
e. Hapus teks yang tidak terpakai. Dan ubahlah teksnya seperti tentang
masjid sebelumnya. Tampilannya akan seperti ini:

f. Kita akan mengganti warna icon media sosialnya dengan warna defaultnya.
Dengan klik icon pensil pada media sosial, pilih Settings => Icon =>
Background Color.
Gambar 2.137 Edit Social Profile
80 SMP IDN
g. Tampilannya akan seperti ini:
h. Selanjutnya kita ubah gambarnya. Pastikan gambarnya sama dengan

tentang masjid yang ada pada halaman beranda.
Gambar 2.139 Mengubah gambar
i. Jangan lupa untuk mengklik Update, setelah kita ubah.

j. Maka, tampilan akhir dari halaman tentang adalah seperti ini:
Gambar 2.141 Tampilan akhir halaman tentang
3. Halaman Kegiatan
Selanjutnya kita ke halaman kegiatan, kita isi dengan agenda kegiatan yang
terbaru seperti pada agenda kegiatan di halaman beranda.
Kegiatan. Scroll sedikit ke bawah agar bisa menemukan Kegiatan.
Gambar 2.142 Edit page kegiatan
82 SMP IDN
b. Hapus semua bagian, sisakan hanya title About Us.
Gambar 2.143 Tampilan halaman kegiatan
c. Ubahlah title About Us, menjadi Agenda Terbaru. Dan atur alignmentnya.
<h1><span style=”color:#1159DA”>A</span>genda Terbaru</h1>
d. Tampilannya akan seperti ini:
Gambar 2.145 Tampilan title
e. Selanjutnya kita akan menambahkan beberapa widgets untuk ditaruh

dibawah title. Kita disini masih di edit title, klik tanda silang (close).

f. Drag and drop widgets Row.
Gambar 2.147 Drag and drop Row
g. Drag and drop widgets Column.
Gambar 2.148 Drag and drop Column
h. Maka akan jadi seperti ini:
Gambar 2.149 Tampilan setelah diberikan dua widgets
i. Drag and drop widgets Image.
Gambar 2.150 Drag and drop image
84 SMP IDN
j. Tambahkan gambar yang sebelumnya ada pada bagian agenda kegiatan di
halaman beranda. Dan aturlah ukuran gambarnya menjadi Medium.
Gambar 2.151 Edit image
k. Tampilannya akan seperti ini:
Gambar 2.152 Tampilan setelah ditambahkan gambar
l. Drag and drop widgets Rich Text ke dalam Column kedua.
Gambar 2.153 Drag and drop Rich Text

m. Setelah itu drag and drop juga widgets Button, di bawahnya Rich Text.
Gambar 2.154 Drag and drop Button
n. Edit teks Rich Text menjadi seperti ini:
Gambar 2.155 Edit Rich Text
o. Setelah itu kita ubah teks yang ada di button menjadi Selengkapnya.
86 SMP IDN
Gambar 2.156 Mengedit button text
p. Mengubah warna button, ukuran dan warna teks.
Gambar 2.157 Mengatur style button
q. Memberikan border pada button yang berwarna biru (#1159DA).
Gambar 2.158 Memberikan border

r. Maka, tampilan akhirnya akan menjadi seperti ini:
Gambar 2.159 Tampilan salah satu agenda kegiatan
s. Lakukanlah langkah-langkah sebelumnya, sampai berhasil membuat 3

jumlah agenda kegiatan.
t. Jangan lupa untuk mengklik Update, agar tersimpan.
u. Maka, ini adalah tampilan akhir dari halaman Kegiatan
Gambar 2.160 Tampilan halaman kegiatan
88 SMP IDN
4. Halaman Jadwal Sholat
Selanjutnya, halaman jadwal sholat. Kita isi dengan jadwal sholat, dalam
bentuk gambar. Sebenarnya kita bisa menggunakan HTML, tapi jika kita ingin
menggunakan HTML harus ada widgets. Sedangkan di Pagelayer itu tidak ada
widgets untuk HTML. Jadi, mau tidak mau kita akan menggunakan gambar.
Jadwal Sholat. Scroll sedikit ke bawah agar bisa menemukan Jadwal
Sholat
Gambar 2.161 Edit page jadwal sholat
b. Hapus semua bagian dan sisakan title Contact Us.
Gambar 2.162 Title contact us
c. Ubah menjadi Jadwal sholat.

d. Setelah itu buka website ini https://www.jadwalsholat.org/ untuk
mendownload jadwal sholat. Dan pilih kota yang kita inginkan.
e. Scroll sedikit ke bawah maka kita akan melihat button print. Klik Print
untuk mendownloadnya.
f. Format filenya berbentuk PDF, tapi yang kita butuhkan format filenya
PNG. Solusinya adalah mengubah formatnya. Caranya kita buka website
https://pdf2png.com/id/, upload file PDFnya. Tunggu sampai proses
selesai. Setelah itu kita unduh filenya.
g. Kita kembali lagi ke halaman jadwal sholat. Drag and drop widgets Image.
Gambar 2.164 Drag and drop Image
h. Upload gambar yang sudah kita download tadi.
Gambar 2.165 Edit image
i. Jangan lupa untuk klik button Update.

j. Maka, tampilan halaman jadwal sholat akan seperti ini:
90 SMP IDN

Gambar 2.166 Tampilan halaman jadwal sholat
5. Halaman Blog
Selanjutnya adalah halaman blog. Di halaman blog ini kita akan mengisinya
dengan beberapa artikel. Artikelnya bisa kita ambil contoh dari bagian Blog pada
halaman beranda.
a. Kita kembali ke dashboard wordpress. Dan pilih Posts => All Posts
Gambar 2.167 Menu di dashboard wordpress
b. Maka, kita akan melihat beberapa artikel yang terbawa ketika saat
menginstall template website.

Gambar 2.168 Tampilan post
c. Klik Add New untuk membuat post yang baru.
Gambar 2.169 Add new post
d. Ada beberapa bagian dalam post.
Gambar 2.170 Bagian di post
e. Isi Add title untuk judul artikelnya dan dibawahnya adalah isi artikel. Kita
isi sesuai dengan yang diinginkan.
92 SMP IDN
Gambar 2.171 Post
f. Klik icon Gear (Settings) yang ada pada pojok kanan atas.
Gambar 2.172 Settings
g. Scroll kebawah, sampai terlihat Categories. Dan klik Add New Category.
Gambar 2.173 Categories

h. Isi nama categorynya. Dan kalau sudah klik Add New Category.
Gambar 2.174 Menambahkan category
i. Isi Tag. Untuk menambahkan tag dengan menekan Enter. Jadi, ketika kita
sudah selesai isi nama tagnya setelah itu tekan Enter.
Gambar 2.175 Tags
j. Scroll sedikit kebawah. Maka kita akan melihat Featured image. Kita
upload gambarnya di Set featured image.
Gambar 2.176 Featured image
k. Setelah itu klik Publish.
Gambar 2.177 Button Publish
94 SMP IDN
l. Sebelum publish, kita akan melihat visibilitas. Dan di visibilitas ada 3
macam, yaitu Publish, Private dan Password Protect.
● Publish: Artikel bisa dilihat oleh semua orang
● Private: Hanya bisa dilihat oleh editor dan admin
● Password Protect: Artikel hanya bisa dilihat dengan menggunakan
password
Tapi, kita disini pilih Publish agar semua orang dapat melihat artikel.
Gambar 2.178 Visibilitas
m. Setelah itu klik Publish lagi. Dan kita akan melihat tampilan dibawah ini,
yang membuktikan bahwa artikel kita sudah terpublish di website.
Gambar 2.179 Artikel berhasil publish

n. Kita lihat di website kita. Dan akhirnya artikel kita sudah publish.
Gambar 2.180 Tampilan halaman blog
o. Tapi setelah kita lihat lagi, disini ada beberapa artikel yang tidak relate
dengan website kita. Maka dari itu kita akan menghapus artikel yang tidak
kita inginkan.
p. Kembali ke All Post. Kita lihat ada beberapa judul artikel yang tidak kita
inginkan. Jika sudah memilih artikel yang ingin dihapus, klik Trash untuk
menghapus artikel.
Gambar 2.181 All Post
q. Setelah itu kita melihat website kita. Jangan lupa untuk mereload website,
agar artikel yang sudah kita hapus akan menghilang di website.
96 SMP IDN
Gambar 2.182 Tampilan salah satu artikel
r. Kita ulangi lagi cara membuat artikel sebelumnya. Sampai artikelnya

berjumlah 4.
s. Maka, tampilan akhir dari halaman Blog adalah seperti ini:
Gambar 2.183 Tampilan halaman Blog
Sekarang kita sudah selesai membuat website masjid. Silahkan jika ingin mengembangkan
websitenya agar kita lebih mahir dalam membuat website.

BAB III - Website Sekolah
a. Kemampuan Kognitif
a. Memahami Instal Sub Domain
b. Memahami cara install Wordpress
c. Menjelaskan cara install Elementor
d. Memahami cara mendaftar akun di Elementor
e. Menjelaskan cara menggunakan elementor
f. Menjelaskan cara membuat header
g. Memahami cara membuat menu di elementor
h. Memahami cara menambahkan block baru
i. Memahami cara membuat hero
j. Memahami cara menambahkan skill indicator
k. Memahami cara cara membuat footer
l. Memahami cara menambahkan konten pada footer
b. Kemampuan Motorik
a. Terampil dalam menginstall Wordpress
b. terampil dalam menjelaskan cara install Elementor
c. Terampil dalam menggunakan elementor
d. Terampil dalam mendaftar akun di Elementor
e. Terampil dalam membuat header
f. Terampil dalam membuat menu di elementor
98 SMP IDN
g. Terampil dalam menambahkan block baru
h. Terampil dalam membuat hero
i. Terampil dalam menambahkan skill indicator
j. Terampil dalam cara membuat footer
k. Terampil dalam menambahkan konten pada footer
C. Install Wordpress di Subdomain

Di bab sebelumnya kita sudah tahu apa itu Subdomain dan begitu juga dengan cara
membuat Subdomain. Jadi, disini kita tidak akan menjelaskan Subdomain lagi. Tapi
kita akan mempelajari lagi bagaimana cara membuat Subdomain dan menginstall
Wordpress di dalam Subdomain. Berikut caranya:
1. Membuat Subdomain
a. Login cPanel, pada bagian Domains pilih Subdomains untuk menambahkan
Subdomain.
Gambar 3.1 Menu Domains
b. Setelah pilih Subdomains. Isilah seperti dibawah ini. Kalau sudah diisi
jangan lupa untuk klik Create.
Gambar 3.2 Membuat Subdomain

c. Jika sudah berhasil membuat Subdomain. Maka kita akan melihat notifikasi
seperti ini:
Gambar 3.3 Notifikasi Subdomain sudah berhasil dibuat
d. Pastikan kalau Subdomain kita memang benar-benar sudah berhasil dibuat.

Dengan melihat di bagian Modify a Subdomain.
Gambar 3.4 Modify a Subdomain
2. Menginstall Wordpress di dalam Subdomain

a. Kembali lagi ke cPanel, pada bagian Software pilih Wordpress Manager
by Softaculous .
Gambar 3.5 Memilih Software
b. Setelah itu kita akan masuk ke Wordpress Management. Klik Install.
Gambar 3.6 Wordpress Management
100 SMP IDN

c. Kita akan masuk ke pengaturan penginstalan wordpress. Jangan lupa
untuk memperhatikan Domainnya. Isi seperti dibawah ini:
Gambar 3.7 Pengaturan Install Wordpress
d. Tak lupa juga. Isi nama website, deskripsi website, username admin dan
password admin agar kita bisa masuk ke wp-admin website kita.
Gambar 3.8 Pengaturan penginstalan Wordpress
e. Untuk Choose Language, Select Plugin dan Advanced Options kita

akan biarkan defaultnya (bawaan).
f. Theme website kita pilih yang Financy.

Gambar 3.9 Memilih tema website
g. Scroll ke bawah sedikit sampai bertemu button Install.Setelah itu klik

Install.
Gambar 3.10 Button Install
h. Tunggu sampai proses penginstalan selesai.
Gambar 3.11 Proses penginstalan
102 SMP IDN

i. Setelah itu kita akan melihat tampilan seperti dibawah ini. Disana ada dua
link yaitu website dan wp-admin. Klik link alamat wp-admin dan kita
akan mengarah ke dashboard wordpress website.
Gambar 3.12 Proses penginstalan berhasil
3. Memperbarui halaman (page) website

Sebenarnya kita sudah memiliki pages yang kita butuhkan, dimana pages itu dibuat
ketika kita memilih tema saat install wordpress di awal tadi. Nah, kita manfaatkan
pages yang sudah ada tersebut menjadi pages yang sesuai dengan kebutuhan kita.
Jadi nanti ada beberapa page yang kita butuhkan yaitu Beranda, Profil, Berita dan
Kontak. Sementara saat ini kita sudah memiliki beberapa halaman/page yang kita
dapat dari tema yaitu Home, Blog, About, Services, Contact dan beberapa lainnya.
Ikuti langkah dibawah ini untuk merubah pages tersebut.
a. Pilih Menu Pages - All Pages pada halaman dashboard wordpress kita
b. Arahkan kursor ke menu pages yang akan diubah, kemudian pilih menu
“Quick Edit”
Gambar 3.14 Memilih Quick Edit
c. Setelah menekan tombol “Quick Edit”, pada bagian “Title dan Slug”
kita ganti dari sebelumnya “Home” menjadi “Beranda” seperti gambar
dibawah.

Gambar 3.15 Merubah Page Home
d. Klik Tombol “Update” yang ada pada pojok kanan bawah untuk menyimpan
perubahan yang kita lakukan.
e. Selanjutnya yang akan kita ubah adalah page “Blog” sama seperti langkah
sebelumnya, klik tombol “Quick Edit”, pada bagian “Title dan Slug” kita
ganti dari sebelumnya “Blog” menjadi “Berita”
Gambar 3.17 Mengubah Page Blog
f. Klik Tombol “Update” yang ada pada pojok kanan bawah untuk menyimpan
104 SMP IDN

g. Selanjutnya yang akan kita ubah adalah page “About” sama seperti langkah
ganti dari sebelumnya “About” menjadi “Profil”
Gambar 3.19 Mengubah Page About
h. Klik Tombol “Update” yang ada pada pojok kanan bawah untuk menyimpan
i. Selanjutnya yang akan kita ubah adalah page “Contact” sama seperti
langkah sebelumnya, klik tombol “Quick Edit”, pada bagian “Title dan
Slug” kita ganti dari sebelumnya “Contact” menjadi “Kontak”
Gambar 3.19 Mengubah Page Contact
j. Klik Tombol “Update” yang ada pada pojok kanan bawah untuk menyimpan

k. Page “Services” akan kita hapus. Arahkan kursor ke page yang ingin
dihapus. Klik “Trash” untuk menghapus page.
Gambar 3.21 Menghapus Page Services
l. Ketika page “Services” di hapus. Maka, akan terlihat notifikasi. Dan kita
juga bisa mengembalikan page yang sudah dihapus dengan klik “Undo”.
Gambar 3.22 Page dihapus
m. Setelah tadi kita sudah mengedit beberapa nama page dan menghapus page.
Berikut jumlah page yang ada pada website kita.
Gambar 3.23 Semua Page
Sampai disini kita sudah berhasil memperbarui pages sesuai dengan kebutuhan
yang akan kita gunakan. Selanjutnya kita akan menyesuaikan menu agar sesuai
dengan kebutuhan kita.
106 SMP IDN

4. Menambahkan Menu
a. Menentukan Menu
Karena website yang kita buat disini adalah website sekolah. Kita akan tiru
website IDN yaitu https://idn.sch.id/ dan kita ambil data-datanya dari sini.
Kita hanya gunakan 4 buah menu utama.
1. Beranda - Berisi mengapa harus sekolah ku, apa saja yang dipelajari dan
berita terbaru
2. Profil - Berisi profil sekolah ku dan visi misi.
3. Berita - Berisi berita sekolah ku yang terbaru.
4. Kontak - Berisi nomor hp dan media sosial yang bisa dihubungi
b. Membuat Menu
Sebenarnya untuk menu kita juga sudah memilikinya, dimana menu tersebut
kita peroleh dari bawaan tema yang kita instal. jadi kita akan memanfaatkan
menu yang sudah ada, kemudian kita edit atau tinggal kita sesuaikan saja
dengan kebutuhan yang akan kita gunakan. Langkah pertama adalah kita
pastikan bahwa kita sudah berada di dalam dashboard wordpress kita masing-
masing.
1. Pilih Appearance => Menus
Gambar 3.24 Menu Appearance
2. Pada bagian menu Structure, kita sudah memiliki nama menu, tapi kita
ganti menjadi lebih sederhana. Yang sebelumnya “financy Header
Menu” menjadi “Header Menu”
Gambar 3.25 Menu Structure

3. Kita urutkan menunya sesuai dengan rancangan yang sudah kita buat di
awal tadi. Pastikan urutanya sama dengan gambar dibawah.
Gambar 3.26 Urutan Menu
4. Klik Tombol “Save Menu” yang ada pada pojok kanan bawah di menu
untuk menyimpan perubahan yang kita lakukan.
Gambar 3.27 Button Save Menu
5. Kalau kita membuka website. Maka akan terlihat nama dan posisi menu
akan berubah sesuai dengan yang sudah kita tentukan sebelumnya.
Gambar 3.28 Tampilan Menu Website
Sampai disini kita sudah berhasil membuat pages dan menu. Selanjutnya kita akan
mengenal Elementor, membuat akun, menginstall Elementor dan beberapa tools
yang dibutuhkan untuk mempermudah mengembangkan website kita.
108 SMP IDN

D. Membuat Website Menggunakan Elementor
Sebelum kita membuat website menggunakan Elementor, alangkah baiknya kita tahu
terlebih dahulu apa itu Elementor, fungsi Elementor dan cara daftar akun Elementor.
1. Apa itu Elementor ?
Gambar 3.29 Logo Elementor
Elementor adalah salah satu visual page builder plugin dari WordPress. Dikutip
dari Elementor, page builder ini akan mempermudah user dalam membuat tampilan
depan halaman website. Kita tidak perlu membuat tampilan awal dengan bahasa
pemrograman. Langsung saja drag and drop bagian apa yang diinginkan. Misalnya,
kita ingin membagi website menjadi 3 kolom, membuat galeri foto, membuat sidebar,
membuat progress bar dan sebagainya.
Elementor dikembangkan pada tahun 2014 oleh Yoni Luksenberg dan Ariel Klikstein.
Elementor dikenalkan ke publik pada 1 Juni 2016 dan hingga saat ini telah diinstal
oleh sekitar 1 juta pengguna WordPress di seluruh dunia. Terdapat 2 versi elementor
yaitu elementor versi gratis dan berbayar. Kamu dapat menemukan Elementor Page
Builder di bagian plugins WordPress.
2. Fungsi Elementor
Fungsi Elementor adalah untuk mendesain tampilan website dengan mudah dan tanpa
pengetahuan coding. Dengan Elementor, kita dapat mengubah atau membuat layout,
header, footer, popup, dan widget untuk website kita.
3. Menginstall dan Daftar Akun Elementor

Buka kembali dashboard.
a. Klik Plugins => Add New

Gambar 3.30 Add New
b. Search plugin Elementor. Yang ada di pojok kanan atas.
Gambar 3.31 Mencari plugin elementor
c. Kita akan Instal 4 Buah Plugin dari Elementor, yaitu Elementor Website
Builder, Essential Addons for Elementor, Elementor – Header, Footer &
Blocks Template, dan Premium Addons for Elementor
Gambar 3.32 Install Plugin Elementor
d. Jangan lupa untuk klik “Active” untuk mengaktifkan plugin.
Gambar 3.33 Active Plugin Elementor
110 SMP IDN

e. Karena kita belum mempunyai Akun Elementor. Maka kita akan
membuatnya, pilih Elementor => Getting Started
Gambar 3.33 Menu Elementor
f. Setelah itu pilih Getting Started. Dan pilih Connect Account pada kanan
pojok atas.
Gambar 3.34 Connect Account
g. Karena kita belum mempunyai akun Elementor. Pilih Create an Account.
Gambar 3.35 Create an Account
h. Isi email dan password yang kita inginkan. Kalau sudah klik Create Account

Gambar 3.36 Mengisi email dan password
i. Kita akan melihat tampilan seperti ini. Klik Connect.
Gambar 3.37 Connect Akun
j. Kalau sudah berhasil. Maka kita akan dikembalikan ke dashboard dan akan
terlihat tampilan seperti ini:
112 SMP IDN

Gambar 3.38 Connected Successfully
Sampai disini kita sudah berhasil memasukan akun, menginstall dan

mengaktifkan plugin elementor. Selanjutnya kita akan praktek menggunakan
plugin tersebut untuk membangun website kita.
4. Membuat Halaman Beranda
Sekarang kita akan membuat halaman utama, halaman utama ini akan kita gunakan
untuk menampilkan konten-konten kita. Sebenarnya kita sudah memiliki halaman
utama, jadi kita akan memanfaatkan resource yang sudah ada.
a. Kembali ke dashboard wordpress. Pilih Pages => All Pages
b. Arahkan kursor ke Page “Beranda”. Dan pilih bagian “Edit”
Gambar 3.40 Menu Edit Page Beranda
c. Kita akan masuk ke Edit Page. Di pojok kanan atas akan ada Menu
“Setting”, pilih bagian “Page”.

Gambar 3.41 Bagian Menu Settings
d. Scroll sedikit kebawah, kita akan menemukan bagian “Page Attributes”.

Pilih Templates => Elementor Canvas.
Gambar 3.42 Bagian Page Attributes
e. Klik “Update” untuk menyimpan perubahan yang kita lakukan.
114 SMP IDN

f. Klik “Edit with Elementor”.
Gambar 3.44 Edit with Elementor
g. Setelah klik “Edit with Elementor”. Kita akan masuk ke Page Beranda,
tapi disini ada tampilan Dashboard Elementor.
Gambar 3.45 Dashboard Elementor
h. Selanjutnya kita akan menghapus bodynya dengan cara, arahkan kursor ke

section bodynya, kemudian klik tanda “Silang” untuk menghapus.
Gambar 3.46 Menghapus Section Body

i. Nah, di langkah ini kita sudah memiliki sebuah halaman kosong. Kemudian
langkah selanjutnya kita akan mengisi halaman Beranda kita ini dengan
konten-konten kita sendiri.
1. Membuat Header
Selanjutnya kita akan membuat Header, yang isinya adalah
Navigation Menu.
a. Klik tanda “+”, untuk menambahkan section baru.
Gambar 3.47 Menambahkan Section
b. Setelah itu, pilih jenis structure yang satu kolom. Seperti

ini:
Gambar 3.48 Memilih Jenis Structure
c. Pilih bagian Elements basic, klik widgets Image. Setelah

itu drag and drop kedalam section yang sebelumnya kita
buat.
Gambar 3.49 Memasukan Widgets Image
116 SMP IDN

d. Tambahkan gambar yang ingin kita jadikan sebagai logo
website kita. Disini kita harus sudah ada logo untuk website
kita. Kalau belum ada, bisa dibuat terlebih dahulu. Bisa
menggunakan canva untuk membuat logonya. Atau bisa
dibuka link assets web (https://s.id/assetsWeb).
Gambar 3.50 Menambahkan Gambar
e. Setelah kita menambahkan logo website, selanjutnya akan

kita atur ukuran logonya. Klik bagian Style, aturlah width,
max width dan height menjadi seperti ini:
Gambar 3.51 Mengatur Ukuran Gambar
Note: Disini kita pakai satuan ukuran PX (Piksel)

f. Kalau sudah, kita akan mengatur marginnya. Klik bagian
Advanced, dan aturlah marginnya.
Gambar 3.52 Mengatur Margin
g. Setelah tadi kita sudah mengatur semuanya untuk widgets

image. Langkah selanjutnya adalah menambahkan widgets
Navigation Menu. Kita akan kembali ke dashboard
elementor.
Gambar 3.53 Exit Widgets
h. Setelah kita sudah berada di dashboard elementor. Scroll ke

bawah sampai terlihat bagian “ELEMENTOR HEADER
& FOOTER BUILDER”. Pilih dan drag and drop widgets
Navigation Menu di bawah widgets Image.
Gambar 3.54 Drag and drop Navigation Menu
118 SMP IDN

i. Maka akan muncul menu, yang sudah kita atur sebelumnya.
Nah, kita akan menengahkan menunya agar terlihat rapi.
Klik Layout, di Alignmentnya kita pilih yang center.
Gambar 3.55 Mengatur Alignment
j. Karena warna menu masih berbeda dengan yang kita

inginkan. Kita akan mengubahnya. Klik bagian Style, dan
pilih Main Menu, scroll kebawah sedikit. Sampai bertemu
Typography, pilih “Hover”. Text Color akan kita ubah
menjadi warna biru (#3F91CE).
Gambar 3.56 Mengubah Warna Text Menu

k. Maka, akan terlihat seperti ini:
Gambar 3.57 Tampilan Header
2. Membuat Hero
Apa itu hero? Hero header merupakan penggunaan image, teks,
dan elemen navigasi pada halaman home atau bagian paling atas di
halaman web. Dalam penggunaanya bisa dikatakan sangat variatif.
Hero header bisa berupa foto saja, foto dan teks, foto slider, fix
foto, video atau animasi.
Hero image ini adalah hal pertama yang akan dilihat oleh pengunjung
website. Karena itu hero image memiliki peran penting membuat
pengunjungnya tertarik untuk menelusuri lebih dalam lagi tentang
website tersebut.
a. Untuk menambahkan Hero, klik “Add Template”
Gambar 3.58 Add Template
b. Kita akan masuk ke Library Elementor. Pilih bagian Blocks.

Pilih Categorynya “Hero”.
Gambar 3.59 Library Elementor
120 SMP IDN

c. Setelah itu, kita pilih Hero Travel. Yang ada di pojok kanan.
Gambar 3.60 Memilih Hero
d. Setelah kita pilih, klik “Insert” yang ada di pojok kanan

atas.
Gambar 3.61 Button Insert
e. Tunggu sampai prosesnya selesai. Jika sudah selesai,

maka akan langsung bertambah otomatis di bawah header
sebelumnya.
f. Selanjutnya kita akan atur Heronya. Pertama, kita akan hapus
teks travelnya. Klik teks “Travel”, dan klik kanan pada
mouse atau trackpad. Pilih “delete” untuk menghapusnya.

Gambar 3.62 Menghapus Teks Travel
g. Selanjutnya kita akan mengubah background section.

Untuk backgroundnya bisa kita download dari google atau
di folder Asset Web. Klik Edit Section.
Gambar 3.63 Mengedit Section
h. Setelah itu, kita pilih bagian Style. “Image => Choose

Image” dan pilih gambar yang ingin dijadikan background.
122 SMP IDN

Gambar 3.64 Mengubah Background Section
i. Setelah mengubah background. Selanjutnya kita akan

mengubah teks. Pilih teks “17 travel….” dan klik icon
pensil. Setelah itu kita edit teksnya menjadi “Sekolah Ku”:
Gambar 3.65 Teks yang akan diubah

Gambar 3.66 Mengedit Heading
j. Selanjutnya kita akan mengubah teks yang dibawahnya dari

“I am text block” menjadi seperti ini:
124 SMP IDN

k. Karena teksnya masih kurang kelihatan. Maka, kita akan
mengubah warna teksnya menjadi warna putih. Pilih bagian
Style => Text Editor => “Text Color” (pilih warna putih)
Gambar 3.68 Mengubah Warna Teks
l. Selanjutnya kita akan mengubah teks Button. Kita ubah

teksnya dari “Read More” menjadi “Daftar Sekarang”.
Gambar 3.69 Mengubah Teks Button

m. Jika kita mengarahkan kursor ke Button, maka akan berubah
warna menjadi hijau. Disini kita akan mengubahnya menjadi
warna biru (#1376C1). Klik bagian Style, pilih Hover =>
Text Color dan Border Color.
Gambar 3.70 Mengubah Warna Hover
n. Maka, tampilannya akan menjadi seperti ini:
Gambar 3.71 Tampilan Hero
o. Jangan lupa untuk klik “Update” agar perubahan yang kita

lakukan bisa disimpan, yang ada di pojok bawah.
126 SMP IDN

3. Menambahkan Konten Mengapa Harus Sekolah Ku
Selanjutnya kita akan menambahkan konten, yang berisi alasan
memilih Sekolahku. Disini kita juga akan menggunakan template
yang sudah disediakan oleh Library Elementor.
a. Klik “Add Template”
b. Pilih bagian “Blocks”, dan pilih Categorynya “Features”
Gambar 3.74 Memilih Category Features
c. Setelah itu, pilih blocks Strategy Planning yang putih.
Gambar 3.75 Memilih Blocks

d. Setelah itu kita akan melihat tampilan blocksnya, klik
“Insert” untuk memilih yang ada di pojok kanan atas.
e. Tunggu sampai prosesnya selesai. Jika sudah selesai, maka

akan langsung bertambah otomatis di bawah header hero
sebelumnya.
f. Nah, sekarang kita akan mengatur heronya. Pertama kita
akan ubah teks “Strategy Planning” menjadi “Mengapa
Harus di Sekolah Ku”.
g. Selanjutnya kita ubah teks di bawahnya. Menjadi seperti

ini:
128 SMP IDN

Gambar 3.78 Merubah Teks
h. Karena teksnya kurang terlihat, maka kita akan mengganti

warna teksnya menjadi lebih hitam. Pilih Style, Text Editor
=> Text Color (hitam)

i. Selanjutnya kita akan mengubah kolom Graphic Design.
Gambar 3.80 Kolom Graphic Design
j. Pertama kita akan mengubah teks “Graphic Design”

menjadi “Ekstrakurikuler dan Kegiatan”. Pilih teks
Graphic Design, dan Edit Titlenya.
Gambar 3.81 Mengedit Teks
k. Kita ubah juga teks yang ada dibawahnya. Menjadi seperti

ini:
130 SMP IDN

l. Selanjutnya kita memberikan warna border, pada setiap
kolom. Klik Edit Column, pilih bagian Style => Border
=> Normal => Border Type (Solid) => Color (biru =
#1376C1). Jangan lupa juga kita berikan widthnya 3.
Gambar 3.84 Memberikan Warna Border
m. Kita juga akan memberikan margin, agar tidak terlalu dekat

satu dengan satu kolom lainnya. Klik bagian Advanced,
Margin kita kasih 1.
Gambar 3.85 Margin

n. Kita juga akan mengubah kolom Management dan
Developing. Caranya juga sama seperti sebelumnya.
Berikut tampilan Management dan Developing setelah
diubah:
Gambar 3.86 Tampilan Management setelah di ubah
Gambar 3.87 Tampilan Developing setelah di ubah
o. Dan tampilan akhirnya akan menjadi seperti ini:
132 SMP IDN

Gambar 3.88 Tampilan Akhir Konten
4. Menambahkan Konten Pelajaran Sekolah Ku

Selanjutnya kita akan membuat pelajaran apa saja yang ada di
Sekolah Ku. Disini kita juga akan menggunakan Library Elementor.
a. Klik “Add Template”
b. Pilih bagian “Blocks”, dan pilih Categorynya “Service”.

Setelah itu pilih blocks “Image Services” yang berkolom
3.
Gambar 3.90 Memilih Blocks
c. Setelah itu kita akan melihat tampilan blocksnya, klik

“Insert” untuk memilih yang ada di pojok kanan atas.

d. Sebelum kita mengedit teks dan iconnya. Kita siapkan

terlebih dahulu iconnya, sesuaikan juga dengan
pelajarannya. Kita juga bisa mencari iconnya di https://
www.flaticon.com/. Oh ya jangan lupa ukuran maksimal
iconnya 256 x 256 px Untuk pelajaran yang dimiliki
Sekolah Ku adalah
- Programming
“Belajar bahasa pemrograman bersama mentor
ahlinya. Dan dapatkan sertifikasi nasional atau
internasional”.
- Networking
“Siswa akan mendalami bidang networking seperti
Mikrotik, Cisco dan Ubiquity”.
- Diniyah
“Kurikulum Sekolah Ku mengusung pemahaman
agama secara mendalam. Siswa akan dibekali ilmu
agama dan akhlakul karimah”.
e. Jika sudah mendapatkan iconnya. Selanjutnya kita ubah
teks “Services” menjadi “Pelajaran Sekolah Ku”. Pilih
teks Service dan edit.
134 SMP IDN

f. Sekarang kita akan mengubah teks dan icon per masing-

masing kolom. Pertama, kita akan mengubah kolom
Marketing. Arahkan kursor ke kolom marketing. Klik
icon pensil untuk mengubahnya.
Gambar 3.93 Mengedit Kolom Marketing
g. Setelah itu, kita ubah iconnya, title dan deskripsinya. Title

dan deskripsi bisa kita lihat pada bagian d.

Gambar 3.94 Mengedit Image Box
h. Ulangi langkah-langkah sebelumnya. Sampai semua kolom

berubah. Maka, tampilannya akan menjadi seperti ini:
Gambar 3.95 Tampilan Kolom Lainnya
136 SMP IDN

i. Maka, tampilan pelajaran Sekolah Ku akan seperti ini:
Gambar 3.96 Tampilan Pelajaran Sekolah Ku
5. Membuat Footer
Selanjutnya kita akan membuat Footer, kita sudah tahu apa itu
Footer, dan sudah kita bahas juga sebelumnya. Nah, sekarang kita
akan langsung membuatnya.
a. Klik tanda “+” untuk menambahkan section baru.
Gambar 3.97 Add New Section
b. Setelah itu pilih jenis structure yang berkolom 3.
c. Kita akan mengubah warna background section terlebih

dahulu. Klik “Edit Section”, pilih bagian Style =>
Background Type (classic) => Color (#1376C1).

d. Klik salah satu kolom, drag and drop widgets Heading ke

dalam kolom.
Gambar 3.100 Drag and drop Heading
e. Kita kembali ke dashboard Elementor.
Gambar 3.101 Button ke dashboard Elementor
f. Setelah itu di bawah Heading, drag and drop widgets “Text

Editor”.
138 SMP IDN

Gambar 3.102 Drag and drop Text Editor
g. Pertama, kita ubah Heading menjadi “Sekolah Ku”.
Gambar 3.103 Mengubah Teks (title)
h. Kita akan mengubah warna Heading, karena tidak terlalu

terlihat. Klik bagian Style => Text Color putih (#ffffff).
i. Kedua, kita ubah isi Text Editor menjadi seperti ini

“Sekolah IT yang terletak di Jonggol, Sukanegara, Bogor
dibawah Yayasan IDN. Fokus pembelajaran menjadikan
peserta didik expert atau jagoan IT pinter ngaji.”

j. Kita akan ubah juga warna teksnya. Klik bagian Style =>
Text Color putih (#ffffff).
k. Drag and drop widgets Heading, ke dalam kolom kedua.
140 SMP IDN

l. Ubah teks Heading menjadi “Link Menu”
m. Kita akan mengubah warna Heading, karena tidak terlalu

terlihat. Klik bagian Style => Text Color putih (#ffffff).
n. Kita kembali ke dashboard Elementor.
o. Selanjutnya, kita pilih widgets “Icon List” pada bagian

General. Setelah itu drag and drop di bawah Link Menu.

Gambar 3.111 Drag and drop Icon List
p. Setelah itu, kita akan melihat 3 buah List Item. Klik salah
satunya, ubah teksnya menjadi “Beranda” dan hapus icon
centang dengan klik icon “Tong Sampah”.
Gambar 3.112 Mengubah List Item
142 SMP IDN

q. Hapus 2 List Item lainnya. Klik tanda “X” untuk
menghapusnya.
Gambar 3.113 Menghapus List Item
r. Setelah itu kita akan mengcopy Item beranda, sebanyak

jumlah menu yang kita miliki.
Gambar 3.114 Mengcopy Item Beranda
s. Buatlah 3 Item yaitu Profil, Berita dan Kontak. Caranya

sama seperti membuat Item Beranda. Menjadi seperti ini:
Gambar 3.115 List Item

t. Setelah itu, kita akan mengubah warna teksnya menjadi
putih. Klik bagian Style => Text => Text Color (#ffffff)
u. Untuk kolom yang ke-3, caranya masih sama dengan kolom

yang ke-2. Drag and drop ke kolom 3. Dan ubahlah teksnya
menjadi “Media Social”. Jangan lupa ubah warnanya.
v. Tambahkan widgets Icon List di bawahnya. Caranya masih

sama seperti sebelumnya. Tapi akan kita ubah menjadi
seperti dibawah ini, jangan lupa mengubah warna nya.
144 SMP IDN

Gambar 3.118 List Item Media Social
w. Maka, tampilan Footer akan menjadi seperti ini:
Gambar 3.119 Tampilan Footer
5. Membuat Halaman Profil

Halaman selanjutnya adalah Profil. Kita akan mengisi halaman ini dengan Visi dan
Misi dan Profil Sekolah Ku. Pertama kita akan membuat Visi dan Misi terlebih
dahulu, setelah itu Profil Sekolah Ku. Kita akan kembali ke dashboard wordpress.
a. Kembali ke Halaman Profil
1. Kembali ke dashboard wordpress. Pilih Pages => All Pages
2. Arahkan kursor ke Page “Profil”. Dan pilih bagian “Edit”
Gambar 3.121 Setting Page

3. Kita akan masuk ke Edit Page. Di pojok kanan atas akan ada Menu
4. Scroll sedikit kebawah, kita akan menemukan bagian “Page

Attributes”. Pilih Templates => Elementor Canvas.
5. Klik “Update” untuk menyimpan perubahan yang kita lakukan.
146 SMP IDN

6. Klik “Edit with Elementor”
7. Setelah klik “Edit with Elementor”. Kita akan masuk ke Page

Profil, tapi disini ada tampilan Dashboard Elementor.
Gambar 3.125 Dashboard Elementor
8. Selanjutnya kita akan menghapus bodynya dengan cara, arahkan

kursor ke section bodynya, kemudian klik tanda “Silang” untuk
menghapus.
Gambar 3.126 Menghapus Section Body

9. Nah, di langkah ini kita sudah memiliki sebuah halaman kosong.
Kemudian langkah selanjutnya kita akan mengisi halaman Profil
kita ini dengan konten-konten kita sendiri.
b. Membuat Header
Sebelum kita membuat Visi dan Misi, kita akan membuat Header terlebih
dahulu. Caranya masih sama seperti sebelumnya yang ada di Halaman
Beranda.
1. Klik tanda “+”, untuk menambahkan section baru.
Gambar 3.127 Menambahkan Section
2. Setelah itu, pilih jenis structure yang satu kolom. Seperti ini:
3. Pilih bagian Elements basic, klik widgets Image. Setelah itu drag
and drop kedalam section yang sebelumnya kita buat.
Gambar 3.129 Memasukan Widgets Image
148 SMP IDN

4. Tambahkan gambar yang ingin kita jadikan sebagai logo website
kita. Disini kita harus sudah ada logo untuk website kita. Kalau
belum ada, bisa dibuat terlebih dahulu. Bisa menggunakan canva
untuk membuat logonya. Atau bisa dibuka link assets web (https://s.
id/assetsWeb).
5. Setelah kita menambahkan logo website, selanjutnya akan kita

atur ukuran logonya. Klik bagian Style, aturlah width, max width
dan height menjadi seperti ini:
Gambar 3.131 Mengatur Ukuran Gambar

6. Kalau sudah, kita akan mengatur marginnya. Klik bagian
Advanced, dan aturlah marginnya.
Gambar 3.132 Mengatur Margin
7. Setelah tadi kita sudah mengatur semuanya untuk widgets image.

Langkah selanjutnya adalah menambahkan widgets Navigation
Menu. Kita akan kembali ke dashboard elementor.
Gambar 3.133 Exit Widgets
8. Setelah kita sudah berada di dashboard elementor. Scroll ke bawah

sampai terlihat bagian “ELEMENTOR HEADER & FOOTER
BUILDER”. Pilih dan drag and drop widgets Navigation Menu di
bawah widgets Image.
Gambar 3.134 Drag and drop Navigation Menu
9. Maka akan muncul menu, yang sudah kita atur sebelumnya. Nah,
kita akan menengahkan menunya agar terlihat rapi. Klik Layout,
di Alignmentnya kita pilih yang center.
150 SMP IDN

Gambar 3.135 Mengatur Alignment
10. Karena warna menu masih berbeda dengan yang kita inginkan.
Kita akan mengubahnya. Klik bagian Style, dan pilih Main
Menu, scroll kebawah sedikit. Sampai bertemu Typography,
pilih “Hover”. Text Color akan kita ubah menjadi warna biru
(#3F91CE).
Gambar 3.136 Mengubah Warna Text Menu
11. Maka, akan terlihat seperti ini:
Gambar 3.137 Tampilan Navigation Menu

12. Jangan klik tombol Update. Kita akan mengkliknya setelah kita
membuat Footer, karena Header dan Footer akan kita jadikan
Template. Dan nanti, untuk seterusnya kita tidak perlu untuk
membuat Header dan Footer lagi.
c. Membuat Footer
Selanjutnya kita akan membuat Footer. Untuk langkahnya sama seperti
sebelumnya.
1. Klik tanda “+” untuk menambahkan section baru. Dibawah
Header.
2. Setelah itu pilih jenis structure yang berkolom 3.
3. Kita akan mengubah warna background section terlebih dahulu.

Klik “Edit Section”, pilih bagian Style => Background Type
(classic) => Color (#1376C1).
152 SMP IDN

4. Klik salah satu kolom, drag and drop widgets Heading ke dalam
kolom.
5. Kita kembali ke dashboard Elementor.
6. Setelah itu di bawah Heading, drag and drop widgets “Text

Editor”.

7. Pertama, kita ubah Heading menjadi “Sekolah Ku”.
Gambar 3.144 Mengubah Teks (title)
8. Kita akan mengubah warna Heading, karena tidak terlalu terlihat.

Klik bagian Style => Text Color putih (#ffffff).
9. Kedua, kita ubah isi Text Editor menjadi seperti ini “Sekolah IT
yang terletak di Jonggol, Sukanegara, Bogor dibawah Yayasan
IDN. Fokus pembelajaran menjadikan peserta didik expert atau
jagoan IT pinter ngaji.”
154 SMP IDN

10. Kita akan ubah juga warna teksnya. Klik bagian Style => Text
Color putih (#ffffff).
11. Drag and drop widgets Heading, ke dalam kolom kedua.

12. Ubah teks Heading menjadi “Link Menu”
13. Kita akan mengubah warna Heading, karena tidak terlalu terlihat.
Klik bagian Style => Text Color putih (#ffffff).
14. Kita kembali ke dashboard Elementor.
15. Selanjutnya, kita pilih widgets “Icon List” pada bagian General.
Setelah itu drag and drop di bawah Link Menu.
156 SMP IDN

Gambar 3.152 Drag and drop Icon List
16. Setelah itu, kita akan melihat 3 buah List Item. Klik salah satunya,
ubah teksnya menjadi “Beranda” dan hapus icon centang dengan
klik icon “Tong Sampah”.
Gambar 3.153 Mengubah List Item

17. Hapus 2 List Item lainnya. Klik tanda “X” untuk menghapusnya.
Gambar 3.154 Menghapus List Item
18. Setelah itu kita akan mengcopy Item beranda, sebanyak jumlah
menu yang kita miliki.
Gambar 3.155 Mengcopy Item Beranda
19. Buatlah 3 Item yaitu Profil, Berita dan Kontak. Caranya sama
seperti membuat Item Beranda. Menjadi seperti ini:
Gambar 3.156 List Item
20. Setelah itu, kita akan mengubah warna teksnya menjadi putih. Klik
bagian Style => Text => Text Color (#ffffff)
158 SMP IDN

21. Untuk kolom yang ke-3, caranya masih sama dengan kolom yang
ke-2. Drag and drop ke kolom 3. Dan ubahlah teksnya menjadi
“Media Social”. Jangan lupa ubah warnanya.
22. Tambahkan widgets Icon List di bawahnya. Caranya masih sama

seperti sebelumnya. Tapi akan kita ubah menjadi seperti dibawah
ini, jangan lupa mengubah warna nya.

Gambar 3.159 List Item Media Social
23. Maka, tampilan Footer akan menjadi seperti ini:
Gambar 3.160 Tampilan Footer
24. Setelah itu, klik tanda arah panah atas, yang ada di sebelah button
Update. Dan pilih “Save as Template”.
Gambar 3.161 Save as Template
25. Setelah itu, masukan nama templatenya menjadi “Header Footer”.

Dan klik “Save”.
Gambar 3.162 Memasukan Nama Template
160 SMP IDN

26. Jika berhasil, maka akan terlihat menjadi seperti ini:
Gambar 3.163 Template Setelah di Save
27. Dan nanti jika kita ingin menggunakan template yang berisikan
Header dan Footernya. Kita hanya klik “Insert”. Dan akan
bertambah secara otomatis. Ini adalah salah satu cara, agar kita
tidak mengulangi langkah-langkah yang sama.
d. Membuat Visi dan Misi

Untuk Visi dan Misi, kita akan mengisinya dengan gambar. Kita bisa
mendownloadnya di https://s.id/assetsWeb .
1. Klik tanda “+” untuk menambahkan section baru.
2. Setelah membuat Section, maka Section akan berada dibawahnya

Footer. Nah, kita akan menaruh Section diatasnya Footer, karena
Footer itu sendiri letaknya di paling bawah bagian suatu website.
Gambar 3.165 Section
3. Klik “Edit Section”

4. Setelah itu, taruh Sectionnya ke atas Footer. Menjadi seperti ini:
Gambar 3.167 Menaruh Section
5. Selanjutnya kita akan masukan widgets Heading kedalam section.

Pilih bagian Basic => Heading, dan drag and drop ke dalam
section.
6. Kita title Headingnya menjadi “Visi” dan titlenya kita akan rata
tengahkan.
162 SMP IDN

7. Kita ubah warna Headingnya, klik Style => Text Color (#4DB8E5)
8. Selanjutnya kita tambahkan widgets Image, taruh dibawah

Heading.
9. Pilih gambar Visi yang sudah disediakan Assets Web.

10. Tambahkan Heading lagi, dibawah gambar Visi. Caranya masih
sama seperti sebelumnya:
11. Kita title Headingnya menjadi “Misi” dan titlenya kita akan rata
tengahkan.
Gambar 3.174 Edit Heading
164 SMP IDN

12. Kita ubah warna Headingnya, klik Style => Text Color (#4DB8E5)
13. Selanjutnya kita tambahkan widgets Image, taruh dibawah

Heading
14. Pilih gambar Misi yang sudah disediakan Assets Web.
e. Membuat Profil Sekolah Ku

Setelah kita membuat Visi dan Misi, selanjutnya kita akan membuat Profil
Sekolah Ku. Sebagai contoh data, bisa cek website https://idn.sch.id/ .
Mari kita langsung praktikan.

1. Klik “Add New Section”.
2. Setelah itu pilih jenis structure yang berkolom 1.
Gambar 3.179 Jenis Structure
3. Klik “Edit Section”
4. Setelah itu, taruh Sectionnya ke atas Footer. Menjadi seperti ini:
Gambar 3.181 Drag and drop Section
5. Tambahkan Heading lagi, dibawah gambar Misi. Caranya masih

sama seperti sebelumnya:
166 SMP IDN

6. Kita ubah title Headingnya menjadi “Profil” dan kita rata

tengahkan titlenya.
Gambar 3.183 Edit Heading
7. Kita ubah warna teks Headingnya. Klik Style => Text Color
(#4DB8E5)

8. Selanjutnya kita tambahkan widgets Text Editor. Drag and drop
di bawah Heading.
9. Edit Text Editor, tambahkan teks contoh data.
Gambar 3.186 Text Editor
10. Setelah memasukan teksnya. Klik Update, untuk menyimpan

pengubahan yang sudah kita lakukan. Yang ada di pojok bawah
168 SMP IDN

11. Maka, tampilan Halaman Profil akan menjadi seperti ini:
Gambar 3.188 Tampilan Halam Profil
6. Membuat Halaman Berita

Halaman yang ketiga adalah Halaman Berita. Isinya adalah artikel atau berita
mengenai Sekolah Ku. Kita akan ambil sebagai contoh (dummy) datanya dari
website https://idn.sch.id/blog/ atau mungkin dari website lainnya juga bisa. Kita
akan ambil beberapa Artikelnya.

a. Membuat Artikel
Pertama, kita akan membuat Artikel terlebih dahulu. Karena website
kita baru satu artikel yaitu Hello World dan itu pun artikel bawaan dari
website. Kita akan mencoba membuat artikel terlebih dahulu.
1. Kita kembali ke dashboard wordpress. Dan pilih Posts => All
Posts
Gambar 3.189 Menu di dashboard wordpress
2. Kita akan masuk ke Post. Tampilannya akan seperti ini:
Gambar 3.190 All Post
3. Klik “Add New”, untuk membuat Artikel yang baru.
Gambar 3.191 Add New
4. Di bab sebelumnya kita sudah menjelaskan bagian-bagian yang

ada di Post.
170 SMP IDN

Gambar 3.193 Bagian Post
5. Isi Add title untuk judul artikelnya dan dibawahnya adalah isi
artikel. Pertama, kita akan menentukan judulnya terlebih dahulu.
Gambar 3.194 Judul Artikel
6. Kedua, kita akan mencoba memasukan video youtube kedalam

artikel. Klik tanda “+”/Add Block.
Gambar 3.195 Add Block
7. Pilih “Browse all”. Untuk melihat semua block.
Gambar 3.196 Browse all

8. Klik bagian “Blocks” dan scroll sedikit ke bawah, sampai
menemukan bagian Media dan pilih “Video”.
Gambar 3.197 Memilih Block Video
9. Setelah itu klik “Insert from URL” dan taruh URL video youtube
kita disana (https://youtu.be/vW6yA_1f-Tc) , tekan enter.
Gambar 3.198 Menambahkan URL Video
172 SMP IDN

10. Maka, setelah kita taruh URLnya. Akan menjadi seperti ini:
Gambar 3.199 Menambahkan Video Youtube
11. Selanjutnya dibawah, tinggal kita tambahkan isi dari artikelnya.
Gambar 3.200 Isi Artikel
12. Kita akan atur terlebih dahulu artikelnya, mulai dari kapan terbitnya,
kategorinya apa, dan siapa saja yang dapat melihat artikelnya.
Sebenarnya semua sudah kita bahas di Bab sebelumnya.
Klik icon Gear (Settings) yang ada pada pojok kanan atas.
Gambar 3.201 Settings
13. Untuk templatenya masih “Default Template”.
Gambar 3.202 Template

14. Kita akan membuat kategori artikelnya. Agar nanti kita dapat
dengan mudah mencari artikelnya. Scroll kebawah, sampai terlihat
Categories. Dan klik Add New Category..
Gambar 3.203 Add New Category.
15. Isi nama categorynya. Dan kalau sudah klik Add New Category.
Gambar 3.204 Menambahkan category
16. Selanjutnya kita akan menambahkan gambar pada artikel. Scroll

sedikit kebawah. Maka kita akan melihat Featured image. Kita
upload gambarnya di Set featured image.
Gambar 3.205 Featured image
174 SMP IDN

17. Setelah itu klik “Publish”.
18. Kita akan diminta untuk mengecek pengaturan artikel sekali lagi.
Aturlah menjadi seperti ini:
Gambar 3.207 Double Check Settings
19. Setelah itu klik “Publish” lagi.
20. Jika sudah seperti ini, berarti artikel yang kita buat sudah muncul
di website kita.

Gambar 3.209 Artikel Sudah Berhasil Dibuat
21. Buat lah beberapa artikel dengan menggunakan cara-cara yang

sudah kita bahas sebelumnya.
22. Bisa kita membuat 3 buah artikel.
Gambar 3.210 Artikel
23. Selanjutnya kita akan membuat Halaman Beritanya menggunakan

Elementor.
b. Desain Halaman Berita Dengan Elementor

Oke, kita akan membuat Halaman Berita dengan Elementor. Kita masih
berada di dashboard Wordpress.
1. Pilih Pages => All Pages
176 SMP IDN

2. Arahkan kursor ke Page “Berita”. Dan pilih bagian “Edit”
Gambar 3.212 Setting Page
3. Kita akan masuk ke Edit Page. Di pojok kanan atas akan ada Menu
4. Scroll sedikit kebawah, kita akan menemukan bagian “Page

Attributes”. Pilih Templates => Elementor Canvas.

5. Klik “Update” untuk menyimpan perubahan yang kita lakukan.
6. Klik “Edit With Elementor”.
7. Sekarang kita akan menambahkan Template Header dan Footer

yang sudah kita buat pada Halaman Profil sebelumnya. Klik “Add
Template”.
178 SMP IDN

8. Pilih bagian “My Template”, “Header Footer” => klik “Insert”.
Gambar 3.218 Insert Template
9. Klik “Yes”, untuk menambahkan template.
Gambar 3.219 Menambahkan Template
10. Dan Header dan Footer akan langsung tampil.
Gambar 3.220 Tampilan Header Footer
11. Scroll kebawah. Sampai menemukan bagian “Premium Addons”.

Setelah itu pilih widgets “Premium Blog”. Dan drag and drop
diatasnya Footer.

Gambar 3.221 Drag and drop widgets Premium Blog
12. Dan otomatis, artikel yang sudah kita buat sebelumnya akan
muncul.
Gambar 3.222 Hasil widgets Premium Blog
13. Karena ukuran artikelnya tidak sama ukurannya, kita akan samakan
ukurannya. Pertama, kita ubah style artikelnya dari Skinnya
“Classic” menjadi “Modern”. Dan kolomnya menjadi “3”.
Gambar 3.223 Mengubah Skin
180 SMP IDN

14. Selanjutnya, kita akan mengubah ukuran gambarnya. Scroll ke
bawah, sampai menemukan bagian “Featured Image”. Kita ubah
“Image Size” menjadi Medium 300x300. Dan “Height” menjadi
250px.
Gambar 3.224 Mengubah Ukuran Gambar
15. Dan hasilnya akan menjadi seperti ini:
Gambar 3.225 Tampilan Blog

16. Klik “Update”, agar pengubahan yang kita lakukan tersimpan di
website.
7. Membuat Halaman Kontak

Selanjutnya kita akan membuat Halaman Kontak. Isinya adalah nomor Hp, sosial
media dan lain-lainnya.
a. Kita kembali ke dashboard wordpress. Klik Pilih Pages => All Pages
b. Arahkan kursor ke Page “Kontak”. Dan pilih bagian “Edit”.
Gambar 3.228 Settings Page
c. Kita akan masuk ke Edit Page. Di pojok kanan atas akan ada Menu
182 SMP IDN

d. Scroll sedikit kebawah, kita akan menemukan bagian “Page Attributes”.
Pilih Templates => Elementor Canvas.
e. Klik “Update” untuk menyimpan perubahan yang kita lakukan.
f. Klik “Edit with Elementor”.
g. Kita hapus terlebih dahulu bodynya. Klik “Delete Section”.

Gambar 3.233 Delete Section
h. Sekarang kita akan menambahkan Template Header dan Footer yang

sudah kita buat pada Halaman Profil sebelumnya. Klik “Add Template”.
i. Pilih bagian “My Template”, “Header Footer” => klik “Insert”.
Gambar 3.235 Insert Template
j. Klik “Yes”, untuk menambahkan template.
Gambar 3.236 Menambahkan Template
k. Dan Header dan Footer akan langsung tampil.

l. Nah, sekarang kita akan menambahkan widgets “Heading” dan “Text
Editor” untuk menambahkan nomor HP dan alamat media social. Kita
tambahkan section dahulu. Klik “Add New Section”.
184 SMP IDN

m. Pilih jenis structure yang berkolom 1.
Gambar 3.238 Select Structure
n. Setelah itu, kita taruh section diatas footer. Klik “Edit Section”.
Gambar 3.239 Drag and drop Section
o. Drag and drop widgets “Heading”.

p. Edit titlenya menjadi “Kontak Kami”.
q. Kita ubah warna teks Headingnya menjadi biru (#4191C7)
Gambar 3.242 Text Color
r. Kita kembali ke dashboard Elementor.
s. Kita tambahkan widgets “Text Editor” di bawah Heading.
186 SMP IDN

t. Kita ubah teksnya menjadi seperti ini:
Gambar 3.245 Text Editor

u. Tampilan Halaman Kontak akan menjadi seperti ini:
Gambar 3.246 Tampilan Kontak
v. Klik “Update”, agar pengubahan yang kita lakukan tersimpan di website.
w. Selamat !, kita sudah selesai membuat Website Sekolah. Silahkan

bisa diexplore lagi untuk elementornya dan dipercantik lagi tampilan
websitenya. (https://sekolahku.santriidn.com/)
188 SMP IDN

BAB IV - Personal Website
penggunaan, jenis, dan fungsi dalam membuat website menggunakan elementor dan
memenuhi indikator pencapaian kompetensi dalam materi ini serta memiliki karakter
yang religius, sopan, jujur, disiplin, tanggung jawab.
m. Memahami Instal Sub Domain
n. Memahami cara install Wordpress
o. Menjelaskan cara install Elementor
p. Menjelaskan cara menggunakan elementor
q. Menjelaskan cara membuat header
r. Memahami cara membuat menu di elementor
s. Memahami cara menambahkan block baru
t. Memahami cara membuat hero
u. Memahami cara menambahkan skill indicator
v. Memahami cara cara membuat footer
w. Memahami cara menambahkan konten pada footer
l. Terampil dalam menginstall Wordpress
m. terampil dalam menjelaskan cara install Elementor
n. Terampil dalam menggunakan elementor
o. Terampil dalam membuat header
p. Terampil dalam membuat menu di elementor
q. Terampil dalam menambahkan block baru
r. Terampil dalam membuat hero

s. Terampil dalam menambahkan skill indicator
t. Terampil dalam cara membuat footer
u. Terampil dalam menambahkan konten pada footer
C. Install Wordpres di Domain Utama

Alhamdulillah, Pada bab sebelumnya kita sudah belajar tentang hosting, praktik
membuat website masjid, dan praktik membuat website sekolah. Sekarang kita
masuk di bab terakhir yaitu materi membuat Personal website.
1. Install Wordpress
Pada bab ini kita tidak akan membahas secara detail bagaimana install wordpress
karena sudah dijelaskan pada bab sebelumnya. Kita hanya akan membahas
bagian-bagian intinya saja. Bagi yang belum begitu paham bisa sambil buka bab
sebelumnya.
a. Masuk ke cPanel, pilih Softaculous - Wordpress
Gambar 4.1 Softaculous menu
b. Pilih Install
190 SMP IDN

Gambar 4.2 Dashboard softaculous
c. Pada bagian Software Setup, pastikan domain yang dipilih adalah domain
utama, pada bagian “in Directory” kita kosongkan.
Gambar 4.3 Software Setup
d. pada bagian “Site Settings”,

- Site Name - Sesuaikan dengan nama atau alias kita masing-masing.
- Site Descriptions - Silahkan beri deskripsi / bisa sama dengan contoh.

Gambar 4.4 Site Settings
e. Pada bagian Admin Account, silahkan sesuaikan dengan keinginan kita

masing-masing. pastikan passwordnya diingat dengan baik.
f. Sisanya sesuaikan, seperti language, dan sejenisnya silahkan lakukan seperti

langkah pada bab sebelumnya. Disini penulis menggunakan Theme dari
AnnieBlog.
Gambar 4.5 Memilih Theme
Ketika sudah berhasil menginstall Wordpressnya, maka tampilan dari website

kita akan menjadi seperti berikut.
192 SMP IDN

Gambar 4.6 Halaman Utama Website Santriidn
Sampai disini kita sudah berhasil install wordpress di hosting utama kita.
Selanjutnya kita akan mencoba menambahkan menu, instal elementor dan
beberapa step lainya untuk menyempurnakan website kita.
2. Memperbarui halaman Pages

Sebenarnya kita sudah memiliki pages yang kita butuhkan, dimana pages itu dibuat
ketika kita memilih tema saat install wordpress di awal tadi. Nah, kita manfaatkan
pages yang sudah ada tersebut menjadi pages yang sesuai dengan kebutuhan kita.
Jadi nanti ada beberapa page yang kita butuhkan yaitu Home, My Portfolio, About
dan Resume. Sementara saat ini kita sudah memiliki beberapa halaman/page yang
kita dapat dari tema yaitu Home, About, Contact, Recipe, dan beberapa lainnya.
Ada beberapa pages yang sudah sesuai yaitu Home dan About, kemudian yang
belum sesuai ada “Contact” dan “Receipt”, jadi akan kita ubah sesuai dengan
kebutuhan kita Ikuti langkah dibawah ini untuk merubah pages tersebut.
a. Pilih Menu Pages - All Pages pada halaman dashboard wordpress kita

Gambar 4.7 Memilih menu All Pages
b. Arahkan kursor ke menu pages yang akan diubah, kemudian pilih menu “Quick
Edit”
Gambar 4.8 Memilih menu Quick Edit
c. Setelah menekan tombol “Quick Edit”, pada bagian “Title dan Slug” kita
ganti dari sebelumnya “Contact” menjadi “My Portfolio” seperti gambar
dibawah.
Gambar 4.9 Menu Quick Edit
194 SMP IDN

d. Klik Tombol “Update” yang ada pada pojok kanan bawah di menu “Quick
Setting” untuk menyimpan perubahan yang kita lakukan.
Gambar 4.10 Tombol Update
e. Selanjutnya yang akan kita ubah adalah page “Recipe” sama seperti langkah
ganti dari sebelumnya “Recipe” menjadi “Resume”
Gambar 4.11 Merubah Page Recipe
f. Klik Tombol “Update” yang ada pada pojok kanan bawah di menu “Quick
Setting” untuk menyimpan perubahan yang kita lakukan.

Gambar 4.12 Tombol Update
Ok, sampai disini kita sudah berhasil memperbarui pages sesuai dengan kebutuhan
yang akan kita gunakan. Selanjutnya kita akan menyesuaikan menu agar sesuai
dengan kebutuhan kita.
3. Menambahkan menu
Hal pertama ketika kita ingin menambahkan menu pada website kita, adalah
menentukan kebutuhan apa saja yang dibutuhkan. Jangan sampai kita membuat
menu yang fungsinya tidak begitu diperlukan.
a. Menentukan menu
Karena website yang kita buat disini adalah website portfolio/personal website,
kita akan membuat menu seminimal mungkin, agar website kita semakin simple.
Hal ini bertujuan agar pengunjung website kita nanti tidak dibingungkan karena
terlalu banyak menu. Disini kita hanya gunakan 4 buah menu utama.
1. Home - Menu ini berisi tentang gambaran besar profil kita, dari project yang
pernah dibuat, kontak, resume, dan sebagainya.
2. My Portfolio - menu ini berisi tentang project-project yang pernah kita

buat, mulai dari IT, Diniyah, English, pengalaman/experience yang pernah
kita dapat, achievement/penghargaan dan sebagainya.
3. About - berisi tentang data diri kita, profile singkat kita, lahir dimana,
hobinya apa, Gambaran tentang diri kita, Quotes dan sebagainya.
4. Resume - Menu ini berisi tentang kemampuan kita, misal kita belajar
scratch, nanti kita tunjukan seberapa jauh skill scratch kita, dan sebagainya.
196 SMP IDN

b. Membuat menu
Sebenarnya untuk menu kita juga sudah memilikinya, dimana menu tersebut
kita peroleh dari bawaan tema yang kita instal. jadi kita akan memanfaatkan
menu yang sudah ada, kemudian kita edit atau tinggal kita sesuaikan saja
dengan kebutuhan yang akan kita gunakan. Langkah pertama adalah kita
pastikan bahwa kita sudah berada di dalam dashboard wordpress kita masing-
masing.
1. Pilih Appearance - menus
Gambar 4.13 menu Appearance
2. Pada bagian menu Structure, kita sudah memiliki nama menu, tapi kita
ganti menjadi lebih sederhana. yang sebelumnya “Annieblog Header
Menu” menjadi “Header Menu”

3. Kita urutkan menunya sesuai dengan rancangan yang sudah kita buat di
awal tadi. Pastikan urutanya sama dengan gambar dibawah.
4. Klik Tombol “Save Menu” yang ada pada pojok kanan bawah di menu
untuk menyimpan perubahan yang kita lakukan.
Gambar 4.16 Tombol Save Menu
Sampai disini kita sudah berhasil membuat pages dan menu. Selanjutnya kita akan
menginstall Elementor dan beberapa tools yang dibutuhkan untuk mempermudah
mengembangkan website kita.
198 SMP IDN

D. Elementor
Disini kita nggak akan ngebahas lagi tentang pengertian, fungsi, dan fitur-fitur
elementor, karena kita sudah membahasnya di bab sebelumnya. Disini kita akan
langsung mempraktekannya saja, bagaimana kita meng-update website kita dengan
plugin elementor.
1. Instal Plugin Elementor
Langkah awal untuk menginstal plugin elementor adalah memastikan kita sudah
berada di dashboard wordpress kita.
a. Klik menu Plugin - Add New
Gambar 4.17 Menu Plugins
b. Pada bagian pencarian, ketik elementor
Gambar 4.18 Menu Pencarian
c. Kita akan Instal 4 Buah Plugin dari Elementor, yaitu Elementor Website
Builder, Essential Addons for Elementor, Elementor – Header, Footer &
Blocks Template, dan Premium Addons for Elementor

Gambar 4.19 Installing Plugin
d. Setelah berhasil diinstal jangan lupa untuk di aktifkan semua pluginnya dengan
menekan tombol “Activate”
Gambar 4.20 Activate Plugin Elementor
Ok, sampai disini kita sudah berhasil menginstall dan mengaktifkan plugin
elementor. Next kita akan praktek menggunakan plugin tersebut untuk
membangun website kita.
2. Membuat Halaman Utama

Ok, sekarang kita akan membuat halaman utama, halaman utama ini akan kita
gunakan untuk menampilkan konten-konten kita. Sebenarnya kita sudah memiliki
halaman utama, jadi kita akan memanfaatkan resource yang sudah ada.
a. Pilih menu Pages - All pages di halaman dashboard wordpress kita.
200 SMP IDN

Gambar 4.21 All Pages Menu
b. Setelah berada di halaman “Pages” arahkan kursor pada bagian “Home”

kemudian klik tombol “Edit”
Gambar 4.22 Edit Page
c. Setelah masuk ke halaman “Pages Home” , pilih menu “Page” disebelah kanan
layar.
Gambar 2.23 Menu Page

d. Pada bagian “Page Atribut” di sebelah kanan bawah, pilih template
“Elementor Canvas”
Gambar 4.24 Memilih Template
e. Kemudian pilih “Edit With Elementor”
Gambar 4.25 Menu Edit Elementor
f. Setelah di klik tombol “Edit With Elementor” kita akan masuk ke halaman
“Dashboard Elementor”.
202 SMP IDN

Gambar 4.26 Dashboard Elementor”
Pastikan disini kita sudah mendaftar akun di elementor, jika belum silahkan
buka halaman sebelumnya. disana sudah dijelaskan bagaimana kita mendaftar
akun elementor.
g. Selanjutnya kita akan menghapus bodynya dengan cara, arahkan kursor ke

section bodynya, kemudian klik tanda silang untuk menghapus.
Gambar 4.27 Delete Section
h. Nah, di langkah ini kita sudah memiliki sebuah halaman kosong. Kemudian
langkah selanjutnya kita akan mengisi halaman home kita ini dengan konten-
konten kita sendiri.
1. Membuat Header
a. Klik tombol “+” untuk menambahkan section baru

b. Setelah menekan tombol Add New Section kemudian pilih Jenis Structure
yang dua kolom seperti di gambar
Gambar 4.29 Memilih Structure
c. Setelah selesai memilih structure, silahkan klik titik 6 di sebelah atas

pada section yang baru saja kita tambahkan agar bisa kita edit.
204 SMP IDN

d. Kemudian masuk ke bagian menu “Style” di “Menu Navigasi” sebelah
kiri. pada bagian “Background” pilih “Background Type” yang “Classic”
dan kita ubah warnanya dengan menekan tombol “Color” pada layar
seperti digambar.
Gambar 4.31 Memilih Warna
e. Disini kita akan menggunakan warna “Ungu” dengan kode warna

“#845EC2”
Gambar 4.32 Memilih Warna
f. Jika suda, otomatis warna header akan berubah sesuai dengan kode warna
yang kita pilih sebelumnya. sekarang klik kursor dengan sembarang
dibagian body, hingga muncul menu awal.

Gambar 4.33 Kembali Ke Menu Utama
g. Kemudian kita akan menambahkan menu header, scroll kebagian bawah

pada menu navigasi. pada Menu “Header, Footer & Block” pilih
“Navigation Menu”
Gambar 4.34 Navigation Menu
h. Kemudian kita “Drag and Drop” “Navigation Menu” ke arah “Header

Section” yang sebelah kanan..
Gambar 4.35 Drag and Drop Navigation Menu
206 SMP IDN

i. Setelah berhasil menambahkan Navigation Menu ke dalam header,
otomatis menu Navigasi di sebelah kiri akan menyesuaikan, dan pada
header pun sudah terdapat menu. Menu ini kita dapat dari menu yang
sebelumnya kita buat. Jika lupa, silahkan buka Bab 4 poin C no 3, poin b
tentang membuat menu.
Gambar 4.36 Edit Navigation Menu
Gambar 4.37 Header Menu
j. Setelah kita berhasil menambahkan nav menu ke dalam header, sekarang

kita sesuaikan stylenya agar lebih enak dilihat. Jika sebelumnya kita
memberi warna ungu pada header, kita akan ubah menjadi warna putih.
Kemudian kita akan ganti warna textnya. Pilih “Style” kemudian pada
bagian “Typography” dibagian “Text Color” kita akan ganti warnanya
menjadi warna putih dengan kode warna “##7A7A7A”

Gambar 4.38 Mengganti warna menu header
k. Agar semakin cantik, kita akan edit bagian menu agar ketika kursor
diarahkan ke menu, akan terdapat sedikit efek animasi. Pertama,
l. Kemudian kita akan tambahkan sedikit efek pada bagian menu Header,
agar ketika kursor di arah-kan ada sedikit animasi yang dijalankan. Pada
bagian Typography, pilih menu Hover kemudian kita ganti warnanya,
pada Text Color, kita ganti menjadi warna ungu tua dengan kode
#513979, dan pada bagian “Link Hover Color Effect Color” kita isi
dengan kode warna “#845EC2”
Gambar 4.39 Mengganti Warna Hover Header.
2. Membuat Hero
Jika Sebelumnya kita sudah membuat menu header, sekarang saatnya kita
tambahkan Hero. Kita akan mengulangi lagi, Apa itu hero? Hero header
merupakan penggunaan image, teks, dan elemen navigasi pada halaman
208 SMP IDN

home atau bagian paling atas di halaman web. Dalam penggunaanya bisa
dikatakan sangat variatif. Hero header bisa berupa foto saja, foto dan teks,
foto slider, fix foto, video atau animasi.
Hero image ini adalah hal pertama yang akan dilihat oleh pengunjung website.
Karena itu hero image memiliki peran penting membuat pengunjungnya
tertarik untuk menelusuri lebih dalam lagi tentang website tersebut.
a. Untuk menambahkan Hero, pertama klik tombol “Add Template”
Gambar 4.40 Tombol Add Template
b. Kemudian kita akan masuk ke halaman Library dari Elementor, pilih

menu “Block” pada “Category” kita search “hero” dan tekan enter.
Gambar 4.41 Halaman Library Elementor
c. Kemudian kita pilih jenis “Hero” yang akan kita gunakan, kemudian klik
tombol insert untuk menerapkan hero tersebut pada halaman kita.

Gambar 4.42 Memilih Hero yang sesuai
Tips:
Agar hasilnya tidak jauh berbeda, pastikan kalian memilih jenis hero
yang sama.
d. Jika berhasil maka tampilannya akan menjadi seperti gambar berikut.
Gambar 4.43
e. Next, Kita ganti warna tulisan menjadi warna ungu, dengan code hex
color #513979 dengan cara klik pada tulisan yang ingin diubah, kemudian
pada “Edit Section” Pilih “Style” pilih color.
210 SMP IDN

Gambar 4.44 Merubah warna text
f. Kemudian kita duplicate tulisanya, dengan cara klik kanan pada logo
edit Heading
Gambar 4.45 Tombol edit heading.
g. Pilih tombol “Duplicate”
Gambar 4.46 Pilih menu Duplicate

h. Setelah Heading terduplikat, kita ganti warnanya menjadi warna Dark
Grey.
Gambar 4.47 mengganti warna heading
i. Selanjutnya, kita hapus backgroundnya . Masuk ke menu Style pada

bagian “Edit Section”, rubah code warnanya menjadi #00000000
Gambar 4.48 Merubah warna background Hero
j. Berikutnya kita ganti tulisan pada heading dengan nama kita masing-
masing. Untuk merubah, bisa klik langsung pada tulisan yang ingin kita
ganti.
212 SMP IDN

Gambar 4.49 merubah tulisan pada heading
k. Sekarang kita ganti warna Button nya, sesuaikan dengan warna primer
kita. Klik pada button yang ingin diubah, kemudian pilih “Style” Pada
“Edit Button” ganti warna text color menjadi “#FFFFFF” dan “Color”
menjadi “#513979”
Gambar 4.50 Mengganti style header dan button
l. Jika warna utama button nya sudah di ubah, sekarang kita ubah warna
Hover pada button tersebut, agar ketika kursor diarahkan/di klik akan
memiliki tampilan/animasi yang lebih baik. Sama seperti ketika merubah
warna utamanya, hanya saja kita buka di menu Hover kemudian kita
pilih warna orange #CE6300

Gambar 4.51 Merubah warna button hover
m. Langkah selanjutnya adalah merubah gambar di sebelah kanan hero

menjadi foto kita masing. Pertama klik pada gambar tersebut, kemudian
pada bagian Content di menu Edit Image, arahkan kursor kebagian
choose image dan klik tombol choose image.
Gambar 4.52 Mengganti gambar
n. Kemudian akan muncul popup windows Insert Media, pilih menu upload
file, klik tombol Select Files/Drop Files yang akan digunakan
214 SMP IDN

Gambar 4.53 Mengganti Gambar Profil
Tips:
Untuk hasil yang terbaik Gunakan gambar/foto yang memiliki
background transparan dengan format .png.
o. Berikutnya kita sesuaikan posisi dari foto kita, agar sesuai dengan gaya/
style yang kita terapkan pada desain kita. kita akan meletakkannya se
simetris mungkin. Masih di menu Content, pilih Alignment ke Center.
Gambar 4.54 Merubah posisi gambar.
p. Jika kita perhatikan height/tinggi dari hero terlalu tinggi, kita akan
perpendek sedikit. pertama klik tombol Edit Section, pada bagian layout
- minimum height kita set ukuranya menjadi 80.

Gambar 4.55 Merubah height
q. Sampai disini kita sudah berhasil membuat hero berikut content

didalamnya, Langkah terakhir adalah menyimpan perubahan yang telah
kita buat sebelumnya. Agar desain kita tersimpan dengan baik, pertama
klik tombol setting, di bagian bawah, pada bagian Page Layout, pilih
Elementor Canvas.
Gambar 4.56 Setting Page layout
r. Setelah Page Layout diubah ke elementor canvas, sekarang klik tombol

“Update” untuk menyimpan perubahan yang telah kita lakukan
sebelumnya.
216 SMP IDN

Gambar 4.57 Menyimpan perubahan
Pastikan kita sudah mengikuti step-step yang telah dijelaskan sebelumnya,

jika berhasil maka tampilannya akan menjadi seperti berikut.
Gambar 4.58 Tampilan Menu Home
3. Menambahkan konten IT
Jika sebelumnya kita membuat Hero Header, selanjutnya kita akan membuat
konten untuk mapel IT, disini kita akan menampilkan beberapa konten untuk
mapel IT, yaitu header/judul konten, deskripsi singkat, button “show
more” dan Skill Indicator.
a. Membuat Header/Judul Konten
1. Buatlah sebuah Section baru dengan double kolom,

Gambar 4.59
2. Setelah section berhasil dibuat, drag and drop sebuah heading kedalam
section.
Gambar 4.60 Menambahkan heading
3. Setelah heading berhasil ditambahkan, kita set tulisan dan style nya.
Untuk tulisan kita sesuaikan dengan konten yang akan kita sajikan.
pada konten pertama kita akan menampilkan skill IT kita, jadi kita
ganti dengan “IT Skills” dan ganti text Color menjadi warna dark
purple #513979 .
218 SMP IDN

Gambar 4.61 Menyesuaikan tulisan heading,
b. Membuat Deskripsi
Deskripsi kita gunakan sebagai keterangan singkat yang akan menjelaskan
sedikit gambaran tentang skill yang kita miliki. Untuk membuat deskripsi
berikut langkah mudahnya.
1. Langkah pertama, duplicate heading pertama tadi, kita ubah tulisan

nya menjadi “These are the IT skills that I learned when I studied
at IDN” dan pada bagian style kita ubah ubah warnanya menjadi
grey #7A7A7A, ukuran textnya menjadi 14, dan weight nya kita set
menjadi 400.
Gambar 4.62 Merubah isi dan style deskripsi
2. Mengatur jarak antar konten

untuk mengatur jarak antar konten, klik tombol “Edit Column”
kemudian kita set “Widget Space” menjadi “0px”

4.63 Mengatur Spasi antar widget
c. Membuat button Show More

1. Menambahkan Button “Show More”
Disini kita akan menambahkan button show more di sebelah kanan
dari konten kita, caranya drag and drop widget button.
Gambar 4.64 Menambahkan button show more
2. Menyesuaikan tulisan pada button

Untuk mengganti tulisan pada button, di menu konten pada bagian
text ganti menjadi “Show More” dan untuk Alignment nya kita
ganti ke rata kanan.
220 SMP IDN

Gambar 4.64 Mengganti tulisan pada button
3. Mengganti style button

Disini kita akan merubah warna text menjadi warna putih
(#FFFFFF) dan warna button yang kita miliki menjadi warna dark
purple (#513979).
Gambar 4.65 Merubah style button
d. Membuat Skill Indicator

Step terakhir pada bagian content IT ini, kita akan menambahkan skill
indicator, skill indikator berfungsi untuk menunjukan seberapa jauh/hebat
kita dalam menguasai suatu bidang keahlian.
1. Klik tombol “Add Template”

Gambar 4.66 Membuka jendela Template
2. Pilih tab menu “Blocks” pada bagian “Category” Pilih “Stats”

kemudian pilih block yang memiliki 3 skill indicator.
Gambar 4.67 Memilih Indicator bar
3. Klik tombol “Insert” pada blok yang sudah dipilih
Gambar 4.68 Memasang block
222 SMP IDN

4. Arahkan kursor pada Skill indicator yang pertama, kemudian klik kanan
pada tombol edit column.
5. Klik “Delete” untuk menghapus, lakukan hal yang sama pada skill
indicator yang ketiga, jadi kita sekarang memiliki satu buah skill
indicator.
Gambar 4.70 Delete Column
6. Klik pada bagian Heading indicator, kemudian ubah tulisan pada bagian
Title menjadi “Website Development”

Gambar 4.71 Merubah tulisan
7. Untuk menambahkan deskripsi, kita ubah elemennya menjadi Text

dengan cara klik “ dan pada bagian” “Add Element” kita ubah ke text.
Gambar 4.72 Menambahkan deskripsi
8. Sesuaikan deskripsi, ubah tulisan di dalamnya untuk Website

Development menjadi seperti berikut “My ability to build websites
using wordpress” kemudian ubah widthnya menjadi 60.
224 SMP IDN

Gambar 4.73 Menyesuaikan deskripsi
9. Klik indicator skill, pada bagian tab content, ubah nilai indicatornya,
sesuaikan dengan skill kita masing-masing, contoh disini diubah ke 85.
Gambar 4.75 Merubah nilai indicator
10. Pada bagian style, ubah warna indikator nya menjadi dark purple, dan
backgroundnya menjadi orange.

Gambar 4.76 Mengganti Style Progress Bar
11. Kita duplikat progress bar yang sudah kita buat,arahkan kursor ke
progress bar, klik pada menu edit column, dan klik menu duplicate. Kita
duplicate dua kali, sehingga kita memiliki 3 buah progress bar, sebagai
skill indicator.
Gambar 4.77 Duplicate Progress bar
12. Kita ubah Progress Bar yang kedua dan ketiga, sesuaikan dengan skill
kita masing-masing. Umumnya kita memiliki 3 Skill utama di kelas 7
ini, Web Development, Scratch Builder dan Build Box Builder.
226 SMP IDN

Gambar 4.78 menyesuaikan progress bar
13. Kita atur padding dari content yang baru kita tambahkan, klik edit
section, pada Menu Advance kita set padding top 30, dan padding
bottom 100.
Gambar 4.79 Menyesuaikan Padding
14. Membuat responsive pada tampilan mobile, agar website kita responsive,
klik tombol button show more
Gambar 4.80 Tombol Show More

15. Pada menu content, klik icon bergambar desktop, kemudian pilih yang
icon HP, otomatis, tampilannya akan berubah ke tampilan mobile.
Gambar 4.81 Merubah menjadi tampilan mobile
16. Kemudian alignment nya kita ganti menjadi rata kiri
Gambar 4.82 Mengganti Alignment Button
Sampai disini kita sudah berhasil menambahkan content IT, Jika ingin
menambahkan style yang lain pastikan sudah konsultasi dengan guru
IT kalian masing-masing. Jangan sampai kita terlalu asyik mengedit
content kita, dan tertinggal materi yang disampaikan.
17. Untuk merubah ke tampilan dekstop lagi, silahkan ulangi langkah pada
point 16, dan pilih icon desktop untuk mengembalikan tampilan ke
tampilan desktop.
228 SMP IDN

4. Menambahkan Konten Diniyah
Selanjutnya kita akan menambahkan konten diniyah, kali ini kita cukup
mudah, kita akan menduplikat konten IT, sehingga kita tidak perlu membuat
dari awal lagi.
1. Duplikat konten IT, dengan cara klik menu “Edit Section” kemudian
pilih duplicate.
Gambar 4.83 Menu edit section
2. Lakukan hal yang sama pada section yang terdapat progress barnya, kita
duplicate juga.
Gambar 4.84 Duplicate Progress Bar
3. Sekarang kita sudah memiliki 2 content Skill IT, untuk konten yang
kedua, kita rapikan, kita pindahkan ke bawah dari konten IT.

Gambar 4.85 Merapikan Konten
4. Untuk konten yang kedua, kita ubah dan ganti menjadi konten diniyah,
langkahnya sama seperti ketika kita membuat konten IT.
5. Untuk konten diniyah, kita memiliki 3 buah skill yang akan kita tunjukan,
yaitu skill Hafalan Qur’an, Skill MuAdzin, dan Skill Menghafal Hadits.
Gambar 4.86 Menambahkan skill Diniyah
6. Untuk presentasi nilai, silahkan tanyakan kepada guru diniyah masing-

masing. Kita tidak boleh asal-asalan dalam mengisi nilai persentase dari
progress bar tersebut.
5. Menambahkan konten English

Sama halnya dengan konten Diniyah, kita akan menduplikat konten
sebelumnya. Hanya saja kita tidak akan membahas dengan detail, bagi yang
masih bingung silahkan lihat caranya pada langkah sebelumnya.
230 SMP IDN

1. Pada konten english, kita akan menambahkan beberapa skill indicator,
yaitu : Speaking, Listening, Speech, Presentation, Conversation,
Pronunciation. Sehingga nanti hasilnya akan seperti ini.
Gambar 4.87 Edit Skill English
Sampai disini kita sudah berhasil membuat tiga buah content skil, yaitu
Skill IT, Skill Diniyah, Skill English. Selanjutnya kita akan menambahkan
footer, dimana footer ini adalah content terakhir dari halaman utama kita.
6. Membuat Footer
Footer adalah bagian dasar atau paling bawah dari sebuah website. Fungsi
utamanya adalah sebagai kaki dan berisi informasi hak cipta, kepemilikan,
link tambahan, sumber daya, sponsor dan kredit sebuah website.
Namun, kadang-kadang footer juga bisa dijadikan sebagai tempat untuk
menampilkan widget. Untuk membuat footer langkahnya cukup mudah,
apalagi menggunakan plugin elementor.
1. Untuk pertama, buatlah sebuah section baru dengan 4 column.
Gambar 4.88 Membuat new Section

2. Ganti backgroundnya menjadi dark purple
Gambar 4.89 Merubah background
3. Masuk ke menu advanced, kita ubah ukuran padding nya menjadi 10.
Gambar 4.90 Menambahkan padding
4. Tambahkan sebuah heading baru pada column yang pertama, ganti tulisan
pada heading menjadi nama kita masing-masing.
Gambar 4.91 Mengganti nama heading
5. Ubah Ukuran heading menjadi H6
232 SMP IDN

Gambar 4.92 Merubah ukuran heading
6. Tambahkan sebuah heading baru lagi, ganti deskripsinya menjadi “what

you sow you will reap and what you do you will be responsible for. so
be wise in saying and behaving” ubah size heading menjadi small, dan
tag HTML nya menjadi H6.
Gambar 4.93 Menambahkan heading baru.
7. Kemudian masuk ke menu style, ubah text color menjadi grey (#54595F),
Size nya menjadi 13, weight nya menjadi 400.
Gambar 4.94 Merubah Style sub heading.

8. Masuk ke menu dashboard elementor, ketik “social” di search bar,
kemudian drag and drop social icons.
Gambar 4.95 menambahkan tombol Social Icons
9. Pada menu content, ubah column menjadi 4, dan Alignment menjadi rata
kiri
Gambar 4.96 Menyesuaikan icon
10. Masuk ke Menu style, ubah size nya menjadi 10, padding menjadi 0.3,
dan spacing menjadi 10.
234 SMP IDN

Gambar 4.97 Merubah style social icon
11. Kita copy heading pertama pada column pertama, kemudian kita pastekan
pada column ketiga.
Gambar 4.98 Menduplikat Heading
12. Ubah text heading yang baru saja kita duplikat menjadi Quick Links.
13. Masuk ke dashboard elementor, ketik “icon”, kemudian pilih “Icon List”
drag and drop ke column ketiga.

Gambar 4.99 Menambahkan list icon
14. Klik icon list yang paling atas, kemudian pada menu content, ganti text
menjadi Portfolio, lalu kita hapus icon nya, dan kita tempelkan link untuk
membuka halaman Home kita.
Gambar 4.100 Merubah content list icon
15. Lakukan hal yang sama untuk menu Portfolio, About, dan Resume,
intinya adalah kita akan meletakan menu di bagian footer kita. Maka
hasilnya akan menjadi seperti berikut.
236 SMP IDN

Gambar 4.101 Menu footer
16. Selanjutnya di bagian kolom keempat, kita tambahkan sebuah pesan

terima kasih. sebenarnya ini bisa kita isi dengan konten lain, menyesuaikan
dengan kebutuhan website. Nah, seperti sebelumnya, kita copy paste/
duplikat heading dari kolom sebelumnya dan kita ganti tulisanya menjadi
“Thanks For” sehingga hasilnya seperti berikut.
Gambar 4.102 Membuat heading Thanks For
17. Untuk deskripsinya, kita ambil dari heading di kolom pertama kita, kita
copy dan pastekan ke kolom keempat. Kemudian kita ubah tulisanya
menjadi “My biggest thanks go to Allah who has given the favor of
faith and the opportunity so that I can create this website. Then to my
parents, my teachers, who always pray for and encourage me” Sehingga
hasilnya akan menjadi seperti berikut.

Gambar 4.103 Menambahkan deskripsi
18. Terahir kita akan menambhakan copyright, pertama kita tambahkan

sebuah section baru dengan singgle kolom.
Gambar 4.104 Menmabhakn section baru
19. Masuk ke style, kemudian kita ubah backgoudnnya menjadi #2C2041DE.
Gambar 4.105 Merubah background
238 SMP IDN

20. Kita masuk ke dashboard elementor, kita ketik “copy” pada kolom search
bar, kemudian kita drag and drop widget copyright.
Gambar 4.106 Drag and Drop Copyright
21. Setelah berhasil di drag and drop, kita ubah ukuranya textnya menjadi
12, dan alignmentnya menjadi center.
Gambar 4.107 Merubah ukuran text dan alignment
22. Sehingga hasilnya akan menjadi seperti berikut.

Gambar 4.108 Copyright
23. Sampai disini kita sudah berhasil membuat halaman utama, dari membuat
header hingga footer. Selanjutnya kita akan simpan perubahan yang telah
kita lakukan.
a. Pada bagian bawah, klik tombol setting.
Gambar 4.109 Klik tombol setting
b. Pastikan status adalah “Published” kemudian page layout “Elementor

Canvas”
Gambar 4.110 Konfigurasi status dan page layout
240 SMP IDN

c. Kemudian klik tombol arrow up pada bagian bawah, dan pilih “Save”
Gambar 4.111 Menyimpan perubahan
Sebenarnya untuk menyimpan perubahan tidak harus di akhir seperti

ini, ada kekurangan dan kelebihan yang kita dapat. Kelebihannya
adalah kita hanya menyimpan satu kali untuk perubahan yang telah
kita buat sedangkan kekurangannya adalah perubahan yang kita
lakukan jika tidak langsung di save akan mudah hilang.
24. Untuk mempermudah pengerjaan kita dalam membuat halaman yang

lain, kita akan menyimpan halaman utama ini menjadi sebuah template.
a. Klik menu save option / button arrow up, kemudian pilih menu save
as template
Gambar 4.112 Save As Template
b. Kemudian beri nama template kita, disini kita beri nama “Home
Template” dan klik tombol Save untuk menyimpan template.

Gambar 4.113 Menyimpan template
c. Jika berhasil, maka kita akan masuk ke jendela library di menu “My
Template”, disitu kita akan melihat template kita.
Gambar 4.114 My Template
3. Membuat Halaman My Portfolio

Setelah kita berhasil membuat halaman utama kita, sekarang kita akan membuat
halaman selanjutnya yaitu halaman “My Portfolio”. Halaman ini berisi kumpulan
project, dari IT, Diniyah hingga English.
a. Import Template Halaman Utama
1. Pertama masuk kehalaman dashboar wordpres, kemudian klik menu Pages
- All Pages, pilih page My Portfolio.
242 SMP IDN

Gambar 4.115 Membuka Page My Portfolio
2. Setelah berhasil membuka page My Portfolio, kita pastikan pada page

attributes, template yang kita gunakan adalah “Elementor Canvas” jika
sudah klik tombol “Edit With Elementor”
Gambar 4.116 Setting Halaman
3. Pastikan halaman “My Portfolio” sudah kosong dari content yang lain.
Gambar 4.117 Mengosongkan Halaman My Portfolio

4. Kemudian klik tombol “Template”
5. Kemudian pada Jendela Library, pilih Tab Menu “My Template” pili
“Home Template” dan klik “Insert”
Gambar 4.119 Mengimport template.
6. Maka akan keluar jendela pop-up, pilih yes.
Gambar 4.120 Konfirmasi pilihan
244 SMP IDN

7. Secara otomatis, jika berhasil maka tampilan di halaman My Portfolio akan
sama dengan halaman Utama.
Gambar 4.121 Tampilan baru halaman My Portfolio
8. Kita akan hapus beberapa bagian, dan hanya menyisakan Header, Hero dan
Footer saja, sehingga tampilannya akan menjadi seperti berikut.
Gambar 4.122 Tampilan baru halaman My Profile
Ok, sampai disini kita sudah berhasil import template, next kita kan
modifikasi konten hero dan menambahkan konten untuk halaman portfolio
kita.

b. Modifikasi Konten Hero
Disini kita akan memodifikasi konten hero sesuai dengan kebutuhan kita.
Karena kita berada di halaman portfolio, kita akan menyesuaikan isi dari
portofolio yang akan kita tampilkan.
1. Kita mulai dengan mengubah Headnya terlebih dahulu, kita ganti tulisan
“Hi, I’m Salim Hartono” menjadi “Hi, This Is My Portfolio”.
Gambar 4.123 Merubah tulisan di Hero
2. Kemudian Kita ganti tulisan deskripsinya juga, menjadi “on this page I will
show some of my works, from IT, Diniyah to English. From Projects to
video tutorials”.
Gambar 4.124 Merubah tulisan deskripsi
3. Selanjutnya kita hapus button “Read More” sehingga nanti hasilnya akan
menjadi seperti berikut.
246 SMP IDN

Gambar 4.125 Menghapus Button “Show More”
4. Untuk foto, jika memang ada foto lain, direkomendasikan untuk mengganti
foto yang lain, agar tidak sama dengan foto di halaman utama.
c. Menambahkan konten project IT

Di konten project IT ini akan kita isi dengan menampilkan project-project IT
yang sudah pernah kita buat. Mulai dari game website, aplikasi, dan sebagainya.
1. Pertama kita buat new section terlebih dahulu untuk menampung heading
yang akan kita gunakan. kita pilih single kolom dan pindahkan section
tersebut ke atas footer.
Gambar 4.126 Memindahkan section

2. Tambahkan sebuah heading baru, dan ganti textnya menjadi “Project IT”
Gambar 4.127 Menambahkan heading baru
3. Ubah stylenya, ganti warnanya menjadi dark blue (#2C2041).
Gambar 4.128 Mengganti warna text
4. Kemudian kita akan tambahkan sebuah block baru, klik tombol ”Add
Template” pilih menu “Block” pada kolom pencarian ketik “Portfolio” dan
pilih.
248 SMP IDN

Gambar 4.129 menambahkan block portfolio
5. Setelah itu pilih blok sesuai dengan gambar berikut, dan klik tombol insert
Gambar 4.130 Memilih blok
6. Pindahkan block ke atas footer, maka hasilnya akan menjadi seperti berikut.

Gambar 4.131 Memindahkan blok ke atas footer
7. Titlenya kita ganti menjadi “Game Scratch” dan subtitle nya menjadi “How
do you hone your creativity as best you can”
Gambar 4.132 Mengganti Title dan subtitle
8. Berikutnya kita ganti gambarnya menjadi gambar dari game kita masing-
masing, pastikan gambar yang kamu gunakan adalah gambar dari screen
shoot game buatanmu sendiri.
9. Untuk mengganti gambar klik gambar yang akan kita ganti, pada Menu
konten, tekan button “Choose Image”
250 SMP IDN

Gambar 4.133 Mengganti Gambar
10. Klik menu “upload Files” pilih gambar yang akan di upload di komputer
kita, kemudian drop file yang akan kita upload ke jendela Popup.
Gambar 4.134 Upload gambar
11. Jika berhasil, gambar yang kita upload akan masuk kedalam “Media Library”

Gambar 4.135 Media library
12. Pilih gambar yang akan kita gunakan, kemudian klik tombol “insert media”
Gambar 4.136 Insert Media
13. Pada bagian Title dan Deskripsi di bagian bawah, ganti tulisan sesuai dengan
nama game kita masing-masing, begitu juga dengan deskripsinya, sesuaikan
dengan deskripsi game kita masing-masing.
252 SMP IDN

Gambar 4.137 Menyesuaikan judul dan deskripsi game.
14. Kemudian lakukan hal yang sama untuk game-game kamu yang lain,
pastikan semua project game kita di upload ke dalam website portfolio kita.
15. Kemudian kita buat lagi sebuah blok baru lagi yang sama dengan yang
sebelumnya, kemudian kita ganti title menjadi “Web Development” dan
deskripsinya menjadi “My ability to build websites using wordpress”
sehingga hasilnya menjadi seperti berikut.
Gambar 4.137 Membuat Blok untuk website
16. Kemudian sesuaikan gambar, title dan deskripsi sesuai dengan project kita
masing-masing. Jadi nanti hasilnya akan menjadi seperti ini.

Gambar 4.138 Upload project Website
Pastikan semua project website yang kita miliki, kita upload ke dalam
website ini.
17. Sekarang kita buat lagi untuk project game buildbox, sama halanya dengan
project game scratch dan website. Kita sekarang buat block baru lagi, kita
namai judul block nya dengan “Buildbox Builder”. Sehingga hasilnya akan
menjadi seperti berikut.
Gambar 4.138 menambahkan project buildbox builder
Sampai disini kita sudah menambahkan beberapa project-project IT yaitu

Game scratch, game buildbox, dan website. Jika kamu memiliki project
yang lain, silahkan di upload lagi. lebih banyak project lebih baik.
254 SMP IDN

d. Menambahkan Konten Project Diniyah
Selanjutnya kita akan menambahkan project Diniyah, project diniyah disini
adalah video dan sertifikat.
1. Pertama kita tambahkan heading untuk diniyah, heading ini kita duplikat
dari project IT agar lebih mudah, kemudian kita ganti textnya menjadi
project diniyah.
Gambar 4.139 Menambahkan heading Diniyah Project
2. Tambahkan sebuah block baru untuk menampung project-project diniyah.

pada project diniyah ini, pastikan kamu upload project-project video yang
pernah dibuat dan di unggah ke youtube.
Gambar 4.140 Menambahkan block project diniyah
Pada modul ini, mungkin hanya dua project yang upload ke website,
tapi buat kalian yang punya banyak project dan video. Pastikan semua di
upload ke website portfolio kalian.

e. Menambahkan Konten Project English
Selanjutnya kita akan menambahkan project English, dimana project english
ini hampir sama dengan project diniyah, yaitu berupa Video dan sertifikat.
1. Seperti sebelumnya, kita tambahkan heading untuk english, heading ini
kita duplikat dari project Diniyah agar lebih mudah, kemudian kita ganti
textnya menjadi “Project English.”
Gambar 4.141 Menambahkan Heading Project English
2. Tambahkan sebuah block baru untuk menampung project-project diniyah.

pada project diniyah ini, pastikan kamu upload project-project video yang
pernah dibuat dan di unggah ke youtube.
Gambar 4.142 Menambahkan block project English
3. Langkah terakhir adalah menyimpan perubahan, klik menu “UPDATE”

kemudain klik “Save Draft”
256 SMP IDN

Gambar 4.143 Save Project
Ok, sampai disini kita sudah berhasil menambahkan konten project untuk
IT, Diniyah, dan english. Sebenarnya masih ada satu konten project satu
lagi, yaitu project Tahfidz.
Untuk project tahfidz ini akan kalian kerjakan masing-masing sesuai

konten IT, Diniyah dan english sebelumnya.. Silahkan buat sebuah Project
Tahfidz, dari menambahkan heading dan block. kemudian di block tersebut
upload sertifikat tahfidz kalian. Guru akan mengeceknya secara online
melalui link website kalian masing-masing.
4. Membuat Halaman About

Halaman berikutnya adalah halaman About, di halaman ini itu akan berisi tentang
data diri kita masing-masing. Mulai dari Nama, Hobi, kontak, medsos, kemampuan
berbahasa dan sebagainya.
a. Import Template.
1. Pertama - tama masuk kehalaman dashboar wordpres, kemudian klik menu
Pages - All Pages, pilih page About.

Gambar 4.144 Membuka Page About
2. Setelah berhasil membuka page About, kita pastikan pada page attributes,
template yang kita gunakan adalah “Elementor Canvas” jika sudah klik
tombol “Edit With Elementor”
3. Pastikan halaman “About” sudah kosong dari content yang lain.
Gambar 4.146 Mengosongkan Halaman About
258 SMP IDN


7. Secara otomatis, jika berhasil maka tampilan di halaman About akan sama
dengan halaman Utama.
Gambar 4.150 Tampilan baru halaman About
8. Kita akan hapus beberapa bagian, dan hanya menyisakan Header, Hero
dan Footer saja, sehingga tampilannya akan menjadi seperti berikut.
Gambar 4.151 Tampilan baru halaman My Profile
modifikasi konten hero dan menambahkan konten untuk halaman About
kita.
b. Mengganti konten Hero

1. Yang pertama kita akan menghapus button, klik tombol “Edit Button” dan
klik “Delete”.
260 SMP IDN

Gambar 4.152 Delete Button
2. Kemudian ganti title menjadi seperti ini, sesuaikan namanya dengan nama
kalian masing-masing
Gambar 4.153 Mengganti title
3. Lalu ganti deskripsinya silahkan kalian sesuaikan dengan kemampuan dan

profil singkat kalian masing-masing, kurang lebih seperti ini.
Gambar 4.154 Deskripsi singkat

4. Untuk gambar profil, silahkan sesuaikan dengan kalian masing-masing.
disarankan menggunakan foto kalian masing-masing. karena ini halaman
about, dimana isinya adalah menjelaskan/menggambarkan tentang diri kita.
c. Menambahkan skill indicator

Skill indicator kita gunakan sebagai sebuah informasi yang kita tunjukan
kepada orang yang melihat website kita. Tentang sejauh mana kemampuan
atau skill yang kita miliki.
1. Klik tombol “add template”
Gambar 4.155 Add template
2. Masuk ke menu “Block” tulis di search bar “stats” kemudian pilih status
bar yang seperti di gambar dan klik tombol “insert”
Gambar 4.156 Menambahkan status bar
262 SMP IDN

3. Pindahkan block ke bagian atas dari si footer, seperti gambar berikut.
Gambar 4.157 Memindahkan block
4. Kita edit status barnya, pastikan kita klik pada status bar tersebut. kemudian
kalian ketik sebuah text di dalam status bar tersebut. Yang pertama kita
akan beri tulisan “Public Speaking”
Gambar 4.158 Memberi label tulisan
5. Beri nilai sesuai dengan kemampuan kalian, semakin tinggi nilainya itu
menunjukan semakin bagus skill kalian dalam public speaking. Jika kalian
bingung dalam memberi nilai, silahkan konsultasikan dengan guru kalian.
Gambar 4.159 Memberi nilai

6. Klik tombol “Edit Progress Bar”
Gambar 4.160 Tombol Edit
7. Duplicate Progress Bar sebanyak 7 kali, dengan mengklik menu

“Duplicate”.
Gambar 4.161 Menu Duplicate
8. Kemudian ubah nama dari setiap indikator ke “Logika, Modular, Scratch,

Wordpress, Video Editing, Canva, Photoshop” sehingga nanti hasilnya
akan menjadi seperti berikut.
Gambar 4.162 Merubah text Indikator
264 SMP IDN

9. Sesuaikan nilai dari tiap-tiap indicator dengan kemampuan kalian masing-
masing.
10. Terakhir kita ganti Title dari skill indicator menjadi “My Skill” hingga
nanti hasilnya akan menjadi seperti berikut.
Gambar 4.163 Merubah Title Skill
11. Terakhir, kita save perubahan yang telah kita lakukan. Seperti biasa kita
klik tombol “Save Option” kemudian kita klik Save.
Gambar 4.164 Save Option
Sampai disini kita sudah berhasil membuat halaman About, Jika kita
ingin menambahkan beberapa skill indicator lagi tidak mengapa. Silahkan
sesuaikan dengan skill kalian masing-masing. Dan jangan lupa konsultasi
dengan guru kalian masing-masing.

5. Membuat Halaman Resume
Yang terakhir dalam project “Personal Website” kita ini adalah halaman Resume.
Namun kita akan merubah halaman resume ini menjadi halaman “Blog” kenapa
diubah? karena halaman resume sudah cukup diisi / diwakilkan oleh halaman
About. Di Halaman “Blog” akan berisi tentang artikel-artikel yang sudah kita
tulis, bisa berupa dokumentasi project, tutorial IT, tutorial English atau sejenisnya.
a. Import Template
1. Pertama kita ubah dulu nama menunya menjadi “Blog” caranya.
a. Pastikan Kita sudah berada di halaman Dashboard wordpress kita,
kemudian klik Pages - All Pages
b. Klik Quick Edit pada page “Resume”
Gambar 4.165 Merubah nama halaman
c. Ubah title menjadi “Blog” dan slug menjadi “blog”
Gambar 4.166 Merubah title dan slug
266 SMP IDN

d. Klik tombol “Update” pada sebelah pojok kanan bawah
Gambar 4.167 Simpan perubahan
2. Setelah nama page berhasil diubah, selanjutnya kita akan mengedit

halamanya. Pertama - tama klik menu Pages - All Pages, pilih page Blog.
Gambar 4.168 Membuka Page Blog
3. Setelah berhasil membuka page Blog, kita pastikan pada page attributes,
template yang kita gunakan adalah “Elementor Canvas” jika sudah klik
tombol “Edit With Elementor”

4. Pastikan halaman “Blog” sudah kosong dari content yang lain.
Gambar 4.170 Mengosongkan Halaman Blog
268 SMP IDN

8. Secara otomatis, jika berhasil maka tampilan di halaman Blog akan sama
dengan halaman Utama.
Gambar 4.174 Tampilan baru halaman Blog
9. Kita akan hapus beberapa bagian, dan hanya menyisakan Header dan Footer
saja, sehingga tampilannya akan menjadi seperti berikut.

Gambar 4.175 Tampilan baru halaman Blog
modifikasi konten hero dan menambahkan konten untuk halaman Blog
kita.
b. Membuat Hero Baru

Yang pertama kita lakukan setelah mengimport template adalah membuat
sebuah hero baru.
1. Seperti biasa, kita klik tombol Add Template - Block categorynya kita
pilih Hero.
Gambar 4.176 Menambahkan hero baru
2. Setelah hero berhasil terpasang, kita pindahkan kebagian atas dari footer,
kemudian kita hapus bagian button, dan deskripsi. Jadi nanti hasilnya
akan menjadi seperti berikut.
270 SMP IDN

Gambar 4.177 Mengedit hero
3. Setelah berhasil kita edit, kemudian kita ganti kalimat dari tulisan tersebut
menjadi sebuah Quotes. Carilah Quotes yang baik-baik, yang sesuai
dengan ajaran islam dan kita buat konten alignment nya menjadi center.
Gambar 4.178 Merubah content Alignment
4. Kemudian masuk kedalam menu style, kita ubah size text nya menjadi
28px, dan ubah stylenya menjadi italic.

Gambar 4.179 Merubah Style Text
5. Klik tombol edit section untuk masuk ke menu edit section
Gambar 4.180 Menu Edit Section
6. Masuk ke menu Layout, ganti minimum heightnya menjadi 60vh.
Gambar 4.181 Mengganti ukuran layout
272 SMP IDN

7. Sampai disini kita sudah berhasil membuat sebuah hero baru, hingga nanti
nanti hasilnya akan menjadi seperti berikut.
Gambar 4.182 Content Hero
c. Menambahkan List Artikel

Disini kita akan menambahkan preview artikel, jadi preview artikel berfungsi
untuk menampilkan list-list dari artikel yang sudah kita miliki. Jadi pastikan
kita sudah membuat artikel terlebih dahulu agar ketika nanti menambahkan list
artikel otomatis akan muncul.
1. Pertama tambahkan sebuah Section baru, klik tombol “Add New Section”
kemudian pilih yang single structure.
Gambar 4.183 Menambahkan block baru

2. Kemudian kita pindahkan section tersebut ke atas footer.
3. Lalu kita masuk ke dashboard elementor, kemudian pada search bar kita
ketik “Blog”, dan pilih “Premium Blog” kemudian kita drag and drop
kedalam section yang baru saja kita tambahkan.
Gambar 4.184 Menambahkan Elemen Blog
4. Jika berhasil maka tampilannya akan menjadi seperti berikut.
Gambar 4.185 List Artikel
274 SMP IDN

5. Ada yang bertanya, “kok yang keluar list makanan?” karena di awal. default
template kita adalah blog makanan. jadi ini adalah list artikel bawaan dari
default templatenya.
6. Sampai disini kita sudah berhasil membuat halaman blog, langkah
terakhir kita adalah mengganti tulisan di footer. karena kemarin kita masih
menggunakan menu “Resume” sekarang kita ganti menjadi blog. Lakukan
juga di Page yang lain.
Gambar 4.186 Merubah footer
Ketika kamu berhasil merubah footer, tandanya kamu juga sudah berhasil
menyelesaikan project Personal Website, jadi saya ucapkan selamat.
Silahkan kembangkan lagi kemampuanmu, perbanyak praktik, dan teruslah
berbagi.

Daftar Pustaka
https://www.niagahoster.co.id/blog/jenis-website/
https://www.niagahoster.co.id/blog/apa-itu-cpanel/
https://www.devaradise.com/id/2013/12/mengetahui-fungsi-elemen-komponen-widget-
pada-website.html#9_Footer
https://www.domainesia.com/panduan/cara-membuat-landing-page-dengan-elementor/
276 SMP IDN

7 Modul Webiste

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

7 Modul Webiste

Diunggah oleh

Hak Cipta:

Format Tersedia

Membuat Website Dengan

Hak cipta dilindungi oleh undang-undang,. Dilarang mengutip atau

Bogor, 22 Juni 2021

Modul Website dengan Elementor iii

Bogor, 22 Juni 2021

BAB I - Website dan Hosting......................................................................................1

C. Website dan Hosting.........................................................................................2

BAB II - Website Masjid.............................................................................................20

E. Membuat Website dengan Wordpress...............................................................28

BAB III - Website Sekolah..........................................................................................96

C. Install Wordpress di Subdomain.......................................................................97

D. Membuat Website Menggunakan Elementor...................................................107

BAB IV - Personal Website.........................................................................................187

C. Install Wordpres di Domain Utama..................................................................188

Modul Website dengan Elementor v

Modul Website dengan Elementor 1

C. Website dan Hosting

Gambar 1.1 Dashboard website IDN Boarding School

Website IDN bisa dikunjungi di link berikut : https://idn.sch.id/. Pada

2. Hosting dan Domain

Gambar 1.2 Dashboard website idcloudhosting

Maka akan diarahkan ke halaman berikut :

Gambar 1.3 Dashboard website paket hosting

3. Setelah itu kita scroll kebawah, di bagian “Harga Hosting” kemudian

Modul Website dengan Elementor 3

Gambar 1.5 Membuat nama domain

a. pertama pilih register a new domain

e. Klik tombol “Continue” untuk melanjutkan.

catatan : tidak boleh membuat nama domain yang mengandung

5. Setelah tombol “continue” di tekan, kita akan masuk ke halaman

Gambar 1.7 Mode pembayaran

b. Location pilih Indonesia

Modul Website dengan Elementor 5

c. Untuk penambahan fitur/addons pilih yang none saja.

Gambar 1.9 Fitur penambahan addons

d. Untuk additional service, kita biarkan teruncheck seperti seperti

Gambar 1.10 Additional services

e. Dibagian Order Summary, check kembali paket hosting dan

6. Pada bagian (¾) Domains Configurations, biarkan kosong seperti gambar

Gambar 1.12 Domains Configuration

7. Setelah kita tekan tombol “Continue” pada halaman sebelumnya, sekarang

Modul Website dengan Elementor 7

Gambar 1.14 Pemilihan mata uang dan kode promo

c. Pada bagian “Billing Detail”, buat kita yang sudah memiliki

d. Pada bagian billing address, isikan data sama persis seperti

Gambar 1.16 Billing Address

e. Pada bagian additional required information isi seperti pada

Gambar 1.17 Additional required information

f. Pada bagian Account Security, masukan password yang kuat. tips

Modul Website dengan Elementor 9

g. Pada bagian Domain Registrant Information kita skip dan

Gambar 1.19 Domain Registrant Information

h. Pada bagian Payment Details, pilih Bank Syariah Mandiri

Gambar 1.20 Metode pembayaran

Gambar 1.21 Join Our Mailing List dan Additional

Gambar 1.22 Konfirmasi pembayaran

k. Setelah melakukan checkout, maka sistem akan mengecek apakah

Modul Website dengan Elementor 11

Pada gambar diatas terdapat beberapa informasi, nomor invoice,

l. Silahkan kirim nomor invoice kalian masing masing ke link

Gambar 1.24 Nomor Invoice

Sampai disini kita sudah berhasil melakukan pendaftaran akun di

Modul Website dengan Elementor 13

Gambar 1.26 Email Verifikasi