.png "Belajar Untuk Bisa")
Langkah-langkah membuat website dengan menggunakan Blogger dan Wordpress
Untuk materi awal, kita akan membuat website dengan Blogger.
Salah satu platform website yang cukup terkenal adalah Blogger. Siapa yang tidak kenal blogger, media pertama yang digunakan untuk belajar website ya menggunakan blogger. Blogger dikeluarkan oleh perusahan ternama yaitu Google dan dapat dimanfaatkan secara gratis oleh masyarakat.
Salah satu keunggulan blogger adalah kita tidak perlu lagi dipusingkan dengan kapasitas website dan kita bisa custom nama website dengan domain sendiri. Kelemahannya adalah tidak bisa untuk website yang berbasis member.
A. Membuat Akun Google (Blogger)
Salah satu syarat utama bisa menggunakan blogger adalah terlebih dahulu membuat akun google. Sebagai catatan akun google ini dapat digunakan untuk semua fasilitas yang dikeluarkan google termasuk blogger. Berikut cara membuat akun blogger :
1. Pertama masuk di www.blogger.com (secara otomatis akan diarahkan untuk mengisikan akun google)
2. Klik buat akun jika kamu belum mempunyai akun google atau jika sudah punya akun google (abaikan point 3, 4 dan 5) tinggal mengisi akun google kamu lalu klik masuk
3. Isi form tersebut secara benar dan jangan lupa beri tanda centang pada Saya Menyetujui Persyaratan Layanan dan Kebijakan Privasi Google dan klik langkah selanjutnya.
4. Jika pendaftaran berhasil maka akan muncul seperti gambar dibawah
B. Membuat Blog
Setelah akun blogger anda selesai dibuat maka sekarang adalah membuat blog pertama anda. Langkahnya adalah sbb :
1. Masuk ke www.blogger.com kemudian login dengan akun anda
2. Anda akan masuk pada Dashbord Blogger
3. Klik tombol Blog Baru untuk membuat Blog baru anda
4. Isikan Judul Blog dan Alamat Blog dan pilih template yang diinginkan (bisa diubah sewaktu-waktu)
5. Setelah selesai klik Buat Blog, jika alamat blog belum dipakai maka blog berhasil dibuat, tetapi jika sudah ada yang memakai nama tersebut maka harus diganti dengan nama lain.
C. Mengenal Menu Blogger
1. Postingan
Menu ini berisi postingan-postingan yang sudah dibuat baik berupa draf atau yang sudah diterbitkan. Postingan ini bisa dilihat berdasarkan label yang dibuat atau ditampilkan semuanya. Tampilan per halaman bisa diatur mulai dari 10, 25, 50, dan 100 postingan per halaman
2. Statistik
Pada menu ini akan ditampilkan statistik atau riwayat website meliputi: kunjungan, postingan yang dibaca, situs perujuk, kata kunci yang dipakai, Negara, browser, dan system operasi.
3. Komentar
Menu ini berisi komentar-komentar yang masuk pada blog anda. Anda bisa mengatur apakah komentar mau dihapus atau dimasukkan spam.
4. Penghasilan
Menu ini berisi Monetisasi blog dengan Adsense/Iklan.
5. Halaman
Menu ini berisi halaman statis blog. Halaman statis ini biasanya digunakan untuk pembuatan profil pembuat blog, kontak person, alamat, dll.
6. Tata Letak
Menu ini untuk melakukan pengaturan tampilan blog sesuai dengan template yang digunakan. Pengaturan berbeda-beda dari setiap template yang digunakan.
7. Tema/ Template
Menu ini digunakan untuk memodifikasi template yang digunakan, bisa menggunakan template bawaan dari blogger atau upload sendiri dari computer. Selain itu juga digunakan untuk backup template.
8. Setelan
Menu ini berisi pengaturan pada blogger meliputi pengaturan dasar, posting dan komentar, seluler dan email, bahasa, dan pengaturan lain.
9. Daftar Bacaan
Menu ini berisi semua blog yang dijadikan backlink sehingga kita dapat mengikuti informasi terupdate dari website yang kita ikuti.
10. Lihat Blog
Menu ini menampilkan Website yang telah kita bangun.
D. Menjalankan Blogger
1. Membuat Postingan
Salah satu hal penting saat kita terjun di dunia blog adalah postingan yang kita buat. Ketika kita menulis dan memposting tulisan kita maka perlu memperhatikan beberapa hal sbb :
a. Tulisan Sendiri
Tulisan sendiri sangat dianjurkan dalam kita membuat blog karena itu akan memberikan keunikan atau ciri khas dari blog yang kita punya. Selain itu kita juga bebas berkreasi jika itu karya kita sendiri.
b. Share Postingan orang lain
Postingan yang kita buat juga bias share hasil tulisan orang lain, akan tetapi perlu mendapat izin atau mencantumkan sumber tulisan aga terhindar dari plagiat.
Langkah-langkah membuat postingan di blogger adalah sbb :
a. Login di akun blogger anda
b. Klik tanda + POSTINGAN BARU untuk memulai membuat postingan.
c. Masukkan judul postingan pada kolom Entri
d. Masukkan isi postingan pada kolom dibawahnya
Format postingan ada dua model yaitu
a. Tampilan menulis / Compose
Postingan berupa tulisan biasa dan bisa ditambahkan menu pemformatan standar seperti insert gambar, link, huruf, dll
b. Tampilan HTML
Postingan yang memuat script html atau script widget yang diikutsertakan di postingan
f. Atur label / kategori postingan di menu bagian kanan
Beri label postingan sesuai dengan kata kuncinya seperti artikel dll
g. Atur waktu postingan, secara default waktunya menyesuaikan waktu pada computer saat melakukan postingan (otomatis), atau anda bisa mengatur postingan untuk waktu sebelumnya adatu penjadwalan waktu yang akan datang
h. Atur tautan atau link artikel. Secara otomatis akan menyesuaikan judul jika judul sudah dibuat atau di set otomatis oleh blogger. Anda juga bisa membuat sesuai keinginan. Pegaturan ini hanya bisa dilakukan satu kali saat membuat postingan
i. Atur lokasi postingan melalui menu lokasi menggunakan google maps
j. Atur izin komentar, mode tulis, dan baris baru pada menu pilihan. Anda dapat mengatur pembaca apakah bisa melakukan komentar atau tidak diperbolehkan melakukan komentar.
k. Jika semua sudah dilakukan pengaturan, anda bisa langsung publikasikan, simpan, atau melihat hasil tampilan
Alhamdulillah, sampai disini blog kita telah berhasil dibuat. Untuk melihat website kita, kita tinggal klik Garis tiga dibagian kiri kemudian klik lihat blog pada bagian paling bawah.
Apabila kita ingin mempelajari lebih lanjut maka kita bisa meneruskan materi kita tentang halaman statis, tata letak dan yang lainnya seperti dibawah.
Membuat Halaman Statis
Halaman statis merupakan halaman yang berdiri sendiri dan bukan merupakan bagian dari posting. Halaman statis lebih sederhana dan tidak selengkap ketika membuat postingan. Biasanya halaman ini digunakan untuk menampilkan informasi tentang blog seperti Profil, kontak, dll
a. Login ke blogger anda
b. Pada blog anda pilih menu laman
c. Pilih menu Laman Baru untuk membuat halaman baru, sehingga muncul tampilan form halaman baru
d. Langkah pengisian sama seperti pada langkah pembuatan postingan, hanya saja pengaturannya lebih sederhana
Mengecek Komentar Masuk
Ketika kita membuat postingan dalam blog dan dipubikasikan dengan pengaturan pembaca boleh membuat komentar, maka aka nada notifikasi jika komentar masuk. Kita bisa mengizinkan komentar ditampilkan atau di hapus jika tidak sesuai
Cara pengecekan komentar sbb :
a. Login ke blogger anda
b. Masuk ke menu komentar
c. Jika ada komentar masuk ada tiga pilihan yaitu : mengizinkan untuk ditampilkan, menghapus dan memasukkan komentar sebagai spam.
Mengatur Tata Letak Blog
Tampilan hasil blogger berbeda-beda sesuai template yang digunakan, pengaturan tata letak dari blogger ada di menu ini.
Cara masuk ke menu ini sbb :
1. Login ke blogger anda
2. Masuk ke menu tata letak sehingga akan muncul tampilannya
Tampilan akan berbeda pada setiap template yang digunakan, tetapi ada empat tampilan dasar yang ada yaitu :
1. Header
Bagian ini akan mengatur tampilan header pada blog seperti judul blog, logo, keterangan blog, favicon
2. Posting Blog
Pada bagian ini digunakan untuk pengaturan postingan blog
3. Sidebar
Menu ini digunakan untuk pengaturan tampilan sidebar baik kiri atau kanan tergantung template
4. Footer
Menu ini dugunakan untuk pengaturan bagian bawah blog
Ada beberapa jenis widget yang bias digunakan dalam blogger, jenis widget tersebut adalah sbb:
1.Arsip Blog
Widget ini digunakan untuk menampilkan arsip postingan yang sudah dibuat sehingga pembaca bisa melihat arsip2 sebelumnya.
2.Profil
Widget ini dugunakan untuk menampilkan profil pemilk blog. Profil ini mengacu pada id google, jadi pengaturan nama dan isi profil diatur di settingan frofil google
3. Header Halaman
Widget in digunakan untuk mengatur header blog berupa judul blog, deskripsi, dan logo jika ada
4. HTML/Javascript
Widget ini digunakan untuk menampilkan script html atau javascript. Widget ini sering digunakan untuk meletakkan script-script dari pihak ketiga seperti like fanspage, twitter, menampilkan gambar, google ads, dll. Selain itu juga bisa digunakan untuk menampilkan tulisan saja dengan memilih Rich Text
5. Gambar
Widget ini digunakan untuk memasukkan gambar dan menampilkan. Bedanya jika menggunakan widget ini ukuran otomatis menyesuaikan, jika menggunakan widget html bisa diatur besar kecilnya dalam script
6. Label
Widget ini digunakan untuk menampilkan label yang sudah dibuat
7. Laman
Widget ini untuk menampilkan link laman atau halaman yang dibuat
Selain menambahkan laman kita bisa menambahkan link tautan juga pada pengaturannya
8. Daftar Link
Widget ini menampilkan link untuk itus lain, kita bisa menambahkan banyak link melalui widget ini
9. Text
Widget ini digunakan untuk menampilkan pesan text pada blog anda, bisa juga dalam HTML. Biasanya widget ini digunakan untuk menampilkan alamat dan kontak person
10. Entri Populer
Widget ini digunakan untuk menampilkan artikel pupuler yang sering dibaca pada blog anda
11. Kotak Penelusuran
Widget ini digunakan untuk menampilkan kolom pencarian pada blog anda
12. Statistik Blog
Widget ini digunakan untuk menampilkan statistik atau kunjungan pada blog anda
13. Baris Video
Widget ini digunakan untuk menampilkan kumpulan video yang ada di Youtube
14. Daftar Blog
Widget ini digunakan untuk menampilkan daftar blog yang direkomendasikan dibaca
15. Ikuti Lewat Email
Widget ini digunakan untuk menampilkan form langganan artikel pada blog anda ke email
16. Feed
Widget ini digunakan untuk menampilkan rss feed suatu blog
17. Tampilan Slide
Widget ini untuk menampilkan foto yang ada di media penyimpanan foto picasa, flikr, dll
18. Logo
Widget ini digunakan untuk menampilkan logo blogger di blog yang kita buat
19. Polling
Widget ini digunakan untuk membuat polling pada blog
20. Tautan Berlangganan
Widget ini digunakan untuk menampilkan tautan langganan RSS
21. Tombol +1
Widget ini digunakan untuk menampilkan tombol +1 pada blog untuk meningkatkan kunjungan
22. Terjemahan
Widget ini digunakan untuk menampilkan pilihan bahasa, sehingga pengunjung blog bisa menterjemahkan blog ke bahasa yang diinginkan
23. Newsreel
Widget untuk menampilkan berita terkini dengan kata kunci yang kita tentukan
24. Daftar
Widget untuk menampilkan daftar text kesukaan anda
25. Pengikut Google+
Widget ini digunakan untuk menampilkan pengikut akun google + pada blog anda sehingga bisa mengajak pengunjung untuk mengikuti akun google + anda.
26. Lencana Google+
Widget untuk menampilkan lencana Google+ pada blog sehingga pengunjung tahu bahwa anda tergabung dalam Google+
27. Atribusi
Widget untuk menampilkan atribusi blogger pada blog anda
Mengganti Header Blog
Header biasanya terdiri dari bagian judul dan iklan blog. Judul blog ini bias berupa tulisan atau logo
Cara mengganti header blog sbb:
1. Masuk ke menu tata letak pada dashboard blogger anda
2. Pilih kotak dengan nama header dan klik edit (posisi header ini bias berubah tergantung template yang digunakan)
3. Muncul kotak dialog sbb :
Judul : Untuk mengganti judul blog berupa tulisan
Deskripsi Blog : untuk mengganti uraian tentang blog
Gambar : Jika akan menggunakan logo sebagai judul blog
4. Setelah semua selesai klik tombol simpan dan pengaturan selesai
Mengganti Favicon
Favicon merupakan gambar icon kecil bentuk persegi yang terdapat pada awal address bar yang mewakili website. Favicon ini tidak semua orang menggunakan karena terkadang bukan hal yang terlalu penting.
Secara default favicon pada blogger adalah logo blogger itu sendiri, tetapi jika ingin diubah bias dengan cara sbb :
1. Masuk pada tata letak blogger
2. Pilih kotak favicon dan pilih edit
3. Masukkan icon untuk diupload (bentuk gambar harus persegi)
4. Setelah itu klik simpan
Mengatur Postingan
Postingan merupakan content yang berisi artikel atau berita yang akan dimuat di blog. Isi content berupa tulisan, gambar, atau video. Postingan ini juga ada pengaturannya.
Cara pengaturan adalah :
1. Buka menu tata letak
2. Pilih box main (posting blog)
3. Pilih edit
4. Setelah selesai semua pengaturan klik simpan
Silahkan diatur sesuai selera dan kebutuhan postingan yang akan ditampilkan
Mengatur Sidebar
Sidebar merupakan bagian tata letak suatu blog yang terdapat pada atas, bawah, kanan, atau kiri. Pada blog standar pengaturan sidebar pada posisi kiri atau kanan
Cara pengaturan sidebar adalah sbb :
1. Masuk ke tata letak blogger
2. Cari pengaturan sidebar (pada template standar blogger terletak di kanan)
3. Tambahkan widget sesuai kebutuhan
Sidebar ini menyesuaikan template yang digunakan dan letaknya bisa berbeda.
Mengatur Footer
Footer merupakan area website yang terletak di bagian bawah suatu blog atau website. Pengaturan footer ini sbb:
1. Masuk ke tata letak blogger
2. Cari footer pada area bagian bawah
3. Tambahkan widget sesuai kebutuhan
Posisi dan jumlah footer berbeda sesuai template yang digunakan
Mengganti Template Blog
Template merupakan desain yang digunakan untuk mempercantik tampilan website dan dikembangkan oleh banyak orang. Ada yang versi free da nada yang berbayar. Pada saat membuat blog pertama kali maka template yang digunakan standar blog pada umumnya. Tersedia juga fasilitas edit template untuk memodifikasi tampilan serta tersedia juga pilihan template dari blogger itu sendiri.
Beberapa orang telah mengembangkan template menjadi lebih baik dan menarik sehingga blog yang kita punya akan memiliki tampilan yang lebih bagus lagi. Salah satunya adalah template karya uong jowo yang akan dibahas pada buku ini
Sebelum membahas template dari pengembang lain makan akan dibahas terlebih dahulu pengaturan template standar yang disediakan blogger
Untuk melakukan pengaturan template caranya sbb :
1. Masuk ke dashboard blog dan pilih menu template
2. Pilih template yang telah disediakan atau klik sesuaikan untuk memodifikasi template
3. Ada beberapa menu untuk modifikasi template blog
4. Berikut menu-menu pengaturan pada modifikasi template
a. Template
Berisi beberapa pilihan template standar blogger yang bisa digunakan
b. Latar Belakang
Berisi pengaturan latar belakang template. Anda bisa memberikan latar belakang pada blog anda dengan warna atau gambar
Blogger menyediakan berbagai pilihan latar belakang. Caranya klik tanda panah kebanwah pada Gambar latar dan silahkan pilih satu latar belakang yang diinginkan
c. Sesuaikan Lebar
Berisi pengaturan lebar blog dan sidebar, silahkan diatur sesuai keinginan
d. Tata Letak
Berisi pengaturan tata letak blogger, ada beberapa pilihan model tata letak blogger. Anda dapat memilihnya mana yang cocok untuk blog anda. Perubahan tata letak ini bisa berpengaruh ke pengaturan lain
e. Tingkat Lanjut
Berisi pengaturan warna dan font untuk blogger anda
5. Modifikasi template melalui editing kode
Selain menggunakan cara diatas dalam modifikasi template, juga bisa menggunakan editing kode program. Editing melalui kode program ini harus hati-hati dan sebaiknya mengetahui dasar html karena kesalahan penulisan sedikit saja akan merubah tampilan blog
6. Pengaturan tampilan pada perangkat seluler
Menu ini berisi pengaturan tampilan blog dalam handphone.
Ada dua pilihan dalam pengaturan ini yaitu mengaktifkan tampilan pada perangkat seluler atau menonaktifkan tampilan perangkat seluler
lanjut pembahasan tentang theme
Silahkan sahabat login ke blogger masing-masing, dan sebelumnya download dl theme ini
1. Sekilas tentang theme lucy
Theme lucy ini merupakan theme yang dikeluarkan oleh Sora template yang sederhana dan elegan. Theme ini ada dua versi yaitu free version dan premium version. Pada pembahasan kali ini kita akan menggunakan versi free version yang sudah cukup bagus untuk blog yang akan kita buat.
Layout theme ini terlihat cerah dan enak untuk lilihat, susunan terdiri dari : judul, menu dan submenu, widget instagram, postingan, dan sidebar di sebelah kanan. Pada tampilan postingan di frontpage terdapat tombol share ke berbagai media sosial
2. Memasang Theme lucy
a. Masuk ke admin blogger
b. Klik menu tema
c. Pada bagian kanan atas klik backup / pulihkan
d. Klik browse dan masukkan file theme yang tadi sudah di download kemudian klik upload
e. Tunggu sampai proses selesai
f. Setelah selesai, maka theme sudah terpasang dan kita tinggal merubah settingan yang diperlukan
Materi selanjutnya : mengetahui id & token instagram agar bisa memasang widget instagram di blog kita, ditunggu ya. Selamat beraktifitas semoga berkah
MENGETAHUI ID Instagram
Pada theme ini ada widget yang disertakan adalah widget Instagram, dimana kita bisa memasang gambar instagram di blog kita. Namun sebelumnya kita harus mengetahui id dan token instagram kita terlebih dahulu.
Cara mengetahui id instagram kita yaitu :
a. Masuk ke web https://www.otzberg.net/iguserid/index.php
b. Ikuti petunjuknya yaitu : kunjungi instagram anda melalui www.instagram.com misal https://www.instagram.com/webjogja/
c. Kemudian klik salah satu foto dan copy URL foto di web diatas dan past di kolom input instagram image url kemudian klik go
d. Akan muncul id instagram anda
Mengetahui Token Instagram
Cara mengetahui token instagram anda adalah sbb :
a. Kunjungi http://instagram.pixelunion.net/
b. Klik Generate Acces Token dan masukkan username dan pasaword instagram anda
c. Maka akan muncul token anda (token ini sifatnya rahasia untuk keperluan widget saja)
kalau mau lihat hasil akhirnya bisa klik http://ipuldesain7.blogspot.co.id/
4. Memasang Instagram di Theme Lucy
Seteleh kita mengetaui id dan token instagram kita, maka sekarang kita akan memasukkan Instagram ke blog yang kita buat. Langkah-Langkah sbb :
a. Masuk ke Dashboard blogger
b. Klik pada bagian tata letak, jika kita sudah memasang theme lucy maka aka nada pengaturan pada bagian tata letak
c. Cari pada kotak Instagram Widget dan klik Edit
d. Pada kotak tersebut, gantilah id dan token yang ada dengan id dan token instagram milik kita, kemudin klik save
Memasang Facebook Chat Web
Kami berikan tutorial tentang Facebook Live Chat Web. Layanan ini menggunakan Zotabox. Layanan ini memberikan kemudahan bagi pengunjung web yang ingin mengirimkan pesan facebook langsung ke Fanspage dari pemilik web yang anantinya ketika ada balasan maka akan masuk ke pesan facebook kita. Biasanya ketika seseorang berselancar di internet maka tidak lupa akan login ke facebook walau hanya mengetes status kita.
Syarat menggunakan layanan ini adalah memiilki Fanspage karena memang dikhususkan untuk layanan bisnis.
Cara menggunakan layanan ini adalah sbb :
Kunjung https://zotabox.com
Klik Sign Up / Login pilh Create an Account
Anda bisa membuat akun dengan email atau langsung login via facebook atau google plus
Setelah anda masuk dashboard zotabox pilih Facebook Live Chat
Atur Settingan sesuai keinginan kemudian klik tombol on untuk mengaktifkan dan klik Save
Akan muncul pilihan kode pemasangan yang nantinya akan dipasang di blog
Copy code tersebut dan pasang di blog kita
Layanan ini Gratis, jika ingin layanan lebih bisa beralih ke layanan premium
Selesai
Template Desain Blogger dari Maskolis
silahkan download desainnnya di https://drive.google.com/open?id=0B9XsYfxOUR-fanhodkJjMmNaVUE
berikut kode untuk setting slide :
<div class='lof-main-wapper' id='slider'>
<div class='slider-main-outer'>
<ul class='slider-main-wapper'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Artikel?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</ul>
</div>
<div class='slider-navigator-outer'>
<ul class='slider-navigator'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Artikel?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</ul>
</div>
</div>
Ada yang minat bikin Landing Pages Sendiri?
Persiapan untuk materi landing pages :
1. PC atau laptop
2. Koneksi internet yang cepat dan stabil
3. Konten materi text dan gambar
4. Siapkan nama websitenya ( karena tahap latihan akan menggunakan subdomain )
5. Siapkan email yang aktif
Ok, itu persiapnnya ya. Sampai ketemu saat kelas dimulai
Sebelum membuat Landing Pages kita akan menyiapkan dulu wadahnya dan tools yang diperlukan.
MENDAFTARKAN AKUN HOSTING
Langsung aja ya ini caranya :
a. Buka browser dan ketik alamat http://1-ws.com/signup/
b. Isi form yang disediakan, setelah selesai klik register
c. Periksa email dan klik link konfirmasinya
d. Tunggu sampai proses selesai
e. Cek email kembali untuk melihat detail login akun hosting
f. Anda sudah memiliki hosting dan siap digunakan untuk membuat Landing Pages
INSTALASI SISTEM WEBSITE
Setelah membuat hosting maka langkah selanjutnya adalah Instalasi system website
Caranya sbb :
a. Masuk ke http://cpanel.1-ws.com
b. Masukkan username dan password cpanel yang telah dikirimkan ke email
c. Akan tampil halaman dashboard
d. Cari menu Softacolous Apps Installer dan klik
e. Pilih Wordpress dan klik install
f. Isi data website di kolom yang telah disediakan, setelash selesai klik install
g. Tunggu sampai proses selesai
h. Klik administrator URL untuk masuk ke admin website sampai muncul halaman dashboard admin
i. Selesai, anda sudah memiliki system website
3. Memasang Tool Landing Pages
Setelah Sistem website terpasang, langkah selanjutnya adalah memasang tools untuk membuat Landing Pages. Tools yang akan kita gunakan adalah Elementor. Elementor merupakan salah satu penyedia Pege Builder yang banyak dipakai para pembuat website.
Berikut pemasangan tools Elementor ini :
a. Masuk ke admin website, pilih menu plugin
b. Pilih add new, kemudian cari dengan kata kunci Elementor
c. Klik Install dan Activate
d. Selesai
4. Membuat Halaman Beranda
Setelah system dan tools terpasang, langkah selanjutnya adalah membuat halaman beranda untuk Landing Pages, caranya :
a. Masuk menu Pages, plilh add new
b. Isikan judul halaman misalkan Beranda, bagian deskripsi kosongkan. Pada bagian template pilih Elementor Canvas
c. Setelah itu klik Publish
d. Masuk ke menu Setting, pilih reading
e. Ganti your homepage display di A static page, pilih halaman yang sudah dibuat tadi misalkan Beranda
f. Setelah selesai klik Save Change
5. Mengenal Elementor
Elementor merupakan page bulder untuk membuat Halaman Landing Pages. Elementor banyak digunakan para pengguna online karena kemudahan dalam pengoperasiannya. Langsung saja caranya sbb :
a. Buka halaman yang tadi sudah dibuat, klik edit
b. Setelah mucul halaman edit maka klik edit with elementor
c. Tunggu sampai elementor terbuka
d. Akan muncul halaman untuk membuat Landing Pages
e. Terdapat menu-menu tools yang bisa digunakan untuk membuat Landing Pages
Mengenal Tools pada Elementor
Tools2 pada elementor adalah sbb :
1. Columns
Menu ini digunakan untuk menambahkan kolom
2. Heading
Menu ini digunakan untuk menambahkan text Judul
3. Image
Menu ini digunakan untuk menambahkan gambar
4. Text Editor
Menu ini digunakan untuk menambahkan text yang berupa paragraph
5. Video
Menu ini digunakan untuk menambahkan video
6. Button
Menu ini digunakan untuk menambahkan tombol
7. Devider
Menu ini digunakan untuk menambahkan garis pembatas
8. Spacer
Menu ini digunakan untuk menambahkan spasi
9. Google Maps
Menu ini digunakan untuk menambahkan peta google
10. Icon
Menu ini digunakan untuk menambahkan icon
11. Image Box
Menu ini digunakan untuk menambahkan Gambar, Judul dan text
12. Icon Box
Menu ini digunakan untuk menambahkan Icon, Judul, dan Text
13. Image Gallery
Menu ini digunakan untuk menambahkan galaeri gambar
14. Image Carousel
Menu ini digunakan untuk menambahkan gambar dengan efek Corousel
15. Icon List
Menu ini digunakan untuk menambahkan list text dengan icon
16. Counter
Menu ini untuk menambahkan counter
17. Progress Bar
Menu ini digunakan untuk menambahkan grafik persentase
18. Testimonial
Menu ini digunakan untuk menambahkan testimony
19. Tabs
Menu ini digunakan untuk menambahkan tab
20. Accordion
Menu ini untuk menambahkan list Accordion
21. Toggle
Menu ini digunakan untuk menambahkan list toggle
22. Social Icon
Menu ini digunakan untuk menampilkan icon social media
23. Alert
Menu ini digunakan untuk menampilkan kotak dialog alert
24. Soundcloud
Menu ini digunakan untuk menampilkan music dari soundcloud
25. Shortcode
Menu ini digunakan untuk menampilkan widget menggunakan shrtcode
26. Html
Menu ini digunakan untuk menampilkan widget dengan format html, missal widget facebook, slider, dll yang berasal dari pihak ketiga
27. Menu Anchor
Menu ini digunakan untuk menampilkan menu yang berisi link
28. Sidebar
Menu ini digunakan untuk menampilkan sidebar
6. Memulai Merancang Landing Pages
Setelah keita mengenal menu-menu pada elementor maka selanjutya kita akan menerapkan menu-menu tersebut
a. Membuat Konten Judul
i. Klik new section pilih 2 kolom
ii. Geser kolom pertama ke kiri agar ukuran lebih kecil
iii. Drag menu Heading ke kolom pertama dang anti tulisan missal dengan nama web kita, contoh Perusahaanku
iv. Atur warna dan ukuran pada kolom kolom kiri
v. Jika mau menambhakan iklan banner maka Drag image pada kolom kanan
vi. Pilih gambar sesuai dengan ukuran, atau bias ukuran diataur di pengaturan sebelah kiri
b. Membuat Konten Header image
Langkah-langkah sbb :
i. Buat section dengan 2 kolom
ii. Drag Heading pada kolom satu, ubah tulisan sesuai keinginan dan atur ukuran tulisan
iii. Drag Text editor dibawah heading pada kolom satu dan isi dengan deskripsi
iv. Drag Button pada kolom satu dibawah text editor, atur tulisan, ukuran, dan warna
v. Drag image pada kolom 2 dan masukkan gambar yang akan ditampilkan
vi. Untuk mengubah warna background, klik section, pada pengaturan pilih style dan background type pilih yang tombol kuas, pilih warna yang diinginkan
vii. Anda bisa menggunakan bagkground gradient warna, gambar atau video tinggal ubah pengaturan pada section
c. Membuat Konten Service
i. Buat section 1 kolom
ii. Drag heding ke section, atur besarnya tulisan dan warna
iii. Atur jarah section dengan cara klik section, masuk ke pengaturan menu advance ganti padding dari 0 menjadi 60
iv. Drag columns pada section atur jarak section menjadi 60
v. Drag icon box ke section pada kolom pertama, atur icon, judul, dan deskripsi
vi. Atur warna icon, text judul, dan text deskripsi
vii. Atur icon posisi pada rata kiri
d. Membuat Konten Team
i. Buat Section satu kolom
ii. Atur section dengan warna hitam
iii. Drag Heading, atur warna putih, ukuran besar, dan posisi tengah
iv. Drag Coloumns ke section
v. Drag image box ke kolom 1, atur rata kiri, atur Tulisan dengan warna putih dan ukuran diperbesar
vi. Drag Text Editor di kolom 1 dibawah image box, isi deskripsinya
vii. Drag Sicial Icons ke kolom 1 dibawah Text Editor, atur rata kanan dan masukkan link masing2 sisial media
ix. Hasil akhir seperti pada gambar
Syarat :
1. PC/Laptop
2. Koneksi Internet Stabil & Cepat
3. Sudah punya domain dan hosting, atau paling tidak Free Hosting
4. https://www.youtube.com/watch?v=Y3nnAfZ1FX0
Oke, semoga bermanfaat
Bahan/materi dari Grup Yuk Buat Website.
Selamat belajar.