In this blog post, we’ll explore how to enhance your Elementor-powered WordPress sites with custom styles and scripts. Whether you want to add unique design elements or add interactive features, these code snippets can help improve the functionality and aesthetics of your site.
We’ll share practical examples and step-by-step tutorials from our YouTube channel, covering a range of customization techniques. From adding custom CSS for unique styling to integrating JavaScript for advanced interactions, you’ll learn how to use code to create a more dynamic and engaging website.
Join us as we explore these techniques and get ready to make your Elementor designs truly outstanding!
Table of Contents
Custom Footer in Elementor
Elementor allows users to design custom footers for their WordPress websites using its drag-and-drop interface. A custom footer can include various elements such as menus, social media icons, contact information, and more. By using custom CSS, as in the example provided, users can further enhance the appearance and behavior of elements in the footer.
In this case, CSS enhances the user experience by adding subtle visual feedback when hovering over menu links in the footer. This type of interaction is a small but effective way to improve the aesthetics and usability of a website, making it more responsive and engaging for visitors.
.footer-menu ul li a:hover {
padding-left: 15px;
transition: all 0.3s ease;
}
Selector: .footer-menu ul li a:hover
- This selector targets anchor (
<a>) elements within list items (<li>) inside an unordered list (<ul>), which in turn is within an element with the classfooter-menu. - The
:hoverpseudo-class specifies that the styles should only apply when a user hovers over these anchor elements.
Property: padding-left: 15px;
- This adds 15 pixels of padding to the left side of the anchor element. This padding effectively pushes the content inside the link to the right, creating a visual indentation effect when hovered over.
Property: transition: all 0.3s ease;
- This property specifies a smooth transition effect for the padding change.
allindicates that the transition should apply to all properties that change.0.3ssets the duration of the transition to 0.3 seconds.easedefines the timing function, which starts slow, speeds up in the middle, and slows down at the end, providing a smooth and natural effect.
Infinite Smooth Image Scrolling
The concept of infinite smooth image scrolling involves continuously cycling through a set of images, often with a seamless transition. This technique is popular in web design for showcasing multiple images or products in a visually appealing and user-friendly manner.
.infinte-img-scroll .swiper-wrapper {
-webkit-transition-timing-function: linear !important;
-moz-transition-timing-function: linear !important;
-o-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}
/*Use below code For same Height*/
.infinte-img-scroll figure.swiper-slide-inner img {
height: 250px;
object-fit: cover;
}
/*Use below code to show title on hover*/
.infinte-img-scroll figure.swiper-slide-inner figcaption {
position: absolute;
top: 50%;
right: 0;
left: 0;
z-index: 2;
visibility: hidden;
}
.infinte-img-scroll figure.swiper-slide-inner:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: black;
border-radius:8px;
opacity: 0.4;
z-index: 1;
visibility: hidden;
}
.infinte-img-scroll figure.swiper-slide-inner:hover:before, .infinte-img-scroll figure.swiper-slide-inner:hover figcaption{visibility:visible;}
CSS Class: .infinte-img-scroll .swiper-wrapper
transition-timing-function: linear: This property ensures that the transition effect (scrolling in this case) occurs at a constant speed, giving it a smooth appearance. The!importantdeclaration ensures that this style takes precedence over any other conflicting styles.
CSS Class: .infinte-img-scroll figure.swiper-slide-inner img
height: 250px: Sets the height of the images within the slides to 250 pixels.object-fit: cover: Ensures that the images cover the entire container without distorting the aspect ratio, even if it means cropping the image.
CSS Class: .infinte-img-scroll figure.swiper-slide-inner figcaption
position: absolute: Positions the caption absolutely within the figure, allowing precise control over its placement.top: 50%; right: 0; left: 0;: Centers the caption horizontally and vertically within the figure.z-index: 2: Ensures the caption appears above other elements within the same stacking context.visibility: hidden: Initially hides the caption, making it visible only on hover.
CSS Class: .infinte-img-scroll figure.swiper-slide-inner:before
content: '': Creates a pseudo-element before the content of the figure.position: absolute; width: 100%; height: 100%: Positions the pseudo-element absolutely, covering the entire figure.background: black; opacity: 0.4: Adds a semi-transparent black overlay on the image.z-index: 1: Places this overlay below the figcaption but above the image.visibility: hidden: Initially hides this overlay, making it visible only on hover.
Hover Effect
.infinte-img-scroll figure.swiper-slide-inner:hover:beforeand.infinte-img-scroll figure.swiper-slide-inner:hover figcaption: When the figure is hovered over, the overlay and the caption become visible, providing a visual cue that the image can be interacted with.
Banner Slider in Elementor Using Prime Slider Plugin
A banner slider is a dynamic and visually appealing way to display banners, images or other promotional content on a website. In Elementor, using plugins like Prime Slider, users can create advanced sliders with various customization options.
The provided CSS code is typically used to add a dark overlay over the images in the banner slider. This overlay helps improve the visibility of text or other elements placed over images, creating a contrast that improves readability and visual appeal. A semi-transparent overlay also adds a stylish effect, which is used in modern web design to make content more engaging and beautiful.
Prime Slider, as a plugin, offers a variety of pre-designed templates and customization options that allow users to create responsive and interactive sliders without the need for extensive coding knowledge. The use of custom CSS allows you to further customize and fine-tune the appearance of the slider to match the design and branding of the website, as in the example provided.
/*Use this Code to Add Overlay for background image*/
.bdt-ps-slide-img:before {
content: '';
width: 100%;
height: 100%;
background: black;
opacity: 0.6;
position: absolute;
}
/*Use this Code to Change Button Icon*/
span.bdt-slide-btn-icon svg {
display: none;
}
span.bdt-slide-btn-icon:before {
content: '';
position: absolute;
width: 30px;
height: 30px;
background-size:30px;
background-image: url('');
background-position: center;
background-repeat: no-repeat;
}
/*Use this Code to Change Button Icon on button hover*/
a.bdt-slide-btn:hover span.bdt-slide-btn-icon:before {
background-image: url('');
background-position: center;
background-repeat: no-repeat;
}
Selector: .bdt-ps-slide-img:before
- This selector targets a pseudo-element (
:before) that is created before the content of elements with the classbdt-ps-slide-img. - The class
bdt-ps-slide-imgis likely used to style the image container within a slide, where “bdt” could refer to a specific naming convention or framework used by Prime Slider.
Property: content: '';
- This property creates an empty pseudo-element. The
contentproperty is necessary for the pseudo-element to render, even if it’s empty.
Property: width: 100%; height: 100%;
- These properties make the pseudo-element cover the entire width and height of the parent element (i.e., the image container). This ensures that the overlay spans the full size of the image.
Property: background: black;
- This sets the background color of the pseudo-element to black.
Property: opacity: 0.6;
- This sets the opacity of the pseudo-element to 0.6, making it semi-transparent. This allows the image underneath to be partially visible, creating a darkening effect.
Property: position: absolute;
- This positions the pseudo-element absolutely within the parent container, which means it will be positioned relative to the nearest positioned ancestor. In this case, it’s used to overlay the entire image container.
Selector: span.bdt-slide-btn-icon svg
- This target the icon element and ‘display:none;’ will remove/hide the svg element or icon which comes by default in prime slider.
Selector: span.bdt-slide-btn-icon:before
- This targets a pseudo-element (
:before) that is created before the content of aspanelement with the classbdt-slide-btn-icon.
- This targets a pseudo-element (
Property: content: '';
- Creates an empty pseudo-element. The
contentproperty must be defined for the pseudo-element to render.
- Creates an empty pseudo-element. The
Property: position: absolute;
- Positions the pseudo-element absolutely within its parent element, allowing it to be placed precisely where needed.
Property: width: 30px; height: 30px;
- Sets the size of the pseudo-element to 30×30 pixels.
Property: background-size: 30px;
- Ensures the background image fits within the 30×30 pixel area.
Property: background-image: url('');
- This is where the URL of the custom icon image is placed. Currently, it is empty and should be filled with the path to the desired icon image.
Property: background-position: center;
- Centers the background image within the pseudo-element.
Property: background-repeat: no-repeat;
- Ensures the background image does not repeat and is displayed only once within the pseudo-element.
