Puva – Theme Documentation

1. Product Table

If you want to add/edit a product table like the above screenshot in your post, you need to copy and paste the below code into your Blog Posts Custom HTML block or Page Layouts(Custom Post) Editor.

Product Table Code:

<div class="game-ranking-table table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>Preview</th>
                <th>Product</th>
                <th>Rating</th>
                <th>&nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td class="image"><img src="https://puva.envytheme.com/wp-content/uploads/2020/10/game-consoles-img1-2-1-1.jpg" alt="image" width="69" height="44"></td>
                <td class="title"><a href="#" target="_blank" rel="noopener noreferrer">Nintendo Switch with Neon Blue and Neon Red Joy‑Con - HAC-001(-01)</a></td>
                <td class="rating">5</td>
                <td class="action"><a class="default-btn" href="#" target="_blank" rel="noopener noreferrer">View on Amazon</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td class="image"><img src="https://puva.envytheme.com/wp-content/uploads/2020/10/game-consoles-img1-2-1-1.jpg" alt="image" width="69" height="44"></td>
                <td class="title"><a href="#" target="_blank" rel="noopener noreferrer">PlayStation 4 Pro 1TB Console</a></td>
                <td class="rating">4</td>
                <td class="action"><a class="default-btn" href="#" target="_blank" rel="noopener noreferrer">View on Amazon</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td class="image"><img src="https://puva.envytheme.com/wp-content/uploads/2020/10/game-consoles-img1-2-1-1.jpg" alt="image" width="69" height="44"></td>
                <td class="title"><a href="#" target="_blank" rel="noopener noreferrer">Xbox One S 1TB All-Digital Edition Console (Disc-Free Gaming) - Discontinued</a></td>
                <td class="rating">3</td>
                <td class="action"><a class="default-btn" href="#" target="_blank" rel="noopener noreferrer">View on Amazon</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td class="image"><img src="https://puva.envytheme.com/wp-content/uploads/2020/10/game-consoles-img1-2-1-1.jpg" alt="image" width="69" height="44"></td>
                <td class="title"><a href="#" target="_blank" rel="noopener noreferrer">PlayStation 4 Slim 1TB Console</a></td>
                <td class="rating">4.5</td>
                <td class="action"><a class="default-btn" href="#" target="_blank" rel="noopener noreferrer">View on Amazon</a></td>
            </tr>
        </tbody>
    </table>
</div>

2. Pros & Cons

Pros & Cons

For Pros and Cons, please follow the below approach

<div class="pros-cons">
    <div class="row m-0">
        <div class="col-lg-6 col-md-6 p-0">
            <h4>Pros</h4>
            <ul>
                <li><i class="bx bxs-check-circle"></i> Great performance improvement on all game</li>
                <li><i class="bx bxs-check-circle"></i> Great 4K output</li>
                <li><i class="bx bxs-check-circle"></i> 1TB hard drive</li>
            </ul>
        </div>
        <div class="col-lg-6 col-md-6 p-0">
            <h4>Cons</h4>
            <ul>
                <li><i class="bx bx-block"></i> No Blu-ray player</li>
                <li><i class="bx bx-block"></i> Not all games output in native 4K</li>
            </ul>
        </div>
    </div>
</div>

To add a block with custom HTML, please follow the below process

1. Open WordPress post editor
2. Click Add block.
3. Select Custom HTML Block
4. Paste your HTML code snippet into the field provided

Note:: For Page Layout Custom Post, you need to copy and paste the above pros & cons section HTML code into editor