Adding Custom Elements Using the Custom Component Editor

The Custom Component Editor allows you to create and add custom elements to your page design. This guide explains how you can add custom HTML and style it with CSS to enhance your pages.

1. Accessing the Custom Component Editor

To start adding custom elements, follow these steps:

1. Navigate to the desired page or template where you want to add custom elements.
2. Enter Edit Mode by selecting the Edit button to open the page in the editor.
3. On the editor tab, a right panel opens with the custom block.

2. Adding Custom HTML Elements to the Canvas

In the Custom Component Editor, you can add HTML elements directly into your page.

1. Drag a Custom Code Block onto the Canvas

   • In the Component Panel, locate the Custom Code or similar block (e.g., "HTML").
   • Drag and drop this Custom Code block onto the desired spot on the canvas where you want to add your custom element.

2. Edit the HTML Structure

   • Click on the custom element in the canvas to select it.
   • In the Inspector Panel, you'll see an area where you can edit the HTML content of the custom element.
   • Add the structure for your custom element (e.g., buttons, images, forms, etc.).

3. Example: Add a custom button

   html
   Copy code
   <div class="my-custom-button">  <button>Click Me</button>
   </div>
   

3. Styling the Custom Element with CSS

You can customize the appearance of your element using CSS.

1. Add CSS Styling

   • You can style the custom element by editing its CSS directly in the Custom Code block or by using a global CSS file if available.
   • You can either add the styles inline or use a separate CSS section.

2. Example: Styling the custom button with CSS:

   html
   Copy code
   <style>  .my-custom-button button {    background-color: #4CAF50;    color: white;    font-size: 16px;    padding: 10px 20px;    border-radius: 5px;  }
   </style>
   

3. Preview the Changes

   • After editing the HTML and CSS, you can preview the page to ensure that the custom element appears as expected with the appropriate styles.

4. Managing Custom HTML Elements

Here are some ways to keep your custom elements organized:

• Reusability: Although you can't save custom blocks, you can reuse the same Custom Code block multiple times on the page or across different pages by copying and pasting the HTML structure.
• Clear Naming: Assigning clear class names or IDs to your custom elements helps maintain clarity and consistency, especially if you're adding multiple elements with similar structures.
• Style Updates: If you need to adjust the styles, simply edit the relevant CSS sections in the Custom Code block, and the updates will take effect.

Conclusion

With the Custom Component Editor, you can easily add custom HTML elements and style them using CSS to create unique page layouts. Though custom blocks and JavaScript options are not available, the ability to directly edit HTML and CSS gives you significant control over your page design.