# Html Block Editor
**Source:** https://es.multilipi.com/help/html-block-editor
**Language:** Spanish
---
ARTÍCULO DE AYUDA
# Cómo utilizar el editor de bloques HTML en el editor visual de MultiLipi
MultiLipi •27 de octubre de 2026 •
5 Min leer
Edición visual avanzada No se requieren cambios en los archivos fuente
MultiLipi **Editor de bloques HTML** le brinda control estructural sobre las páginas web traducidas directamente dentro del editor visual. Reemplace el marcado existente, inserte banners y llamadas a la acción localizados, oculte bloques para un idioma específico y reutilice fragmentos de HTML guardados en todo su flujo de trabajo.
Esto es útil cuando una página traducida necesita algo más que un cambio de texto; por ejemplo, una promoción específica para un mercado, una llamada a la acción localizada, una estructura de sección diferente o contenido que solo deba aparecer para una audiencia determinada. Si es nuevo en este espacio de trabajo, comience con la guía del editor visual de MultiLipi y el descripción general del editor de traducciones .
## Lo que aprenderá
1Abra el editor de bloques HTML
2Seleccione el elemento de página web correcto
3Navegue por la jerarquía de elementos
4Reemplace el contenido HTML existente
5Inserte HTML antes o después de un elemento
6Oculte bloques para un idioma
7Cree y reutilice fragmentos guardados
8Previsualice, guarde y restaure de forma segura
## 1. ¿Qué es el Editor de Bloques HTML?
Control estructural para un idioma y página traducidos específicos.
El Editor de Bloques HTML es una función avanzada dentro del Editor Visual de MultiLipi. En lugar de limitar los cambios al texto visible o al CSS, le permite trabajar con el HTML de un elemento seleccionado a través de un panel dedicado.
- Reemplace una sección en inglés con una sección en hindi totalmente personalizada.
- Inserte un banner promocional localizado antes de una descripción de producto.
- Añada una llamada a la acción (CTA) específica para el mercado después de un párrafo existente.
- Oculte una sección que sea irrelevante para una audiencia de un idioma específico.
- Reutilice el mismo marcado promocional en múltiples páginas traducidas.
Característica Qué hace
Traducir Cambia el texto traducido en el contenido seleccionado
Estilo Ajusta la presentación visual del elemento seleccionado
Bloque HTML Reemplaza, inserta u oculta HTML específico del idioma
CSS Personalizado Aplica cambios de presentación basados en CSS
### Previsualiza cambios estructurales antes de guardar
Los cambios en HTML pueden alterar la apariencia y el comportamiento. Reemplazar un contenedor grande puede eliminar botones, formularios, medios incrustados o elementos secundarios interactivos. Utilice la vista previa antes de confirmar cambios significativos.
## 2. Abra el editor de bloques HTML
Seleccione un idioma, elija un elemento y luego abra sus controles HTML.
1
Inicie sesión en Panel de MultiLipi , abra el proyecto del sitio web correspondiente e inicie el Editor Visual.
2
Seleccione el idioma traducido deseado. Revise la gestión de idiomas o idiomas disponibles si el idioma aún está configurado.
3
Pase el cursor sobre la vista previa de la página web y seleccione el elemento exacto que desea personalizar. MultiLipi puede identificarlo como `DIV` , `H1` , `P` , o `SPAN` .
4
Elegir **HTML**en la barra de herramientas flotante. El Editor de Estilos se abre con la **Bloque HTML** pestaña activa.
MultiLipi Editor Visual con un elemento de página web seleccionado y las acciones de Traducir, Estilo y HTML visibles
Figura 1.1 — Editor Visual: elemento de página web seleccionado con acciones de Traducir, Estilo y HTML.
La barra de herramientas flotante separa la traducción de contenido, el estilo visual y la estructura HTML. Para cambios exclusivos de presentación, utilice Estilo o siga la guía de CSS personalizado ; utilice HTML cuando el marcado en sí deba cambiar.
MultiLipi Editor de Bloques HTML que muestra el elemento seleccionado, el campo de contenido HTML, la Vista previa y los controles para Guardar HTML
Figura 1.2 — Editor de Bloques HTML: elemento seleccionado, campo de contenido HTML y controles de guardado.
## 3. Comprender la interfaz
Lea la etiqueta actual, las pestañas, la jerarquía y el ámbito principal antes de editar.
01
### Identificación de elementos
La etiqueta seleccionada, como DIV o H1, aparece en la parte superior del panel.
02
### Pestañas del editor
Visual gestiona el estilo, Bloque HTML gestiona el marcado y CSS Personalizado gestiona las reglas de presentación.
03
### Jerarquía de elementos
Una ruta de navegación como html > body > main > div muestra la ubicación del elemento seleccionado.
04
### Navegación principal
La opción principal mueve la selección hacia afuera, al elemento contenedor, cuando necesita un alcance más amplio.
### Seleccione el elemento más pequeño apropiado
Editar un `H1` cambia un encabezado enfocado. Moverse a su elemento principal `DIV` puede incluir una etiqueta de categoría, descripción, información del autor y botones. Confirme siempre el alcance antes de reemplazar u ocultar contenido.
## 4. Comprender las acciones de edición HTML
Elija si desea reemplazar el interior o agregar marcado junto a la selección.
Menú desplegable de acciones de bloque HTML de MultiLipi que muestra Reemplazar contenido interno, Insertar antes del elemento e Insertar después del elemento
Figura 1.3 — Menú desplegable de acciones de bloque HTML: reemplazar contenido interno, insertar antes e insertar después.
### 4.1 Reemplazar contenido inter(innerHTML)
Esto reemplaza a los elementos secundarios del elemento seleccionado mientras conserva el elemento seleccionado externo. Es la opción correcta para reemplazar un encabezado, reconstruir un bloque de contenido o crear una presentación localizada diferente.
HTML
```
Welcome to Our Store
Discover our latest products.
Benvenuti nel nostro negozio
Scopri i nostri ultimi prodotti.
```
### 4.2 Insertar antes del elemento
Añade marcado personalizado inmediatamente antes de la selección sin eliminar su contenido existente. Úselo para avisos localizados, introducciones, banners de campaña o explicaciones específicas del mercado.
HTML
```
Special offers for our Italian customers
```
### 4.3 Insertar después del elemento
Añade marcado inmediatamente después del elemento seleccionado. Funciona bien para botones de contacto, contenido relacionado, recomendaciones de productos y llamadas a la acción localizadas.
HTML
```
```
🎯
🎯
Atajo de decisión
### Reemplazar solo cuando la eliminación sea intencional
Si el contenido original debe permanecer, elija **Insertar antes** o **Insertar después** . Elija **Reemplazar contenido interno** solo cuando su nuevo marcado contenga todo lo que el bloque seleccionado debe conservar.
## 5. Editar HTML dentro de una página web traducida
Ingrese un marcado válido, inspeccione el resultado y guarde a través del flujo de trabajo admitido.
1
Seleccione el encabezado, párrafo, contenedor u otro elemento que desee modificar.
2
Abra el Bloque HTML desde la barra de herramientas flotante o la pestaña del Editor de Estilos.
3
Elija Reemplazar contenido interno, Insertar antes del elemento o Insertar después del elemento.
4
Ingrese o modifique el marcado en el campo CONTENIDO HTML.
5
Haga clic en Vista previa e inspeccione la tipografía, el espaciado, el diseño, los enlaces y el comportamiento responsivo.
6
Haga clic en Guardar HTML y luego confirme que el cambio guardado permanezca visible en la vista previa de la página.
HTML
```
Welcome to Our Global Platform
Explore our products and services
in your preferred language.
```
Los elementos comunes incluyen encabezados, párrafos, contenedores, spans, énfasis, enlaces y listas. Para la terminología que debe permanecer consistente en todas las traducciones, configure MultiLipi reglas de glosario en lugar de duplicar cambios manuales en HTML. Para la localización de imágenes y elementos visuales, utilice el flujo de trabajo de traducción de medios .
## 6. Ocultar un bloque para un idioma específico
Elimine contenido irrelevante para el mercado de una experiencia traducida.
El **Ocultar en este idioma** el control oculta el bloque seleccionado solo para el idioma que se está editando actualmente. Esto puede ser apropiado para una oferta específica de un mercado, un producto disponible o una introducción localizada alternativa.
1
Abra la página web traducida en el Editor Visual.
2
Seleccione el elemento o contenedor principal que desea ocultar.
3
Abra la pestaña de Bloque HTML.
4
Habilite Ocultar en este idioma.
5
Guarde y verifique el resultado en la misma versión de idioma.
### Seleccione el bloque completo, solo su encabezado
Ocultar solo un encabezado puede dejar visibles la descripción y la llamada a la acción (CTA). Seleccione el contenedor circundante cuando deba desaparecer toda la sección. Para exclusiones de traducción más amplias, compare esta función con Exclusiones de URL, bloques y palabras .
## 7. Cree y gestione fragmentos de HTML reutilizables
Guarde el marcado repetido una vez y luego selecciónelo desde su biblioteca de fragmentos.
Los fragmentos HTML reutilizables proporcionan una biblioteca al estilo WPCode para banners, avisos, llamadas a la acción (CTA), bloques de productos y diseños personalizados repetidos. Abra **Fragmentos HTML** , luego elija **+ Nuevo fragmento** o **Crear primer fragmento** .
MultiLipi Administrador de fragmentos HTML reutilizables que muestra la biblioteca de fragmentos, el botón Nuevo fragmento y el estado vacío
Figura 1.4 — Fragmentos HTML reutilizables: biblioteca de fragmentos, Nuevo fragmento y estado vacío.
HTML
```
```
Después de guardar, regrese al Bloque HTML y use **Insertar fragmento guardado...** . El enlace **+ Gestionar** cercavuelve a abrir la gestión de fragmentos.
🧠
🧠
Nota de flujo de trabajo
### Pruebe el comportamiento de actualización de fragmentos antes de escalar
La interfaz confirma que los fragmentos se pueden guardar e insertar, pero establece si la edición de un fragmento actualiza retroactivamente cada inserción anterior. Valide ese comportamiento antes de tratar los fragmentos como un sistema de componentes sincronizado centralmente.
## 8. Personalizar encabezados y elementos individuales
Preserve las etiquetas semánticas mientras cambia su marcado interlocalizado.
Para personalizar un H1, seleccione el encabezado mismo, confirme que la etiqueta seleccionada es `H1` , elija Reemplazar contenido interno, edite el marcado, previsualice y guarde.
Editor de bloques HTML de MultiLipi editando el HTML interde un encabezado H1
Figura 1.5 — Editor de bloques HTML: edición de un encabezado H1 con contenido HTML personalizado.
HTML
```
LLM Optimization beyond:
The Engineering Behind AI Visibility
```
### Proteja la estructura de su página
La edición del marcado interpreserva el H1 seleccionado. Evite añadir elementos H1 duplicados innecesarios o reemplazar un encabezado crítico para la búsqueda con contenido relacionado. Obtenga más información en el MultiLipi glosario de SEO multilingüe .
## 9. Previsualizar, guardar, restaurar y contenido dinámico
Comprenda cómo el estado de edición afecta la traducción y el contenido cargado.
### Vista previa
Inspeccione el marcado anidado, los enlaces, el espaciado y el diseño antes de guardar.
### Guardar HTML
Persista la modificación actual a través del flujo de trabajo del editor compatible.
### Restaurar
Utilice la acción de restauración disponible y, a continuación, verifique su alcance exacto.
### La traducción se pausa durante la edición
Para traducir contenido dinámico recién cargado, haga clic en **Detener edición** , espere a que la página termine de traducirse y, a continuación, haga clic en **Iniciar edición** y seleccione el elemento. Consulte la guía completa de traducción de contenido dinámico para escenarios relacionados.
## 10. Mejores prácticas para la personalización de HTML
Mantenga los cambios locales precisos, válidos, adaptables y seguros.
- Seleccione el elemento más pequeño que logre el resultado deseado.
- Prefiera la inserción cuando el contenido original deba permanecer.
- Mantenga las etiquetas válidas, cerradas y correctamente anidadas.
- Pruebe los enlaces localizados en lugar de asumir que /contact/ se resuelve correctamente en todos los idiomas.
- Evite scripts confiables, controladores de eventos y códigos de inserción desconocidos.
- Compruebe los controles de la ventana gráfica de escritorio y móvil antes de guardar.
- Utilice fragmentos para estructuras repetidas y reglas de glosario para terminología repetida.
- No oculte funcionalidades críticas simplemente para simplificar un diseño localizado.
Para diseños de derecha a izquierda, revise soporte para idiomas RTL . Si los visitantes deben acceder automáticamente a una configuración regional adecuada, configure el redireccionador de idioma del visitante . Para trabajos de contenido masivo, la guía de importación y exportación de traducciones puede ser más eficiente que las ediciones de HTML elemento por elemento.
## 11. Solución de problemas comunes
Diagnostique problemas de alcance, acción, sintaxis y estado de traducción.
01
### La pestaña Bloque HTML aparece
Seleccione un elemento de página web editable, luego elija HTML desde su barra de herramientas flotante o abra Bloque HTML en el Editor de estilos.
02
### El contenido desapareció después del reemplazo
Es probable que haya reemplazado los elementos secundarios de un contenedor principal. Restaure si es apropiado, seleccione un elemento más pequeño y vuelva a intentarlo.
03
### El HTML insertado está en la posición incorrecta
Confirme tanto la acción Antes/Después como el objetivo seleccionado. La navegación principal cambia el alcance de la inserción.
04
### El mismo encabezado aparece dos veces
Reemplace el contenido interdel encabezado existente en lugar de insertar otro encabezado junto a él.
05
### El HTML personalizado parece incorrecto
Verifique la sintaxis, las etiquetas de cierre, el CSS existente del sitio, las dimensiones del contenedor principal y el comportamiento del viewport responsivo.
06
### El contenido dinámico está disponible
Detenga la edición, permita que finalicen la traducción y la carga dinámica, y luego comience a editar nuevamente.
07
### Falta un fragmento reutilizable
Confirme que se guardó en Fragmentos HTML o en + Gestionar, luego vuelva a abrir Insertar fragmento guardado.
08
### Un bloque oculto sigue siendo visible
Verifique el contenedor seleccionado, el idioma actual, el estado guardado y cualquier renderizado dinámico retrasado.
## 12. Lista de verificación final del editor de bloques HTML
Una última revisión antes de finalizar un cambio de HTML localizado.
La página web traducida correcta está abierta
El elemento y la etiqueta previstos están seleccionados
La jerarquía y el alcance del contenedor principal son correctos
La acción de edición adecuada está seleccionada
El contenido secundario requerido se conserva
El HTML insertado está en la posición correcta
La visibilidad del idioma es intencional
Los fragmentos reutilizables están guardados
El marcado es válido y proviene de una fuente segura
Los enlaces y botones funcionan
Las vistas previas de escritorio y móvil se ven correctamente
Se utilizó y verificó la opción Guardar HTML
## Preguntas frecuentes
Respuestas rápidas para flujos de trabajo comunes del Editor de bloques HTML.
¿Qué es el Editor de bloques HTML en MultiLipi?
Es una función del Editor visual para reemplazar o insertar HTML, gestionar la visibilidad de bloques según el idioma y utilizar fragmentos reutilizables en páginas web traducidas.
¿Necesito experiencia en programación?
Se recomienda tener conocimientos básicos de HTML. Las ediciones simples pueden utilizar el marcado existente, pero los reemplazos complejos requieren comprender la estructura y el anidamiento válidos.
¿Puedo añadir HTML sin eliminar el contenido existente?
Sí. Utilice Insertar antes del elemento o Insertar después del elemento en lugar de Reemplazar contenido interno.
¿Puedo ocultar una sección para un idioma específico?
Sí. Seleccione el bloque correspondiente y habilite Ocultar en este idioma para la página traducida actual.
¿Puedo crear fragmentos de HTML reutilizables?
Sí. Abra Fragmentos de HTML, cree y guarde un fragmento, luego selecciónelo a través de Insertar fragmento guardado en el editor.
¿Esto cambia el código fuente original de mi sitio web?
Considere estas operaciones como ediciones de páginas traducidas gestionadas por MultiLipi. La interfaz indica que los cambios se escriban de vuelta en su CMS o repositorio de código fuente original.
¿Por qué se pausa la traducción mientras edito?
La pausa mantiene estable el contenido seleccionado. Para contenido dinámico recién cargado, detenga la edición, permita que la traducción finalice y luego comience a editar nuevamente.
¿Listo para personalizar?
## Construya una mejor experiencia localizada
Comience con el elemento más pequeño apropiado, previsualice cada cambio estructural y guarde solo después de verificar el resultado en tamaños de escritorio y móvil.
Abrir el panel de MultiLipi Contacte a support@multilipi.com
### ¿Fue útil este artículo?
### En este artículo
Compartir
## ¿Listo para Globalizar?
Discutamos cómo MultiLipi puede transformar tu estrategia de contenido y ayudarte a alcanzar audiencias globales con optimización multilingüe impulsada por IA.
Rellena el formulario y nuestro equipo se pondrá en contacto contigo en 24 horas.