customise your pages with Claude

• 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

1. Gather your brand details from your brand board, 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.

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

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.

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.

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.

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].

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.

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.

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.

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.