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

Spread the love

We’ve all been there:

Website in a Browser

Staring at your website and simply reverted over a few little things that simply don’t look”right”.

Perhaps it’s the text, the font, the spacing, the colours, or something different.

Website in a Browser

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

Website in a Browser

The Fantastic news is that modern browsers, (such as Chrome, Firefox and Safari) offer a few ways to preview simple changes to any page:

Website in a Browser

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

As a consequence, that you may alter the HTML and CSS, also called source code, right in your own browser.

Website in a Browser

Remember, this only modifies the local variant in your computer and does not really rewrite anything on the machine. It is just a preview.

But wait, there’s more!

Website in a Browser

There is currently a way to make edits to your site using your browser’s developer tools which could be permanently stored on the host, so keep reading!

Website in a Browser

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

Website in a Browser

The best way to edit a website using programmer tools
Open any web page with Chrome and put your mouse over the object you want to edit (ie: text, buttons, or graphics ).

Right-click the object and choose”Inspect” in the context menu.

Website in a Browser

The programmer tools will open from the lower half of your display and the chosen element will be emphasized within the interface, also known as the DOM.

Double-click the selected object and it will switch to edit mode. It is possible to replace the text or style features (ie: colors, fonts, spacing) and then click outside the DOM to apply the changes.

Use the”find” shortcut that will help you start looking for specific text or design attributes. (“CMD + F” on Mac or”CTRL + F” on PC)
Edit any website’s text with our useful bookmarklet
Emphasize the blue below:

javascript:document.body.contentEditable =’true’; document.designMode=’on’; emptiness 0

Drag the highlighted text in to your bookmarks bar.

Website in a Browser

Click on the icon when you wish to edit text on a page!

Now that you understand how to alter any site, let’s get back to what is most important.

This couldn’t be any easier. If your website is built and hosted with PageCloud, you may use your browser’s developer tools to make permanent edits to any of your web pages.

Using the programmer tools with PageCloud:
Log into PageCloud.

Website in a Browser

Visit the page on your website you would like to modify.

Click the’edit page’ symbol in the bottom right hand corner. If you can’t see it, then refresh the page. (“CMD + R” on Mac or “CTRL + R” on PC).

Hit save from the editor or use the shortcut: (“CMD + S” on Mac or”CTRL + S” on PC).

Easy correct?

How about some better news? You are able to skip the developer tools and simply make changes directly in the editor.

PageCloud lets you fully customize your pages without having to go into the source code. Click here, and edit with the palette. If you have never written code, this will be a much more user-friendly interface!

If you’re a developer and would like to take your website to the next level, you are able to access the JavaScript editor by using the”J + S” shortcut while logged to the PageCloud website editor.

Try it for free today and build a custom site that provides you total freedom to make all the changes you want!

Leave a Reply

Your email address will not be published. Required fields are marked *

Skip to toolbar