Fast & dirty
Kajabi pages

Part 1

Gather your pieces

Do this before you open Claude. It saves a lot of back and forth.

1. Write your landing page copy. Headline, sections, button text, all of it.
2. Upload your images to your Kajabi media library. Include your logo and your own photo, not just the pretty ones.
3. Copy each image's link. Open each image in the library, right-click it, and choose "Copy image address."
4. Make an image list. Type a short description of each image and paste its link underneath. Paste the links exactly as copied, long tail and all. They are temporary links that expire in about a week, and Claude fixes that in Part 2.
5. Collect your button links. The checkout, offer, or sign-up URL for every button on the page.
6. Have your brand colors ready as HEX codes. Font names too, if you have them.

Part 2

Build the page with Claude

Talk to it like a designer. You can't break anything here.

1. Start a new chat and paste in everything from Part 1. Your copy, HEX colors, image list with links, and button links.
2. Upload the image files too, so Claude can see what each one looks like. Try not even telling it what goes where. It usually places them well.
3. Ask for a preview of the landing page. Use this starter prompt and fill in the brackets.

   Design a landing page from the copy below and show me a preview.
   It will be pasted into a single Custom Code block on a Kajabi
   landing page, so make it one self-contained block of HTML with
   its own styling, and make it look good on mobile.
   
   Brand colors: [HEX codes]
   Images: [your image list]
   These are temporary Kajabi links. Remove everything from the ?
   onward in each link so they don't expire, and use the cleaned links.
   Button links: [your links]
   Copy: [your copy]

   Copy prompt
4. Go back and forth until you like it. "Make the headline bigger." "More space between sections." "Swap the second and third sections."
5. Get the final HTML. Ask Claude for the finished code, then use the copy button in the upper right corner of the preview window.
6. Test one image link. Open one cleaned link in a private browser window. If your image loads, you are set.

Part 3

Put it in Kajabi

One section, one block, one paste.

1. Create the page. In Landing Pages, start a new landing page and choose Blank under "Start from scratch."
   
2. Click "Add section" in the Sections list on the left.
   
3. Scroll down to Custom Code and click "Add." It is near the bottom of the list, under CUSTOM.
   
4. Open the block. That loads the section. Click "Custom Code" under BLOCKS.
   
5. Paste your code in the Code box. Above it, pick how many boxes wide you want the block. It starts at 6 of 12, which is half the page. Choose all 12 for a full-width page.
   
6. Zero out the block spacing. Scroll down to Desktop layout, set inside and outside spacing to 0, and turn on "Make flush." Do the same under Mobile layout. Skip this if you want your background to show behind the block.
   
7. Zero out the section spacing. Click Back to the Custom Code section. Under Desktop layout and Mobile layout, set the padding to 0 and turn on "Make section full width" and "Make section full height." This is optional, but it makes the section fill the whole page. Try whatever looks good to you.
8. Remove the placeholder Hero section that the Blank template starts with, so only your code shows.
9. Save, then preview on desktop and phone with the device icons at the top of the editor before you publish.

Part 4

Change it and re-paste

If you don't like how it looks on Kajabi, the fix happens in Claude, not in Kajabi.

1. Go back to the same Claude chat and say what you want changed. A screenshot of the Kajabi page helps.
2. Copy the new code once Claude regenerates the HTML.
3. Replace the whole thing. In Kajabi, delete everything in the Custom Code block, paste the new code, and save. Editing bits of code by hand inside Kajabi is where pages break.

If something looks off

Tap what you're seeing.

Images are broken or missing

Never showed up: the code is not using your Kajabi image links, so paste your image list into Claude again. Worked, then vanished about a week later: the links expired, so ask Claude to remove everything from the ? onward in each image link and re-paste.

White gaps or borders around the page

Recheck the spacing in the Block and Section layout settings, desktop and mobile. Turn on "Make flush" and set the section to full width.

The page only fills half the screen

The block is still 6 boxes wide. Open the Custom Code block and select all 12.

Looks good on desktop, messy on phone

Tell Claude what is wrong on mobile (a screenshot helps) and re-paste the new code.

Fonts or colors look different than the preview

Kajabi's page styling is leaking in. Ask Claude to keep all styling inside the block so the Kajabi theme cannot override it.

A button goes nowhere

Claude used a placeholder. Give it the real link and re-paste.

The name and email form does not collect anyone

A form Claude draws is only a picture of a form. Have the button link to your Kajabi form or checkout, or add a regular Kajabi form block in its own section.