Problems with Custom Elementor Widget Styling: Inconsistencies between Front-End and Elementor Editor - Seeking Help

I have created a unique carousel plugin for Elementor utilizing the Slick slider. The carousel displays perfectly on the website's front-end with the desired styling. However, I am facing an issue when trying to edit the widget within the Elementor editor. The styles applied to the front-end do not carry over to the Elementor editor, causing confusion and limiting real-time modification visibility for users inserting content.

My goal is to achieve a seamless design experience where the widget's appearance in the Elementor editor matches its front-end display, allowing instant updates as users input content. This will greatly enhance the user interface and editing process for those utilizing my custom widget.

linked-carouselle.php:

widgets\carouselle-widget.php:

jquerycsswordpresselementorwordpress-plugin-creation

Answer №1

If you're facing issues with loading the slick styles and scripts in Elementor editor, here's a simple solution for you. Just follow these steps to enqueue your script using action hooks:

Inside your plugin functions:

function widgets_enqueue_scripts()
    {
        wp_register_script(
            'widgets_script',
            plugin_dir_url(__FILE__) . 'js/widgets.js',
            array('jquery'),
            '1.3',
            true
        );
        wp_enqueue_script('widgets_script');
    }

In your enqueued JavaScript file:

jQuery(window).on('elementor/frontend/init', function () {
        elementorFrontend.hooks.addAction('frontend/element_ready/global', function ($scope) {
    
            jQuery('.__academics').each(function () {
                console.log('Found:', jQuery(this));
                if(!jQuery(this).hasClass('slick-initialized')){
                    jQuery(this).slick({
                        dots: true,
                        infinite: true,
                        speed: 400,
                        slidesToShow: 5,
                        arrows: true,
                        autoplay: true,
                        responsive: [{
                            breakpoint: 1024,
                            settings: {
                                slidesToShow: 4,
                                slidesToScroll: 1,
                                infinite: true,
                                dots: false
                            }
                        },
                        {
                            breakpoint: 992,
                            settings: {
                                slidesToShow: 3,
                                slidesToScroll: 1,
                            }
                        },
                        {
                            breakpoint: 480,
                            settings: {
                                slidesToShow: 1,
                                slidesToScroll: 1
                            }
                        }
        
                        ]
                    });
                }
            });
        });
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update a designated div section on the webpage every 10 seconds

I have two pages, chat.php and allchat.php. I have successfully been able to load the allchat.php page into the chat.php div after a 10-second interval using the following code: $(document).ready(function(){ setInterval(function() { $( ...

javascriptphpjqueryhtmlcss

What could be causing the HTML <DATALIST> dropdown to display next to its input rather than below it?

I have an input linked to a datalist, and it's functioning correctly. However, when I initially open the dropdown, the option list appears next to (right of) the input. After entering a few characters to narrow down the list, it then shifts below the ...

htmlcsshtml-datalist

Increasing the font size on a document

Once again, faced with my own silly problems. This time I stumbled upon the following page: http://jsfiddle.net/g3VBT/ I am trying to style the "enter your U.R.L here" text with the following properties: font-weight: 600; font-size: 1.5em; The issue ...

htmlcssbuttontext

Searching within a container using jQuery's `find` method can sometimes cause jQuery to lose control

I am trying to extract information from an input field within a table in a specific row. Here is the code I am using: var myElements = $('#myTable tbody').find('tr'); console.log(myElements); This correctly displays the items in the ...

javascriptjqueryhtml

Tips for obtaining the identifier of a div element while employing the bind() function in jQuery

Imagine having the following div. <div id="456" class="xyz">Lorem Ipsum</div> If I want to execute a function when this specific div is hovered over, I can achieve it like this: $(".xyz").bind({ mouseenter : AnotherFunction(id) }); Prio ...

javascriptjquery

Making the Select Tag function as an on-click event in JQuery

So I currently have a tab set up that functions as on click links when viewed on desktop. However, for tablet and mobile devices, I need it to be transformed into a select drop down list while maintaining the same functionality. Below is the code used for ...

javascriptjqueryhtmlevents

Leveraging Photoshop Actions with User-Generated Images

Is it possible to allow users to upload an image to my website and then apply a series of Photoshop actions, such as adding a layer behind the image, another one in front, and dynamic text with effects like drop shadow and gradient overlay? ...

phpjavascriptjqueryweb-applicationsphotoshop

Preserving filter selections in Datatables and transferring them back to dropdown menus

I have implemented Jquery datatables with dropdown filters in the form of a table. The HTML structure is as follows: <table id="example"> <thead> <tr> <th>Name</th> <th>Position</th> ...

jqueryjquery-selectors

Tips for extracting data from a link using ajax

I have been searching extensively for a solution without success. Can anyone assist me? <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" id="click" href="#" da ...

javascriptjquery

Creating a Mui v5 grid item that maximizes its height within a dialog box

I need help setting the height of a Grid Item to occupy all available space in a MUI dialog. In the image below, I am trying to make the Left Side Panel, Main section, and Right Panel extend to fill the orange-colored dialog space. https://i.sstatic.net/ ...

cssreactjsmaterial-uigridmui-x-data-grid

Retrieve PHP variable from a PHP CSS file

I'm facing an issue where I am unable to retrieve a PHP variable from a CSS file that is loaded in this manner from my index.php: <link href="css/style.php" rel="stylesheet"> Within the style.php file, the code looks like this: <?php heade ...

phpcssvariables

Does CSS in the current IE9 beta allow for text shadows to be implemented?

Text shadows look great in Firefox and Chrome. For example, I have a basic website for streaming videos. Unfortunately, there are no shadows in IE9 for me. This is my CSS code: p { color: #000; text-shadow: 0px 1px 1px #fff; padding-bottom: 1em; } ...

javascriptcsshtmlshadows

Dynamic double header and footer would be ideal for optimal flexibility

I'm not entirely certain if it's possible, but I am looking for a flexible solution using either flexbox or CSS table layout to create fixed headers and footers like so: ***header one - fixed - dynamic height*** ***header two - fixed - dynamic h ...

cssflexboxtablelayout

Navigating child elements inside a parent container: A guide

Having trouble targeting the correct element in CSS. How can I get .sizewave to target both itself and .bp_bar? Any solutions? HTML: <div class="bp_outer_wrapper"> <img class="sizewave" src="media/images/heart.svg"> <div class="b ...

htmlcssanimationcss-selectorsparent

I'm encountering errors from JQuery right from the start of the code

Hey there, I encountered a problem with my script: $(document).ready(function(){ alert("works"); }) I tried using a regular document.ready check but it keeps throwing 7 errors at me. Check out the screenshot of the errors here Any help or advice wo ...

javascriptjquery

Make the text area occupy the full width of the remaining screen space

I've been struggling to make the text area fill the remaining width of the screen. Everything is set up nicely, but I just can't seem to find a solution to get it to expand and occupy the rest of the available space. I intentionally refrained fr ...

htmlcssformstextareaflexbox

The wrapAll() method can be used to wrap list items within two columns

I am looking to group multiple li elements within two div containers by using jQuery's wrapAll method. The challenge lies in the fact that these items are rendered within a single <ul> element via a CMS. Here is the current setup: <ul> ...

javascriptjqueryhtmlcss

The <img> tag is displaying with dimensions of 0 x 0 pixels even though its size was specified

Is there a way to control the image size within an <img> tag placed inside an html5 video element? Currently, it keeps defaulting back to 0 x 0 pixels. The reason behind using this img is to serve as a fallback for outdated browsers where the video ...

csshtmlimagehtml5-video

Is it possible to have two router.js files within a single Angular project?

Encountering a dilemma in my Angular UI routing project with rendering the view. Contemplating using two router.js files. Is it feasible to include two router.js files in one project? What drawbacks might arise from this approach? ...

jqueryangularjsasp.net-mvcangular-ui-router

Tips on how to perfectly position an element in the middle of an HTML

I am struggling to get the textarea element centered using margin: 0 auto. I even attempted to place the element inside a div with margin: 0 auto style. <div style="margin: 0 auto;"> <textarea rows="4" cols"100"></textare> </div& ...

htmlcss