La elección de agregar una barra lateral a las publicaciones de su blog depende completamente de usted. Algunos blogueros optan por no utilizar ninguna barra lateral . Este tutorial es para aquellos de ustedes que prefieren usar una barra lateral pero quieren que se vea un poco diferente. Por lo general, las barras laterales están ubicadas estáticamente, pero si el contenido de la publicación es largo, eso significa que el lector tendrá que desplazarse hacia arriba para ver la barra lateral.
En este diseño de plantilla de publicación de blog, hemos creado una barra lateral fija de altura completa que permanece en su lugar mientras se desplaza hacia abajo por el contenido de la publicación. Mientras recrea el tutorial, mantenga dos pestañas abiertas dentro de su navegador: una para el creador de temas y otra para la vista previa de una publicación de blog. De esta manera puede ver los cambios a medida que avanza.
Descargar el tutorial GRATIS
Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se «volverá a suscribir» ni recibirá correos electrónicos adicionales.
Avance
Antes de comenzar, echemos un vistazo a la barra lateral fija de altura completa.
Escritorio
Móvil
Crear widget de barra lateral
Antes de comenzar con la plantilla de barra lateral fija de altura completa, cree un widget de barra lateral personalizado. Más adelante, incluiremos esto en nuestra barra lateral dentro de la plantilla.
Abrir el generador de widgets
Haga clic en ‘Apariencia’ y seleccione ‘Widgets’.
Agregar elementos al widget de la barra lateral
Arrastre los elementos ‘Publicaciones recientes’ y ‘Categorías’ al widget de la barra lateral.
Ajustar la configuración del elemento en el widget
Elija mostrar solo 3 publicaciones recientes y agregue un título. Agregue un título al widget de categorías también y no olvide hacer clic en ‘Guardar’ en ambos cuadros cuando haya terminado.
- Título de publicaciones recientes: Leer más:
- Título de categorías: Examinar
2. Comience con el generador de temas
Abrir Theme Builder / Agregar nueva plantilla
¡Es hora de comenzar a recrear la plantilla de barra lateral fija de altura completa! Primero, abra su generador de temas y agregue una nueva plantilla.
Establecer la configuración de la plantilla
En la configuración de la plantilla, seleccione ‘Todas las publicaciones de blog’. Si desea utilizar la plantilla para una categoría o etiqueta específica, modifique la configuración de la plantilla en consecuencia.
Agregar cuerpo personalizado
Luego, haga clic en ‘Agregar cuerpo personalizado’.
Seleccione Crear cuerpo personalizado
Recrearemos esta plantilla desde cero, así que continúe y elija ‘Crear cuerpo personalizado’.
Construir desde cero
Once inside the visual builder, select the option to build from scratch once more.
Recreate The Template With Full-Height Fixed Sidebar
Section Settings
Background
Open the existing section inside your template editor and add a gradient background.
- Background Gradient
- Color 1: White #ffffff
- Color 2: Light Grey #eaeaea
Spacing
Add some padding too.
- Top Padding: 55px
Add New Row
Column Structure
Now add a row with a 3/4 – 1/4 column structure.
Sizing
Adjust the sizing of the row as follows.
- Custom Gutter Width: 2
- Width:
- Desktop and Tablet: 90%
- Phone: 100%
- Max Width:
- Desktop: 1920px
- Min Height: 100vh
Column 1 Settings
Spacing
Before adding modules, adjust the column settings. Column 1 first.
- Left and Right Padding
- Tablet: 2%
- Phone: 8%
Column 2 Settings
Background
Then, add a background color to column 2.
- Background Color: White #ffffff
Spacing
Include some spacing too.
- Left and Right Padding
- Desktop: 3%
- Tablet and Phone: 14%
Border
Give the column rounded corners next.
- Rounded Corners
- Tablet and Desktop: 15px
Custom CSS
Move over to the advanced tab and add some CSS code lines to the main element. This will help us create the full-height sidebar on desktop.
- Main Element
- min-height: 100%
01
|
min-height : 100% ; |
Position
Last but not least, to create the fixed sidebar effect, add a fixed position to the column.
- Position
- Desktop: Fixed
- Tablet and Phone: Default
- Location: Top Right
Add Post Title Module #1
Elements
Time to add modules! Start with a first post title module in column 1 and enable the title only.
- Show Title: Yes
Dynamic Background Image
Then, go to the background settings and use the featured image as a dynamic background image.
Title Text
Style the title text settings.
- Title Font: Bai Jamjuree
- Title Font Style: Uppercase
- Title Text Color: #e98074
- Title Text Size:
- Desktop: 45px
- Tablet: 35px
- Phone: 25px
- Title Letter Spacing: 3px
- Title Line Height: 1.3em
Spacing
Then, add some custom top and bottom padding.
- Top Padding: 20%
- Bottom Padding: 20%
Border
Include some rounded corners too.
- All Corners: 15px
Title CSS
And complete the module settings by adding three lines of CSS code to the module’s title element in the advanced tab.
01
02
03
|
background-color : rgba ( 255 , 255 , 255 , 0.56 ); padding-top : 2% ; padding-bottom : 2% ; |
Add Post Title Module #2
Elements
Now add another post title module. Select the following elements.
- Meta
- Author
- Post Categories
Meta Text
Open the design tab and style the meta text.
- Font: Bai Jamjuree
- Weight: Medium
- Color: Grey #8e8d8a
- Size
- Desktop: 20px
- Tablet and Phone: 15px
- Letter Spacing: 2px
Sizing
Adjust the sizing too.
- Width: 90%
- Module Alignment: Center
Spacing
Complete this module’s settings with some spacing.
- Top Padding: 15px
Add Post Content Module
Background
Add a post content module with a white background next.
- Background Color: White #ffffff
Texto
Ahora, aplique estilo al texto del cuerpo.
- Fuente: Lato
- Color: gris # 8e8d8a
- Tamaño: 16px
Texto de encabezado
Continúe aplicando estilo a todos los estilos de texto de encabezado.
- H1
- Fuente: Bai Jamjuree
- Peso: medio
- Color: Coral # e98074
- Talla
- Escritorio: 45px
- Tableta: 33px
- Teléfono: 30px
- Espaciado entre letras: 1px
- H2
- Fuente: Bai Jamjuree
- Peso: medio
- Color: Coral # e98074
- Talla
- Escritorio: 35px
- Tableta y teléfono: 25px
- Espaciado entre letras: 1px
- H3
- Fuente: Bai Jamjuree
- Peso: Regular
- Color: gris oscuro # 606060
- Talla
- Escritorio: 25px
- Tableta y teléfono: 22px
- Espaciado entre letras: 1px
- H4
- Fuente: Bai Jamjuree
- Peso: Regular
- Color: gris oscuro # 606060
- Talla
- Escritorio: 22px
- Tableta: 20px
- Teléfono: 18px
- Espaciado entre letras: 1px
- H5
- Fuente: Bai Jamjuree
- Peso: medio
- Color: gris oscuro # 606060
- Tamaño: 16px
- Espaciado entre letras: 1px
- H6
- Fuente: Bai Jamjuree
- Peso: Regular
- Color: gris oscuro # 606060
- Tamaño: 16px
- Espaciado entre letras: 1px
Espaciado
Agregue también algunas configuraciones de espaciado.
- Margen superior: 40 px
- Acolchado superior: 10%
- Acolchado inferior: 10%
- Acolchado izquierdo: 10%
- Acolchado derecho: 10%
Frontera
Por último, pero no menos importante, agregue algunas esquinas redondeadas.
- Borde redondeado: 15px
Agregar módulo de comentarios
Elementos
Para completar la primera columna, agregue un módulo de comentarios. Habilite los siguientes elementos:
- Botón de respuesta
- Recuento de comentarios
Campos
En la pestaña de diseño, aplique estilo a los campos.
- Color de fondo: gris claro # f7f7f7
- Color del texto: gris # 8e8d8a
- Fuente: Bai Jamjuree
- Tamaño del texto: 17px
- Esquinas redondeadas: 15px
Texto de recuento de comentarios
Diseñe también el texto del recuento de comentarios.
- Nivel de encabezado: H3
- Fuente: Bai Jamjuree
- Color: Coral # e98074
- Tamaño: 22px
- Espaciado entre letras: 1px
Texto del título del formulario
Luego el título del formulario.
- Nivel de encabezado: H3
- Fuente: Bai Jamjuree
- Color: Coral # e98074
- Tamaño: 18px
- Espaciado entre letras: 1px
Meta texto
Dale estilo al meta texto también.
- Fuente: Bai Jamjuree
- Color: # 606060
- Tamaño: 14px
- Espaciado entre letras: 1px
Texto de comentario
No olvide el texto del comentario.
- Fuente: Bai Jamjuree
- Tamaño: 1px
Botón
Ahora diseñe los botones.
- Estilos personalizados
- Tamaño del texto: 18px
- Color del texto: blanco #ffffff
- Color de fondo: Coral # e98074
- Radio del borde del botón: 15px
- Fuente del botón: Bai Jamjuree
Dimensionamiento
Ajuste también el tamaño de la fila.
- Ancho: 90%
Espaciado
Así como la configuración de espaciado.
- Acolchado superior: 8%
- Acolchado izquierdo y derecho: 4%
Agregar módulo de persona
Texto
Pase a la columna de la barra lateral fija y agregue un módulo de persona.
- Nombre: Autor de publicación dinámica
- Antes: Escrito por:
Texto del título
En la pestaña de diseño, diseñe el texto del encabezado de la siguiente manera:
- Nivel de encabezado: H4
- Fuente: Bai Jamjuree
- Color: Coral # e98074
- Tamaño: 2vh
- Espaciado entre letras: 2px
Dimensionamiento
Ajuste el tamaño a continuación.
- Altura mínima:
- Escritorio: 3vh
- Tableta y teléfono: automático
- Altura máxima:
- Escritorio: 3vh
- Tableta y teléfono: automático
Espaciado
Agregue un espacio personalizado también.
- Margen superior
- Escritorio: 6vh
- Tableta y teléfono: 10vh
Agregar módulo de imagen
Imagen
Ahora, agregue un módulo de imagen. Seleccione contenido dinámico para la imagen del autor.
- Imagen: Imagen de perfil de autor dinámico
Alineación
Vaya a la pestaña de diseño y elija la siguiente alineación:
- Alineación de imagen: izquierda
Dimensionamiento
A continuación, ajuste el tamaño del módulo.
- Ancho máximo: 15vh
- Alineación del módulo: izquierda
- Altura máxima
- Escritorio: 15vh
Frontera
Finalmente, agregue algunas esquinas redondeadas a la configuración del borde.
- Esquinas más redondas: 15px
Agregar módulo de barra lateral
Contenido
Ahora es el momento de agregar los widgets de la barra lateral mediante el módulo de la barra lateral.
- Área de widgets: barra lateral
Diseño
Primero ajusta el diseño.
- Mostrar separador de bordes: No
Texto del título
A continuación, modifique la configuración del texto del título.
- Fuente: Bai Jamjuree
- Peso: medio
- Color: Coral # e98074
- Tamaño: 2vh
- Espaciado entre letras: 2px
Cuerpo de texto
Continúe con el cuerpo del texto.
- Fuente: Bai Jamjuree
- Peso: ligero
- Color: Gris oscuro # 7f7f7f
- Color flotante: Coral # e98074
- Tamaño: 1.5vh
- Espaciado entre letras: 1px
- Altura de la línea: 1.8em
Dimensionamiento
Ajuste también el tamaño del módulo.
- Altura mínima
- Escritorio: 12vh
- Tableta y teléfono: automático
- Altura máxima
- Escritorio: 12vh
- Tableta y teléfono: automático
Espaciado
No olvide agregar un poco de espacio.
- Acolchado superior
- Escritorio: 1vh
- Tableta y teléfono: 3vh
CSS personalizado
Por último, pero no menos importante, incluya algunas líneas de código CSS en la pestaña avanzada.
- Widget: padding-bottom: 0vh;
01
|
padding-bottom : 0 vh; |
- Título: padding-bottom: 2vh;
01
|
padding-bottom : 2 vh; |
Agregar correo electrónico Optin
Texto
El siguiente módulo que necesitamos en nuestra barra lateral es un módulo de suscripción de correo electrónico. Agregue algún contenido de su elección.
- Título: Actualizaciones
- Botón: Suscribirse
Cuenta de correo electrónico
Conecte su correo electrónico al siguiente formulario.
- Proveedor de servicios: su proveedor de correo electrónico
- Lista: su lista elegida
Campos
Solo usamos el campo de nombre en la configuración de campos.
- Mostrar campo de nombre
Antecedentes
Luego, desactive el fondo predeterminado.
- Usar color de fondo: No
Diseño
Vaya a la pestaña de diseño y modifique la configuración de diseño.
- Disposición: cuerpo en la parte superior, forma en la parte inferior
- Nombre de ancho completo: No
- Ancho completo del correo electrónico: No
Campos
Luego, diseñe los campos de la siguiente manera:
- Color de fondo: Gris claro # f7f7f7
- Color del texto: # 606060
- Acolchado superior e inferior: 1vh
- Acolchado izquierdo: 1vh
- Fuente: Bai Jamjuree
- Tamaño del texto: 1.5vh
- Espaciado entre letras: 1px
- Esquinas redondeadas: 15px
Texto del título
Diseñe también el texto del título.
- Nivel de encabezado: H4
- Fuente: Bai Jamjuree
- Color: Coral # e98074
- Tamaño: 2vh
- Espaciado entre letras: 2px
- Altura de la línea: 1em
Botón
Luego, el botón.
- Estilos personalizados
- Tamaño del texto: 1.5vh
- Color del texto: blanco #ffffff
- Color de fondo: Coral # e98074
- Radio de borde: 15px
- Espaciado entre letras: 2px
- Fuente: Bai Jamjuree
- Acolchado superior e inferior: 1vh
Espaciado
Y complete la configuración del módulo y el tutorial agregando algunos valores de espaciado personalizados al módulo. ¡Eso es! Asegúrese de guardar todos los cambios del generador de temas una vez que haya terminado de crear el cuerpo de la plantilla.
- Acolchado superior
- Escritorio y tableta: 0vh
- Acolchado inferior
- Escritorio: 2vh
- Tableta y teléfono: 6vh
- Acolchado izquierdo y derecho
- Escritorio y tableta: 0vh