Home › Forums › WoodMart support forum › xtemos show demos preview
xtemos show demos preview
- This topic has 5 replies, 2 voices, and was last updated 4 years, 2 months ago by Elise Noromit.
-
AuthorPosts
-
March 5, 2020 at 9:42 am #178031
cmadvisorParticipantHello, can i insert in my site a button can show some text or whatever i want with the same buttons in your demo? See the attachment for more info
Attachments:
You must be logged in to view attached files.March 5, 2020 at 12:34 pm #178092
Elise NoromitMemberHello,
Unfortunately, there is no option. Our demo is customized and we cannot provide a quick code to reproduce it. It is very complicated customization which is not covered by our support.
Best Regards
March 6, 2020 at 11:47 am #178300
cmadvisorParticipantHello, i’ve created my code for that. Quick code… if u want, i can share that.
Regards,
AgostinoMarch 6, 2020 at 12:46 pm #178333
Elise NoromitMemberHello,
That is fine. You are welcome to share.
Best Regards
March 9, 2020 at 9:13 am #178711
cmadvisorParticipantHello,
no problem.You need first just open “header.php” and add this code:
<?php function pulsante_sticky() { ?> <a href="URL HERE" class="we-sticky-call-container"><img src="IMAGE OF BUTTON HERE"></a> <?php } add_action( 'wp_footer', 'pulsante_sticky' ); ?>
After that, u need to add some CSS, like:
.we-sticky-call-container { background: #fcb19a; display: block; width: 120px; height: 150px; border-radius: 50%; position: fixed; bottom: 10%; left: 90%; line-height: 140px; } @media (max-width: 768px) { .we-sticky-call-container { display:none; } }
Result: https://scintille.shop/result-images.jpg
If u want a button with text and icon, for example “call now”, you need to do that:
In functions.php add
/** * ------------------------------------------------------------------------------------------------ * Buttons sticky * ------------------------------------------------------------------------------------------------ */ function load_font_awesome_five() { wp_enqueue_style( 'font-awesome-5', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css' ); } add_action( 'wp_enqueue_scripts', 'load_font_awesome_five' );
After that, u need to add in header.php:
function sticky_button() { ?> <a href="tel:NUMBER HERE" class="sticky-button"> <div class="sticky-call-icon"> <i class="fas fa-phone-alt"></i> </div> <div class="sticky-call-content"> <div class="sticky-call-title"> NUMBER HERE </div> <div class="sticky-call-description"> DESCRIPTION HERE </div> </div> </a> <?php } add_action( 'wp_footer', 'sticky_button' );
After that, u need to some CSS:
.sticky-call-container { background: #f39200; display: block; width: 50px; height: 50px; border-radius: 50%; position: fixed; bottom: 20%; left: 20px; text-align: center; line-height: 50px; color: #fff; z-index: 999; } .sticky-call-content { position: absolute; top: 0; left: 25px; width: 250px; padding-left: 25px; background: #f39200; height: 50px; z-index: -1; border-radius: 0 25px 25px 0; opacity: 0; transition: all 0.5s ease; font-size: 16px; line-height: 20px; } .sticky-call-title { margin-top: 5px; } .sticky-call-description { font-size: 12px; } .sticky-call-container:hover .sticky-call-content { opacity: 1; } @media (max-width: 768px) { .sticky-call-container { bottom: 0; width: 100%; border-radius: 0; left: 0; } .sticky-call-icon { display: none; } .sticky-call-content { opacity: 1; width: 100%; left: 0; padding-left: 0; } }
Result: https://welaunch.io/en/wp-content/uploads/sites/4/2019/08/Bildschirmfoto-2019-08-16-um-11.08.42.png
Credits: https://welaunch.io/en/2019/08/sticky-call-now-button-wordpress/
March 9, 2020 at 12:15 pm #178766
Elise NoromitMemberHello,
Thank you for sharing the information.
Best Regards
-
AuthorPosts
- You must be logged in to create new topics. Login / Register