How to Use the HTML Block Editor in MultiLipi Visual Editor

The HTML Block Editor is an advanced feature inside MultiLipi’s Visual Editor. Instead of limiting changes to visible copy or CSS, it lets you work with the HTML of a selected element through a dedicated panel.

• Replace an English section with a fully customized Hindi section.
• Insert a localized promotional banner before a product description.
• Add a market-specific CTA after an existing paragraph.
• Hide a section that is irrelevant to one language audience.
• Reuse the same promotional markup across multiple translated pages.

The floating toolbar separates content translation, visual styling, and HTML structure. For presentation-only changes, use Style or follow the custom CSS guide; use HTML when the markup itself must change.

4.1 Replace Inner Content (innerHTML)

This replaces the selected element’s children while preserving the outer selected element. It is the right choice for replacing a heading, rebuilding a content block, or creating a different localized presentation.

<!-- Original selected container -->
<div>
  <h2>Welcome to Our Store</h2>
  <p>Discover our latest products.</p>
</div>

<!-- New inner HTML -->
<h2>Benvenuti nel nostro negozio</h2>
<p>Scopri i nostri ultimi prodotti.</p>

4.2 Insert Before Element

Adds custom markup immediately before the selection without removing its existing content. Use it for localized notices, introductions, campaign banners, or market-specific explanations.

<div class="localized-banner">
  <p>Special offers for our Italian customers</p>
</div>

4.3 Insert After Element

Adds markup immediately after the selected element. It works well for contact buttons, related content, product recommendations, and localized calls-to-action.

<div class="localized-cta">
  <a href="/contact/">Contact Our Team</a>
</div>

<div class="custom-section">
  <h2>Welcome to Our Global Platform</h2>
  <p>
    Explore our products and services
    in your preferred language.
  </p>
</div>

Common elements include headings, paragraphs, containers, spans, emphasis, links, and lists. For terminology that should remain consistent across translations, configure MultiLipi glossary rules rather than duplicating manual HTML changes. For image and visual localization, use the dedicated media translation workflow.

The Hide in this language control hides the selected block only for the currently edited language. This can be appropriate for a market-specific offer, unavailable product, or alternate localized introduction.

Reusable HTML Snippets provide a WPCode-style library for repeated banners, notices, CTAs, product blocks, and custom layouts. Open HTML Snippets, then choose + New Snippet or Create First Snippet.

<div class="global-promo">
  <h3>Discover Our Services</h3>
  <p>Explore solutions designed for international businesses.</p>
  <a href="/contact/">Get in Touch</a>
</div>

After saving, return to HTML Block and use Insert Saved Snippet.... The nearby + Manage link reopens snippet management.

To customize an H1, select the heading itself, confirm the selected tag is H1, choose Replace Inner Content, edit the markup, preview, and save.

<span>LLM Optimization beyond</span>:
The Engineering Behind AI Visibility

• Select the smallest element that achieves the intended result.
• Prefer insertion when original content should remain.
• Keep tags valid, closed, and correctly nested.
• Test localized links instead of assuming /contact/ resolves correctly in every language.
• Avoid untrusted scripts, event handlers, and unknown embed code.
• Check desktop and mobile viewport controls before saving.
• Use snippets for repeated structures and glossary rules for repeated terminology.
• Do not hide critical functionality merely to simplify a localized layout.

For right-to-left layouts, review RTL language support. If visitors should automatically reach a suitable locale, configure the visitor language redirector. For bulk content work, the translation import and export guide may be more efficient than element-by-element HTML edits.