Aquí tienes una guía paso a paso para crear un sitio web de Directorio usando el Blocksy tema y el plugin Stackable – Page Builder Gutenberg Blocks:
- Instala el tema Blocksy
- Instala el plugin Stackable – Page Builder Gutenberg Blocks
- Instalar y configurar GeoDirectory
- Diseña el sitio web de directorio usando el plugin Blocksy tema y el Stackable – Page Builder Gutenberg Blocks plugin
El tema Blocksy, combinado con el plugin GeoDirectory y el plugin Stackable – Page Builder Gutenberg Blocks, crea una plataforma versátil y avanzada para construir un directorio en línea sofisticado.
Esta integración permite a los usuarios incorporar fácilmente funciones basadas en ubicación, personalizar opciones de diseño e introducir bloques de contenido dinámico, garantizando una interfaz intuitiva y atractiva.
Este sistema integrado permite a los desarrolladores y diseñadores web crear un sitio web de directorio de primer nivel adaptado a las necesidades de industrias específicas o a los requerimientos de comunidades más amplias.
Exploremos los detalles de cómo lograrlo.
En este tutorial:
Instalación del tema y los plugins.
1. Instala el Blocksy Tema
Necesitamos instalar un tema y, para este tutorial, instalarás el Blocksy Tema.
Ve a Apariencia >> Temas
Selecciona Añadir nuevo, Instalar, y Activar el Blocksy Tema.
2. Instalar el Stackable – Page Builder Gutenberg Blocks plugin
El plugin Gutenberg predeterminado no es suficiente para dar estilo a una plantilla, por lo que instalaremos el Stackable – Page Builder Gutenberg Blocks plugin.
Este plugin proporciona bloques personalizados que mejoran los predeterminados y te ayudarán a diseñar las plantillas de página.
Ve a Plugins >> Añadir nuevo.
Busca Stackable – Page Builder Gutenberg Blocks. Instálalo y actívalo.
Puedes omitir todos los pasos del Asistente de configuración.
3. Instalar GeoDirectory
Por último, necesitas instalar GeoDirectory.
Ve a Plugins >> Añadir nuevo, busca GeoDirectory. Por favor, instálalo y actívalo, y habremos terminado de instalar los plugins.
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 OpenStreetMap.
En caso de que desees seleccionar Google Maps, sigue estos pasos adicionales.
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:
- Activar las claves.
- Crear o seleccionar un proyecto existente.
- 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)
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
Después de eso, configurarás la ubicación predeterminada. Esta es la ciudad para la que se crea el directorio.
Estableceremos Philadelphia como la 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 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ña el Blocksy Sitio web de directorio
Ahora que hemos instalado los plugins y realizado la configuración preliminar de GeoDirectory, podemos comenzar a diseñar nuestro sitio web de directorio con el Blocksy tema y el plugin Stackable – Page Builder Gutenberg Blocks.
1. Diseña el logotipo del sitio web
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 Cambiar logo enlace 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.
2. Blocksy Diseño de la página de inicio del directorio
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.
A continuación, ve a Apariencia > Personalizar > Ajustes de la página de inicio y selecciona tu página de inicio.
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ónPrincipal».
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 siete enlaces de navegación principales y algunos enlaces de subnavegación:
- Inicio
- Acerca de
- Blog
- Lugares y agregar lugares
- Perfil
- Iniciar sesión
- Cerrar sesión
El enlace de inicio de sesión (desde los Endpoints de UsersWP) solo aparecerá para los usuarios que no han iniciado sesión, mientras que los enlaces de cerrar sesión, cuenta y perfil solo aparecerán para los usuarios que sí han iniciado sesión.
Establece la configuración del menú en Fuente: Default Font / 14px / Bold 700
El contenido
Voy a comenzar a construir esta página desde cero usando el Stackable – Page Builder Gutenberg Blocks plugin.
Necesitamos un encabezado hero en la página de inicio; para eso, añadamos un bloque de columna proporcionado por el Stackable – Page Builder Gutenberg Blocks plugin.
En la configuración de diseño de columna
Ancho del bloque: Align Full
Ancho del contenido: Align Full
Ancho máximo del contenido: 1200px
A continuación, verifica la configuración del bloque y establece la imagen de fondo.
Para la sección hero, necesitaremos una imagen, y descargaremos una imagen gratuita de Pexels.com (Gracias, @rachel-claire).
Ahora añadamos un bloque de encabezado sobre la imagen con
Contenido: Find The Best Restaurant in Philadelphia
Etiqueta HTML del título: H1
Tamaño: 48
Color del texto: #000000
Ahora también añadiremos el GD > Search bloque debajo de él.
Ahora añadamos una columna vacía más con un relleno de 50 px en la parte superior e inferior.
arrastraremos el GD > Categories bloque dentro de ella para mostrar la lista de categorías.
Ahora añadamos un contenedor vacío más con la siguiente configuración.
Ancho del bloque: Align Full
Ancho del contenido: Align Full
Ancho máximo del contenido: 1200px
Color: #00000
Ahora, procedamos a añadir la tercera sección a nuestro sitio web. La llamaremosListado de negocios recientes“.
Añade un GD > Listing bloque haciendo clic en el icono de más y luego accediendo a la configuración del bloque. Asegúrate de activar el Show Advanced Settings opción.
En el bloque Estilo pestaña, actualiza el Diseño: Grid View (Four Columns).
Cambia el número de entradas a mostrar: 8 y asegúrate de marcar el Activar filtro de ubicación opción y establece el Ordenar por: Más reciente.
Ahora añadamos un contenedor vacío más con la siguiente configuración.
Ancho del bloque: Align Full
Ancho del contenido: Align Full
Añade el GD > Map bloque y mantén la configuración en
Ancho: 100%
Altura: 450px
Por último, añadiremos un CTA. Usaremos una de las plantillas predefinidas
Asegúrate de usar la siguiente configuración
Ancho del bloque: Align Full
Ancho del contenido: Align Full
¡Felicitaciones! Tu página de inicio está completada.
3. Blocksy Diseño de la página de listados y búsqueda del sitio de directorio
Página de listados
Ahora necesitas 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.
Decidimos que el diseño de la página de listados tendría los listados a la izquierda y, a la derecha, un mapa fijo que mostraría la ubicación exacta de los listados.
Esto es muy sencillo.
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ñadamos una columna vacía con la siguiente configuración
Ancho del bloque: Align Full
Ancho del contenido: Align Full
Ancho máximo del contenido: 1200px
Color: #00000
Relleno: 30px
Añadamos el GD > post title shortcode en él.
Ahora, añade un Columna bloque con un diseño 50:50.
Ahora en el contenedor izquierdo, arrastraremos los widgets relacionados con la página de archivo de GD como GD > Loop Action, GD > Loop, GD > Loop Pagination, y GD > Search en la parte superior para que el usuario pueda buscar desde la página de archivo.
En la columna derecha, arrastra el GD > Map block, y dejaremos todos los ajustes en su configuración predeterminada. Sin embargo, estableceremos el alto del bloque GD > Map en 100vh.
Para darle el toque final, añadiremos el siguiente CSS en el personalizador del tema desde Apariencia => Personalizar => Add CSS
.geodir-archive .gd-archive-left-container{ overflow-Y: scroll; max-height: 100%; height:100vh; padding-right:15px; } .breakdance .bde-column-111-108.bde-column{ overflow:hidden; }
Tras esto, la página de Archivo de Listados ya está lista.
Para la página de búsqueda, repetimos el mismo proceso.
Página de búsqueda
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.
Por último, necesitarás este CSS para que la página de búsqueda ocupe el ancho completo.
.geodir-page-search #main article { max-width: 100%; }
Así que ahora nuestras páginas GD Search y Archive están listas.
4. Blocksy Diseño de la página de listado individual del sitio web de directorio
Lo primero que haremos es desactivar el título predeterminado desde Apariencia > Personalizar > Lugares > Lugar individual y desactivar el título tal como se indica a continuación.
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 bloque de columnas.
Primero, añadamos un slider de imágenes en la parte superior de la página de Detalles del listado.
arrastraremos el GD > Post Image bloque en este contenedor con los siguientes ajustes
Límite de imágenes: 10
Límite de visualización: 3
Tipo de salida: Slider
Inicio automático: Activar
Ahora añadiremos un bloque de Sección debajo con un diseño 70/20.
Ahora añadamos todos los GD Detail shortcodes de página requeridos en la columna izquierda uno por uno.
Que incluye GD > Post Title, GD > Single Taxonomies, y GD > Single Tabs.
En la columna derecha, añadiremos GD > Author Action y GD > Output Location bloque.
Después de esto, nuestra página de Detalles del listado ha sido completada.
Añadir funciones premium a tu BlocksySitio web de directorio
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.
Si estás pensando en iniciar un negocio en línea, crear un sitio web de directorio puede ser la forma más sencilla de comenzar.
Descubre los secretos de un directorio en línea con esta guía: Guía para crear un sitio web de directorio.