¿Cómo crear un sitio web de directorio con Bricks Builder?
🚨 ¡Nueva plantilla de Bricks disponible! 🚨
¡Acabamos de lanzar una increíble plantilla de Bricks Builder para hacer que la construcción de tu sitio de directorio con GeoDirectory sea 100 veces más fácil y rápida!
🎯 Demo en vivo: Compruébalo aquí
📥 Descarga y tutorial: Obtén la plantilla de Bricks Directory
💬 Únete a la conversación: Coméntalo en nuestro foro de la comunidad
¡Pruébalo y cuéntanos qué te parece!
Si en cambio prefieres diseñar tu propia plantilla, aquí tienes una guía de introducción para crear un sitio web de directorio usando Bricks Builder y el plugin GeoDirectory:
- Instala el tema Bricks
- Instalar y configurar GeoDirectory
- Diseña el sitio web de directorio usando Bricks Builder
El uso de Bricks Builder junto con el plugin GeoDirectory te permite crear un directorio en línea excepcionalmente sofisticado.
Esta combinación permite integrar sin esfuerzo funciones basadas en la ubicación, personalizar la estética e incorporar bloques de contenido dinámico, lo que da como resultado una experiencia de sitio web intuitiva y atractiva.
Sin embargo, en este tutorial nos centraremos en la simplicidad y la facilidad de uso.
Usaremos Bricks builder principalmente con los shortcodes de GeoDirectory.
En las próximas semanas, profundizaremos y publicaremos tutoriales detallados sobre cómo diseñar cada plantilla de GD principalmente con Bricks Element y query loops (datos dinámicos).
En este tutorial:
Instalación del tema y los plugins.
1. Instala el Bricks Tema
Primero, descarga el tema y el tema hijo desde el sitio web de Bricks website.
Instala el tema en tu sitio web de WordPress desde WP-Admin >> Apariencia >> Temas
Activa la licencia del 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)
En el primer paso del asistente, podrás elegir entre dos sistemas de mapas: Google Maps y OpenStreetMaps.
Para esta guía, elegimos OpenStreetMaps.
Si en cambio quieres usar Google Maps, necesitarás hacer algunas cosas adicionales:
- Haz clic en el botón
- Estos son los pasos importantes:
- Activa las claves.
- Crea un nuevo proyecto o elige uno que ya tengas.
- Obtener la clave.
- Configura una cuenta de facturación.
- Restringe la clave de API (para que solo funcione desde la URL de tu sitio web).
El punto cuatro es imprescindible, pero solo pagas si superas los $200 al mes.
Este crédito gratuito es más que suficiente para el 99% de los directorios.
Configurar la ciudad predeterminada
A continuación, elegirás la ubicación predeterminada, que es la ciudad sobre la que trata el directorio.
Usaremos Philadelphia como ciudad predeterminada, pero puedes elegir cualquier lugar que quieras.
Si estás creando un directorio para varias ciudades, 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.
No es necesario usar AyeCode Connect para este tutorial. Solo es necesario si quieres añadir complementos premium de GeoDirectory e instalarlos directamente desde tu panel de WordPress.
Añadir datos de prueba
El último paso para finalizar el asistente de instalación es agregar algunos listados de ejemplo. Esto también configura categorías para los listados, las cuales puedes cambiar más adelante según prefieras.
Por ahora, no añadiremos widgets en la barra lateral ni elementos de menú. Nos ocuparemos de eso más adelante.
Diseña el Bricks Sitio web de directorio
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.
1. El logotipo
Lo primero es lo primero: necesitamos un logotipo para nuestro sitio web.
No tienes que 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 gastar demasiado tiempo y dinero antes de comprobar si la gente lo quiere.
Puedes crear un logotipo en tan solo cinco minutos usando una aplicación como Canva, que es económica y realmente buena.
Para una versión básica de tu producto (llamada MVP, o producto mínimo viable), un logotipo hecho con Canva funcionará perfectamente.
Hay muchas plantillas de logotipos entre las que elegir, y no pasa nada si tu primer logotipo no es perfecto ni especialmente único.
Si tu proyecto empieza a funcionar bien, siempre puedes trabajar en mejorar o cambiar por completo el logotipo más adelante.
Un logotipo corriente generalmente no es la razón por la que fracasa un proyecto. Usaremos este logotipo cuando creemos el encabezado del sitio web.
1. Bricks 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.
Tendrás que establecer esta página como la página de inicio del sitio; para eso ve a wp-admin >> Ajustes >> Lectura
Ahora configuremos primero el menú de navegación del sitio.
El menú de navegación
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ónMenú del encabezado – Usuario con sesión iniciada y Menú del encabezado – Usuario sin sesión iniciada” options.
Si lo deseas, puedes hacer que el mismo menú aparezca en el móvil o crear otro menú para que aparezca allí.
En este ejemplo, solo tendremos el menú de navegación del encabezado.
Agregamos siete enlaces de navegación principales y algunos enlaces de subnavegación:
- Inicio
- Lugares y agregar lugares
- Buscar
- Blog
- Cuenta
- Páginas de registro e inicio de sesión
La cabecera
Para configurar el encabezado del sitio ve a wp-admin >> Bricks >> Templates >> Add New
Crea una plantilla de Bricks para el encabezado.
seleccionaremos un diseño de dos columnas con una proporción de 30::70.
En la columna izquierda arrastra el bloque Logo y sube el logotipo del sitio en él.
Establezcamos el ancho: 200px
En la columna derecha arrastra el Nav menu en la columna derecha.
con ajustes como
Alinear eje principal: center
Alinear eje transversal: Derecha
Typography
Transformación de texto: Poppins 500
El contenido
Ahora vamos a diseñar la página de inicio. La editaremos haciendo clic en el botón de editar con Bricks.
Añadiremos un contenedor vacío con los siguientes ajustes
Alinear individualmente: Centrado
Alinear ejes principales: Centrado
Alinear eje transversal: Centrado
En el Estilo pestaña de sección
Relleno: 50px (Superior) 50px (Inferior)
Altura mínima: 500
Subir imagen de fondo
Posición del fondo: Centro Centro
Repetición del fondo: Repetir
Ahora añadamos una etiqueta de encabezado sobre este contenedor.
Texto: Encuentra el mejor restaurante en Filadelfia
Ahora, en la pestaña de estilo de la etiqueta de encabezado, añade los siguientes ajustes.
Tipografía:
Tamaño de fuente: 48px
Alineación del texto: Centrado
Transformación del texto: Capitalizar
Fuente: Poppins
Ahora añade un bloque de shortcode debajo y agrega el [gd_search mb=”3″] shortcode dentro de él.
Ahora añadamos otro contenedor vacío e insertemos un bloque de shortcode con el siguiente shortcode.
[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"]
En la pestaña de estilo del contenedor de categorías, ve a Diseño > Margen
Relleno superior: 50px
Relleno inferior: 50px
Relleno izquierdo: 50px
Relleno derecho: 50px
Ahora añadiremos una sección para mostrar los negocios recientes.
Añadamos otra sección vacía con una etiqueta de encabezado y
Texto: Listado de negocios recientes
con la siguiente tipografía como
Tamaño de fuente: 32px
Ahora debajo añadamos el siguiente shortcode
[gd_listings post_type="gd_place" post_limit="8" add_location_filter="1" sort_by="latest" title_tag="h3" layout="4" view_all_link="1" bottom_pagination="1" slide_interval="5" mb="3"]
Ahora debajo queremos añadir un mapa que liste todos los negocios.
Para eso, añadiremos un contenedor vacío y un bloque de shortcode dentro con el siguiente shortcode.
con el siguiente estilo para el contenedor.
Relleno superior: 50px
Relleno inferior: 50px
[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"]
Ahora queremos añadir un CTA; para ello utilizaremos un diseño de dos columnas.
Con los siguientes ajustes
Dirección: Horizontal (fila)
Alinear individualmente: Centrado
Alinear eje transversal: Centrado
Espacio entre columnas: 20
Espacio entre filas: 20
En la columna izquierda arrastraremos una imagen y en la columna derecha añadiremos texto y un botón para ir a la página de añadir listado.
El pie de página
Ahora para diseñar y crear un pie de página ve a wp-admin >> Bricks >> Templates >> Add New
y selecciona el template tag como Pie de página y edita la plantilla con Bricks.
Ahora agreguemos un contenedor vacío con el Color de fondo: #072027
Agrega el bloque de texto básico con algo de texto y estilo Alineación del texto: Centrado
Después de esto, nuestra página de inicio está lista.
2. Bricks Diseño de la página de listados y búsqueda del sitio de directorio
Tienes que crear dos páginas importantes para un directorio: una para los listados (incluyendo un archivo, categorías y etiquetas) y otra para los resultados de búsqueda.
GeoDirectory las configura automáticamente con un diseño básico. Esta guía te ayudará a ajustar un poco la apariencia de estas páginas.
Como la página de listados y la de búsqueda son muy similares, las diseñaremos una sola vez y luego usaremos el mismo diseño para ambas.
Nuestra elección para el diseño de la página de listados es tener los listados a la izquierda y un mapa fijo a la derecha, mostrando la ubicación de cada listado.
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 y edítala con Bricks Builder.
Ahora agregaremos una sección vacía y dentro de ella arrastraremos el Post Title bloque.
Desde la configuración de estilo de la sección, establece
Color de fondo: #072027
Relleno: 30px 10px 30px 10px
Para el bloque de título de publicación, establece la configuración de Tipografía en
Fuente: Poppins
Color: #fffff
Ahora agreguemos una sección vacía y un contenedor de dos columnas ( 50::50 ) dentro de ella.
A continuación, en el contenedor izquierdo, agregaremos bloques de shortcode con los shortcodes 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 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='' ]
Agregaremos un bloque de Shortcode con el shortcode GD > Map en la columna derecha con la siguiente configuración.
[gd_map map_type="auto" post_settings="1" width="100%" height="100vh" maptype="ROADMAP" zoom="0"]
También agregaremos una clase scrolling-gd-loop a la columna izquierda para el desplazamiento táctil. Puedes marcar la opción indicada en la captura de pantalla a continuación.
Agreguemos el siguiente estilo al personalizador del tema.
.scrolling-gd-loop{ overflow-y: scroll !important; max-height: 1000px; }
Ahora, después de esto, nuestra página de archivo está lista.
Para crear el diseño de la página de búsqueda.
Crearemos la GD Search plantilla de página desde Bricks >> Templates >> Add New. Asegúrate de seleccionar Seleccionar tipo de plantilla: GD Search Results
Copia todo el contenido del GD Archive plantilla de Bricks y pégala en la GD Search plantilla de Bricks de la página.
Para hacerlo, en la página de archivo de GD, haz clic en el ícono Copiar (todo) en la columna derecha de Bricks Builder (Estructura)
Navega a la página de búsqueda. Puedes encontrar la página de búsqueda desde Geodirectory > Ajustes > General > Páginas.
Edítala con Bricks. Haz clic en el ícono Eliminar (todo) en la columna derecha de Bricks Builder:
Finalmente, haz clic en el ícono Pegar (todo) en la columna derecha de Bricks Builder:
Esto hará que la página de búsqueda y la página de archivo sean idénticas, a ancho completo, con los resultados en la columna izquierda y el mapa fijo en la columna derecha.
Para la página de búsqueda, también necesitamos indicarle a Bricks que muestre esta plantilla en la página individual.
Para hacer esto, debemos hacer clic en el ícono de engranaje > Configuración de plantilla > Condiciones > Individual > Página de Búsqueda (Título de tu página de búsqueda).
3. Diseño de la página de listado individual de un sitio web de directorio con Bricks
Es momento de crear la plantilla de página de detalle. Iremos a editar el GD Detail plantilla de página en Bricks.
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 lo editaremos usando Bricks.
Agreguemos una sección vacía y añadamos un bloque de shortcode dentro de ella.
Usemos el siguiente shortcode para mostrar el slider de imágenes.
[gd_post_images ajax_load="1" limit="10" limit_show="3" type="slider" slideshow="1" controlnav="1" animation="slide" image_size="large"]
Ahora, dentro de una sección vacía, agreguemos un contenedor de dos columnas.
En el contenedor izquierdo, agregaremos los siguientes shortcodes.
Que incluye GD > Post Title, GD > Single Taxonomies, y GD > Single Tabs.
[gd_page_title tag='h1' no_wrap='false' title_container='1' strip_html='] [gd_single_taxonomies taxonomy='' prefix='' link_style='' link_color='' link_color_custom='' link_icon='false'] [gd_single_tabs heading_font_size="0" heading_text_color_custom="#000000" mt_lg="3" border_type="border"]
En la columna derecha, añadiremos el
GD > Author Action, y GD > Output Location bloque.
[gd_author_actions hide_edit='false' hide_delete='false' author_page_only='false'] [gd_output_location location="detail" list_style="wrap"]
Una vez hecho esto, nuestra página de detalle de listado estará completa.
Añadir funciones premium a tu Bricks Sitio web de directorio
Si lo deseas, ahora puedes añadir funciones premium a tu directorio, como:
- Listados de pago: con el GeoDirectory Listing Price Manager complemento. Puedes decidir cuánto cuesta añadir un listado. Para diferentes niveles de precio, puedes elegir qué funciones se incluyen o no. Por ejemplo, podrías permitir más imágenes para los listados de pago, pero limitarlas para los gratuitos. También puedes decidir si ciertos campos personalizados están disponibles o no, y si las descripciones pueden ser más largas o más cortas.
- Reclamar Listados: Esta función es realmente importante para un directorio. Así es como funciona: el administrador configura la base de datos y luego invita a los propietarios de negocios a gestionar sus listados gratuitos. Cuando un propietario de negocio quiere tomar el control de un listado, es posible que primero deba actualizar a un listado de pago.
- Publicidad: vender anuncios es otra forma de monetizar un directorio en línea. Si tu sitio web recibe muchas visitas, puedes usar redes publicitarias. Pero si no es así, puedes vender anuncios directamente. Eso significa que los negocios pueden pagar para colocar banners en ciertas partes de tu sitio, o sus listados pueden aparecer como anuncios, por ejemplo, en la parte superior de los resultados de búsqueda.
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.
Para quienes se embarcan en su primer proyecto, aquí está tu guía: Construye tu propio sitio web de directorio.
Este tutorial genérico puede adaptarse a cualquier tema o constructor de páginas.
Las posibilidades son ilimitadas.