Elementos visuales: qué son y cómo configurarlos - ImmuneWP

Elementos visuales: qué son y cómo configurarlos

Índice

    Videotutorial paso a paso

    Debajo del vídeo encontrarás un listado con los contenidos del vídeo ordenados por orden de aparición y el minutaje correspondiente

    Contenidos del vídeo

    • 01:05 – Configuración de Botón
    • 07:20 – Configuración de Infobox
    • 09:32 – Configuración de Pros y contras
    • 13:27 – Configuración de Valoraciones
    • 16:17 – Configuración de Valoraciones Total

    ¿Qué son los elementos visuales?

    Immune Theme® permite crear plantillas automáticas de reseñas y comparativas, gracias a los productos y categorías Immune. Nosotros personalmente recomendamos emplear esta opción ya que ahorra mucho tiempo en la creación de contenidos y permite crear tablas comparativas personalizadas por el usuario web. Pero, si prefieres un método más manual, podrás igualmente crear tus contenidos personalizados gracias a los elementos visuales de Immune Theme®.

    Todos estos elementos visuales los podrás incluir y personalizar dentro de tus contenidos sin necesidad de usar shortcodes, código adicional ni plugins extra. Solo tendrás que añadir el bloque de Gutenberg que corresponda y listo 🙂

    Estos elementos son:

    • Botón: este bloque de Gutenberg te permitirá incluir botones clicables dentro de tus contenidos, algo muy útil para añadir botones de compra, afiliación o suscripción.
    • Infobox: con este bloque podrás incluir una caja de texto informativa. Puedes usarla, por ejemplo, para destacar una frase dentro de la descripción de un producto o como subtítulo dentro de una reseña.
    • Cajas de Pros y Contras: este bloque te permitirá crear rápidamente tablas de pros y contras para tus reseñas de producto.
    • Casillas con valoraciones por estrellas: si quieres listar y puntuar una serie de características, por ejemplo dentro de la reseña de un producto, puedes emplear este bloque que mostrará la característica y su puntuación con estrellas.
    • Casilla de valoración total: este bloque de Gutenberg sirve para incluir una casilla de puntuación final o total del producto. Este elemento muestra una puntuación numérica y con estrellas.

    Guía de configuración de los elementos visuales

    Ten en cuenta que podrás ir viendo en el propio editor cómo se van aplicando los cambios en cada elemento visual. Pero, para ver su aspecto final dentro de la web, deberás revisarlo en una vista previa de la entrada o página.

    Para añadir un elemento visual dentro de tus contenidos, ve a la entrada o página que quieras editar. Añade un nuevo bloque de Gutenberg y ahí encontrarás , dentro de los bloques Immune, los 5 bloques correspondientes a los elementos visuales. Haz clic en el bloque que quieras añadir y vamos a ver a continuación cómo se configura cada uno de estos bloques.

    Cómo configurar el bloque Botón

    En el menú del bloque que encontrarás a la derecha podrás personalizar los siguientes aspectos del botón:

    Configuración

    • Texto: introduce el texto que quieres que muestre el botón.
    • Dirección: introduce la URL a la que quieres que se dirija el usuario cuando clique en el botón.
    • Destino: en este desplegable selecciona si quieres que la URL del botón se abra en la misma ventana de navegación o que se abra en una ventana nueva.
    • Relación: selecciona, si lo necesitas, la relación que quieras asignarle al botón. Por ejemplo: para los enlaces de afiliado, en esta casilla podrás asignar que tengan una relación nofollow.
    • Posición del botón: aquí podrás definir si quieres que el botón se muestre alineado a la izquierda, derecha o centrado.

    Icono

    Si lo deseas, aquí podrás añadir junto al texto del botón un icono. Para ello deberás indicar primero la posición que tendrá en el desplegable (izquierda o derecha) y a continuación podrás seleccionar qué icono se mostrará. Si no quieres incluir un icono, deja la opción Sin icono seleccionada.

    Fuente

    Aquí ajusta el tamaño del texto (fuente) del botón y su color. Para ajustar el color puedes seleccionar primero la gama de color en la barra inferior, y luego ajustar su saturación en la casilla superior.

    Fondo

    Ajusta en esta sección el color de fondo del botón.

    Borde

    Si quieres que el botón tenga un borde, en esta sección podrás personalizarlo. Si no quieres que lo tenga, asegúrate de que en tamaño todas las casillas marquen cero (0).

    • Tamaño: indica el tamaño (grosor), en píxeles, que quieres que tenga el borde. Puedes dejar el candado cerrado para que todos los bordes tengan el mismo tamaño, o bien clicar en el candado para abrirlo y así poder asignar tamaños diferentes a cada borde.
    • Radio: indica el radio (curvatura), en píxeles, que quieres que tengan los vértices del botón. Puedes dejar el candado cerrado para que todos los bordes tengan el mismo radio, o bien clicar en el candado para abrirlo y así poder asignar diferentes radios a cada vértice.
    • Color: selecciona el color que tendrá el borde del botón.

    Hover

    Ajusta el color que tendrán el texto (fuente), el fondo y el borde del botón cuando un usuario haga hover, es decir, pase por encima del botón con el puntero del ratón.

    Espacios

    • Padding: indica qué espaciados quieres que haya dentro del botón, en píxeles. Puedes dejar el candado cerrado para que todos los lados tengan el mismo espaciado, o bien clicar en el candado para abrirlo y así poder asignar diferentes espaciados a cada lado del botón.
    • Margin: indica qué espaciados quieres que haya alrededor del botón, en píxeles. Puedes dejar el candado cerrado para que todos los lados tengan el mismo espaciado, o bien clicar en el candado para abrirlo y así poder asignar diferentes espaciados a cada lado del botón.

    Avanzado

    Si quieres añadir algún comportamiento más al botón, aquí cuentas con una casilla para introducir código CSS adicional.

    Cómo configurar el bloque Infobox

    Una vez añadas el bloque de Gutenberg Infobox, aparecerá la caja dentro de tus contenidos. Escribe dentro de la caja el texto que quieres que incluya y en el menú del bloque que encontrarás a la derecha podrás personalizar los siguientes aspectos:

    Tamaño de la fuente

    Indica el tamaño del texto (fuente) que contiene la infobox.

    Colores

    • Color de texto: selecciona el color del texto que contiene la infobox
    • Color de fondo: selecciona el color de la caja infobox

    Borde

    Si quieres que la infobox tenga un borde, en esta sección podrás personalizarlo. Si no quieres que lo tenga, asegúrate de que en tamaño todas las casillas marquen cero (0).

    • Tamaño: indica el tamaño (grosor), en píxeles, que quieres que tenga el borde de la caja. Puedes dejar el candado cerrado para que todos los lados del borde tengan el mismo tamaño, o bien clicar en el candado para abrirlo y así poder asignar tamaños diferentes a cada lado.
    • Radio: indica el radio (curvatura), en píxeles, que quieres que tengan los vértices de la caja. Puedes dejar el candado cerrado para que todos sean iguales, o bien clicar en el candado para abrirlo y así poder asignar diferentes radios a cada vértice de la caja.
    • Color: selecciona el color del borde de la infobox.

    Espacios

    • Padding: indica qué espaciados quieres que haya dentro de la infobox, en píxeles. Puedes dejar el candado cerrado para que todos los lados tengan el mismo espaciado, o bien clicar en el candado para abrirlo y así poder asignar diferentes espaciados a cada lado de la infobox.
    • Margin: indica qué espaciados quieres que haya alrededor de la infobox, en píxeles. Puedes dejar el candado cerrado para que todos los lados tengan el mismo espaciado, o bien clicar en el candado para abrirlo y así poder asignar diferentes espaciados a cada lado de la infobox.

    Avanzado

    Si quieres añadir ajustes adicionales con código CSS, aquí cuentas con una casilla en la que podrás indicarlo.

    Cómo configurar el bloque Pros y contras

    En el menú del bloque que encontrarás a la derecha podrás personalizar tanto los contenidos como el aspecto que tendrá la caja de pros y contras. Aquí deberás definir por un lado los pros y por el otro los contras, siendo su proceso de configuración y personalización idéntico. Vamos a verlo en detalle.

    Pros / Contras

    En estos dos primeros apartados tendrás que indicar el nombre que tendrá cada columna (Pros y contras / Ventajas e inconvenientes / Me gusta y no me gusta / …) y seleccionar qué icono acompañará a cada elemento del listado.

    En Lista de Pros / Lista de Contras clica en nueva y ahí podrás redactar los elementos que quieren que conformen parte del listado.

    Ajuste de Pros
    Ajuste de Contras

    Colores de Pros / Colores de Contras

    • Fondo: define el color del fondo de la caja
    • Fuente: define el color del texto de los elementos de la caja
    • Icono: define el color de los iconos
    • Título: define el color del título de la caja
    • Fondo del título: define el color del fondo del título

    Fuente de Pros / Fuente de Contras

    • Título: define el tamaño del título de la caja
    • General: define el tamaño del texto de los elementos de la caja

    Avanzado

    Si quieres añadir ajustes adicionales con código CSS, aquí cuentas con una casilla en la que podrás indicarlo.

    Cómo configurar el bloque Valoraciones

    En el menú del bloque que encontrarás a la derecha podrás personalizar tanto los contenidos como el aspecto que tendrá la caja de valoraciones.

    Lista

    Indica las características que quieres que se muestren en la caja y su valoración (de 0 a 5, con saltos de 0,5 decimales)

    Colores

    • Fondo: selecciona el color de la caja de valoraciones
    • Texto: selecciona el color del texto (lista de características)
    • Estrellas: selecciona el color de las estrellas de valoración

    Fuente

    Define aquí el tamaño del contenido de la caja, es decir, el texto y las estrellas.

    Borde

    Si quieres que la caja de valoraciones tenga un borde, en esta sección podrás personalizarlo. Si no quieres que lo tenga, asegúrate de que en tamaño todas las casillas marquen cero (0).

    • Tamaño: indica el tamaño (grosor), en píxeles, que quieres que tenga el borde de la caja. Puedes dejar el candado cerrado para que todos los lados del borde tengan el mismo tamaño, o bien clicar en el candado para abrirlo y así poder asignar tamaños diferentes a cada lado.
    • Radio: indica el radio (curvatura), en píxeles, que quieres que tengan los vértices de la caja. Puedes dejar el candado cerrado para que todos sean iguales, o bien clicar en el candado para abrirlo y así poder asignar diferentes radios a cada vértice de la caja.
    • Color: indica el color del borde de la caja de valoraciones.

    Espacios

    • Padding: indica qué espaciados quieres que haya dentro de la caja, en píxeles. Puedes dejar el candado cerrado para que todos los lados tengan el mismo espaciado, o bien clicar en el candado para abrirlo y así poder asignar diferentes espaciados a cada lado de la caja.
    • Margin: indica qué espaciados quieres que haya alrededor de la caja, en píxeles. Puedes dejar el candado cerrado para que todos los lados tengan el mismo espaciado, o bien clicar en el candado para abrirlo y así poder asignar diferentes espaciados a cada lado de la caja.

    Avanzado

    Si quieres añadir ajustes adicionales con código CSS, aquí cuentas con una casilla en la que podrás indicarlo.

    Si prefieres que las cajas de valoración se muestren como en la demo, deberás configurarlas dentro de columnas. Por ejemplo: crea 3 columnas e inserta en cada una de ellas una caja de valoración con una sola característica.

    Muestra de 3 columnas con una caja de valoración cada una

    Cómo configurar el bloque Valoraciones Total

    En el menú del bloque que encontrarás a la derecha deberás indicar, en el primer apartado, la valoración total que quieres que muestre esta caja (de 0 a 5, con saltos decimales). Esta valoración se mostrará de forma numérica y con estrellas. A continuación podrás también personalizar:

    Colores

    • Fondo: selecciona el color del fondo de la caja
    • Texto: selecciona el color del texto, es decir, de la valoración numérica
    • Estrellas: selecciona el color de las estrellas de valoración

    Fuente

    Define aquí el tamaño que tendrán por un lado la valoración numérica (tamaño de la fuente) y por otro las estrellas de valoración (tamaño de los iconos).

    Borde

    Si quieres que la caja de valoración total tenga un borde, en esta sección podrás personalizarlo. Si no quieres que lo tenga, asegúrate de que en tamaño todas las casillas marquen cero (0).

    • Tamaño: indica el tamaño (grosor), en píxeles, que quieres que tenga el borde de la caja. Puedes dejar el candado cerrado para que todos los lados del borde tengan el mismo tamaño, o bien clicar en el candado para abrirlo y así poder asignar tamaños diferentes a cada lado.
    • Radio: indica el radio (curvatura), en píxeles, que quieres que tengan los vértices de la caja. Puedes dejar el candado cerrado para que todos sean iguales, o bien clicar en el candado para abrirlo y así poder asignar diferentes radios a cada vértice de la caja.
    • Color: indica el color del borde de la caja de valoraciones.

    Espacios

    • Padding: indica qué espaciados quieres que haya dentro de la caja, en píxeles. Puedes dejar el candado cerrado para que todos los lados tengan el mismo espaciado, o bien clicar en el candado para abrirlo y así poder asignar diferentes espaciados a cada lado de la caja.
    • Margin: indica qué espaciados quieres que haya alrededor de la caja, en píxeles. Puedes dejar el candado cerrado para que todos los lados tengan el mismo espaciado, o bien clicar en el candado para abrirlo y así poder asignar diferentes espaciados a cada lado de la caja.

    Avanzado

    Si quieres añadir ajustes adicionales con código CSS, aquí cuentas con una casilla en la que podrás indicarlo.

    Si prefieres que la caja de valoración total se muestre como en la demo, deberás configurarla dentro de una columna. Por ejemplo: crea 3 columnas e inserta solo en la columna central la caja de valoraciones total. Gutenberg no mostrará las columnas vacías. Así, esta configuración mostrará la caja centrada en la vista previa de ordenador y en móvil se verá a pantalla completa, centrada y sin contenidos a su lado.

    in Bloques y ajustes en GutenbergVideotutoriales
    ¿Ha resuelto este artículo tus dudas?
    Ir arriba