Cómo crear un sitio web de directorio con Elementor
Cómo construir un sitio web de directorio sencillo con Elementor de forma gratuita, o crear un directorio en línea súper profesional con Elementor PRO y los complementos premium de GeoDirectory.
¿Cómo construir un sitio web de directorio con Elementor?
La forma más sencilla de construir un sitio web de directorio con Elementor usando el plugin gratuito de Elementor es seguir los siguientes 4 pasos:
- Instalar el tema Hello
- Instalar Elementor
- Instala y configura GeoDirectory
- Diseñar el sitio web de directorio con Elementor
Veamos cómo podemos hacerlo en detalle. Pero primero, veamos por qué esta solución es la mejor.
La mejor forma de construir un sitio web de directorio usando Elementor.
Para construir un sitio web de directorio con Elementor, Elementor.com sugiere usar los plugins Custom Post Type UI, Advanced Custom Fields y Elementor Custom Skin.
¿Es esa la mejor opción?
Es posible, pero solo si planeas construir un directorio sencillo sin lo siguiente:
- Un gran número de listados (la tabla de base de datos wp-posts no escala bien)
- Muchos campos personalizados para cada listado (Advanced Custom Fields no escala tampoco)
- Opción para que los usuarios añadan y editen sus listados desde el front end
- Búsqueda avanzada por ubicación, proximidad, GeoLocalización o campos personalizados
- Listados de pago con características adicionales y mayor visibilidad
- Opciones para que los propietarios de listados reclamen su listado
- Reseñas de usuarios y ordenación de listados por valoración
- Mapas interactivos con indicaciones para llegar al negocio
- Formularios de contacto para enviar correos electrónicos a los propietarios de negocios
- Otras opciones de monetización
- Un Directorio de Eventos
Siguiendo su tutorial, puedes crear un catálogo de negocios con información esencial y muy poca interactividad para los visitantes de tu sitio web.
Aquí enumeramos todos los desafíos a los que te enfrentarás si sigues este enfoque:
Desarrollar un Sitio Web de Directorio con Custom Post Types y Advanced Custom Fields
Si en cambio necesitas uno o más de los puntos enumerados anteriormente, necesitarías muchos plugins adicionales y, en algunos casos, bastante código personalizado.
¡Tiene que haber una manera mejor! ¡Y la hay!
Puedes usar GeoDirectory:
El Mejor Plugin de Directorio para Elementor
Con sus complementos premium, puedes obtener todo lo indicado anteriormente y mucho más.
Además, es posible que ni siquiera necesites usar Elementor PRO, ya que la versión gratuita de Elementor será más que suficiente para este tutorial.
Solo necesitas Elementor PRO si tienes un diseño muy sofisticado y personalizado.
Así que, sin más preámbulos, veamos cómo puedes crear un Sitio Web de Directorio con GeoDirectory, un tema gratuito, la versión básica del plugin Elementor y un complemento gratuito de terceros.
Sitio Web de Directorio con Elementor usando solo un Tema Gratuito y Plugins Gratuitos
Comenzaremos este tutorial mostrándote cómo crear un sitio web de directorio sencillo utilizando recursos gratuitos de WordPress, como el Plugin gratuito de Elementor, su tema gratuito Hello Theme y el plugin gratuito GeoDirectory.
Contará con lo siguiente:
- Listados ilimitados con campos personalizados ilimitados.
- Búsqueda por proximidad.
- Reseñas de usuarios
- Un formulario para añadir listados, que permite a los usuarios enviar sus listados, editarlos y/o eliminarlos desde el front end del sitio web.
Por supuesto, WordPress, de forma predeterminada, incluye la opción de crear un blog y páginas ilimitadas.
Damos por hecho que ya tienes un proveedor de Hosting y WordPress instalado.
En este tutorial estoy creando un Directorio de Negocios para la ciudad de Filadelfia.
En este tutorial:
Instalación del tema y los plugins.
1. Instala el Hello Theme
Primero, deberás instalar un tema. Para este tutorial, instalarás el Hello Theme, que es el tema de inicio de Elementor.
Ve a Apariencia >> Temas
Selecciona Añadir nuevo, Instalar, y Activar el tema Hello.
2. Instala Elementor
Ahora deberás instalar el maquetador de páginas. En este caso, instalarás la versión gratuita del Plugin Elementor.
Ve a Plugins >> Añadir nuevo.
Busca Elementor. Instálalo y actívalo.
Puedes omitir todos los pasos del Asistente de configuración.
3. Instalar GeoDirectory
Por último, pero no menos importante, necesitas instalar GeoDirectory.
Ve a Plugins >> Añadir nuevo, busca GeoDirectory. Instálalo y actívalo, y con eso habremos terminado de instalar los plugins por ahora.
4. Asistente de instalación de GeoDirectory
Para GeoDirectory, deberás completar el asistente de configuración para configurar la clave API de Google Maps e importar algunos listados de ejemplo.
Elegir el sistema de mapas (Google Maps u OpenStreetMap)
Puedes elegir entre dos sistemas de mapas en el primer paso del asistente: Google Maps y Open Street Maps (que no requiere una clave API).
En este tutorial, seleccionamos Google Maps.
Haz clic en el botón Generar clave y sigue los pasos en este documento para generar una clave API válida.
Los pasos esenciales son:
- Crear o seleccionar un proyecto existente.
- Activar las claves.
- Obtener la clave.
- Activar una cuenta de facturación.
- Restringir la clave API (para que solo pueda usarse desde la URL de tu sitio web)
Sobre el punto cuatro: es un requisito. Sin embargo, solo se te cobra si superas el límite, que es de $200/mes.
Este crédito gratuito es más que suficiente para el 99% de los directorios.
Configurar la ciudad predeterminada
A continuación, deberás establecer la ubicación predeterminada. Esta es la ciudad para la que se crea el directorio. Dejaremos la ciudad predeterminada sin cambios.
GeoDirectory utiliza Philadelphia como ciudad predeterminada.
Puedes usar cualquier ubicación que necesites.
Si necesitas agregar listados a más de una ciudad, necesitarás el complemento Location Manager.
Añadir funciones adicionales
En este paso, instalaremos UsersWP, nuestro plugin de registro de usuarios que permite a los usuarios registrarse e iniciar sesión en su sitio web.
Esto es necesario para permitir que los usuarios añadan y editen sus listados. También creará perfiles de usuario donde los usuarios podrán encontrar sus listados, reseñas y otra información relevante.
También instalaremos Ninja Forms para que todos los listados tengan un formulario de contacto que envíe correos electrónicos directamente a los propietarios del listado.
AyeCode Connect no es obligatorio para este tutorial. Es necesario principalmente si deseas añadir complementos premium de GeoDirectory e instalarlos directamente desde el Panel de WordPress.
Añadir datos de prueba
El último paso del asistente de instalación es añadir algunos listados de ejemplo. 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 Elementor
Ahora que hemos instalado el tema, los plugins y completado la configuración inicial de GeoDirectory, podemos empezar a diseñar nuestro Sitio Web de Directorio con Elementor.
1. Diseño de la página de inicio del Sitio Web de Directorio con Elementor
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 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.
Seleccionaremos la página de entradas más adelante.
El logotipo
Antes que nada, necesitaremos un logotipo para nuestro sitio web.
No necesitas contratar a un diseñador para crear la primera versión de tu logotipo.
Uno de los mayores errores que puedes cometer al iniciar un nuevo negocio es invertir demasiado tiempo y dinero antes de comprobar la adecuación del producto al mercado.
Puedes diseñar un logotipo en tan solo cinco minutos con una aplicación como Canva, que es sorprendentemente asequible y efectiva.
Para un MVP (producto mínimo viable), un logotipo diseñado con Canva será más que suficiente.
Hay varias plantillas de logotipo para elegir, y no importa si tu logotipo inicial no es tan perfecto u original como te gustaría.
Si tu proyecto gana tracción, siempre puedes invertir en mejorarlo o hacer cambios radicales más adelante.
Un logotipo mediocre nunca es la causa principal del fracaso de un proyecto.
Después de diseñar tu logotipo, ve a Apariencia > Personalizar > Identidad del sitio, haz clic en Seleccionar logotipo y sube tu archivo PNG. Omite el recorte (o recorta la imagen según sea necesario) y haz clic en publicar.
El menú de navegación
Después de crear y añadir el logotipo, ve a Apariencia > Menús, y crea tu menú.
Añade los enlaces necesarios (de la columna izquierda a la columna derecha) y guarda. En la sección Ajustes del menú > Ubicación de visualización, puedes marcar la opción "Encabezado".
Si lo deseas, puedes hacer que el mismo menú aparezca en el pie de página o crear otro menú para que aparezca allí.
En este ejemplo, solo tendremos el menú de navegación del encabezado.
Añadimos siete enlaces:
- Inicio
- Acerca de
- Blog
- Lugares
- Perfil
- Iniciar sesión
- Cerrar sesión
El enlace de inicio de sesión (desde los Endpoints de UsersWP) solo aparecerá para los usuarios que no han iniciado sesión, mientras que los enlaces de cierre de sesión y de perfil solo aparecerán para los usuarios que han iniciado sesión.
El contenido
Ahora puedes empezar a diseñar la página de inicio. Primero, deberás añadir una imagen hero debajo del encabezado.
Para hacerlo, ve a Páginas > Inicio y haz clic en Editar con Elementor.
Si usaste la página de muestra, elimina el Editor de texto haciendo clic derecho sobre el texto y seleccionando eliminar. Si creaste una página nueva, agrega una sección. (Haz clic en el botón de más del constructor de páginas donde dice Arrastra el widget aquí.)
Ahora tienes una página en blanco con solo una sección de una columna.
Haz clic en el ícono Editar sección (ícono central azul claro de las secciones) y selecciona Ancho completo en la opción Ancho del contenido.
A continuación, haz clic en Estilo desde las pestañas superiores. Selecciona > Clásico como Tipo de fondo.
Para la sección hero, usaremos esta imagen gratuita de Filadelfia de Pexels.com (Gracias, @Kelly).
Centro centro.
Ahora solo puedes ver una franja de nuestra imagen, pero el siguiente paso hará que aparezca como se necesita.
La imagen necesita una superposición; de lo contrario, el texto encima no tendrá suficiente contraste y será difícil de leer.
Haz clic en Superposición de fondo, selecciona Tipo de fondo: Clásico, Color: Negro (#000000) y Opacidad: 0.5 (ya debería estar configurado de esa manera).
Ahora que hemos oscurecido la imagen hero, podemos añadir texto.
Haz clic en el centro de la imagen (un botón gris con el signo más apenas visible). Esto mostrará los widgets en el panel izquierdo de Elementor.
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.
Puedes añadir el eslogan que quieras aquí. No olvides centrar el texto usando la opción de alineación.
Desde la pestaña Estilo, cambia el color del texto a blanco (#FFFFFF) para mejorar el contraste y la legibilidad.
A continuación, añade algo de relleno para mostrar la imagen hero como se esperaba. Selecciona la pestaña Avanzado del panel izquierdo de Elementor y desvincula los valores de relleno (esto se hace haciendo clic en el ícono de enlace al final de los valores).
Añade 250 al valor superior y 50 al valor inferior. Deja 0 tanto para los valores derecho e izquierdo.
Puedes añadir el widget de búsqueda de GeoDirectory debajo del título para completar la imagen hero de la página de inicio.
Pero primero, necesitas añadir una sección interna para controlar el ancho del formulario de búsqueda.
En el panel izquierdo de Elementor, haz clic en el ícono de cuadrícula (a la derecha del logotipo de Elementor) para volver a la lista de elementos.
Arrastra y suelta un elemento de Sección interna debajo del Título.
La sección interna tendrá dos columnas de forma predeterminada. Debes eliminar una.
Haz clic derecho en una de ellas y elimínala. Ahora haz clic en la otra y establece su ancho en 700.
Ahora puedes añadir el elemento GD > Búsqueda a la sección interna.
En el panel izquierdo de Elementor, haz clic nuevamente en el ícono de cuadrícula (a la derecha del logotipo de Elementor) para volver a la lista de elementos.
Buscar GD > Search y arrástralo y suéltalo dentro de la sección interna.
Por último, haz clic en la pestaña Avanzado, desvincula los valores de relleno y añade 200 a la opción de relleno inferior. Esto mostrará la parte inferior de la imagen hero.
Ahora puedes añadir algunos widgets de listados debajo de la imagen hero, junto con un widget que muestre algunas entradas del blog.
Para añadir, por ejemplo, una cuadrícula con cuatro listados, deberás agregar una nueva sección debajo de la imagen hero, configurada con un ancho de contenido en caja y 1140 como ancho.
Dentro de esta sección, primero añade un Encabezado para los listados recientes, cambia el texto a Recent Listings (o lo que consideres más adecuado), centra el texto, cambia el color a gris oscuro (#333333), y añade 50px de margen superior desde la pestaña Avanzado.
A continuación, añade el widget «GD > Listings». Los ajustes que se deben modificar son:
En Filtros > Publicaciones a mostrar = 4
En Sorting > Sort by = latest
En Design > Layout = Grid View (four columns)
Wrappers Styles > Margin Top = 5
Es hora de añadir algunas entradas del blog.
Usé este plugin para generar entradas de prueba con imágenes. Usé el Post Grid Elementor Add-on para mostrarlas en la página de inicio.
Debajo de los listados, añade un Encabezado para las entradas recientes, cambia el texto a Recent Posts (o lo que consideres más adecuado), centra el texto, cambia el color a gris oscuro (#333333), y añade 50px de margen superior desde la pestaña Avanzado.
A continuación, añade el Post Grid (de WPC Element) y ajusta los siguientes parámetros:
Desde la pestaña Estilo > Título > Tipografía, cambia el tamaño de fuente a 1.25rem y el color para que coincida con el color de los títulos de los listados (#1E73BE).
Por último, desde la pestaña Avanzado, añade un margen superior de 50px.
Listo. La página de inicio está completa. Puedes añadir lo que quieras a continuación, pero esto es más que suficiente para este tutorial.
2. Diseño de la página de listados y búsqueda del sitio de directorio con Elementor
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 de forma predeterminada, pero en este tutorial eliminaremos las páginas predeterminadas y crearemos las nuestras propias.
Crearás dos páginas idénticas. Usaremos un diseño con dos columnas anchas.
A la izquierda estarán los listados y, a la derecha, un mapa fijo que mostrará la ubicación exacta de los listados.
Esto es muy sencillo.
Página de listados
Ve a Páginas > Añadir nueva > Añade el título = Listings. Publica la nueva página.
Tras publicar la página, haz clic en el botón Editar con Elementor.
Haz clic en el icono de engranaje en la esquina inferior izquierda de la pantalla, oculta el título, establece el diseño de página en Elementor Full Width y haz clic en Actualizar.
Añade una sección (Haz clic en el botón más del maquetador de páginas donde dice Arrastra un widget aquí.)
En Diseño > Ancho del contenido, selecciona Ancho completo. Ahora haz clic en el botón más dentro de la nueva sección, busca GD > Simple Archive y arrastra y suelta el widget dentro de la sección recién creada.
Ajusta los siguientes parámetros.
Salida principal > Marcar Mostrar búsqueda
Mapa > Activar mapa fijo
Haz clic en Actualizar. Con esto termina la página de listados.
Para la página de búsqueda, repetimos el mismo proceso.
Página de búsqueda
Ve a Páginas > Añadir nueva > Añade el título = S. Publica la nueva página.
Tras publicar la página, haz clic en el botón Editar con Elementor.
Haz clic en el icono de engranaje en la esquina inferior izquierda de la pantalla, oculta el título, establece el diseño de página en Elementor Full Width y haz clic en Actualizar.
Añade una sección (Haz clic en el botón más del maquetador de páginas donde dice Arrastra un widget aquí.)
En Layout > Content Width, selecciona Full Width. Ahora haz clic en el botón más dentro de la nueva sección, busca GD > Simple Archive y arrastra y suelta el widget dentro de la sección recién creada.
Ajusta la siguiente configuración:
- Salida principal > Marcar Mostrar búsqueda
- Mapa > Activar mapa fijo
Haz clic en Update. Eso es todo para la página de búsqueda.
Necesitamos cambiar la configuración de GeoDirectory para indicarle al plugin que use estas dos páginas en lugar de las predeterminadas.
Desde el panel de control de WordPress, haz clic en GeoDirectory > Settings > Pages.
Asigna nuestra página titulada Listings como la página de archivo y la página titulada S como la página de búsqueda.
Hemos completado tanto la nueva página de Listings como la de búsqueda, y GeoDirectory ya sabe cómo utilizar estas nuevas plantillas.
3. Diseño de la página de listado individual para un directorio web con Elementor
Para completar el directorio, necesitamos diseñar una plantilla más: la página GD Details. Esta es la plantilla que se utiliza para mostrar los listados individuales.
GeoDirectory genera una automáticamente, pero la reemplazaremos para crear una nueva página.
. Guárdala como borrador.
Necesitamos cambiar la configuración de GeoDirectory para indicarle al plugin que use esta página en lugar de la página GD Details predeterminada.
Desde el panel de control de WordPress, haz clic en GeoDirectory > Settings > Pages.
como la página de detalles.
Ahora volvamos a la página, ábrela y haz clic en el botón de editar con Elementor.
Como hicimos con las páginas anteriores, haz clic en el ícono de engranaje en la esquina inferior izquierda de la pantalla, oculta el título, establece el diseño de la página en Elementor Full Width y haz clic en update.
Añade una sección (Haz clic en el botón más del maquetador de páginas donde dice Arrastra un widget aquí.)
En Layout > Content Width, selecciona Full Width. Ahora haz clic en el botón más dentro de la nueva sección, busca GD > Post Images y arrastra y suelta el widget dentro de la sección recién creada.
Ajusta la siguiente configuración:
- General > Show Limit: 3
- Design > Output Type: Slider
Drag Widget Here
Ajusta la siguiente configuración:
- General > Output Type: H1
- Design > Font Size: H1
Ahora necesitaremos agregar el contenido del listado. Agrega una nueva sección (Haz clic en el botón más del maquetador de páginas donde dice Arrastra un widget aquí.)
Selecciona el diseño de dos columnas 66/33 (con la columna izquierda del doble de tamaño que la derecha)
Arrastraremos el elemento GD > Single Tabs a la columna izquierda. La única opción que debes activar es Content > Show as a list.
Mostrará la descripción, la galería de fotos, el mapa y las reseñas de cada listado en forma de lista.
Si no activas la opción Show as List, mostrará un grupo de 4 pestañas, cada una con el contenido mencionado anteriormente.
Agregaremos el elemento GD > Output location en la columna derecha.
Este elemento agrupa varios datos sobre el listado, incluidas etiquetas, categorías, direcciones, información de contacto y horario de atención.
Estos detalles también están disponibles como elementos individuales que pueden usarse por separado para diseños personalizados.
Por ejemplo, puedes usar el elemento GD > Post Address para mostrar la dirección en cualquier lugar de tu página.
Para todo el contenido, existe el elemento GD > Post Meta Cada campo personalizado puede mostrarse a través de este elemento configurando el valor KEY según corresponda.
Como alternativa, puedes usar el elemento GD > Badge para mostrar prácticamente cualquier información del listado como un botón.
Para completar nuestra página de listado individual del directorio, agregaré CSS personalizado para adaptar el diseño al tema y lograr el aspecto deseado.
Prefiero tener todo mi CSS en un solo lugar, y me gusta agregarlo en Appearance >> Customizer >> Additional CSS con comentarios.
/* Reduce list heading font size */ h2.gd-tab-list-title.h3 { font-size: 1.25rem; } /* Add white space between headings and content */ div#geodir-tab-content-post_content, div#geodir-tab-content-post_images, div#geodir-tab-content-post_map, div#geodir-tab-content-reviews { margin-top: 30px ; }
Así es como se ve la página de listado individual después de esto.
Esto es todo. Construimos nuestro sitio web de directorio con Elementor usando el Hello Theme, la versión gratuita de Elementor y GeoDirectory.
Añadir funciones premium a tu sitio web de directorio con Elementor
Si lo deseas, ahora puedes añadir funciones premium a tu directorio, como:
- Listados de pago: Con el GeoDirectory Listing Price Manager complemento, puedes establecer precios para el envío de listados. Para cada nivel de precio, puedes activar o desactivar funciones como: restringir el número de imágenes en los listados gratuitos mientras permites más imágenes en los listados de pago, permitir más o menos etiquetas y categorías, activar o desactivar campos personalizados específicos, y enviar descripciones más largas o más cortas.
- Reclamar Listados: Esta es una función fundamental para un directorio en el que el administrador crea la base de datos e invita a los propietarios de negocios a tomar el control de sus listados gratuitos. El proceso de reclamación de un listado puede incluir la obligación de actualizar a un listado de pago para asumir la propiedad del listado.
- Publicidad: vender anuncios es otra forma de monetizar un directorio en línea. Si tienes mucho tráfico, puedes usar redes publicitarias. De lo contrario, puedes vender anuncios directamente, permitiendo que las empresas añadan banners en áreas específicas de tu sitio web o que los listados aparezcan como anuncios, por ejemplo, en la parte superior de los resultados de búsqueda orgánicos.
Estos son solo tres ejemplos. Sin embargo, un sitio web de directorio ofrece muchas formas de ganar dinero en línea.
Puedes crear un mercado global de artículos artesanales, vender entradas para eventos u ofrecer cupones de descuento.
Únete a nuestra comunidad de miembros y haz realidad tu idea: Crear un sitio web de directorio.
Las posibilidades son infinitas.
Construye un sitio web de directorio con Elementor PRO
Como se mencionó anteriormente, con Elementor PRO puedes lograr diseños mucho más sofisticados, y te recomiendo que consultes esta entrada del blog para ver el alcance completo de la integración de GeoDirectory con Elementor PRO:
Personaliza el diseño de las plantillas de GeoDirectory con Elementor Pro
Plantillas de sitio web de directorio para Elementor Pro
Para los usuarios de Elementor PRO, ofrecemos varias plantillas de instalación con un solo clic que proporcionan sitios web de directorio completamente funcionales con datos de muestra.
Estas plantillas son gratuitas y se pueden instalar en menos de un minuto.
A continuación, edita el contenido de muestra con tu contenido real y ajusta la plantilla para que coincida con tu marca cambiando el logotipo, la paleta de colores del sitio web de directorio y la tipografía.
A continuación se muestran algunos ejemplos de lo que puedes conseguir con GeoDirectory y Elementor PRO.
Demos de instalación con un clic a través del plugin AyeCode connect, ver este artículo del blog para un tutorial
Directorio de eventos (Elementor Pro)
Un directorio de eventos y mercado de entradas creado con Elementor Pro.
¿Te interesa un tutorial para crear un sitio web de directorio con Gutenberg en lugar de Elementor? Consulta este artículo sobre cómo crear un sitio web de directorio con el Astra Theme.
Comparar la integración de GeoDirectory con Elementor PRO frente a otros plugins de directorio para WordPress es uno de los ejercicios más útiles a la hora de seleccionar un plugin. Abordamos la cuestión de la integración nativa de datos dinámicos en nuestra comparación con Directorist y nuestra comparación con HivePress. HivePress, en particular, ha tenido el soporte para Elementor como una solicitud de función confirmada desde 2022, tal como se documenta en el artículo de comparación.
Boletín - ¡Mantente al día!
Recibe las últimas noticias, consejos y contenido exclusivo directamente en tu bandeja de entrada.
