sell website making service

Tag: tutorial

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!

Convert HTML Select Dropdown field to Text Input field in Codeigniter or PHP

In this tutorial, I explore how to convert a select dropdown into a text input field in a CodeIgniter or PHP application. This process is ideal when I need a more flexible input option, allowing users to type in a custom value.

Step-by-Step Guide

Original Dropdown Example: Using a standard select dropdown, the options could be cars (e.g., Volvo, Audi). This setup works for predefined choices but limits user input.

Convert HTML Select Dropdown field to Text Input field in Codeigniter or PHP

Transformation to Text Field: To convert this to a text input, I start by replacing the <select> tag with an <input type="text">. I ensure that class names, IDs, and form controls match the original setup, as many applications rely on proper naming conventions for form elements.

Adjusting PHP Code: The original dropdown might be populated using PHP and connected to a database. However, when I convert it to a text field, the input won’t be tied to predefined values from the database. Instead, users can freely input any value.

Convert HTML Select Dropdown field to Text Input field in Codeigniter or PHP

Important Considerations: I make sure to preserve essential attributes like name, class, and ID, as these are crucial for the form to function correctly in PHP applications. The form will still work without a database, but values will be manually entered by the user.

Code: 

<select class="form-control select" name="city" id="city">

 	<option value=""><?php echo $language['lg_select_city'];?></option>

 </select>   
												
												
  <input type="text" class="form-control" name="city" id="city" value="<?php echo $profile['city'];?>">

Conclusion

This simple approach allows for flexibility in cases where a dropdown isn’t the best option. For instance, in fields like “name” or custom user inputs, converting a select dropdown to a text field is a practical solution.

Stay tuned for more tutorials, and don’t forget to like, comment, and share!

Turning Challenges into Opportunities: My Work with Web Development Tutorials

Recently, due to the unrest in our country, we faced internet outages, which left me with limited options for productive work. But I believe in making the most of any situation! Instead of sitting idle, I took this time to edit my WordPress and web development tutorials for my YouTube channel and Facebook.

Turning Challenges into Opportunities: My Work with Web Development Tutorials

These tutorials are raw and real—I recorded them while working on client projects and solving specific challenges.

Here’s why I decided to create these videos:

1️⃣ Helping Others: My goal is to provide valuable solutions to anyone searching for them.
2️⃣ Showcasing My Work: These videos serve as a portfolio of my work and skills.
3️⃣ Keeping Track: It’s a great way to document my progress and growth.

I’m confident that if I focus, I can create 200+ tutorials in just two months! 😄 However, finding time to record and edit is challenging, and sometimes, circumstances don’t allow it.

Looking back, I wish I had started recording my journey from the very beginning. Imagine the thousands of tutorials I could have shared, helping countless people along the way. After all, I’ve learned so much from the internet, and giving back through my knowledge would be incredibly fulfilling.

Turning Challenges into Opportunities: My Work with Web Development Tutorials

My editing process is simple—I use Free Cam 8 to record my screen and voice while I work, and final edit with CapCut.

As a self-employed professional, I’ve had to learn various skills to meet the needs of clients and employers, from web development to video and image editing. I like to think of myself as a one-man army 💪.

Check Most Recent Posts