Avisos
Vaciar todo

[Resuelto] Texto junto a boton flotante  

 
Walter
 Walter
Reputable Member

Hola como estan?

Me gustaria agregar un texto que vaya pegado al boton flotante (el sobre azul que aparece en el margen inferior derecho) que agregué mediante código, se podrá hacer?

Sería un texto sobre un rectángulo de fondo que scrolee junto a la imagen que uso, se puede hacer?

Les dejo el codigo php y css que estoy usando, gracias!

function bps_call_button () { ?>
<a href="https://estudiowls.com.ar/contacto">
<div id="contact-me">
<img src="https://estudiowls.com.ar/wp-content/uploads/2021/01/contacto3.png">
</div>
</a>
<?php
}
add_action('wp_footer', 'bps_call_button');

 

#contact-me {
position:fixed;
right:30px;
bottom:60px;
width:70px;
height:70px;
background-color:
padding:10px;
border-radius:10%;
}

 

 

Contenido solo visible a usuarios registrados

Respondido : 22/01/2021 11:41 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Walter,

Disculpa si no logro comprender bien la consulta? que deseas añadir nuevamente ya que veo actualmente esta el botón con el texto adicional

Screenshot(5)

Si es posible indícanos mas detalles de que es lo que necesitas añadir, de esta forma podemos ayudarte con mayor detalle

Un Saludo

Respondido : 22/01/2021 1:10 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Walter
 Walter
Reputable Member

@karen Hola Karen, disculpa, estaba haciendo pruebas. Lo que hice fue subir un archivo de imagen conteniendo ese texto pero no queda bien.

Se puede agregar el texto pegado a la imagen? Ya volvi a poner el icono solamente sin la imagen pegada del texto

Respondido : 22/01/2021 1:19 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Walter,

Entiendo, en este caso podrías añadir una etiqueta p sobre la imagen que tienes añadida y dentro de esto el texto que deseas, luego podrás configurar un poco los estilos para que el texto se posicione al lado del botón.

Por ejemplo he realizado una prueba con el código que nos compartes y tu imágenes usando el siguiente código en el function.php

function bps_call_button () { ?>
<a href="https://estudiowls.com.ar/contacto">
<div id="contact-me">
<p>Contacto</p>
<img src="http://practica-cp5020.wordpresstemporal.com/we/wp-content/uploads/2021/01/contacto3.png">
</div>
</a>
<?php
}
add_action('wp_footer', 'bps_call_button');

Luego en el apartado Apariencia -> Personalizar -> CSS Adicional agregar este otro código


#contact-me p {
position: absolute;
margin-left: -85px;
margin-top: 20px;
font-weight: bold;
}

El resultado debe ser por ejemplo

Screenshot(5)

Verifica si con ello logras añadir lo que deseas

Un Saludo

 

Respondido : 22/01/2021 1:35 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Walter
 Walter
Reputable Member

@karen Gracias Karen!

Funciona muy bien. Solo me faltaría agregar por dabajo del texto algo asi como un rectangulo oscuro con algo de opacidad para que el texto esté sobre el y no se confunda con el fondo de la web. Se podria agregar?

Respondido : 22/01/2021 2:12 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Walter,

No veo el cambio aplicado a tu sitio, sin embargo debe ser algo así:

div#contact-me p {
position: absolute;
margin-left: -85px;
margin-top: 20px;
background-color: rgba(0,0,0, .5);
font-weight: bold;
color: white;
padding: 0px 4px;
}

Aplícalos y nos comentas, un saludo 🖐️ 

Respondido : 22/01/2021 2:22 pm

Cursos Gratuitos WordPress

Walter
 Walter
Reputable Member

@argenis @karen Muchas gracias a ambos, quedó 1000 puntos!

Respondido : 22/01/2021 3:41 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Walter,

Nos alegra mucho que lograses lo que buscabas 😀, recuerda como siempre que si tienes alguna otra duda puedes crear un nuevo tema y con todo gusto lo atenderemos.

Un saludo 🤓 🖐️ 

Respondido : 22/01/2021 3:44 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación