Aquí tienes una guía fácil de entender sobre cómo crear un sitio web de directorio usando el plugin Breakdance Website Builder:
- Instala el plugin Breakdance
- Instalar y configurar GeoDirectory
- 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:
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:
- Activar las claves.
- Crear o seleccionar un proyecto existente.
- Obtener la clave.
- Activar una cuenta de facturación.
- Restringir la clave API (para que solo pueda usarse desde la URL de tu sitio web)
Sobre el punto cuatro: es un requisito. Sin embargo, solo se te cobrará si superas el umbral de $200/mes.
Este crédito gratuito es más que suficiente para el 99% de los directorios.
Configurar la ciudad predeterminada
Después de eso, configurarás la ubicación predeterminada. Esta es la ciudad para la que se crea el directorio.
Estableceremos Philadelphia como la ciudad predeterminada.
Puedes usar cualquier ubicación que necesites.
Si necesitas agregar listados en varias ciudades, necesitarás el complemento Location Manager.
Añadir funciones adicionales
En este paso, instalaremos UsersWP, un plugin de 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:
- Inicio
- Acerca de
- Blog
- Lugares y agregar lugares
- Perfil
- Iniciar sesión
- Cerrar sesión
El enlace de inicio de sesión (desde los Endpoints de UsersWP) solo aparecerá para los usuarios que no han iniciado sesión, mientras que los enlaces de cerrar sesión, cuenta y perfil solo aparecerán para los usuarios que sí han iniciado sesión.
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:
- 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 el que el administrador crea la base de datos e invita a los propietarios de negocios a tomar el control de sus listados gratuitos. El proceso de reclamación de un listado puede incluir la obligación de actualizar a un listado de pago para asumir la propiedad del listado.
- Publicidad: vender anuncios es otra forma de monetizar un directorio en línea. Si tienes mucho tráfico, puedes utilizar redes de publicidad. De lo contrario, puedes vender anuncios directamente, permitiendo a las empresas añadir banners en áreas específicas de tu sitio web o haciendo que los listados aparezcan como anuncios, por ejemplo, en la parte superior de los resultados de búsqueda orgánicos.
Estos son solo tres ejemplos. Sin embargo, un sitio web de directorio ofrece muchas formas de ganar dinero en línea.
Puedes crear un mercado global de artículos artesanales, vender entradas para eventos o vender cupones de descuento.
Aprende los aspectos fundamentales con esta guía esencial: Los aspectos esenciales para crear un sitio web de directorio.
Las posibilidades son infinitas.