sell website making service

Tag: wordpress

How to Fix King Composer WordPress Plugin Not Saving Issue (Object Cache Pro Conflict)

If you’ve ever tried to add text or elements under an image using the King Composer website builder and faced issues, you’re not alone.

How to Fix King Composer Plugin Issues with Object Cache Pro

How to Fix King Composer WordPress Plugin Not Saving Issue (Object Cache Pro Conflict)

I recently encountered a similar problem where the text blocks and images wouldn’t save correctly after updating the page. In this blog post, I’ll share how I identified the issue and resolved it, and provide insights for anyone facing similar challenges. Jump to the bottom to see the video and steps.

The Problem: Elements Not Saving Correctly

How to Fix King Composer WordPress Plugin Not Saving Issue (Object Cache Pro Conflict)

I was trying to add a text block under an image using the King Composer builder. After saving and updating the page, I expected to see an empty block, followed by an image and a text block labeled “sample text.” However, after refreshing the page, the text block wasn’t visible. This missing content was a clear indication of a bug within the builder.

Cause of the Issue: Object Cache Pro Plugin Conflict

How to Fix King Composer WordPress Plugin Not Saving Issue (Object Cache Pro Conflict)

After some investigation, I discovered the problem was caused by a caching plugin called “Object Cache Pro.” This plugin, designed to handle website caching, was interfering with the King Composer builder, preventing new elements from saving correctly. Caching plugins can sometimes cause conflicts with page builders, especially when these builders rely on dynamic content updates.

Solution: Disabling the Caching Plugin

To resolve this issue, I temporarily deactivated the Object Cache Pro plugin. After doing this, I could add, edit, and update elements within King Composer without any issues. Once I confirmed everything was working correctly, I saved the changes and reloaded the page.

Here’s a step-by-step guide on how you can fix this issue:

  1. Deactivate Object Cache Pro Plugin: Go to your WordPress dashboard, navigate to the plugins section, and deactivate the Object Cache Pro plugin. This should allow you to make changes without interference.
  2. Make the Necessary Changes: Add or edit the elements on your page using King Composer.
  3. Save and Update the Page: Once your edits are complete, update the page and check if the changes are visible on the frontend.
  4. Reactivate the Caching Plugin (Optional): If you need to, you can reactivate the Object Cache Pro plugin, but keep an eye on any conflicts that may arise. Consider switching to a different caching solution if the issue persists.

Why the Problem Exists: Plugin Abandonment

How to Fix King Composer WordPress Plugin Not Saving Issue (Object Cache Pro Conflict)

The King Composer plugin has not been updated in over three years, which can lead to compatibility issues with other plugins, especially caching solutions. When plugins are not actively maintained, they may not work seamlessly with newer versions of WordPress or other updated plugins. This is frustrating, especially when a once-reliable tool starts causing problems.

Conclusion: Keep Plugins Updated and Report Issues

How to Fix King Composer WordPress Plugin Not Saving Issue (Object Cache Pro Conflict)

If you’re a developer or website owner using King Composer, be aware of potential plugin conflicts, particularly with caching plugins. If you face similar issues, try disabling your caching solution temporarily to see if it resolves the problem. And, if possible, report the issue to the plugin developers to encourage them to release updates.

Hopefully, King Composer developers will address these compatibility issues in future updates. For now, if you encounter problems, follow the steps outlined above to troubleshoot and fix them.

Feel free to share your experiences or additional troubleshooting tips in the comments. Let’s help each other navigate these technical challenges!

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!

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