Aquí tienes una guía fácil de entender sobre cómo crear un sitio web de directorio usando el tema Beaver Builder y el plugin Beaver Builder:
- Instala el tema Beaver Builder
- Instalar y configurar GeoDirectory
- Instala el plugin Beaver Builder & Beaver Themer
- Diseña el sitio web de directorio usando el plugin Beaver Builder plugin
El Beaver Builder Theme, cuando se usa con el plugin GeoDirectory y el plugin Beaver Builder, es una excelente manera de crear un directorio en línea flexible. Con esta combinación, puedes agregar fácilmente funciones basadas en ubicación, personalizar el diseño e incluir contenido dinámico para una experiencia amigable para el usuario.
Este sistema permite a los desarrolladores y diseñadores web crear un sitio web de directorio de alta calidad para industrias específicas o necesidades comunitarias más amplias.
Veamos en detalle cómo hacerlo.
En este tutorial:
Instalación del tema y los plugins.
1. Instalar el tema Beaver Builder
Necesitamos instalar un tema y, para este tutorial, instalarás el Beaver Builder Tema.
Ve a https://www.wpbeaverbuilder.com y adquiere el Beaver Builder Pro Plugin, incluyendo los temas de Beaver y Beaver Themer plugin.
Descarga estos productos desde Mi cuenta página.
Ve a Apariencia >> Temas.
Selecciona Agregar nuevo, instala el tema Beaver y el tema hijo, y activa el Hijo Beaver Tema.
2. Instalar el Beaver Builder Pro & Beaver Themer plugin
Beaver Builder Pro y Beaver Themer son potentes plugins de WordPress diseñados para mejorar la experiencia de creación y personalización de sitios web.
Ve a Plugins >> Añadir nuevo >> Haz clic en Subir plugin
Sube el archivo zip del plugin y activa ambos plugins uno por uno.
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. Hemos terminado de instalar los plugins.
4. Asistente de instalación de GeoDirectory
Para el plugin GeoDirectory, debes completar el Asistente de configuración para configurar la clave de 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 OpenStreetMaps (que no requiere una clave de API).
En este tutorial seleccionamos OpenStreetMap.
Si deseas 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 cobrará si superas el umbral 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 en varias ciudades, necesitarás el complemento Location Manager.
Añadir funciones adicionales
En este paso, instalaremos UsersWP, un plugin de registro e inicio de sesión 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.
Por ahora no agregarás widgets de barra lateral ni elementos de menú; lo haremos más adelante.
Diseña el Beaver Builder Sitio web de directorio
Ahora que hemos instalado el tema y los plugins y realizado la configuración preliminar de GeoDirectory, podemos empezar a diseñar nuestro Sitio de Directorio con el Beaver Builder conjunto de herramientas.
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.
2. Beaver Builder 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.
Ahora establece el logotipo desde Apariencia >> Personalizar >> Encabezado >> Logo del encabezado
establecido. Tipo de logotipo: Encabezado y subir imagen del logotipo.
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 el 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.
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.
iremos a Apariencia > Personalizador > General > Diseño. Estableceremos los siguientes ajustes
Ancho: Ancho completo
Ancho del contenido: 1200
iremos a Apariencia > Personalizador > General > Texto.
Familia de fuente: Outfit
Peso de fuente: Light
Tamaño de fuente: 18
Altura de línea: 1.45
El contenido
Voy a comenzar a construir esta página desde cero usando el Beaver Builder plugin.
Para eso necesitamos un hero header en la página de inicio.
Primero editemos la página de inicio en Beaver Builder haciendo clic en Lanzar Beaver Builder.
Ahora arrastra un contenedor de fila haciendo clic en el ícono más en la parte superior derecha.
Desde la pestaña de estilo de fila, establece
Ancho: Ancho completo
Ancho del contenido: Fijo
Altura mínima: 600px
Tipo de fondo: Foto
Fuente de la foto de fondo: Biblioteca de medios
Posición: Centrado
Escala: Rellenar
Ahora arrastremos un encabezado y el GD > Seach bloque sobre la parte superior de esta fila.
Ahora agreguemos un contenedor de fila vacío y añadiremos un GD > Categories bloque dentro de él.
Establece la configuración del GD > Categories bloque con los siguientes valores
Tipo de diseño: Fondo de imagen
Elementos por fila: 4
Activar el Usar imagen de categoría opción
Puedes asignar la imagen a una categoría editando la categoría desde wp-admin -> places -> Place Categories.
Cada categoría tiene una opción para establecer una imagen predeterminada
Ahora agregaremos una fila vacía con diseño de 1 columna.
con los siguientes ajustes
Color: rgba(234,240,255,0.64)
Ancho: Ancho completo
Ancho del contenido: Fijo
Ahora, añadiremos un elemento de encabezado
Texto: Listado de negocios recientes
Tamaño: 42
Alinear: Centrado
A continuación, editaremos algunos ajustes en este bloque GD > Listings.
Estableceremos: Ordenar por: reciente
Cuadrícula: 4
Añadiremos un contenedor de fila con los siguientes ajustes.
Ancho: Ancho completo
Ancho del contenido: Ancho completo
Añade el GD > Map bloque dentro de él y mantendremos la configuración predeterminada.
Ahora, por último, necesitamos un CTA en la parte inferior.
Añadiremos una fila vacía con un diseño de dos columnas y los siguientes ajustes.
Ancho: Ancho completo
Ancho del contenido: Fijo
Añadiremos un encabezado y contenido en la columna izquierda, y en la columna derecha añadiremos un botón para dirigir a los usuarios a la página de añadir listado.
¡Felicitaciones! Tu página de inicio está completada.
3. Beaver Builder Diseño de la página de listados y búsqueda del sitio de directorio
Ahora necesitas diseñar dos páginas 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 muestra la ubicación exacta de los listados.
Esto es muy sencillo.
Página de listados
Ve a Beaver Builder > Themer Layout > Añadir nuevo y selecciona
Título: GD Archive
Tipo: Themer Layout
Diseño: Archive
Haz clic en Add Theme Layout botón
En la página siguiente, selecciona Ubicación: Place Archive.
Después de guardar estos ajustes, haz clic en Launch Beaver Builder. Añadiremos una fila vacía con diseño de 1 columna.
Ancho: Ancho completo
Color de fondo: #577196
Le añadiremos un título de Archive.
Ahora, añadamos una fila con un diseño de dos columnas.
Ancho: Ancho completo
Ancho del contenido: Ancho completo
A continuación, en el contenedor izquierdo, arrastraremos widgets relacionados con la página de GD Archive, 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, arrastraremos el GD > Map bloque.
Mantendremos todos los ajustes predeterminados para GD > Map. Vamos a darle algo de altura; yo he decidido darle una altura de 100vh.
Añade el siguiente estilo en el personalizador del tema desde Apariencia => Personalizar => Añadir CSS.
.geodir-archive .geodir-listings .geodir_location_listing{ overflow-y: scroll; max-height: 100vh; padding-right: 15px; }
Después de esto, la página de listado de Archive está lista.
Otra opción es usar el bloque GD > Simple Archive, como se explica en este tutorial sobre cómo crear un Sitio web de directorio con Elementor.
Para la página de búsqueda, repetimos el mismo proceso.
Página de búsqueda
Ve a Beaver Builder > Themer Layout > Añadir nuevo y selecciona
Título: GD Search
Tipo: Themer Layout
Haz clic en Añadir Theme Layout botón
Copia todo el contenido del GD Archive plantilla Themer Layout y pégalo en el GD Search plantilla Themer Layout.
Ahora ve a Geodirectory > Ajustes > General > Páginas y en el Search Page Themer Layout selecciona GD Search
Así que ahora nuestras páginas GD Search y Archive están listas.
4. Beaver Builder Diseño de la página de listado individual del sitio web de directorio
Ve a Beaver Builder > Themer Layout > Añadir nuevo y selecciona
Título: GD Details
Tipo: Themer Layout
Diseño: Singular
Haz clic en Add Themer Layout botón.
En la página siguiente, selecciona Ubicación: All places
Después de guardar estos ajustes, haz clic en Launch Beaver Builder. Añadiremos una fila vacía con diseño de 1 columna.
Ancho: Ancho completo
Ancho del contenido: Ancho completo
Relleno: 0
Primero, añade un control deslizante de imágenes en la parte superior de la página de detalle 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 vamos a añadir una fila con un diseño de dos columnas.
Ahora, vamos a añadir individualmente todos los shortcodes de GD de la página de detalle en la columna izquierda.
Que incluye GD > post Title, GD > Single Taxonomies, GD > Single Tabs, y GD > Single Next Prev.
Vamos a añadir GD > Author Action y GD > Output Location en la columna derecha.
Una vez hecho esto, nuestra página de detalle de listado está completa.
Añadir funciones premium a tu Beaver Builder Sitio 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 complemento, puedes establecer precios para el envío de listados. Para cada nivel de precio, puedes activar o desactivar funciones como restringir el número de imágenes para listados gratuitos mientras permites más imágenes para listados de pago, así como 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.
Sigue este tutorial para un enfoque paso a paso: Tutorial: Cómo crear un sitio web de directorio.
Este tutorial genérico puede adaptarse a cualquier tema o constructor de páginas.
Las posibilidades son ilimitadas.