Aquí tienes una guía fácil de entender sobre cómo desarrollar un sitio web de directorio usando el tema Avada y el plugin Avada Builder :
- Instala el tema Avada
- Instalar y configurar GeoDirectory
- Diseña el sitio web de directorio usando Avada Builder
El tema Avada, utilizado junto con el plugin GeoDirectory y el plugin Avada Builder, es una excelente manera de crear un directorio en línea flexible.
Esta combinación facilita la incorporación de funciones basadas en la ubicación, la personalización del diseño y la inclusión de contenido dinámico para una experiencia amigable para el usuario.
Permite a desarrolladores web y diseñadores construir un sitio web de directorio de alta calidad adaptado a sectores específicos o a las necesidades de comunidades más amplias.
Profundicemos en los detalles de cómo lograrlo.
En este tutorial:
Instalación del tema y los plugins.
1. Instala el tema Avada
Avada es un tema WordPress versátil y popular, conocido por su flexibilidad y sus potentes funciones.
Es un tema multipropósito que puede personalizarse para crear una amplia variedad de sitios web con un editor de arrastrar y soltar fácil de usar, que permite a los usuarios diseñar y personalizar sus sitios web fácilmente sin necesidad de programar.
Para adquirir el tema Avada y explorar todas sus funciones, puedes visitar el marketplace oficial de ThemeForest: Enlace de compra del tema Avada.
Puedes seguir este vídeo para configurar el tema Avada.
2. 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.
3. 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 Avada 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 Avada 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. Avada 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 el Ajustes del menú > Mostrar ubicación sección, puedes consultar elPrincipal Navegació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 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.
Crear diseño de encabezado
Ahora vamos a crear un diseño de encabezado del sitio usando Avada builder.
Así que iremos a Avada > Layout y seleccionaremos el encabezado desde Diseño global.
Haz clic en Crear nuevo diseño botón.
Ahora hagamos clic en el botón Live Builder.
Se abrirá la Avada Builder Library frente a nosotros.
Verás muchas plantillas prediseñadas para diferentes secciones.
En este ejemplo, seleccionaremos un diseño de encabezado prediseñado desde la sección studio sección.
Ahora reemplazaremos nuestro logotipo haciendo clic en la sección del logotipo del encabezado prediseñado.
Estableceremos el Ancho máximo de imagen a 150px desde la configuración del logotipo.
Desde el menú del encabezado, seleccionaremos o cambiaremos el menú que queremos mostrar en el encabezado del sitio.
realizaremos algunos cambios de estilo y alineación como se indica en la captura de pantalla a continuación.
El encabezado de nuestro sitio ya está listo. Ahora centrémonos en el contenido de la página de inicio.
El contenido
Editaremos la Inicio página en Live Builder.
Añadamos un contenedor vacío con la siguiente configuración
Ancho del contenido interior: 100%
Altura: Altura mínima
Altura mínima: 500
Alineación de fila: Estirar
Alineación de columna: Centrado
Justificación de columna: Centrado
Desde la configuración de fondo, añadiremos una imagen.
Posición del fondo: Centro Centro
Repetición del fondo: Sin repetición
Tamaño del fondo: Centrado
Patrón: Punto
Color del patrón: rgba(0,0,0,0.41)
Ahora añadamos una etiqueta de título de encabezado sobre la imagen con
Texto: Encuentra el mejor restaurante en Filadelfia
Tipografía:
Familia de fuente: Inter
Variante: Bolt 700
Tamaño de fuente: 42px
Color de fuente: #ffffff
Ahora añadamos el bloque GD > Search bloque y mantenlo con la configuración predeterminada.
Ahora agreguemos un contenedor vacío con el GD > Category bloque en su interior.
Tipo de diseño: Icon Left
Row Items: 4
Ahora agreguemos otro contenedor vacío con el GD > Listing bloque en su interior con la siguiente configuración.
Ordenar por: reciente
Cuadrícula: 4
Publicaciones a mostrar: 8
Ahora vamos a agregar un contenedor vacío con la siguiente configuración.
Ancho del contenido interior: 100% de ancho
Altura: Auto
Espaciado de contenido: Izquierda, Derecha 0px
Ahora agregaremos un GD > Map en su interior.
Por último, es momento de agregar una sección CTA. Agregaremos un contenedor vacío.
agregaremos una etiqueta de encabezado.
Con los siguientes ajustes
Alineación: Izquierda
Etiqueta HTML de encabezado: H3
Ahora agreguemos un bloque de botón con un enlace a la página de Agregar listado página.
Crear diseño de pie de página
Por último, crearemos un diseño de pie de página global. De manera similar a como lo hicimos para la sección de encabezado.
En este ejemplo, utilizaremos un diseño de pie de página prediseñado.
Puedes realizar cambios en este diseño de pie de página. Por ahora, lo dejaré en su configuración predeterminada.
Después de este último paso, nuestra página de inicio está lista.
3. Avada 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 de forma predeterminada con un diseño general. En este tutorial, crearemos y personalizaremos el diseño de estas páginas usando Avada Builder.
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.
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 edita la página usando el constructor en vivo.
Agregaremos un contenedor vacío con un relleno de contenido de 0 en la parte superior e inferior.
Ahora agreguemos una columna en su interior y arrastraremos GD > Page title dentro de ella.
Establezcamos el
color de fondo: #f6f6f9
Relleno: 50px 0px 50px 0px
Color del enlace del contenedor: #efefef
Ahora vamos a añadir un contenedor de dos columnas.
A continuación, en el contenedor izquierdo, añadiremos bloques 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, arrastraremos el GD > Map bloque.
Configuremos el mapa
Altura: 150vh
Relleno: 30px 0px 30px 0px
y dejaremos la configuración por defecto.
añadiremos el gd-loop-column clase a la columna izquierda.
añadiremos el siguiente fragmento de CSS en el personalizador del tema.
.gd-loop-column .fusion-column-wrapper{ overflow-y: scroll; padding-right: 17px; max-height: 960px; }
Nuestra página de archivo está lista.
Para crear el diseño de la página de búsqueda.
Asignaremos el encabezado y pie de página globales a este diseño.
iremos a Avada > Layouts
añadiremos este diseño y lo asignaremos a la página de búsqueda.
En la página de búsqueda, crea ahora una plantilla de contenido de búsqueda
y copia todas las secciones de la página GD > Archive a esta página de búsqueda.
Tras esto, nuestra plantilla de página de búsqueda está lista.
4. Diseño de la página de listado individual del sitio web de directorio con Avada
Ha llegado el momento de crear la plantilla de página de detalle. Iremos a editar la GD Detail plantilla de página en Avada Builder.
Añadiremos un contenedor vacío con
Ancho del contenido interior: 100% de ancho
Añadiremos el bloque GD > Imágenes de publicación con la siguiente configuración.
Límite de imágenes: 10
Límite de visualización: 3
Tipo de salida: Slider
Inicio automático: Activar
En el GD Details página, asegúrate de desactivar Mostrar primera imagen destacada.
Ahora añadiremos de nuevo un contenedor con un diseño de dos columnas como el siguiente.
Ahora, vamos a añadir individualmente todos los bloques de la página de detalle de GD necesarios en la columna izquierda.
Que incluye GD > post Title, GD > Single Taxonomies, GD > Single Tabs, y GD > Single Next Prev.
Añadiremos el bloque GD > Author Action y GD > Output Location en la columna derecha.
Una vez hecho esto, nuestra página de detalle de listado estará completa.
Añadir funciones premium a tu Avada 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.
Recién llegados, comienza tu camino aquí: Cómo lanzar un sitio web de directorio: guía para principiantes.
Este tutorial genérico puede adaptarse a cualquier tema o constructor de páginas.
Las posibilidades son ilimitadas.