¿Cuál es la mejor manera de crear un sitio web de directorio con el Tema Astra?
La mejor forma de crear un sitio web de directorio usando el Tema Astra es utilizando el Plugin GeoDirectory y el Plugin Spectra Blocks. Una excelente manera de construir un directorio en línea potente y personalizable.
Aquí tienes una guía paso a paso para crear un sitio web de Directorio usando el tema Astra y su Plugin Spectra Website Builder
- Instala el tema Astra
- Instala Spectra Blocks
- Instala y configura GeoDirectory
- Diseña el sitio web de Directorio usando el tema Astra y el bloque Spectra
Veamos en detalle cómo podemos crear un sitio web de Directorio con GeoDirectory y el tema Astra.
En este tutorial:
Instalación del tema y los plugins.
1. Instala el Tema Astra
Primero, necesitarás instalar un tema y, para este tutorial, instalarás el tema Astra.
Ve a Apariencia >> Temas
Selecciona Añadir nuevo, Instalar, y Activar el Tema Astra.
2. Instala el plugin Spectra Blocks
Ahora necesitarás instalar el plugin Spectra Blocks. Este plugin ofrece más opciones para diseñar la página usando bloques de Gutenberg.
Ve a Plugins >> Añadir nuevo.
Busca Spectra Blocks. Instálalo y actívalo.
Puedes omitir todos los pasos del Asistente de configuración.
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.
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 en 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
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 UsersWP, un plugin de registro de usuarios que permite a los usuarios registrarse e iniciar sesión en su sitio web.
Esto es necesario para permitir que los usuarios añadan y editen sus listados. También creará perfiles de usuario donde los usuarios podrán encontrar sus listados, reseñas y otra información relevante.
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 del asistente de instalación es añadir algunos listados de prueba. Esto también añadirá categorías de listados que podrá editar posteriormente según sus 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 sitio web de Directorio con Astra
Ahora que hemos instalado el tema, los plugins y completado la configuración preliminar de GeoDirectory, podemos empezar a diseñar nuestro sitio web de directorio con Astra.
1. Diseño de la página de inicio del sitio web de directorio con Astra
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 cámbiale el nombre a Inicio, o crea una nueva página para este propósito.
A continuación, ve a Apariencia > Personalizar > Ajustes de la página de inicio y selecciona tu página de inicio.
El logotipo
Antes que nada, 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 negocio de directorio web es invertir demasiado tiempo y dinero antes de probar el encaje del producto en el mercado.
Puedes diseñar un logotipo en tan solo cinco minutos con una aplicación como Canva, que es sorprendentemente asequible y efectiva.
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 u original como crees que debería ser.
Si tu proyecto gana tracción, siempre puedes invertir en mejorarlo o hacer cambios radicales 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 > Identidad del sitio, haz clic en Seleccionar logotipo y sube tu archivo PNG. Omite el recorte (o recorta la imagen según sea necesario) 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 "Encabezado".
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.
Añadimos siete enlaces:
- Inicio
- Acerca de
- Blog
- 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 cierre de sesión y de perfil solo aparecerán para los usuarios que sí han iniciado sesión.
La tipografía
Ahora definamos la tipografía para la fuente y el tamaño del texto del sitio web. Estoy configurando una familia de fuentes, un peso de fuente y un tamaño de fuente globales que se aplicarán a todo el texto del sitio.
El contenido
El plugin de bloques Spectra ofrece muchas plantillas de página prediseñadas. Puedes acceder a ellas haciendo clic en el botón Kits de plantillas en la parte superior de la pantalla de edición de página.
Puedes usar estas plantillas de página o un patrón específico para construir las páginas de tu sitio.
Empezaré a construir esta página desde cero usando el plugin Spactra Blocks.
Necesitamos un encabezado hero en la página de inicio; añadamos un bloque contenedor proporcionado por el plugin Spectra Blocks.
Haz clic en la sección añadida y selecciona Ancho completo en la opción Ancho del contenido como se indica en la captura de pantalla a continuación.
A continuación, haz clic en Estilo desde las pestañas superiores. Selecciona > Tipo Imágenes como Tipo de fondo.
Para la sección hero, necesitamos una imagen, que descargaremos de forma gratuita desde Pexels.com (Gracias, @Kelly).
Sube tu imagen y selecciona Repetir a Sin repetición y Tamaño a Cubrir.
La imagen necesita una superposición; de lo contrario, el texto encima no tendrá suficiente contraste y será difícil de leer.
Selecciona Tipo de superposición: Color, Color: #1E293B y Opacidad: 0.3
Ahora que hemos oscurecido la imagen hero, podemos añadir texto.
Arrastra y suelta un elemento de Encabezado dentro de la imagen hero.
Es el momento de dar un título a la imagen hero de nuestra página de inicio.
Desde la pestaña Estilo, cambia el color del texto a blanco (#FFFFFF) para mejorar el contraste y la legibilidad.
En este tutorial, utilizaré un ejemplo sencillo, como «Encuentra el mejor restaurante en Filadelfia». Puedes añadir el eslogan que quieras. No olvides centrar el texto usando la opción de alineación.
Para añadir la búsqueda de GD al encabezado de la página de inicio, arrastra el GD > Search bloque dentro de el contenedor hero.
A continuación, añade algo de altura mínima a este contenedor hero. Estableceré la altura y el ancho en 800px, y también haré que el ancho del contenedor sea ancho completo y su ancho de contenido en Boxed.
Ahora el encabezado de la página de inicio tiene este aspecto, con el título de la página y algo de espacio adicional.
Es el momento de eliminar el título de esta página y el espacio adicional en la sección de encabezado.
Haz clic en el título de la página y verás un icono de ojo; haz clic en él para ocultar el título de la página y eliminar el espacio adicional.
Es el momento de añadir algunas secciones más necesarias en la página de inicio. Ahora añadiré una sección de categorías.
Debajo de la sección hero, haz clic en el icono de más para añadir otro contenedor, luego añade el GD > Categories allí.
Ahora configuraremos algunos ajustes necesarios en este bloque GD > categoría. Estableceremos el tipo de diseño en Fondo de imagen, con 4 elementos por fila, y habilitaremos la opción usar imagen de categoría .
Puedes asignar una imagen a una categoría editándola desde wp-admin -> places -> Place Categories.
Cada categoría tiene una opción para establecer una imagen predeterminada
Ahora es el momento de añadir algo de relleno a este nuevo contenedor. Puedes hacer clic en el contenedor exterior y establecer el relleno necesario desde la sección Estilo. Le daré 70px de relleno en la parte superior e inferior.
Ahora, rápidamente, añadiremos algunos contenedores más. Añadiré los listados recientes debajo de la sección de categorías usando el GD > Listings widget.
Los ajustes que se deben cambiar son:
En Filtros > Publicaciones a mostrar = 4
En Sorting > Sort by = latest
En Design > Layout = Grid View (four columns)
Wrappers Styles > Margin Top = 5
Agreguemos algunos mapas para que los usuarios puedan filtrar los listados con diferentes filtros y verlos en el mapa.
Usemos GD > Map con la siguiente configuración:
Tipo de mapa: Directory Map
Opciones del mapa: Habilitar todas
Agreguemos un poco de estilo haciendo clic en la pestaña de estilos y estableciendo el ancho en 100% y la altura en 600px para asegurarse de que se muestre correctamente.
También haremos que el contenedor del mapa sea de ancho completo para que luzca más amplio y atractivo.
Haz clic en el contenedor externo del mapa y, en la configuración general, establece Container Width: Full Width y Content Width: Full Width.
Ahora agreguemos un contenedor más para mostrar las publicaciones recientes. Puedes usar el bloque Post Grid proporcionado por el plugin Spectra Blocks.
¡Felicitaciones! Tu página de inicio está completa.
Si lo deseas, puedes agregar otros contenedores o CTA.
2. Diseño de la página de listados y búsqueda del sitio de directorio con Astra
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 las creamos una vez y 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.
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.
Ahora agrega un contenedor con dos columnas.
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 hacia arriba, para que el usuario pueda buscar desde la página de archivo.
En la columna derecha, arrastraremos el GD > Map bloque.
Mantendremos toda la configuración predeterminada para GD > Map. Definamos una altura; he decidido establecerla en 100vh.
Ahora simplemente establece el contenedor principal en ancho completo siguiendo las instrucciones indicadas en la imagen.
Después de esto, la página de archivo de listados está lista.
La versión gratuita de Astra tiene opciones limitadas, por lo que es posible que necesites el siguiente fragmento de CSS para hacer que el contenido del contenedor izquierdo sea del mismo tamaño que el contenedor del mapa de la derecha. Puedes pegarlo en el personalizador de tu tema desde wp-admin > Appearance > Customise
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{ overflow-y: scroll; max-height: 100vh; }
Hay una forma aún más sencilla. Si configuras tu página en ancho completo, puedes agregar el bloque GD > Simple Archive Block tal como se explica en nuestro tutorial How to build a directory website with Elementor.
Para la página de búsqueda, repetimos el mismo proceso.
Página de búsqueda
Ve a Geodirectory > Settings > General > Pages > 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.
3. Diseño de la página de listado individual del sitio de directorio con Astra
Para editar y personalizar la página de detalle de GD, 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 agregaremos un contenedor con la configuración Ancho del contenedor: Full Width y Ancho del contenido: Full Width.
Ahora vamos a añadir un carrusel de imágenes en la parte superior de la página de Detalle del Listado. Arrastraremos el GD > Post Image bloque a este contenedor.
Estableceremos el Límite de imágenes en 10 y el Límite de visualización en 1, de modo que solo se muestre una imagen en cada diapositiva.
Ahora, añadamos otro contenedor debajo de este, donde colocaremos los demás bloques necesarios de la página de Detalle de Geodirectory.
Ahora, añadamos uno por uno todos los shortcodes de la página de Detalle de GD necesarios. Estos incluyen GD > Single Taxonomies, GD > Single Tabs
Es el momento de añadir algunos widgets de la barra lateral. Para ello, iremos a wp-admin > Apariencia > Widgets.
Añade el widget GD > Author Action en la barra lateral principal. Este widget proporcionará las opciones Editar y Eliminar Listado al Autor del Listado.
Añade un widget más, GD > Output Location. Este widget mostrará todos los detalles principales del listado que hayan sido marcados como visibles en la página de Detalle.
Después de hacer esto, nuestro página de Detalle del listado ha sido completada.
Cómo añadir funciones premium a tu sitio de directorio con Astra
Si lo deseas, ahora puedes añadir funciones premium a tu directorio, como:
- Listados de pago: Con el complemento GeoDirectory Listing Price Manager, puedes establecer precios para el envío de listados. Para cada nivel de precio, puedes activar o desactivar funciones como: limitar el número de imágenes para listados gratuitos y permitir más imágenes para listados de pago, permitir más o menos etiquetas y categorías, habilitar o deshabilitar 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 usar redes publicitarias. De lo contrario, puedes vender anuncios directamente, permitiendo que las empresas añadan banners en áreas específicas de tu sitio web o 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.
Desarrolla tu sitio de directorio perfecto con este recurso completo: Cómo crear tu sitio web de directorio: una guía completa.
Las posibilidades son infinitas.