---
title: "customise your pages with Claude"
description: "Learn how to use Claude to code custom sections, pages or a full website for your drag-and-drop builders, and access our step-by-step instructions, FAQs, and everything you need to know!"
url: https://help.ivorey.io/en/articles/13631461-customise-your-pages-with-claude
collection: "sites"
updated: 2026-11-09
language: en
---

# customise your pages with Claude

Learn how to use Claude to code custom sections, pages or a full website for your drag-and-drop builders, and access our step-by-step instructions, FAQs, and everything you need to know!

## before you dive in

Sometimes you have a design in mind that the drag-and-drop elements can't quite create, like overlapping elements, custom animations or a unique layout. Claude can write the code for it, so you can paste it straight into your page and keep everything else in the drag-and-drop builders, including your forms, checkouts, blogs and conversion tracking.

what can Claude build for you?

-   **A single section** - such as a testimonial slider, a pricing table, an animated hero banner, or an image gallery with a custom layout
    
-   **A full page** - such as a homepage, about page or services page, coded from top to bottom
    
-   **A full website** - built page by page, with a consistent look across every page
    
-   **Style changes to existing elements** - such as rounded image corners, an image that overlaps the section above it, or custom effects on your buttons
    

This guide is perfect if you want to:

-   Create designs your drag-and-drop elements can't build on their own
    
-   Keep using drag-and-drop features like forms, checkouts and conversion tracking, alongside your custom designs
    
-   Get better results from Claude with ready-to-use prompts and tips
    

> **Info:** You'll need a Claude account to follow this guide. If you'd prefer to build your whole project with AI inside ivorey, please refer to our [choose how to build your site pages](https://help.ivorey.io/en/articles/13631458-choose-how-to-build-site-pages.md) guide to see whether AI Studio is a better fit.

* * *

## build custom designs with Claude

You'll work in two places: Claude, where you describe your design and get the code, and your drag-and-drop builder, where you paste it in. Giving Claude your brand details first means every section it creates matches the rest of your site.

### step 1: give Claude your brand details

Start each project by telling Claude about your brand, so you don't need to repeat your colours, fonts and style in every prompt.

Click here for the written steps

1.  Gather your brand details from your [brand board](https://help.ivorey.io/en/articles/10050473-create-a-brand-board.md), including your HEX colour codes, font names, logo and the overall feel you're going for (e.g. soft and feminine, bold and modern, warm and earthy)
    
2.  In Claude, start a new chat (or create a Project, if you'll be building several pages)
    
3.  Paste in the **brand setup prompt** from the **prompts to get you started** section below, filled in with your details
    
4.  (optional) Attach a screenshot of your current website, or paste in a link to a site you love, so Claude can match the style  
      
    **Note:** Claude uses links and images as inspiration for the layout and style. It won't copy a design exactly. Providing your brand details, like your logo and fonts, significantly improves Claude’s output from an approximation of your branding, to a design that truly matches your brand.
    

* * *

### step 2: ask Claude to build your code

Describe what you want to build in a simple prompt. Claude will write the code and can show you a preview before you add anything to your page.

Click here for the written steps

1.  In the same Claude chat used in step 1, describe what you want to build:
    
    1.  **A full website** - list the pages you need (e.g. Home, About, Services and Contact), and ask Claude to build one page at a time, so you can review and add each page before moving to the next
        
    2.  **A single page or section** - describe the layout, content and any movement you'd like (e.g. "a testimonial slider with soft rounded cards that slides every five seconds")
        
    3.  **A style change to an element already on your page** - describe the change, and include the element's unique ID so the code targets the right element:
        
        1.  Click the element in your builder > click the **Advanced** tab > and scroll to the bottom to copy the **CSS Selector**
            
2.  Ask Claude to give you the code as one block of HTML, CSS and Javascript, ready to paste into a website page (or CSS only, for a style change)
    
3.  Review the preview, and ask Claude for any changes (e.g. "make the headings larger" or "add more space between the cards")
    
4.  Once you're happy, ask Claude to check the design works on mobile, then copy the final code
    

* * *

### step 3: add the code to your page

Paste your code into the page in your drag-and-drop builder, then preview it on desktop and mobile before publishing.

Click here for the written steps

1.  From the main ivorey menu, go to **Sites** > **Websites** / **Funnels** / **Stores** / **Blogs** \> open your project > and click **\[Edit\]** on the page you want to update
    
2.  Add your code to the page:
    
    1.  **For a full page or section** - add a **</> Code** element where you want your design to appear (for a full page, start with a blank page) > click **\[Open Code Editor\]** in the right hand panel > and paste in the HTML or Javascript code
        
    2.  **For a style change** - click the **paint brush icon** in the top left toolbar to open **Custom CSS** > paste in the code > and click **\[Save\]**
        
3.  Click the **\[Preview\]** button > and check your page on desktop and mobile
    
4.  Click **\[Save\]** > and click **\[Publish\]**  
      
    **Note:** To update a page, section or style later, ask Claude to adjust the code in the same chat, then paste the new version in the same place.
    

> **Info:** Check our [Custom CSS Code](https://help.ivorey.io/en/articles/10493592-custom-css-code-for-advanced-design-functionality.md) guide for our pre-written code snippets to customise your pages.

* * *

## prompts to get you started

Copy any of these prompts into Claude and replace the details in square brackets with your own.

brand setup prompt (use this first)

> I'm building pages for my website in a drag-and-drop website builder, and I'd like you to write custom code for sections the builder can't create on its own. Here are my brand details:
> 
> -   Business: \[what you do and who you help\]
>     
> -   Colours: \[primary HEX\], \[secondary HEX\], \[accent HEX\], \[background HEX\]
>     
> -   Fonts: \[heading font\] for headings and \[body font\] for body text
>     
> -   Style: \[e.g. soft, feminine and calm, with plenty of white space\]
>     
> 
> For every section you create, please give me one block of HTML, CSS or Javascript I can paste into a custom code element. Make it mobile-friendly, start every class name with "\[your initials or business name\]-" so it doesn't clash with my existing page styles, and don't change the styling of anything outside the section.

full website prompt

> Using my brand details, plan a website with these pages: \[e.g. Home, About, Services, Contact\]. Start by suggesting the sections for each page, then build the Home page first. I'll add each page to my builder before we move to the next one, so keep the design consistent across every page.

single section prompt

> Create a \[type of section, e.g. testimonial slider\] for my \[page name\] page. It should include \[content, e.g. three client testimonials with a name, photo and quote\], and feel \[style, e.g. soft and elegant, with rounded cards\]. Here's the content to use: \[paste any written copy you already have, or upload any images you want to include\].

style change prompt

> I'd like to change the style of an element already on my page. The element's CSS Selector is \[paste the CSS Selector\]. Please write CSS that \[describe the change, e.g. makes this image overlap the section above it by 80px, with rounded corners\]. Make sure it only affects this element and still looks good on mobile.

fix it prompt

> I've added your code to my page, but \[describe what's wrong, e.g. it looks different on mobile / the font isn't showing / it's overlapping my header\]. Here's a screenshot: \[attach screenshot\]. Please update the code to fix this.

* * *

## tips for the best results

These tips help your custom code look right, load quickly and play nicely with the rest of your page.

-   **Keep forms, checkouts and booking calendars as builder elements** - forms built in code won't send submissions to your CRM in ivorey. Add a **Form**, **Order Form** or **Calendar** element from the builder, and use Claude's code for the design around it
    

-   **Work one section or page at a time** - smaller requests are easier to review, and if something doesn't look right, you only need to fix one piece
    

-   **Keep each build in one Claude chat or project** - Claude remembers your brand details and earlier code, so later changes stay consistent
    

-   **Use your own images** - upload your images to your [media library](https://help.ivorey.io/en/articles/13222090-media-library-and-upload-limits.md), copy each image link, and give it to Claude to use in the code
    

-   **Use web fonts, or upload your custom fonts first** - Claude can load Google Fonts in the code. For a custom font, upload it to your builder first. Please refer to our [Design & Customise Your Site Pages](https://help.ivorey.io/en/articles/13431638-design-and-customise-your-site-pages.md) guide for the steps
    

-   **Ask for unique class names** - this stops Claude's styles from changing other parts of your page (the brand setup prompt above covers this)
    

-   **Keep your header and footer as builder sections** - this keeps your navigation easy to update across every page
    

-   **Always check mobile** - preview every page on mobile and tablet views before you publish, and use the **fix it prompt** if anything needs adjusting
    

-   **Save a copy of your final code** - keep it in a document or note, so you can easily find it again if you need to make changes later
    

* * *

## frequently asked questions

can I edit the text in my custom code section from the builder?

No, text and images inside a custom code element can’t be edited from the builder page like a normal element. They can only be changed in the code itself. To update them, you can manually edit the code in the element or ask Claude to change the content in the same chat, then paste the new code into the same element.  
  
If you expect to update a section often, such as a list of upcoming dates, consider building that section with the drag-and-drop elements instead.

is Claude the same as AI studio?

No. AI Studio is built into ivorey, and builds and hosts your whole project inside your account. Claude is a third-party AI assistant, and in this guide it writes code you add to pages in your drag-and-drop builders. Please refer to our choose how to build your site pages guide to compare your options.

* * *

## need help?

Hit the support chat widget inside ivorey - we can:

-   Walk you through any of the steps
    
-   Troubleshoot anything that's not working
    

We're here and ready to help via the chat widget in the bottom right of your ivorey account. Or if you are looking for done-for-you support, you can browse our current services [here](https://ivorey.io/services) 🤍

## Related

- [choose how to build site pages](https://help.ivorey.io/en/articles/13631458-choose-how-to-build-site-pages.md)