# Framer WordPress Integration

> To integrate with WordPress, use Insert to add new elements, select Embed for smart components, and customize your component library. Access HTML elements to customize code, add custom code for enhanced functionality, adjust spacing and alignment, preview your responsive design across devices, and click Publish.

Canonical: https://livedemo.ai/tutorials/framer-wordpress-integration/
Apps: WordPress, Framer
Updated: 2026-10-05
Interactive demo: https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ffee243f01ed60a4d678/preview?step=1

## Steps

1. Use 'Insert' to add new elements to your design.
2. Select 'Embed' to access smart components for interactive elements.
3. Customize your component library.
4. Access HTML elements to customize your code.
5. Add custom code to enhance functionality.
6. Adjust spacing and alignment for pixel-perfect designs.
7. Preview your responsive design across devices and click 'Publish'.