Breadcrumbs

Block Developer Mode

Feature Purpose:

The website builder's Developer Mode feature allows advanced users to enhance their web pages using custom HTML, anchors, and data-style IDs. This provides greater flexibility in structuring content and styling elements beyond the standard templates.

Working with this Feature:

  1. Accessing Developer Mode

  • Navigate to the Website Builder’s Settings Panel.

  • Click on the “Add Block” button.

  • Select the “Dev” tab to access Developer Mode features.

  1. Custom HTML Block

  • Allows users to input custom HTML code and attributes for greater page customization.

  • HTML Code Input: Users can enter their own HTML code to structure and display custom content.

  • ANCHOR Input: Define anchor points within the HTML for easy navigation between sections.

  • DATA-STYLEID Code Input: Add data-style IDs to apply custom styling and interactions using CSS and JavaScript.

  • Pop-Up Tab in Custom HTML Block:

    • Header & Appearance Controls:

      • Toggle to enable a header, set the title text, and customize header text color.

      • Set colors for the close icon and the overlay background.

    • Display Triggers:

      • Choose when the pop-up appears:

        • After a time delay (in seconds)

        • After scrolling a certain percentage of the page

        • After a set number of clicks

        • After a period of user inactivity

      • Control how the pop-up closes:

        • Automatically after a set time

        • When clicking outside the pop-up

        • Manual close via a cross (“X”) button

    • Device Targeting:

      • Toggle whether the pop-up appears on desktop, mobile, or both.

    • Multilanguage Support:

      • All pop-up content and settings work across all supported languages.

  1. Text Editor Block

  • Provides a simple text editor for content creation and block customization.

  • Basic Settings: Adjust essential block settings, including alignment, padding, and margin.

  • Simple Text Editor: Modify text with basic formatting options such as bold, italics, and lists.


Troubleshooting:

  1. Custom HTML Not Displaying Properly

  • Ensure that your HTML code is correctly formatted and does not contain errors.

  • Verify that any linked CSS or JavaScript files are correctly referenced.

  1. Anchor Links Not Working

  • Check that the anchor IDs match the referenced links in your navigation.

  • Ensure that the anchor is properly placed within the HTML structure.

  1. Data-Style ID Not Applying Custom Styles

  • Confirm that the correct CSS selectors are being used to target the data-style ID.

  • Try refreshing the page or clearing the browser cache to see the updated styles.