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.
GRATIS Kode CSS untuk mempercantik tampilan Cover Weddingpress
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.
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.
Silakan pelajari demo widget invitation ini sebagai pengetahuan dasar untuk nantinya digunakan untuk mengexplore dengan penambahan CSS.
Selain Plugin Weddingpress, untuk dapat menambahkan kode CSS di widget invitation ini, juga diperlukan plugin ELEMENTOR PRO. Pastikan Kamu sudah memiliki dan mengaktifkannya.
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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);
}
}
.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;
}
/*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);
}
}
Aset image download disini
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:
Dapatkan potongan harga 50% dengan menggunakan kupon YOIKUT saat checkout pembelian weddingpress
12 Responses
Smoga lancar rejeki ny bg.. aamiin..
Aamiiiin. Doa yang sama untuk Om Rio.
Sukses ya terus. 🙏🏻
Nice share, sukses terus Om Andi
nice share mas..tak doakan berkah
Wahhh, mantap mas.. sangat bermanfaat.. semoga Allah membalas segala kebaikan masnya. Aamiin🙏🏻😊
ku coba ko gabisa ya?
Makasi ya min.. keren banget nih… Jadi makin kece weddingpres nya
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
Terimakasih
mas. bikin tutor background bunga goyang. he
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 [email protected], nanti saya buatkan scriptnya.
Kalo pake CSS, baru ketemu penambahan 2 bunga. Pengennya 4. Setiap pojok ada bunga/daunnya.
terima kasih mas Andi