Skip to content

Commit 3393331

Browse files
rosinghalrosinghal
committed
Initial commit
0 parents  commit 3393331

12 files changed

Lines changed: 529 additions & 0 deletions

‎assets/banner-772x250.png‎

60.7 KB
Loading

‎assets/screenshot-1.JPG‎

15.6 KB
Loading

‎assets/screenshot-2.JPG‎

71.5 KB
Loading

‎assets/screenshot-3.JPG‎

53.8 KB
Loading

‎assets/screenshot-4.JPG‎

36.7 KB
Loading

‎assets/screenshot-5.JPG‎

33.9 KB
Loading

‎assets/screenshot-6.JPG‎

34.8 KB
Loading

‎elementify-visual-widgets.php‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<?php
2+
/**
3+
* Plugin Name: Elementify Visual Widgets
4+
* Description: The Elementify Visual Widgets plugin you install after Elementor! Packed with stunning free elements.
5+
* Plugin URI: https://astoundify.com/products/elementify-visual-widgets
6+
* Author: Astoundify
7+
* Version: 1.0.0
8+
* Author URI: https://astoundify.com/
9+
* Text Domain: elementify-visual-widgets
10+
* Domain Path: /languages
11+
* Elementor tested up to: 3.2.4
12+
* Elementor Pro tested up to: 3.2.2
13+
*/
14+
15+
if ( !defined( 'ABSPATH' ) ) {
16+
exit;
17+
} // Exit if accessed directly
18+
19+
/**
20+
* Defining plugin constants.
21+
*
22+
* @since 1.0.0
23+
*/
24+
25+
define( 'EVW_PLUGIN_PATH', trailingslashit( plugin_dir_path( __FILE__ ) ) );
26+
27+
/**
28+
* Load Plugin Text Domain.
29+
*
30+
* @since 1.0.0
31+
*/
32+
33+
load_plugin_textdomain( 'elementify-visual-widgets' );
34+
35+
/**
36+
* Including elementor elements
37+
*
38+
* @since 1.0.0
39+
*/
40+
41+
if( !function_exists( 'evw_load_elementor_widget' ) ) {
42+
43+
function evw_load_elementor_widget() {
44+
require_once EVW_PLUGIN_PATH . 'includes/elementor-elements/features.php';
45+
}
46+
47+
}
48+
add_action( 'elementor/widgets/widgets_registered', 'evw_load_elementor_widget' );

‎includes/elementor-elements/features-output.php‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
<!--******* Features Widget Section *******-->
2+
<section id="overview" class="landing-development-process">
3+
<div class="container">
4+
<span>
5+
<div data-reactroot="" class="process-timeline">
6+
<div class="pt-timeline">
7+
<div class="pt-timeline-backside-bar">
8+
<div class="pt-timeline-frontside-bar" style="width: 67%;"></div>
9+
</div>
10+
</div>
11+
<div class="pt-action-bar">
12+
<?php $tab_count = 1; ?>
13+
<?php foreach( $settings['tabs'] as $tab ): ?>
14+
<?php $btn_class = ( $tab_count == 1 ) ? ' pt-action-bar-button--active' : ''; ?>
15+
<button class="pt-action-bar-button<?php echo esc_attr($btn_class); ?>">
16+
<div class="pt-action-bar-button-background-number">0<?php echo esc_attr( $tab_count ); ?></div>
17+
<div class="pt-action-bar-button-icon">
18+
<div class="pt-action-bar-button-icon-inner-ring-1"></div>
19+
<div class="pt-action-bar-button-icon-inner-ring-2"></div>
20+
<div class="pt-action-bar-button-icon-inner-ring-3"></div>
21+
<div class="pt-action-bar-button-icon-inner-ring-4"></div>
22+
<div class="pt-action-bar-button-icon-inner-ring-5"></div>
23+
<div class="pt-action-bar-button-icon-inner-ring-6"></div>
24+
</div>
25+
<div class="pt-action-bar-button-title"><?php echo esc_attr( $tab['title'] ); ?></div>
26+
<div class="pt-action-bar-button-text"><?php echo wp_kses_post( $tab['content'] ); ?></div>
27+
</button>
28+
<?php $tab_count++; ?>
29+
<?php endforeach; ?>
30+
</div>
31+
</div>
32+
</span>
33+
</div>
34+
</section>
35+
36+
<!--******* Features Widget CSS *******-->
37+
<style>
38+
.process-timeline {
39+
position: relative;
40+
}
41+
42+
.process-timeline .pt-timeline {
43+
top: 57px;
44+
left: 85px;
45+
right: 85px;
46+
position: absolute;
47+
display: none;
48+
height: 1px;
49+
}
50+
51+
.process-timeline .pt-timeline-backside-bar {
52+
height: 1px;
53+
background-color: #ebebeb;
54+
}
55+
.process-timeline .pt-timeline-frontside-bar {
56+
width: 0;
57+
height: 1px;
58+
top: 0;
59+
left: 0;
60+
position: absolute;
61+
background-color: #00d563;
62+
transition: width .4s ease;
63+
}
64+
65+
.process-timeline .pt-action-bar {
66+
display: flex;
67+
flex-direction: column;
68+
align-items: center;
69+
}
70+
71+
.process-timeline .pt-action-bar-button {
72+
position: relative;
73+
align-items: center;
74+
background: none;
75+
border: 0;
76+
display: flex;
77+
flex-direction: column;
78+
margin: 0;
79+
outline: none;
80+
padding: 0;
81+
width: 170px;
82+
}
83+
.process-timeline .pt-action-bar-button-background-number {
84+
top: 0;
85+
left: 50%;
86+
position: absolute;
87+
color: #ebebeb;
88+
font-weight: 800;
89+
font-size: 100px;
90+
line-height: 1em;
91+
transition: top .4s ease;
92+
opacity: .3;
93+
transform: translateX(-50%);
94+
}
95+
.process-timeline .pt-action-bar-button-icon {
96+
width: 114px;
97+
height: 114px;
98+
position: relative;
99+
margin: 0 auto;
100+
}
101+
.process-timeline .pt-action-bar-button-icon-inner-ring-1 {
102+
width: 114px;
103+
height: 114px;
104+
top: 0;
105+
left: 0;
106+
position: absolute;
107+
border: 1px solid #ebebeb;
108+
border-radius: 100px;
109+
opacity: .2;
110+
transform: scale(0);
111+
transition: transform .4s ease;
112+
}
113+
.process-timeline .pt-action-bar-button-icon-inner-ring-2 {
114+
width: 84px;
115+
height: 84px;
116+
left: 15px;
117+
position: absolute;
118+
top: 15px;
119+
border: 1px solid #ebebeb;
120+
border-radius: 100px;
121+
opacity: .5;
122+
transform: scale(0);
123+
transition: transform .4s ease;
124+
}
125+
.process-timeline .pt-action-bar-button-icon-inner-ring-3 {
126+
width: 54px;
127+
height: 54px;
128+
left: 30px;
129+
position: absolute;
130+
top: 30px;
131+
border: 1px solid #ebebeb;
132+
border-radius: 100px;
133+
opacity: .8;
134+
transform: scale(0);
135+
transition: transform .4s ease;
136+
}
137+
.process-timeline .pt-action-bar-button-icon-inner-ring-4 {
138+
box-shadow: 0 4px 8px 0 rgba(0,213,98,.4);
139+
opacity: 0;
140+
transition: opacity .4s ease;
141+
}
142+
.process-timeline .pt-action-bar-button-icon-inner-ring-4, .process-timeline .pt-action-bar-button-icon-inner-ring-5 {
143+
width: 26px;
144+
height: 26px;
145+
left: 44px;
146+
position: absolute;
147+
top: 44px;
148+
background-color: #00d563;
149+
border: 6px solid #00d563;
150+
border-radius: 100px;
151+
}
152+
153+
.process-timeline .pt-action-bar-button-icon-inner-ring-5 {
154+
transform: scale(.5);
155+
transition: transform .4s ease;
156+
}
157+
.process-timeline .pt-action-bar-button-icon-inner-ring-6 {
158+
width: 14px;
159+
height: 14px;
160+
left: 50px;
161+
position: absolute;
162+
top: 50px;
163+
background-color: #fff;
164+
border-radius: 100px;
165+
transform: scale(0);
166+
transition: transform .2s ease;
167+
}
168+
.process-timeline .pt-action-bar-button-title {
169+
top: -20px;
170+
position: relative;
171+
font-weight: 500;
172+
font-size: 18px;
173+
line-height: 24px;
174+
transition: color .4s ease;
175+
}
176+
177+
.process-timeline .pt-action-bar-button-text {
178+
color: #888;
179+
font-size: 14px;
180+
line-height: 24px;
181+
transition: opacity .4s ease;
182+
}
183+
@media (min-width: 768px) {
184+
.process-timeline .pt-action-bar-button--active .pt-action-bar-button-icon-inner-ring-4 {
185+
opacity: 1;
186+
}
187+
.process-timeline .pt-action-bar-button--active .pt-action-bar-button-icon-inner-ring-1, .process-timeline .pt-action-bar-button--active .pt-action-bar-button-icon-inner-ring-2, .process-timeline .pt-action-bar-button--active .pt-action-bar-button-icon-inner-ring-3, .process-timeline .pt-action-bar-button--active .pt-action-bar-button-icon-inner-ring-5, .process-timeline .pt-action-bar-button--active .pt-action-bar-button-icon-inner-ring-6 {
188+
transform: scale(1);
189+
}
190+
.process-timeline .pt-action-bar {
191+
position: relative;
192+
flex-direction: row;
193+
align-items: flex-start;
194+
justify-content: space-between;
195+
}
196+
.process-timeline .pt-timeline {
197+
display: block;
198+
}
199+
.process-timeline .pt-action-bar-button-title {
200+
color: #ccc;
201+
}
202+
.process-timeline .pt-action-bar-button-text {
203+
opacity: 0;
204+
}
205+
.process-timeline .pt-action-bar-button--active .pt-action-bar-button-text {
206+
opacity: 1;
207+
}
208+
.process-timeline .pt-action-bar-button--active .pt-action-bar-button-background-number {
209+
top: -60px;
210+
}
211+
}
212+
</style>
213+
214+
<!--******* Features Widget JS *******-->
215+
<script>
216+
jQuery(document).ready(function($){
217+
var btn_count = $('.pt-action-bar-button').length
218+
var percent = (100/(btn_count-1));
219+
220+
$('.pt-action-bar').on('click', '.pt-action-bar-button', function(e){
221+
e.preventDefault();
222+
223+
var mydiv = $('.pt-timeline-frontside-bar');
224+
var index = ( $(this).index() );
225+
mydiv.css('width', (index*percent)+'%');
226+
$('.pt-action-bar').find('.pt-action-bar-button').removeClass('pt-action-bar-button--active');
227+
$(this).addClass('pt-action-bar-button--active');
228+
});
229+
});
230+
</script>
231+
232+
233+
234+

0 commit comments

Comments
 (0)