Diseñar una página de recursos digitales con Divi es fácil cuando utiliza los elementos de diseño de su diseño para que funcionen para usted. El constructor visual tiene muchas funciones útiles que hacen que este proceso sea bastante agradable. Pero el diseño no lo es todo. También es importante que su página de recursos funcione. Es por eso que siempre es una buena idea usar proveedores de almacenamiento de terceros como Google Cloud , para ayudarlo a administrar y entregar sus descargas digitales de manera rápida y eficiente. Y agregar enlaces a estas descargas es realmente fácil usando los módulos de Divi.
En este tutorial de caso de uso, lo guiaré a través de cómo diseñar una página de recursos digitales funcionales utilizando el paquete de diseño de conferencia de diseño de Divi.
Estas son algunas de las cosas que lograremos juntos:
- Cree una página de recursos con tres secciones de contenido utilizando el diseño de página de programación
- Cree un menú de recursos personalizado que salte a las diferentes secciones de la página
- Agregue botones personalizados de regreso al principio debajo de cada una de las tres secciones de recursos
- Almacene los archivos de descarga en Google Cloud y cree enlaces públicos a esos archivos para usarlos en la página de recursos
¡Empecemos!
Aquí hay un adelanto de la página de recursos que crearemos juntos.
Crea tu Página de Recursos Digitales
Para crear la página de recursos, agregue una nueva página, asígnele el título «Recursos» e implemente Visual Builder. En el menú de configuración, agregue el diseño de página de programación de conferencias de diseño a su página.
Para obtener detalles sobre cómo agregar diseños a sus páginas, consulte la publicación de blog que presenta el paquete de diseño de la conferencia de diseño .
Cambie el Título en la sección del encabezado de «Horario» a «Recursos». Luego, duplique la sección directamente debajo de la sección del encabezado.
En la misma sección, actualice el título en el módulo de texto en la fila superior para que diga «Descargas de sesión». (Puede simplemente hacer clic en el texto y usar el editor en línea para esto)
En la fila directamente debajo, cambie la estructura de la columna a cuatro columnas y elimine todos los módulos excepto el módulo de texto con el encabezado «Declaraciones de apertura». Luego arrastre ese módulo de texto a la columna del extremo izquierdo.
Ahora estamos listos para agregar nuestros enlaces de descarga. Para hacer esto, usaré los botones que se usan en la sección «Discursos y oradores destacados» del diseño de la página de inicio de la conferencia de diseño. Vaya a la página con su diseño de página de inicio (o cree uno si aún no tiene uno). Usando Visual Builder, guarde uno de los botones en su biblioteca con el nombre «botón de descarga».
Ahora regrese a su página de recursos y agregue ese botón en la segunda columna de su fila de cuatro columnas.
Vaya a la configuración del módulo de botones en la pestaña de contenido y actualice el texto del botón para que diga «Diapositivas (PDF)».
En la pestaña de diseño, cambie la alineación del botón para que esté alineado a la izquierda.
Guardar ajustes.
Copie y pegue (o duplique) el botón que acaba de crear y agréguelo a la tercera columna directamente a la derecha. Luego actualice el texto del botón para que diga «Notas (PDF)».
A continuación, duplique la fila completa dos veces. Actualice el texto del encabezado del módulo de texto en cada una de las filas con cada una de las sesiones destacadas.
Luego elimine las últimas dos filas que no usó en la sección. El diseño final de la sección se verá así.
Creación de la sección de enlaces de recursos
Para crear esta sección, duplique la sección «Descargas de sesión» que acaba de crear. Luego
cambie el texto del título en el primer módulo de texto de la sección duplicada para que diga «Enlaces de recursos».
En la fila directamente debajo, cambie la estructura de la columna a una columna y elimine los dos módulos de botones en la fila. Luego actualice el contenido del módulo de texto restante para que diga «Inspiración de diseño».
A continuación, agregue una fila de tres columnas debajo de la fila que acaba de crear. Agregue un módulo de texto a la columna izquierda y agregue un enlace al cuadro de contenido. Si está utilizando html, agregue lo siguiente:
|
01
|
<a href="enter url here" target="_blank">Link to website</a> |
En la pestaña de diseño, haga clic en la pestaña de enlace y actualice lo siguiente:
Estilo de fuente del enlace: Subrayado
Tamaño del texto del enlace: 16px
Color del texto del enlace: #4646c4
Guardar ajustes.
A continuación, agreguemos otra categoría de enlaces llamada «Blogs de diseño». Para hacer esto, copie la fila que contiene el módulo de texto del título «Inspiración de diseño» y también la fila que contiene las tres columnas de enlaces y péguelos a continuación.
Actualice el módulo de texto con el título «Inspiración de diseño» para leer «Blogs de diseño». Luego cambie la fila de tres columnas a continuación a una estructura de dos columnas. Y puede agregar un texto de descripción junto a cada enlace para ayudar a los usuarios a comprender mejor lo que cada enlace tiene para ofrecer.
Elimine las dos filas restantes que no estamos usando en la sección actual.
Creación de la sección Sesiones de conferencias pasadas
La última sección que vamos a crear para nuestra página de recursos es una sección para mostrar videos y descargas de sesiones anteriores.
Para hacer esto, vamos a utilizar algunos de los elementos de diseño restantes del diseño de la página de Programación original con el que comenzamos. Aún debe tener las dos secciones originales del cronograma debajo de la sección «Enlaces de recursos» que acabamos de crear. Necesitarás esto.
En la primera sección original, elimine todas las filas excepto la fila que contiene «Día 1: miércoles 23 de noviembre». Ahora esa sección solo debe tener una fila. Actualice el texto del encabezado para que diga «Sesiones pasadas de la conferencia».
Debajo de esa sección, agregue una sección especializada con la estructura de una mitad de una mitad de columna con las filas ubicadas en la columna de la derecha.
Luego agregue una fila de una columna a la columna de la derecha y arrastre uno de los módulos publicitarios de la sección original a continuación que se usa para mostrar la hora y la ubicación de las sesiones.
Actualice la configuración de la publicidad con el título «Descripción» y proporcione un nuevo icono de documento.
Después de eso, arrastre un módulo de alternancia desde la sección original debajo de la derecha debajo del módulo publicitario que acaba de agregar.
Duplique el módulo de publicidad con el nuevo título «Descripción» y arrástrelo debajo del módulo de alternancia. Luego cambie el título a «Descargas» y asígnele un icono de descarga en la nube.
Debajo del módulo de alternar, agregue una nueva fila de dos columnas.
Luego copia uno de los botones que creamos en la sección “Descargas de sesiones” y pega 2 botones en cada una de las columnas de la nueva fila.
Luego puede actualizar el texto del botón para reflejar el tipo de descarga a la que se vinculará cada botón. Aquí están los cuatro tipos que agregué:
Vídeo (MP4)
Audio (MP3)
Diapositivas (PDF)
Notas (PDF)
Es posible que deba agregar un margen inferior personalizado de 0px para eliminar algo de espacio debajo de los anuncios publicitarios.
Ahora arrastre uno de los módulos de texto que contiene el título de la sesión de la sección original a continuación a la columna izquierda de la sección de especialidad.
Ahora podemos agregar una grabación de video de la sesión pasada. Para hacer esto, agregue un módulo de video debajo del módulo de texto ingresando la URL del video (si está alojado en youtube o vimeo) y agregue una superposición de imagen personalizada si desea que coincida mejor con el diseño de la página.
Eso es todo. Ahora solo duplique la sección y actualice el contenido según sea necesario para cada sesión adicional. Elimine las secciones originales que quedaron a continuación y guarde su página.
Para las páginas de recursos que tienen mucho contenido, es útil tener una subnavegación para mejorar la experiencia del usuario de encontrar lo que necesitan de forma rápida y sencilla. Para esta página de recursos, le mostraré cómo agregar un menú personalizado con enlaces ancla que saltarán a secciones específicas de la página. Este método es similar a cómo crearía un sitio web de una página con Divi.
Vaya a Apariencia > Menús y cree un nuevo menú llamado «Menú de recursos». Para este menú vamos a utilizar tres enlaces personalizados que saltarán a las tres secciones de nuestra página de recursos. Para el primer enlace personalizado, ingrese «#descargas» dentro del cuadro de entrada de URL y «Descargas de sesión» para el texto del enlace. Luego añádelo al menú.
Para el segundo enlace personalizado, ingrese la URL «#enlaces» y el texto del enlace «Enlaces de recursos».
Para el tercer enlace personalizado, ingrese la URL «#pasado» y el texto del enlace «Sesión de conferencia anterior».
Ahora que nuestro menú ha sido creado, vamos a agregarlo a nuestra página. Primero, agregue una nueva sección de ancho completo justo debajo de la sección de encabezado superior de su diseño. Luego agregue un módulo de menú de ancho completo a la sección. En la pestaña de contenido en la configuración del menú, seleccione «Menú de recursos» como el menú que se mostrará y agregue el siguiente color de fondo: #474bc1.
En la configuración de la pestaña de diseño, actualice lo siguiente:
Color del texto: Claro
Orientación del texto: Centro
Fuente del menú: Merriweather
Peso de la fuente del menú: Negrita
Tamaño del texto del menú: 16 px
Espaciado entre letras del menú: 1 px
Guardar ajustes.
Agregue ID de CSS a su página
¿Recuerdas las URL de enlace personalizadas que agregamos para crear nuestros enlaces de anclaje de menú? Ahora necesitamos agregar las ID de CSS correspondientes para cada uno de esos enlaces para que cada enlace sepa dónde saltar cuando un usuario haga clic en él.
Comencemos con la primera sección que contiene las descargas de nuestra sesión. Abra la configuración de la sección, navegue a la pestaña avanzada e ingrese «descargas» en el cuadro de entrada de ID de CSS. Luego guarde su configuración.
Para la siguiente sección que contiene enlaces de recursos, ingrese «enlaces» para la ID de CSS.
Y para la última sección que contiene las sesiones de conferencias pasadas, ingrese «pasado» para el ID de CSS de la sección que contiene el título de la sección (a uno justo encima de las dos secciones especiales).
Guarde su configuración.
Ahora, cuando haga clic en los enlaces del menú de navegación, se desplazarán a la sección correspondiente.
Adición de enlaces personalizados de regreso al principio en cada sección
Divi tiene una opción incorporada de botón de regreso a la parte superior que flotará en la parte inferior derecha de su página. Puede habilitar fácilmente esta opción en Divi > Opciones de tema en la pestaña General.
Sin embargo, también puede crear su propio botón para volver al principio después de cada sección de su página de recursos. Esto puede crear una mejor experiencia de usuario para los usuarios que pueden no notar el botón predeterminado para volver al principio en la parte inferior derecha de la página.
Para crear un botón de regreso al principio, debemos agregar una nueva fila de una columna debajo de la última fila de contenido en cada una de nuestras tres secciones de recursos.
Luego vamos a copiar una de nuestras notas publicitarias usadas en la sección Sesiones pasadas de la conferencia. Copie la propaganda con el título «Descripción» y péguela en la nueva fila. Actualice el módulo de propaganda para que tenga el título «Volver al principio» con una flecha hacia arriba para el icono. Para la URL, ingrese «#top».
Esta url servirá como enlace ancla que enlazará con la parte superior de la página donde se encuentra el menú de recursos.
En la pestaña de diseño, actualice lo siguiente:
Ancho: 150px
Alineación del módulo: Derecha
Ahora copie este módulo de publicidad con el enlace de regreso a la parte superior y péguelo en la fila que creó debajo de cada una de las tres secciones. De esa manera, cuando un usuario llega al final de una sección, puede volver fácilmente al menú en la parte superior de la página.
El último paso es agregar la ID de CSS a la sección del menú de ancho completo. Abra la configuración del menú de ancho completo y, en la pestaña avanzada, ingrese «superior» para la ID de CSS. Guardar ajustes.
Observe la funcionalidad de los enlaces de anclaje combinados con los botones de volver arriba.
¡Eso es todo! Su diseño de página de recursos está completo. Lo único que queda por hacer ahora es actualizar cada enlace o URL de video con su propio video o recursos de descarga.
Aquí está el diseño final de la página.
Uso de Google Cloud para almacenar sus archivos de descarga
Una vez que se haya registrado en Google Cloud (hay una opción de prueba gratuita ), deberá iniciar sesión en su cuenta de Google y acceder a Google Cloud Console. En el menú desplegable Proyecto, haga clic en Crear proyecto:
Luego cree su nuevo proyecto dándole un nombre y seleccionando Crear.
A continuación, desde su tablero, vaya a Almacenamiento > Navegador.
Luego haga clic en el enlace Crear depósito en la parte superior de la página.
Ingrese el nombre de su nuevo cubo. Lo llamo “diseño-conferencia-recursos”. Puede mantener seleccionada la opción multirregional predeterminada y hacer clic en el botón Crear.
Abre tu nuevo cubo y arrastra tu archivo de descarga al navegador. Una vez que termine de cargarse, haga clic en la casilla de verificación junto a «Enlace público» para que la descarga esté disponible para todos.
Sugerencia: si desea que el archivo se descargue automáticamente en el disco duro del usuario en lugar de abrirlo en un navegador nuevo, comprima su archivo en una versión comprimida antes de agregarlo a su depósito.
Si está interesado, puede obtener más información sobre Google Cloud y cómo se compara con otros proveedores .
Agregar sus enlaces de descarga a su página de recursos
Para agregar sus nuevos enlaces de descarga a su página de recursos, primero debe copiar el enlace público que creó en su Google Cloud Bucket. Simplemente haga clic derecho en el enlace público al lado del archivo que desea y seleccione Copiar dirección de enlace.
Luego regrese a su página de recursos y pegue la URL del enlace en el cuadro de entrada URL del botón para cada uno de los módulos de botón según corresponda.
Pensamientos finales
Si necesita una página de recursos para el sitio web de su conferencia, realmente no tiene que empezar desde cero. El paquete de diseño de la conferencia de diseño le proporcionará todos los elementos de diseño que necesita. Puede proporcionar enlaces de descarga digital que se vean geniales y, si lo desea, puede usar un proveedor de almacenamiento externo como Google Cloud Storage para almacenar esos archivos de descarga para una transmisión y entrega más rápida de esos archivos a todas partes del mundo sin sobrecargar su propio servidor.
Espero que este tutorial de caso de uso lo inspire a crear una página de recursos que les encantará a sus usuarios.
Espero escuchar de usted en los comentarios.
¡Salud!