Powered by Blogger.



Laman

Cara Edit Section 1

 Pada section pertama ini sengaja kami buat khusus karena ini adalah awal landingpage anda, jika header pertama berantakan maka orang biasanya akan meninggalkan landingpage anda, jadi sangat penting memiliki header yang menarik, untuk itu kami buatkan khusus untuk section pertama ini


----------------------------------------------------------------------------------

Cara Edit Teks Header Pertama

-----------------------------------------------------------------------------------


1. Silahkan masuk ke layout / Tata Letak > Section 1 > Edit


2. Kemudian silahkan rubah teksnya sesuai keinginan (panah warna merah), sedangkan untuk merubah warna dari teks tersebut silahkan rubah pada bagian (panah warna biru), 
Untuk merubah warna teks anda membutuhkan kode warna, silahkan klik situs ini untuk melihat kodenya https://htmlcolorcodes.com/





 ------------------------------------------------------------------------------------------------------------------------

Cara Menghilangkan Bayangan Pada Teks Pertama

---------------------------------------------------------------------------------------------------------------------------

 Okey pada teks header pertama terdapat bayangan (shawdow ) dimana fungsinya untuk mempercantik tampilan, namun kelemahannya effect bayangan ini akan menggangu apabila kita menggunakan background cerah, seperti warna putih, kuning dll, sehingga menyebabkan tidak enak dipandang mata
 
namun ini sifatnya optional, boleh dihapus boleh tidak, bagi anda yang ingin menghapusnya silahkan ikuti cara dibawah ini


1. Silahkan masuk ke menu pengaturan html template, caranya klik Template / Tema > Sesuaikan > Edit Html

2. Lalu teman - teman silahkan cari kode ini " text-shadow:0 0 4px", untuk mempercepatnya silahkan tekan CTRL + F

3. Jika sudah ketemu, rubah angka 4px nya menjadi 0px, sehingga nanti hasil akhirnya akan seperti ini " text-shadow:0 0 4px", 

4. Save, Finish




 --------------------------------------------------------------------------------------------------------------------------

Cara Mengganti Gambar Produk Di Header

---------------------------------------------------------------------------------------------------------------------------

Template landingpage ini dilengkapi dengan gambar header yang bisa teman - teman ganti sesuai dengan produk yang ingin dijualnya, untuk caranya  silahkan ikuti tutorial dibawah ini



1. Silahkan upload dulu gambar produk yang akan diganti ke blogger, untuk gambar pastikan ukurannya pas, karena dia akan mengikuti aslinya, dan yang paling terpenting dan wajib adalah harus menguploadnya di Blogger, bukan dihosting lain semisal wordpress dll (karena itu akan memberatkan templatenya nantinya), setelah diupload silahkan ambil link url nya, contoh link url blog yg sudah diupload itu seperti ini " https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHB6TVHpy4eNTJWX2weBa_qMPtqfmeR9ko7x71l4pid0zfVQjdcxDmgDYqUp0_J2L4K9KOb24z_FdaV7oaCYCzYksMRqXKjhwt7LjCF5ygJHgGwe154xvcXJ4tcY47GIEjhYHcF3wuJvtb/s16000/1.png "

dan untuk uploadnya kalian bisa upload di blog yang lain, atau bisa juga diupload diblogspot yang sudah tidak terpakai, tidak harus diupload di blog utama


2. Jika sudah diupload , silahkan Klik layout >Section 1 > Video Prame > Edit


3. Kemudian silahkan ganti url gambar yang telah saya tandai (blok) dibawah ini, ganti dengan url gambar yang teman - teman sudah upload

4. Jika sudah silahkan save, finish



--------------------------------------------------------------------------------------------------------------------------

Cara Mengganti Gambar Produk Di Header Dengan Video Youtube

--------------------------------------------------------------------------------------------------------------------------


Selain foto produk kamu juga bisa menggantinya dengan video loh, tapi sebelum mengganti dengan video, pastikan kamu upload video tersebut ke channel youtube milikmu ya, okey saya anggap kamu sudah menguploadnya, untuk tutorial caranya adalah sebagai berikut

1. Pertama silahkan kamu klik terlebih dahulu video yang sudah diupload ke channel youtubemu, sebagai contoh yang ini https://www.youtube.com/watch?v=1dLbDhcxzeQ

2. Setelah itu silahkan klik " share" pada bagian video youtube tersebut, lalu klik embed, maka nanti hasilnya akan seperti ini (contoh), silahkan copy terlebih dahulu ke notepad / word

<iframe width="560" height="315" src="https://www.youtube.com/embed/1dLbDhcxzeQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 3. Lalu  Klik layout >Section 1 > Video Prame > Edit


2. Kemudian silahkan "Hapus Semua" kode yang ada didalam widget tersebut, lalu ganti dengan kode dibawah ini

<iframe allowfullscreen='' class='blanter-video-iframe' src='https://www.youtube.com/embed/XHOmBV4js_E?feature=oembed&amp;start&amp;end&amp;wmode=opaque&amp;loop=0&amp;controls=1&amp;mute=0&amp;rel=0&amp;modestbranding=0' title='youtube Video Player'/></iframe>

<!--<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOOwUeun9qzTyct1vN_HcFxltlWKU8hnIHsOQrEaxO8ft7q3YGUcPjk8O-8Uwp8lZPgROcpLIMcHoBKsXFkWRWxgYF508dYMr_icG6i-LPldIgyGDS4OtzXokz_2BB4fqku-9lA9wAUG8/s1600/Sepatu+Adidas+Biru.jpg'/>

<style>#section-1 .get-iframe{padding:0;height:auto;border:none}</style>-->



3. Kemudian rubah kode warna biru diatas dengan kode video youtube kamu yang sudah kita embed sebelumnya diatas, maka nanti hasilnya akan seperti ini

<iframe width="560" height="315" src="https://www.youtube.com/embed/1dLbDhcxzeQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<!--<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOOwUeun9qzTyct1vN_HcFxltlWKU8hnIHsOQrEaxO8ft7q3YGUcPjk8O-8Uwp8lZPgROcpLIMcHoBKsXFkWRWxgYF508dYMr_icG6i-LPldIgyGDS4OtzXokz_2BB4fqku-9lA9wAUG8/s1600/Sepatu+Adidas+Biru.jpg'/>

<style>#section-1 .get-iframe{padding:0;height:auto;border:none}</style>-->

5. Jika sudah silahkan SAVE, Finish (dan sebagai informasi untuk ukuran videonya sudah mentok seperti itu ya, jadi tidak bisa dikecilin maupun diperbesar)




--------------------------------------------------------------------------------------------------------------------------

Cara Mengganti Bentuk Header Kerucut Jadi Lurus

--------------------------------------------------------------------------------------------------------------------------

Di template landingpage ini pada bagian header terdapat bentuk kerucut untuk variasi tampilan, namun jika anda tidak suka, anda bisa mengembalikannya ke dalam bentuk semula, yaitu bentuk lurus


berikut cara tutorial untuk mengembalikannya :


1. Silahkan masuk ke menu Template > Edit Html

2. Kemudian cari kode ]]></b:skin>

3. Setelah itu silahkan cari kode dibawah ini tepat di atas kode ]]></b:skin>, 

.elementor-shape {

    overflow: hidden;

    position: absolute;

    left: 0;bottom:-1px;

    width: 100%;

    line-height: 0;

    direction: ltr;

}

  .elementor-shape-bottom svg {

    width: calc(112% + 1.3px);

    height: 70px;

}

  .elementor-shape svg {

    display: block;

    width: calc(100% + 1.3px);

    position: relative;

    left: 50%;

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

}

  .elementor-shape .elementor-shape-fill {

    fill: #fff;

    -webkit-transform-origin: center;

    -ms-transform-origin: center;

    transform-origin: center;

    -webkit-transform: rotateY(

0deg

);

    transform: rotateY(

0deg

);

}


4. Jika sudah ketemu silahkan hapus kode diatas tersebut, hingga akhir


5. Terus silahkan cari lagi kode ini <!--<div class='ziilstudio-shape' data-negative='true'>


6. Apabila sudah ketemu silahkan hapus kode tersebut semuanya

<!--<div class='ziilstudio-shape' data-negative='true'>

<svg preserveAspectRatio='none' viewBox='0 0 700 10' xmlns='http://www.w3.org/2000/svg'><path class='elementor-shape-fill' d='M360 0L350 9.9 340 0 0 0 0 10 700 10 700 0'/></svg></div>-->

  <div class='elementor-shape elementor-shape-bottom' data-negative='true'>

  <svg preserveAspectRatio='none' viewBox='0 0 1000 100' xmlns='http://www.w3.org/2000/svg'>

<path class='elementor-shape-fill' d='M500.2,94.7L0,0v100h1000V0L500.2,94.7z'/>

  </svg>

  </div>

</div>

<!-- END Section 1 -->


7. Ganti kode diatas tersebut dengan kode dibawah ini

<!--<div class='ziilstudio-shape' data-negative='true'>

<svg preserveAspectRatio='none' viewBox='0 0 700 10' xmlns='http://www.w3.org/2000/svg'><path class='elementor-shape-fill' d='M360 0L350 9.9 340 0 0 0 0 10 700 10 700 0'/></svg></div>-->

</div>

<!-- END Section 1 -->


8. Jangan lupa di SAVE, Finish