Custom Cover Invitation

GRATIS Kode CSS untuk mempercantik tampilan Cover Weddingpress

YoiKut.com

Bagi para pemilik usaha undangan digital, Weddingpress adalah nama yang sudah cukup familiar. Weddingpress memang addon elementor yang sangat powerfull untuk kebutuhan mendevelope website undangan.

“Weddingpress adalah pioner dan trendsetter plugin addon elementor khusus untuk mendesiain website undangan pernikahan.”

Kali ini Yoikut.com akan membagikan kode css yang dapat mempercantik tampilan cover invitation yang ada di widget weddingpress.

Weddingpress cover

Salah satu kelebihan Weddingpress yang Kami suka yakni widget yang disediakan dapat dicustom sesuai kebutuhan. Diantaranya adalah widget invitation (cover undangan), dengan sedikit pengetahuan tentang CSS, Kami mengexplore bagian invitation ini. 

Hasilnya membuat banyak klien pemesan undangan digital berdecak kagum. Bagi teman-teman yang ingin lebih tahu tentang apa itu CSS bisa mempelajarinya di w3shcool.com

Sebagai bentuk rasa terima kasih Kami kepada developer pembuat Weddingpress, Mas Andy Hermawan, dan ingin menularkan energi positive di masa pandemi ini, Kami membagikan kode CSS untuk mempercantik tampilan cover invitation yang teman-teman miliki.

Demo Widget Invitation - Weddingpress

Silakan pelajari demo widget invitation ini sebagai pengetahuan dasar untuk nantinya digunakan untuk mengexplore dengan penambahan CSS.

Elementor Pro

Selain Plugin Weddingpress, untuk dapat menambahkan kode CSS di widget invitation ini, juga diperlukan plugin ELEMENTOR PRO. Pastikan Kamu sudah memiliki dan mengaktifkannya.

3 Langkah Custom Cover Undangan

Langkah 1

Langkah 2

Langkah 3

				
					.content-modalx {
 background: linear-gradient(#F15F7905, #F15D77)
}

.wdp-text{padding-right: 15px;
padding-left: 15px
}

.info_modalx {
    background-color: #FFFFFF75;
    width: 80%;
    height: 60%;
    border-color: #F15D77;
    border-width: 1px;
    border-style: solid;
    margin-left: 10vw;
    margin-right: 10vw;
    margin-top: 20vh;
    margin-bottom: 20vh;
    border-radius: 15px;
}

.wdp-mempelai{
    margin-bottom: 10px;
}
				
			

custom 1

				
					.content-modalx {
    margin-top: -10px;
    margin-bottom: -10px;
 background: linear-gradient( #4B322F80, #4A312E);   
}

.wdp-text{padding-right: 25px;
padding-left: 25px
}

.info_modalx {
    background-color: #ECA66375;
    width: 80%;
    height: 100%;
    border-color: white;
    border-width: 4px;
    border-style: solid;
    border-top-width: 0px;
    border-bottom-width: 0px;
    margin-top: 00px;
    margin-bottom: 0px;
    margin-left: 10vw;
    margin-right: 10vw;
    vertical-align: middle;
}


.wdp-mempelai{
    margin-bottom: 0px;
}

.elementor-image.img {
    margin-bottom:  0px;
    padding: 5vw;
}
				
			

custom 2

				
					.wdp-text{padding-right: 25px;
padding-left: 25px
}

.elementor-image.img {
    margin-bottom:  -310px;
    margin-top: 100px;
}

.info_modalx {
    width: 80vw;
    margin-left: 10vw;
    margin-right: 10vw;
    margin-top: 15vh;
    margin-bottom: 15vh;
    background-color: white;
    height: 70%;
    border-radius: 25px;
    border-style: double;
    border-width: 8px;
    border-color: #E27F3D;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 10px;
    padding-right: 10px;
}

.wdp-name {
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-color: white;
   
}

.wdp-mempelai{
    margin-bottom: -10px;
}

				
			

custom 3

				
					.wdp-text{padding-right: 25px;
padding-left: 25px
}

.wdp-dear {
    padding-top: 45px}

.info_modalx {
    width: 75%;
    height: 80vh;
    border-color: #BF9B73;
    border-width: 2px;
    border-style: solid;
    padding-top: 00px;
    padding-bottom: 0px;
    margin-left: 12vw;
    margin-right: 10vw;
    margin-top: 10vh;
    margin-bottom: 10vh;
    vertical-align: middle;
}

.wdp-mempelai{
    margin-bottom: -230px;
}

.elementor-image.img {
    margin-bottom:  250px;
}
				
			

custom 4

				
					.content-modalx {
 background: linear-gradient(#14417500, #0c2722);   
}

.wdp-text{padding-right: 25px;
padding-left: 25px
}

.wdp-dear {
    padding-top: 45px}


.wdp-mempelai{
    margin-bottom: -255px;
}

.elementor-image.img {
    margin-bottom:  320px;
}

.info_modalx {
    width: 75%;
    height: 85%;
    border-width: 0px;
    border-style: solid;
    padding-top: 100px;
    margin-left: 12vw;
    margin-right: 10vw;
    margin-top: 10%;
    vertical-align: middle;
}

selector .wdp-button-wrapper:after{
    content: "JUNE 12, 2022 - KUPINANG LUXURY HALL";
    display: block;
    font-family: barlow condensed;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1em;
    margin: 5px 0;
}
				
			

custom 5

				
					.content-modalx {
    margin-top: -10px;
    margin-bottom:-10px;
    background-image: linear-gradient(#00000080, #00000080);
}


.elementor-image.img {
    margin-top: -10vh;
}

.info_modalx {
    width: 80vw;
    height: 60%;
    margin-left: 10vw;
    margin-right: 10vw;
    background-color: #00000054;
    border-radius: 25px;
    border-color: #00000054;
    padding: 10px;
}

.wdp-text{
        padding-right: 10px;
        padding-left: 10px
}

.wdp-mempelai{
    margin-bottom: 20px;
}


.wdp-button-wrapper button{
	transform: scale(1);
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 5);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}
				
			

custom 6

cocok digunakan di tema WDP-03

Weddingpress cover
				
					.wdp-mempelai{
    margin-bottom: 20px;
}


.info_modalx {
    background-color: #F1A4BC; 
    width: 80%; 
    height: 70%; 
    border-color: #Ffffff; 
    border-width: 3px; border-style: double; 
    margin: 15vh 10vw;
    border-radius: 15px;
    padding: 10px 0;
}
    
.wdp-name{
    padding: 0 5px 0 5px;}
    
.wdp-text{
    padding-right: 10px;
    padding-left: 10px;
}



/*penambahan text di atas foto mempelai*/
selector .elementor-image::before {
      content: "The Wedding of";
      color: #Ffffff;
      white-space: pre;
      display: block;
      font-size: 14px;
  font-family: 'georgia';
  font-weight: normal;
  margin: 0 0 15px 0;
    }


/*penambahan text di bawah tombol buka undangan. jenis dan ukuran font silakan kreasikan sesuai kebutuhan*/


.wdp-button-wrapper::after{
    content: "Jakarta, 12 Juni 2023";
    display: block;
    font-family: 'Baumans', cursive;
    font-size: 12px;
    margin: 5px 0 0 0;
}

				
			

custom 7

				
					 /*animasi zoom in awal buka link*/
 
.info_modalx{
  padding: 10px;
  animation: zoom-in 3s ease-out;
}


/*custom posisi teks nama mempelai -boleh dihapus */
.wdp-mempelai{
    margin: 25px 0px 10px 0;
    animation: zoom-in 5s ease-out;
}


/* wdp dear to */
.wdp-dear{
    margin-top: 50px !important;
    animation: zoom-in 4s ease-out;
}

.wdp-dear:after{
    content: "Bapak/Ibu/Sahabat:";
    display: block;
    animation: zoom-in 4.5s ease-out;
}

.wdp-name{
    animation: zoom-in 7s ease-out;
}


@keyframes zoom-in {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}


/*animasi daun dan bunga di background cover */
.content-modalx:before{
    content: url(https://kupinang.id/wp-content/uploads/2022/03/Daun-wf01.png); // silakan gunakan link image milik sendiri//
    display: block;
    position: fixed;
    top:-10%;
    left:80%;
    height: 120px;
    animation-name: rotateAtas;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotateAtas{
    0%{ transform: rotate(0deg); }
    50%{ transform: rotate(20deg); }
    100%{ transform: rotate(0deg); }
}


.content-modalx:after{
    content: url(https://kupinang.id/wp-content/uploads/2022/03/Bunga-WF-01-long.png);  // silakan ganti/gunakan link milik sendiri//
    display: block;
    position: fixed;
    top:80%;
    left: -5%;
  max-width: 90%;
  width: 120px;
    animation-name: rotateBawah;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotateBawah{
    0%{ transform: rotate(0deg); }
    50%{ transform: rotate(20deg); }
    100%{ transform: rotate(0deg); }
}


/* animasi foto mempelai */
selector .elementor-image {
    margin-bottom: -30px;
    animation: grow 5s ease-in infinite;
}


@keyframes grow {
  0% {
    transform: scale(1);
  }
  
  50% {
    transform: scale(1.1);
  }
  100% {
      transform: scale(1);
  }
}

				
			

custom 8

Aset image download disini

custom 9

custom 10

PERHATIAN

Kode CSS ini hanya mengubah tata letak dari cover invitation dan dapat diubah sesuai keinginan. Untuk pemilihan jenis font dan image, silakan atur di bagian tab -style elementor widget invitation.

Tampilan mockup di atas menyesuaikan ukuran iPhone-X, pada gadget tertentu desain tersebut menyesuaikan ukuran layar masing-masing gadget, sehingga tampilan tidak sama persis dengan mockup di atas, silakan untuk mengubah nilai unit pada masing-masing selector untuk mendapatkan desain sesuai keinginan.

Jika mengalami kesulitan silakan berikan komentar di kolom komentar, kami siap membantu. Ada request terkait warna dan desain? Jangan sungkan hubungi kami.
Selamat berkarya!

created: 12 Juli 2021

Update:

  1. 13 Juli 2021: add custom-6 + tombol animasi.
  2. 31 Juli 2021: perbaikan cover 5
  3. 12 Feb 2022: perbaikan css image cover agar tidak berefek ke widget copy text.
  4. 2 Maret 2022: penambahan custom 7
  5. 10 Maret 2022: penambahan custom 8

Belum Memiliki Weddingpress?

Dapatkan potongan harga 50% dengan menggunakan kupon YOIKUT saat checkout pembelian weddingpress

Halaman Penjualan

Template Landingpage
Jasa Undangan Digital

12 Responses

  1. makasih banget untuk orang-orang baik yang mau saling berbagi ilmunya seperti ini,
    ilmu mahal ini tapi dibagi gratis hehe.

    mudah-mudahan diberi kelancaran dan berkah untuk usahanya, aamiin

    1. Sebenernya ada 2 cara kalo mau pake animasi bunga/daun bergoyang:
      1. Pake gif
      2. Pake css.

      Kalo mau pake gif, saya belum nemu aset gif-nya. Kalo om/tante mantan punya aset gifnya boleh share ke saya di admin@yoikut.com, nanti saya buatkan scriptnya.

      Kalo pake CSS, baru ketemu penambahan 2 bunga. Pengennya 4. Setiap pojok ada bunga/daunnya.

Leave a Reply

Your email address will not be published. Required fields are marked *

Rekomendasi

asset undangan digital

Levidio Wedding
Volume 1

gunakan kupon: YOIKUT

dan dapatkan potongan 50%

Levidio Wedding
Volume 2

gunakan kupon: YOIKUT

dan dapatkan potongan 50%

kelas online undangan digital

eCourse Mahir Undangan Digital

kursus online membuat undangan digital mahir elementor

Yo iKut Sukses Bareng Dengan Memanfaatkan Sumber Daya Tak Berbatas Bernama Internet

Hubungi Kami

Jl. Raya Pakuhaji RT.06.01 Kayu Agung Sepatan Tangerang, Banten

Yo-iKut Sukses Bersama 💛 - Kayu Agung, Banten

2021 - yoikut.com

download sekarang

Template Elementor
Landing Page Undangan Digital