On-page editing

On-page editing

You can edit right on the page with the Editor. As you hover over various elements, a “pencil” icon or “picture” icon will appear to the upper right of editable elements. To edit any of these elements, simply click the icon.

https://assets-global.website-files.com/5e39e095596498a8b9624af1/62e046cf50c3caf7c5ed62ca_3YhaoRlyM6XcOV-rZLG71oZRtWxbAKec3c3H7D09nXaGb2K6qnYLMEOgL22e7xDJA8tLe_C1bBKfB5ccWQaTLKhMmJyrSrbXu9-lskyhFo3r3JZod8U869Y2aqcMQEw3F63DRDd0Wn-kzNbJT-fq4jE.png
https://assets-global.website-files.com/5e39e095596498a8b9624af1/62e046d0f5af64a79936daae_66T3T40S6YUKZv9lIuVnhskwTn5Hhg1-do6ZVVGG1UPNLLCMvOHpZtvrFo4EZSO07M14Wfyw0A1Lf6Oaub_odRrgsdsg2v5_0f3eiEvxFiITHVu_jiP1mg5oZ4SIVGyLoE8InPDJ6TxMqiiFePA8Txs.png

Note: Some styling and custom code will not show as they should appear on the published site. That is normal behavior when you’re in the Editor.

Editing and formatting text

When hovering over editable text elements, you’ll see a light-gray outline around the text element and a "pencil" icon in the upper right. You can edit the text by clicking into the box.

https://assets-global.website-files.com/5e39e095596498a8b9624af1/62e04716a7c7ed83f6805010_7kakvA7_FwdmRNTaeIDO7VHrGAxlaHcpGx2NxhW4sN5Ny9jtcoXA04zd1weJ08Z-qTLSDq-W3NNFtiZRAoE9AJEbROj-_kXSNQ5a9LdtaPhaYNDRPPiyVmqcxXewZcpouN82PeXZH3pEuAaK9C-qv-w.png

You can also format words or phrases by selecting them and choosing the formatting from the floating toolbar that appears. Read more about inline text formatting.

https://assets-global.website-files.com/5e39e095596498a8b9624af1/62e04738bbe4e2e907b24e96_E-9Bmb_ncpW1qcH3lSP5Hd5T8imQ2G8tXbFr2Kr9mXsy4vf5VnOisGLhvUaeZejy5vFJaJNK_yexrTATgpe89NQvXgVZ3nFkHQ5JMyoMBsSCeU0rWjKODM82n4hNLUNZiU-Vg_9B68Lqqf_O9pYJUKQ.png

For Rich text elements, you can do more: add media, create lists, style, and format your text further. Learn more about rich text elements.

https://assets-global.website-files.com/5e39e095596498a8b9624af1/62e0475cbbe4e29795b26cfa_AJpGMbpop8U9bSVXRKwkBfhBeP4UzXTSPXOv0SaG5aec4q1pf8PFFPXUmsF9dQlf_38u0jcWXt01sehYgHTwcQO84SjcywWZu3ajgHHdqdLi0P1w9EJRKDFThXpbJ3P2SUCgJ2X8enPOUZb_r5yjs_U.png

Replacing images

You can also replace images right on the site. Just hover your cursor over the image you want to replace, then click the "picture" icon. This will allow you to select and upload a new image from your computer.

https://assets-global.website-files.com/5e39e095596498a8b9624af1/60d6456bc700b456a8d7ad3b_Intro-to-the-editor_11.png

Note: Any visual styles you’ve created for an element in the Designer, such as solid color overlay, border color, or shadow, will automatically apply to any image or background image you replace through the Editor.

Editing buttons

To edit a button element, hover your cursor over the button and click on the Settings "cog" icon that appears in the upper right.

https://assets-global.website-files.com/5e39e095596498a8b9624af1/60d64649d631df7f3172f81a_Intro-to-the-editor_12.png

You’ll see two options:

  • Edit link settings - lets you update the link of the button
  • Edit text - enables you to change the button text
https://assets-global.website-files.com/5e39e095596498a8b9624af1/60d648a633127351c47cc1bd_Intro-to-the-editor_13.png