The Custom HTML block allows you to embed any HTML markup directly on your SeedProd pages. Whether you need to add a third-party widget, a custom embed code, raw HTML output, or any snippet that SeedProd doesn’t have a dedicated block for, this block gives you a direct way to insert it.
This makes it ideal for integrating external tools, custom scripts, or any HTML-based content you want to place precisely within your page layout.
Adding the Custom HTML Block to Your Pages
Follow these steps to add a Custom HTML block to your SeedProd page:
Step 1: Add the Block
Under Design > Blocks, drag and drop the Custom HTML block into the desired section of your page.
Drag the Custom HTML block from the Blocks panel and drop it into your desired page section.
Step 2: Configure Content Settings
Once added, click on the Custom HTML block to open its settings. In the Content tab, you can enter your HTML code and access the full-screen editor.
- Custom Code: Paste or type your HTML markup directly into the text area. This can be any valid HTML, including embed codes, iframes, custom elements, or script tags
- Expand Editor: Click this button to open a larger full-screen code editor, making it easier to work with longer or more complex HTML snippets
Enter your HTML code in the Content tab. Use the Expand Editor button for a larger editing workspace.
Step 3: Customize the Design
In the Advanced tab, you can control the layout and visibility of your Custom HTML block.
Spacing:
- Margin: Control the outer spacing around your Custom HTML block (Top, Right, Bottom, Left). This determines how much space appears between the block and surrounding elements
- Padding: Adjust the inner spacing within your Custom HTML block (Top, Right, Bottom, Left). This creates breathing room between your HTML content and the block edges
Attributes:
- CSS ID: Displays the auto-generated unique identifier for your Custom HTML block. This ID is created automatically by SeedProd for custom styling or JavaScript targeting
- Custom Class: Add custom CSS classes to apply specific styles from your theme or custom CSS
- Custom Attributes: Add any HTML attributes to the block wrapper element. Enter each attribute on a new line using the format: attribute-name|value (e.g., data-section|html-embed)
Device Visibility:
- Hide on Desktop: Hide the Custom HTML block on desktop screens
- Hide on Tablet: Hide the Custom HTML block on tablet devices
- Hide on Mobile: Hide the Custom HTML block on mobile devices
Animation Effects:
- Entrance Animation: Choose from various animation effects that play when the Custom HTML block scrolls into view. Options include Bounce, Fade In, Zoom In, Rotate In, and many more
Use the Advanced tab to control spacing, attributes, device visibility, and entrance animations for your Custom HTML block.
Step 4: Save Your Changes
Once you have finished configuring the Custom HTML block, make sure to save your work.
You’ve successfully added a Custom HTML block to your page! Whether you’re embedding a third-party widget, a custom form, or any HTML snippet your site needs, the Custom HTML block gives you the flexibility to place any markup exactly where you want it on your SeedProd pages.