How to add image layout widget like Pinterest.com

Hello Guys and welcome to Sanve Design Our Tutorial today is about How to add image layout widget like Pinterest.com

If you want to create an image layout widget similar to Pinterest.com, you can use HTML and CSS to achieve a similar layout and design. Here's how you can do it:

1. HTML Structure: Create a container div to hold all the images. Inside the container, create multiple divs to represent each image. You can use the <img> tag to display the images.
2. CSS Styling: Use CSS to style the container and image divs. Set the width and height of each div to create a grid-like layout. Apply a margin and padding to create spacing between the images. Use CSS properties like flexbox or grid to arrange the images in a responsive and dynamic manner.
3. Image Overlay: To achieve the Pinterest-like effect, you can add an overlay to the images when they are hovered over. Use CSS to create a transparent overlay with text or icons on top of each image. You can also add a transition effect to make the overlay appear smoothly.

Now, let's discuss the three profit points of using this image layout widget:

1. Enhanced User Experience: By implementing a Pinterest-like image layout, you can provide a visually appealing and interactive experience for your users. This can lead to increased engagement and browsing time on your website.
2. Increased User Engagement: The image layout widget allows users to easily discover and explore different images, creating a sense of curiosity and interest. This can lead to increased click-through rates and conversions, as users are more likely to interact with the images they find appealing.
3. Improved Website Aesthetics: A well-designed image layout can make your website look more professional and visually appealing. This can help you create a strong brand image and stand out from competitors. Additionally, a visually appealing website can increase user trust and credibility, leading to higher conversion rates.

How to add image layout widget like Pinterest.com :-

Step 1 :- Go to Blogger's dashboard and click theme.

Step 2 :- Click the arrow down icon next to the 'customize' button.

Step 3 :- Click Edit Html.

Step 4 :- Click on any word then Press CTRL+ F and type in the search form ]]></b:skin>.

Step 5 :- Copy the provided below code and paste it just before ]]></b:skin>.

/* css by (sanvedesign.com) */.seIcotnr{width:100%;display:grid;grid-template-columns:repeat(auto-fill,250px);grid-template-rows:auto;justify-content:center;column-gap:15px}.seIcotnr>div{padding:0;margin:15px 10px;border-radius:20px}.card>iframe{border-radius:25px}.seIcotnr img{width:100%;height:100%;object-fit:cover;border-radius:20px}.card_small{grid-row-end:span 26}.card_midium{grid-row-end:span 33}.card_large{grid-row-end:span 40}@media all and(min-width:421px) and (max-width:768px){.seIcotnr{grid-template-columns:repeat(auto-fill,200px)}.search{display:none}}@media all and (min-width:50px) and (max-width:420px){.seIcotnr{grid-template-columns:repeat(auto-fill,150px)}.seIcotnr>div{padding:0;margin:8px 5px;border-radius:20px}.card>iframe{border-radius:25px}}

Step 6 :- Replace all the blue background marked parts according to your theme.

Step 7 :- Add this Html code wherever you want to use it

    <div class="seIcotnr">
        <div class="card card_small">
            <img src="https://i.pinimg.com/236x/64/61/5f/64615fc76f64fb5f63c7c89d7e322b49.jpg" alt="">
        </div>
        <div class="card card_midium">
            <img src="https://i.pinimg.com/236x/58/54/37/585437b83df3027c4d2aaf5364059b4e.jpg" alt="">
        </div>
        <div class="card card_small">
            <img src="https://i.pinimg.com/236x/b8/07/2c/b8072c70d7e50b3eaddcf48da9715c71.jpg" alt="">
        </div>
        <div class="card card_midium">
            <img src="https://i.pinimg.com/236x/76/c8/81/76c8813ccc1779113a8db8d01b58a7f5.jpg" alt="">
        </div>
        <div class="card card_large">
            <img src="https://i.pinimg.com/236x/3a/f7/a8/3af7a84ae21f9dc9dd19e7308a2c2314.jpg" alt="">
        </div>
        <div class="card card_large">
            <img src="https://i.pinimg.com/236x/7f/96/a6/7f96a6dbbe2328cb50f5a1be6acf301d.jpg" alt="">
        </div>
        <div class="card card_small">
            <img src="https://i.pinimg.com/236x/1b/6b/aa/1b6baa519e6f59c9a4df42609e7ca6fb.jpg" alt="">
        </div>
        <div class="card card_midium">
            <img src="https://i.pinimg.com/236x/76/c8/81/76c8813ccc1779113a8db8d01b58a7f5.jpg" alt="">
        </div>
        <div class="card card_small">
            <img src="https://i.pinimg.com/236x/2f/ff/fa/2ffffa05fc292749bdd5a51be8de22c0.jpg" alt="">
        </div>
        <div class="card card_midium">
            <img src="https://i.pinimg.com/236x/06/8c/df/068cdf34cfc34b6ad1712bd5df0fba4a.jpg" alt="">
        </div>
        <div class="card card_large">
            <img src="https://i.pinimg.com/236x/3a/f7/a8/3af7a84ae21f9dc9dd19e7308a2c2314.jpg" alt="">
        </div>
    </div>

---

Conclusion

In this post, I have talked about How to add image layout widget like Pinterest.com. Tell us What You Say About The Post by Making a Comment and if you have any questions Contact Us at the Contact Us page. Hope You Enjoy In Our Website.

Refrence:
https://www.sanvedesign.com/2023/07/how-to-add-image-layout-widget-like.html