<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.clicktoshow').each(function(i){
$(this).click(function(){ $('.showclick').eq(i).show();
$('.clicktoshow').eq(i).hide();
}); });
}); });
</script>
<style>
.clicktoshow{
cursor: pointer;
}
.showclick{
display: none;
}
</style>
Category: Elementor
Eelementor Accordion close by default
<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
$('.elementor-tab-content').css('display', 'none'); }, delay);
});
</script>
OR
<script>
jQuery(window).on('load', function () {
jQuery('.elementor-tab-title').removeClass('elementor-active');
jQuery('.elementor-tab-content').css('display', 'none');
});
</script>
Hide Dashboard and Elementor for Subscribers
//Hide Dashboard and Elementor for Subscribers
function remove_menus() {
if( current_user_can('client') && is_admin()) {
remove_menu_page( 'index.php' ); //Dashboard
remove_menu_page( 'edit.php?post_type=elementor_library' ); //Elementor Templates
}
}
add_action( 'admin_menu', 'remove_menus' );
Elementor Age gate verification
document.getElementById("dateofbirthsubmit").addEventListener('click',function ()
{
var dateString = document.getElementById('form-field-dateofbirth').value;
if(dateString !=='')
{
var today = new Date();
var birthDate = new Date(dateString);
var age = today.getFullYear() - birthDate.getFullYear();
if(age < 18 || age > Infinity)
{
elementorProFrontend.modules.popup.showPopup( {id:50}, event);
event.preventDefault();
}
}
else
{
alert("You must provide your date of birth!");
}
} );
Hide plugins update notification
function filter_plugin_updates( $value ) {
unset( $value->response['elementor/elementor.php'] );
return $value;
}
add_filter( 'site_transient_update_plugins', 'filter_plugin_updates' );
function filter_plugin_updates_pro( $value ) {
unset( $value->response['elementor-pro/elementor-pro.php'] );
return $value;
}
add_filter( 'site_transient_update_plugins', 'filter_plugin_updates_pro' );
Elementor read more toggle button
Add class readmoretoggle
body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active{
display: none;
}
body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active{
display: none;
}
.readmoretoggle .elementor-toggle .elementor-tab-title {
display: flex;
justify-content: center;
}
body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active{
display: none;
}
/* button styling below */
.readmoretoggle .elementor-tab-title a{
display:inline-block;
padding:0.4em 1.6em;
margin:0.14em 0 ;
border:0.16em solid rgba(0,0,0,0);
border-radius:2em;
font-weight:300;
color:rgba(255,255,255,0.9); /* button text color */
text-align:center;
background-color: rgba(0,0,0,.71); /* button color */
transition: all 0.34s ease;
}
/* hover button styling */
.readmoretoggle .elementor-tab-title a:hover{
color:rgba(255,255,255,1); /* change color of text when hovering */
transform: scale(1.03); /* delete to remove the zoom in effect */
}
.readmoretoggle .elementor-tab-title.elementor-active::before {
content: 'Read Less';
font-family:roboto;
font-weight: 400;
font-size: 16px;
color: #000000;
}
.readmoretoggle .elementor-toggle-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column-reverse;
}
.readmoretoggle .elementor-tab-title.elementor-active a{
display:none;
}
body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active {
display: block !important;
}
body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active {
display: flex;
justify-content: center;
}
#elementor-tab-title-1611 {
text-align: center;
}
Elementor blog post texts on hover
Style must be card style. Add the below css with custom class called .custom_post_brand
.custom_post_brand .elementor-post__card {
position: relative;
}
.custom_post_brand .elementor-post__text {
position: absolute;
top: 25%;
left: 0;
z-index: 555;
visibility: hidden;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
opacity: 0; height: 0;
}
.custom_post_brand a.elementor-post__thumbnail__link {
background: #000;
z-index: 5;
margin-bottom: 0px;
}
.custom_post_brand .elementor-post__card:hover:before {
content: "";
position: absolute;
top: 0;
left: 0;
background: #000;
width: 100%;
height: 100%;
z-index: 55;
}
.custom_post_brand .elementor-post__card:hover .elementor-post__text {
display: block !important;
visibility: visible;
opacity:1;
height: auto;
}
.custom_post_brand .elementor-post__badge {
position: absolute;
left: 0;
right: 0;
margin:0 auto !important;
width: 250px;
top: 20px !important;
}
.custom_post_brand .elementor-post__card:hover .elementor-post__badge{
display: block;
z-index: 555555;
}
.custom_post_brand a.elementor-post__read-more {
padding: 5px 10px;
background: #32D4B2;
color: #fff !important;
}
Elementor menu Iocn on hover
First add <i class=”fa fa-star”></i>Home to the menu.
Then add this CSS
.main-nav-menu-hc img{
opacity:0;
transform:rotate(180deg);
margin-right:3px;
transition:0.3s ease;
}
.main-nav-menu-hc .elementor-item:hover> img,
.main-nav-menu-hc .elementor-nav-menu--dropdown a:hover>img
{
opacity:1;
transform:rotate(0deg);
}
.main-nav-menu-hc .main-nav-menu-hc .elementor-item {
color: #4b68ad;
padding-left: 10px;
padding-right: 10px;
}
.main-nav-menu-hc .elementor-nav-menu--main .elementor-item {
color: #4b68ad;
padding-left: 10PX;
padding-right: 10px;
}
.main-nav-menu-hc .elementor-nav-menu--dropdown a>img{
display:inline-block;
color:#f5c826;
transform:rotate(180deg);
margin-right:3px;
opacity:0;
transition:0.3s ease;
}
.main-nav-menu-hc .elementor-nav-menu--dropdown a{
text-align:left;
display:inline-block;
width:100%;
}
@media (max-width:1024px){
.hc-mobile-menu .elementor img,
.hc-mobile-menu .elementor-nav-menu--dropdown a>img{
display:none !important;
}
.hc-mobile-menu .elementor-nav-menu--dropdown a{
text-align:left;
display:inline-block;
width:100%;
}
}
Creating an Elementor New Widget
<?php
class Elementor_oEmbed_Widget extends \Elementor\Widget_Base {
public function get_name() {
return 'oembed';
}
public function get_title() {
return __( 'oEmbed', 'plugin-name' );
}
public function get_icon() {
return 'fa fa-code';
}
public function get_categories() {
return [ 'general' ];
}
protected function _register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => __( 'Content', 'plugin-name' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'url',
[
'label' => __( 'URL to embed', 'plugin-name' ),
'type' => \Elementor\Controls_Manager::TEXT,
'input_type' => 'url',
'placeholder' => __( 'https://your-link.com', 'plugin-name' ),
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
$html = wp_oembed_get( $settings['url'] );
echo '<div class="oembed-elementor-widget">Your type url is '.$settings['url'].'</div>';
}
}
Creating an Extension for Elementor
<?php
/**
* Plugin Name: Helocon Elementor widget
* Description: Helocon Custom Elementor extension.
* Plugin URI: https://elementor.com/
* Version: 1.0.0
* Author: Raju S.
* Author URI: https://helocon.com/
* Text Domain: helocon-extension
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
final class helocon_Extension {
const VERSION = '1.0.0';
const MINIMUM_ELEMENTOR_VERSION = '2.0.0';
const MINIMUM_PHP_VERSION = '5.6';
private static $_instance = null;
public static function instance() {
if ( is_null( self::$_instance ) ) {
self::$_instance = new self();
}
return self::$_instance;
}
public function __construct() {
add_action( 'init', [ $this, 'i18n' ] );
add_action( 'plugins_loaded', [ $this, 'init' ] );
}
public function i18n() {
load_plugin_textdomain( 'helocon-extension' );
}
public function init() {
if ( ! did_action( 'elementor/loaded' ) ) {
add_action( 'admin_notices', [ $this, 'admin_notice_missing_main_plugin' ] );
return;
}
if ( ! version_compare( ELEMENTOR_VERSION, self::MINIMUM_ELEMENTOR_VERSION, '>=' ) ) {
add_action( 'admin_notices', [ $this, 'admin_notice_minimum_elementor_version' ] );
return;
}
if ( version_compare( PHP_VERSION, self::MINIMUM_PHP_VERSION, '<' ) ) {
add_action( 'admin_notices', [ $this, 'admin_notice_minimum_php_version' ] );
return;
}
add_action( 'elementor/widgets/widgets_registered', [ $this, 'init_widgets' ] );
}
public function admin_notice_missing_main_plugin() {
if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );
$message = sprintf(
esc_html__( '"%1$s" requires "%2$s" to be installed and activated.', 'elementor-test-extension' ),
'<strong>' . esc_html__( 'Elementor Test Extension', 'elementor-test-extension' ) . '</strong>',
'<strong>' . esc_html__( 'Elementor', 'elementor-test-extension' ) . '</strong>'
);
printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );
}
public function admin_notice_minimum_elementor_version() {
if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );
$message = sprintf(
esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'elementor-test-extension' ),
'<strong>' . esc_html__( 'Elementor Test Extension', 'elementor-test-extension' ) . '</strong>',
'<strong>' . esc_html__( 'Elementor', 'elementor-test-extension' ) . '</strong>',
self::MINIMUM_ELEMENTOR_VERSION
);
printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );
}
public function admin_notice_minimum_php_version() {
if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] );
$message = sprintf(
esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'elementor-test-extension' ),
'<strong>' . esc_html__( 'Elementor Test Extension', 'elementor-test-extension' ) . '</strong>',
'<strong>' . esc_html__( 'PHP', 'elementor-test-extension' ) . '</strong>',
self::MINIMUM_PHP_VERSION
);
printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );
}
public function init_widgets() {
require_once( __DIR__ . '/widgets/test-widget.php' );
\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \Elementor_Test_Widget() );
}
}
helocon_Extension::instance();