When buyers can visualize your solution, closing a deal becomes a piece of cake. With storytelling, you can immerse customers in a product experience that helps them understand the value of your product.
So how can you personalize your demo and tell product stories that resonate?
By using inspect element to edit webpages.
This blog highlights how you can edit a webpage with the inspect element feature, why it’s a great tool for personalizing demo experiences, and how you can access it.
What is inspect element?
Inspect element is a developer tool integrated with web browsers that enables you to view and edit the source code of a webpage. When you inspect pages on web browsers such as Google Chrome, Safari, Firefox, and Internet Explorer, you can view the images, CSS, JavaScript, and other workings of a site.
As you modify the code, the changes reflect in real-time in your browser window for the duration of your session and are only visible to you. From mocking up what a font and color change will look like to discovering broken code, the inspect element tool provides you with a fascinating “what if” experience.
What can you do with the inspect element tool for your product demos?
The inspect element tool allows you to see and modify the underlying code of any webpage. And this can be very helpful in modifying your page to customize product demo experiences for clients.
Here are some of the benefits of using the inspect element tool:
- Preview changes without implementation.
- Change text on a page to avoid constant blurring in screenshots.
- Gain insights on how certain unique elements on high-converting competitor pages have been added.
How do I edit a webpage with inspect?
To begin editing a webpage with inspect element, you need to locate the tool in your browser.
You can access the inspect menu option on your web browser in three simple ways:
- Right-click on a webpage, scroll toward the bottom of the drop-down menu that pops up and select “Inspect.”
- On the hamburger menu (icon with three vertical dots) at the top of the right corner of your browser toolbar, click “More Tools” and select “Developer Tools.”
- For keyboard shortcuts, press F12 on your PC or CMD+Option+I on a Mac to prompt developer tools and use the inspect element feature.
When the inspect element tool opens, you should see the HTML code for the page on the left-hand side and the page preview on the right side. The HTML code is divided into sections, and you can click on each section to see its corresponding elements in the page preview.
How to edit any webpage in Chrome (or other browsers)
Remember that changes you make using inspect elements are temporary and will clear off once you refresh a browser. To save time, use the search function to search for a specific element or tag, or you can simply scroll through the code to find the element you want to edit.
That said, here are some simple edits for any webpage:
How to edit text on a website
You can modify the code directly in the developer tools, and the changes will reflect in the page preview. To change the text on a webpage, simply find the element that contains the text and modify the text within the HTML tags.
How to change the color and fonts of website elements
Follow these steps to change the color and fonts of a webpage:
- In the inspect element tool, locate the HTML code for the element you want to change.
- Find the CSS styles that apply to the element. The CSS styles are often in the "Styles" section of the developer tools.
- To change the color of the element, find the CSS property that sets the color (e.g., "color" or "background-color") and change the value. You can change the value directly in the "Styles" section of the developer tools.
- To change the font, locate the CSS property that sets the font (e.g., "font-family") and change the value.
Here's an example of how to change the text color and font-family of a paragraph element:
In this example, the CSS style block sets the color property of the p element to blue and the font-family to Arial.
How to switch images on a webpage
To switch an image on a webpage using the inspect element tool, follow these steps:
- Right-click on the image you want to change and select "Inspect" or "Inspect Element" from the context menu. This will open the browser's developer tools.
2. In the developer tools, look for the HTML code for the image.
3. Find the "src" attribute of the image and change the URL to the URL of the new image you want to switch to.
How to modify element states
- To modify the state of an element, you can change the CSS styles that apply to it, such as size or visibility.
- To change the state of an element when a user interacts with it, you can modify the CSS styles associated with pseudo-classes such as :hover, :focus, and :active.
- To modify the state of an element in response to JavaScript events, you can modify the CSS styles associated with JavaScript event handlers.
- Once you complete a round of edits, refresh the page to see the changes.
Save edits without tweaking code using Demostack
For presales and product marketers temporarily altering your platform's code every time you want to present a product demonstration can be quite frustrating and is hard to scale.
Unlike the inspect element tool, where edits are temporary, Demostack enables presales teams to edit and save webpages without needing to code. Want to see for yourself? Schedule a demo with us.
Frequently asked questions
Can you edit a website that isn’t yours?
Yes, you can. Inspect element allows you to see and change the code of any webpage. You can make quick tweaks, test changes, or experiment with different design elements for your product demos.
How do you edit a webpage and save it?
To save webpage edits, you'll need to store them on your local machine. You can do this by right-clicking on the HTML code, selecting "Save as," and choosing a location to save the file. Open the saved HTML file in a text editor, such as Notepad or Sublime Text, and make any additional changes you'd like. When you're done, save the file and open it in a web browser to see the changes you've made.
Or you can use Demostack. Our no-code platform lets you add and save an overlay of edits to mask your existing environment and tailor product stories.
