sell website making service

Tag: HTML

How to Create a Image Slider in WordPress with Elementor Plugin and CSS

Creating an engaging website requires more than just placing static elements on a page. One effective way to enhance the user experience is by using interactive elements, like sliders. In this tutorial, I’ll show you how to transform static columns into an animated slider using Elementor and CSS. This step-by-step guide will demonstrate how to convert a static section with columns in the Elementor WordPress plugin into a sliding column slider using only CSS and Elementor settings. A tutorial video is included at the end for visual learners. Read to the end to see the video tutorial.

How to Create a Image Slider in WordPress with Elementor Plugin and CSS

What You’ll Need To Know

  • Basic knowledge of CSS, HTML, and Elementor
  • Access to the Elementor plugin on your WordPress website

Step-by-Step Guide to Create the Image Slider

Step 1: Understanding the Concept

We are going to convert static column images into sliding images. When you hover over a column, it expands to show some text, while the other columns become slightly darker with an overlay. This creates a dynamic, interactive effect that enhances user engagement.

Step 2: Setting Up the Static Columns

  1. Add a Section in Elementor and divide it into four columns.
  2. Insert Images into each column. These will serve as the content that will slide.
  3. Ensure Each Column Has a Fixed Height – This is essential for smooth transitions and to avoid jumping effects.

Step 3: Adding the Required CSS

  1. Go to WordPress Dashboard > Appearance > Customize > Additional CSS.
  2. Add the following CSS code:
  3. Adjust CSS Values as per your design requirements, like transition duration and width percentages.

.fcc { display:none; }

@media (min-width: 479px) {



.elementor-element-0549d70 .elementor-column{
      transition: all 0.6s cubic-bezier(.42,.41,.5,.49);
	height: 779.5px;
	    font-size: 26px;
    text-align: center;
}



section.elementor-element-0549d70:hover {
   /* width: 132vw !important; */ 
}


.elementor-element-0549d70 .elementor-column:nth-child(1):hover {
    width: 40% !important; 
}
.elementor-element-0549d70 .elementor-column:nth-child(2):hover {
    width: 40% !important; 
}
.elementor-element-0549d70 .elementor-column:nth-child(3):hover {
    width: 40% !important; 
}
.elementor-element-0549d70 .elementor-column:nth-child(4):hover {
    width: 40% !important; 
}




 
.elementor-element-0549d70 .elementor-column:nth-child(1):hover p {display:none; }

.fwt{ color: white;}
.fgt { color: white;}

.elementor-element-0549d70 .elementor-column:nth-child(1):hover .fcc, 
.elementor-element-0549d70 .elementor-column:nth-child(2):hover .fcc,
.elementor-element-0549d70 .elementor-column:nth-child(3):hover .fcc,
.elementor-element-0549d70 .elementor-column:nth-child(4):hover .fcc {
    display: block;
    margin: auto;
     
}

.elementor-element-0549d70 .elementor-column:nth-child(1):hover p, 
.elementor-element-0549d70 .elementor-column:nth-child(2):hover p,
.elementor-element-0549d70 .elementor-column:nth-child(3):hover p,
.elementor-element-0549d70 .elementor-column:nth-child(4):hover p{
    display: none;
}
	
section.elementor-element-0549d70 .elementor-background-overlay
{background-color: #ff000000; 
opacity: 1;}


section.elementor-element-0549d70:hover .elementor-background-overlay
{background-color: #000000; 
opacity: 0.5;}
	
	
}

Step 4: Configuring Elementor Columns

  1. Edit Each Column using Elementor.
  2. Go to Style > Background Overlay.
  3. Choose a color overlay (e.g., black) and set its Opacity to create a subtle darkening effect.
  4. Set the Hover State: On hover, set the overlay to be transparent. This will give the active column a clearer, brighter look.

Step 5: Adding Text to Columns

  1. Inside each column, Add a Text Widget.
  2. Type your desired text (e.g., “Learn More”, “Explore”, etc.).
  3. Hide the Text Initially by setting it to display: none using CSS.
  4. Configure the CSS Hover Effect to reveal the text only when the column is hovered over.

Step 6: Replicate for All Columns

Repeat the above steps for all the columns. Make sure to tweak the CSS and adjust the text position if necessary to maintain a consistent look across the slider.

How to Create a Image Slider in WordPress with Elementor Plugin and CSS

Step 7: Fine-Tuning the CSS and Making It Responsive

  1. Adjust the Height and Width settings for different screen sizes using CSS Media Queries.
  2. Ensure the slider works seamlessly across all devices. Consider creating a different version for mobile where the hover effect might be challenging to implement. @media (max-width: 768px) { .elementor-column { width: 100%; height: auto; transition: none; /* Disable the hover effect for mobile */ } }

Watch the Tutorial Video

For those who prefer a more visual approach, check out the tutorial video at the end of this article. It will walk you through each step of the process.

Conclusion

By following the steps above, you should now have a beautiful, interactive image slider on your Elementor website. This simple CSS trick can help make your website more engaging, giving your content a sleek, modern feel. Feel free to customize the CSS code to match your site’s branding and design.

If you encounter any issues or have suggestions for improvements, please leave a comment below. Don’t forget to like, share, and subscribe for more tutorials!

See you in the next video!

How to add HTML text inside WooCommerce product description tab

On our woocommerce website, we wanted to add text and HTML before and after the product description that is inside the description tab. After applying many PHP codes the below code served our purpose.

Main Code

// add html inside product description tab after main content
function add_in_product_description_tab($content){
  //only add text before WordPress posts
  if( is_product() ){
	  
    $before = '<h3>'.do_shortcode('[product_name id="'.get_the_ID().'"]').'</h3>';
	
    $after = '<div class="dkhmyenr"><h4>of '.do_shortcode('[product_name id="'.get_the_ID().'"]').' in country?</h4><p>The of '.do_shortcode('[product_name id="'.get_the_ID().'"]').' in is <strong>৳'.do_shortcode('[silva_product_price id="'.get_the_ID().'"]').'</strong> You can buy the '.do_shortcode('[product_name id="'.get_the_ID().'"]').' with reasonaover <strong>US</strong>.</p></div>';	
    //modify the incoming content 
    $content = $before . $content . $after; 
  } 
  return $content; 
}  
add_filter( 'the_content', 'add_in_product_description_tab' );

Copy the above PHP code in your theme’s function.php and change text, shortcode, HTML as per your need.

Explanation

With the code above, we are only targeting woocommerce product page, here $before is what you get before the main description and $after is after the product description. It is for all woocommerce products.

This is similar to page and post content, tweak it and apply, but you must know programming or coding to experiment.

Does it work? Comment and share if it helps. Follow our blog to Learn more about WordPress

How to remove points earned & redeemed from WooCommerce invoice

For WooCommerce eCommerce website, I wanted to remove or delete, a better word is hide “Message to display Earned Points” and “Message to Redeemed Points” from Invoice that I am printing for Orders. I wrote my experience below in steps that will help you to hide it from invoice if you don’t want to show it in your printed invoice.

SUMO Reward Points – WooCommerce Reward System

We are using SUMO Reward Points – WooCommerce Reward System WordPress plugin for points reward system for our woocommerce website. This helps us give customers points when they buy from our website, and later customers can use those points to redeem discounts for their next order. This is a paid plugin with many options and helps us a lot when returning customers can avail discounts and comes back to buy from us again and again.

PDF Invoices & Packing Slips for WooCommerce


We are using PDF Invoices & Packing Slips for WooCommerce WordPress plugin to generate Invoices to print when delivering the parcel also this invoice is attached to the email that customers receive after placing the order. We are using the free version from the WordPress plugin repository. This is a fantastic plugin that also has options and if you have coding knowledge you can highly customize the Invoice or packaging slip output by adding extra text and images inside Invoice.

From Invoice pdf

How to remove points earned & redeemed from WooCommerce invoice
Points Redeemed in this Order
How to remove points earned & redeemed from WooCommerce invoice
Points Earned in this Order

I wanted to hide those from my printed invoice because these lines doesn’t matter, as the points redeemed discounts are already shown on the middle part of the Invoice and I need to cut extra piece of paper every time for packaging, therefore, printing it twice on same page was a waste.

SUMO Reward Points – WooCommerce Reward System – plugin options with HTML

While searching for “Message to display Earned Points” and “Message to Redeemed Points” I found it inside SUMO plugin options like the below screenshots

How to remove points earned & redeemed from WooCommerce invoice
Message to Redeemed Points
How to remove points earned & redeemed from WooCommerce invoice
Message to display Earned Points

You will find these option fields on Sumo plugin modules, please go through the options and type in the keyboard “Ctrl+F” to find the text and jump on it.

From the above 2 screenshots, I used HTML to wrap the message and applied <div class.. to hook the message from invoice and used CSS to display:none; that is hide it from invoice. I used HTML CSS here because if you make this message off by clicking the checkbox this message will also be hidden from Order edit wp-admin page, which we don’t want, rather we want to hide it from Invoice only.

How to remove points earned & redeemed from WooCommerce invoice
Order edit wp-admin page

CSS Code

How to remove points earned & redeemed from WooCommerce invoice
CSS code for style.css file

Put your CSS code as per above format marked in red box. Style.css is located under theme folder / woocommerce / invoice folder – these folders are responsible for Invoice customization, these folder structures are documented here.

Checking HTML output

While doing customization you can check the changes live by generating HTML rather than generating pdf every time after making a small code change, by following the below screenshot. So after you are done with the changes you can turn off the checkbox and output PDF as permanent for invoice print.

How to remove points earned & redeemed from WooCommerce invoice
HTML output URL

Done

The final invoice will have no messages at the bottom.

How to remove points earned & redeemed from WooCommerce invoice
final invoice pdf

Conclusion

You can experiment with different HTML and CSS to customize the Invoice as per your needs. Need any help send me a message! Please share this tutorial if it really helped.

Check Most Recent Posts