How to Add Sign In and Sign Up Options Using Elementor

Quick Summary

(Exclusive: Click above link & use "JFD10" coupon code to get upto 78% DISCOUNT!)

Take your website design to the next level with this Eye-Catching Sliding Login & Sign Up Page in WordPress with Elementor! This WordPress Sliding Login & Sign Up Page is made using Elementor Pro!

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.

Learn How to Make an Eye-Catching Sliding Login & Sign Up Page in WordPress with Elementor Pro | WordPress Elementor Tutorial (Tips & Tricks)

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

Tools and Links Used

Hostinger Fast, beginner friendly WordPress hosting.

Get Hosting

Elementor The free page builder this tutorial is built with.

Get Elementor

Elementor Pro The Pro upgrade used throughout this tutorial.

Get Elementor Pro

Kitpapa Ready made Elementor template kits.

Get Templates

Kitninja eCommerce Elementor template kits.

Get Templates

Project Files Download the resources used in this tutorial.

Download Files

Prompt Used in This Tutorial

Form Container Style CSS

<style>
.main-container{
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
			0 10px 10px rgba(0,0,0,0.22);
}

</style>

Form Container Style CSS Class

main-container

Form Container Style Css

/* Form-ontainer */
.form-container{
    height: 100%;
    transition: all 0.6s ease-in-out;
}

.main-container.right-panel-active .sign-in-container {
	transform: translateX(100%);
}

.sign-up-container {
	opacity: 0;
}


.main-container.right-panel-active .sign-up-container {
	transform: translateX(100%);
	opacity: 1;
	z-index: 5;
	animation: show 0.6s;
	
}


@keyframes show {
	0%, 49.99% {
		opacity: 0;
		z-index: 1;
	}
	
	50%, 100% {
		opacity: 1;
		z-index: 5;
	}
}

Form Container Style Css Classes

form-container
sign-in-container
sign-up-container

Container Overlay Style Css

.overlay-container {
	height: 100%;
	transition: transform 0.6s ease-in-out;
}

.main-container.right-panel-active .overlay-container{
	transform: translateX(-100%);
}


.overlay {
    
	background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
	background: linear-gradient(to right, #FF4B2B, #FF416C);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 0;
	position: relative;
	left: -100%;
	height: 100%;
	width: 200%;
  	transform: translateX(0);
	transition: transform 0.6s ease-in-out;
}
.main-container.right-panel-active .overlay {
  	transform: translateX(50%);
}
.ghost{
    cursor: pointer;
}



.overlay-panel {
	height: 100%;
	transform: translateX(0);
	transition: transform 0.6s ease-in-out;
}



.overlay-left {
	transform: translateX(-20%);
}

.main-container.right-panel-active .overlay-left {
	transform: translateX(0);
}

.overlay-right {
	right: 0;
	transform: translateX(0);
}

.main-container.right-panel-active .overlay-right {
	transform: translateX(20%);
}

Container Overlay Style Css Classes

overlay
ghost
overlay-panel
overlay-left
overlay-right

.ele-login .elementor-login .elementor-button {
    width: 100%;
}

ele-login

Form Responsive Css

/* Mobile Responsive */
        @media (max-width: 768px) {

            .form-container {
                left: 0 !important;
                height: 50% !important;
            }

            .sign-in-container {
                top: 0;
            }

            .main-container.right-panel-active .sign-in-container {
                transform: translateX(0) translateY(100%) !important;
            }

            .sign-up-container {
                top: 0;
            }

            .main-container.right-panel-active .sign-up-container {
                transform: translateX(0) translateY(100%) !important;
            }

            .overlay-container {
                left: 0 !important;
                top: 50% !important;
                height: 50% !important;
            }

            .main-container.right-panel-active .overlay-container {
                transform: translateX(0) translateY(-100%) !important;
            }

            .overlay {
                background: linear-gradient(to bottom, #FF4B2B, #FF416C) !important;
                top: -100% !important;
                left: 0 !important;
                width: 100% !important;
                height: 200% !important;
            }

            .main-container.right-panel-active .overlay {
                transform: translateX(0) translateY(50%) !important;
            }

            .overlay-panel {
                left: 0 !important;
                top: auto !important;
                width: 100% !important;
                height: 50% !important;
            }

            .overlay-left {
                top: 0 !important;
                bottom: auto !important;
            }

            .overlay-left,
            .main-container.right-panel-active .overlay-left {
                transform: translateX(0) translateY(-20%) !important;
            }

            .main-container.right-panel-active .overlay-left {
                transform: translateX(0) translateY(0) !important;
            }

            .overlay-right {
                bottom: 0 !important;
                top: auto !important;
                right: auto !important;
            }

            .overlay-right,
            .main-container.right-panel-active .overlay-right {
                transform: translateX(0) translateY(0) !important;
            }

            .main-container.right-panel-active .overlay-right {
                transform: translateX(0) translateY(20%) !important;
            }

            
        }

Form JS Code

<script>
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');

signUpButton.addEventListener('click', () => {
	container.classList.add("right-panel-active");
});

signInButton.addEventListener('click', () => {
	container.classList.remove("right-panel-active");
});
</script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const logoutLink = document.querySelector('.elementor-login__logged-in-message a[target="_blank"]');
    if (logoutLink) {
      logoutLink.removeAttribute("target");
    }
  });
</script>

Install Code Snippet Plugin

Code Snippets

register_name
register_email
register_password

How to Add Sign In and Sign Up Options Using Elementor

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