First of all, “Hello!”
Now, since version 2.3, it’s possible to import HTML/CSS directly into the builder, which I think is great.
The issue is that some elements aren’t being translated into the best possible elements.
For example:
Buttons don’t use the “button” element, to give a basic example.
A more complete element is “Tabs.”
I’m wondering if there are some things I might be overlooking when importing the code and transforming it into these more complex elements.
Thank you for your time
Hey @RealSousen,
can you share the small snippets of the code with us, so I can try replicate the issues/possible improvements? 
Possibly with expected results as well, so that I don’t need to guess 
Thanks,
Matej
Sure, I’m sharing the code for both examples since I feel neither one is quite right for the element I need within Bricks.
Button: Including this code in the builder creates a “text link” element instead of using the “button” element. While this isn’t a major issue, it’s just an example.
A bigger problem would be including elements that use tabs when I want them to use the table element.
From what I’ve noticed, if the tags aren’t specified correctly in the HTML, it doesn’t interpret them properly.
Button
<style>
.boton {
display: inline-flex;
justify-content: center;
align-items: center;
min-height: 4.6rem;
padding-inline: var(--gap-l);
color: inherit;
border: 1px solid transparent;
border-radius: 0.8rem;
font-size: var(--texto-xs);
font-weight: 900;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition:
transform 180ms ease,
background-color 180ms ease,
color 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease;
}
.boton:hover {
transform: translateY(-0.2rem);
}
.boton--primario {
color: var(--ui-claro);
background: var(--marca-2);
box-shadow: 0 var(--gap-xs) var(--gap-l) color-mix(in srgb, var(--marca-2) 28%, transparent);
}
.boton--primario:hover {
background: color-mix(in srgb, var(--marca-2) 82%, var(--ui-oscuro));
}
.boton--secundario {
color: var(--ui-claro);
background: color-mix(in srgb, var(--marca-3) 34%, transparent);
border-color: color-mix(in srgb, var(--ui-claro) 16%, transparent);
}
.boton--secundario:hover {
background: color-mix(in srgb, var(--marca-3) 48%, transparent);
}
.boton--claro {
color: var(--texto-titulo);
background: var(--ui-claro);
}
.boton--claro:hover {
color: var(--ui-claro);
background: var(--marca-3);
}
</style>
<a class="boton boton--primario" href="#">
Agregar al carrito
</a>
Codigo Tabs
<style>
.pestanas-producto {
width: 100%;
color: var(--texto-normal);
}
.pestanas-producto__navegacion {
display: flex;
justify-content: space-between;
gap: var(--gap-s);
width: 100%;
overflow-x: auto;
border-bottom: 1px solid var(--ui-borde);
}
.pestanas-producto__item {
position: relative;
min-width: max-content;
padding: var(--gap-s) var(--gap-xs);
color: var(--texto-titulo);
font-size: var(--texto-s);
font-weight: 900;
line-height: 1.2;
text-decoration: none;
transition:
color 180ms ease,
opacity 180ms ease;
}
.pestanas-producto__item:hover {
color: var(--texto-enlace);
}
.pestanas-producto__item--activo {
color: var(--texto-enlace);
}
.pestanas-producto__item--activo::after {
content: "";
position: absolute;
right: 0;
bottom: -1px;
left: 0;
height: 0.2rem;
background: var(--marca-2);
border-radius: 999rem;
}
.pestanas-producto__contenido {
margin-top: var(--gap-m);
}
.pestanas-producto__panel {
display: none;
}
.pestanas-producto__panel--activo {
display: block;
}
.pestanas-producto__grid {
display: grid;
grid-template-columns: 0.92fr 1.08fr;
gap: var(--gap-m);
}
.pestanas-producto__tarjeta {
padding: var(--gap-l);
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--fondo-caja) 96%, transparent),
color-mix(in srgb, var(--fondo-caja) 96%, transparent)
),
radial-gradient(
circle at top right,
color-mix(in srgb, var(--marca-2) 8%, transparent),
transparent 22rem
);
border: 1px solid var(--ui-borde);
border-radius: 1.4rem;
box-shadow: 0 var(--gap-xs) var(--gap-xl) color-mix(in srgb, var(--ui-sombra) 68%, transparent);
}
.pestanas-producto__tarjeta--destacada {
background:
radial-gradient(
circle at top right,
color-mix(in srgb, var(--marca-3) 10%, transparent),
transparent 24rem
),
var(--fondo-caja);
}
.pestanas-producto__titulo {
margin: 0 0 var(--gap-s);
color: var(--texto-titulo);
font-size: var(--titulos-m);
line-height: 1.2;
}
.pestanas-producto__subtitulo {
margin: var(--gap-m) 0 var(--gap-xs);
color: var(--texto-titulo);
font-size: var(--titulos-s);
line-height: 1.25;
}
.pestanas-producto__texto {
margin: 0 0 var(--gap-s);
color: var(--texto-normal);
font-size: var(--texto-s);
line-height: 1.7;
}
.pestanas-producto__texto:last-child {
margin-bottom: 0;
}
.pestanas-producto__lista {
display: grid;
gap: var(--gap-xs);
margin: var(--gap-m) 0 0;
padding: 0;
list-style: none;
}
.pestanas-producto__lista-item {
position: relative;
padding-left: 2.4rem;
color: var(--texto-normal);
font-size: var(--texto-s);
line-height: 1.45;
}
.pestanas-producto__lista-item::before {
content: "";
position: absolute;
top: 0.25rem;
left: 0;
width: 1.5rem;
height: 1.5rem;
border-radius: 999rem;
background: color-mix(in srgb, var(--marca-3) 48%, #00c86b);
}
.pestanas-producto__lista-item::after {
content: "";
position: absolute;
top: 0.62rem;
left: 0.42rem;
width: 0.62rem;
height: 0.32rem;
border-bottom: 0.2rem solid var(--ui-claro);
border-left: 0.2rem solid var(--ui-claro);
transform: rotate(-45deg);
}
.pestanas-producto__tabla {
overflow: hidden;
border: 1px solid var(--ui-borde);
border-radius: 1rem;
background: var(--fondo-caja);
}
.pestanas-producto__fila {
display: grid;
grid-template-columns: 18rem 1fr;
min-height: 3.8rem;
}
.pestanas-producto__fila + .pestanas-producto__fila {
border-top: 1px solid var(--ui-borde);
}
.pestanas-producto__dato-titulo,
.pestanas-producto__dato-texto {
display: flex;
align-items: center;
padding: 0.85rem var(--gap-s);
font-size: var(--texto-xs);
line-height: 1.35;
}
.pestanas-producto__dato-titulo {
color: var(--texto-titulo);
background: var(--fondo-contenedor);
border-right: 1px solid var(--ui-borde);
}
.pestanas-producto__dato-texto {
color: var(--texto-normal);
}
.pestanas-producto__colores {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.pestanas-producto__color {
display: block;
width: 1.4rem;
height: 1.4rem;
border: 1px solid var(--ui-borde);
border-radius: 999rem;
}
.pestanas-producto__color--amarillo {
background: #f4bd00;
}
.pestanas-producto__color--blanco {
background: var(--ui-claro);
}
.pestanas-producto__color--azul {
background: var(--marca-3);
}
.pestanas-producto__color--rojo {
background: var(--marca-2);
}
.pestanas-producto__color--verde {
background: #087b43;
}
.pestanas-producto__color--naranja {
background: #f26a21;
}
.pestanas-producto__sectores {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--gap-m);
}
.pestanas-producto__sector {
min-height: 13rem;
padding: var(--gap-m) var(--gap-s);
text-align: center;
background: var(--fondo-caja);
border: 1px solid var(--ui-borde);
border-radius: 1.2rem;
}
.pestanas-producto__sector-titulo {
margin: 0 0 0.6rem;
color: var(--texto-titulo);
font-size: var(--texto-s);
line-height: 1.2;
}
.pestanas-producto__sector-texto {
margin: 0;
color: var(--texto-sub);
font-size: var(--texto-xs);
line-height: 1.45;
}
.pestanas-producto__archivo {
display: flex;
justify-content: space-between;
gap: var(--gap-m);
align-items: center;
padding: var(--gap-m);
background: var(--fondo-caja);
border: 1px solid var(--ui-borde);
border-radius: 1.2rem;
}
.pestanas-producto__archivo + .pestanas-producto__archivo {
margin-top: var(--gap-s);
}
.pestanas-producto__archivo-titulo {
margin: 0 0 0.4rem;
color: var(--texto-titulo);
font-size: var(--texto-s);
line-height: 1.2;
}
.pestanas-producto__archivo-texto {
margin: 0;
color: var(--texto-sub);
font-size: var(--texto-xs);
line-height: 1.45;
}
.pestanas-producto__boton {
display: inline-flex;
justify-content: center;
align-items: center;
min-height: 4.2rem;
padding-inline: var(--gap-m);
color: var(--ui-claro);
background: var(--marca-2);
border: 1px solid var(--marca-2);
border-radius: 0.8rem;
font-size: var(--texto-xs);
font-weight: 900;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition:
transform 180ms ease,
background-color 180ms ease;
}
.pestanas-producto__boton:hover {
transform: translateY(-0.2rem);
background: color-mix(in srgb, var(--marca-2) 82%, var(--ui-oscuro));
}
.pestanas-producto__faq {
display: grid;
gap: var(--gap-s);
}
.pestanas-producto__pregunta {
padding: var(--gap-m);
background: var(--fondo-caja);
border: 1px solid var(--ui-borde);
border-radius: 1.2rem;
}
.pestanas-producto__pregunta-titulo {
margin: 0 0 var(--gap-xs);
color: var(--texto-titulo);
font-size: var(--texto-s);
line-height: 1.3;
}
.pestanas-producto__pregunta-texto {
margin: 0;
color: var(--texto-normal);
font-size: var(--texto-xs);
line-height: 1.6;
}
@media (max-width: 1080px) {
.pestanas-producto__grid,
.pestanas-producto__sectores {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 760px) {
.pestanas-producto__navegacion {
justify-content: flex-start;
}
.pestanas-producto__grid,
.pestanas-producto__sectores {
grid-template-columns: 1fr;
}
.pestanas-producto__fila {
grid-template-columns: 1fr;
}
.pestanas-producto__dato-titulo {
border-right: 0;
border-bottom: 1px solid var(--ui-borde);
}
.pestanas-producto__archivo {
align-items: flex-start;
flex-direction: column;
}
.pestanas-producto__boton {
width: 100%;
}
}
</style>
<section class="pestanas-producto">
<nav class="pestanas-producto__navegacion" aria-label="Información del producto">
<a class="pestanas-producto__item pestanas-producto__item--activo" href="#">
Descripción
</a>
<a class="pestanas-producto__item" href="#">
Especificaciones
</a>
<a class="pestanas-producto__item" href="#">
Aplicaciones
</a>
<a class="pestanas-producto__item" href="#">
Fichas técnicas
</a>
<a class="pestanas-producto__item" href="#">
Preguntas frecuentes
</a>
</nav>
<div class="pestanas-producto__contenido">
<article class="pestanas-producto__panel pestanas-producto__panel--activo">
<div class="pestanas-producto__grid">
<div class="pestanas-producto__tarjeta">
<h2 class="pestanas-producto__titulo">Descripción del producto</h2>
<p class="pestanas-producto__texto">
El casco de seguridad Tipo I Clase E está diseñado para proteger la cabeza del usuario contra impactos, penetración y descargas eléctricas. Fabricado en polietileno de alta densidad HDPE, ofrece excelente resistencia y durabilidad en ambientes industriales.
</p>
<ul class="pestanas-producto__lista">
<li class="pestanas-producto__lista-item">Diseño ergonómico y ligero para mayor confort.</li>
<li class="pestanas-producto__lista-item">Suspensión ajustable de 4 puntos con banda antisudor.</li>
<li class="pestanas-producto__lista-item">Ranuras laterales para accesorios como orejeras, caretas o barboquejos.</li>
<li class="pestanas-producto__lista-item">Resistente a rayos UV y a la intemperie.</li>
<li class="pestanas-producto__lista-item">Cumple con la norma NOM-115-STPS-2009.</li>
</ul>
</div>
<div class="pestanas-producto__tarjeta pestanas-producto__tarjeta--destacada">
<h2 class="pestanas-producto__titulo">Ventajas principales</h2>
<p class="pestanas-producto__texto">
Este modelo es ideal para empresas que requieren protección confiable, disponibilidad constante y compatibilidad con accesorios de seguridad industrial.
</p>
<h3 class="pestanas-producto__subtitulo">Recomendado para:</h3>
<ul class="pestanas-producto__lista">
<li class="pestanas-producto__lista-item">Obras civiles y construcción.</li>
<li class="pestanas-producto__lista-item">Mantenimiento industrial.</li>
<li class="pestanas-producto__lista-item">Operaciones eléctricas supervisadas.</li>
<li class="pestanas-producto__lista-item">Almacenes y centros de distribución.</li>
</ul>
</div>
</div>
</article>
<article class="pestanas-producto__panel">
<div class="pestanas-producto__tarjeta">
<h2 class="pestanas-producto__titulo">Especificaciones técnicas</h2>
<div class="pestanas-producto__tabla">
<div class="pestanas-producto__fila">
<strong class="pestanas-producto__dato-titulo">Tipo</strong>
<span class="pestanas-producto__dato-texto">Tipo I impacto en la parte superior</span>
</div>
<div class="pestanas-producto__fila">
<strong class="pestanas-producto__dato-titulo">Clase</strong>
<span class="pestanas-producto__dato-texto">Clase E dieléctrico</span>
</div>
<div class="pestanas-producto__fila">
<strong class="pestanas-producto__dato-titulo">Material</strong>
<span class="pestanas-producto__dato-texto">Polietileno de alta densidad HDPE</span>
</div>
<div class="pestanas-producto__fila">
<strong class="pestanas-producto__dato-titulo">Suspensión</strong>
<span class="pestanas-producto__dato-texto">4 puntos de anclaje</span>
</div>
<div class="pestanas-producto__fila">
<strong class="pestanas-producto__dato-titulo">Ajuste</strong>
<span class="pestanas-producto__dato-texto">Matraca de ajuste rápido</span>
</div>
<div class="pestanas-producto__fila">
<strong class="pestanas-producto__dato-titulo">Tensión dieléctrica</strong>
<span class="pestanas-producto__dato-texto">Hasta 20,000 V</span>
</div>
<div class="pestanas-producto__fila">
<strong class="pestanas-producto__dato-titulo">Peso</strong>
<span class="pestanas-producto__dato-texto">Aprox. 360 g</span>
</div>
<div class="pestanas-producto__fila">
<strong class="pestanas-producto__dato-titulo">Colores disponibles</strong>
<span class="pestanas-producto__dato-texto pestanas-producto__colores">
<i class="pestanas-producto__color pestanas-producto__color--amarillo"></i>
<i class="pestanas-producto__color pestanas-producto__color--blanco"></i>
<i class="pestanas-producto__color pestanas-producto__color--azul"></i>
<i class="pestanas-producto__color pestanas-producto__color--rojo"></i>
<i class="pestanas-producto__color pestanas-producto__color--verde"></i>
<i class="pestanas-producto__color pestanas-producto__color--naranja"></i>
</span>
</div>
<div class="pestanas-producto__fila">
<strong class="pestanas-producto__dato-titulo">Norma</strong>
<span class="pestanas-producto__dato-texto">NOM-115-STPS-2009, ANSI / ISEA Z89.1</span>
</div>
</div>
</div>
</article>
<article class="pestanas-producto__panel">
<div class="pestanas-producto__sectores">
<div class="pestanas-producto__sector">
<h3 class="pestanas-producto__sector-titulo">Construcción</h3>
<p class="pestanas-producto__sector-texto">Protección en obras civiles y trabajos en altura.</p>
</div>
<div class="pestanas-producto__sector">
<h3 class="pestanas-producto__sector-titulo">Industria</h3>
<p class="pestanas-producto__sector-texto">Entornos industriales y líneas de producción.</p>
</div>
<div class="pestanas-producto__sector">
<h3 class="pestanas-producto__sector-titulo">Energía</h3>
<p class="pestanas-producto__sector-texto">Trabajos eléctricos y plantas de generación.</p>
</div>
<div class="pestanas-producto__sector">
<h3 class="pestanas-producto__sector-titulo">Mantenimiento</h3>
<p class="pestanas-producto__sector-texto">Tareas de mantenimiento industrial y general.</p>
</div>
<div class="pestanas-producto__sector">
<h3 class="pestanas-producto__sector-titulo">Logística</h3>
<p class="pestanas-producto__sector-texto">Almacenes, centros de distribución y transporte.</p>
</div>
</div>
</article>
<article class="pestanas-producto__panel">
<div class="pestanas-producto__tarjeta">
<h2 class="pestanas-producto__titulo">Fichas técnicas y documentos</h2>
<div class="pestanas-producto__archivo">
<div class="pestanas-producto__archivo-contenido">
<h3 class="pestanas-producto__archivo-titulo">Ficha técnica del producto</h3>
<p class="pestanas-producto__archivo-texto">Documento PDF con especificaciones, materiales y recomendaciones de uso.</p>
</div>
<a class="pestanas-producto__boton" href="#">
Descargar PDF
</a>
</div>
<div class="pestanas-producto__archivo">
<div class="pestanas-producto__archivo-contenido">
<h3 class="pestanas-producto__archivo-titulo">Guía de compatibilidad</h3>
<p class="pestanas-producto__archivo-texto">Información sobre accesorios compatibles para protección complementaria.</p>
</div>
<a class="pestanas-producto__boton" href="#">
Ver documento
</a>
</div>
</div>
</article>
<article class="pestanas-producto__panel">
<div class="pestanas-producto__faq">
<div class="pestanas-producto__pregunta">
<h3 class="pestanas-producto__pregunta-titulo">¿Este casco sirve para trabajos eléctricos?</h3>
<p class="pestanas-producto__pregunta-texto">
Sí. Al ser Clase E, está diseñado para brindar protección dieléctrica bajo las condiciones especificadas por el fabricante y la normativa aplicable.
</p>
</div>
<div class="pestanas-producto__pregunta">
<h3 class="pestanas-producto__pregunta-titulo">¿Cuenta con ranuras para accesorios?</h3>
<p class="pestanas-producto__pregunta-texto">
Sí. El casco puede ser compatible con accesorios como orejeras, caretas o barboquejos, dependiendo del modelo específico.
</p>
</div>
<div class="pestanas-producto__pregunta">
<h3 class="pestanas-producto__pregunta-titulo">¿Manejan venta por volumen?</h3>
<p class="pestanas-producto__pregunta-texto">
Sí. Puedes solicitar una cotización personalizada para compras empresariales, proyectos o suministros recurrentes.
</p>
</div>
</div>
</article>
</div>
</section>
For example, the following code snippets are almost identical, but depending on how they’re placed, the Builder interprets them correctly, causing it to create the “IMG” element (the image placeholder) or not, and not just the code itself. In theory, both work, but one creates the correct element and the other doesn’t.
Therefore, my question is how the code should be structured so that it’s interpreted as more complex elements like “tabs”.
Image code A (Correctly creates the Img element)
<figure class="pie-marca__logo-contenedor">
<img
class="pie-marca__logo"
src="/wp-content/uploads/placeholder-logo-jr.svg"
alt="JR Seguridad e Higiene"
width="220"
height="72"
loading="lazy"
decoding="async"
>
</figure>
Image code B (Creates a “Text Link” element)
<a class="pie-marca__identidad" href="/" aria-label="Ir al inicio de JR Seguridad e Higiene"> <figure class="pie-marca__logo-contenedor"> <img class="pie-marca__logo" src="/wp-content/uploads/placeholder-logo-jr.svg" alt="JR Seguridad e Higiene" width="220" height="72" loading="lazy" decoding="async" > </figure> </a>