p a g e | 1 · download panduan yang telah disediakan diruangan material pembelajaran modul 3....

P a g e | 1

Hakcipta terpelihara © Irfan Khairi Sdn Bhd – Versi 2018/2019

P a g e | 2


Panduan Setup Brochure

Website Penting:

Pastikan anda sudah mempunyai domain dan juga hosting.

Dalam contoh ini, kami akan menggunakan contoh ikwebhosting.com.

Anda perlu gunakan domain anda sendiri yang telah didaftarkan.

Panduan ini adalah untuk membina website jenis brochure style. Untuk

panduan membina laman web jenis shopping cart dan salesletter, boleh

download panduan yang telah disediakan diruangan material pembelajaran

modul 3.

Lakukan langkah berikut berdasarkan projek bisnes anda.

Panduan ini terbahagi kepada 3 bahagian: Bahagian Install Website,

Bahagian Setting Website, dan Bahagian Edit Website. PASTIKAN… Anda

hanya lakukan apa yang ditunjukkan dalam panduan ini sahaja.

P a g e | 3


Bahagian Install Website.

1. Anda perlu masuk ke akaun cpanel anda. Caranya adalah dengan menaip

‘domainname.com/cpanel’ di Google. (Gantikan domainname dengan nama

domain anda)

Sebagai contoh: ikwebhosting.com/cpanel

2. Masukkan ‘username’ dan ‘password’ akaun cpanel anda.

‘Username’ dan ‘password’ cpanel boleh didapati di dalam email anda. Cari email

yang bertajuk Your cpanel account information dengan menaip ‘cpanel

information’ di bahagian carian email.

P a g e | 4


3. Kemudian skrol ke bawah hingga ke bahagian Software, dan klik pada

Softaculous Apps Installer.

4. Gerakkan mouse ke Wordpress dan klik pada install.

5. Seterusnya anda akan sampai ke paparan untuk setup website.

Di bahagian Choose Protocol, pastikan anda memilih ‘https://’ atau

‘https://www’ . Yang paling penting anda perlu pilih https:// untuk tujuan

keselamatan (security).

P a g e | 5


Biarkan sahaja bahagian Choose Domain dan In Directory.

6. Kemudian skrol ke bawah hingga ke bahagian Admin Username dan Admin

Password. Anda perlu hasilkan ‘username’ dan ‘password’ yang baru. Pastikan

tulis ‘username’ dan ‘password’ anda supaya tidak mudah lupa.

Di bahagian Admin Email, gantikan dengan email personal anda. Email ini adalah

email yang akan digunakan oleh customer untuk lakukan pembelian di dalam

website anda nanti.

P a g e | 6


7. Kemudian skrol ke bawah dan klik pada Install.

8. Proses installation website anda sedang dijalankan:

9. Jika anda mendapat paparan seperti di bawah, Tahniah! Anda sudah pun

berjaya mempunyai website anda yang tersendiri =)

10. Anda boleh melihat paparan website anda dengan menaip

‘domainname.com’ di Google.

Sebagai contoh ikwebhosting.com

P a g e | 7


Bahagian Setting Website.

1. Taip di Google ‘domainname.com/wp-admin’ untuk masuk ke ruangan

editor website anda.

Sebagai contoh: iksbwebhosting.com/wp-admin

2. Masukkan username dan password website sebagaimana yang anda sudah

lakukan di langkah ke 6

P a g e | 8


3. Kemudian anda perlu install plugins di website anda. Plugins bermaksud

‘aplikasi’ dan ia sangat memudahkan proses editing website.

Gerakkan mouse pada Plugins dan klik pada Installed Plugins.

4. Anda perlu delete ‘plugins default’ yang website anda berikan, iaitu

Akismet Anti-Spam dan Hello Dolly.

Caranya adalah tick pada Plugin seperti gambar di bawah:

P a g e | 9


Kemudian klik pada Bulk Actions dan klik pada Delete.

Kemudian klik pada Apply.

P a g e | 10


Klik pada OK.

5. Seterusnya adalah proses menambah plugin.

Caranya adalah klik pada Add New.

P a g e | 11


Masukkan perkataan ‘elementor’ di bahagian search keyword.

Kemudian klik pada Install Now .

Kemudian klik Activate.

P a g e | 12


6. Seterusnya adalah proses menghasilkan homepage website anda.

Caranya adalah gerakkan mouse pada Pages dan klik pada All Pages

7. Anda perlu delete terlebih dahulu ‘default page’ website anda.

Caranya tick pada Title

P a g e | 13


Kemudian klik pada Bulk Actions dan klik pada Move to Trash

Seterusnya klik pada Apply

P a g e | 14


8. Seterusnya adalah proses menghasilkan ‘page’ di dalam website anda.

Caranya adalah klik pada Add New

Namakan page anda di bahagian ‘Title Page’. Sebagai contoh Home

P a g e | 15


Kemudian pilih Elementor Full Width di bahagian Template

Kemudian klik pada Publish

Anda sudah pun berjaya menghasilkan homepage website anda!

P a g e | 16


HOMEPAGE

9. Seterusnya anda perlu setting ‘homepage’ anda sebagai landing page.

Caranya adalah gerakkan mouse pada Settings dan klik pada Reading.

Di bahagian ‘Your Homepage Displays’, tick pada A static page dan pilih page yang anda sudah

hasilkan iaitu Home di bahagian Homepage

P a g e | 17


Kemudian skrol ke bawah dan klik pada Save Changes.

Anda sudah pun berjaya menjadikan homepage anda sebagai landing page!

P a g e | 18


BROSCHURE STYLE

10. Kemudian anda perlu menghasilkan beberapa page yang lain.

Maksud Brochure Style Website adalah laman web yang mempunyai menu di bahagian atas homepage.

Kebiasaannya menu tersebut adalah Contact Us, About Us, etc. Untuk menghasilkan menu, anda perlu

menghasilkan page terlebih dahulu.

Caranya adalah gerakkan mouse pada Pages dan klik pada Add New.

Namakan tajuk page anda. Sebagai contoh About Us.

P a g e | 19


Kemudian klik Elementor Full Width di bahagian Template.

Kemudian klik Publish.

P a g e | 20


Proses yang sama juga dilakukan untuk page Contact Us.

Caranya adalah gerakkan mouse pada Pages dan klik pada Add New.

Namakan tajuk page anda. Sebagai contoh Contact Us.

P a g e | 21


Kemudian klik Elementor Full Width di bahagian Template.

Kemudian klik Publish.

P a g e | 22


11. Seterusnya adalah proses untuk memasukkan pages ke dalam menu.

Caranya adalah gerakkan mouse ke Appearance dan klik pada Menus.

Namakan menu anda. Sebagai contoh menu 1. Ini adalah tujuan untuk rujukan anda sahaja.

Kemudian klik pada Create Menu.

P a g e | 23


Kemudian tick pada pages yang sudah anda hasilkan.

Klik pada Add to Menu.

Page anda sudah pun berjaya dimasukkan ke dalam menu.

P a g e | 24


NOTE : Anda boleh mengubah kedudukan page anda di dalam menu. Caranya adalah, anda

perlu drag sahaja page tersebut.

Kemudian tick pada Top Menu di bahagian ‘Display location’.

Klik Save Menu.

Anda sudah pun berjaya menghasilkan menu pada website anda!

P a g e | 25


Untuk melihat paparan website anda, gerakkan mouse pada My Blog dan klik pada visit site

Ini adalah paparan semasa website anda

P a g e | 26


Proses Edit Website.

1.Proses edit website bermaksud proses memasukkan ayat (content)/gambar/video ke dalam website

anda.

Anda perlu kembali semula ke paparan dashboard anda. Caranya adalah Gerakkan mouse pada My Blog

dan klik pada Dashboard.

2. Kemudian gerakkan mouse pada Pages dan klik pada All Pages.

3. Untuk contoh kali ini, anda akan lakukan proses editing Homepage.

P a g e | 27


Caranya gerakkan mouse pada Home dan klik pada Edit

4. Kemudian klik pada Edit with Elementor

5. Seterusnya anda akan masuk ke ruangan editor website anda.

P a g e | 28


6. Anda perlu gunakan modul-modul di bahagian kiri untuk membina website anda. Teknik yang

digunakan semudah drag n drop sahaja.

P a g e | 29


7. Proses memasukkan ayat (content)

Untuk memasukkan text ke dalam website anda, klik pada Add new section

8. Kemudian pilih structure yang anda mahukan. Untuk contoh ini pilih satu structure.

P a g e | 30


9. Kemudian klik pada icon seperti gambar di bawah untuk kembali semula ke modul-modul yang

diberikan sebelum ini

10. Kemudian ‘drag’ text editor bawa masuk ke dalam section yang sudah anda hasilkan. Caranya adalah

klik pada text editor dan tanpa lepaskan mouse, bawa text editor tersebut masuk ke dalam section di

sebelah kanan anda.

P a g e | 31


Hasilnya akan jadi seperti ini:

11. Untuk menulis ayat anda yang tersendiri, edit di bahagian kiri anda.

Sebagai contoh, anda boleh menulis ayat USP perniagaan anda.

P a g e | 32


12. Apabila sudah selesai, klik pada update di bahagian bawah.

Anda sudah pun berjaya memasukkan text ke dalam website.

P a g e | 33


13. Untuk melihat paparan website anda yang terkini, klik pada icon preview changes seperti gambar di

bawah

Anda akan pergi ke tab yang baharu untuk melihat paparan website anda.

P a g e | 34


14. Untuk kembali semula ke ruangan editor website anda, klik edit with elementor di bahagian atas

website anda.

Anda akan kembali semula ke paparan editor website anda

P a g e | 35


15. Untuk memasukkan gambar, proses yang sama juga dilakukan. Klik Add new section

16. Kemudian pilih structure yang anda mahukan. Sebagai contoh satu structure.

P a g e | 36


17. Kemudian klik pada icon seperti gambar di bawah untuk kembali semula ke modul-modul yang

diberikan sebelum ini.

18. Kemudian drag Image ke dalam section yang sudah anda hasilkan.

P a g e | 37


19. Kemudian klik pada choose image untuk letakkan gambar di dalam website anda.

P a g e | 38


20. Klik pada select files.

21. Kemudian pilih gambar dari laptop anda dan klik pada open

P a g e | 39


22. Kemudian klik Insert Media

Anda sudah pun berjaya memasukkan gambar ke dalam website anda.

P a g e | 40


23. Klik pada UPDATE untuk save proses editing anda.

Teruskan kerja anda dengan memasukkan content ke dalam website menggunakan kaedah yang sama.

Jangan lupa, setiap kali anda memasukkan content ke dalam website, anda perlu klik pada UPDATE

untuk save content tersebut.

Good Luck and all the best!

p a g e | 1 · download panduan yang telah disediakan diruangan material pembelajaran modul 3....

Documents