Elementor Multi-Column Dropdown

Elementor multi column dropdown

https://youtu.be/72L8eLoIrCU Target all dropdown menus @media(min-width:767px) { /* When hovering over a menu item that has children, display its submenu as a grid */ selector .menu-item-has-children:hover .sub-menu { display: grid !important; } /* Set up the submenu’s grid layout */ selector .sub-menu { grid-template-rows: repeat(6, auto); /* Creates 6 rows in the grid, each auto-sized […]

How To Make a Hover Card Like a PRO in Elementor

How to make a hover card like a pro in Elementor

https://youtu.be/pja-7Sfn8WI CSS selector .card-content{ height: 56%; margin-bottom: -134px; transition: all 0.5s ease; } selector .card-wrapper:hover .card-content{ margin-bottom: 0px; height: 100%; } selector .card-content .e-con-inner{ transition: all 0.5s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } selector .card-wrapper:not(:hover) .card-content .e-con-inner { animation: fadeIn 1.5s ease forwards; } selector […]

Elementor Button Border Gradient Tutorial

Elementor Gradient Border Button

https://youtu.be/I9am2K_yopc Border Gradient Button CSS selector .elementor-button{ position: relative; overflow: hidden; z-index: 1; margin-bottom: -15px } selector .elementor-button:before{ content: ”; position: absolute; left: -2px; top: -2px; width: calc(100% + 4px); height: calc(100% + 4px); background: linear-gradient(90deg, rgba(255,74,66,1) 0%, rgba(7,20,221,1) 100%); border-radius: inherit; z-index: -1; } selector .elementor-button:after{ content: ”; position: absolute; width: calc(100% – 6px); […]