Cómo construir un diseño de sermón usando campos personalizados y contenido dinámico en Divi

La capacidad de acceder y escuchar sermones es una parte vital de cualquier sitio web de la iglesia. Y, con el lanzamiento del nuevo paquete de diseño de la iglesia de Divi, pensé que sería útil mostrarle cómo puede crear un diseño de sermón utilizando contenido dinámico. Para hacer esto, usaré el complemento Campos personalizados avanzados para crear un grupo de campos personalizados que puede actualizar en el backend de su publicación. Y al usar la función de contenido dinámico de Divi, le mostraré cómo puede diseñar un diseño para extraer esos campos personalizados para completar el contenido de su publicación. Una vez que todo esté dicho y hecho, tendrá un diseño de sermón agradable con contenido dinámico que se puede actualizar en el backend utilizando una interfaz de usuario intuitiva de campos personalizados sin tener que implementar el constructor visual.

Empecemos.

Que necesitas

Para este tutorial, necesitará lo siguiente:

• El tema Divi
• El complemento Campos personalizados avanzados
• El diseño del blog de la iglesia del paquete de diseño de la iglesia (accesible desde Divi Builder)

Adelanto del diseño del sermón

Aquí hay un vistazo al diseño que crearemos. La belleza de este diseño es que la mayor parte del contenido se genera a partir de campos personalizados en el backend utilizando contenido dinámico.

Creación de campos personalizados con el complemento de campos personalizados avanzados

El complemento Advanced Custom Fields (ACF) le facilita agrupar campos personalizados para usarlos como contenido dinámico en sus publicaciones o páginas. Admite varios tipos de campos (como un selector de fechas, un editor Wysiwyg y oEmbed) que facilitan la actualización de los campos personalizados. Esto es extremadamente útil para proporcionar una interfaz de usuario más intuitiva para que los clientes actualicen su sitio utilizando campos personalizados.

Una vez que tenga el complemento ACF instalado y activado, vaya a su Tablero de WordPress y Campos personalizados> Agregar nuevo.

Agregar un nuevo grupo de campo

Para configurar un nuevo grupo, asigne un título al nuevo grupo de campos.

En la sección de ubicación (o alternar) cambie la configuración para que el Tipo de publicación sea igual a "Proyecto" en lugar de Publicación. Básicamente, esto le dice al complemento que solo muestre este grupo de campo personalizado en el tipo de publicación del proyecto integrado en Divi (también puede dejarlo como publicación si lo desea. Su elección).

Luego, desplácese hacia abajo hasta la sección de configuración y actualice lo siguiente:

Posición: alta (después del contenido)

Esta configuración de posición determina la ubicación de su grupo de campo personalizado en el editor de backend de su publicación o página.

Agregar campos personalizados al grupo de campos

Ahora que su grupo ha sido creado y configurado, es hora de comenzar a agregar campos personalizados al grupo.

El campo personalizado del altavoz

Para el primer campo personalizado, agreguemos un lugar para que los usuarios ingresen un orador para el sermón. Para agregar un nuevo campo, haga clic en el botón "Agregar campo" e ingrese lo siguiente:

Etiqueta de campo: Altavoz
Nombre de campo: altavoz
Tipo de campo: Seleccionar
Opciones (ingrese cada una en una línea nueva): pastor principal, pastor asociado, pastor de jóvenes, orador invitado

El campo personalizado del título del sermón

A continuación, agregue un campo personalizado para el título del sermón.

Etiqueta de campo: Título del sermón
Nombre de campo: sermon_title
Tipo de campo: Texto
Texto de marcador de posición: título del sermón

El campo personalizado de la fecha del sermón

Luego, agregue un campo personalizado para la fecha del sermón. Este lo configuraremos para tener un tipo de campo selector de fecha para que agregar nuevas fechas sea muy fácil en el backend.

Etiqueta de campo: Fecha del sermón
Nombre de campo: sermon_date
Tipo de campo: Selector de fecha
Formato de visualización: F j, Y
Formato de retorno: F j, Y
La semana comienza el: lunes

El campo personalizado de la descripción del sermón

A continuación, agregue un campo personalizado para la descripción del sermón. Esto permitirá a los usuarios actualizar el contenido de la publicación utilizando un editor Wysiwyg sin tener que abrir el generador visual.

Etiqueta de campo: Descripción del sermón
Nombre de campo: sermon_description
Tipo de campo: Editor Wysiwyg

El campo personalizado de inserción de audio del sermón

A continuación, agregue un campo personalizado para la inserción de audio del sermón usando el tipo de campo oEmbed. Esto nos permitirá incrustar una inserción de audio del sermón simplemente actualizando la URL de audio para la inserción en el backend.

Etiqueta de campo: Sermón Audio incrustado
Nombre de campo: sermon_audio_embed
Tipo de campo: oEmbed

El campo personalizado de la URL de audio del sermón

A continuación, agregue un campo personalizado para la URL de audio del sermón para que podamos usar la URL para completar un enlace dentro de un módulo para crear un enlace de descarga al archivo.

Etiqueta de campo: URL de audio del sermón
Nombre de campo: sermon_audio_url
Tipo de campo: URL

Bien. Una vez que los campos personalizados se hayan agregado a nuestro grupo de campos, no olvide guardar su grupo de campos. Ahora podemos comenzar a crear el diseño del sermón para nuestro contenido de sermón de campo personalizado que se utilizará como contenido dinámico en toda la publicación.

Crear un nuevo proyecto

Desde el panel de WordPress, vaya a Proyectos> Agregar nuevo. Luego ingrese un título para el Proyecto que también debería ser el título del sermón (pero eso depende de usted). Luego haga clic para usar Divi Builder. Verá el grupo de campos personalizados que se muestran en la parte superior del generador de divi.

Ahora complete los campos personalizados con la información del sermón específica de esta publicación.

Orador: Pastor Principal (seleccionado de un menú desplegable)
Título del sermón: Una nueva creación (o lo que quieras)
Fecha del sermón: seleccione la fecha del selector de fechas
Descripción del sermón: use el editor WYSIWYG para ingresar la descripción del sermón
Sermon Audio Embed: ingrese la URL del archivo multimedia que desea insertar en el reproductor multimedia
URL de audio del sermón: ingrese la URL del archivo multimedia (debe ser un archivo zip si desea que se descargue inmediatamente al hacer clic)

Luego agregue una imagen destacada para su proyecto. Esto servirá como la imagen utilizada para el reproductor de audio del diseño del sermón.

Agregar un nuevo diseño prediseñado para su proyecto

Ahora haga clic para usar Visual Builder.

(Nota: Actualmente, el constructor de backend no admite contenido dinámico, por lo que debemos implementar el constructor visual. Si prefiere personalizar el diseño con una funcionalidad de constructor de backend más funcional, simplemente implemente el constructor visual y haga clic en el modo de estructura alámbrica).

Luego haga clic en la opción para elegir un diseño prefabricado. En la ventana emergente Cargar desde la biblioteca, seleccione el paquete de diseño de la iglesia y luego haga clic para usar el diseño de la página del blog de la iglesia.

Una vez que el diseño está cargado en la página, elimine la segunda, cuarta y quinta secciones del diseño. Ahora su diseño solo debe tener tres secciones: la sección del encabezado superior, la sección "Últimos sermones" y la sección del pie de página inferior.

A continuación, elimine el módulo de blog en la segunda sección.

Actualice el módulo de texto "Últimos sermones" para que tenga el siguiente contenido:

<h3>Description</h3>

Luego, duplique ese módulo de texto y actualice el contenido para que diga "Escuchar ahora".

Adición del contenido dinámico del diseño del sermón

La descripción del sermón

Ahora estamos listos para comenzar a construir el contenido de audio dinámico del sermón para nuestra sección. Para empezar, vamos a agregar la descripción del sermón justo debajo del módulo de texto con el título “Descripción”. Para hacer eso, agregue un nuevo módulo de texto. Coloca el cursor sobre el cuadro de entrada de contenido y haz clic en el ícono de contenido dinámico.

Luego, seleccione el campo personalizado Descripción del sermón de la lista desplegable.

Guardar ajustes.

Ahora la descripción de su sermón se mostrará como contenido dinámico. Esto significa que todo lo que agregue al cuadro de entrada de la descripción del sermón en la pantalla del editor de backend se actualizará en la página del proyecto de forma dinámica.

El módulo de audio y el audio incrustado

Debajo del módulo de texto con el título "Escuchar ahora", agregue un nuevo módulo de audio. Luego actualice el contenido del texto con el siguiente contenido dinámico:

Título: Título del sermón (campo personalizado)
Nombre del artista: Ponente (campo personalizado)
Nombre del álbum: fecha del sermón (campo personalizado)

Las etiquetas realmente no importan, ya que nos preocupa principalmente la ubicación del contenido dinámico dentro del módulo de audio. El título del sermón, el orador y la fecha del sermón se muestran muy bien dentro del módulo de audio sin mucho trabajo.

Para la imagen de portada del módulo de audio, agregue contenido dinámico haciendo clic en el ícono de contenido dinámico al pasar el cursor sobre el área de vista previa de la imagen y seleccione Imagen destacada.

Ahora, lo que haya establecido como imagen destacada en el backend, automáticamente completará la imagen de la portada del audio de su sermón.

Para que coincida mejor con el diseño del diseño, guarde su configuración y vaya a copiar el fondo de la sección inferior haciendo clic derecho en el texto de la categoría Fondo en la configuración de la sección y seleccionando "Copiar fondo".

Ahora pegue el fondo en la configuración de fondo del módulo de audio abriendo la configuración del módulo de audio, haciendo clic derecho en el texto de la categoría de fondo y haciendo clic en la opción "Pegar fondo".

Luego salte a la configuración de diseño y actualice lo siguiente:

Orientación del texto: izquierda
Margen personalizado: 0px inferior

Ahora todo lo que nos queda para completar el reproductor de audio del sermón es la inserción del reproductor de audio real. Actualmente, la caja de entrada de audio integrada en el módulo de audio no admite contenido dinámico (estoy seguro de que lo hará en el futuro), por lo que vamos a hacer una pequeña solución. Vamos a crear un nuevo módulo de texto y agregar el archivo de audio incrustado usando contenido dinámico. Y debido a la forma en que WordPress reconoce el código abreviado generado por el campo personalizado, mostrará el reproductor de audio predeterminado.

Para hacer esto, agregue un módulo de texto debajo del módulo de audio y luego agregue el campo personalizado "Sermon Audio Embed" como contenido dinámico. Asegúrese de habilitar HTML sin formato para que el código corto funcione.

Ahora podemos colocar nuestro reproductor de audio dentro del módulo de audio con un margen personalizado. Vaya a la pestaña de diseño y actualice lo siguiente:

Margen personalizado (escritorio): -40px superior, 280px izquierda, 60px derecha
Margen personalizado (tableta): 0px izquierda, 0px derecha

El enlace de descarga

A veces, es útil para los usuarios descargar el archivo de audio. Para facilitar esto, puede agregar un enlace al archivo de audio de su publicación. Para hacer esto, usaremos contenido dinámico para llenar un módulo de propaganda con el título del sermón y la URL de audio.

Agregue un módulo de propaganda debajo del módulo de audio y actualice el contenido de la siguiente manera:

Título: Título del sermón (campo personalizado)
Icono: ver captura de pantalla
URL del enlace del título: URL de audio del sermón (campo personalizado)

Para diseñar la propaganda para que se parezca más a un enlace en el que se puede hacer clic, actualice lo siguiente:

Color del icono: rgba (33,50,94,0.86)
Ubicación de la imagen / icono: Izquierda
Estilo de fuente del título: U
Color de subrayado del título: rgba (33,50,94,0.86)
Color del texto del título: rgba (33,50,94,0.86)
Altura de la línea de título: 2em
Ancho del contenido: 100%

Para que el enlace sea aún más reconocible como descarga, puede editar el contenido dinámico del título del sermón que ocupa el título de la propaganda con texto adicional en el cuadro de entrada posterior que dice "(descargar)".

Adición del título y meta del sermón al encabezado

Para el último paso, asegurémonos de que nuestra sección de encabezado de proyecto / publicación esté usando contenido dinámico para el título de la publicación junto con el nombre del orador y la fecha del sermón. Para hacer esto, abra la configuración del módulo de encabezado de ancho completo y actualice lo siguiente:

Título: Título del sermón (campo personalizado)
Texto de subtítulo: Altavoz (campo personalizado)
(Nota: para el contenido dinámico del altavoz, ingrese "por:" en la entrada anterior)
Botón n. ° 1 Texto del enlace: eliminar
Texto del enlace del botón 2: eliminar
Contenido: Fecha del sermón (campo personalizado)

Ahora vaya a la pestaña de diseño y saque el relleno personalizado que se está utilizando.

Aquí esta el resultado final.

Ahora todo lo que necesita hacer en el futuro es guardar el diseño en su biblioteca Divi para usarlo en futuras publicaciones de sermones. Y dado que tiene su grupo de campo personalizado listo para todos los proyectos, simplemente puede actualizar la información del campo personalizado en el backend sin tener que abrir el Visual Builder.

Además, con los sermones guardados como proyectos, ¡puede crear fácilmente un portafolio filtrable para mostrar sus sermones!

Pensamientos finales

Espero que este tutorial ayude a arrojar algo más de luz sobre el contenido dinámico y cómo se puede usar con el complemento Advanced Custom Fields para crear un diseño poderoso para los sermones. Puede llevar algún tiempo configurar todo, pero la recompensa definitivamente puede valer la pena. Por supuesto, este mismo proceso se puede utilizar para crear todo tipo de contenido dinámico para diferentes tipos de publicaciones. Avíseme si tiene alguna pregunta en los comentarios a continuación. Espero escuchar de usted.

¡Salud!