¿Cuál es la mejor manera de crear un sitio web de directorio con Kadence?
Crear un sitio web de directorio con Kadence implica el uso del tema Kadence, Kadence Blocks y el mejor plugin de directorio para Kadence.
El tema Kadence es un tema de WordPress versátil y altamente personalizable que proporciona una base sólida para tu sitio web de directorio.
Kadence Blocks, por su parte, es una biblioteca de bloques de Gutenberg que te permite crear diseños personalizados y añadir diversas funcionalidades a tu sitio web.
Por último, el plugin GeoDirectory es, con diferencia, el mejor plugin de directorio para el tema Kadence; una potente herramienta que te permite añadir funciones de directorio a tu sitio web, como listados de negocios, reseñas de usuarios y capacidades de búsqueda avanzada.
Juntas, estas herramientas ofrecen una solución integral para crear un sitio web de directorio robusto y repleto de funciones.
Sitio web de directorio con Kadence usando únicamente un tema gratuito y plugins gratuitos
En este tutorial, te guiaremos a través del proceso de creación de un sitio web de directorio completo utilizando recursos gratuitos de WordPress, como el tema gratuito Kadence, el plugin Kadence Blocks y el plugin gratuito GeoDirectory.
El sitio web de directorio contará con:
- Listados ilimitados con campos personalizados ilimitados.
- Funcionalidad de búsqueda por proximidad.
- Reseñas de usuarios.
- Un formulario de envío desde el front-end, que permite a los usuarios enviar, editar y/o eliminar sus listados.
Asumimos que ya tienes una instalación de WordPress con un proveedor de alojamiento. Para este tutorial, crearemos un directorio de negocios para la ciudad de Filadelfia.
Esto es lo que cubriremos en este tutorial:
- Instalar y configurar el tema y los plugins
- Asistente de instalación de GeoDirectory
- Diseñar el sitio web de directorio con Kadence
- El diseño de la página de listados y búsqueda
- El diseño de la página de listado individual
- Añadir funciones premium a tu sitio web de directorio con Kadence
- Plantillas de sitio web de directorio de Kadence Blocks
Al final de este tutorial, tendrás un sitio web de directorio completamente funcional y listo para publicar. ¡Comencemos!
Instalar y configurar el tema y los plugins de Kadence
1. Instalar el tema Kadence
Para empezar, comenzaremos instalando un tema. Para los fines de este tutorial, utilizaremos el tema Kadence.
Ve a Apariencia >> Temas
Selecciona Añadir nuevo, Instalar, y Activar el tema Hello.
2. Instalar el plugin Kadence Blocks
Ahora necesitarás instalar el plugin Kadence Blocksì.
Ve a Plugins >> Añadir nuevo.
Busca Kadence. Instálalo y actívalo.
3. Instalar GeoDirectory
Por último, pero no menos importante, necesitas instalar GeoDirectory.
Ve a Plugins >> Añadir nuevo, busca GeoDirectory. Instálalo y actívalo, y con eso habremos terminado de instalar los plugins por ahora.
- Crear o seleccionar un proyecto existente.
- Activar las claves.
- Obtener la clave.
- Activar una cuenta de facturación.
- Restringir la clave API (para que solo pueda usarse desde la URL de tu sitio web)
4. Asistente de instalación de GeoDirectory
Para GeoDirectory, deberás completar el asistente de configuración para configurar la clave API de Google Maps e importar algunos listados de ejemplo.
Elegir el sistema de mapas (Google Maps u OpenStreetMap)
Puedes elegir entre dos sistemas de mapas en el primer paso del asistente: Google Maps y Open Street Maps (que no requiere una clave API).
En este tutorial, seleccionamos Google Maps.
Haz clic en el botón Generar clave y sigue los pasos de este documento para generar una clave API válida.
Los pasos esenciales son:
Sobre el punto cuatro: es un requisito. Sin embargo, solo se te cobra si superas el límite, que es de $200/mes.
Este crédito gratuito es más que suficiente para el 99% de los directorios.
Configurar la ciudad predeterminada
A continuación, deberás establecer la ubicación predeterminada. Esta es la ciudad para la que se crea el directorio. Dejaremos la ciudad predeterminada sin cambios.
GeoDirectory utiliza Philadelphia como ciudad predeterminada.
Puedes usar cualquier ubicación que necesites.
Si necesitas agregar listados a más de una ciudad, necesitarás el complemento Location Manager.
Añadir funciones adicionales
En este paso, instalaremos nuestro plugin UsersWP, un plugin de registro de usuarios que permite a los usuarios registrarse e iniciar sesión en tu sitio web.
Esto es necesario para permitir que los usuarios añadan y editen sus listados. También creará perfiles de usuario donde podrán encontrar sus listados, reseñas y demás.
También instalaremos Ninja Forms para que todos los listados tengan un formulario de contacto que envíe correos electrónicos directamente a los propietarios del listado.
AyeCode Connect no es obligatorio para este tutorial. Es necesario principalmente si deseas añadir complementos premium de GeoDirectory e instalarlos directamente desde el Panel de WordPress.
Añadir datos de prueba
El último paso para completar el asistente de instalación es añadir algunos listados de prueba. Esto también añadirá categorías de listados que podrás editar más adelante según tus necesidades.
No añadirás widgets de barra lateral ni elementos de menú ahora mismo, ya que lo haremos más adelante.
Diseñar el sitio web de directorio con Kadence
Ahora que hemos instalado el tema y los plugins y realizado la configuración preliminar de GeoDirectory, podemos comenzar a diseñar nuestro sitio web de directorio con el conjunto de herramientas Kadence.
1. Diseño de la página de inicio del directorio con Kadence
Puedes crear una nueva página o usar una que WordPress crea por defecto, como la Página de muestra.
Ve a Páginas, edita la página de muestra y renómbrala como Inicio, o crea una nueva página para esto.
Ahora haz clic en el icono de configuración de página en la sección superior derecha de la pantalla.
Aplica los siguientes cambios:
- Título de página: Deshabilitar
- Diseño de página: Ancho completo
- Estilo de contenido: Sin recuadro
Deja el resto sin cambios. A continuación, ve a Apariencia > Personalizar > Ajustes de la página de inicio y selecciona la página anterior como tu página de inicio.
Seleccionaremos la página de entradas más adelante.
Antes de crear el contenido de la página de inicio, debemos trabajar en el encabezado.
Volveremos a diseñar el contenido de la página de inicio después de eso.
El logotipo
Lo primero es lo primero: necesitaremos un logotipo para nuestro sitio web.
No necesitas contratar a un diseñador para crear la primera versión de tu logotipo.
Uno de los errores más grandes que puedes cometer al iniciar un nuevo directorio es invertir demasiado tiempo y dinero antes de probar el encaje del producto en el mercado.
Puedes diseñar un logotipo en cinco minutos con una aplicación como Canva, que es económica y sorprendentemente buena.
Para un MVP (producto mínimo viable), un logotipo diseñado con Canva será más que suficiente.
Hay varias plantillas de logotipos para elegir, y no importa si tu logotipo inicial no es tan perfecto y original como crees que debería ser.
Si tu proyecto cobra impulso, siempre puedes invertir en mejorarlo o cambiarlo radicalmente más adelante.
Un logotipo mediocre nunca es la causa principal del fracaso de un proyecto.
Después de diseñar tu logotipo, ve a Apariencia > Personalizar > Encabezado, haz clic en Logotipo > Seleccionar logotipo, y sube tu archivo PNG. Omite el recorte (o recorta la imagen según sea necesario), en Diseño de logotipo selecciona la opción Logotipo y haz clic en publicar.
El menú de navegación
Después de crear y añadir el logotipo, ve a Apariencia > Menús, y crea tu menú.
Añade los enlaces necesarios (de la columna izquierda a la columna derecha) y guarda. En la sección Ajustes del menú > Ubicación de visualización, puedes marcar la opción
Si lo deseas, puedes hacer que el mismo menú aparezca en el pie de página o crear otro menú para que aparezca allí.
En este ejemplo, solo tendremos el menú de navegación del encabezado.
Agregamos ocho enlaces:
- Inicio
- Acerca de
- Blog
- Lugares
- Añadir lugares
- Perfil
- Iniciar sesión
- Cerrar sesión
El enlace de inicio de sesión (de los endpoints de UsersWP) solo aparecerá para los usuarios que no han iniciado sesión, mientras que los enlaces de cierre de sesión y perfil solo aparecerán para los usuarios que han iniciado sesión.
El contenido
Ahora puedes empezar a diseñar la página de inicio. Primero, deberás añadir una imagen hero debajo del encabezado.
Para ello, ve a Páginas > Inicio y haz clic en Editar.
Si usaste la página de muestra, elimina el texto. Si creaste una página nueva, añade un nuevo bloque de diseño de filas.
Escribe /Row donde dice Escribe / para elegir un bloque y selecciona un bloque Kadence Row Layout. A continuación, selecciona la fila simple (1.ª opción)
En la opción Ancho máximo del contenido, añade 800.
A continuación, haz clic en Estilo desde las pestañas superiores del bloque. Haz clic en Seleccionar imagen en la opción Imagen de fondo
Para la sección hero, usaremos esta imagen gratuita de Filadelfia de Pexels.com (Gracias, @Kelly).
Sube tu imagen, selecciona la opción Fija para el anclaje de la imagen de fondo y actualiza.
Ahora solo puedes ver una franja de la imagen, pero los siguientes pasos harán que aparezca como se necesita.
La imagen necesita una superposición; de lo contrario, el texto encima no tendrá suficiente contraste y será difícil de leer.
Selecciona la configuración de superposición de fondo, establece la opacidad en 45 y el color en 000000 (negro).
Ahora haz clic en la pestaña Avanzado y añadamos algo de relleno. Concretamente, 4 em de relleno superior e inferior. Para ello, haz clic en el icono de tamaño personalizado, añade 4 en los campos de entrada superior e inferior y selecciona EM como unidad.
Ahora que hemos oscurecido la imagen hero, podemos añadir texto.
Haz clic en el centro de la imagen (se puede ver un botón con el signo más apenas visible). Esto te permitirá seleccionar un nuevo bloque. Añade un bloque de sección.
Vuelve a hacer clic en el centro de la imagen y añade un bloque de texto (Adv).
Mi directorio de Filadelfia
En la sección General del bloque, selecciona H1 como etiqueta HTML. Alineación del texto: centrado.
Haz clic en la pestaña Estilo y selecciona el color FFFFFF (blanco).
A continuación, en la sección TAMAÑO DE FUENTE, haz clic en el icono de tamaño personalizado y establece 40 como tamaño de fuente.
Por último, en Configuración tipográfica avanzada > PESO DE FUENTE, selecciona Negrita 700.
En este punto, podemos añadir el formulario de búsqueda a la sección hero de nuestro sitio de directorio Kadence.
Haz clic en el botón + en la esquina inferior derecha de la sección del título para añadir una nueva sección.
Busca y selecciona otro bloque de sección, haz clic en el botón más en el centro de la nueva sección y añade un bloque GD > Search.
En este punto, hemos completado la sección hero de la página de inicio y así es como se ve.
Es hora de agregar algunas secciones requeridas más en la página de inicio; ahora agregaré una sección de listados recientes.
Debajo de la sección hero, agrega un Row Layout bloque haciendo clic en el ícono de más y agrega un Section bloque dentro de él.
Ahora agregaremos un bloque de encabezado y configuraremos la Tipografía en
Tamaño: Grande
Mayúsculas/minúsculas: Ab
Texto: Recent Business Listings
Para mostrar los listados más recientes, agreguemos el bloque GD > Listings debajo con la siguiente configuración.
Ordenar por: Más recientes
Diseño: Vista en cuadrícula (4 columnas)
Ahora agreguemos un Row Layout bloque haciendo clic en el ícono de más y agregando un Section bloque dentro de él.
En el Typography ajuste del bloque de encabezado
Tamaño: Grande
Mayúsculas/minúsculas: Ab
Texto: Explora los más populares en tu ciudad
Ahora agrega el bloque GD>Category dentro de él para mostrar todas las categorías.
En el estilo agrega la siguiente configuración
Elementos por fila: 4
Tipo de diseño: Fondo de imagen
Ahora agregaremos una sección más para Cómo funciona. agreguemos un Row Layout bloque haciendo clic en el ícono de más y seleccionando el diseño de 4 columnas.
Ahora agrega el bloque Info box bloque en todos los contenedores.
En el ancho máximo del contenido: heredar el ancho máximo del tema.
Ahora configuraremos el ícono para cada contenedor. Haz clic en cualquier Info Box y en la configuración del bloque Estilo > Configuración de medios
Tipo de medio: Ícono
Ahora configuremos el color de los íconos
Color del ícono: #FFFFFF
Fondo del icono: #FF6616
Relleno de medios: 20px
Radio de borde del icono: 15px
Ahora vamos a añadir un Row Layout
añadiremos un CTA dentro de él.
Añade un encabezado y en el Typography ajuste del bloque de encabezado
Tamaño: Grande
Mayúsculas/minúsculas: Ab
añadiremos el bloque de botón único y, dentro de la configuración de estilo de este bloque, establece
Color: #FFFFF
Color de fondo: #FF6A00
Radio de borde: 10px
Ahora configuraremos el pie de página.
Ve a Apariencia > Personalizar > Pie de página
Añadiremos algunos widgets de menú en el pie de página y Kadence incluye un bloque de redes sociales. Puedes añadirlo en la parte superior de la sección del pie de página.
Al hacer clic en los iconos de configuración del widget de redes sociales, se abrirá un panel donde podrás establecer las opciones sociales.
Felicitaciones, tu página de inicio ya está lista.
Diseño de la página de listados y búsqueda del sitio de directorio con Kadence
Ahora necesitamos diseñar dos páginas que son esenciales para cualquier directorio.
La página de listados (archivo general, categorías, etiquetas) y la página de resultados de búsqueda.
GeoDirectory las crea por defecto con un diseño general. En este tutorial, personalizaremos un poco el diseño de estas páginas.
Las páginas de listados y búsqueda son casi idénticas, por lo que la creamos una vez y simplemente copiamos el diseño en la otra página.
He decidido que el diseño de la página de listados tendrá los listados a la izquierda y, a la derecha, un mapa fijo que muestra la ubicación exacta de los listados.
Esto es muy sencillo.
Página de listados
Ve a Geodirectory > Configuración > General > Páginas > Haz clic en editar la plantilla de página de archivo GD
Elimina todo el contenido de esta GD Archive plantilla de página.
Añade un diseño de fila con
Hazlo en una proporción de 60 – 40 arrastrando el punto marcado en la imagen de abajo.
Ahora en la sección izquierda añadiremos todos los bloques necesarios para la GD Archive página. Por ejemplo, GD > Loop Action, GD > Loop, GD > Loop Pagination, y GD > Search
En la columna derecha, arrastraremos el GD > Map bloque.
mantendremos toda la configuración predeterminada para el GD > Map. Vamos a darle algo de altura; he decidido darle una altura de 100vh.
En el contenedor de fila principal del bloque de mapa, añadiremos una clase CSS kt-inside-inner-col
y añadiremos el siguiente CSS en el personalizador de tema en Apariencia > Personalizar > CSS adicional
body.archive .kt-inside-inner-col { position: sticky; top: 0; }
Finalmente, haremos que la página sea de ancho completo haciendo clic en el icono de Kadence en la parte superior derecha y estableciendo el Diseño de página en Ancho completo.
y también estableceremos el siguiente estilo para el Diseño de fila principal.
Ancho máximo: 100%
Margen entre columnas: SW
Margen entre filas: Ninguna
Ve a Geodirectory > Ajustes > General > Páginas > Haz clic en editar la plantilla de la página GD Search
Elimina todo el contenido de esta GD Search plantilla de página.
Copia todo el contenido de la página GD Archive y pégalo en la página GD Search.
Ahora nuestra página GD Search y Archive está lista.
Otra opción para crear fácilmente esta plantilla es usar una plantilla de página de ancho completo y el GD > Simple Archive bloque.
Diseño de la página de listado individual del sitio web de directorio con Kadence
Para editar y personalizar la página GD Detail, puedes ir a Geodirectory > Ajustes > General > Páginas > Haz clic en editar la plantilla de la página GD Detail.
En esta plantilla, ya encontrarás el contenido predeterminado generado por Geodirectory.
eliminaremos todo este contenido predeterminado y añadiremos un nuevo Row Layout con: Ancho del contenido: 100%
Añade una clase (single-header-image) a este diseño de fila desde Avanzado > Clase CSS adicional
Ahora añadiremos un Row Layout contenedor de dos columnas.
En el contenedor izquierdo, añadiremos el bloque GD > Post Badge para definir algunas insignias y en el contenedor derecho añadiremos el GD > Post Favorite bloque.
Dentro del Diseño de fila principal de este contenedor, añadiremos una clase personalizada(header-position-feature).
Debajo de esto, añadiremos un slider de imágenes; para ello, arrastraremos el bloque GD > Post Image bloque.
seleccionaremos los siguientes ajustes
Tipo de salida: Slider
Inicio automático: Activar
Animación: Diapositiva
Ahora añadiremos un Row Layout Contenedor.
Dentro del contenedor izquierdo, añadiremos los bloques necesarios para la página de detalle de GD, que incluye GD > Single Taxonomies, GD > Single Tabs, GD > Single Next Prev.
Con los siguientes ajustes
Ancho máximo: 1200px
Margen entre columnas: SW
Margen entre filas: Ninguna
En el contenedor derecho, utilizaremos el GD > Output Location y GD > Author Actions bloque.
añadiremos algo de diseño extra al diseño de la página de detalle de GD con el siguiente CSS.
Añade el siguiente CSS en Apariencia > Personalizar > CSS adicional
.single-header-image { max-height: 400px !important; overflow: hidden; } .geodir-page-single .entry-header { display: none; } .geodir-page-single .content-area { margin: 0px; } .geodir-page-single .content-container { padding: 0px; max-width: 100%; } @media (min-width: 576px) { .bsui .row.row-cols-md-0 .card .embed-responsive { max-width: 100% !important; display: inline-block; } } .geodir-page-single .entry-content-wrap { padding: 0px !important; } .geodir-page-single .entry-content { margin-top: 0px; } .single-header-image { max-height: 400px !important; overflow: hidden; } .single-feature { padding: 10px !important; } .header-position-feature { position: absolute !important; width: 100%; } .kb-row-layout-id15_c06314-2b > .kt-row-column-wrap { z-index: 1; position: relative; padding:0px !important; }
Ahora nuestra página de detalle de GD está lista.
Añadir funciones premium a tu sitio web de directorio con Kadence
Si lo deseas, ahora puedes añadir funciones premium a tu directorio, como:
- Listados de pago: con el GeoDirectory Listing Price Manager add-on, puedes establecer precios para el envío de listados. Para cada nivel de precio, puedes activar/desactivar funciones como: restringir el número de imágenes en los listados gratuitos mientras permites más imágenes en los de pago. Permitir más o menos etiquetas y categorías. Activar o desactivar campos personalizados específicos. Enviar descripciones más largas o más cortas.
- Reclamar Listados: Esta es una función fundamental para un directorio en el que el administrador crea la base de datos e invita a los propietarios de negocios a tomar el control de sus listados gratuitos. El proceso de reclamación de un listado puede incluir la obligación de actualizar a un listado de pago para asumir la propiedad del listado.
- Publicidad: vender anuncios es otra forma de monetizar un directorio en línea. Si tienes mucho tráfico, puedes utilizar redes de publicidad. De lo contrario, puedes vender anuncios directamente, permitiendo a las empresas añadir banners en áreas específicas de tu sitio web o haciendo que los listados aparezcan como anuncios, por ejemplo, en la parte superior de los resultados de búsqueda orgánicos.
Estos son solo tres ejemplos. Sin embargo, un sitio web de directorio ofrece muchas formas de ganar dinero en línea.
Puedes crear un mercado global de artículos artesanales, vender entradas para eventos o vender cupones de descuento.
Navega por el proceso de creación con facilidad usando esta guía: Una guía paso a paso para crear un sitio web de directorio.
Las posibilidades son ilimitadas.
Crea un sitio web de directorio con Kadence Blocks
El tema Kadence ofrece muchos bloques extendidos. Puedes encontrar estos bloques dentro de la lista de Kadence Blocks y también puedes encontrarlos en las listas de bloques de Gutenberg para utilizarlos.
Dentro de cada página, tienes un botón de Biblioteca de diseños en la parte superior. Puedes hacer clic en él y utilizar todos los diseños de bloques predefinidos desde allí.
Plantillas de sitio web de directorio de Kadence Blocks
GeoDirectory tiene muchas demos predefinidas disponibles con el tema Kadence. Puedes encontrar todas estas hermosas demos aquí.
Puedes importar estas plantillas a tu sitio web. Necesitas el plugin Ayecode connects Descarga y activa este plugin si aún no está instalado.
Después de activar este plugin, debes conectar tu membresía.
Puedes importar la demo haciendo clic en el botón de vista junto a la demo de Kadence.
Algunos ejemplos son el Real Estate Directory Theme, el Restaurant Directory Theme, el Job Board Theme y el Yoga Salon Directory Theme diseños para el tema Kadence.