El plugin de directorio para WordPress más avanzado y escalable del mundo

Aquí tienes una guía fácil de entender sobre cómo crear un sitio web de directorio usando el plugin Breakdance Website Builder:

1. Instala el plugin Breakdance
2. Instalar y configurar GeoDirectory
3. Diseña el sitio web de directorio usando el plugin Breakdance plugin

El Breakdance Plugin, cuando se usa junto con el plugin GeoDirectory, 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:

• Instala y configura los plugins
  1. Instala el Breakdance Plugin
  2. Instalar GeoDirectory
  3. Asistente de instalación de GeoDirectory
     • Configurar la ciudad predeterminada
     • Añadir funciones adicionales
     • Añadir datos de prueba
• Diseña el Breakdance Sitio web de directorio
  1. Diseña el logo del sitio web
  2. El diseño de la página de inicio
     • El menú de navegación
     • La tipografía
     • El contenido
  3. El diseño de la página de listados y búsqueda
  4. El diseño de la página de listado individual

Instalación y configuración de plugins.

1. Instala el Breakdance Plugin

Puedes comprar el plugin Breakdance en breakdance.com. Recibirás un archivo zip del plugin. Para instalarlo, ve a  Plugins >> Añadir nuevo >> Haz clic en Subir plugin

Ahora, tras la instalación, desactivaremos el tema de WordPress desde Breakdance >> ajustes >> Tema >> Desactivar tema

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:

1. Activar las claves.
2. Crear o seleccionar un proyecto existente.
3. Obtener la clave.
4. Activar una cuenta de facturación.
5. 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 gestió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 Breakdance 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 Breakdance 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. Breakdance 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ú > 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:

1. Inicio
2. Acerca de
3. Blog
4. Lugares y agregar lugares
5. Perfil
6. Iniciar sesión
7. 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

Configuremos los ajustes de tipografía globales desde Breakdance >> ajustes >> Estilos globales >> Iniciar Breakdance

los siguientes son los ajustes de tipografía
Fuente de encabezado: Poppins
Fuente del cuerpo: Poppins
Tamaño base: 16px
Proporción: 1.2

Configurar encabezado

Vamos a configurar el encabezado del sitio, para eso vamos a Breakdance >> Header y hacemos clic en Add header.

aquí le daremos un título al encabezado y seleccionaremos
Ubicación: En todas partes
Prioridad: 1

Ahora haz clic en Add New botón en la esquina superior izquierda. Puedes crear un encabezado usando estos elementos de bloque disponibles o puedes hacer clic en Library y usar plantillas de encabezado ya creadas.

Estoy usando una de las plantillas de encabezado existentes de la biblioteca y he subido el Logotipo y seleccionado un menú allí.

Ahora que nuestro encabezado está listo, pasaremos al contenido de la página de inicio.

El contenido

Voy a comenzar a construir esta página desde cero usando el Breakdance plugin.

Para eso necesitamos un hero header en la página de inicio.

Primero editemos la página de inicio en Breakdance haciendo clic en Edit in Breakdance botón.

arrastraremos una sección vacía haciendo clic en el Add botón en la parte superior izquierda.

Desde la pestaña de estilo de sección, establece
Alinear: Centrado
Tipo de fondo: Imagen
Tamaño de imagen: Completo
Tamaño: Cubrir
Repetir: no-repeat
Posición: Centrado
Adjunto: Desplazar
Quitar imagen en: Escritorio
Altura: Personalizado
Altura personalizada: 400px

Ahora arrastremos un elemento de Encabezado con la siguiente configuración.

Texto: Encuentra el mejor restaurante en Filadelfia
Color: #FFFFFFFF
Tamaño de fuente: 48
Peso de fuente: 600

agregaremos un bloque de shortcode con el [gd_search] shortcode debajo de él.

Ahora agreguemos un contenedor vacío más debajo con el siguiente shortcode para mostrar listas de categorías.

[gd_categories post_type="0" max_level="1" max_count="all" max_count_child="all" sort_by="az" design_type="image" row_items="4" card_shadow="small" use_image="1" image_size="large" cat_text_color_custom="#000000" cat_font_size="0" badge_text_color_custom="#000000" badge_color="light" badge_font_size="0" title_tag="h4" mb="3" rounded="rounded"]

le daremos un relleno de 50px en la parte superior e inferior.

Ahora necesitamos una sección de listados recientes. Agregaremos un elemento de shortcode con el siguiente shortcode.

[gd_listings post_type="gd_place" post_limit="6" add_location_filter="1" sort_by="latest" title_tag="h3" layout="3" view_all_link="1" bottom_pagination="1" slide_interval="5" mb="3" rounded="rounded"]

Ahora agreguemos un shortcode más para mostrar el mapa de listados.

[gd_map map_type="auto" post_settings="1" 
width="100%" height="425px" 
maptype="ROADMAP" zoom="0"]

Al final, necesitamos un CTA para eso estoy usando una plantilla de CTA existente.

Configurar el pie de página

Ahora, al final, configuremos el pie de página del sitio y vayamos a Breakdance >> Footer y hacemos clic en Add Footer.

podemos crear un pie de página desde cero o usar cualquiera de los existentes. Estoy usando una plantilla de pie de página existente. Podemos personalizar fácilmente estos menús del pie de página según nuestras necesidades.
Por ahora, lo dejaré tal como está.

¡Felicitaciones! Tu página de inicio está completada.

2. Breakdance 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, crearemos y personalizaremos el diseño de estas páginas usando Breakdance Builder.

Vayamos a Breakdance >> Templates >> Add Template

En la siguiente opción, seleccionaremos la configuración de abajo y haremos clic en Add Template botón.
Ubicación: Archive/Post Type Archive
Condición: Post Type = Places

En la plantilla, agregaremos una sección vacía y aplicaremos la siguiente configuración al bloque de sección.
Layout
Alinear: Centro
Alineación vertical: Centro
Fondo:
Color: F5F8FFFF
Tipo: Degradado

Ahora agreguemos el bloque de Título de archivo dentro de él.

Ahora tienes dos opciones y te mostraremos ambas:

100vh" maptype="ROADMAP" marker_cluster="1"]

2) Si deseas tener control total del diseño, necesitaremos agregar un bloque de columnas con un diseño de dos columnas en su lugar.

En la configuración usaremos Ancho: Completo

Ahora arrastraremos el contenedor de shortcode y usaremos el shortcode requerido dentro de él.

Ahora en el contenedor izquierdo, usaremos 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.

[gd_search mb="3"]
[gd_loop_actions]
[gd_loop layout='2']
[gd_loop_paging]

En la columna derecha, usa 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.

[gd_map map_type="auto" post_settings="1" scrollwheel="1"  width="100%" height="100vh" maptype="ROADMAP" zoom="0"]

Ahora añadiremos la siguiente gd-archive-left-container clase a la sección izquierda.

En la columna izquierda, añadiremos la siguiente clase gd-archive-left-column.

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;
}

.gd-archive-left-column{
	overflow:hidden;
}

Tras esto, la página de Archivo de Listados ya está lista.

Página de búsqueda

Ahora crearemos una plantilla para la página de búsqueda de GeoDirectory, así que vamos a Breakdance >> Templates >> Add Template >> Resultados de búsqueda

Ahora copiaremos todo el contenido de la plantilla GD Archive a la plantilla GD Search plantilla.

Así que ahora nuestras plantillas de páginas de búsqueda y archivo de GD están listas.

4. Breakdance Diseño de la página de listado individual del sitio web de directorio

Vayamos a Breakdance >> Templates >> Add Template

En la siguiente opción, seleccionaremos la configuración de abajo y haremos clic en Add Template botón.
Ubicación: Single/Places
Condición: Post Type = Places

Añadiremos una sección vacía con 0 de relleno por todos los lados.

añadiremos el siguiente shortcode para mostrar un slider de imágenes.

[gd_post_images ajax_load="1" limit="10" limit_show="3" type="slider" slideshow="1" controlnav="1" animation="slide"]

Ahora añadamos una sección más y un diseño de dos columnas dentro de ella.

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.

[gd_single_taxonomies taxonomy=''  prefix=''  link_style=''  link_color=''  link_color_custom=''  link_icon='false'  mt=''  mr=''  mb='2'  ml=''  pt=''  pr=''  pb=''  pl='' ]
[gd_single_tabs heading_font_size="0" heading_text_color="primary" heading_text_color_custom="#000000" mt_lg="3" border_type="border"]
[gd_single_next_prev bg=''  mt='4'  mr=''  mb='3'  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]

En la columna derecha, añadiremos GD > Author Action y GD > Output Location bloque.

[gd_author_actions hide_edit='false'  hide_delete='false'  author_page_only='false'  display=''  size=''  alignment=''  color='primary'  text_color='white'  btn_mt='1'  btn_mr=''  btn_mb='1'  btn_ml=''  bg=''  mt=''  mr=''  mb=''  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]
[gd_output_location location="detail" list_style="wrap"]

Añadir funciones premium a tu Breakdance Sitio web de directorio

Si lo deseas, ahora puedes añadir funciones premium a tu directorio, como:

1. 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.
2. 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.
3. 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.

Aprende los aspectos fundamentales con esta guía esencial: Los aspectos esenciales para crear un sitio web de directorio.

Las posibilidades son infinitas.

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:

1. Instala el tema Beaver Builder
2. Instalar y configurar GeoDirectory
3. Instala el plugin Beaver Builder & Beaver Themer
4. 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:

• Instalar y configurar el tema y los plugins
  1. Instala el Beaver Builder Tema
  2. Instalar GeoDirectory
  3. Asistente de instalación de GeoDirectory
     • Configurar la ciudad predeterminada
     • Añadir funciones adicionales
     • Añadir datos de prueba
• Diseña el Beaver Builder Sitio web de directorio
  1. Diseña el logo del sitio web
  2. El diseño de la página de inicio
     • El menú de navegación
     • La tipografía
     • El contenido
  3. El diseño de la página de listados y búsqueda
  4. El diseño de la página de listado individual

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:

1. Activar las claves.
2. Crear o seleccionar un proyecto existente.
3. Obtener la clave.
4. Activar una cuenta de facturación.
5. 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:

1. Inicio
2. Acerca de
3. Blog
4. Lugares y agregar lugares
5. Perfil
6. Iniciar sesión
7. 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:

1. 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.
2. 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.
3. 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.

Aquí tienes una guía paso a paso para crear un sitio web de directorio usando el tema Neve y el plugin de bloques Otter:

1. Instala el Neve tema
2. Instalar y configurar GeoDirectory
3. Instalar el plugin Otter
4. Diseña el sitio web de directorio usando el tema Neve y Gutenberg Editor

El tema Neve, cuando se usa junto con el plugin GeoDirectory y el plugin Otter, proporciona una plataforma completa y adaptable para desarrollar un directorio en línea sofisticado.

Gracias a esta combinación, los usuarios pueden incorporar sin esfuerzo funcionalidades centradas en la ubicación, perfeccionar las configuraciones de diseño y añadir bloques de contenido dinámico, garantizando una interfaz intuitiva e inmersiva.

Este sistema cohesivo permite a los desarrolladores y diseñadores web construir un sitio web de directorio de primer nivel que satisfaga las demandas de sectores específicos o las necesidades de comunidades más amplias.

Profundicemos en los detalles de cómo se puede lograr esto.

En este tutorial:

• Instalar y configurar el tema y los plugins
  1. Instalar el tema Neve
  2. Instalar el plugin Otter
  3. Instalar GeoDirectory
  4. Asistente de instalación de GeoDirectory
     • Seleccionar el sistema de mapas
     • Configurar la ciudad predeterminada
     • Añadir funciones adicionales
     • Añadir datos de prueba
• Diseñar el sitio web de directorio con Neve
  1. El diseño de la página de inicio
     • El logotipo
     • El menú de navegación
     • La tipografía
     • El contenido
  2. El diseño de la página de listados y búsqueda
  3. El diseño de la página de listado individual

Instalación del tema y los plugins.

1. Instala el Neve Tema

Necesitamos instalar un tema y, para este tutorial, instalarás el Neve Tema.

Ve a Apariencia >> Temas

Selecciona Añadir nuevo, Instalar, y Activar el Neve Tema.

2. Instalar el Otter plugin

El plugin Gutenberg predeterminado no es suficiente para dar estilo a una plantilla, por lo que instalaremos el Otter 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 Otter. 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:

1. Activar las claves.
2. Crear o seleccionar un proyecto existente.
3. Obtener la clave.
4. Activar una cuenta de facturación.
5. 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 Neve 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 web de directorio con el Neve conjunto de herramientas.

1. Neve 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 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 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.

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:

1. Inicio
2. Acerca de
3. Blog
4. Lugares y agregar lugares
5. Perfil
6. Iniciar sesión
7. 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 > Tipografía > General > Cuerpo. Estableceremos la 
Familia de fuente: Inter 
Fuente adicional Variantes: Regular 400, Medium 500, Semi-Bold 600, Bold 700, Extra Bold 800, Black 900
Transformación: Ninguna
Peso: 400
Tamaño de fuente: 16
Altura de línea: 1.7
Familia de fuente: Arial, Helvetica, sans-serif

Desde Apariencia > Diseño > Páginas, establece la Diseño de encabezado: Cubrir

El contenido

Voy a comenzar a construir esta página desde cero usando el Otter plugin.

Necesitamos un encabezado hero en la página de inicio; para eso, añadamos un bloque Row proporcionado por WordPress.

Añadiremos un bloque de Sección con un diseño de tamaño completo.

Alineación vertical: Alinea el centro (como se muestra en la captura de pantalla) en la bloque de Sección configuración y establece el Section Structure configuración en.
Altura mínima: Personalizado
Altura personalizada: 600

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).

Selecciona la configuración de superposición de fondo y establece
Overlay Opacidad: 50
Background Overlay Color: #000000 (Black)

Configuración del color de superposición de la imagen hero

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.
Haz clic en el centro de la imagen nuevamente y añade unAdvanced Heading bloque.
En el bloque de texto, añade un texto como:Find The Best Restaurant Philadelphia”.

Block select H1 como HTML Tag. Text Alignment Centrado. (como se muestra en la captura de pantalla.)

En el Advanced Heading block style ajustes
Tamaño de fuente: 48
Font Transform: Capitalize
Color del texto: #FFFFFF

En este punto, podemos añadir el formulario de búsqueda a la sección hero de nuestro sitio web de directorio con Neve.
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.
Para añadir la búsqueda de GeoDirectory en el encabezado de la página de inicio, arrastra el bloque GD > Search bloque dentro del contenedor hero.

Ahora añadamos la siguiente configuración al elemento padre Section bloque.
En el Structure settings establece
Maximum Content Width: 1170
Horizontal Align: Center

Ahora añadiremos algo de espacio debajo de la sección hero. Usemos un bloque espaciador y establece height = 40.

Es momento de añadir algunas secciones más requeridas a la página de inicio; haz clic en el ícono de más y añade una bloque de Sección con diseño de tamaño completo.

Cambia la bloque de Sección configuración y actualiza la Section Structure configuración a
Maximum Content Width: 1170 y Horizontal Align: Center.

Ahora añadiremos una sección vacía debajo del encabezado hero y añadiremos el GD > Categories bloque en ese grid.

Establece las opciones del bloque de la siguiente manera
Tipo de diseño: Fondo de imagen
Elementos por fila: 4
Habilitar el uso de imagen de categoría

Puedes asignar una imagen a una categoría editándola desde wp-admin -> lugares -> Categorías de lugares.

Cada categoría tiene una opción para establecer una imagen predeterminada

Ahora, procedamos a añadir la tercera sección a nuestro sitio web. La llamaremosListado de negocios recientes“.
Haz clic en el icono de más y busca 'Advanced Heading' y una vez añadido, configura los ajustes de texto de la siguiente manera: Establece la etiqueta HTML en H3 y alinéalo a la centro.

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 la opción 'Activar filtro de ubicación' y establece el Ordenar por: Más reciente.

Ahora añadamos una Columna vacía con Contenido y Ancho al 100.

Añade el GD > Map bloque y mantén la configuración predeterminada.

¡Felicitaciones! Tu página de inicio está completada.

2. Diseño de la página de listados y búsqueda del sitio de directorio Neve

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.

configuraremos los ajustes de la página de la siguiente manera
Diseño de barra lateral: Sin barra lateral
Widget de pie de página: Predeterminado
Contenedor de contenido: Ancho completo

Ahora, añade un Section bloque con un Diseño 1:1.

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 .container.grid-container{
      max-width:100%;
}
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{
    overflow-y: scroll;
    max-height: 100vh;
}

Dado que el tema Neve tiene un problema menor de compatibilidad con el título de la página GD > Archivo, crearemos un contenedor de título en la parte superior de esta página.

arrastraremos una sección vacía y estableceremos el ajuste del bloque en
Fondo: #444444
Relleno: 50 px, 20 px, 50 px, 20 px
arrastraremos el Título del archivo bloque dentro de él.

Tras esto, la página de Archivo de Listados ya está lista.

Otra opción es usar el bloque GD > Simple Archive tal 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 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.

3. Diseño de la página de listado individual del sitio de directorio Neve

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 sección.

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 2:1.

Cambiaremos el bloque de Sección configuración y actualiza la Section Structure configuración a Maximum Content Width: 1170 y Horizontal Align: Centrado

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.

Ahora vamos a añadir una clase ( single-gd-section ) a toda esta sección principal para darle un toque final.

Finalmente, añade el siguiente CSS en el personalizador del tema desde Apariencia => Personalizar => Add CSS

.single-gd-section{
	max-width:1170px;
	margin:auto;
}

Después de hacerlo, nuestro página de Detalles del listado ha sido completada.

Añadir funciones premium a tu sitio de directorio Neve

Si lo deseas, ahora puedes añadir funciones premium a tu directorio, como:

1. 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.
2. 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.
3. 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.

Comienza a construir tu sitio hoy con esta guía detallada: Tu guía para crear un sitio de directorio. Este es un tutorial genérico que puede adaptarse a cualquier tema o constructor de páginas.

Las posibilidades son infinitas.

Aquí tienes una guía paso a paso para construir un sitio web de directorio usando el tema Ollie para WordPress:

1. Instala el tema Ollie
2. Instalar y configurar GeoDirectory
3. Diseña el sitio web de directorio usando el tema OllieWP y Gutenberg Editor

GeoDirectory es totalmente compatible con los temas de bloques FSE como Ollie, por lo que en este caso no necesitaremos un constructor de páginas ni un plugin adicional de bloques.

GeoDirectory ofrece una solución robusta y flexible para crear un directorio en línea dinámico usando cualquier tema o constructor de páginas.

En este tutorial, mostraremos cómo construir un sitio web de directorio con el OllieWP Tema en combinación con el plugin GeoDirectory.

Este dúo permite a los usuarios integrar fácilmente funciones basadas en ubicación, personalizar diseños de maquetación e incorporar bloques de contenido interactivo, garantizando una experiencia de usuario intuitiva y atractiva.

Con este enfoque integrado, los desarrolladores web y diseñadores pueden lograr fácilmente un sitio de directorio de nivel profesional adaptado a mercados de nicho específicos o a las necesidades de comunidades más amplias.

Veamos cómo podemos hacerlo en detalle.

En este tutorial:

• Instalar y configurar el tema y los plugins
  1. Instalar el tema OllieWP
  2. Instalar GeoDirectory
  3. Asistente de instalación de GeoDirectory
     • Configurar la ciudad predeterminada
     • Añadir funciones adicionales
     • Añadir datos de prueba
• Diseñar el sitio web de directorio con OllieWP
  1. El diseño de la página de inicio
     • El logotipo
     • El menú de navegación
     • El contenido
  2. El diseño de la página de listados y búsqueda
  3. El diseño de la página de listado individual

Instalación del tema y los plugins.

1. Instalar el tema OllieWP

Necesitamos instalar un tema y, para este tutorial, instalarás el OllieWP Tema.

Ve a Apariencia >> Temas

Selecciona Añadir nuevo, Instalar, y Activar el OllieWP Tema.

2. 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.

3. 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:

1. Activar las claves.
2. Crear o seleccionar un proyecto existente.
3. Obtener la clave.
4. Activar una cuenta de facturación.
5. 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 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.

No añadirás widgets de barra lateral ni elementos de menú ahora mismo, ya que lo haremos más adelante.

Diseña el OllieWP 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 web de directorio con el OllieWP conjunto de herramientas.

1. OllieWP 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 > Editor > Páginas > Inicio y haz clic en el botón de editar.

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.

El menú de navegación

Después de crear y añadir el logotipo, ve a Apariencia > Editor, y crea tu menú.

Haz clic en los menús de la parte superior y elimina todos los existentes.

Ahora vamos a añadir un bloque de columnas con un diseño de dos columnas.

En la columna izquierda, añade el bloque de logotipo del sitio.

Haz clic en el contenedor principal del encabezado y, desde la configuración del bloque, establece el Fondo: #FFFFF

En la columna derecha, añade el menú de navegación.

Añadimos los siguientes enlaces de navegación principal y algunos enlaces de subnavegación:

1. Inicio
2. Acerca de
3. Blog
4. Lugares y agregar lugares
5. Perfil
6. Login/out

El bloque Login/out mostrará únicamente los enlaces de inicio y cierre de sesión según el estado de sesión del usuario.

El contenido

Voy a comenzar a construir esta página desde cero usando el OllieWP y bloques de Gutenberg.

Ve a Apariencia > Editor > Diseño > Páginas y haz clic en el botón de editar la página de inicio.

necesitamos un encabezado hero en la página de inicio; para eso, eliminemos todo el contenido de esta página y añadamos un Cubrir bloque.

A continuación, comprueba la configuración del bloque y establece la URL de la imagen de fondo.

Para la sección hero, necesitamos una imagen y descargaremos una imagen gratuita de Pexels.com (Gracias, @rachel-claire).

añadiremos los siguientes ajustes en este bloque de portada

Contenido: 1200
Ancho: 100
Opacidad: 50
Relleno y margen: 0
Altura mínima de la portada: 600

Ahora añadamos una etiqueta de encabezado dentro de este bloque de portada con el
Texto: Find The Best Restaurant in Philadelphia

también le daremos a la etiqueta de encabezado una clase adicional ( heading-text-center ) para aplicarle algún estilo.

Ahora añadamos el siguiente estilo en el personalizador del tema.

.heading-text-center{
    text-align:center;
}

Ahora añadamos el bloque GD > search debajo de este encabezado.

debajo de él, añadamos algo de espacio usando un bloque espaciador con una altura de: 60

Ahora añadamos una columna vacía y coloquemos el bloque GD > Categories dentro de ella.

Establece las opciones del bloque de la siguiente manera
Tipo de diseño: Fondo de imagen
Elementos por fila: 3
Habilitar el uso de imagen de categoría

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

Debajo de la sección hero, añade una Columna más haciendo clic en el icono de más y añade los bloques GD > Listings allí.

Ahora realizaremos algunos ajustes necesarios en este bloque GD > Listings bloque. estableceremos la ordenación en: reciente

Ahora añadamos una Columna vacía con Contenido y Ancho al 100.

Añade el GD > Map bloque en ella y mantén la configuración predeterminada.

Haz clic en el pie de página y OllieWP ya proporciona algunas plantillas de pie de página prediseñadas. Estoy seleccionando una de ellas.

¡Felicitaciones! Tu página de inicio está completada.

2. OllieWP Diseño de la página de listados y búsqueda del sitio de directorio

Ahora necesitas diseñar dos páginas que son esenciales para cualquier directorio.

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.

Página de listados

Ve a Apariencia > Editor > Diseño > Plantillas y haz clic en Editar GD Archive plantilla de página

Elimina todo el contenido de esta GD Archive plantilla de página.

Ahora vamos a añadir una fila vacía.

Dentro de esto, añade un diseño de 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 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 toda la configuración predeterminada para el GD > Map. Vamos a darle algo de altura; he decidido darle una altura de 100vh.

Añade el siguiente estilo en el personalizador del tema desde  Apariencia => Personalizar => Add 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 Archivo de listados está lista.

Otra opción es usar el bloque GD > Simple Archive tal 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 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.

3. OllieWP Diseño de la página de listado individual del sitio web de directorio

Para editar y personalizar la página GD Detail, puedes ir a Apariencia > Editor > Diseño > Plantillas y haz clic en Editar GD Single plantilla de página.

Añadir una columna vacía

Primero 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 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 vacía con
Contenido: 1200
Ancho: 100

añadir dos columnas dentro de ella.

Ahora vamos a añadir uno por uno todos los shortcodes necesarios de la página de Detalle de GD en la columna izquierda.

Esto incluye GD > Single Taxonomies, GD > Single Tabs y GD > Single Next Prev.

En la columna derecha, añadiremos GD > Author Action y GD > Output Location bloque.

Tras hacerlo, nuestra página de Detalle del listado ha sido completada.

Añadir funciones premium a tu OllieWP Sitio web de directorio

Si lo deseas, ahora puedes añadir funciones premium a tu directorio, como:

1. 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.
2. 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.
3. 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.

Empieza tu proyecto de sitio web de directorio con este consejo: Crea un sitio web de directorio hoy mismo.

Las posibilidades son ilimitadas.

Aquí tienes una guía paso a paso para crear un sitio web de directorio usando el tema Generatepress y el plugin de bloques Generatepress:

1. Instala el tema Generatepress
2. Instalar y configurar GeoDirectory
3. Instala el GenerateBlocks plugin
4. Diseña el sitio web de directorio usando el plugin Generatepress tema y el editor Gutenberg Editor

Generatepress Tema en combinación con el plugin GeoDirectory y un GenerateBlocks Plugin, ofrece una solución robusta y flexible para crear un directorio en línea dinámico.

Este trío permite a los usuarios integrar fácilmente funciones basadas en ubicación, personalizar diseños de maquetación e incorporar bloques de contenido interactivos, garantizando una experiencia de usuario intuitiva y atractiva.

Con este enfoque integrado, los desarrolladores web y diseñadores pueden lograr fácilmente un sitio de directorio de nivel profesional adaptado a mercados de nicho específicos o a las necesidades de comunidades más amplias.

Veamos cómo podemos hacerlo en detalle.

En este tutorial:

• Instalar y configurar el tema y los plugins
  1. Instala el tema Generatepress
  2. Instala el plugin GenerateBlocks
  3. Instalar GeoDirectory
  4. Asistente de instalación de GeoDirectory
     • Configurar la ciudad predeterminada
     • Añadir funciones adicionales
     • Añadir datos de prueba
• Diseña el sitio web de directorio con Generatepress
  1. El diseño de la página de inicio
     • El logotipo
     • El menú de navegación
     • La tipografía
     • El contenido
  2. El diseño de la página de listados y búsqueda
  3. El diseño de la página de listado individual

Instalación del tema y los plugins.

1. Instala el tema Generatepress

Necesitamos instalar un tema y, para este tutorial, instalarás el Generatepress Tema.

Ve a Apariencia >> Temas

Selecciona Añadir nuevo, Instalar, y Activar el Generatepress Tema.

2. Instalar GenerateBlocks plugin

El plugin Gutenberg predeterminado no es suficiente para dar estilo a una plantilla, por lo que instalaremos el GenerateBlocks plugin.

Este plugin proporciona GenerateBlocks que son mejores que los bloques predeterminados y te ayudarán a diseñar las plantillas de página.

Ve a Plugins >> Añadir nuevo.

Busca GenerateBlocks. 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:

1. Activar las claves.
2. Crear o seleccionar un proyecto existente.
3. Obtener la clave.
4. Activar una cuenta de facturación.
5. 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 Nueva York 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 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.

No añadirás widgets de barra lateral ni elementos de menú ahora mismo, ya que lo haremos más adelante.

Diseña el Generatepress 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 web de directorio con el Generatepress conjunto de herramientas.

1. Generatepress 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 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ó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:

1. Inicio
2. Acerca de
3. Blog
4. Lugares y agregar lugares
5. Perfil
6. Iniciar sesión
7. 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 > Tipografía > Cuerpo. Estableceremos el Familia de fuente: Poppines Categoría: sans-serif y Variante: 100, 100italic, 200, 200italic, 300, 300italic, regular, italic, 500, 500italic, 600, 600italic, 700, 700italic, 800, 800italic, 900, 900italic

El contenido

Voy a comenzar a construir esta página desde cero usando el GenerateBlocks plugin.

necesitamos un encabezado hero en la página de inicio; para ello, añadamos un bloque Grid proporcionado por GenerateBlocks plugin.

estableceremos la alineación del bloque en ancho.

En la configuración del Grid, establece el ajuste de Diseño en
Diseño de barra lateral: Sin barras laterales
Widget de pie de página: Predeterminado
Contenedor de contenido: Ancho completo
Deshabilitar elemento: Título del contenido
Ancho del elemento de Grid: 100

A continuación, comprueba la configuración del bloque y establece la URL de la imagen de fondo.

Para la sección hero, necesitamos una imagen y descargaremos una imagen gratuita de Pexels.com (Gracias, @rachel-claire).

En la configuración de espaciado, el relleno (padding) 100px en los márgenes superior e inferior.

Ahora añadamos una etiqueta de encabezado para agregar algo de texto.

Texto: Encuentra los mejores restaurantes en Filadelfia
Tamaño: Pequeño
Apariencia: Negrita pequeña
Color del texto: #FFFFFF

Dentro del mismo Grid, añadiremos el GD > Search bloque con relleno (padding) de 200px en la parte superior e inferior.

Ahora añadiremos un grid vacío debajo del encabezado hero y agregaremos el GD > Categories bloque en ese grid.

Establece las opciones del bloque de la siguiente manera
Tipo de diseño: Fondo de imagen
Elementos por fila: 3
Habilitar el uso de imagen de categoría

Puedes asignar una imagen a una categoría editándola desde wp-admin -> lugares -> Categorías de lugares.

Cada categoría tiene una opción para establecer una imagen predeterminada

No encontré ninguna configuración funcional en GenerateBlocks para convertir el grid en el diseño de contenido. Añadiremos el home-container clase al grid padre de la categoría.

Debajo de la sección hero, añade una Grid más haciendo clic en el icono de más y añade los bloques GD > Listings allí.

Ahora realizaremos algunos ajustes necesarios en este bloque GD > Listings bloque. estableceremos la ordenación en: reciente

De manera similar al bloque de categorías, añadiremos la home-container clase al grid padre de Listados recientes.

Ahora añadamos un Grid vacío y agrega el bloque GD > Mapa dentro de él, manteniendo la configuración predeterminada.

De manera similar a los demás, añadiremos la home-container class al grid principal de GD > map.

Finalmente, añade el siguiente CSS en el personalizador del tema desde Apariencia => Personalizar => Add CSS

.home-container{
	max-width:1200px;
	margin:auto;
}

¡Felicitaciones! Tu página de inicio está completada.

2. Generatepress Diseño de la página de listados y búsqueda del sitio de directorio

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.

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.

estableceremos la configuración de la página en lo siguiente
Diseño de barra lateral: Sin barra lateral
Widget de pie de página: Predeterminado
Contenedor de contenido: Ancho completo

Ahora añade una cuadrícula vacía 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 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 toda la configuración predeterminada para el GD > Map. Vamos a darle algo de altura; he decidido darle una altura de 150vh.

Para hacer que el diseño de la página de archivo sea de ancho completo, añadiremos el siguiente CSS en el personalizador del tema desde Apariencia => Personalizar => Add CSS

.geodir-archive .container.grid-container{
      max-width:100%;
}
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{
    overflow-y: scroll;
    max-height: 100vh;
}

Después de esto, la página de Archivo de listados está lista.

Otra opción es usar el bloque GD > Simple Archive tal 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 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.

3. Generatepress Diseño de la página de listado individual del sitio web de directorio

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 una nueva cuadrícula.

Primero 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 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 cuadrícula vacío más debajo con un diseño de dos columnas.

añadiremos una clase (single-details-container ) a esta cuadrícula desde la configuración del bloque.

Ahora vamos a añadir uno por uno todos los shortcodes necesarios de la página de Detalle de GD en la columna izquierda.

Esto incluye GD > Single Taxonomies, GD > Single Tabs y GD > Single Next Prev.

En la columna derecha, añadiremos GD > Author Action y GD > Output Location bloque.

Finalmente, añade el siguiente CSS en el personalizador del tema desde Apariencia => Personalizar => Add CSS

.single-details-container {
    max-width: 1200px;
    margin: auto !important;
}
.single-gd_place .entry-content{
    margin:0px;
}

Tras hacerlo, nuestra página de Detalle del listado ha sido completada.

Añadir funciones premium a tu Generatepress Sitio web de directorio

Si lo deseas, ahora puedes añadir funciones premium a tu directorio, como:

1. 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.
2. 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.
3. 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.

Eleva tu sitio web con estas estrategias clave: Estrategias clave para crear un sitio web de directorio.

Las posibilidades son ilimitadas.

¿Cómo crear un sitio web de directorio con el tema Divi?

La forma más sencilla de crear un sitio web de directorio usando el tema Divi de WordPress es seguir estos 3 pasos:

1. Instalar el tema Divi
2. Instalar y configurar GeoDirectory
3. Diseñar el sitio web de directorio con el tema Divi

Antes de describir en detalle cómo crear un directorio de negocios paso a paso, me gustaría citar una publicación del 11 de septiembre de 2023 en el blog oficial de Elegantthemes, los desarrolladores del tema Divi.

¿Es GeoDirectory el mejor plugin de WordPress para crear un sitio web de directorio de negocios con el tema Divi?

En el blog de Elegant Themes se publicó un artículo titulado "7 Best WordPress Directory Plugins in 2023 (Ranked)".

El plugin GeoDirectory ocupó la primera posición en el ranking. En el contenido del artículo, el autor justifica por qué GeoDirectory es el mejor plugin de WordPress para crear un sitio web de directorio.

Te animo a leer este artículo. A continuación se muestra una cita de la sección de preguntas frecuentes del artículo mencionado.

¿Cuál es el mejor plugin de directorio para WordPress?
GeoDirectory es el mejor plugin de directorio para WordPress. Ofrece listados personalizables, búsqueda avanzada, reseñas de usuarios, integración con Google Maps, opciones de monetización y una gran compatibilidad con temas y plugins. Puedes crear sitios web de directorio con múltiples funciones fácilmente con GeoDirectory.

Cita de la sección de preguntas frecuentes del artículo: 7 Best WordPress Directory Plugins in 2023 (Ranked).

Mi primer sitio WordPress, creado en 2013, era un directorio de negocios sin ningún plugin dedicado.

Recuerdo cuando los creadores de WP GeoDirectory, Paolo Tajani y Stiofan O'Connor, hicieron un fork del tema "GeoPlaces" de Templatic y corrigieron todos sus problemas.

Mejoraron su rendimiento y posteriormente lanzaron GeoTheme hace más de 10 años.

Más tarde, adaptándose al cambiante ecosistema de WordPress y aprendiendo de sus experiencias, abandonaron el desarrollo de temas.

Basándose en esa base, crearon el plugin GeoDirectory, que facilita la creación de sitios de directorio de prácticamente cualquier tipo.

He probado la mayoría de los plugins y temas para WordPress que permiten crear un sitio web de directorio.

Tanto la entrada mencionada anteriormente como mis 11 años de experiencia confirman que WP GeoDirectory es el mejor plugin para este propósito.

Guía paso a paso sobre cómo crear un sitio web de directorio usando el tema Divi y el plugin GeoDirectory

Veamos en detalle cómo podemos crear un sitio web de directorio con GeoDirectory y el tema Divi.

En este tutorial:

Tabla de contenidos

• ¿Cómo crear un sitio web de directorio con el tema Divi?
  • ¿Es GeoDirectory el mejor plugin de WordPress para crear un sitio web de directorio de negocios con el tema Divi?
  • Guía paso a paso sobre cómo crear un sitio web de directorio usando el tema Divi y el plugin GeoDirectory
• Instalación del tema y los plugins.
  • 1. Instalar el tema Divi
  • 2. Instalar GeoDirectory
  • 3. Asistente de instalación de GeoDirectory
    • Elegir el sistema de mapas (Google Maps u OpenStreetMap)
    • Configurar la ciudad predeterminada
    • Añadir funciones adicionales
    • Añadir datos de prueba
• Diseñar el sitio web de directorio con Divi
  • 1. Diseño de la página de inicio del sitio web de directorio con Divi
    • El logotipo
    • El menú de navegación
    • El contenido
    • Crear pie de página global
  • Diseño de la página de listados y búsqueda del sitio web de directorio con Divi
    • Página de búsqueda
    • Página de listado individual
  • Ajuste fino de tu sitio de directorio con Divi
  • Colores y tipografía
• Maximiza el potencial de tu directorio Divi con DiviGeo
• Añadir funciones premium a tu sitio web de directorio con Divi

Instalación del tema y los plugins.

1. Instalar el tema Divi

Primero, necesitarás instalar un tema Divi

Ve a Apariencia >> Temas >>

Selecciona Añadir nuevo, Subir tema, Instalar y Activar el tema Divi.

2. Instalar GeoDirectory

Ahora necesitas instalar el plugin GeoDirectory.

Ve a Plugins >> Añadir nuevo, busca GeoDirectory. Instálalo y actívalo.

Listo, una vez que el tema Divi y el plugin GeoDirectory estén activos, podemos pasar al siguiente paso.

3. Asistente de instalación de GeoDirectory

Si aprecias Divi Builder por su sencillez, sin duda apreciarás el Asistente de configuración integrado en el plugin GeoDirectory.

Elegir el sistema de mapas (Google Maps u OpenStreetMap)

Ahora debes completar el Asistente de configuración. En el primer paso del asistente puedes elegir entre dos sistemas de mapas: Google Maps y OpenStreetMap (que no requiere una clave API).

En este tutorial seleccionamos OpenStreetMap.

Selecciona OpenStreetMap y haz clic en continuar.

En caso de que desees seleccionar Google Maps, sigue estos pasos adicionales.

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:

1. Activar las claves.
2. Crear o seleccionar un proyecto existente.
3. Obtener la clave.
4. Activar una cuenta de facturación.
5. 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, establecerás la ubicación predeterminada. Esta es la ciudad para la que se crea el directorio. GeoDirectory usa Filadelfia como ciudad predeterminada.

Teniendo en cuenta el nicho que elegí para este tutorial, estableceremos la ciudad predeterminada en Split, en Croacia.

Puedes arrastrar el marcador del mapa para usar la ubicación que necesites, o utilizar la configuración avanzada haciendo clic en "Mostrar opciones avanzadas".

Si necesitas añadir listados a más de una ciudad, necesitarás el El complemento Location Manager.

Añadir funciones adicionales

En este paso, instalaremos UsersWP, un plugin de 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.

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 Divi

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 tema Divi.

1. Diseño de la página de inicio del sitio web de directorio con Divi

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 Ajustes > Lectura > Ajustes de la página de inicio y selecciona tu página de inicio.

Seleccionaremos la página de entradas más adelante.

El logotipo

Evita gastar en un diseñador para tu logotipo inicial.

Muchos cometen el error de invertir fuertemente antes de evaluar el encaje en el mercado.

Usa aplicaciones como Canva para diseños rápidos, asequibles y de calidad.

Para un MVP, un logotipo diseñado con Canva es suficiente.

Aunque la perfección inicial no es crucial, puedes mejorar el logotipo si tu proyecto tiene éxito.

Recuerda, un logotipo mediocre no es la razón del fracaso de los proyectos.

Después de diseñar tu logotipo, ve a Divi > Theme Options, haz clic en cargar y selecciona el logotipo que creaste con Canva.com.

Omite el recorte (o recorta la imagen según sea necesario) y haz clic en Guardar cambios en la esquina superior izquierda de la pantalla.

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

En este ejemplo, solo tendremos el menú de navegación del encabezado.

Añadimos doce enlaces:

1. Inicio
2. Acerca de
3. Blog
4. Cuenta
5. Perfil (Visible para usuarios con sesión iniciada usuarios)
6. Cambiar Contraseña (Visible para usuarios con sesión iniciada usuarios)
7. Cerrar sesión (Visible para usuarios con sesión iniciada usuarios.)
8. Registrarse (Visible para usuarios sin sesión iniciada)
9. Iniciar sesión (Visible para usuarios sin sesión iniciada)
10. ¿Olvidaste tu contraseña? (Visible para usuarios sin sesión iniciada)
11. Página de Búsqueda
12. Añadir Listado

Los enlaces de los endpoints de UsersWP son dinámicos, ver los paréntesis anteriores.

El contenido

El tema Divi ofrece más de 330 paquetes de diseños prefabricados.

Para este tutorial, elegiré un diseño listo para usar que permite crear un atractivo directorio de negocios sin la tediosa tarea de aplicar estilos a los módulos de Divi.

Para este tutorial, elegí el paquete de diseño prefabricado Charter Divi Layout Pack.

Ve a tu página de inicio, haz clic en 'Enable Visual Builder' y luego en 'Browse Layouts'.

En la biblioteca de diseños prefabricados, selecciona 'Charter Boat Landing Page' y haz clic en 'Use This Layout'.

Después del segundo módulo de texto, añade el módulo de código y haz clic en Add Shortcode.

Divi no permite el uso de bloques de Gutenberg, pero los creadores del plugin GeoDirectory han implementado un generador de shortcodes.

Gracias a esto, puedes añadir fácilmente widgets dinámicos mediante el módulo de código de Divi.

Por lo tanto, la función de generador de shortcodes será tu mejor aliada al crear un sitio web de directorio en Divi.

Selecciona "gd_search" (GD > Search)" en la lista desplegable y haz clic en Copy shortcode.

El shortcode copiado se encuentra en el portapapeles. Pega el código copiado en el módulo de código y haz clic en el icono de marca de verificación.

Cambia el contenido del primer módulo de texto a "Buscar".

Cambia el contenido del encabezado en la pestaña de contenido a Yacht Delivery. En la pestaña de diseño, cambia el tamaño de fuente del encabezado h1 a 70px y haz clic en la marca de verificación.

Elimina el módulo de botón "Book a Trip".

Ahora nuestra sección Hero está completada.

En la siguiente sección, a partir de la plantilla de página de aterrizaje predefinida de Divi, cambia el contenido del encabezado H2 a "Categorías de Listados".

Elimina el módulo de texto bajo el encabezado (fuente dorada) o cambia el contenido por el tuyo propio; yo dejaré los fragmentos de Lorem Ipsum para hacer el diseño del sitio web más interesante.

Elimina la fila de dos columnas con fotos y texto, luego añade una nueva fila con un módulo de código. Al añadirlo, haz clic en 'Add Shortcode' de la misma manera que lo hiciste para el formulario de búsqueda.

Selecciona "gd_categories" (GD > Categories)" en la lista desplegable.

Las opciones que modifiqué en el generador de shortcodes para lograr la apariencia de las columnas de categorías que se muestra a continuación:

Pestaña de filtros:
Número máximo de categorías a mostrar por CPT: 3
Marcar: Ocultar vacías
Pestaña de diseño de tarjeta:
Tipo de diseño: Fondo de imagen
Posicionamiento de fila: Centrado
Sombra de tarjeta: Grande
Pestaña Icono / Imagen:
Marca: Usar imagen de categoría
Tamaño de imagen: Grande

También puedes copiar el shortcode de abajo y pegarlo en el módulo de código.

Shortcode generado:

[gd_categories post_type="0" hide_empty="1" max_level="1" max_count="3" max_count_child="all" sort_by="count" design_type="image" row_positioning="center" card_shadow="large" use_image="1" image_size="large" cat_text_color_custom="#000000" cat_font_size="0" badge_text_color_custom="#000000" badge_color="light" badge_font_size="0" title_tag="h4" mb="3"]

Puedes asignar una imagen a una categoría editándola desde wp-admin -> lugares -> Categorías de lugares.

Cada categoría tiene una opción para establecer una imagen predeterminada.

También cambié los nombres de las categorías para que coincidan con el nicho que elegí para este tutorial.

Usaremos la siguiente sección para mostrar las entradas más recientes.

Cambia el encabezado "Our boats" por "Latest Yacht providers". Elimina la fila después del encabezado y añade una nueva sección con el módulo de código de Divi.

Al igual que con el formulario de búsqueda y las categorías, necesitamos generar un shortcode que muestre los listados más recientes.

Selecciona "gd_listings" (GD > Listings)" de la lista desplegable.

Las opciones que modifiqué en el generador de shortcodes para lograr la apariencia que se muestra a continuación:

Pestaña de filtros:
Entradas a mostrar: 3
Pestaña Diseño:
Diseño: Vista de cuadrícula (tres columnas)

También puedes copiar el shortcode de abajo y pegarlo en el módulo de código.

Shortcode generado:[gd_listings post_type="gd_place" post_limit="3″ add_location_filter="1" sort_by="az" title_tag="h3″ layout="3″ view_all_link="1" bottom_pagination="1" slide_interval="5″ mb="3″]

Esta sección no será necesaria, así que elimínala.

La siguiente sección servirá como nuestra sección CTA. Cambia el texto a "¿Ofreces servicios de entrega de yates?" En la pestaña de diseño del módulo de texto, cambia el tamaño del encabezado h2 a 60px.

Edita el texto del módulo de botón para añadir el listado y establece el enlace en "/add-listing/places/".

Puedes eliminar la siguiente sección "FAQ", pero yo no lo haré, para que el proyecto sea más interesante.

Recomiendo completar la sección de preguntas frecuentes con contenido relacionado con el nicho para el que estás creando un directorio de negocios.

Cuanto más contenido temático haya, mejor será para optimizar tu sitio web en los motores de búsqueda.

De la misma manera, con la siguiente sección la eliminaré en esta guía, pero puedes usarla para optimizar tu sitio web para los motores de búsqueda.

No eliminaré la sección de reseñas para lograr un mejor diseño de página de inicio. Puedes hacer lo que prefieras.

Crear pie de página global

La página de inicio del sitio web de directorio con Divi está completa. Ahora, vamos a crear un pie de página global para nuestro sitio.

Haz clic en el icono de guardar sección en la biblioteca, escribe "global-footer" en el campo del nombre de la sección y haz clic en guardar en la biblioteca. Por último, guarda el diseño de tu página de inicio con el botón Guardar en la esquina inferior derecha de la pantalla.

Elimina la sección que guardaste en la biblioteca de Divi y guarda el proyecto nuevamente.

Ve al panel de WordPress, haz clic en Divi > Theme Builder, luego en Añadir pie de página global y selecciona Crear pie de página global.

Inserta una nueva sección, haz clic en Añadir desde la biblioteca, elige la sección que creamos antes y haz clic en Usar esta sección.

La sección del pie de página global está construida con una foto, cuatro módulos de texto y módulos de iconos sociales.

Cambia el contenido y los enlaces de los módulos de texto. Usaré los módulos de texto para presentar de nuevo las categorías de mi directorio de negocios en el sitio web para facilitar la navegación.

Introduce los enlaces correspondientes en el módulo Social Media Follow.

Elimina la sección vacía y guarda el pie de página global, luego haz clic en cerrar en la esquina superior derecha de la pantalla. 

Muy importante: cuando regreses al Divi Theme Builder, haz clic en el botón Guardar cambios.

La página de inicio y el pie de página global del sitio web de directorio están listos.

Diseño de la página de listados y búsqueda del sitio web de directorio con Divi

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 los crea de forma predeterminada, pero en este tutorial realizaremos cambios menores en las páginas predeterminadas.

Tenemos que agregar un mapa, así como un Módulo de Texto con un título dinámico.

Ve a la pestaña 'Todas las páginas' en el panel de WordPress, busca la página 'GD Archive', haz clic en 'Editar con Divi' y luego edita el contenido existente.

Elimina el módulo de texto y agrega los dos módulos de código.

Ahora, usa el generador de shortcodes de la misma manera que lo hiciste para generar shortcodes para categorías o listados recientes.

Desde la lista desplegable, selecciona, copia y pega los siguientes shortcodes en orden:

GD > Map

GD > Notifications

GD > Search

GD > Loop Action

GD > Loop

GD > Loop paging

También puedes pegar los siguientes shortcodes en el módulo de código.

En el primer módulo de código, necesitamos agregar el shortcode responsable del mapa:

[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"]

Segundo módulo de código:

[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"] <br>

[gd_notifications]

[gd_search bg=” mt=” mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

[gd_loop_actions bg=” mt=” mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

[gd_loop layout=’2′ row_gap=” column_gap=” card_border=” card_shadow=” bg=” mt=” mr=” mb=” ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

[gd_loop_paging show_advanced=” bg=” mt=” mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

Ahora, encima de la sección de módulos de código de Divi, necesitamos agregar una nueva sección con un Módulo de Encabezado de Divi.

Para mostrar el título de las páginas de archivo, utilizaremos la opción integrada de Divi para mostrar contenido dinámico.

En la pestaña de contenido, pasa el cursor sobre el campo de encabezado y haz clic en Usar contenido dinámico a la derecha. Selecciona Título de página/archivo en la lista desplegable.

Haz clic en el ícono de verificación y guarda tu diseño de GD Archive en Divi.

Página de búsqueda

Para la página de búsqueda, repetimos un proceso similar, pero al igual que al crear el pie de página, usaremos el Divi Theme Builder.

Desde el panel de WordPress, navega a Divi > Theme Builder. Haz clic en Agregar nueva plantilla y luego en Crear nueva plantilla.

Verás la configuración de la plantilla. Bajo la pestaña Usar en, busca la sección Otro y selecciona Página de resultados de búsqueda de GD, luego haz clic en Crear plantilla.

Verás una nueva plantilla responsable de la página de búsqueda de GD.

Haz clic en Agregar cuerpo personalizado, luego en Agregar desde biblioteca en la pestaña Tu página existente. Haz clic en el diseño GD Archive y luego usa este diseño.

Haz clic en el ícono del lápiz y edita el cuerpo personalizado. No tienes que hacer nada, solo guarda el diseño y guarda los cambios en el Divi Builder Theme.

Solo un paso más y tu sitio web de directorio creado con Divi será completamente funcional.

Página de listado individual

Una página de listado individual es responsable de mostrar una entrada única en tu sitio web de directorio.

De manera similar a la página de archivo de GD y la página de búsqueda de GD, la plantilla de página fue creada por el asistente de instalación de GD.

Ve a páginas en tu panel de WordPress y edita con Divi la página GD Details.

Elimina el contenido y agrega una fila de dos columnas como se muestra en la imagen a continuación.

En el módulo de código izquierdo, agregaremos los shortcodes responsables del contenido de la publicación y la galería.

En el módulo de código derecho, agregaremos los shortcodes responsables de mostrar los detalles de la publicación, como número de teléfono, dirección, enlaces a redes sociales y otros.

Ya sabes cómo usar el generador de shortcodes, así que genera, copia y pega los siguientes shortcodes. También he preparado shortcodes listos para copiar a continuación.

Módulo de código a la izquierda

[gd_post_images title='' types='' fallback_types='' ajax_load='true' limit='' limit_show='' css_class='' type='slider' slideshow='true' controlnav='1' animation='slide' show_title='true' show_caption='true' image_size='' aspect='' cover='' link_to='' link_screenshot_to='' bg='' mt='' mr='' mb='' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ]

[gd_single_taxonomies taxonomy=” prefix=” link_style=” link_color=” link_color_custom=” link_icon=’false’ mt=” mr=” mb=’2′ ml=” pt=” pr=” pb=” pl=” ]

[gd_single_tabs show_as_list=’false’ output=” tab_style=” disable_greedy=’false’ ]

[gd_single_next_prev bg=” mt=’4′ mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=” ]

Módulo de código a la derecha

[gd_output_location location="detail" list_style="wrap"]

¡Casi listo!

Ahora, de manera similar a cuando creamos la plantilla de página de archivo de GD, necesitamos agregar un módulo de encabezado que sea responsable de mostrar el título dinámico del listado.

Agrega un nuevo módulo de encabezado de Divi en la primera columna, encima del módulo de código, y configura el título dinámico como Título de página/archivo.

Haz clic en el ícono de verificación y guarda tu diseño. La página de publicación individual tendrá el siguiente aspecto.

Ajuste fino de tu sitio de directorio con Divi

Tu sitio web de directorio con Divi está casi listo; ahora debemos configurar algunas opciones y ajustar tu sitio web.

Colores y tipografía

El color principal que elegí para este sitio web es un tono de azul marino. Código hexadecimal: #1e2d44.

Ve a Personalizador de tema > Configuración general > Configuración de diseño y cambia el color de acento del tema Divi a: #1e2d44.

Ahora tenemos que cambiar el color primario del plugin GeoDirectory.

En el personalizador del tema, haz clic en AyeCode UI y establece el color primario en: #1e2d44.

Ahora necesitamos establecer la fuente global. Ve a Personalizador de Temas > Configuración General > Tipografía y cambia la fuente de encabezado a Cinzel.

Como puedes ver, la fuente de los encabezados generados por WpGeodirectory no cambió a la fuente Cenzel.

Ve a la pestaña CSS Adicional en el Personalizador de Temas y pega el siguiente código CSS.

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'Cinzel', Georgia, "Times New Roman", serif!important;
}

Cambiar la versión de BootStrap

En el panel de WordPress, haz clic en Ajustes y luego en AyeCode UI, cambia la versión a BootStrap V5 y guarda.

Tu sitio web de directorio con Divi está listo.

Maximiza el potencial de tu directorio Divi con DiviGeo

Este es un método sencillo para crear un directorio con GeoDirectory y Divi.

Si prefieres no afrontar este proyecto solo, o necesitas algo más sofisticado, no dudes en contactarme.

Visita mi sitio web, considera adquirir uno de mis Divi Business GeoDirectory child theme DiviGeo, o contráctame para crear un sitio web único hecho a medida para tus necesidades.

Añadir funciones premium a tu sitio web de directorio con Divi

Si lo deseas, ahora puedes añadir funciones premium a tu directorio, como:

1. 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.
2. Reclamar Listados: Esta es una función fundamental para un directorio, en la que el administrador crea la base de datos e invita a los dueños de negocios a tomar el control de sus listados gratuitos. El proceso de reclamación del listado puede incluir la obligación de actualizar a un listado de pago para asumir la propiedad del mismo.
3. 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.

Obtén información valiosa sobre el proceso de creación con estos consejos: Crear un sitio web de directorio: Consejos y trucos.

Las posibilidades son inmensas.

¿Cómo crear un sitio web de directorio con OceanWP?

Aquí tienes una guía paso a paso para construir un sitio web de directorio usando el tema OceanWP:

1. Instala el tema OceanWP
2. Instalar y configurar GeoDirectory
3. Instala el plugin Spectra Gutenberg Blocks
4. Diseña el sitio web de directorio usando el tema OceanWP y el editor Gutenberg Editor

El tema OceanWP en combinación con el plugin GeoDirectory y un plugin de bloques Gutenberg ofrece una solución robusta y flexible para crear un directorio en línea dinámico.

Este trío permite a los usuarios integrar fácilmente funciones basadas en ubicación, personalizar diseños de maquetación e incorporar bloques de contenido interactivos, garantizando una experiencia de usuario intuitiva y atractiva.

Con este enfoque integrado, los desarrolladores web y diseñadores pueden lograr fácilmente un sitio de directorio de nivel profesional adaptado a mercados de nicho específicos o a las necesidades de comunidades más amplias.

Veamos cómo podemos hacerlo en detalle.

En este tutorial:

• Instalar y configurar el tema y los plugins
  1. Instala el tema OceanWP
  2. Instala Spectra Blocks
  3. Instalar GeoDirectory
  4. Asistente de instalación de GeoDirectory
     • Elegir el sistema de mapas (Google Maps u OpenStreetMap)
     • Configurar la ciudad predeterminada
     • Añadir funciones adicionales
     • Añadir datos de prueba
• Diseña el sitio web de directorio con OceanWP
  1. El diseño de la página de inicio
     • El logotipo
     • El menú de navegación
     • La tipografía
     • El contenido
  2. El diseño de la página de listados y búsqueda
  3. El diseño de la página de listado individual

Instalación del tema y los plugins.

1. Instala el tema OceanWP

Necesitamos instalar un tema y, para este tutorial, instalarás el tema OceanWP.

Ve a Apariencia >> Temas

Selecciona Añadir nuevo, Instalar, y Activar el tema OceanWP.

2. Instala el plugin Spectra Blocks

El plugin Gutenberg predeterminado no es suficiente para dar estilo a una plantilla, por lo que instalaremos el plugin Spectra Blocks. (consulta este tutorial si quieres crear un sitio web de directorio con el tema Astra y el plugin Spectra en su lugar)

Este plugin ofrece bloques Gutenberg personalizados que son mejores que los bloques predeterminados y te ayudarán a diseñar las plantillas de página.

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, 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:

1. Activar las claves.
2. Crear o seleccionar un proyecto existente.
3. Obtener la clave.
4. Activar una cuenta de facturación.
5. 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 Nueva York 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 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.

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 OceanWP

Ahora que hemos instalado el tema y los plugins y completado la configuración inicial de GeoDirectory, podemos empezar a diseñar nuestro sitio web de directorio con el tema OceanWP.

1. Diseño de la página de inicio del directorio con OceanWP

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 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) inicial, un logotipo creado con Canva es más que suficiente.

Canva ofrece una gran cantidad de plantillas de logotipos, y no pasa nada si tu primer logotipo no es perfecto ni original.

A medida que tu proyecto cobre impulso, siempre tendrás la opción de perfeccionar o renovar por completo tu logotipo.

Recuerda, el éxito de un proyecto no lo determina la perfección de su logotipo.

Ahora ve a Apariencia > Personalizar > Encabezado > Logotipo, haz clic en Seleccionar Logo, y sube tu archivo PNG. Omite el recorte (o recorta la imagen según sea necesario) y haz clic en publicar. También puedes establecer la altura y el ancho máximos del logotipo si su tamaño es grande.

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:

1. Inicio
2. Acerca de
3. Blog
4. Lugares y agregar lugares
5. Página de Búsqueda
6. Iniciar sesión
7. Account > Profile > Forgot Password > Logout

El enlace de inicio de sesión (desde los Endpoints de UsersWP) solo aparecerá para los usuarios que no hayan iniciado sesión, mientras que los enlaces de cerrar sesión, cuenta y perfil solo aparecerán para los usuarios que hayan 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 > Tipografía > Cuerpo. Estableceremos el Familia de fuente: Red Hat Text y Peso de fuente: Normal: 400

y en los ajustes de Apariencia > Personalizador > Tipografía > menú principal, estableceremos Peso de fuente: Medium 500, Tamaño de fuente: 13px

Ahora iremos a Apariencia > Personalizador > Opciones Generales > Estilos Generales Color Primario: #ff914d y Color Primario al Pasar el Cursor: #ff731c

El contenido

Empezaré a construir esta página desde cero usando el plugin Spactra Blocks.

necesitamos un encabezado hero en la página de inicio; para eso, añadamos un bloque contenedor proporcionado por el plugin spectra blocks.

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 y descargaremos una imagen gratuita de Pexels.com (Gracias, @Kelly).

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.

Desde la pestaña de estilo de la configuración del bloque contenedor, selecciona Repetir a Sin repetición y Tamaño a Cubrir.

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, usaré algo sencillo como Restaurantes en Nueva York.

No olvides centrar el texto usando la opción de alineación.

Para añadir la búsqueda de GeoDirectory en el encabezado de la página de inicio, arrastra el bloque GD > Search bloque dentro del contenedor hero.

A continuación, añade una altura mínima a este contenedor hero. Lo estableceré en 650 x 600 px en ancho y alto, y también establece el ancho del contenedor: Boxed y el ancho del contenido: Boxed.

es hora de eliminar el título de esta página y el espacio adicional en la sección del encabezado.

Haz clic en el ícono O en la parte superior derecha de la página, simplemente haz clic en él. Dentro de eso, en la sección General configura padding: desactivado y dentro de la selección de Título Título: desactivado

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, añade una container más haciendo clic en el icono de más y añade los bloques GD > Listings allí.

Ahora realizaremos algunos ajustes necesarios en este bloque GD > Listings bloque. estableceremos la ordenación en: reciente

Ahora agregaremos un CTA para atraer a los dueños de negocios a registrar sus empresas. Añadiremos un contenedor vacío y en la configuración de estilo.
configuremos un fondo.

Ahora agreguemos los estilos del contenedor:

Tipo de superposición: Color
Color de superposición de imagen: #FF6900
Opacidad de la superposición: 0.3
Ancho del contenedor: Ancho completo
Ancho del contenido: Boxed

Ahora también agregaremos un Call To Action bloque proporcionado por Spectra dentro de este contenedor.

Tipografía para la sección CTA.
Color: #fffff
Tamaño de fuente: 32px

agreguemos algo de estilo al botón.
Color del texto: #000000
Color de fondo: #FFFFFF
Radio: 30px todos los lados
Relleno: 10px, 30px, 10px, 30px

Cambiemos el texto del botón a Añadir Listado y el enlace a la página de Agregar Listado.

Así que nuestra sección CTA ya está completa. Agregaremos una sección más: la GD > Categories sección debajo de ella.

La configuración será la siguiente
Tipo de diseño: Fondo de imagen
Elementos por fila: 3
Habilitar el uso de imagen de categoría

Puedes asignar una imagen a una categoría editándola desde wp-admin -> lugares -> Categorías de lugares.

Cada categoría tiene una opción para establecer una imagen predeterminada

Listo, ahora agreguemos la última sección para mostrar los enlaces de redes sociales. La llamaremos MANTENTE EN CONTACTO.

Agrega un nuevo contenedor vacío con fondo #000000.

Ahora añadiremos un encabezado en este contenedor con Alineación: Centro y Encabezado: H3

Añadiré el texto "Stay in Touch"
Color: #ffffff
Tamaño de fuente: 24px

Ahora añadiremos un párrafo debajo para agregar algo de texto.

Añade algo de estilo
Color del texto: #ffffff
Tamaño: Pequeño

Ahora añadiremos el bloque de iconos sociales debajo.

En este bloque de iconos sociales añade el siguiente estilo
Tamaño: 15px
Tamaño de fondo: 10px
Radio de borde: 100
Color: #ffffff

¡Felicitaciones! Tu página de inicio está completada.

2. Diseño de la página de listados y búsqueda del sitio de directorio OceanWP

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.

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 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 toda la configuración predeterminada para el GD > Map. Vamos a darle algo de altura; he decidido darle una altura de 100vh.

Ahora simplemente configura el contenedor principal a ancho completo siguiendo las instrucciones que se muestran en la imagen a continuación.

Ahora estableceremos la plantilla de la página de archivo a ancho completo

también ajustaremos la sección de estilo del encabezado para todas las páginas desde el Personalizador de temas > Opciones generales > Configuración general.
con estilo
Estilo de encabezado: Centrado
Relleno: 20px
Color de fondo: #1e73be
Color del texto: #ffffff

Después de esto, la página de Archivo de listados está lista.

Otra opción es usar el bloque GD > Simple Archive tal 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 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.

3. Diseño de la página de listado individual del sitio de directorio OceanWP

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 contenedor.

Primero 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 en este contenedor.

En este bloque GD > Imagen ajusta la siguiente configuración.

Límite de imágenes: 50

Límite de visualización: 2

Ahora vamos a añadir un contenedor más debajo de este contenedor, donde agregaremos otros bloques necesarios del página de Detalle de Geodirectory.

Ahora vamos a añadir aquí, uno por uno, todos los shortcodes necesarios para la página de detalles de GD. Estos incluyen GD > Single Taxonomies, GD > Single Tabs, GD > Single Next Prev.

Ahora es momento de añadir algunos widgets en 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á una Editar, Eliminar Listado al Autor del Listado.

Añadir 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, nuestra página de Detalle del listado ha sido completada.

Añadir funciones premium a tu sitio web de directorio OceanWP

Si lo deseas, ahora puedes añadir funciones premium a tu directorio, como:

1. 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.
2. 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.
3. 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.

Haz que tu sitio web de directorio destaque siguiendo esta guía: Crea un sitio web de directorio profesional.

Las posibilidades son ilimitadas.