Skip to main content

Custom Section

Overview

Hayden Zammit Meaney avatar
Written by Hayden Zammit Meaney
Updated over 2 months ago

Custom Section

Overview

The Custom section gives you complete flexibility to add any content you want using HTML, embed codes, or custom content blocks. Perfect for adding unique features, integrations, or content that doesn't fit other section types.

What's Included

  • Custom HTML: Add your own HTML code

  • Content Blocks: Flexible content blocks (text, images, videos, files, embeds)

  • Full Control: Complete customization of layout and content

  • Multiple Blocks: Add as many content blocks as needed

Configuration Options

Content Types

  • Custom HTML: Raw HTML code

  • Custom Content: Rich text content

  • Content Blocks: Structured content blocks

Content Blocks

Each content block can be:

  • Text: Rich HTML content from WYSIWYG editor

  • Image: Images with captions and alt text

  • File: Downloadable documents (PDFs, etc.)

  • Video: YouTube, Vimeo, or direct video links

  • Embed: Raw HTML embed code (for widgets, forms, etc.)

Layout Options

  • Alignment: Left, centre, or right

  • Width: Full, half, third, or two-thirds

  • Order: Control block order

Best Practices

  1. Test Thoroughly: Test custom HTML on multiple devices

  2. Keep it Simple: Avoid overly complex code

  3. Mobile Responsive: Ensure content works on mobile

  4. Performance: Optimise embedded content for speed

  5. Accessibility: Follow web accessibility guidelines

Use Cases

Embedding Third-Party Services

  • Booking widgets

  • Contact forms

  • Social media feeds

  • Maps

  • Calendars

Custom Content

  • Special announcements

  • Promotional content

  • Unique layouts

  • Interactive elements

Integrations

  • CRM forms

  • Email signup forms

  • Analytics widgets

  • Live chat widgets

Content Block Types

Text Block

  • Rich text editor

  • HTML formatting

  • Links and styling

  • Best for: Articles, descriptions, announcements

Image Block

  • Upload or link images

  • Add captions

  • Alt text for accessibility

  • Best for: Photos, graphics, infographics

File Block

  • Upload documents

  • Downloadable files

  • File type and size info

  • Best for: PDFs, brochures, resources

Video Block

  • YouTube/Vimeo embeds

  • Direct video links

  • Responsive video player

  • Best for: Promotional videos, tutorials

Embed Block

  • Raw HTML code

  • Complete flexibility

  • Third-party widgets

  • Best for: Forms, widgets, custom integrations

HTML Guidelines

Supported HTML

  • Standard HTML5 elements

  • Inline CSS (use sparingly)

  • JavaScript (use with caution)

  • External scripts (may be restricted)

Best Practices

  • Use semantic HTML

  • Keep CSS minimal

  • Test on all browsers

  • Ensure mobile compatibility

Security Considerations

  • Avoid inline JavaScript when possible

  • Use trusted third-party services

  • Be cautious with user-generated content

  • Follow platform security guidelines

Troubleshooting

Custom HTML not displaying?

  • Check HTML syntax is correct

  • Verify no conflicting styles

  • Test in different browsers

  • Check browser console for errors

Embed not working?

  • Verify embed code is complete

  • Check if service allows embedding

  • Ensure HTTPS is used (if required)

  • Test embed code in isolation first

Content blocks not showing?

  • Ensure blocks are properly configured

  • Check block order settings

  • Verify content is saved

  • Refresh the page

Mobile display issues?

  • Test on mobile devices

  • Check responsive CSS

  • Ensure content blocks are mobile-friendly

  • Use responsive embed codes

Advanced Tips

Responsive Embeds

  • Use responsive embed codes when available

  • Test on multiple screen sizes

  • Consider mobile-specific content

Performance

  • Minimise external scripts

  • Optimise images before embedding

  • Use lazy loading when possible

Accessibility

  • Include alt text for images

  • Use semantic HTML

  • Ensure keyboard navigation works

  • Test with screen readers

Did this answer your question?