Modern-day webpages are usually served with a lot of dynamic content which varies based on the inputs provided by the visitor or depends on the options selected while navigating the site.
Dynamic Content
The content of a website that does not remain constant and changes according to user input(s) is referred to as dynamic content. For instance, in the case of a product page, all product details such as Product Name, Price, Quantity, and Description are stored in a database and are fetched when a user is viewing the webpage of a particular product. Therefore, this content is dynamically generated by the CMS and it changes across products.
Static Content
The content of a website that remains the same across pages is referred to as static content. This could be served from a database as well, but it would be the same across all pages. For instance, the navigation menu, logo of the website, or any other information on the header or footer would not depend on inputs from the visitor.
In the following screenshot, the static content is highlighted in blue and dynamic content is highlighted in red for easy reference.
Editing Dynamic or Static Content
We do not recommend you to use the Edit HTML operation for implementing changes in dynamic content. Editing the HTML code of dynamic content can break your webpage. You can use other editor operations such as Add JavaScript/CSS to apply changes to dynamic content.
You can use the Edit HTML operation to make changes to static content. However, make sure that the selected element to be edited does not contain any dynamic content.
For Example,
-
Suppose you want to test the color of a button on your webpage that mentions the price of a product—“$29 – Buy it Now.” Here, the price “$29” changes dynamically based on the product the user selects.
-
If you use the Edit HTML operation to change the color and then decide to use it to change the text from “Buy it Now” to “Add to Cart,” the price and text become static across all webpages. Every “Buy it Now” button will now read “$29 – Add to Cart” on all pages.
-
In such cases, you can use the Change Style operation to modify the color. The price of the product would remain dynamic in this case, as required.