Hoy, estamos muy emocionados de brindar una mano adicional a los autores de nuestra comunidad (o aquellos que tienen autores como clientes) al proporcionar un diseño Divi completamente nuevo y gratuito que se puede usar como página de inicio o página de destino para libro(s). ).
Este diseño es una combinación de elegancia, seriedad y diversión; ¡la manera ideal de informar a su audiencia sobre su nuevo libro!
Recomendamos usar este diseño como punto de partida y modificar su página de inicio hasta que tenga el mismo estilo que el libro que ha escrito. Representa las emociones, el contenido y la experiencia del libro integrando ciertos aspectos del mismo en tu diseño y estructura, de la misma manera que lo hicimos en este obsequio de Divi.
Hicimos el diseño de un libro con recetas para el desayuno, pero no se preocupe, esta estructura también se puede usar fácilmente para otros temas del libro si cambia las imágenes que se usan.
Aunque esta es solo una página de inicio y no un paquete de sitio completo, este diseño lo ayudará a comenzar y mantener una cierta consistencia de diseño en todo su sitio web. Todas las secciones son reutilizables, receptivas y pueden tener sentido en diferentes partes de su sitio web.
Si desea descargar el diseño de Elegant Authors de forma gratuita, ingrese su dirección de correo electrónico en el formulario a continuación y haga clic en el botón de descarga. Si ya está suscrito a nuestro boletín, ingresar su dirección de correo electrónico no hará que se vuelva a suscribir.
Esto es lo que se incluye en la descarga:
- elegant-authors-master.json : al importar este archivo, se agregará el diseño completo y todas las secciones individuales a su Biblioteca Divi.
- elegant-authors-full-layout.json : este es solo el diseño completo de los autores elegantes.
- Carpeta de secciones : esta carpeta contiene todos los archivos JSON para las seis secciones individuales del elegante diseño de los autores.
- carpeta de imágenes de la galería : esta carpeta contiene las cuatro imágenes de muestra utilizadas en el módulo de la galería del elegante diseño de los autores.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Este obsequio aparecerá en su carpeta de descargas como una carpeta comprimida. Para comenzar, deberá ubicar y descomprimir esa carpeta para usarla con Divi. Para obtener una guía rápida sobre cómo comenzar con Elegant Authors, consulte las secciones a continuación.
Una vez que haya descargado y descomprimido el paquete de diseño de Elegant Authors, puede continuar y agregarlo a su instalación de Divi siguiendo estos pasos:
Vaya a Biblioteca Divi > Importar y exportar»>Divi > Biblioteca Divi > Importar y exportar > Importar > Seleccione el archivo maestro de Elegant Authors
A continuación, continúe y cree una nueva página. Active el Divi Builder y acceda a la Biblioteca Divi yendo a:
Biblioteca Divi (el símbolo «+» en la interfaz)> Agregar desde biblioteca> Autores elegantes
Esto cargará el diseño completo de Elegant Authors en su página.
No olvide configurar esta página como su página principal en la configuración de WordPress para que se convierta automáticamente en la página principal a la que llegan las personas cuando visitan su sitio web.
Vaya a Lectura»>Configuración > Lectura > Portada > Seleccione el título de la página donde cargó el obsequio de Elegant Authors
Empezando
El diseño que diseñamos se compone de 7 secciones en las que hay elementos que se complementan entre sí y entregan una página totalmente interactiva. Sin embargo, para los propósitos de esta publicación, no necesitaremos hacer nada con la sección de pie de página. A continuación, lo guiaré a través de cada una de las seis secciones principales, una por una.
La sección del héroe
Esta sección tiene una fila que se divide en dos columnas. Como notará, el lado izquierdo contiene la imagen de su libro. Reemplace esta imagen con la imagen de la portada de su propio libro, preferiblemente una imagen PNG o JPG que funcione bien con su imagen o color de fondo.
La imagen del libro tiene una cierta cantidad de sombra de cuadro añadida para crear un poco más de profundidad y dejar aún más claro que la imagen representa un libro. Si desea ajustar la sombra o eliminarla:
Vaya a la pestaña CSS de su módulo de imagen> Desplácese hacia abajo hasta la sección del elemento principal> Cambie el código en consecuencia
La sección de testimonios
Estos son testimonios regulares colocados en una fila con solo dos columnas. Decide si quieres que aparezca o no el ícono de cotización haciéndolo visible u oculto.
Estos cuadros de testimonios también contienen una sombra de cuadro. Puedes eliminar la sombra o hacerla más grande o más pequeña haciendo lo mismo que hicimos con la sombra de la portada del libro en la sección anterior:
Vaya a la pestaña CSS de su módulo de testimonios> Desplácese hacia abajo hasta la sección del elemento principal> Cambie el código en consecuencia
Aumente la cantidad de píxeles si desea crear un efecto de sombra más grande o elimine el código si no desea ninguno. Dentro de los corchetes RGBA del código, puedes decidir de qué color quieres que sea tu sombra.
Puedes notar que la sección del título tiene el mismo estilo, en cada sección pero con una estructura diferente que crea una cierta conexión entre las diferentes secciones.
El módulo de texto superior se superpone al segundo. Puede elegir cuánto desea que interactúen entre sí y se superpongan. O puede asegurarse de que no se superpongan entre ellos. Para cambiar o deshacerse de la superposición:
Vaya a la pestaña ‘Configuración de diseño avanzada’ del primer módulo de texto> Cambie el porcentaje de su margen inferior en consecuencia
A continuación, puede ver que la imagen se desliza pero abraza el lado izquierdo de la pantalla. Esto es algo que puede ajustar en los márgenes de su módulo de imagen:
Vaya a la pestaña ‘Configuración de diseño avanzada’ de su módulo de imagen> Cambie el porcentaje del margen izquierdo de su imagen
También puede elegir cuántos anuncios publicitarios desea integrar en la segunda columna de la página. Cada uno de ellos tiene la posibilidad de agregar un ícono (como el globo de diálogo que puedes ver en la parte superior), pero en este caso elegimos solo uno que representa los tres anuncios publicitarios.
La sección de la galería
El módulo de galería es otra característica con la que puedes hacer mucho. Puede elegir cuántas imágenes le gustaría que se muestren en la página de inicio, en qué orden le gustaría verlas y puede agregar inmediatamente un título y una descripción a la imagen que ayude a su audiencia a comprender de qué está hablando. .
En este caso, no hemos añadido ningún título ni descripción para poner el 100% del foco en las imágenes. Esto, por supuesto, depende del tipo de libro que hayas escrito. En los libros de cocina, el lado visual de la comida puede ser un gran atractivo para los clientes, pero en otros tipos de libros puede encajar mejor un texto más explicativo.
Probablemente notará que cuando carga el diseño por primera vez, la galería está vacía o llena de imágenes aleatorias.
Esto se debe a que las imágenes de la galería no se exportan con un diseño o sección. Hemos incluido algunas imágenes de muestra que puede usar en la carpeta comprimida del paquete de diseño. Para agregarlos, vaya a la pestaña de configuración general del módulo de galería. Haga clic en el botón «actualizar galería» y agregue las imágenes proporcionadas.
La sección de información adicional
En esta sección, decidimos dejar que los títulos se superpongan con una de las otras columnas para crear un poco más de interacción entre los elementos. Puede elegir cuánto desea que los dos módulos de texto se superpongan modificando los márgenes superior e inferior en la pestaña ‘Configuración de diseño avanzada’ de su módulo de texto.
Puede configurar cuánto desea que sus títulos interactúen con la columna más cercana cambiando el porcentaje o los píxeles en el margen derecho.
La sección del formulario de contacto
Para la sección de contacto de la página de inicio, decidimos optar por un estilo limpio que funcionaría bien con una imagen de fondo relevante. Al personalizarlo según sus propias necesidades, busque la imagen correcta y asegúrese de que el color de fondo o el patrón en el costado del formulario no haga que el formulario de contacto se vea demasiado complicado, ocupado o ilegible.
Las dimensiones de nuestra imagen son 1600px de ancho por 575px de alto.
Para el formulario de contacto, puede elegir la posición de cada campo que las personas deben completar. En este caso, colocamos el nombre y la dirección de correo electrónico en la misma línea, mientras que el cuadro de mensaje está en su propia línea y en todo el ancho.
Terminando
Esperamos que todos los autores puedan comenzar a trabajar en su propio sitio web Divi lo más fácilmente posible con este diseño.
Cualquier comentario o pregunta es bienvenido en la sección de comentarios a continuación. Estaré a la espera y trataré de responder a todas sus preguntas de la mejor manera posible. Además de eso, si tienes alguna sugerencia sobre tutoriales que te gustaría ver para Divi, ¡dispara!
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.