Una característica poco común en las plantillas para wordpress y Woocommerce es disponer de un constructor para el header o cabecera de la web (Header Builder).
La mayoría de las plantillas disponen de una serie de diferentes diseños de header para que podamos seleccionar el que más se aproxima a nuestras necesidades, y pare usted de contar.
Pues bien, la plantilla Flatsome, que es la más vendida para Woocommerce, dispone de un potente constructor de cabecera o header de la web (header builder).
Al igual que la mayoría de plantillas para wordpress, también dispone de una serie de diseños predefinidos. Pero tras seleccionar uno, podemos acabar de personalizarlo utilizando el builder del header (incluso modificarlo por completo). Pero para tener que hacer los menos cambios posibles, lo suyo es partir del que más se acerque al diseño que tenemos en mente.
ÍNDICE DEL POST
- 1.- Diseños de header de la plantilla Flatsome
- 2.- Estructura del constructor del header de Flatsome
- 3.- Funcionamiento del constructor o header builder
- 4.- Menú del header builder (Opciones del constructor del header)
-
5.- Elementos del header.
- 5.1.- Elemento Main menú (Menú principal):
- 5.2.- Elemento Top bar menú (Elemento menú superior):
- 5.3.-Elemento Social Icons (Elemento Iconos redes sociales):
- 5.4.- Elemento Account (Elemento cuenta)
- 5.5.- Elemento Cart (Elemento Carrito)
- 5.6.- Elemento Search Form (Elemento barra búsqueda):
- 5.7.- Elemento Search Icon (Elemento icono de búsqueda)
- 5.8.- Elemento Nav Icon (Menú hamburguesa)
- 5.9.- Elemento Contact (contacto)
- 5.10.- Elemento Button (Elemento botón)
- 5.11.- Elemento checkout button (botón pago)
- 5.12.- Elemento Newsletter (botón suscribirse)
- 5.13.- Elemento Wishlist (Lista de deseos)
- 5.14.- Elemento Languages (idiomas)
- 5.15.- Elemento HTML y Block
- 5.16.- Elemento divisor vertical
1.- Diseños de header de la plantilla Flatsome
Como antes comentaba, al igual que la mayoría de plantillas premium, la plantilla Flatsome cuenta con una serie de diseños predefinidos de header para la web.
Una vez elijamos uno de los diseños de header, podremos proseguir con la personalización de los elementos del mismo, a través del constructor del header.
Para seleccionar uno de los diseños predefinidos de header o encabezamiento iremos a las opciones del tema o personalizador de temas (theme options).
Para ir a las opciones del tema (theme options) podemos ir por varios caminos:
- i.- Menú lateral Flatsome: podemos acceder desde “Flatsome > Theme Options”
- ii.- Menú lateral Apariencia: podemos acceder también desde: “Apariencia > Personalizar”
- iii.- Menú superior: También se puede acceder desde el menú horizontal de la parte superior: “Flatsome > Theme Options”.
Una vez hayamos accedido a las opciones del tema Flatsome, haremos clic en la opción “Header > Presets”.
Diseños predefinidos de header de la plantilla Flatsome
Si haces clic sobre cualquiera de los diseños de header, podrás visualizarlo en la ventana de la derecha.
Para fijar un diseño, haz clic en el botón “Publicar” que aparece en la parte superior.
Verás que los diferentes tipos de header se diferencian entre otras cosas, en el número de bloques horizontales que lo forman (1,2 o 3 bloques horizontales).
Ten en cuenta que se puede cambiar cualquier elemento que aparece en cualquiera de los diferentes diseños preestablecidos.
El único elemento fijo que depende del diseño de header elegido es el logo. Aunque en las opciones de configuración del logo, tendremos la opción de cambiarlo de posición.
Veamos los diferentes diseños:
i.- Diseño 1 header Flatsome: diseño de cabecera formado por dos bloques o barras horizontales. Con barra de búsqueda de productos plegada en icono con forma de lupa. Personalmente, me gusta más que la barra salga desplegada. Logo izquierda, en bloque principal.
ii.- Diseño 2 header Flatsome: diseño header formado por dos bloques o barras horizontales. Barra de búsqueda plegada en icono en forma de lupa. Menú en barra inferior. Logo centrado.
iii.- Diseño 3 header Flatsome: diseño de header formado por un único bloque o barra horizontal. Barra de búsqueda plegada en forma de icono. Menú en barra inferior. Logo izquierda.
iv.- Diseño 4 header Flatsome: diseño formado por 3 bloques o barras horizontales. Barra de búsqueda desplegada. Logo izquierda.
v.- Diseño 5 header Flatsome: diseño formado por 3 bloques o barras horizontales. Barra de búsqueda desplegada. Logo izquierda.
vi.- Diseño 6 header Flatsome: diseño de header formado por 1 solo bloque o barra horizontal. Barra de búsqueda plegada e icono de hamburguesa (menú hamburguesa) para desplegar el menú al estilo de un móvil (nav icon). Logo izquierda.
vii.- Diseño 7 header Flatsome: diseño formado por 1 solo bloque o barra horizontal. Barra de búsqueda plegada e icono de hamburguesa (menú hamburguesa) para desplegar el menú al estilo de un móvil (nav icon). Logo izquierda.
viii.- Diseño 8 header Flatsome: diseño header formado por 1 solo bloque o barra horizontal. Sin barra de búsqueda. Menú normal. Logo izquierda.
ix.- Diseño 9 header Flatsome: diseño formado por 1 solo bloque o barra horizontal. Sin barra de búsqueda. Menú normal. Logo izquierda.
x.- Diseño 10 header Flatsome: diseño de header formado por 2 bloques o barras horizontales. Barra de búsqueda desplegada y menú en barra principal. Logo izquierda.
Elige el que más se parezca al diseño de header que tienes en mente y haz clic en el botón “Publicar”.
2.- Estructura del constructor del header de Flatsome
Una vez hayas elegido un tipo o diseño de header, éste se previsualizará en la ventana de la derecha.
En la parte inferior de la ventana derecha se mostrará el constructor o header builder, que se divide en 4 zonas fundamentales.
i.- Menú header builder: En este bloque tenemos un menú con diferentes opciones. Entre las que destaca la posibilidad de personalizar el menú para dispositivos móviles. Luego veremos todas las opciones.
ii.- Mesa de trabajo: en la mesa de trabajo iremos colocando los diferentes elementos que queremos se muestren en el header. Si te fijas, verás que la mesa de trabajo está formada por 3 filas o bloques que se corresponden con los 3 posibles bloques que como máximo puede tener cualquier tipo de header.
Estructura y partes del header builder de Flatsome
iii.- Elementos header: en la parte inferior de la pantalla veremos los diferentes elementos que podemos añadir a la mesa de trabajo, para que éstos se muestren en el header de la web.
Algunos elementos aparecerán ya colocados en la mesa de trabajo. Unos u otros dependiendo del diseño de header que hayamos seleccionado.
iv.- Previsualización: en la parte superior de la pantalla podremos ir viendo los cambios en tiempo real de los elementos que vayamos añadiendo al constructor o editando.
3.- Funcionamiento del constructor o header builder
El funcionamiento del constructor es muy sencillo y se basa en el conocido sistema de “Drag & Drop” (arrastra y suelta).
Seleccionaremos el elemento que queremos añadir al header. Haremos clic con el botón izquierdo del ratón, y sin soltar el botón, arrastraremos el elemento hasta la mesa de trabajo. Soltaremos el botón del ratón en el momento en que tengamos el elemento en el lugar del header donde queramos mostrarlo (En el de destino aparecerá un rectángulo gris).
Cómo añadir un elemento con el constructor de header de Flatsome
Los elementos que vayamos colocando en el header tienen diferentes opciones de personalización.
Para acceder a las opciones de personalización de uno de los elementos añadidos a la mesa de trabajo, haremos clic en el “icono en forma de engranaje”. Las opciones se desplegarán en el lateral izquierdo. Si el elemento no tiene icono en forma de engranaje significa que no tiene opciones de personalización.
Opciones de configuración de un elemento del header con Flatsome
Recuerda hacer clic en el botón “Publicar” para guardar cambios.
Como antes he comentado, encima de mesa de trabajo y debajo de la previsualización tenemos un menú horizontal con una serie de opciones:
i.- Selector Desktop | Mobile / Tablet: si hacemos clic en “Desktop” procederemos a trabajar en el diseño del header de la versión escritorio de la web. Si hacemos clic en “Mobile / Tablet”, procederemos a trabajar en el diseño del header de la versión Tablet y móvil de la web.
Podemos personalizar de manera independiente el header para la versión de escritorio y móvil de la web.
Menú del header builder
ii.- Presets: si hacemos clic en esta opción se mostrarán en el lateral izquierdo todos los posibles diseños de header preestablecidos para poder seleccionar alguno de ellos.
iii.- Tutorial: si hacemos clic en este elemento, el navegador nos llevará a un vídeo en inglés sobre el uso del header builder. Mejor que veas el vídeo que he creado yo (en español).
iv.- Clear All: si hacemos clic en este botón, todos los elementos de la mesa de trabajo se borrarán y aparecerán en la zona inferior.
Todos los elementos, menos el logo, que es “fijo” dependiendo del diseño seleccionado. Aunque como mencioné antes, en las opciones de configuración del logo tendremos la posibilidad de cambiarlo de posición (pero no arrastrando y soltando)
v.- Close: si hacemos clic en este botón, se ocultará el constructor o header builder. Para que se vuelva a mostrar debemos ir a: “Header”.
QUIERO LA PLANTILLA FLATSOME
5.- Elementos del header.
Vamos a ir ahora viendo los diferentes elementos que podemos ir añadiendo al header builder o constructor de header y sus principales opciones de configuración.
Es el menú principal de la web. La creación y gestión de menús, se hace desde: “Apariencia > Menús”. Para asignar un menú a este elemento, lo deberemos asignar a la zona “Menú principal”, en el apartado: “Dónde se verá” (En el vídeo de uso del header builder tienes un ejemplo).
Podremos colocar el elemento “Main menú” donde queramos.
Es otro elemento de menú, que habitualmente se muestra en la barra superior, pero que en realidad al igual que sucedía con el “Main menú”, lo podemos colocar en donde queramos.
Para asignar un menú a este elemento, marcaremos el check box “Top bar menu” en el apartado “donde se verá”, en la gestión de menús (también tienes un ejemplo en el vídeo).
Cómo asignar un menú wordpress al elemento Main Menú y Top Bar Menú
El elemento “Social Icons” muestra los iconos de redes sociales en los cuales está presente nuestra empresa.
Entre las opciones de configuración destacan:
i.- Icons Style (diseño iconos): aquí podremos elegir entre varios diseños para los iconos de redes sociales
ii.- Urls de las redes sociales: pondremos la correspondiente URL en las redes sociales cuyo icono queremos que se muestre. Las que no queremos que se muestren las dejaremos en blanco.
Podemos colocar este elemento en la ubicación que queramos.
Elemento Social Icons para mostrar redes sociales header
5.4.- Elemento Account (Elemento cuenta)
Este elemento permitirá acceder a los clientes a la página especial de Woocommerce denominada Mi Cuenta, donde los clientes pueden ver la información de su cuenta.
En caso de no haber iniciado sesión, esta página de Mi Cuenta mostrará el formulario para acceder a la zona privada del cliente.
Entre las opciones de configuración tenemos:
i.- Icon Style (Diseño del icono): Podremos elegir si queremos que se muestre un icono o no, y el diseño del mismo.
ii.- Show label (Mostrar etiqueta): Si marcamos esta opción aparecerá el texto: “MI CUENTA”. En caso contrario no aparecerá el texto
Elemento Account para opciones de Mi Cuenta Woocommerce
5.5.- Elemento Cart (Elemento Carrito)
Este elemento se corresponde con el enlace al carrito, que suele disponerse en el header de cualquier tienda online.
En icono del carrito tiene bastantes opciones de personalización:
i.- Cart Style (diseño carrito): desde aquí podremos elegir como se muestra el contenido del carrito.
Con la opción “Dropdown (desplegable)”, cuando pongamos el ratón sobre el carrito, se desplegará una ventana que mostrará el contenido del carrito. Si hacemos clic, nos iremos a la página del carrito.
Con la opción “Off-Canvas sidebar”, si hacemos clic sobre el carrito se mostrará una barra lateral deslizante con el contenido del mismo.
Con la opción “Link Only (solo enlace)”, si hacemos clic en el carrito nos iremos a la página del carrito.
ii.- Cart Icon Style (diseño icono del carrito): aquí podremos elegir el diseño del icono del carrito. El primer diseño muestra el número de elementos añadidos.
iii.- Cart Icon (icono del carrito): aquí seleccionaremos el tipo de icono que queremos mostrar. En el apartado anterior debemos haber elegido un diseño diferente al primero.
iv.- Custom cart icon (icono de carrito personalizado): esta opción sirve para subir un diseño personalizado.
v.- Show cart totals (mostrar totales en carrito): esta opción sirve para mostrar el importe total del carrito.
vi.- Show Cart title (mostrar título del carrito): esta opción sirve para mostrar el texto “Carrito”
Elemento Cart – Carrito de la tienda online
5.6.- Elemento Search Form (Elemento barra búsqueda):
Este elemento se corresponde con la barra de búsqueda de productos de la tienda online que incluye por defecto la plantilla Flatsome.
Entre las opciones de configuración destacan:
i.- Search Form Style (diseño de la barra de búsqueda): la opción “Normal” se corresponde con una barra de búsqueda rectangular, mientras que la opción “Flat” muestra una barra de búsqueda con esquinas curvadas.
ii.- Placeholder text: este es el texto que aparecerá dentro del buscador antes de que el cliente escriba nada en él.
iii.- Search categories (buscar categorías): esta opción sirve para mostrar y ocultar el filtro por categorías.
iv.- Header Search Form width (anchura barra de búsqueda): esta opción sirve para establecer la longitud de la barra de búsqueda.
Elemento Search Form / Barra de búsqueda del header de Flatsome
5.7.- Elemento Search Icon (Elemento icono de búsqueda)
A diferencia del elemento “Search Form”, ahora se mostrará un icono en forma de lupa. Al hacer clic sobre el icono se mostrará la barra de búsqueda de productos.
Habitualmente se usará este elemento o el elemento “search form”, pero nunca los dos al mismo tiempo, ya que sería bastante repetitivo.
Los principales elementos de configuración son:
i.- Search Icon Style (diseño icono de búsqueda): Aquí podremos seleccionar el diseño del icono en forma de lupa.
ii.- Search Icon Type (tipo icono búsqueda): Si elegimos la opción “Dropdown”, la barra de búsqueda se mostrará bajo el icono. Si por el contrario elegimos la opción “Lightbox”, la barra de menú aparecerá en una capa emergente.
Elemento Search Icon del header Flatsome
Este elemento nos permitirá añadir un icono tipo hamburguesa, del que se desplegarán los elementos que queramos.
Este elemento sirve para mostrar el icono del menú tipo hamburguesa en el header cuando se está viendo en modo dispositivo móvil. Pero también lo podemos mostrar en el header cuando la web se visualiza en modo escritorio.
Este elemento del header builder dispone de bastantes opciones de personalización:
i.- Mobile header Height (altura header en móviles): sirve para personalizar la altura del header en la versión móvil
ii.- Logo position (posición del logo): sirve para establecer la posición del logo, pero en la versión móvil.
iii.- Menú Icon style (diseño icono de menú): diseño del icono tipo hamburguesa
iv.- Show menú title (mostrar título menú): si marcamos esta opción se mostrará el texto “MENU” junto al icono tipo hamburguesa.
v.- Menu Overlay: en este apartado estableceremos como queremos que se despliegue el menú al hacer clic sobre el icono.
vi.- Menú elements (elementos del menú): aquí estableceremos los elementos que queremos que muestre el menú cuando se despliegue.
Elemento Nav Icon / Menú Hamburguesa del header builder
5.9.- Elemento Contact (contacto)
Con este elemento podremos mostrar diferentes medios de contacto. Podremos mostrar email, teléfono, horario de apertura y localización. Tienes un ejemplo de las opciones en el vídeo.
Elemento Contact (información contacto) header builder Flatsome
Un elemento muy interesante, ya que a veces nos interesa establecer algún item del menú del header como destacado. Esto es precisamente lo que podemos conseguir con el elemento Button.
Disponemos de 2 elementos tipo botón (Button 1 y Button 2)
Desde las opciones de configuración podremos personalizar el texto que aparece en el interior del botón (text), el enlace de destino (link), el radio de curvatura de las esquinas del botón (Radius), y otros.
Elemento Button del header builder
Este elemento consiste en un botón que nos conduce directamente al comienzo del proceso de pago en la tienda online.
Este elemento no tiene opciones de personalización.
Este elemento mostrará un enlace para suscribirse a la newsletter de la web. El elemento dispone de varias opciones de personalización.
Elemento Newsletter del header builder Flatsome
5.13.- Elemento Wishlist (Lista de deseos)
Una lista de deseos es un elemento fundamental hoy en día en una tienda online para facilitar la tarea de selección de productos al cliente. La plantilla Flatsome incluye esta funcionalidad (a través de un plugin) y con este elemento podremos mostrar el correspondiente icono en el lugar que queramos del header y con un diseño personalizado.
Entre las opciones de personalización destacan:
i.- Whishlist Icon (icono lista de deseos): aquí podremos seleccionar el tipo de icono asociado a la lista de deseos.
ii.- Whishlist Icon Style (diseño icono lista de deseos): aquí podremos elegir el diseño del icono que hemos elegido en el apartado anterior.
iii.- Show Wishlist Title (mostrar nombre): si lo marcamos mostrará un texto junto al icono.
iv.- Custom title (título personalizado): este será el texto que mostrará junto al icono, si así lo tenemos seleccionado en el apartado anterior. El texto que pondremos será o “Lista de deseos” o “Wishlist”.
Elemento Wishlist (lista de deseos) del header builder Flatsome
5.14.- Elemento Languages (idiomas)
Este elemento mostrará un selector de idiomas, en caso de que estemos utilizando varios idiomas en la web.
Para que este elemento funcione correctamente se ha de instalar en wordpress el plugin WPML o el plugin Polylang.
5.15.- Elemento HTML y Block
Para introducir texto personalizado en el header disponemos de los elementos HTML y los elementos Block.
Los elementos HTML nos permiten añadir texto normal o código HTML (también podemos introducir shortcodes). Disponemos de hasta 5 elementos HTML.
Los Blocks (bloques) son elementos que debemos crear previamente en el apartado “Blocks” del menú lateral del panel de administración de wordpress. Para la construcción de un bloque podremos utilizar el editor por defecto de wordpress o el page builder de Flatsome.
Disponemos de 2 elementos blocks.
Cuando hacemos clic en la configuración de cualquiera de estos elementos nos aparecen las opciones para todos ellos.
Elementos texto (blocks y HTML) del header builder Flatsome
5.16.- Elemento divisor vertical
También disponemos de un elemento tipo separador vertical que nos servirá para separar diferentes elementos situados uno junto a otro.
Este elemento no dispone de opciones de personalización.
Separador vertical del constructor header de Flatsome
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
Como estas? gran tutorial, lo que no encontre es si se puede poner el menu fijo, no que aparezca cuando scrolleas. Saludos
Muy buenas Ezequiel.
Sí tiene esa opción, está en «Flatsome > theme options > header > sticky header»
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso sobre Flatsome, Curso Blog WordPress, Curso seguridad y actualizaciones en wordpress, Curso como crear una tienda online de éxito, Curso Woocommerce, Curso Divi, Curso Flatsome, Curso Elementor, Curso Prestashop, Curso Shopify, Curso alta e indexación web en google, cursos Analytics ecommerce, Curso como gestionar un blog, SEO general, SEO tiendas online, Curso copywriting, plantillas wordpress como flatsome, etc… (Más de 30 cursos)
Hola, buenas a todos
Aunque ya tengo bastante dominada la plantilla, tengo un problema que no he sabido resolver, y es que en el detalle de los productos el € me sale delante del importe y no detrás como nosotros ulitizamos.
Ya no sé donde mirar mas….
Gracias por la ayuda!
Hola Noelia.
Ve a «Woocommerce > ajustes > general» ve al selector «Ubicación de la moneda» y pon «derecha». Si quiere más y mejor, echa un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso como crear una tienda online de éxito, Woocommerce, plantillas wordpress como flatsome, Divi, Astra pro, cursos Analytics ecommerce, seo general, SEO tiendas online, etc. etc.
Hola.
Estoy trabajando con la plantilla Flatsome y tengo un problema. No se desde cuando, pero me han desaparecido los filtros por atributos en la versión móvil. No se si es debido a alguna actualización o a algo que he hecho mal. Me podrías ayudar?! Ya no se donde buscar… Mi url es https://www.zukluxurypiercing.com
Gracias por adelantado!
Buenas.
Mira a ver si tienes los filtros de widgets a la barra lateral, y si en la configuración de esos widgets hay alguna opción para ocultar en móviles
Hola, soy novato en wordpress, qué tamaño en px debería tener el logo para que quede bien si uso la plantilla de flatsome?
Hola Carlos.
Prueba con 80 px de alto y el largo que le corresponda proporcionalmente
Hola Joaquín, ¿Cómo podría hacer que el Header Bottom sólo tenga una columna, en vez de 3?. He puesto un menú y quiero que el submenú abarque todo el ancho de la página, pero se queda en el ancho de la columna en el que está, por eso solo quiero una columna, para que pueda expandirse a todo el ancho de la página, gracias
Hola Raul.
No es posible disponer de una sola columna en la anchura del header bottom
Hola Joaquin. Muy buena info, pero en mi caso instalé el tema flatsome (y un tema hijo) pero no me aparece el header builder (elementos del header, mesa de trabajo y menu header builder), más solo tengo la opción de la barra lateral para cambiar la apariencia. Esto me impide editar a totalidad la barra de menú (hasta la info del correo, telefono u horario de atención). Sabes a que puede deberse ese error? Saludos y gracias de antemano.
Buenas.
Pudiera ser algún tipo de problema de actualización / compatibilidad entre Flatsome, WordPress y Woocommerce
Ya lo solucione dando mas altura al header. Gracias de todos modos. saludos
Perfecto
un saludo
Hola Joaquin
Quisiera que el logo aparezca mas grande pero no encuentro la forma de hacerlo o es que la plantilla no lo permite.
Gracias de antemano por tu respuesta. Saludos
Buenas.
Veo que ya lo has resuelto.
Un saludo
Hola Joaquin, gracias por tu post.
Acabo de comprar e instalar el Flatsome y mi problema es que el Header Builder no se activa, no aparece al pie para customizarlo.
Lo lo puedo usar porque no me deja cambiar el logo. imagínate.
Tengo WP 5.2.2 y el Flatsome 3.8.4
Qué opinas? Saludos
Buenas.
Es posible que haya alguna incompatiblidad con algún plugin que tengas instalado, o algo por el estilo.
Acude al soporte oficial de Flatsome para que analicen tu caso concreto: Soporte Flatsome
Nota: inicia sesión en Envato Market, ve al enlace anterior y haz clic en el botón: «Contact Author»
un saludo
Buenos días Joaquin, pedazo de curro con el tuto, tengo una pregunta… ¿Sabrias si es posible poner un menu lateral fijo en el inicio con este tema? Pero que el menu aparezca ya desplegado.
Gracias
Buenas Tano.
1.- El UX Builder (constructor) incluye un elemento denominado «Navigation» que es para añadir un menú, pero es muy pobre y no creo que te sirva.
2.- El UX Builder también incluye un elemento «Widget Area» que te permite añadir un area de widgets. Si en ese área tienes un widget de menú con el menú que quieres, se mostraría. Pero no se si te valdría.
Un saludo
Sigo sin ver la opción de poder poner el código Hex de color dentro del apartado “Top Bar Background” . Lo más seguro es porque no tengo mi tema actualizado. He visto que la última versión va por la 3.6.1 del día 15/07/18.
Gracias Joaquín.
Buenas,
En general en WordPress, la mayoría de ocasiones en que una plantilla no muestra alguna opción o el constructor no funciona correctamente es debido a la falta de actualización de la plantilla.
Hola Joaquín.
Resulta que quiero cambiar el color de fondo al TOP BAR MENU que tengo ahora mismo, y cuando voy a hacerlo en el área de seleccionar color es imposible poner un código hexadecimal. Solo permite elegir un color con el selector y su opacidad.
La versión actual que tengo instalada es : 3.2.0
Al mismo tiempo me gustaría poder modificar el tamaño de fuente de los textos que pongo en ese lugar, tipo teléfono, mi cuenta, preguntas frecuentes, etc, pero veo que en no tengo opciones de personalización en el header builder, supongo que estoy hay que hacerlo con código html dentro del elemento «HTML1», verdad ?
Para poder hacer estos ajuste de personalización me recomiendas que en lugar de utilizar el elemento «Top Bar Menu», utilice un Block con todo este contenido, o qué solución existe.
Muchas gracias.
Hola Joaquín,
1.- Para personalizar el color de la barra superior de la cabecera debes ir a: «Flatsome > Theme Options > Header > Top Bar» y en la opción «Top Bar Background» se establece el color. A mí, si me sale un campo para introducir el código HTML del color. Si a ti no te aparece, supongo que será algún tipo de problema de actualizaciones de tu plantilla o tu wordpress.
2.- En el caso del header central e inferior, el tamaño de las fuentes se cambia en «Header Main» o «Header Bottom» (según el caso) y en el apartado: «Nav Size».
En el caso de la cabecera superior, no hay una opción para cambiar el tamaño de las fuentes de manera general, habría que verlo en cada caso. Por ejemplo, en el caso del bloque de contacto, en su configuración se puede cambiar el tamaño de iconos y también cambia el de texto. En el caso del bloque HTML, habría que hacerlo con código como bien dices.