How to?
- Download the template file below
- Create Testimonial as a new custom post type and add content testimonial body as a content inside
- Import template to the page adjust the Posts widget setting
- Add CSS below to header
- Add Javascript below to the end of body you may adjust the number at the animate to make the scroll run smoother this depends on how much of content you have
CSS:
<style>
/* make the scrolling area height at least 350px with overflow hidden */
.op-scrolling-list .elementor-widget-posts {
min-height: 350px;
overflow: hidden;
}
.op-scrolling-list .elementor-widget-posts .elementor-widget-container {
position: absolute;
top: 100%;
}
.op-scrolling-list .elementor-widget-posts .elementor-post__excerpt {
margin-bottom: 0;
}
/* add smiley at the front of each testimonial */
.op-scrolling-list .elementor-widget-posts .elementor-post__excerpt p:before {
margin-right: 10px;
content: '\f118';
color: #5C9366;
font-family: "Font Awesome 5 Pro";
font-weight: bold;
}
.op-scrolling-list .elementor-widget-posts .elementor-post__excerpt p {
font-size: 20px;
margin-bottom: 0;
}
</style>
Javascript:
<script>
var $ = jQuery.noConflict()
$(function(){
function fun(){
$('.op-scrolling-list .elementor-widget-posts .elementor-widget-container').css('top', '0');
$('.op-scrolling-list .elementor-widget-posts .elementor-widget-container').animate({
top: "-" + $('.op-scrolling-list .elementor-widget-posts .elementor-widget-container').outerHeight().toString()
}, 20000, "linear", fun);
}
if ( $('.op-scrolling-list .elementor-widget-posts .elementor-widget-container').length > 0 ) {
fun();
}
})
</script>
Our service speaks for itself
I received a request from a client to protect their email address, which was displayed in several places on their
There are cases where clients want to hide certain elements or containers based on a URL parameter. For example, in
Showing past events in reverse order is possible for Events calendar Pro.
Have you ever encountered the frustration of migrating blog posts, and then find out that they are mysteriously hidden? You’re
Question Is there a method to migrate all PDF files? Yes, you can export from phpMyAdmin Is possible preserving the
The Problem: After migrating the blog from the old website to the new one, I noticed that some of the
Make the Elementor background-attachement:fixed setting work, even for Mobile devices such as iPhones. Setup your background image in the Elementor
Details A Template Kit is a collection of pre-designed starter templates for a Elementor site Builder that share a cohesive
What’s is BMI? The Body Mass Index (BMI) Calculator can be used to calculate BMI value and corresponding weight status
ElementsKit Mega Menu Builder for Elementor Elementskit Mega menu based on Elementor page builder gives you highly customize-able features like
I am assigned to a task where I need to make the Elementor tab work on hover while keeping the
One of Elementor’s versatile features is the tab widget, which allows us to organize content in a user-friendly manner. In
Add the code block at the Footer on select page. Example: https://digitalconceptllc.kinsta.cloud/
Add Custom Icons to Elementor Nav Menus (No Paid Plugins!) Using this method, you can add your own custom icons
Introduction: Image magnification on hover is a technique that can greatly improve user experience specially when we use images with
Problem Do you ignore focus styles because they’re ugly? I’m going to explain why you shouldn’t remove them, and show
Create a scrollable tab with Elementor Pro. Its main function is to allow scrolling from Inner Section to Inner Section.
Issue There are multiple posts in three categories. The categories are News (Feedzy) Images Videos If any post that Post’s
The Problem & The Solution Pronto Newsletters Manager plugin does not work with Elementor Website. The plugin use to manage
Gravity Forms does not have a built-in method for enabling any type of form reset button. This doc will show
JavaScript is frequently used to display or conceal content based on user behavior. In this post, I will use Javascript
The Problem & Solution Form Submission not showing in Pronto Dashboard Solution The GForms API keys don’t saved in Pronto
This feature is called Dark theme. When you want the some other pages in Dark mode. To apply a dark
How to? Install Search & Filter form and the Elementor extension to make it seamlessly integrated (use credential in Dashlane)
The Problem & Solution The site have custom CTA footer text for regular page. Solution We create Dynamic Visibility for
The Problem & Solution We have to change brandname from BurnAlong to Burnalong but there are image file name was
There are times that users do not pay attention to capitalizing the letters when typing form fields. Problem Sometimes we
Have you ever wanted to redirect a user to a page and display them a specific tab content without losing
The Problem & The Solution If you need to change the styling of scroll bar, please know that there’s different
The Problem & The Solution If we have long content in each accordion tab, it might cause a bad experience
The Problem & The Solution When we’ve got the mockup from design team with the full-width or out of grid
The Problem Client doesn’t want contact us page, they just want contact us form to be Popup. The Solution 1.
In this short tutorial I’d like to show how you can convert this: To this using only CSS! In this
How to? Add the Call to Action widget to content area Style the widget as same as an example below
How to? Add Icon box widget to the content area and add the specific link Don’t forget to add class
How to? Add Call to Widget to the content area Style the widget as same as mockup Don’t forget to
How to? Add the Call to Action widget to content area Setup style as mockup The most important part is
How to? Create section and don’t forget to add specific CSS ID Add the CSS & JS below to header
How to? This table built with pure HTML via HTML widget so what you have to do is copy the
How to? Create header section as usual Drag Heading widget into the content area Click at the Dynamic Tags icon
How to? Action Links is a feature that allow you to bind some special actions in to your CTA button.
How to? Add Call to Action widget to the content area and add a class to the box Style the
How to? Build up floating CTA with the HTML code below Paste the CSS code to control style HTML: Employee
How to? Add the Accordion widget to the content area Put the Javascript code below to force the first accordion
How to? Add button widget in your content area Go to Advanced > Positioning and inherit all settings below (you
How to? Assuming that you already create a header section with a specific class name To make the section stick
How to? Create any section and put the class on it to make it easy to target Add CSS below
How to? Create an Elementor’s popup by go to the Templates > Popup from the WordPress dashboard Set its position
How to? Create a testimonial section as a template and note down the shortcode of each sections Add CSS and
How to? Activate Ultimate Addons for Elementor plugin and activate the Navigation Widget (you may find the setting under Settings
How to? Activate Ultimate Addons for Elementor plugin and activate Timeline widget Add Timeline widget to the content area Customize
How to? Add Hotspot widget to the content area You may add CSS to the background if needed Example: Mokka
Page example: https://www.invendagroup.com/about-us/ NOTE: As we’ve experienced a lot of issues with The Plus add-on, we decided not to use
How to? On WordPress dashboard go to Template > Theme Builder > Archive > Add New, select Archive from the
How to? Download these files dattorto.css bootstrap-grid.css vue.min.js dattorto.js Add CSS files and custom code below to head , add
How to? Add button widget to the content area and add specific class into it Copy CSS below to the
How to? Activate Ultimate Addons for Elementor plugin Add Before After Slider widget as a section template, this will be
How to? Download the template file below Create Testimonial as a new custom post type and add content testimonial body
For reference only, please don’t use it on real project NOTE: As we’ve experience a lot of issue from The
There were many ways to achieve the Read More/See Less content revealing widget. Please choose what is the best for
How to? Put the Icon Box widget in to the section Use SVG file as an icon Change Icon Box
How to? Create new section Add background image and setup these values background-position: center center; background-attachment: scroll; background-repeat: no-repeat; background-size:
How to? Use Elementor’s Flip box widget Set Motion Effects > Mouse Effects > 3D Tilt If you wanted to
Elementor Popup cause Gravity form style to display incorrectly if we have more than one popup form on the same
To enhance user experience and make the webpage looks more friendly to a user it’s good to have a Thank
How to? Use Flip box and custom css to add number circle on the top right Set Vertical Align to