Lock Content in WordPress with a Simple HTML Code

Locking content in WordPress is a clever way to engage visitors and control the visibility of specific sections. In this tutorial, we’ll explore how to lock content in WordPress using a simple HTML code. We will use Elementor in this example but it is also adaptable to other page builders.

Prerequisites

Please make sure you have the following installed and activated:

• Elementor

Pros and Cons of Hiding Content via HTML Code

When considering the implementation of content locking via HTML code, it’s important to weigh the benefits and drawbacks. Below is a table outlining the key pros and cons:

Instructions to Lock Content in WordPress with HTML

1. Navigate to the page you want to edit with Elementor.
   
2. Assign unique IDs to each element, e.g. the container in the Elementor editor (Advanced > CSS ID), like ‘sec1’ and ‘sec2’.
   
3. Insert an HTML widget above these containers.
   
4. Paste the provided HTML code into the widget:

   <input type="text" id="passwordField" placeholder="Enter password">
   <script>
       document.getElementById('passwordField').addEventListener('input', function() {
           var value = this.value;
   
           if (value === '') {
               // Set both sec1 and sec2 to display none if passwordField is empty
               document.getElementById('sec1').style.display = 'none';
               document.getElementById('sec2').style.display = 'none';
           } else if (value === 'CA') {
               document.getElementById('sec1').style.display = 'block';
               document.getElementById('sec2').style.display = 'none';
           } else if (value === 'DA') {
               document.getElementById('sec1').style.display = 'none';
               document.getElementById('sec2').style.display = 'block';
           } else {
               document.getElementById('sec1').style.display = 'none';
               document.getElementById('sec2').style.display = 'none';
           }
       });
   </script>
   <style>
       #sec1, #sec2 {
           display: none;
       }
   </style>

   Source: Code Snippets

5. Modify the IDs in the code to match those assigned to your elements and set custom passwords in the code for each section. These will be used to unlock the content.
   
6. Save your changes and preview the page to ensure functionality.
   

Official Documentation

• Elementor Documentation

Lock Content in WordPress with HTML – Conclusion

By following these steps, you can easily set up content locking on your WordPress site. This approach is great for creating interactive experiences, like revealing hidden content after entering a password.