Cómo Hacer Una Página

Hacer una Web Profesional con Wordpress

  • Mi Cuenta
  • Contacto
  • Curso GRATUITO de WordPress
  • Suscribirse (10€/mes)
Estás aquí: Inicio / CSS / Como añadir botón de búsqueda en el buscador personalizado de Listable

Como añadir botón de búsqueda en el buscador personalizado de Listable

abril 26, 2018 Por Oscar martin Deja un comentario

Estamos haciendo una serie de tutoriales para crear un buscador personalizado en listable. Cómo ya sabrás si has seguido los anteriores tutoriales nos estamos apoyando en el plugin FacetWP para hacerlo.

En este tutorial hemos visto como crearlo pero ahora estamos añadiendo el botón de búsqueda, para que tenga el mismo comportamiento que el buscador de la home de Listable.

Para ver el curso tienes que ser Miembro Premium. Si no estás suscrito a la Zona Premium te puedes dar de alta por 10€/mes aquí

44 Añadir botón buscar en el buscador personalizado

boton search listable

En el tutorial podéis ver que es muy fácil añadir el botón y como además con un pequeño código podemos cambiar el comportamiento del buscador para que no auto refresque automáticamente.

En el siguiente vídeo lo que vamos a hacer es darle estilo al botón.

Vamos a cambiar el color y vamos a añadir el icono para que sea más atractivo

45 Dar formato con CSS al botón buscar

css boton search facetwp listable

Gracias a las clases que ya existen en la plantilla vemos lo fácil que es dar estilo al botón.

Lo que no es tan fácil es descubrir como habían añadido el icono en la plantilla, pero una vez que vemos cómo está hecho es muy fácil replicarlo.

Un poco de CSS nos puede salvar la vida, además, no hay un sólo camino para hacer las cosas.

Espero que os haya gustado 😉

Publicado en: CSS, Listable Etiquetado como: FacetWP

Acerca de Oscar martin

Me llamo Óscar y me dedico al Marketing Online. Me gano la vida gracias a internet y a herramientas como Wordpress. ¿Te puedo ayudar? Contáctame

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Carrito

Categorías

Contenido Premium

¿Quieres Aprender WordPress y Ganar dinero? Cópiame

¿Necesitas Ayuda?

  • Contacto
  • Blog

Más Información

  • Condiciones de Uso
  • Condiciones generales de venta
  • Aviso Legal
  • Pólitica de Privacidad
  • Política de cookies

Buscador

Funciono con el Theme Genesis · Acceder

Este sitio web instalará en tu navegador cookies analíticas y publicitarias propias y de terceros si continúas navegando.
Encontrará más información en nuestra Política de Cookies...Configuración de CookiesAceptar
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Básicamente el blog no funcionará bien si no están activas.
Estas cookies son:
- Comprobación de inicio de sesión.
- Cookies de seguridad imprescindibles.
- Saber si ya has aprobado/rechazado las cookies.
Non-necessary
Esta web utiliza las siguientes cookies adicionales:
- Mautic: Recordar si ya estás suscrito al boletín de noticias.
- Google Analytics: un servicio de analítica web desarrollada por Google, que permite la medición y análisis de la navegación en las páginas web.
GUARDAR Y ACEPTAR