HTML Editing Guide

In page editing, inserting, deleting, or modifying page contents is a common actions. By adjusting elements and and how they displayed, you can easily A/B test various page contents or designs to improve the user experience. Ptengine offers several editing features: Text Editing, Image Replacement, Link Editing, Style Editing & Rearrange contents, and HTML Editing. The first five options are ideal for users without coding expertise to make quick changes, while HTML Editing provides more advanced customization for users with technical knowledge.

This article provides a detailed guide on how to properly use Ptengine's HTML editing feature, ensuring stable and efficient page modifications without compromising website functionality or structure.

All examples in this article are from Ptengine. Click here to explore the detailed Ptengine Page Editing Demo.

---

Basic Principles for HTML Editing #

To ensure your editing actions do not compromise the functionality or structure of the website, follow these key principles:

1. Avoid Modifying Interactive Elements and Dynamic Content

• Interactive Elements: Such as dropdown menus, carousels, or input fields. These elements often involve complex interaction logic, and altering them may result in broken functionality.
• Dynamic Content: For example, product prices, stock information, or CMS-generated content. Directly overwriting dynamic content may cause data errors or duplicate content on the page. If changes to dynamic content are necessary, it’s recommended to use “Code Mode” and write custom JavaScript code.

2. Maintain the Integrity of Tag Structures

• Tag Structure: Refers to how elements are defined in HTML, such as headings (<h1>), paragraphs (<p>), or lists (<ul>). Arbitrarily changing tag types may lead to style issues or broken functionality.
• Recommended Method: You can modify or add child elements within a tag, but avoid altering tag types or their hierarchical structure.

3. Avoid Adding Sibling Elements

• Risks of Adding Sibling Elements: Directly adding sibling elements in HTML may disrupt the page layout and negatively affect the user experience.
• Recommended Method: Use Ptengine’s built-in tools for inserting content, such as “Insert before this element” or “Insert after this element,” to ensure the stability of the page structure.

---

When to Use HTML Editing #

The HTML editing feature offers powerful customization options for users with technical expertise. Here are some common scenarios where it is recommended:

• For precise control over element layout: If you need to make detailed adjustments to the page, such as rearranging elements or changing their nesting structure, HTML editing gives you greater flexibility.
• For custom page content: When you need to insert custom HTML elements, class names, or IDs that are hard to achieve through the visual editor, HTML editing allows you to manipulate the code directly for fine-tuned adjustments.
• For debugging or resolving page issues: If you encounter layout or styling problems, HTML editing helps you quickly identify and fix the issue, especially in complex cases where the visual editor may not be sufficient.
• When integrating third-party plugins or code: If you need to embed third-party plugins, HTML editing can help you insert the necessary HTML code. However, please note that HTML editing only supports HTML content and does not allow direct insertion of javascript or style. For scripts or styles, you can safely integrate them using Ptengine's Code Mode with the CSS and Javascript modules.

---

Correct Workflow of HTML Editing #

1.Modifying Page Layout (When precise control over element layout is needed)

Suppose you want to adjust the layout of a product display section by adding an introduction area next to the product description to drive traffic to other product pages.

Original HTML code:

    <div class="product">
        <h2 class="product-title">Product Name</h2>
        <p class="product-description">Product Description</p>
    </div>

Modified:

    <div class="product">
        <h2 class="product-title">Product Name</h2>
        <section>
            <p class="product-description">Product Description</p>
            </section>
        <aside>
            <a href="#">Other Product Short Description</a>
        </aside>
    </div>

This modification adds two sub-modules to align with the new layout design.

2.Inserting Custom HTML Elements (Customizing Page Content)

Suppose you need to insert a custom HTML element, like an advertisement banner, onto your page.

Original HTML code:

    <div class="content">
        <h1>Welcome to Our Store</h1>
        <p>Offering the best products</p>
    </div>

Modified:

    <div class="content">
        <h1>Welcome to Our Store</h1>
        <p>Offering the best products</p>
        <div class="ad-banner">
            <img src="banner.jpg" alt="Ad Banner">
        </div>
    </div>

Using the HTML editing feature, you can easily add new elements (like an ad banner) to enhance your page content.

3.Fixing Page Style Issues (Debugging or Fixing Page Problems)

Suppose you notice that some elements on the page have style issues and need to change the class name of a div element to restore proper display.

Original HTML code:

    <div class="old-class">Content</div>

Modified:

    <div class="new-class">Content</div>

By modifying the HTML content, you can resolve style issues and ensure the page displays correctly.

4.Integrating Third-Party Plugins (Integrating with Third-Party Plugins or Code)

Suppose you need to embed a third-party advertising plugin onto your page. Use the HTML editing feature to add the necessary container.

Original HTML code:

    <div class="content">
        <h1>Welcome to Our Store</h1>
        <p>Offering the best products</p>
    </div>

Modified:

    <div class="content">
        <h1>Welcome to Our Store</h1>
        <p>Offering the best products</p>
        <div id="third-party-ad"></div> <!-- Insert ad plugin container -->
    </div>

This operation inserts the container for the third-party plugin using the HTML editing feature. The actual plugin code will be added and run using the CSS&JS modules in Code Mode.

Common Mistakes and How to Avoid #

Here are some common mistakes along with the correct alternatives to help you avoid potential issues, ensuring stability and performance during the editing process.

Mistake 1: Modifying Interactive or Dynamic Elements

⚠️ Incorrect Action:

For example, if you want to modify the placeholder text of an input field, you might try this:

<input type="text" placeholder="Please enter your email address">

And change it to:

<input type="text" placeholder="Enter email to apply for product trial">

🔴 Impact:

The input element is interactive and often connected to JavaScript events (such as form validation, error messages, or submission actions). Directly editing the placeholder in HTML can inadvertently break the link between the input and JavaScript, causing related functions (like form validation or submission) to stop working properly.

✅ Correct Action:

For modifying interactive elements, it's recommended to use Code Mode and modify them using JavaScript. For example, dynamically set the placeholder using JavaScript instead of directly editing it in HTML:

document.querySelector('input').setAttribute('placeholder', 'Enter email to apply for product trial');

This ensures the page's interactive functionality stays intact while allowing flexible dynamic content modifications.

Mistake 2: Changing the Element’s Tag

⚠️ Incorrect Action:

You might want to change the page’s title content but mistakenly replace a p tag with a div, like this:

<p>The most Powerful</p>

Changed to:

<div>The most Intelligent</div>

🔴 Impact:

Changing the tag type can cause the page’s styles to break, especially since tags like p are typically tied to specific style rules.

✅ Correct Action:

In Ptengine’s HTML editor, changing the tag type is not allowed. You can only edit the content inside the tags or add new child elements. Here's the proper way to do it:

<p>The most Intelligent</p>

If you only want to change the content of an element, use the Edit Text feature as follows:

1. Select the element whose content you want to modify, and click Edit text from the toolbar.

2. After editing, press Enter to save.

By using the Edit text feature, you can safely modify content without affecting the overall layout or functionality of the page.

If you need to adjust the tag structure of the content, edit the parent container as follows:

1. Click the element you wish to edit, then hover over the element path selection bar.

2. Through the element path selection bar, find and select the parent container.

3. Once the parent container is selected, click Edit HTML from the toolbar.

4. Find the element you want to modify, adjust the tag, and click Apply.

By modifying the HTML of the parent container, you can safely adjust the tag structure without directly altering the target element.

Mistake 3: Adding Sibling Elements

⚠️ Incorrect Action:

You might want to add a product description module and directly insert a new element like this:

<div class="product-title">Product Name</div>

Changed to:

<div class="product-title">Product Name</div>
<section class="product-description">Product description content.</section>

🔴 Impact:

Adding sibling elements at the same level can cause layout issues or broken functionality.

✅ Correct Action:

In Ptengine’s HTML editor, adding sibling elements is not allowed. Instead, use the Insert feature to add new HTML elements. Here's how:

1. Click the element before or after which you want to add a new element. From the toolbar, select Insert and choose whether to add the new element before or after the existing one, or select another option.

2. Select the appropriate element type for the new content. For this case, we recommend choosing HTML.

3. After selecting HTML, replace the placeholder with the HTML for your new element and click Insert to save.

By using the Insert feature, you can effectively maintain the page's structure and prevent layout or functionality problems.

Mistake 4: Adding Multiple Container Elements in a New HTML Module

⚠️ Incorrect Action:

You might want to add two title contents at once and directly insert HTML like this:

<p>The most Powerful</p>
<p>Website Growth Engine</p>

🔴 Impact:

Ptengine’s HTML editor requires that new content be placed inside a single container element. Adding multiple sibling container elements directly can break the page's structure, leading to layout issues or style failures, such as misaligned modules or broken interactive features.

✅ Correct Action:

When adding new HTML content, make sure all elements are placed inside a single container element to maintain the page's structure. Here's the correct way:

html
Copy code
<div>
    <p>The most Powerful</p>
    <p>Website Growth Engine</p>
</div>

By wrapping the new content inside a single container element (such as a <div>), you can ensure the page's layout and functionality stay intact while maintaining clean and readable code.

Summary #

When using Ptengine's HTML editing features, keep these key points in mind:

1. Avoid modifying interactive and dynamic content to ensure the website functions properly.
2. Maintain a consistent tag structure to prevent issues caused by tag changes.
3. Use the recommended methods for adding new content to ensure consistency in page layout and styling.

By leveraging the tools and methods provided by Ptengine, you can safely and efficiently optimize web content, enhancing the overall user experience.