¿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:
- Instalar el tema Divi
- Instalar y configurar GeoDirectory
- 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?
Cita de la sección de preguntas frecuentes del artículo: 7 Best WordPress Directory Plugins in 2023 (Ranked).
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.
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?
- Instalación del tema y los plugins.
- Diseñar el sitio web de directorio con Divi
- 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:
- Activar las claves.
- Crear o seleccionar un proyecto existente.
- Obtener la clave.
- Activar una cuenta de facturación.
- Restringir la clave API (para que solo pueda usarse desde la URL de tu sitio web)
Sobre el punto cuatro: es un requisito. Sin embargo, solo se te cobra si superas el límite, que es de $200/mes.
Este crédito gratuito es más que suficiente para el 99% de los directorios.
Configurar la ciudad predeterminada
A continuación, 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:
- Inicio
- Acerca de
- Blog
- Cuenta
- Perfil (Visible para usuarios con sesión iniciada usuarios)
- Cambiar Contraseña (Visible para usuarios con sesión iniciada usuarios)
- Cerrar sesión (Visible para usuarios con sesión iniciada usuarios.)
- Registrarse (Visible para usuarios sin sesión iniciada)
- Iniciar sesión (Visible para usuarios sin sesión iniciada)
- ¿Olvidaste tu contraseña? (Visible para usuarios sin sesión iniciada)
- Página de Búsqueda
- 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:
- Listados de pago: con el GeoDirectory Listing Price Manager add-on, puedes establecer precios para el envío de listados. Para cada nivel de precio, puedes activar/desactivar funciones como: restringir el número de imágenes en los listados gratuitos mientras permites más imágenes en los de pago. Permitir más o menos etiquetas y categorías. Activar o desactivar campos personalizados específicos. Enviar descripciones más largas o más cortas.
- Reclamar Listados: Esta es una función fundamental para un directorio, en 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.
- 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.