Starbucks Landing Page using Elementor | Elementor Pro Tutorial
- tutorial
- Updated Jun 19, 2021
- By Jim Fahad
Quick Summary
Tools and Links Used
Bluehost
WordPress hosting with a free domain included.
Elementor Pro
The Pro upgrade used throughout this tutorial.
HeyWordPress
WordPress themes and ready made templates.
Prompt Used in This Tutorial
Circle Clip-Path CSS
selector{
position: absolute;
left: 0;
top: 0;
width: 100%;
height:100%;
background: #017143;
clip-path: circle(500px at right 600px);
}
Vertical Social Icon CSS
#vert-social {
position: absolute;
display: flex;
z-index: 999;
top: 20vh;
right: 2vw;
width: 50px;
}
#vert-social.elementor-shape-circle .elementor-icon.elementor-social-icon {
margin-top: 5px;
}
Thumbnails Centered CSS
selector{
position: absolute;
left: 0;
bottom:2vh;
width: 200px;
transform: translateX(-50%);
}
Thumbnails hover animation CSS
selector{
cursor: pointer;
transition: 0.5s;
}
selector:hover{
transform: translateY(-15px)
}
JavaScript snippet for thumbnails
<script type="text/javascript">
var $ = jQuery;
$(document).ready(function(){
$('[data-jim]').on('click', function(){
var jim = $(this).attr('data-jim')
$('.starbucks img').attr('src', jim ).attr('srcset', '')
})
})
</script>
Thumbnail Custom Attribute
data-jim|https://elementor.jimfahad.com/elementor0132/wp-content/uploads/2021/06/img1.png
Circle Media Query
@media (max-width:1024px){
selector{
clip-path: circle(400px at right 580px);
}
}
Social Icons Media Query
@media (max-width:1024px){
#vert-social {
bottom: 50px;
top: unset;
}
}
Thumbnail Media Query
@media (max-width:767px){
selector{
left: 50%;
}
}
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
Related Tutorials
From learning the right skills to building a stronger digital presence, we help you turn ideas into practical, professional results.
Browse All Tutorials