Pineapple Builder

Edit your website

The editor lets you change a website a piece at a time. A website contains pages; a page contains sections; sections contain blocks such as text, images, buttons and forms.

Find the part you want to change

Open Website Pages to select a page. Check the page name in the top bar before editing, especially when several pages look similar.

Select text, an image or another block on the canvas. The available controls depend on the selected block. Select its containing section when you want to change the section background, layout or spacing rather than one item inside it.

Use Blocks as the reference for individual controls. For example, the Button guide explains button settings and the Image guide covers images.

Add, find and manage pages

Open Website Pages. Use Add → Page → Empty Page to start with a blank page, or Generate Page for the generation flow. Give the page a clear title and URL slug, check the parent folder, and save it. A new saved page still needs content and publication.

Use Add → Folder to group related pages. A folder organises paths; it does not automatically create a useful public landing page. Keep URLs short and stable, such as /services/career-coaching.

For a quick jump, select the current page name in the editor's top bar and use Find page or enter path. Search for the page title or path, then confirm the selected page before editing.

A page's three-dot menu includes Rename, Duplicate and Delete where available. Review both the title and slug when renaming: changing a URL can break existing links. Duplicating a page is a starting point for a different page; update its text, metadata and links before publishing.

Deletion is permanent. Check that the page is no longer needed and update links or plan its replacement before confirming. A folder must be empty before it can be deleted. Do not delete a working page to troubleshoot a publication problem.

Change text and images

Click the text you want to edit and replace the example copy. Keep headings short enough to read on a phone and use paragraphs or lists for supporting information.

Select an image to change its source or settings. Check the crop after replacement: an image that works in a wide hero may not work in a small card. Add a useful description where the image's alternative-text control is available.

Add and arrange content

Use the editor's add controls to choose a section or block. Add a complete section for a new part of the story, such as services or frequently asked questions. Add a block when an existing section needs one more image, button or paragraph.

Use the available move controls or Layers view to adjust the structure. Recheck the surrounding content after moving an item. A layout change can affect how neighbouring blocks fit together.

Move and reuse blocks

For a whole section, open its actions in Layers and choose Move up or Move down. Check the page order after each move. Structural elements do not offer every block action.

For an ordinary block, use Duplicate to make a nearby copy. To place it elsewhere, choose Copy, open a destination block's menu, and choose Paste → Paste before or Paste after. Review the inserted block, including links and image crops.

Keep the editor session open when copying between sections or pages; the editor's copied-block state is not a permanent template or a downloadable file. Save the source page before switching. If Paste is unavailable, return to the source and copy the block again. To move rather than copy, remove the original only after checking the destination.

The Drag and Drop menu entry may show an availability message. Use the working move and copy/paste controls instead of assuming that menu item means free-form dragging is enabled.

Edit the shared header and footer

Use Header Menu or Edit Header to change the shared navigation. Give links clear names, check their destinations, and test the collapsed menu on a phone. The Header Menu guide explains its controls.

Edit the footer from an ordinary website page. If the editor shows Footer Editing Disabled on a blog or documentation page, switch to a normal page first. The shared footer can contain contact details, useful page links, business information and links to your published policies.

Header and footer changes affect the shared website structure. Save the changes and review several public pages after publication; checking only the page you were editing can miss an incorrect link elsewhere.

Link to another page or a section

Select a button or other linkable block and open its link control. Use Internal Links to select a page on this website, or External links for a full address on another site. A destination page must be published for visitors to use it. See the Button guide.

To jump to a section on the same page, select the destination section and give ID (anchor) a short unique name, such as contact. Then choose Anchor links (#) in the button's link control and enter the matching name. The resulting link should be #contact; avoid adding a second hash when the field already supplies one.

For a section on another page, use that page's public address followed by the fragment, such as /services#contact. Save and publish the changes, then test the exact link on a phone and a larger screen. If it does not scroll correctly, check that the destination ID exists only once and matches the link.

Change the browser-tab icon

Your favicon is the small website icon shown in a browser tab. Open the website's Settings, find Website Fav Icon, and select Change. Choose or upload a real .ico image; renaming a PNG file to .ico does not convert it.

Custom icons require paid access. The selection saves when the upload and settings update finish. Keep the icon simple enough to recognise at a small size, then check the published website in a fresh tab. Browsers may cache an earlier icon.

Set the main website language

In website Settings, choose Website language and wait for the update to finish. This identifies the site's main language; it does not rewrite existing text. Use Translations to prepare, review and publish additional language versions.

Use AI with a clear target

Open AI Assistant and explain the requested change. If the request is about one section, select that section first and say what should stay.

Example: “Rewrite this services section for a career coach. Keep the three-card layout and the existing links. Use short, plain-language descriptions.”

Check the resulting content and design. AI can misunderstand an unclear request, so correct the target or instruction rather than repeatedly submitting the same vague prompt. Usage belongs to your workspace's AI allowance.

Save, preview and publish

  • Save Draft stores your current edits.

  • Preview Draft Page lets you inspect the draft without publishing it.

  • Publish or the available republish action updates the public version after its checks succeed.

Use undo and redo for recent edits. The page-version-history control is a separate place to inspect saved versions; do not assume an unsaved change is already in history. Save work you want to keep before leaving or reloading the editor.

Check the result

Preview at a narrow width and on a larger screen. Look for text wrapping, cropped images, large empty spaces and buttons that are difficult to use. Check the actual destinations of links after publication.

If controls seem to affect the wrong thing, check both the selected page and selected block. If your public page still shows old content, confirm you published the intended page rather than only saving a draft.

Pineapple Builder - AI Website Builder Create Docs