Belajar Web Design – Digital Marketing Online Indonesia

Caranya membuat desain landing page seperti ininantinya kita akan, develop desain ini, menjadilive website, tanpa coding, sama sekali di WordPress dan elementer nah di video, kali ini, kita, akanmembuat desain nya terlebih dahulu kenapa nggaklangsung buat di elementernya, karena kau, langsungbuat, dillive, websitenya, itu biasanya, bingung, nahjadi, kita, perlu, membuat, desain, Nya dulu baru nanti di develop ke live websitenya, kali ini, aku, akanmencoba, menjelaskan sesederhana mungkin supayakalian bisa gampang, memahami, kamu, yang sedangmenonton, membaca ini, menggunakan, laptop atau, pcbisa langsung ikuti langkah-langkahnya karenaini, bikinnya, gampang, banget dan cuman butuhwaktu enggak lebih, dari, 20, menit untuk, bikindesain, seperti, ini,

Langsung aja kita ke tutorialnya buat kalian yang belumpunya hosting di sini ada promo dari niagahoster, jadi kalian bisa dapatkan Alim it web hosting dengan, harga yang sangat murah sekali dan disini pelayanannya juga bagus, jadi kalian bisa dapatkan di sini bisa dilihat beberapa paketnya dan akusaranin kalian buat ambil paket yang personalkarena, disini diskon yang paling gede ada diskonup to 80 %, kalau kalian klik disini lihat disini untuk sewa hosting tiga tahun, itu kalian hanya perlu bayar sekitar, 700ribuan, untuk tiga tahun ini, jadi kalau misalkan dibagi per bulannya itu cuman sekitar, dua puluhan ribu dan dipaket yang personal ini, kalian sudah dapet Gratis domain.com.

Jadi kalian bisa masukkan domain kalian, misalkanyokobomb desain.com terus Kalian cek domain nyaNah, kalau tersedia disini kalian bisa tambahkan ke flat disini harganya, jadi terus klik tambahkan getar Nah Lihat di sebelah kanan ini harganya ditambahkan dengan PPN, 10 % itu sekitar 800 ribuan nah kalian, bisa gunakan kode kuponyokobomb untuk mendapatkan Tambahan diskon lihatyang tadi harganya dari 800ribuan, jadi sekitar 700 ribuan, setelah itu kalian bisa pilih metode pembayarannya, lalu tinggal bayar aja yang aku sukadari niagahoster ini, adalah, customer supportnyaitu, tersedia 24 jam, jadi kalian kalau anda apa-apa misalkan, error di level, kalianitu kalian, bisa, tinggal, langsung, klik cat disinidan; Customer support dari niagahoster, itu bakalngebantu, kalian 24 jam dalam seminggu, jadi kalian bisa bebas cat waktu kapan aja malam-malam juga kalian bakal dilayani nanti lagi.

Jadi kalian tinggal klik ajauntuk, lihat-lihat paket hosting dari niagahoster. Oke jadi kali ini kita gunakan of ikmah difitnahini adalah Software desain ya yang berbasis web ya, jadi kalian tidak perlu instal aplikasinya kalian bisa langsung, gunakan, figma, itu dari browser kalian, kelebihan, lain dari ini ada plan gratisnya, jadi kalian bisa langsung daftar dan gak perlu bayar lihat di sini, ada offline gratis nya dan ini udah lebih dari cukup ya untuk Kalian gunakan untuk bikin kesan terus kelebihan, lain dari figma itu bisa kolaborasi, Terus yang paling aku rasain udah user interface, yaitu mudah banget dipahami lihat di sini, aku jamin deh kalian langsung bisa gunakan figma untuk desain, kalian bisa langsung daftarya di sini, pakai Google atau Masukkan email kalian di sini.

Aku langsung login aja, nah ini adalah tampilan Agas worth figma ketika login, jadi yang perlu kalian lakukan disini adalah tinggal klik disini desain file, diklik Ia terus di sini kalian langsung aja buat frame, jadi frame Itu kalau di Adobe kita semacam artboard, di Sini kita gunakan lihat di sisi kanan kita gunakan yang versi desktop yang ukuran 140 kayak gini, sebelumnya kalian, install duluaja play game. Jadi di sini ada play gini, hdvds namanya ada waktu lagi, gini back to file belajar terus kalian masuk ke community nah, disini kalianpilih plugin terus, ketikkan 3D ya, terus install plugin factory 3D, elemen ini, diklikinstall, kalau udah balik ke community Terus klik yang explore ini, kalian ketikkan, Free 3D IconThe Key nah terus aku kopi yang file, ini yang free 3D icon dari, Freddy icon.com Caranya tinggal diklik tombol ini, download, atau di klik dulu kayak gini, terus klik, duplicateya, duplicated nanti, akan terduplikat seperti ini, Okelah aku duplikat lagi, jadi ini, adalah source gratis, yang tersedia di kognitif, Jadi ini Salah satu kelebihan figma, ada bahaya sekali source yang kita bisa menggunakan secara gratis.

Seperti ini nanti kita akan pakai untuk desain lengket, kita balik lagi ke sini, kemudian klik icon ini, klik akun Kalian terus klik file desain yang kalian gua tadi ini adalah tampilan awal Lavigne, jadi disini kalian bisa ganti namanya dulu misalkan Herodesain kayak gini terus di sini ada Frame. Jadi kita akan bikin ada sayurnya di dalam sini saya pertama kita lakukan adalah buat dulugridnya ya Aku akan buat great di sini akupakai kolom terus 12 ini Centre aja aku pakai Sekitar 56 aja gemetarnya 40 kira-kira kayak gini terusaku akan buat navigasinya duludi atas ini caranya klik textini terus di klik aja disini silakan 6 malendeng PC adalah freelance, terus lihat disini di bagian teks aku gunakan Popin aku pilih yang terusukurannya aku pakai 2420 aja, segini kita Lurusin dulu sama great kalau sudah kita buat navigasi sampingnya caranya kalian tinggal tekan klikshift alt, untuk meng-copy kayak gini terus di klik aja untuk mengedit teks home terus sini aku pake yang regular aja ukurannya juga sekitar 14 saja, ini aku urusin dulu.

Di sini navigasi untuk apresiasinya misalkan ada service terus ama copy lagi caranya tekan shif t drag aja terus mungkin di Cinere blok AHai kopi lagi di sini aku tulis kontaknya kira-kira kayak gini kita share disini, terus eh di bagian sini aku Mau kasihlustrasi  kita masuk ke klik sini terusbagian play gini  temen-temen pilih iangfactory try the Element: Scroll di bawah sini kita cari elemen yang kita bisa gunakan di sini aku mau pakai elemen roket ini aja terus klik export image Oke aku akancrop dikit, supaya Enggak terlalu lebarini framenya enter aja terus kecilin  lihatdi bagian sini, jadi yang 3D ini dia belum masukke framenya teman-teman bisa langsung trek aja kesini ke bawah frame gini, supaya masuk oke oke terus di sebelah kanan ini akuakan isikan dengan teks tombol callto actionnya di di Sini aku pilih text terus aku tulis teksnya di sini, Halo selamat datang ini aja terus dibawanya juga ke kasih text disini temukan pekerjaan freelance impianmu, terus dibawa Ia juga aku kasih teks lagi. Bekerjalah di tempat yang membuatmu nyaman daftar sekarang gratis, oke kita edit dulu teksnya kita samakan dulu rata kirinya setelah Itu yang teks atas ini aku akan kasih ukuran sekitar 2024.

Oke Terus yang bawah ini 64 kebesaran 48 aja teks til kita ganti yang ekstra book key yang ini aku kasih semi-block aja hai hai the key dan yang ini biarin regulerterus font nya ganti sekitar 18 gini aja oke. Setelah itu akan bikin tomboldibawahnya untuk tombol callto actionnya caranya di klik yang ini pilihyang rectangle aja kita bikin kotak di sini terus bikin teks daftar aku kasih bobo aja disini teksnya kemudian taruh di bagian sini, Ini gridnya aku bilangin dulu caranya klik disini klik frame nya dulu terus bagian layout gridnya ini kalian klick icon mata yang ini kayak gini terus klik lagi tombolnya ini tadi bagian rongyi kita kasih sekitar 15 saja, kayak gini terus aku aktifin dulu lagi kolomnya yang iniaku copy ya caranya tekan shift alt shift altterus didera KJ  kayak gini kalau udah Ini akuhaid lagi dan ini aku kasih login kayak gini. Setelah itu kita kasih warna untukteks di atasnya ini aku pengen warna sedikit keping-pingan. Jadi aku pakai warna ini aja kayakgini terus tombol daftarnya Ini aku kasih warnaungu dan di teksnya aku kasih warna putih Aja laludi tombol login nya Ini aku pasti stroke dulu jadi struknya ini aku pilih warna yang ungu terus file-nya gitu aku kosongin.

kalau opacity nya yakayak gini login x-nya kok kasih warna ungu juga kira-kira kayak gini, kalau udah masukke 3D icon yang di download tadi disini Adaklik dulu terus diklik kanan and group dulu cari Beberapa elemen yang kita akan kita gunakandia lengket kita aku memasukin elemen ini initerus ini sama ini aja kayak tekan shift ya tekanshift kontrol klik kiri terus kontrol C aja untukcopy Terus tinggal kontrol piye untuk memasterdi sini, selanjutnya Kita sesuaikan dulu oke kira-kira kayak gini terus ini akumau pendekin framenya ya didrag langsungaja kayak gini dan disini agak flat bangetkalau begronnya putih jadi aku mau kasihwarna lain di bagian background aku pakai rectangle aja aku buat merekaAngle kayak gini terus ini aku drag ke bagianpaling bawah  kita kasih warna rectanglenya di bagian file kita klik warnanya teruspilih yang linier kayak gini  terus ini bisa direct temen-temen arahnya akuganti yang kayak miring aja kayak gini terus eh yang warna abu-abu ini aku kasih warna unguungu kayak gini terus Yang bagian a sini Akukasih warna putih jadi kayak gini yang abu-abunya aku turunin dikit opacity nya terus Kalian bisa atur juga ini disini untuk gradiennya kira-kira kayak gini Iya ini udah jadi gampang banget ya cara ngedesain Alleycats difit dan selanjutnya kita export dulu desainnya.

Jadi kalianbisa export satu frame kayak gini caranya klikframenya ini Kemudian di sini ada export kalianklik terus bisa pilih yang PNG atau JPG BMPPNG aja bisa dilihat preview disini klik exportHai Terus eh untuk nanti kita develop jadi live diwebsite kita kita perlu untuk mengeksport elemen ini terpisah jadi diklik aja nih elemen roketnya terus klik export lihat disini jadi cuman Elemenroketnya yang bakal ke export terus diklik exportterus ulangi lagi untuk yang bagian icon-iconini juga diklik ya pastikan pilih yang PNG supayafile-nya transparan oke terus ini juga klik export Hai dan export oke  desain-desainIni yang nantinya akan kita gunakanuntuk membuat all endings tanpa coding samasekali di WordPress dan Elementer.