Descuento 20% Diciembre
Plugin Optimización de Imágenes Gratuito para WordPress
Martes, 08 Marzo 2016 23:47

Contacto en WordPress ¡información siempre visible!

Escrito por 
CMS:  WordPress |  Versión:  4.4.x |  Nivel de dificultad:  Básico |  Tiempo estimado de lectura:  5 minutos


Contacto en WordPressSi quieres que los datos de contacto de tu empresa o tienda estén visibles y accesibles desde cualquier dispositivo tienes que leer este artículo donde te explico como tener datos de contacto en WordPress siempre visibles y con comportamiento 'responsive'.

Hace ya un tiempo que los temas de WordPress comenzaron a darle importancia a los datos de contacto y de redes sociales y diseñaron temas con formatos que destacan de alguna manera estos elementos, que casi siempre acaban ocupando la parte superior del sitio web.

Es cierto que las redes sociales hay muchas formas de mostrarlas para que se vean pero no perturben la navegación, pero cuando las prisas apremian, los conocimientos son un poco más ajustados, necesitamos de soluciones rápidas, que funcionen y que además sean elegantes.

Una cabecera de un sitio web WordPress sin ninguna funcionalidad de contacto adicional añadida luce más o menos así (naturalmente dependerá del tema utilizado).


Antes de instalar el plugin de la barra de información de contacto


El plugin

Vamos a darle uso al plugin Speed Contact Bar y convertir cualquier tema de WordPress que no disponga de este elemento de información de contacto, redes sociales y demás, de forma que luzca una barra que destaque por encima de otros elementos y permita que los datos estén siempre visibles.

Speed Contact Bar

Un plugin con una configuración bastante permisible para tener niveles de personalización altos, y con una simplicidad de uso pasmosa ¿no te lo crees?

Prácticamente toda la barra es personalizable:

  • Color de fondo opaco con un color hexadecimal establecido.
  • Color de fondo transparente.
  • Activar solo los iconos de redes sociales necesarios.
  • Establecer el tamaño de los iconos de redes sociales.
  • Color claro u oscuro para los iconos de redes sociales.
  • Apertura en la misma página o en página nueva de los enlaces.
  • Activar/desactivar sombra superior o inferior de la barra de direcciones.
  • Colocar la barra fija en la parte superior o inferior de la página.
  • Barra oculta al hacer scroll.
  • Oculta toda la barra a partir de determinado ancho de pantalla.
  • Altura de la barra en pixeles.
  • Margen vertical y horizontal de los contenidos de la barra.
  • Habilitar una línea de noticias estilo teletipo.
  • Establecer etiqueta HTML (H1, etc.) para teletipo.
  • Ocultar textos teletipo den pantallas pequeñas (móviles de pantalla pequeña).
  • Alineación del texto del teletipo.
  • Tamaño de la fuente del texto del teletipo.
  • Color del texto y del enlace del texto del teletipo.

El diseño de la barra de contacto y redes sociales es "responsive" y por lo tanto está adaptado para comportarse de forma correcta en teléfonos móviles y tablets.

Los iconos de redes sociales solo se muestran si añades la url de la red social que corresponda, de esa forma solo se activan los que realmente necesitas.


Vista de la barra en dispositivos móviles o tablets en vertical

Vista de la barra en dispositivos móviles o tablets en vertical.

Redes Sociales soportadas:

  • Facebook
  • Flickr
  • Google Plus
  • IMDb
  • Instagram
  • LinkedIn
  • Pinterest
  • SlideShare
  • SoundCloud
  • Tumblr
  • Twitter
  • Vimeo
  • Xing
  • Yelp
  • Youtube

Datos de contacto configurables:

  • Número de Teléfono (fijo)
  • Número de teléfono (móvil)
  • Dirección de correo electrónico.

Información adicional que puedes activar:

  • Línea de noticias (teletipo) con enlace en pestaña nueva.

El correo electrónico, al hacer clic sobre él, abrirá el cliente de correo en el escritorio del usuario o en su dispositivo móvil, listo para que se redacte el contenido y se envíe en pocos segundos/minutos.

Desde dispositivos móviles y tablets (con 3G/4G) al hacer clic sobre ellos, se accede directamente a la funcionalidad de llamada del dispositivo listo para establecer una llamada.

Instalado y configurado el plugin según tus necesidades, ahora tu página podría lucir más o menos así con este plugin, ya sea arriba o abajo la barra, según cómo la hayas configurado.


Después de instalar el plugin de la barra de información de contacto

Si ya tenias otra barra (posiblemente un widget) que mostraba información similar o más reducida, es hora de deshabilitarlo y pasar a utilizar Speed Contact Bar.


Para los que no tienen tiempo de estar lidiando con plugins de mayor calado, o creando widgets personalizados que se visualicen en determinada área del tema, este plugin ofrece una solución rápida y muy versátil para mostrar datos de contacto y de redes sociales.


¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop



Luis Méndez Alejo

Miembro del equipo técnico de Webempresa.
Coordinador de contenidos en el Blog y en Youtube.
Google+


Plugin Optimización de Imágenes Gratuito para WordPress