Hola,
En el sitio https://estudiowls.com.ar no estoy logrando ubicar el boton flotante de WhatsApp junto al icono del Email.
Actualmente el icono flotante de WhatsApp (lo he creado manualmente y lo llamé whatsapp-me) aparece bien abajo de todo en la pagina y no logro modificar la posicion con CSS.
Les dejo mi CSS personalizado para que por favor me orienten donde esta el error:
Gracias
header.site-header {
border: none !important;
}
@media only screen and (max-width: 500px) {
.page .title {
margin-top: 15%;
}
}
#content header div.container{
margin-top:7%;
}
header.site-header{
position: fixed;
width: 100%;
z-index: 999;
}
.site-logo img {
max-width: 200px !important;
}
/*Entradas*/
.single .title{
text-align: center;
}
/*Páginas*/
.page .title{
text-align: center;
}
h1 {
font-size:35px !important;
}
h2 {
font-size:28px !important;
}
.site-footer .widget-area { color: #fefefe; background-color: #000; }
.site-footer .widget-area .widget-title {
color: silver;
}
.site-footer{
padding: inherit;
}
.site-footer .widget-area {
margin-bottom: inherit!important;
}
.navbar-form {
background: black !important;
}
.navbar-form .btn-search-form {
background: black !important;
}
.widget-area .widget {
margin-bottom: 0px!important;
}
img.attachment-large.size-large.wp-post-image {
width: 100%;
}
.site-footer .credits {display:none}
.site-header ul li a {
font-size: 18px;
font-weight: bold;
}
/*Contact Form*/
.wpcf7-form {
margin-left: 25px; margin-right: 25px; margin-top: 25px;
background-color: #4B4A50;
padding: 20px;
border: 3px solid #8B8B8B;
-webkit-box-shadow: 0px 5px 40px -1px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -1px rgba(0,0,0,0.57);
box-shadow: 15px 40px -1px rgba(0,0,0,0.57);
border-radius: 6px;
}
.wpcf7-form textarea::placeholder,
.wpcf7-form input::placeholder{
color:gray;
border-radius: 6px;
}
.wpcf7-form textarea,.wpcf7-form input{
color:white;
border-radius: 6px;
}
.wpcf7-form textarea, .wpcf7-form input {
color: white;
border: solid 1px white;
border-radius: 6px;
}
@media (max-width:720px){
.wpcf7-form{
margin: 20px 0px 0px 0px !important;
}
}
@media (max-width:480px){
.wpcf7-form{
padding:8px;
}
}
@media screen and (max-width: 600px) {
textarea.wpcf7-form-control.wpcf7-textarea, input.wpcf7-form-control.wpcf7-text {
font-size: 11px;
line-height: 1.5em;
}
}
.wpcf7-form-control.wpcf7-submit {
background-color: #000000;
color: #F5FFFA;
}
input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]), textarea, select {
background-color: #4B4A50;
}
input, button, select, textarea {
font-size: 14px;
color:#fefefe;
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder{
color: #f0f0f0;
opacity: 1;
}
.wpcf7-form-control.wpcf7-submit{
padding:10px;
}
.wpcf7-response-output{
color:white;
padding:10px!important;
}
/*Oculta iconos en Contacto*/
.page-id-215 #contact-me {
display: none !important;
}
.page-id-215 #whatsapp-me {
display: none !important;
}
/*Icono Email Flotante*/
#contact-me {
position:fixed;
right:13px;
bottom:100px;
width:50px;
height:50px;
background-color:
padding:10px;
border-radius:10%;
}
/*Boton Texto Flotante*/
#contact-me p {
position: absolute;
margin-left: -50px;
margin-top: 10px;
}
div#contact-me p {
position: absolute;
margin-left: -29px;
background-color: silver;
font-weight: bold;
color: black;
padding: 2px 4px;
text-align: center;
font-family: 'Arial', Helvetica, sans-serif;
font-size: 14px;
margin-top: px !important;
width: 120px !important;
right: 50px;
border:2px solid grey;
border-radius: 13px;
}
#grw_widget-11 > h2{
text-transform: initial;
}
// DEBE SER TEXTO WHTAPP
#whatsapp-me p {
position: absolute;
margin-left: -39px;
margin-top: 0px;
font-weight: bold;
}
//Boton Flotante Whatsapp
div#whatsapp-me p {
position: absolute;
margin-left: -5em;
margin-top: 53px;
background-color: rgba(0,0,0, .6);
font-weight: bold;
color: white;
padding: 0px 4px;
white-space: nowrap;
}
div#whatsapp-me img.lazyloading {
margin-left:-2px
}
//Icono WhatsApp
#whatsapp-me {
position:fixed;
right:13px;
bottom:160px;
width:50px;
height:50px;
background-color:
padding:10px;
border-radius:10%;
}
#grw_widget-11 > h2{
text-transform: initial;
}
/*Tabla de contenidos*/
div#ez-toc-container {
color: white;
font-size: 22px !important;
background-color: #1e73be !important;
}
div#ez-toc-container a {
color: white;
font-size: 18px !important;
}
div#ez-toc-container p {
font-size: 22px !important;
}
li.ez-toc-page-1::marker {
font-size: 18px !important;
color: white;
}
/*Fecha ultima entrada*/
.last-updated{
font-weight: bold;
font-style: italic;
color: #1e73be;
font-family: 'Arial', Helvetica, sans-serif;
}
@media only screen and (max-width: 439px) {
.page .title {
font-size: 29px !important;
}
}
/*Hover en botones*/
:root .has-vivid-green-cyan-background-color:hover {
background-color: #00d100;
}
/*Hover en texto flotante*/
#contact-me p:hover {
background: #000;
color: #fff;
font-size: 15px;
}
.wp-block-button__link:hover {
background: #3A3A3A !important;
color: #fff !important;
}
/*Oculta WhatsApp en Paginas*/
.postid-3961 #whatsapp-me {
display: none !important;
}
.postid-4252 #whatsapp-me {
display: none !important;
}
/*Oculta WhatsApp y Mail en Paginas*/
.postid-3961 #whatsapp-me {
display: none !important;
}
.postid-3961 #contact-me {
display: none !important;
}
.postid-6912 #whatsapp-me {
display: none !important;
}
.postid-6912 #contact-me {
display: none !important;
}
@media only screen and (max-width: 500px){
.alto-img img {
height: 155px!important;
}
}
Contenido solo visible a usuarios registrados
Hola Walter,
Recuerda que donde indica dominio debes escribir el tuyo, adicional has verificado con algún plugin para esto? por ejemplo tienes este muy bueno:
https://wordpress.org/plugins/buttonizer-multifunctional-button/
Un saludo 🖐️
No uso plugins. Uso codigo y esta funcionando.
Solo necesito que me des el codigo css para colocar el icono WhatsApp debajo del icono del email (el sobre azul que flota a la derecha de la pantalla.
El sitio es https://estudiowls.com.ar
Mira todo mi Css porque ahi está el error y directamente dame un css para la ubicación
Hola Walter,
No podemos indicarte el css si al ingresar a tu sitio no está dicho botón. Primero haz visible el botón si comentas que está funcionando y luego vemos si te podemos ayudar con el css.
Un saludo 🖐️
El boton aparece ABAJO DE TODO
Hola Walter,
Entiendo que deseas colocarlo debajo del botón de email, si es así prueba añadir el siguiente código CSS en tu sitio web
#whatsapp-me {
float: right;
margin-top: -95px;
margin-right: 10px;
}
El resultado debe ser:
PD: Ten en cuenta no escribir las respuestas en Mayúscula, esto en internet puede ser tomado de forma incorrecta por otros usuarios.
Un Saludo
Disculpa no era mi intención gritar al usar mayusculas, pero era el tercer mensaje que decia lo mismo queria dejar claro donde esta el icono.
Lamentablemente no ha funcionado con tus instrucciones, pero entiendo que mi CSS está muy desorganizado y debe haber algun comando que luego anula el tuyo. Por favor revisa mi CSS en lo que hace al icono de WhatsApp
/*Oculta iconos en Contacto*/
.page-id-215 #contact-me {
display: none !important;
}
.page-id-215 #whatsapp-me {
display: none !important;
}
/*Icono Email Flotante*/
#contact-me {
position:fixed;
right:13px;
bottom:100px;
width:50px;
height:50px;
background-color:
padding:10px;
border-radius:10%;
}
/*Boton Texto Flotante*/
#contact-me p {
position: absolute;
margin-left: -50px;
margin-top: 10px;
}
div#contact-me p {
position: absolute;
margin-left: -29px;
background-color: silver;
font-weight: bold;
color: black;
padding: 2px 4px;
text-align: center;
font-family: 'Arial', Helvetica, sans-serif;
font-size: 14px;
margin-top: px !important;
width: 120px !important;
right: 50px;
border:2px solid grey;
border-radius: 13px;
}
#grw_widget-11 > h2{
text-transform: initial;
}
/* TEXTO WHTAPP
#whatsapp-me p {
position: absolute;
margin-left: -39px;
margin-top: 0px;
font-weight: bold;
}
*//
//Boton Flotante Whatsapp
div#whatsapp-me p {
position: absolute;
margin-left: -5em;
margin-top: 53px;
background-color: rgba(0,0,0, .6);
font-weight: bold;
color: white;
padding: 0px 4px;
white-space: nowrap;
}
div#whatsapp-me img.lazyloading {
margin-left:-2px
}
//Icono WhatsApp
#whatsapp-me {
float: right;
margin-top:-95px;
margin-right: 10px;
position:;
right:13px;
bottom:160px;
width:50px;
height:50px;
background-color:
padding:10px;
border-radius:10%;
}
#grw_widget-11 > h2{
text-transform: initial;
}
Hola Walter,
Es posible que el código que esté anulando esta regla sea el que tienes en:
//Boton Flotante Whatsapp
div#whatsapp-me p {
position: absolute;
margin-left: -5em;
margin-top: 53px;
background-color: rgba(0,0,0, .6);
font-weight: bold;
color: white;
padding: 0px 4px;
white-space: nowrap;
}
Sin embargo, prueba añadir lo que te comento incorporando el !important para que le dé prioridad a este cambio, quedaría
#whatsapp-me {
float: right !important;
margin-top: -95px !important;
margin-right: 10px !important;
}
Si tienes caché en tu sitio web prueba borrarla y ver si se aplican los cambios.
Un Saludo
Lamentablemente sigue igual... borré caché y puse el important!
Hola Walter,
Prueba si al aplicarlo a la imagen se efectúan los cambios
#whatsapp-me img {
float: right !important;
margin-top: -95px !important;
margin-right: 10px !important;
}
Si no funciona debes ir probando dentro de tu código cuál lo está afectando, comentando las líneas que aplican cambios al botón de WhatsApp e ir probando.
Verifica y nos comentas como va todo
Un saludo
He logrado mover la imagen con este codigo
#whatsapp-me img {
margin-top: -395px !important;
margin-left: 745px !important;
}
Pero quiero que la imagen quede siempre en el mismo lugar (como sucede con el icono del email)
Si agrego
position: fixed !important;
La imagen desaparece...
Como lo podré solucionar?
Hola Walter,
Si agrego este código:
div#whatsapp-me {
position: fixed;
right: 13px;
bottom: 40px;
width: 50px;
height: 50px;
border-radius: 10%;
}
Se ve así:
Un saludo 🖐️
Hola Walter,
Enhorabuena has logrado añadir lo que necesitabas, es un placer siempre poder ayudarte.
No dudes en escribirnos si tienes cualquier otra consulta
Un Saludo 😊