How to Edit Website – If you have a website, you know that you can’t set it up once and forget about it. Your website needs to reflect both your changing personal style and the changing demands of its environment. Depending on where your website is hosted, you can edit aspects of your website through a content management system or a WYSIWYG editor. If you are versed in Web-programming languages, you can edit the code of your site directly.
Table of Contents
Understanding Content Management Systems
If your website is content driven, it may be based in a CMS such as WordPress or Joomla. If you are unsure of this, ask the person who designed your website. To initiate changes to content on a CMS-based website, you log in to your site’s administrative panel. The administrative panel offers buttons for various types of content management. After you log in, you can add, delete or edit posts and articles on your site. You can also use a CMS to change some of the other parameters of your site. For example, if your site uses WordPress, you can install a different theme to change the layout of the site, and you can install plugins to change some aspects of your site’s functionality.
Changing the Content and Functionality of Your Website
If you need to edit the structure or content of your website and your site does not use a CMS, you must edit the actual files on your site. Use caution if you are implementing HTML, PHP or JavaScript for the first time. If you are not confident in your Web-development skills, the changes you make directly to code could impair the functionality of your website. In such a case, a WYSIWYG editor can be useful. WYSIWYG editors display the changes to your website as you make them, and you drag elements around rather than alter the page code in a text editor.
Changing the Visual Style of Your Website
Most of the visual flair of your website is contained in one or more Cascading Style Sheets files. These files tell the HTML of your site where to position certain elements, how to color the background and what font to use. By editing the CSS files, you change the stylistic aspects of a page. If you rename a CSS file, you must make sure that the applicable HTML files link to the renamed version of the file. This link is in the HTML document’s section. With a WYSIWYG editor, you can confidently make these changes if you are not comfortable making them to your site’s code.
Uploading Files to Your Website
After you make changes to your site’s code, upload the files to your hosting server for the changes to take effect. If the changes are minor, you may want to download a copy of the file onto your local computer, edit that and then return it to the server. For example, if you want to change one line in your website’s index.html file, download it from the server first to make sure that you are modifying the most current version of the file. After you make the changes, upload the file to the server, making sure to overwrite the old one. You accomplish these transfers using a File Transfer Protocol client. An FTP client connects your computer to a remote server for the exchange of files.
How to Convert PHP to JSP
Like PHP, a JSP or Java Server Page file creates a website from the server, allowing more complicated functions than a basic HTML page. PHP and JSP files are text-based, so if your server generates a PHP file that should be displayed as a JSP, switching it over is easy. The browser displays a webpage based on the extension, so even if the code would be best displayed in JSP form, if the extension is PHP the browser displays it that way.
Advertisement
Step 1
Right-click the PHP file on your hard drive.
Step 2
Select “Open with” and click “Notepad.”
Step 3
Select “Save As” from the “File” menu.
Step 4
Click “Java Server Page (*.jsp)” from the format menu and click “Save.” The code is now a JSP file and will be displayed on your website as such.
How to edit a website using developer tools
- Open any web page with Chrome and hover your mouse over the object you want to edit (ie: text, buttons, or images).
- Right-click the object and choose “Inspect” from the context menu.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.
- 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.
- 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
- Highlight the bolded below:
javascript:document.body.contentEditable = ‘true’; document.designMode=’on’; void 0 - Drag the highlighted text into your bookmarks bar.
- 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:
- Log in to Pagecloud.
- Go to the page on your website you want to modify.
- 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).
- Once the editor is loaded, follow these steps.
- 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!
How to Edit Any Web Page in Chrome (or Any Browser)
Web pages are just documents your web browser displays. But what if you could type directly on any web page to modify it? You can, and you don’t need a browser extension—it’s a feature built into every modern browser.
This feature takes advantage of the “document.designMode” feature, which you can enable via your web browser’s JavaScript console. It was recently highlighted by Tomek Sułkowski on Twitter, but it’s so cool that we have to share it with our readers.
That feeling when you first discovered `document.designMode` pic.twitter.com/bxA1otzCjN
— Tomek Sułkowski (@sulco) September 27, 2019
You could use this feature to clean up a web page before printing it, test how changes to a web page will look, or even just prank people. It’ll be just like editing a Word document—no messing with HTML required.
To activate this feature, visit a web page and then open the developer console. To open the console in Google Chrome, click menu > More Tools > Developer Tools or press Ctrl+Shift+i.
While we’re using Chrome as an example here, this feature works in other modern browsers, too. Here’s how to open the console in other browsers:
- In Mozilla Firefox, click menu > Web Developer > Web Console or press Ctrl+Shift+K.
- In Apple Safari, click Safari > Preferences > Advanced and enable “Show Develop menu in menu bar.” Then, click Develop > Show JavaScript Console.
- In Microsoft Edge, click menu > More Tools > Developer Tools or press F12 and then click the “Console” tab.
ADVERTISEMENT
Click the “Console” tab at the top of the Developer Tools panel. Type the following into the console and press Enter:
document.designMode = 'on'
You can now close the console, if you like, and edit the current web page as if it was an editable document. Click somewhere to insert your cursor and type text. Use the Backspace or Delete keys to remove text, images, and other elements.
This just changes how the web page appears in your browser. As soon as you refresh the page, you’ll see the original once again. If you go to another web page or tab, it won’t be in design mode until you open the console and type this line once again.
You can even go back into the console and run the following command to turn design mode off:
document.designMode = 'off'
The web page won’t be editable anymore, but your changes will be preserved until you next refresh the page.
Conclusion
By copying an existing script, a developer can make appropriate modifications for functionality on a new website. Scripts run behind the scenes on the Internet and control the functionality of what Internet users see. Scripts control website navigation, product order and checkout functionality and search features, among other functions.