How to Create Consultant & Consulting Website in wordpress (Elementor Tutorial for Beginners)

2.1KSHARES

Hide horizontal overflow for the entire page CSS

Button Style CSS

.black-bg-btn:hover svg path {
    stroke: #05061A;
}

.white-bg-btn:hover svg path {
    stroke: #FFFFFF;
}
.hero-btn-1 svg,
.hero-btn-2 svg {
    max-width: 13px;
    max-height: 13px;
}

Button Style CSS Classes

black-bg-btn
white-bg-btn
hero-btn-1
hero-btn-2

Single Banner Gradient BG Style CSS

.three-layer-bg {
    background: linear-gradient(90deg, rgba(207, 169, 255, 0.08) 0%, rgba(207, 169, 255, 0.4) 51%, rgba(207, 169, 255, 0.08) 100%);
}

Single Banner Gradient BG Style CSS Class

three-layer-bg

Rotated Animation Style CSS

.rotate-image {
    animation: rotate360 20s linear infinite;
}

@keyframes rotate360 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
}

Rotated Animation Style CSS

rotate-image

Dot Animation Style CSS

.dot-animation .dot {
    animation: wave 1.3s infinite;
    z-index: 2555;
}

.dot-animation .dot1 {
    animation-delay: 0.3333s;
    animation-delay: 0s;
}

.dot-animation .dot2{
    animation-delay: 0.6666s;
    animation-delay: 0.3333s;
}

 .dot-animation .dot3{
    animation-delay: 0.9999s;
    animation-delay: 0.6666s;
}

@keyframes wave {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-0.5rem);
    }
    100% {
        transform: translateY(0px);
    }
}

Dot Animation Style CSS Class

dot-animation
dot
dot1
dot2
dot3

Move Up and Down Animation CSS

 .sun-bounce {
    animation: MoveUpDown 4s linear infinite;
}

@keyframes MoveUpDown {
    0%,
    100% {
        transform: translateY(20px);
    }
    50% {
        transform: translateY(0px);
    }
}

Move Up and Down Animation CSS CLass

sun-bounce

Pulse Animation CSS

.bulb-icon-pulse,.icon-pulse-animation .elementor-icon svg {
    animation: pulse 2s infinite linear;
    animation-direction: alternate;
}

@keyframes pulse {
    from {
        transform: scale(0.8);
    }

    to {
        transform: scale(1);
    }
}

Pulse Animation CSS Class

bulb-icon-pulse
icon-pulse-animation

Team Member Social Icon Style CSS

.member-social {
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.member-image-wrap:hover .member-social {
    opacity: 1;
    visibility: visible;
    right: 12px !important;
}

Team Member Social Icon Style CSS

member-image-wrap:hover
member-social