How to Edit Your Website in a Browser ...And then save it!

We’ve all been there: 

Staring at your website and just obsessing over a few little things that just don’t seem "right".

Maybe it’s the text, the font, the spacing, the colors, or something else.

Either way, you wish you could simply make a quick edit and hit save when everything looks perfect. 

The good news is that modern browsers, (like Chrome, Firefox and Safari) offer a couple ways to preview simple changes to any webpage:

Yes, any web page. Even ones that aren’t yours!

This means you can modify the HTML and CSS, also known as source code, right in your browser.

Keep in mind, this only modifies the local version on your computer and doesn’t actually rewrite anything on the server. It’s just a preview. 

But wait, there’s more! 

There is now a way to make edits to your website using your browser's developer tools that can be permanently saved on the server, so keep reading!

Here is the step-by-step process for editing a web page using Google Chrome.

How to edit a website using developer tools 

1. Open any web page with Chrome and hover your mouse over the object you want to edit (ie: text, buttons, or images).
   
2. Right-click the object and choose “Inspect” from the context menu.
   
3. The developer tools will open in the lower half of your screen and the selected element will be highlighted within the interface, also known as the DOM. 
   
4. Double-click the selected object and it will switch to edit mode. You can replace the text or style attributes (ie: colors, fonts, spacing) and then click outside the DOM to apply the changes.
   
5. Use the “find” shortcut to help you look for specific text or style attributes. ("CMD + F" on Mac or "CTRL + F" on PC)

Edit any website's text using our handy bookmarklet 

1. Highlight the blue below:
   
   javascript:document.body.contentEditable = 'true'; document.designMode='on'; void 0
   
2. Drag the highlighted text into your bookmarks bar.
   
3. Click the icon whenever you want to edit text on a page!
   

Now that you know how to modify any website, let’s get back to what’s most important. 

 

How to edit your website and save the changes

This could not be any simpler. If your website is built and hosted with PageCloud, you can use your browser’s developer tools to make permanent edits to any of your web pages.

 

Using the developer tools with PageCloud:

1. Log in to PageCloud.
   
2. Go to the page on your website you want to modify. 
   
3. Click on the 'edit page' symbol in the bottom right hand corner. If you can’t see it, refresh the page. (“CMD + R” on Mac or “CTRL + R” on PC).
   
4. Once the editor is loaded, follow these steps.
   
5. Hit save in the editor or use the shortcut: (“CMD + S” on Mac or “CTRL + S” on PC).
   

Easy right?

How about some even better news? You can bypass the developer tools and simply make changes right in the editor. 

PageCloud lets you completely customize your pages without ever having to go into the source code. Just click, and edit using the palette. If you’ve never written code, this will be a much more user-friendly interface!

If you’re a developer and want to take your site to the next level, you can access the JavaScript editor by using the “J + S” shortcut while logged into the PageCloud website editor.

 

Never heard of PageCloud? 

Try it for free today and build a custom website that offers you complete freedom to make all the changes you want!