La capacidad de acceder y escuchar los sermones es una parte vital de cualquier sitio web de la iglesia . Y, con el lanzamiento del nuevo Church Layout Pack de Divi, pensé que sería útil mostrarle cómo puede crear un diseño de sermón usando 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 atraer esos campos personalizados para completar el contenido de su publicación. Una vez que todo esté dicho y hecho, tendrá un buen diseño de sermón 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 generador visual.
Empecemos.
Para este tutorial, necesitará lo siguiente:
- El tema Divi
- El complemento de campos personalizados avanzados
- El diseño del blog de la iglesia del paquete de diseño de la iglesia (accesible desde Divi Builder)
Vista previa del diseño del sermón
Aquí hay un vistazo al diseño que construiremos. 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 hacen que la actualización de campos personalizados sea realmente fácil. Esto es extremadamente útil para proporcionar una interfaz de usuario más intuitiva para que los clientes actualicen su sitio usando campos personalizados.
Una vez que haya instalado y activado el complemento ACF, vaya a su Tablero de WordPress y Campos personalizados> Agregar nuevo.
Agregar un nuevo campo Grupo
Para configurar un nuevo grupo, asigne un título al nuevo grupo de campo.
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 campos personalizados 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 campos personalizados en el editor de back-end 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 del campo:
Nombre del campo del orador:
Tipo de campo del orador: Seleccione
Opciones (ingrese cada una en una nueva línea): 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 del campo: sermon_title
Tipo de campo: Texto
Marcador de posición Texto: 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 que tenga un tipo de campo de selector de fecha para que agregar nuevas fechas sea muy fácil en el backend.
Etiqueta de campo: Fecha del sermón
Nombre del 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 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 del campo: sermon_description
Tipo de campo: Editor Wysiwyg
El campo personalizado Sermon Audio Embed
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á insertar una inserción de audio del sermón simplemente actualizando la URL de audio para la inserción en el backend.
Etiqueta de campo: Sermon Audio Embed
Nombre de campo: sermon_audio_embed
Tipo de campo: oEmbed
El campo personalizado URL de audio del sermón
Luego, agregue un campo personalizado para la URL del 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 del campo: URL del audio del sermón
Nombre del campo: sermon_audio_url
Tipo de campo: Url
Está 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 que nuestro contenido de sermón de campo personalizado se use como contenido dinámico en toda la publicación.
Crear un nuevo proyecto
Desde el panel de WordPress, navegue hasta 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 divisiones.
Ahora complete los campos personalizados con información del sermón específica para esta publicación.
Orador: Pastor principal (seleccionado de un menú desplegable)
Título del sermón: Una nueva creación (o lo que desee)
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
Incrustación de audio del sermón: ingrese el dirección URL del archivo multimedia que desea incrustar en el reproductor multimedia
URL del audio del sermón: ingrese la dirección 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 imagen utilizada para el reproductor de audio del diseño del sermón.
Agregar un nuevo diseño prefabricado para su proyecto
Ahora haga clic para usar Visual Builder.
(Nota: Actualmente, el generador de back-end no admite contenido dinámico, por lo que debemos implementar el generador visual. Si prefiere personalizar el diseño con una funcionalidad más del generador de back-end, simplemente implemente el generador 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 se carga en la página, elimine las secciones segunda, cuarta y quinta 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:
|
01
|
<h3>Description</h3> |
Luego duplique ese módulo de texto y actualice el contenido para decir «Escuchar ahora».
Agregar el 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 del sermón dinámico 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. Pase el cursor sobre el cuadro de entrada de contenido y haga clic en el icono 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 descripción del sermón en la pantalla del editor de back-end se actualizará dinámicamente en la página del proyecto.
El módulo de audio y la inserción de audio
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: Orador (campo personalizado)
Nombre del álbum: Fecha del sermón (campo personalizado)
Las etiquetas realmente no importan ya que lo que nos preocupa principalmente es 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 mouse sobre el área de vista previa de la imagen y seleccione Imagen destacada.
Ahora, lo que sea que haya configurado como su imagen destacada en el backend, se completará automáticamente con la imagen de portada para el audio de su sermón.
Para que coincida mejor con el diseño del diseño, guarde su configuración y copie el fondo de la sección inferior haciendo clic con el botón 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 de su módulo de audio abriendo la configuración del módulo de audio, haciendo clic con el botón derecho en el texto de la categoría de fondo y haciendo clic en la opción «Pegar fondo».
Luego salta a la configuración de diseño y actualiza 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 real del reproductor de audio. Actualmente, el cuadro de entrada de audio integrado 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 abreviado 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): -40 px arriba, 280 px a la izquierda, 60 px a la derecha
Margen personalizado (tableta): 0 px a la izquierda, 0 px a la derecha
El enlace de descarga
A veces, es útil para los usuarios descargar el archivo de audio. Para hacerlo más fácil, puede agregar un enlace al archivo de audio a su publicación. Para hacer esto, vamos a usar contenido dinámico para llenar un módulo de propaganda con el título del sermón y la URL del audio.
Agregue un módulo de publicidad 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 del 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 de icono: rgba(33,50,94,0.86)
Ubicación de imagen/icono: Título izquierdo
Estilo de fuente: U
Color de subrayado de título: rgba(33,50,94,0.86)
Color de texto de título: rgba(33,50,94, 0.86)
Altura de la línea del título: 2em
Ancho del contenido: 100%
Para hacer que el enlace sea aún más reconocible como una 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)».
Agregar el título del sermón y el meta al encabezado
Para el último paso, asegurémonos de que nuestra sección de encabezado de proyecto/publicación use 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 del subtítulo: Orador (campo personalizado)
(Nota: Para el contenido dinámico del orador, ingrese «por:» en la entrada anterior)
Texto del enlace del botón n.º 1: eliminar
Texto del enlace del botón 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 tendrá que 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 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 más luz sobre el contenido dinámico y cómo se puede usar con el complemento Campos personalizados avanzados para crear un diseño poderoso para los sermones. Puede tomar 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. Déjame saber si tienes alguna pregunta en los comentarios a continuación. Espero escuchar de usted.
¡Salud!