Agregar un foro a su sitio es un proceso bastante simple. Existen algunos complementos excelentes que le brindarán la funcionalidad, pero puede ser difícil hacer coincidir el diseño del foro con su diseño Divi.
En este tutorial de caso de uso, le mostraré cómo agregar un foro a su sitio que sea a la vez poderoso y hermoso. Usaré el paquete de diseño de maratón de Divi con el complemento de foro WPForo.
Creo que te sorprenderá el resultado.
Empecemos.
Aquí hay un adelanto del foro que crearemos juntos.
Lo que necesitas para este tutorial
Para completar este tutorial, necesitará lo siguiente:
- Tema Divi (instalado y activo)
- El maratón Acerca del diseño de la página (accesible desde su Divi Builder)
- Complemento WPForo
Creando tu foro
Para crear el foro, utilizaremos el complemento WPForo. Puede encontrar el complemento buscándolo desde el panel de control de WordPress navegando a Complementos> Agregar nuevo.
Una vez que haya activado el complemento, vaya a Foros > Foros. Esto lo llevará a la página Categorías y foros donde puede configurar nuevas categorías y foros y cambiar su orden y jerarquía. De forma predeterminada, verá un bloque de categoría azul llamado «Categoría principal» con un bloque de foro blanco llamado «Foro principal». Esto significa que tiene un foro llamado «Foro principal» en la categoría «Categoría principal».
Cambiemos el nombre de nuestra categoría principal a «Maratón» haciendo clic en el icono de edición en el menú del bloque azul.
Luego actualice la información de la categoría de la siguiente manera:
Título: Maratón
Descripción: Estos son todos nuestros Foros de Maratón.
Forum Slug: maratón
Diseño de categoría: simplificado
Publica tus cambios.
Vuelva a la página Categorías y foros y haga clic para editar el foro principal.
Actualice lo siguiente:
Título: Correr es un estilo de vida
Descripción: Este es un foro sobre el estilo de vida de correr maratones.
Forum Slug: correr es un estilo de vida
Publica tus cambios.
Vamos a crear un foro más en la categoría Marathon yendo a la página Categorías y foros y haciendo clic en el botón Agregar nuevo en la parte superior de la página.
Luego actualice lo siguiente:
Título: Preparación para la carrera
Descripción: Este foro analiza cómo prepararse para una maratón.
Forum Slug: preparación para la carrera
Foro para padres: maratón
Publica tus cambios.
Actualizar la configuración del foro
Ahora que hemos creado nuestros foros, vayamos a la configuración del foro navegando a Foros > Configuración.
En la pestaña General , puede actualizar la URL base del foro, el título del foro y la descripción del foro.
No olvides actualizar tus opciones antes de pasar a la siguiente pestaña.
El complemento viene con tres diseños de foro (o plantillas). Estos incluyen el diseño simplificado (el que estamos usando), el diseño extendido (excelente para una estructura de varios foros con mucho contenido) y un diseño de preguntas y respuestas. Dado que estamos utilizando el diseño simplificado, la configuración de la pestaña Foros no se aplica.
La pestaña Accesos a foros le permite configurar los permisos para cada grupo de usuarios que tendrá acceso a sus foros. De forma predeterminada, los invitados tendrán acceso de solo lectura, los usuarios registrados tendrán acceso estándar y los administradores tendrán acceso completo.
Pase el cursor sobre Acceso estándar y haga clic en editar para actualizar los permisos si lo desea.
Tenga en cuenta que siempre que un usuario se registre en el foro, sus publicaciones estarán en espera de moderación hasta que usted (el administrador) las apruebe en la página de moderación. Además, si deja marcada la opción «Puede adjuntar archivo», el espectador recién registrado aún no podrá publicar archivos adjuntos hasta que haya publicado con éxito 4 o 5 publicaciones exitosas y aprobadas. Esta es una medida de seguridad útil contra los spammers.
Puede omitir la pestaña Temas y publicaciones por ahora, pero esas opciones pueden ser útiles para su propio foro más adelante.
La pestaña Miembros tiene algunas opciones realmente geniales. Puede hacer cosas como agregar redireccionamientos personalizados después de que el usuario inicie sesión, se registre y/o confirme la suscripción. Incluso puede personalizar el sistema de calificación y las insignias que recibirán los miembros al publicar en el foro (que me encanta).
Puede omitir la pestaña Correos electrónicos por ahora, pero esto será útil para configurar sus correos electrónicos de confirmación y notificación.
La pestaña Funciones contiene muchas opciones poderosas para personalizar su foro. Puede revisarlos en su propio tiempo para ver si alguno se aplica a su situación. Las siete primeras opciones (y la última) te permiten elegir qué elementos del foro quieres mostrar. Para nuestros propósitos, me gustaría limpiar un poco el foro ocultando la sección de estadísticas del foro y el pie de página de WPForo.
Así es como se ve nuestro foro actualmente con esos dos elementos en la parte inferior.
Para ocultar estos elementos, seleccione «No» para «Mostrar estadísticas del foro» y también seleccione «No» para la opción «Ayudar a wpForo a crecer, mostrar información del complemento» en la parte inferior de la página.
Diseñando tu foro
La pestaña de estilo es donde puede diseñar su foro editando la combinación de colores y los tamaños de fuente. Incluso puede agregar su propio css personalizado.
Comience actualizando los siguientes tamaños de fuente:
Foros: 27px
Temas: 27px
Contenido de la publicación: 16px
Luego agregue el siguiente CSS personalizado en el cuadro de entrada:
|
01
|
#wpforo-wrap #wpforo-title{font-size: 46px; font-weight: 600; line-height: 1.3em; } |
Este css cambia el título del foro a un tamaño de fuente más grande con más espacio para que coincida con nuestro diseño Divi Marathon.
Puede notar que no tiene la opción de cambiar la fuente real que se usa para el foro. No es un problema. Podemos manejar eso desde el constructor Divi cuando agregamos el código abreviado del foro a la página.
Los estilos de color del foro son un poco abrumadores (y confusos) a primera vista porque no sabe qué colores se asignan a qué elementos en nuestro foro. Para encontrar esta información, haga clic en el enlace de documentación.
Esto lo enviará a la documentación sobre estos colores y qué elementos se ven afectados por cada uno. La documentación es útil porque no solo enumera los elementos asignados a cada color, sino que también le brinda el ID/clase de CSS de destino que se puede usar para personalizar elementos individuales.
Para hacer coincidir los colores de nuestro diseño Divi Marathon con nuestra paleta de colores predeterminada, actualice lo siguiente:
Color 9: #ffffff
Color 11: #4866FF (este es el color tomado del color del botón en el diseño de maratón)
Color 12:
#4866FF Color 14: #4866FF
Color 15: #4866FF
Color 16: #4866FF
Diseño de la página de su foro
Una vez que activa WPForo, se crea automáticamente una página de foro para usted. La página de inicio del foro se puede encontrar en la url example.com/community/. Continúe y busque la página del foro de su lista de páginas y haga clic para editarla. La página tendrá un shortcode en la sección de contenido de la página. Usaremos este shortcode para insertar el foro dentro de un módulo de texto de nuestro diseño.
Implemente Divi Builder y Visual Builder. A continuación, abra el menú de configuración en la parte inferior, haga clic en el icono Agregar de la biblioteca y seleccione usar el diseño de página Acerca de Marathon.
Eliminar la primera fila en la primera sección. Luego reemplace el módulo de video en la fila restante en la primera sección con un módulo de texto.
En el cuadro Contenido del módulo de texto, ingrese el código abreviado [wpforo].
En la pestaña de diseño, actualice lo siguiente:
Fuente del texto: Montserrat
Fuente del enlace: Montserrat
Peso de la fuente del enlace: Medio
Fuente del encabezado: Montserrat
Relleno personalizado: 3 % superior, 3 % derecho, 3 % inferior, 3 % izquierdo
Box Shadow: selecciona la tercera opción y cambia el color de la sombra a rgba(0,0,0,0.12).
Guardar ajustes.
Vaya a la configuración de la sección y cambie el relleno personalizado a su valor predeterminado. Luego deshabilite la opción de sombra de caja.
Guarde su configuración.
Luego, elimine las filas y secciones restantes debajo de su sección de foro.
Ahora veamos el resultado final.
Para agregar temas a sus foros, haga clic en uno de los foros desde la página del foro y haga clic en el botón Agregar tema.
Este es un ejemplo de cómo se ve una página de tema.
Así es como se ve tu foro en el móvil:
Pensamientos finales
Los foros son una característica popular en la web en estos días. Entonces, ¿por qué no agregar uno a su sitio web de maratón? El complemento WPForo tiene una funcionalidad excelente y, con un poco de personalización con Divi Builder, puede hacer coincidir el diseño de su foro con el paquete de diseño de maratón de Divi.
Espero que este tutorial de caso de uso lo ayude a crear su propio foro hermoso para su sitio web.
Y como siempre, espero saber de usted en los comentarios.