In this video tutorial I’ll explain how to create a contact popup with a personal touch. Combining the Flatsome Lightbox and UX Builder to show a personal photo. Click Open popup to see it in action.
UX Shortcode
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
[row label="CSS* Photo" style="collapse" h_align="center" class="popup-personal-contact"] [col padding="20px 0px 10px 0px" align="center" class="popup-column"] [ux_image id="https://www.flatelements.com/wp-content/uploads/2019/03/sebdelaweb.jpg"] [/col] [/row] [row label="Content"] [col span__sm="12" align="center"] <p>Please contact us for questions or more information. Send an email to: flatelements@gmail.com or call <a href="tel:+31630389361">+31630389361</a></p> [title style="center" text="Get in touch" margin_bottom="10px" size="70"] <p>Place your form here... </p> [/col] [/row] |
Footer script
|
1 2 3 |
[lightbox id="popup-personal-contact" padding="30px" width="600px"] [block id="popup-personal-contact"] [/lightbox] |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/*************** POPUP: PERSONAL CONTACT ***************/ .popup-personal-contact img { border-radius:99px; box-shadow: 0 0 10px rgba(0,0,0,.3); border: 3px solid #fff; width:90px; height:90px; margin: 10px; } @media screen and (min-width: 550px) { .popup-personal-contact .col-inner { margin-top:-80px; } .lightbox-content { border-radius:5px; } } @media screen and (max-width: 549px) { .mfp-container { padding: 0; margin:0; } } |
