Pepsi Landing Page using Elementor Flexbox | Elementor Pro Tutorial

In this tutorial, I'll show you using Elementor Flexbox Container, How to Make a Pepsi Landing Page Website Design using Elementor | Creative & Unique WordPress Elementor Pro Tutorial!!!

Quick Summary

In this tutorial, I'll show you using Elementor Flexbox Container, How to Make a Pepsi Landing Page Website Design using Elementor | Creative & Unique WordPress Elementor Pro Tutorial!!!

10 Million+ website owners started using the Elementor page builder. I'll show you the easiest way how you can create your personal resume website using Elementor Page Builder yourself.

If you're searching for how to make an eCommerce website, how to make a professional webShop from scratch, how to create an Online Store website step by step using woocommerce elementor, woocommerce subscriptions, WordPress eCommerce 2020 tutorial for beginners, woocommerce plugins, woocommerce payment gateway, best website making course, Elementor tutorial for beginners – then this tutorial is for you.

And, lastly, If you want me to build your AWESOME website at an affordable price,

Tools and Links Used

Bluehost WordPress hosting with a free domain included.

Get Hosting

Elementor Pro The Pro upgrade used throughout this tutorial.

Get Elementor Pro

Project Files Download the resources used in this tutorial.

Download Files

HeyWordPress WordPress themes and ready made templates.

Get Templates

Prompt Used in This Tutorial

Thumbnails Centered CSS

selector{
    position: absolute;
    left: 0;
    bottom: -12vh;
    width: 150px;
    transform: translateX(-50%);
}

selector img{
    cursor: pointer;
    transition: 0.5s;
}
selector img:hover{
    transform: translateY(-12px)
}

JavaScript snippet for thumbnails

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
var $ = jQuery;
    $(document).ready(function(){
    $('[data-jim]').on('click', function(){
        var jim = $(this).attr('data-jim')
        var bColor = $(this).attr('data-color')
        $('.pepsi img').attr('src', jim ).attr('srcset', '')
        $(".pepsi-section").css("background-color", bColor);
    })
    })
</script>

Thumbnail Custom Attribute

data-jim|image_url

BG Color Custom Attribute

data-color|color_code

Background Transition CSS

.pepsi-section{
    -webkit-transition: all 1s !important;
    transition: all 1s !important;
}

Thumbnail Media Query

@media (max-width:767px){
selector{
    left: 50%;
    bottom: 0;
}
}

Get Your FREE Freelancing Roadmap

Stop hopping between tutorials. Grab the Freelancing Mastery Handbook to learn how to choose a skill, build your foundation, find clients, and confidently start your freelancing journey.

Free eBook Download

Pepsi Landing Page using Elementor Flexbox | Elementor Pro Tutorial

Quick Summary

Tools and Links Used

Prompt Used in This Tutorial

Get Your FREE Freelancing Roadmap

Related Tutorials

Vibe Code a REAL Animated WordPress Website with Claude + Elementor

Vibe Coding Full Course for Beginners – Build & Launch a Real SaaS

Edit Videos with ChatGPT Codex — Raw Clips to Finished Reel