Migrating from Blocs

Learn more about switching from Blocs to Elements

Elements is a fantastic alternative to Blocs because it offers an incredibly flexible and intuitive design experience, especially for users who want to harness the power of Tailwind CSS.

With its modular approach and extensive customization options, Elements allows you to craft stunning, responsive websites with ease, while giving you precise control over every design detail. Plus, the supportive community and frequent updates ensure you’re always equipped with the latest web design features and trends.

Testimonials from Blocs users switching to Elements

I could’ve stayed with Classic, but being forced into the terrible UI/UX from Stacks to create a website… no way. And even more so if you switch back from Elements (or blocs, where I now come from) to RW classic and stacks. I can’t imagine that for the life of it.

Give it a try. You won’t be disappointed, and the forums and especially the developers offer a ton of help if you get stuck. — Fynn via the Forums.

Tips from Ex-Blocs Users

• Elements’ Node Browser gives you a clear overview of your layouts, much easier than wrangling blocs and brics!

• Tailwind theming just works in Elements, so you don’t have to fight with custom classes or inconsistent styles.

• If you need a hand, the Elements Support Forum is super friendly, and you can always tag @elementsbot for help.

How to Switch from Blocs to Elements

Migrating from Blocs to Elements is a fantastic move if you’re looking for a modern, flexible, and genuinely fun web design experience. Elements was built from the ground up for rapid, future-proof site building—with a fully WYSIWYG editor and the power of Tailwind CSS at your fingertips.

Here’s a detailed, step-by-step guide to help you make the switch:

Step 1: Prepare Your Content and Assets

Before you dive in, make a list of:

• Pages you need to migrate

• Content (text, images, videos)

• Any custom code or integrations you used in Blocs

Export and organise images/assets so they’re ready to add into Elements.

Step 2: Set Up a New Project in Elements

1. Open Elements and hit File > New Project.

2. Choose a starting project or begin with a blank project.

3. Set your global site settings (site title, address, and favicons) in the Site Settings menu (cog in the toolbar).

Step 3: Recreate Your Pages

For each page from your Blocs site:

1. Click the “+” in the sidebar to add a new page.

2. Name it to match your old site structure (e.g., Home, About, Contact, etc.).

3. You can modify the file name and folder for each page in the page inspector.

Step 4: Rebuild Layouts Using Components

• Drag and drop Components into your page(s) to match your old layouts.

• Elements has built-in Components and pre-built Templates for common needs (navigation bars, galleries, buttons, etc.).

• Arrange and customise each using the Inspector, change text, swap images, adjust colors, all visually.

Step 5: Style Your Site

• Use the Theme Studio to adjust site-wide color palettes, fonts, and spacing.

• If you want extra flair, take advantage of Tailwind utility classes directly in the advanced settings (but you never need to touch code if you don’t want to).

Step 6: Rebuild Forms & Integrations

• Drop in the Form Component for contact/newsletter pages.

• Configure field types, labels, and actions visually.

• Point form actions to your email or third-party service; Elements supports customizable form actions.

Step 7: Preview and Publish!

• Preview your site in the browser by pressing Cmd + P or the browser icon in the toolbar.

• If you're site looks good, feploy to your host via the built-in publishing engine.

---

If you have any specific component or layout you’re struggling to recreate, just ask on the forum. Share a screenshot or describe what you need and we'll guide you to the best solution in Elements.

Welcome to the future of Mac web design, the Power of Elements is waiting for you!