E-commerce Development Berbasis Wordpress

Transkripsi

1 E-commerce Development Berbasis Wordpress P A R T 2 A / 4 w w w. v e r o n i c a s t e v a n y. c o m w w w. g r a p h i c b y v e s t e. c o m

2 PAGE 2 Pendahuluan WordPress merupakan sebuah CMS (Content Management System) yang memungkinkan Anda untuk membuat sebuah blog atau website dengan mudah, hanya bermodalkan hosting dan domain untuk menginstalnya. Platform ini sangat populer di seluruh dunia dan bisa digunakan secara gratis.

3 Hosting & Domain Hosting & Domain sama-sama dibutuhkan dalam development website PAGE 3 Hosting Hosting merupakan sebuah space atau tempat penyimpanan data sebuah blog atau website di internet yang memungkinkan data tersebut diakses secara online dan dilihat oleh semua orang dari seluruh penjuru dunia. Domain Domain adalah alamat sebuah situs berupa (.com/.net/.org) dan lain-lain, mempunyai fungsi untuk mengidentifikasi alamat (IP address) sebuah server komputer (hosting).

4 PAGE 4 Jika punya alamat (domain) tapi tidak punya isinya (yang diletakkan pada hosting), maka ketika domain dibuka, website tidak ada atau kosong.

5 PAGE 5 Development part 2 Revolution Slider Visual Composer Set up woocommerce Add product (Simple / Variation) WEBSITE CONTOH atau

6 PAGE 6 Before we go Jika pada part 1 ada kendala pada pengimporan demo data, ikuti step berikut.

7 1 PAGE 7 Kembali ke Cpanel. Pada find bar, ketik Multi lalu pilih MultiPHP INI Editor

8 2 PAGE 8 Pada select a location, pilih lokasi domain yang digunakan (baris kedua).

9 3 PAGE 9 max_execution_time jadikan 90 memory_limit jadikan 128M Lalu disave / apply

10 4 PAGE 10 max_execution_time jadikan 90 memory_limit jadikan 128M Lalu disave / apply Sekarang bisa dicoba lagi Mengimport ulang demo data

11 5 PAGE 11 Jika ada yang bingung bagaimana Cara login kembali ke wordpress : 1. domain/wp-admin Contoh : 2. Ke cpanel wordpress, scroll ke bawah pada bagian LINK bisa diklik domain yang digunakan

12 PAGE 12 Custom logo

13 1 PAGE 13 Pada bagian depan halaman website yang telah berhasil import demo data, Pilih Customize pada bagian atas

14 2 PAGE 14 Pilih bagian Header

15 3 PAGE 15 Pilih bagian Logo

16 4 PAGE 16 Select file

17 5 PAGE 17 Pada folder materi part 1 pictures, Pilih logo2.png, lalu drag ke browser

18 6 PAGE 18 Drop file logo, maka akan otomatis terupload

19 7 PAGE 19 Logo sudah terupload dan terselect, Pilih Choose File untuk menyimpan.

20 8 PAGE 20 Logo sudah tersimpan, pilih Save & Publish

21 PAGE 21 Revolution Slider Untuk slideshow website pada bagian home

22 1 PAGE 22 Pada bagian depan website, Pilih judul website Dashboard untuk kembali ke dashboard wordpress

23 2 PAGE 23 Pilih Slider Revolution

24 3 PAGE 24 Pilih existing slide. Karena jika kita berbasis template, Lebih mudah untuk hanya mengedit Dibandingkan membuat baru. Tapi jika ingin membuat baru, bisa pilih New Slide pada sebelahnya.

25 4 PAGE 25 Ini adalah tab setting untuk slide Dan ini adalah tab editor untuk slide Sekarang kita akan mengubah background slide nomor 1, pilih Media Library pada Main/Background Image

26 5 PAGE 26 Upload file gambar yang ada pada materi 1(step sama seperti ketika mengupload logo) Dan pilih Insert / Save

27 6 PAGE 27 Setelah insert/save gambar, lalu coba scroll ke bawah, dan bisa kita lihat background gambar sudah terganti. Sekarang kita akan rapikan tampilannya Klik pada teks, misalnya New Arrivals, untuk mengaktifkan editor slide.

28 7 PAGE 28 Pilih 2 icon ini untuk dibawa ke center Secara vertical dan horizontal Pilih icon expand pada Style (berwarna biru) Untuk mengexpand editor extra pada bagian bawah Pada expanded editor, Pilih tab Spaces

29 8 PAGE 29 Pilih icon ini untuk mengedit size tulisan (misal jadi 120px) Pada tab Spaces, pilih icon ini untuk Mengedit alignment tulisan. Pilih center untuk menjadi rata tengah.

30 9 PAGE 30 Pilih icon T untuk mengedit size tulisan (misal jadi 120px untuk New Arrival) Dan icon pensil jika ingin mengubah warna Pada tab Spaces, pilih icon ini untuk Mengedit alignment tulisan. Pilih center untuk menjadi rata tengah. Lakukan hal yang sama pada teks (button) lainnya (yang Explore Now) untuk dibawa ke tengah dan alignment dibuat centered Jika mau mengedit tulisan, bisa diklik 2x pada teks yang dimaksud untuk merubah teks jadi yang diinginkan

31 10 PAGE 31 Klik Save (Icon disket berwarna hijau), Lalu bisa kita lihat hasilnya dengan pilih Visit Site dibawah nama website Jika sudah sesuai yang diinginkan, bisa Klik ke slide kedua, dan edit sesuai keinginan, lalu disave kembali.

32 11 PAGE 32 Contoh hasil editan

33 12 PAGE 33 Jika mau membuat slide baru, bisa pilih Duplicate Slide untuk mempermudah (arahkan mouse ke slide yang sudah ada, lalu pilih Duplicate Slide) Atau pilih Add Blank Slide jika ingin mencoba custom dari 0

34 13 PAGE 34 Pilih Main/Background image untuk Background berupa gambar, Atau pilih Youtube Video / HTML5 Video Untuk background video Youtube video hanya perlu link youtube, Sedangkan HTML5 video dibutuhkan 3 format video untuk diupload

35 14 PAGE 35 Setelah gambar dimasukkan untuk background, klik bagian Add Layer (tombol biru di bawah editor), lalu Kita bisa pilih elemen apa yang ingin dimasukkan ke dalam slide. Misalnya teks, gambar, musik, video, button, dll. Untuk kali ini kita akan masukkan teks, Jadi pilih Text/Html.

36 15 PAGE 36 Format awal teks yang dimasukkan adalah seperti ini Untuk pengeditan, ada existed format Yang bisa dipilih, atau bisa edit dari 0 Saran dari saya adalah, pilih existed format, Lalu baru edit sesuai kebutuhan. Existed format

37 16 PAGE 37 Pilih salah satu format yang cocok dengan slide. Ketika kita mengarahkan mouse ke format yang sudah ada, akan ada preview di sebelah kanan

38 17 PAGE 38 Setelah pilih format, baru kita edit menggunakan editor yang disediakan untuk warna, font, ukuran font, alignment, dan lain-lain

39 18 PAGE 39 Scroll ke bawah, klik icon jam berputar sampai berubah jadi icon panah untuk membuat elemen slide tidak memiliki animasi keluar / hilang sebelum slide berakhir

40 19 PAGE 40 Untuk mengedit animasi dll, bias dipilih pada tab ini Namun sekarang kita akan coba untuk memasukkan button. Pilih add layer - button

41 20 PAGE 41 Edit sesuai keinginan (warna, font) Preview ketika kita mengedit akan muncul di sebelah kiri. Setelah sesuai keinginan, pilihlah bentuk favorit yang ingin dimasukkan, dan langsung klik button yang diinginkan.

42 20 PAGE 42 Button sudah berhasil dimasukkan Ke dalam slide. Pindahkan ke arah yang diinginkan. Lalu jangan lupa save slide

43 PAGE 43 Visual Composer Untuk Layout Website

44 1 PAGE 44 Pilih page yang diinginkan untuk diubah, Lalu klik Edit Page pada bagian atas halaman. Kali ini kita akan mengubah halaman home

45 2 PAGE 45 Akan terbuka page seperti ini. Kolom-kolom layout pada backend page (backend = bagian belakang, frontend = bagian depan. Frontend -> halaman website yang kita lihat, backend -> halaman pengeditan layout) sama dengan pembagian kolom layout pada bagian depan. Untuk mengedit data tanpa mengubah layout, Pilih icon pensil dengan background hijau Pada bagian yang ingin diedit.

46 3 PAGE 46 Ini adalah part banner pada bagian depan. Untuk mempermudah, kita bisa mengedit sambal melihat bagian depan website untuk mencocokkan kolom / gambar / teks. Untuk mengubah gambar, cukup klik pada bagian icon +.

47 4 PAGE 47 Upload gambar yang diinginkan untuk banner (dapat menggunakan file yang telah disediakan pada folder Materi 1 Pictures). Lalu pilih Set Image / Save

48 5 PAGE 48 Ganti title dan description sesuai yang Diinginkan (atau bisa copy sesuai contoh Website). Lalu scroll ke bawah, akan ada bagian Link (URL) untuk menghubungkan banner dengan page lain, dimana kita akan masukkan nanti, ketika sudah membuat page yang dimaksud. Untuk saat ini, bisa kita Save Changes.

49 6 PAGE 49 Lakukan hal yang sama pada 6 kolom ini. Lalu klik Update jika sudah selesai.

50 7 PAGE 50 FYI. Struktur layout sama. Misalkan ini kolom pertama dan kedua. Untuk mempermudah pengeditan bisa sambil melihat website bagian depan

51 8 PAGE 51 Untuk menambah section baru, Bisa pilih tanda Plus pada bagian paling bawah, Atau tanda plus pada bagian atas. (tidak ada bedanya)

52 9 PAGE 52 Akan muncul elemen-elemen Yang bisa ditambahkan. Sebelum menambah elemen lain, Pastikan selalu membuat row terlebih dahulu. Row berguna sebagai pembungkus atau wrapper dalam membuat kolom-kolom, Supaya menjadi satu baris dan tidak berantakan.

53 10 PAGE 53 Setelah diklik, row akan muncul pada bagian paling bawah. Arahkan Mouse ke icon baris pada samping Icon drag. Lalu pilih jumlah kolom yang diinginkan. Untuk saat ini kita seragamkan pilih tiga kolom dengan bagian tengah lebih besar

54 11 PAGE 54 Kolom akan terbagi menjadi tiga. Pilih tanda plus untuk menambahkan elemen.

55 12 PAGE 55 Untuk saat ini, kita akan masukkan Teks About Us, jadi pilih Text Block

56 13 PAGE 56 Akan muncul seperti ini. Masukkan teks yang diinginkan. Untuk saat ini, cukup tambah judul About Us pada bagian paling atas teks.

57 14 PAGE 57 Select bagian About Us, Lalu pada bagian paragraph, pilih format Untuk Heading (Judul), bisa pilih antara Heading 2 atau Heading 3 Kalau sudah, pilih Save Changes

58 15 PAGE 58 Karena About Us pada hakekatnya Lebih cocok diletakkan pada bagian atas, Maka kita akan pindahkan dia ke bagian atas. Pilih icon drag, lalu klik tahan, dan drag Sampai bagian atas di bawah Revolution Slider (di bawah Slideshow)

59 16 PAGE 59 Letakkan di bawah slideshow. Lalu klik Update, dan kita bisa lihat hasilnya.

60 17 PAGE 60 Kita bias review di sini dan lihat bagian apa Yang kira-kira kurang. Misalnya margin (jarak) antara About us dengan bagian bawah, dirasa perlu ditambahkan, dan diberi elemen garis sebagai pemisah. Maka kita perlu kembali ke editor backend untuk mengedit hal yang diperlukan.

61 18 PAGE 61 Pilih icon Pensil pada bagian kanan atas row Yang ingin diedit.

62 19 PAGE 62 Pilih tab Design options Bagian padding atas dan bawah silakan diisi 50 & 50. Bagian atas untuk jarak pada bagian atas, dan bawah untuk jarak ke bawah. Jika sudah, bisa di save

63 20 PAGE 63 Untuk menambah elemen garis, Pilih tanda Plus seperti pada step 8 Visual Composer, lalu pilih Row Pada row baru, pilih tanda Plus seperti pada step 11 (dengan kolom tetap 1 kolom bukan 3 kolom) Lalu pilih separator.

64 21 PAGE 64 Bisa langsung save changes atau ke Design Options untuk menambah jarak atas bawah.

65 22 PAGE 65 Drag separator dari section bawah sampai Ke bagian bawah about us. Lalu klik Update Dan website bias dipreview sekali lagi untuk memastikan tampilan.

66 PAGE 66 w w w. v e r o n i c a s t e v a n y. c o m w w w. g r a p h i c b y v e s t e. c o m