Bienvenido al día 3 de 3, el último día de nuestra serie sobre cómo agregar estilos personalizados a los formatos de publicación de blog de Divi. Por defecto, Divi viene con seis formatos de publicación de blog: Estándar, Video, Audio, Cita, Galería y Enlace. En esta serie te enseñamos a personalizarlos con php y css.
Hoy es el último día de nuestra serie sobre cómo agregar plantillas y estilos personalizados a los formatos de publicación de blog de Divi. Este último día de la serie está dedicado al diseño. Con nuestro single.php personalizado y nuestro tema secundario activo, estamos listos para agregar estilo a los formatos de publicación del blog.
Lo guiaré a través de los seis formatos de publicación a medida que agregamos algunos toques de diseño únicos a cada uno. Al final de este tutorial, tendrá seis excelentes alternativas a los formatos de publicación de blog predeterminados que viene con Divi.
También tendrá una página de blog bastante única que muestra los diferentes elementos destacados del formato de publicación. Por ejemplo, el formato del enlace mostrará un cuadro de enlace personalizado en lugar de la miniatura de la imagen destacada. La publicación en formato de galería mostrará un control deslizante de imágenes de las imágenes de su galería en lugar de la miniatura de la imagen destacada. Etcétera.
Aquí hay un vistazo de cómo se vería la página de su blog después del tutorial de hoy (estoy usando el módulo Divi Blog con un diseño de cuadrícula en el gif a continuación).
Empecemos.
Primero necesitamos hacer algunos cambios generales de estilo usando el personalizador de temas. Desde su panel de WordPress, vaya a Divi → Personalizador de temas → Configuración general → Configuración de diseño y cambie lo siguiente:
Ancho de medianil del sitio web: 2
Marque Usar ancho de barra lateral personalizado
Ancho de barra lateral: 30
También en Personalizador de temas, vaya a Combinaciones de colores y seleccione Naranja.
Ahora echemos un vistazo a cómo se ve tu publicación estándar hasta ahora:
Como puede ver, todavía necesita un poco de estilo, pero todo está en el lugar correcto. Tiene una sección de héroe que abarca todo el ancho de la página. Todavía no tiene una imagen destacada, por lo que el fondo solo muestra el degradado que agregó anteriormente a su archivo single.php. Además, el título de la publicación y el meta están dentro de la sección de héroe. Ahora es el momento de agregar el resto de los elementos de diseño.
Diseñar la sección Hero para todos los formatos de publicación
Dado que cada uno de sus formatos de publicación compartirá la misma sección principal y el mismo diseño de la barra lateral, primero puede agregar este CSS personalizado. Vuelva al personalizador de temas, haga clic en CSS adicional en la parte inferior y agregue el siguiente CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
.hero-section { padding-top: 120px; padding-bottom: 120px; background-repeat: no-repeat; background-size: cover; position:relative; max-height: 450px; background-color: #333;}.single-post #main-content #left-area {padding-top: 0px;}/* ---- Sidebar Settings ---- */.single #sidebar {background: #efefef; padding-top: 20px; padding-right: 20px; padding-left: 20px; padding-bottom: 20px;}/* ---- Standard Post Title & Post Meta ---- */.single h1.entry-title,.attachment h1.entry-title, .single p.post-meta {width: 100%;text-align: center;padding-left: 8px;padding-right: 8px;font-weight: 800;text-transform: uppercase;color: #fff;} @media only screen and (min-width: 980px) {/*** Set title font size for desktop ***/.single h1.entry-title {font-size: 65px !important;} } |
Ahora mira cómo se ve una publicación estándar ahora.
Con la sección principal y el estilo de la barra lateral en su lugar, está listo para diseñar los formatos de publicación individuales.
Diseñar el formato de publicación estándar
El formato de publicación estándar es el formato predeterminado para todas las publicaciones de su blog. Puede seleccionar el formato de publicación estándar al editar su publicación.
Todo lo que vamos a hacer para este formato estándar es agregar la imagen destacada. Debido a que esta imagen destacada se extenderá por todo el ancho de la pantalla, sugiero usar una imagen de 2000 x 600. Estoy usando imágenes de unsplash.com.
Después de agregar su imagen destacada, vea cómo se ve la publicación estándar.
Diseñar el formato de publicación de video
Para diseñar el formato de publicación de video, asegúrese de tener el formato de video seleccionado para su publicación.
A continuación, agregue la URL o incruste un video en su contenido. El formato de video tomará la primera URL de video, la etiqueta de video o la incrustación y la mostrará en la parte superior del contenido de su publicación. Este video también reemplazará la imagen destacada en la página de tu blog.
Para este ejemplo, solo estoy usando una URL de video de YouTube.
Agregue su imagen destacada de 2000 x 600 a la publicación.
A continuación, agregaremos un estilo adicional al video destacado para darle un borde blanco y elevarlo ligeramente para que se superponga a la sección del héroe y se destaque un poco.
Vaya a Personalizador de temas → CSS adicional y agregue el siguiente CSS personalizado:
|
01
02
03
04
05
06
|
/* ---- Format the Position of the Video Wrapper ---- */ @media only screen and (min-width: 980px) { /*** elevate the video to overlap the hero section ***/.single-post.single-format-video .et_main_video_container {margin-top: -120px; background: #fff; outline: 10px solid #ffffff !important; z-index: 100; margin-bottom: -100px;}} |
Ahora echa un vistazo a tu nueva publicación de formato de video.
Alternativamente, puede hacer que esta publicación sea de ancho completo para otra excelente opción de diseño. Simplemente vaya a editar su publicación y, en la configuración de publicación de Divi en la parte superior derecha de la página, seleccione un diseño de página de ancho completo.
Ahora echa un vistazo a la publicación de formato de video de ancho completo:
Dar estilo al formato de publicación de audio
Para el Formato de publicación de audio, asegúrese de haber seleccionado Formato de audio para su publicación.
Agregue su imagen destacada de 2000 x 600.
A continuación, agregue su archivo de audio a su publicación. Puede ser un archivo .mp3, .m4a, .ogg o .wav. Puede cargar su archivo de audio en su biblioteca de medios e insertarlo en su publicación de tres maneras diferentes (incrustar un reproductor multimedia, vincular a un archivo multimedia o vincular a una página de archivos adjuntos).
Cualquiera de estas tres opciones funcionará. Pero, para este ejemplo, solo agregaré una URL simple al archivo de audio. WordPress convertirá esta URL de audio en un reproductor multimedia en la parte superior de la publicación.
Ahora echemos un vistazo a la publicación de formato de audio.
Eso no está mal, pero podría ser mejor. Ocultemos el reproductor multimedia duplicado que se muestra debajo del reproductor multimedia naranja y agreguemos una imagen de fondo a nuestro reproductor multimedia naranja.
Vaya a Personalizador de temas → CSS adicional y agregue el siguiente CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
11
|
/* ----- Add Background Image to the Audio Player & Change size of the player ----- */body.single .et_audio_content, .blog .et_audio_content {margin-bottom: 0px !important;height: 300px !important;background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');background-repeat: no-repeat;background-size: cover; }/* ---- Hide the Duplicate Audio Player ------ */div#mep_1 {display: none;} |
Luego busque y cargue una imagen en su galería de medios (debe tener alrededor de 700 x 300). Luego copie la URL y péguela en el CSS de arriba donde dice «INGRESE LA URL DE LA IMAGEN AQUÍ».
|
01
|
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE'); |
Ahora ve a ver tu nueva publicación de formato de audio.
Diseñar el formato de publicación de cotización
Para el Formato de publicación de cotización, asegúrese de tener el Formato de cotización seleccionado para su publicación.
Luego agregue una imagen destacada de 2000 x 600 a la publicación.
El formato de cotización utiliza el código abreviado blockquote para generar una visualización de cotización personalizada. Por lo tanto, agregue una cita en bloque a su contenido para que se muestre la cita personalizada.
Ahora revisa tu publicación.
Personalicemos el cuadro de cotización destacado con un poco de CSS para darle una imagen de fondo y citas grandes en la parte superior derecha.
Vaya a Personalizador de temas → CSS adicional y agregue el siguiente CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
/* ---- Add Background Image to the Quote Box ---- */ .et_quote_content { background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE')!important;background-repeat: no-repeat;background-size: cover; }/* ---- Add the Quotation Symbol to the Quote Box ---- */ .et_quote_content blockquote p::before {font-family: Cardo;position: absolute;top: 16px;left: 5%;margin-left: -16px;border-radius: 31px;background: rgba(255, 255, 255, .0);font-size: 70px; font-color: #fff;content: "201C" !important;}/* ---- Text Format Inside of quote ---- */@media only screen and (min-width: 980px) {.single-post.single-format-quote blockquote p {font-size: 30px !important;font-weight: 600 !important;}} |
Busque y cargue una imagen en su galería de medios (debe tener alrededor de 700 x 300). Luego copie la URL y péguela en el CSS de arriba donde dice «INGRESE LA URL DE LA IMAGEN AQUÍ».
|
01
|
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE'); |
Ahora mira tu resultado final:
Diseñar el formato de publicación de la galería
Para el formato de publicación de la galería, asegúrese de tener el formato de galería seleccionado para su publicación.
A continuación, asegúrese de agregar su imagen destacada de 2000 x 600.
El formato de publicación de la galería le permite crear una galería dentro del contenido de su publicación desde la galería de medios.
Para crear una galería para su publicación, primero cargue al menos 6 imágenes en su galería de medios. El tamaño de la imagen puede variar, pero dado que la galería tiene un efecto de caja de luz que amplía las imágenes a tamaño completo, puede hacer que las imágenes sean de aproximadamente 1200 x 800.
Ahora seleccione sus imágenes en la galería de medios, seleccione Crear galería y haga clic en el botón «Crear una nueva galería».
Ahora deberías tener un shortcode de galería en tu contenido.
Esta galería se mostrará en su publicación en un diseño de mosaico de tres columnas de ancho. La galería también reemplazará la imagen destacada en la página de tu blog con un control deslizante de las imágenes de tu galería.
Ahora ve a ver tu publicación.
Agreguemos algo de CSS a la galería para elevarla un poco para superponer la sección del héroe y cambiar los márgenes alrededor de cada una de las imágenes.
Vaya a Personalizador de temas → CSS adicional y agregue el siguiente CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
|
/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */ @media only screen and (min-width: 980px) { .single-format-gallery .et_post_meta_wrapper { margin-top: -100px;} .et_post_gallery {z-index: 100;position: relative;border-top: 8px solid #fff !important;border-left: 8px solid #fff !important; background: #fff !important;}/* ---- Set Background Color, Margins & Padding for the Gallery Image ---- */ .et_gallery_item { margin: 0 0 0 0 !important;} .et_gallery_item {width: 33.3%;margin: 0 0% 0% 0 !important;padding-right: 8px !important;background: #fff !important;padding-bottom: 8px !important;}} |
Ahora mira el resultado final.
Dar estilo al formato de publicación del enlace
Para el Formato de publicación de enlace, asegúrese de tener el Formato de enlace seleccionado para su publicación.
A continuación, agregue su imagen destacada de 2000 x 600 a su publicación.
El formato de publicación de enlace toma el primer enlace de la publicación y lo muestra en la parte superior del contenido dentro de un cuadro. Esta pantalla de enlace personalizado también reemplaza la miniatura de la imagen destacada para esta publicación en la página de su blog.
Continúe y agregue un enlace a su publicación y vea el diseño de la publicación.
Ahora mejoremos un poco el diseño agregando una imagen de fondo al cuadro de enlace personalizado y un ícono a la izquierda de la URL del enlace.
Vaya a Personalizador de temas → CSS adicional y agregue el siguiente CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
/* ---- Add thick border to the left side and Lower the link box ---- */.et_link_content {border-bottom: 8px solid #ddd; background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(ENTER IMAGE URL HERE);background-size: cover;background-color:#edb059; border-radius: 25px; }/* ---- Font Settings within the Link box ---- */.et_link_content a.et_link_main_url { font-size: 21px; font-weight: 600; color: #fff !important;}/* ---- Link Symbol on the right side ---- */ .et_link_content::before {font-family: "ETmodules";position: absolute;top: 38%;left: 5%;margin-right: -26px;border-radius: 31px;background: rgba(255, 255, 255, .0);font-size: 48px; color: #fff;content: "e02c";}/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */@media only screen and (min-width: 980px) { .single-format-gallery .et_post_meta_wrapper { margin-top: -100px;} |
Luego busque y cargue una imagen en su galería de medios (debe tener alrededor de 700 x 300). Luego copie la URL y péguela en el fragmento de CSS que acaba de ingresar donde dice «INGRESE LA URL DE LA IMAGEN AQUÍ».
|
01
|
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE'); |
Ahora mira cómo se ve la publicación.
¡Eso es todo!
Ahora que hemos diseñado todos nuestros formatos de publicación, es hora de ver el diseño genial que crea en la página del blog. Puede ver cómo se muestran todos los elementos destacados de diferentes formatos de publicación.
Nota: puede mostrar su blog usando el editor predeterminado o Divi Builder y el diseño seguirá funcionando.
¿Sensible?
Todos los formatos de publicación son completamente receptivos y funcionan bien en todos los dispositivos. Aquí hay un ejemplo de cómo se ve la publicación en formato de galería cuando reduzco y cambio el tamaño de la pantalla:
Pensamientos finales
¡Felicitaciones! Ya has terminado. Espero que hayas disfrutado de esta serie de 3 partes sobre la personalización de formatos de publicaciones de blog. En todo caso, espero que hayas aprendido algo valioso para llevar contigo en tu próximo proyecto. Ahora que ha completado el tutorial, siéntase libre de experimentar con sus propios elementos de diseño para los formatos de publicación de su blog.
Envíe sus comentarios a continuación. Espero escuchar de usted.