Prosellers Shell V2.0

Editing: extras.php

Cancel

<?php
	$layout_query = array(
	'post_type'=>'et_pb_layout',
	'posts_per_page'=>-1,
	'meta_query' => array(
		array(
		'key' => '_et_pb_predefined_layout',
		'compare' => 'NOT EXISTS')
		)
	);
	$popups = array("1","2","3","4","5");

$dtb_enable_popup_val = dtb_get_option('dtb_enable_popup');
	$dtb_enable_typing_val = dtb_get_option('dtb_enable_typing');
	$dtb_popup_number_val = dtb_get_option('dtb_popup_number');
	$dtb_popup1_layout_val = dtb_get_option('dtb_popup1_layout');
	$dtb_popup2_layout_val = dtb_get_option('dtb_popup2_layout');
	$dtb_popup3_layout_val = dtb_get_option('dtb_popup3_layout');
	$dtb_popup4_layout_val = dtb_get_option('dtb_popup4_layout');
	$dtb_popup5_layout_val = dtb_get_option('dtb_popup5_layout');
	$dtb_preloader_val = dtb_get_option('dtb_preloader');
	$dtb_preloader_home_val = dtb_get_option('dtb_preloader_home');
	$dtb_preloader_type_val = dtb_get_option('dtb_preloader_type');
	$dtb_preloader_effect_val = dtb_get_option('dtb_preloader_effect');
	$dtb_preloader_speed_val = dtb_get_option('dtb_preloader_speed');
	$dtb_enable_particles_val = dtb_get_option('dtb_enable_particles');
	$dtb_enable_tilt_val = dtb_get_option('dtb_enable_tilt');
	$dtb_enable_rellax_val = dtb_get_option('dtb_enable_rellax');
	$dtb_rellax_mobile_off_val = dtb_get_option('dtb_rellax_mobile_off');
	$dtb_rellax_center_val = dtb_get_option('dtb_rellax_center');
	$dtb_custom_preloader_image_val = dtb_get_option('dtb_custom_preloader_image');
	$dtb_custom_preloader_image_url_val = dtb_get_option('dtb_custom_preloader_image_url');
	$dtb_custom_preloader_image_alt_val = dtb_get_option('dtb_custom_preloader_image_alt');
?>
<div id="extras" class="tool <?php echo $active_tab == 'extras' ? 'tool-active' : ''; ?>">
	
	<h2 class="tool-section"><?php _e('Typing Effect', 'divi-toolbox'); ?></h2>
	
	<div class="toolbox trigger">
		<div class="box-title">
			<h3><?php _e('Enable Typing Effect', 'divi-toolbox'); ?></h3>
			<div class="box-descr"><p><?php _e('This options adds a typing effect, which you can use in Divi Builder modules.', 'divi-toolbox'); ?></p></div>
		</div>
		<div class="box-content minibox trigger-hide">
			<div class="checkbox">
				<input name="dtb_enable_typing" type="checkbox" value="1" <?php checked( '1', $dtb_enable_typing_val ); ?> />
			</div>
		</div>
	</div>
	<div class="hide">
		<div class="toolbox first">
			<div class="box-title">
			</div>
			<div class="box-content">
				<div class="info">
					<h4><?php _e('How to use the Typing Effect?', 'divi-toolbox'); ?></h4>
					<p>
						<?php echo __('The effect works inside the Text Modules.', 'divi-toolbox'); ?>
						<br/><br/><?php _e('Navigate to Text Module Setting → Advanced tab → CSS ID & Classes → CSS Class and add a&nbsp;custom class of:', 'divi-toolbox'); ?> <strong>dtb-typing</strong><br/><br/><?php _e('', 'divi-toolbox'); ?><?php printf(esc_html__('You can customize the effect parameters in the %s', 'divi-toolbox'), "<a href=".admin_url( 'customize.php?autofocus[section]=dtb_tilt' )." target=_blank>". __('Toolbox Customizer', 'divi-toolbox') ."</a>"); ?>.</p>
				</div>
			</div>
		</div>
		
	</div>

<?php		
		// Store layouts views in array
		$preloaders = array(
			'preloader1' => array(
				'name' => 'preloader1',
				'value' =>
					'<svg class="preloader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path d="M10 40v-1.1-1.3-.8c0-.3.1-.6.1-.9.1-.6.1-1.4.2-2.1.2-.8.3-1.6.5-2.5.2-.9.6-1.8.8-2.8.3-1 .8-1.9 1.2-3 .5-1 1.1-2 1.7-3.1.7-1 1.4-2.1 2.2-3.1 1.6-2.1 3.7-3.9 6-5.6 2.3-1.7 5-3 7.9-4.1.7-.2 1.5-.4 2.2-.7.7-.3 1.5-.3 2.3-.5.8-.2 1.5-.3 2.3-.4l1.2-.1.6-.1h.6c1.5 0 2.9-.1 4.5.2.8.1 1.6.1 2.4.3.8.2 1.5.3 2.3.5 3 .8 5.9 2 8.5 3.6 2.6 1.6 4.9 3.4 6.8 5.4 1 1 1.8 2.1 2.7 3.1.8 1.1 1.5 2.1 2.1 3.2.6 1.1 1.2 2.1 1.6 3.1.4 1 .9 2 1.2 3 .3 1 .6 1.9.8 2.7.2.9.3 1.6.5 2.4.1.4.1.7.2 1 0 .3.1.6.1.9.1.6.1 1 .1 1.4.4 1 .4 1.4.4 1.4.2 2.2-1.5 4.1-3.7 4.3s-4.1-1.5-4.3-3.7v-.7-.9-1.1-.7c0-.2-.1-.5-.1-.8-.1-.6-.1-1.2-.2-1.9s-.3-1.4-.4-2.2c-.2-.8-.5-1.6-.7-2.4-.3-.8-.7-1.7-1.1-2.6-.5-.9-.9-1.8-1.5-2.7-.6-.9-1.2-1.8-1.9-2.7-1.4-1.8-3.2-3.4-5.2-4.9-2-1.5-4.4-2.7-6.9-3.6-.6-.2-1.3-.4-1.9-.6-.7-.2-1.3-.3-1.9-.4-1.2-.3-2.8-.4-4.2-.5h-2c-.7 0-1.4.1-2.1.1-.7.1-1.4.1-2 .3-.7.1-1.3.3-2 .4-2.6.7-5.2 1.7-7.5 3.1-2.2 1.4-4.3 2.9-6 4.7-.9.8-1.6 1.8-2.4 2.7-.7.9-1.3 1.9-1.9 2.8-.5 1-1 1.9-1.4 2.8-.4.9-.8 1.8-1 2.6-.3.9-.5 1.6-.7 2.4-.2.7-.3 1.4-.4 2.1-.1.3-.1.6-.2.9 0 .3-.1.6-.1.8 0 .5-.1.9-.1 1.3-.2.7-.2 1.1-.2 1.1z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 40 40" to="360 40 40" dur="1.5s" repeatCount="indefinite"/></path></svg>'
		
			),
			'preloader2' => array(
				'name' => 'preloader2',
				'value' => 
					'<svg class="preloader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path d="M10 40v-1.1-1.3-.8c0-.3.1-.6.1-.9.1-.6.1-1.4.2-2.1.2-.8.3-1.6.5-2.5.2-.9.6-1.8.8-2.8.3-1 .8-1.9 1.2-3 .5-1 1.1-2 1.7-3.1.7-1 1.4-2.1 2.2-3.1 1.6-2.1 3.7-3.9 6-5.6 2.3-1.7 5-3 7.9-4.1.7-.2 1.5-.4 2.2-.7.7-.3 1.5-.3 2.3-.5.8-.2 1.5-.3 2.3-.4l1.2-.1.6-.1h.6c1.5 0 2.9-.1 4.5.2.8.1 1.6.1 2.4.3.8.2 1.5.3 2.3.5 3 .8 5.9 2 8.5 3.6 2.6 1.6 4.9 3.4 6.8 5.4 1 1 1.8 2.1 2.7 3.1.8 1.1 1.5 2.1 2.1 3.2.6 1.1 1.2 2.1 1.6 3.1.4 1 .9 2 1.2 3 .3 1 .6 1.9.8 2.7.2.9.3 1.6.5 2.4.1.4.1.7.2 1 0 .3.1.6.1.9.1.6.1 1 .1 1.4.4 1 .4 1.4.4 1.4.2 2.2-1.5 4.1-3.7 4.3s-4.1-1.5-4.3-3.7v-.7-.9-1.1-.7c0-.2-.1-.5-.1-.8-.1-.6-.1-1.2-.2-1.9s-.3-1.4-.4-2.2c-.2-.8-.5-1.6-.7-2.4-.3-.8-.7-1.7-1.1-2.6-.5-.9-.9-1.8-1.5-2.7-.6-.9-1.2-1.8-1.9-2.7-1.4-1.8-3.2-3.4-5.2-4.9-2-1.5-4.4-2.7-6.9-3.6-.6-.2-1.3-.4-1.9-.6-.7-.2-1.3-.3-1.9-.4-1.2-.3-2.8-.4-4.2-.5h-2c-.7 0-1.4.1-2.1.1-.7.1-1.4.1-2 .3-.7.1-1.3.3-2 .4-2.6.7-5.2 1.7-7.5 3.1-2.2 1.4-4.3 2.9-6 4.7-.9.8-1.6 1.8-2.4 2.7-.7.9-1.3 1.9-1.9 2.8-.5 1-1 1.9-1.4 2.8-.4.9-.8 1.8-1 2.6-.3.9-.5 1.6-.7 2.4-.2.7-.3 1.4-.4 2.1-.1.3-.1.6-.2.9 0 .3-.1.6-.1.8 0 .5-.1.9-.1 1.3-.2.7-.2 1.1-.2 1.1z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 40 40" to="360 40 40" dur="0.8s" repeatCount="indefinite"/></path><path d="M62 40.1s0 .2-.1.7c0 .2 0 .5-.1.8v.5c0 .2-.1.4-.1.7-.1.5-.2 1-.3 1.6-.2.5-.3 1.1-.5 1.8-.2.6-.5 1.3-.7 1.9-.3.7-.7 1.3-1 2.1-.4.7-.9 1.4-1.4 2.1-.5.7-1.1 1.4-1.7 2-1.2 1.3-2.7 2.5-4.4 3.6-1.7 1-3.6 1.8-5.5 2.4-2 .5-4 .7-6.2.7-1.9-.1-4.1-.4-6-1.1-1.9-.7-3.7-1.5-5.2-2.6s-2.9-2.3-4-3.7c-.6-.6-1-1.4-1.5-2-.4-.7-.8-1.4-1.2-2-.3-.7-.6-1.3-.8-2l-.6-1.8c-.1-.6-.3-1.1-.4-1.6-.1-.5-.1-1-.2-1.4-.1-.9-.1-1.5-.1-2v-.7s0 .2.1.7c.1.5 0 1.1.2 2 .1.4.2.9.3 1.4.1.5.3 1 .5 1.6.2.6.4 1.1.7 1.8.3.6.6 1.2.9 1.9.4.6.8 1.3 1.2 1.9.5.6 1 1.3 1.6 1.8 1.1 1.2 2.5 2.3 4 3.2 1.5.9 3.2 1.6 5 2.1 1.8.5 3.6.6 5.6.6 1.8-.1 3.7-.4 5.4-1 1.7-.6 3.3-1.4 4.7-2.4 1.4-1 2.6-2.1 3.6-3.3.5-.6.9-1.2 1.3-1.8.4-.6.7-1.2 1-1.8.3-.6.6-1.2.8-1.8.2-.6.4-1.1.5-1.7l.3-1.5c.1-.4.1-.8.1-1.2 0-.2 0-.4.1-.5v-.5-.8-.7c0-1.1.9-2 2-2s2 .9 2 2c.1-.1.1 0 .1 0z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 40 40" to="-360 40 40" dur="0.6s" repeatCount="indefinite"/></path></svg>'
			),	
			'preloader3' => array(
				'name' => 'preloader3',
				'value' => 
					'<svg class="preloader" xmlns="http://www.w3.org/2000/svg" viewBox="2 2 35 35"><path opacity=".3" d="M20.201 5.169c-8.254 0-14.946 6.692-14.946 14.946 0 8.255 6.692 14.946 14.946 14.946s14.946-6.691 14.946-14.946c-.001-8.254-6.692-14.946-14.946-14.946zm0 26.58c-6.425 0-11.634-5.208-11.634-11.634 0-6.425 5.209-11.634 11.634-11.634 6.425 0 11.633 5.209 11.633 11.634 0 6.426-5.208 11.634-11.633 11.634z"/><path d="M26.013 10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012v3.312c2.119 0 4.1.576 5.812 1.566z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1s" repeatCount="indefinite"/></path></svg>'
			),	
			'preloader4' => array(
				'name' => 'preloader4',
				'value' => 
					'<svg class="preloader" xmlns="http://www.w3.org/2000/svg" viewBox="0 15 56 70"><circle cx="8" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin=".1"/></circle><circle cx="28" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin=".2"/></circle><circle cx="48" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin=".3"/></circle></svg>'
			),	
			'preloader5' => array(
				'name' => 'preloader5',
				'value' => 
					'<svg class="preloader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect class="none" fill="none"  stroke-width="4" x="25" y="25" width="50" height="50"><animateTransform attributeName="transform" dur="0.5s" from="0 50 50" to="180 50 50" type="rotate" id="b" attributeType="XML" begin="a.end"/></rect><rect x="27" y="27" width="46" height="50"><animate attributeName="height" dur="1.3s" attributeType="XML" from="50" to="0" id="a" fill="freeze" begin="0s;b.end"/></rect></svg>'
			),	
			'preloader6' => array(
				'name' => 'preloader6',
				'value' => 
					'<svg class="preloader" xmlns="http://www.w3.org/2000/svg" viewBox="-15 25 100 100"><rect x="16" y="50" width="8" height="20"><animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0" dur="0.8s" repeatCount="indefinite"/></rect><rect x="30" y="50" width="8" height="20"><animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0.2s" dur="0.8s" repeatCount="indefinite"/></rect><rect x="44" y="50" width="8" height="20" ><animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0.4s" dur="0.8s" repeatCount="indefinite"/></rect></svg>'
			),	
			'preloader7' => array(
				'name' => 'preloader7',
				'value' => 
					'<svg class="preloader preloader7" width="70" height="70" xmlns="http://www.w3.org/2000/svg"><g class="none" fill-rule="evenodd" stroke-width="2"><circle cx="35" cy="35" r="1"><animate attributeName="r" begin="0s" dur="1.8s" values="1; 26" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite"/><animate attributeName="stroke-opacity" begin="0s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite"/></circle><circle cx="35" cy="35" r="1"><animate attributeName="r" begin="-0.9s" dur="1.8s" values="1; 26" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite"/><animate attributeName="stroke-opacity" begin="-0.9s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite"/></circle></g></svg>'
			),	
			'preloader8' => array(
				'name' => 'preloader8',
				'value' => 
					'<svg class="preloader" xmlns="http://www.w3.org/2000/svg" width="40" viewBox="0 0 24 30"><rect y="13" width="4" height="5"><animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s" repeatCount="indefinite"/><animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatCount="indefinite"/></rect><rect x="10" y="13" width="4" height="5"><animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatCount="indefinite"/><animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatCount="indefinite"/></rect><rect x="20" y="13" width="4" height="5" ><animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatCount="indefinite"/><animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatCount="indefinite"/></rect></svg>'
			),	
			'preloader9' => array(
				'name' => 'preloader9',
				'value' => 
					'<svg class="preloader" xmlns="http://www.w3.org/2000/svg" width="50" viewBox="0 0 40 30"><rect width="4" height="20"><animate attributeName="opacity" attributeType="XML" values="1; .2; 1" begin="0s" dur="0.6s" repeatCount="indefinite"/></rect><rect x="11" width="4" height="20"><animate attributeName="opacity" attributeType="XML" values="1; .2; 1" begin="0.2s" dur="0.6s" repeatCount="indefinite"/></rect><rect x="22" width="4" height="20"><animate attributeName="opacity" attributeType="XML" values="1; .2; 1" begin="0.4s" dur="0.6s" repeatCount="indefinite"/></rect></svg>'
			),	
			'preloader10' => array(
				'name' => 'preloader10',
				'value' => 
					'<svg class="preloader" width="60" viewBox="0 -10 80 60"><rect width="20" height="20" rx="3" ry="3"><animate attributeName="width" values="0;20;20;20;0" dur="1000ms" repeatCount="indefinite"/><animate attributeName="height" values="0;20;20;20;0" dur="1000ms" repeatCount="indefinite"/><animate attributeName="x" values="10;0;0;0;10" dur="1000ms" repeatCount="indefinite"/><animate attributeName="y" values="10;0;0;0;10" dur="1000ms" repeatCount="indefinite"/></rect><rect width="20" height="20" x="25" rx="3" ry="3"><animate attributeName="width" values="0;20;20;20;0" begin="200ms" dur="1000ms" repeatCount="indefinite"/><animate attributeName="height" values="0;20;20;20;0" begin="200ms" dur="1000ms" repeatCount="indefinite"/><animate attributeName="x" values="35;25;25;25;35" begin="200ms" dur="1000ms" repeatCount="indefinite"/><animate attributeName="y" values="10;0;0;0;10" begin="200ms" dur="1000ms" repeatCount="indefinite"/></rect><rect width="20" height="20" x="50" rx="3" ry="3"><animate attributeName="width" values="0;20;20;20;0" begin="400ms" dur="1000ms" repeatCount="indefinite"/><animate attributeName="height" values="0;20;20;20;0" begin="400ms" dur="1000ms" repeatCount="indefinite"/><animate attributeName="x" values="60;50;50;50;60" begin="400ms" dur="1000ms" repeatCount="indefinite"/><animate attributeName="y" values="10;0;0;0;10" begin="400ms" dur="1000ms" repeatCount="indefinite"/></rect></svg>'
			),	
			'preloader11' => array(
				'name' => 'preloader11',
				'value' => 
					'<svg class="preloader none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"style="background:0 0"><path class="none" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20c-19.3 0-32.1-40-51.4-40z" stroke-width="4" stroke-dasharray="159.085 97.504"><animate attributeName="stroke-dashoffset" calcMode="linear" values="0;256.58892822265625" keyTimes="0;1" dur="1" begin="0s" repeatCount="indefinite"/></path></svg>'
			),	
			'preloader12' => array(
				'name' => 'preloader12',
				'value' => 
					'<svg class="preloader nostroke" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><g transform="translate(80 50)"><circle r="6" transform="scale(1.21152)"><animateTransform attributeName="transform" type="scale" begin="-0.525s" values="1.8 1.8;1 1" keyTimes="0;1" dur="0.6s" repeatCount="indefinite"/><animate attributeName="fill-opacity" keyTimes="0;1" dur="0.6s" repeatCount="indefinite" values="1;0" begin="-0.525s"/></circle></g><g transform="rotate(45 -50.355 121.569)"><circle r="6" fill-opacity=".875" transform="scale(1.31152)"><animateTransform attributeName="transform" type="scale" begin="-0.44999999999999996s" values="1.8 1.8;1 1" keyTimes="0;1" dur="0.6s" repeatCount="indefinite"/><animate attributeName="fill-opacity" keyTimes="0;1" dur="0.6s" repeatCount="indefinite" values="1;0" begin="-0.44999999999999996s"/></circle></g><g transform="rotate(90 -15 65)"><circle r="6" fill-opacity=".75" transform="scale(1.41152)"><animateTransform attributeName="transform" type="scale" begin="-0.375s" values="1.8 1.8;1 1" keyTimes="0;1" dur="0.6s" repeatCount="indefinite"/><animate attributeName="fill-opacity" keyTimes="0;1" dur="0.6s" repeatCount="indefinite" values="1;0" begin="-0.375s"/></circle></g><g transform="rotate(135 -.355 41.569)"><circle r="6" fill-opacity=".625" transform="scale(1.51152)"><animateTransform attributeName="transform" type="scale" begin="-0.3s" values="1.8 1.8;1 1" keyTimes="0;1" dur="0.6s" repeatCount="indefinite"/><animate attributeName="fill-opacity" keyTimes="0;1" dur="0.6s" repeatCount="indefinite" values="1;0" begin="-0.3s"/></circle></g><g transform="rotate(180 10 25)"><circle r="6" fill-opacity=".5" transform="scale(1.61152)"><animateTransform attributeName="transform" type="scale" begin="-0.22499999999999998s" values="1.8 1.8;1 1" keyTimes="0;1" dur="0.6s" repeatCount="indefinite"/><animate attributeName="fill-opacity" keyTimes="0;1" dur="0.6s" repeatCount="indefinite" values="1;0" begin="-0.22499999999999998s"/></circle></g><g transform="rotate(-135 20.355 8.431)"><circle r="6" fill-opacity=".375" transform="scale(1.71152)"><animateTransform attributeName="transform" type="scale" begin="-0.15s" values="1.8 1.8;1 1" keyTimes="0;1" dur="0.6s" repeatCount="indefinite"/><animate attributeName="fill-opacity" keyTimes="0;1" dur="0.6s" repeatCount="indefinite" values="1;0" begin="-0.15s"/></circle></g><g transform="rotate(-90 35 -15)"><circle r="6" fill-opacity=".25" transform="scale(1.01152)"><animateTransform attributeName="transform" type="scale" begin="-0.075s" values="1.8 1.8;1 1" keyTimes="0;1" dur="0.6s" repeatCount="indefinite"/><animate attributeName="fill-opacity" keyTimes="0;1" dur="0.6s" repeatCount="indefinite" values="1;0" begin="-0.075s"/></circle></g><g transform="rotate(-45 70.355 -71.569)"><circle r="6" fill-opacity=".125" transform="scale(1.11152)"><animateTransform attributeName="transform" type="scale" begin="0s" values="1.8 1.8;1 1" keyTimes="0;1" dur="0.6s" repeatCount="indefinite"/><animate attributeName="fill-opacity" keyTimes="0;1" dur="0.6s" repeatCount="indefinite" values="1;0" begin="0s"/></circle></g></svg>'
			)	
		
		); ?>

<div class="toolbox" id='dtb_preloaders_list'>
			<div class="box-title">
				<h3><?php _e('Preloader Type', 'divi-toolbox'); ?></h3>
				<div class="box-descr"><p><?php printf(esc_html__("Choose the preloader image. You can ceasily change preloader colors in the %s", "divi-toolbox"), '<a href=' . admin_url( 'customize.php?autofocus[section]=dtb_preloader' ) . ' target=_blank>' . __('Toolbox Customizer', 'divi-toolbox') . '</a>' ); ?></p></div>							
			</div>
			<div class="box-content" >
				<div class="preloader-wrap">
				<?php foreach( $preloaders as $preloader ) : ?>
					<div class="preloader-item">
					<input type="radio"  name="dtb_preloader_type" value="<?php esc_attr_e( $preloader['name'], 'divi-toolbox' ); ?>" id="<?php esc_attr_e( $preloader['name'] ); ?>" <?php checked( $dtb_preloader_type_val, $preloader['name'] ); ?>  class="customradio"/>
					<label for="<?php echo $preloader['name']; ?>"><?php echo $preloader['value']; ?></label>
					</div>
				<?php endforeach;?>
				</div>
			</div>
		</div>
		<div class="toolbox trigger">
		<div class="box-title">
			<h3><?php _e('Use custom preloader image', 'divi-toolbox'); ?></h3>
			<div class="box-descr"><p><?php _e("Enable this if you'd like to show custom image as preloader.", "divi-toolbox"); ?></p></div>		
				
		</div>
		<div class="box-content minibox">
			<div class="checkbox">
				<input id="dtb_custom_preloader_image" name="dtb_custom_preloader_image" type="checkbox" value="1" <?php checked( '1', $dtb_custom_preloader_image_val ); ?> />
			</div>
		</div>
		</div>
		<div class="hide">
			<div class="toolbox first nopad">
				<div class="box-title">
				</div>
				<div class="box-content upload">
					<input class="background_image" type="text" name="dtb_custom_preloader_image_url" value="<?php echo $dtb_custom_preloader_image_url_val ?>" />
					<input class="upload_image_button btn" type="button" value="Choose Image" />
					
				<div class="clear">
					<?php $dtb_custom_preloader_image_alt = !empty($dtb_custom_preloader_image_alt_val) ? $dtb_custom_preloader_image_alt_val : __('', 'divi-toolbox'); ?>
					<input class="top10" type="text" name="dtb_custom_preloader_image_alt" value="<?php echo $dtb_custom_preloader_image_alt;?>"/>
					<p><?php _e('Define the ALT attribute of the preloader image.', "divi-toolbox"); ?></p>
				</div>
				</div>
			</div>
		</div>
		<div class="toolbox">
			<div class="box-title">
				<h3><?php _e('Preloader Page Transition Type', 'divi-toolbox'); ?></h3>
				<div class="box-descr"><p><?php _e('Choose animation effect for the preloader.', 'divi-toolbox'); ?></p></div>
			</div>
			<div class="box-content">
				<select name="dtb_preloader_effect">
					<option value="fadeOut" <?php selected( 'fadeOut', $dtb_preloader_effect_val ); ?>><?php _e('Fade Out', 'divi-toolbox'); ?></option>
					<option value="slideUp" <?php selected( 'slideUp', $dtb_preloader_effect_val ); ?>><?php _e('Slide Up', 'divi-toolbox'); ?></option>
				</select>
				
			</div>
		</div>
		<div class="toolbox">
			<div class="box-title">
				<h3><?php _e('Preloader Transition Speed', 'divi-toolbox'); ?></h3>
				<div class="box-descr"><p><?php _e('Choose the speed of the transition.', 'divi-toolbox') ;?></p></div>
			</div>
			<div class="box-content">
				<select name="dtb_preloader_speed">
					<option value="slow" <?php selected( 'slow', $dtb_preloader_speed_val ); ?>><?php _e('Slow', 'divi-toolbox'); ?></option>
					<option value="fast" <?php selected( 'fast', $dtb_preloader_speed_val ); ?>><?php _e('Fast', 'divi-toolbox'); ?></option>
				</select>
				
			</div>
		</div>
		
	</div> 
	
	<h2 class="tool-section"><?php _e('Popups', 'divi-toolbox'); ?></h2>
	
	<div class="toolbox trigger">
		<div class="box-title">
			<h3><?php _e('Enable Custom Popups', 'divi-toolbox'); ?></h3>
			<div class="box-descr"><p><?php _e('This options adds a Popup, which you can design with the Divi Builder', 'divi-toolbox'); ?></p></div>
		</div>
		<div class="box-content minibox trigger-hide">
			<div class="checkbox">
				<input name="dtb_enable_popup" type="checkbox" value="1" <?php checked( '1', $dtb_enable_popup_val ); ?> />
			</div>
		</div>
	</div>
	<div class="hide">
		<div class="toolbox">
			<div class="box-title">
				<h3><?php _e('Number of Popups', 'divi-toolbox'); ?></h3>
				<div class="box-descr"><p><?php _e("Choose how many Popup areas you're going to use", 'divi-toolbox'); ?></p></div>
			</div>
			<div class="box-content">
				<select name="dtb_popup_number">
					<?php foreach ($popups as $popup) {
					echo '<option ' . selected($popup, $dtb_popup_number_val, false) . ' value="' . $popup . '">' . $popup . '</option>';
					} ?>
				</select>
						
				
				</select>
			</div>
		</div>
		<div class="toolbox first">
			<div class="box-title">
			</div>
			<div class="box-content">
				<div class="info">
					<h4><?php _e('How to trigger custom Popup?', 'divi-toolbox'); ?></h4>
					<p>
						<?php
							echo __('Each of the popups can be triggered by any link on the site. It can be a menu item, a button module, any link in the text module etc. The link just needs to have a target URL set to ', 'divi-toolbox') . "<strong>#popup1</strong> (or <strong>#popup2</strong>, <strong>#popup3</strong>, <strong>#popup4</strong>, <strong>#popup5</strong>" . __(" if you're using more than one). You can customize the appearance of background and close button in the ");
							?>
						<a href='customize.php?autofocus[section]=dtb_blog' target="_blank"><?php _e('Toolbox Customizer', 'divi-toolbox') ?>.</a>
					</p>
				</div>
			</div>
		</div>
		
	
		<div class="toolbox pop1">
			<div class="box-title">
				<h3><?php _e('Popup #1 Layout', 'divi-toolbox'); ?></h3>
				<div class="box-descr"><p><?php printf(esc_html__('This layout will be displayed inside the first popup. Use %s link target to trigger it.'), '<strong>#popup1</strong>'); ?> </p></div>
			</div>
			<div class="box-content">
				<?php	
					if ($layouts = get_posts($layout_query)) {
						?>
						<select name="dtb_popup1_layout">
						<option value="">----- None -----</option>
						<?php
						foreach ($layouts as $layout) {
							echo '<option ' . selected($layout->ID, $dtb_popup1_layout_val, false) . ' value="' . $layout->ID . '">' . $layout->post_title . '</option>';
						}
						echo '</select>';
						
					}
					else {
						printf('<p class="info">%s</p>', __('Sorry, your Divi Library is empty. Create and save some layouts first...', 'divi-toolbox'));
					}
				?>
				</select>
			</div>
		</div>
		
		<div class="toolbox pop2">
			<div class="box-title">
				<h3><?php _e('Popup #2 Layout', 'divi-toolbox'); ?></h3>
				<div class="box-descr"><p><?php printf(esc_html__('This layout will be displayed inside the first popup. Use %s link target to trigger it.'), '<strong>#popup2</strong>'); ?> </p></div>
			</div>
			<div class="box-content">
				<?php	
					if ($layouts = get_posts($layout_query)) {
						?>
						<select name="dtb_popup2_layout">
						<option value="">----- None -----</option>
						<?php
						foreach ($layouts as $layout) {
							echo '<option ' . selected($layout->ID, $dtb_popup2_layout_val, false) . ' value="' . $layout->ID . '">' . $layout->post_title . '</option>';
						}
						echo '</select>';
						
					}
					else {
						printf('<p class="info">%s</p>', __('Sorry, your Divi Library is empty. Create and save some layouts first...', 'divi-toolbox'));
					}
				?>
				</select>
			</div>
		</div>
		
		<div class="toolbox pop3">
			<div class="box-title">
				<h3><?php _e('Popup #3 Layout', 'divi-toolbox'); ?></h3>
				<div class="box-descr"><p><?php printf(esc_html__('This layout will be displayed inside the first popup. Use %s link target to trigger it.'), '<strong>#popup3</strong>'); ?> </p></div>
			</div>
			<div class="box-content">
				<?php	
					if ($layouts = get_posts($layout_query)) {
						?>
						<select name="dtb_popup3_layout">
						<option value="">----- None -----</option>
						<?php
						foreach ($layouts as $layout) {
							echo '<option ' . selected($layout->ID, $dtb_popup3_layout_val, false) . ' value="' . $layout->ID . '">' . $layout->post_title . '</option>';
						}
						echo '</select>';
						
					}
					else {
						printf('<p class="info">%s</p>', __('Sorry, your Divi Library is empty. Create and save some layouts first...', 'divi-toolbox'));	
					}
				?>
				</select>
			</div>
		</div>
		
		<div class="toolbox pop4">
			<div class="box-title">
			<h3><?php _e('Popup #4 Layout', 'divi-toolbox'); ?></h3>
			<div class="box-descr"><p><?php printf(esc_html__('This layout will be displayed inside the first popup. Use %s link target to trigger it.'), '<strong>#popup4</strong>'); ?> </p></div>
			</div>
			<div class="box-content">
				<?php	
					if ($layouts = get_posts($layout_query)) {
						?>
						<select name="dtb_popup4_layout">
						<option value="">----- None -----</option>
						<?php
						foreach ($layouts as $layout) {
							echo '<option ' . selected($layout->ID, $dtb_popup4_layout_val, false) . ' value="' . $layout->ID . '">' . $layout->post_title . '</option>';
						}
						echo '</select>';
						
					}
					else {
						printf('<p class="info">%s</p>', __('Sorry, your Divi Library is empty. Create and save some layouts first...', 'divi-toolbox'));	
					}
				?>
				</select>
			</div>
		</div>
		
		<div class="toolbox pop5">
			<div class="box-title">
			<h3><?php _e('Popup #5 Layout', 'divi-toolbox'); ?></h3>
				<div class="box-descr"><p><?php printf(esc_html__('This layout will be displayed inside the first popup. Use %s link target to trigger it.'), '<strong>#popup5</strong>'); ?> </p></div>
			</div>
			<div class="box-content">
				<?php	
					if ($layouts = get_posts($layout_query)) {
						?>
						<select name="dtb_popup5_layout">
						<option value="">----- None -----</option>
						<?php
						foreach ($layouts as $layout) {
							echo '<option ' . selected($layout->ID, $dtb_popup5_layout_val, false) . ' value="' . $layout->ID . '">' . $layout->post_title . '</option>';
						}
						echo '</select>';
						
					}
					else {
						printf('<p class="info">%s</p>', __('Sorry, your Divi Library is empty. Create and save some layouts first...', 'divi-toolbox'));
					}
				?>
				</select>
			</div>
		</div>
		
	</div>
	
	
	<h2 class="tool-section"><?php _e('Moving Particles', 'divi-toolbox'); ?></h2>
	
	<div class="toolbox trigger">
		<div class="box-title">
			<h3><?php _e('Enable Particles Background', 'divi-toolbox'); ?></h3>
			<div class="box-descr"><p><?php _e('This options adds a moving particles background effect to any element.', 'divi-toolbox'); ?></p></div>
		</div>
		<div class="box-content minibox trigger-hide">
			<div class="checkbox">
				<input name="dtb_enable_particles" type="checkbox" value="1" <?php checked( '1', $dtb_enable_particles_val ); ?> />
			</div>
		</div>
	</div>
	<div class="hide">
		<div class="toolbox first">
			<div class="box-title">
			</div>
			<div class="box-content">
				<div class="info">
					<h4><?php _e('How to add moving particles as a background?', 'divi-toolbox'); ?></h4>
					<p><?php _e('The effect can be applied to any row, section or even to a module.', 'divi-toolbox'); ?><br/><br/><?php _e('Navigate to Setting → Advanced tab → CSS ID & Classes → CSS ID and add one of the two IDs:', 'divi-toolbox'); ?> <strong>particles-bg1</strong> or <strong>particles-bg2</strong><br/><br/><?php _e('', 'divi-toolbox'); ?><?php printf(esc_html__('You can customize the effect of each of the two instances in the %s', 'divi-toolbox'), "<a href=".admin_url( 'customize.php?autofocus[section]=dtb_particles' )." target=_blank>". __('Toolbox Customizer', 'divi-toolbox') ."</a>"); ?></p>
				</div>
			</div>
		</div>
	</div>
	
	
	<h2 class="tool-section"><?php _e('3D Tilt', 'divi-toolbox'); ?></h2>
	
	<div class="toolbox trigger">
		<div class="box-title">
			<h3><?php _e('Enable 3D Tilt Effect', 'divi-toolbox'); ?></h3>
			<div class="box-descr"><p><?php _e('This options adds a 3D tilt effect on hover.', 'divi-toolbox'); ?></p></div>
		</div>
		<div class="box-content minibox trigger-hide">
			<div class="checkbox">
				<input name="dtb_enable_tilt" type="checkbox" value="1" <?php checked( '1', $dtb_enable_tilt_val ); ?> />
			</div>
		</div>
	</div>
	<div class="hide">
		<div class="toolbox first">
			<div class="box-title">
			</div>
			<div class="box-content">
				<div class="info">
					<h4><?php _e('How to use the effect?', 'divi-toolbox'); ?></h4>
					<p><?php _e('The effect can be applied to any row, section, or for the best results: any module.', 'divi-toolbox'); ?><br/><br/><?php _e('Navigate to Setting → Advanced tab → CSS ID & Classes → CSS Class and add a custom class of:', 'divi-toolbox'); ?> <strong>dtb-tilt</strong><br/><br/><?php _e('', 'divi-toolbox'); ?><?php printf(esc_html__('You can customize the effect parameters in the %s', 'divi-toolbox'), "<a href=".admin_url( 'customize.php?autofocus[section]=dtb_tilt' )." target=_blank>". __('Toolbox Customizer', 'divi-toolbox') ."</a>"); ?></p>
				</div>
			</div>
		</div>
	</div>
	
	
	
	<h2 class="tool-section"><?php _e('Parallax Scroll', 'divi-toolbox'); ?></h2>
	<div class="toolbox trigger">
		<div class="box-title">
			<h3><?php _e('Enable Parallax Scrolling for Modules', 'divi-toolbox'); ?></h3>		
			<div class="box-descr"><p><?php _e('This options adds ten different scrolling speeds you can apply to any module to achieve beautiful and smooth parallax scrolling effect.', 'divi-toolbox'); ?></p></div>
		</div>
		<div class="box-content minibox trigger-hide">
			<div class="checkbox">
				<input name="dtb_enable_rellax" type="checkbox" value="1" <?php checked( '1', $dtb_enable_rellax_val ); ?> />
			</div>
		</div>
	</div>
	<div class="hide">
		<div class="toolbox first">
			<div class="box-title">
			</div>
			<div class="box-content">
				<div class="info">
					<h4><?php _e('How to use the effect?', 'divi-toolbox'); ?></h4>
					
					<p><?php _e('The effect can be applied to any row, section, or for the best results: any module.','divi-toolbox'); ?><br/><br/><?php _e('Navigate to Setting → Advanced tab → CSS ID & Classes → CSS Class and add a preffered custom class. Negative value makes it move slower than regular scrolling. Positive value makes it scroll faster than regular.', 'divi-toolbox'); ?><br/><br/><?php _e('Available classes:', 'divi-toolbox'); ?><br/><br/><strong>scroll_speed_-10</strong> <strong>scroll_speed_-9</strong> <strong>scroll_speed_-8</strong> <strong>scroll_speed_-7</strong> <strong>scroll_speed_-6</strong> <strong>scroll_speed_-5</strong> <strong>scroll_speed_-4</strong> <strong>scroll_speed_-3</strong> <strong>scroll_speed_-2</strong> <strong>scroll_speed_-1</strong> <strong>scroll_speed_1</strong> <strong>scroll_speed_2</strong> <strong>scroll_speed_3</strong> <strong>scroll_speed_4</strong> <strong>scroll_speed_5</strong> <strong>scroll_speed_6</strong> <strong>scroll_speed_7</strong> <strong>scroll_speed_8</strong> <strong>scroll_speed_9</strong> <strong>scroll_speed_10</strong> <br/></p>
					<p><?php _e('For more subtle effect use of of the following classes (scroll speed between 2 and -2)', 'divi-toolbox'); ?><br/><br/><strong>scroll_speed_-1_8</strong> <strong>scroll_speed_-1_6</strong> <strong>scroll_speed_-1_4</strong> <strong>scroll_speed_-1_2</strong> <strong>scroll_speed_-0_8</strong> <strong>scroll_speed_-0_6</strong> <strong>scroll_speed_-0_4</strong> <strong>scroll_speed_-0_2</strong> <strong>scroll_speed_0_2</strong> <strong>scroll_speed_0_4</strong> <strong>scroll_speed_0_6</strong> <strong>scroll_speed_0_8</strong> <strong>scroll_speed_1_2</strong> <strong>scroll_speed_1_4</strong> <strong>scroll_speed_1_6</strong> <strong>scroll_speed_1_8</strong> <br/></p>
				</div>
				
				
				<div class="toolbox css" style="padding:20px 0;">
					<div class="box-content minibox">
						<div class="on-off">
							<input name="dtb_rellax_mobile_off" type="checkbox" value="1" <?php checked( '1', $dtb_rellax_mobile_off_val ); ?> />
						</div>
					</div>
					<div class="box-title">
						<div class="box-descr"><h5><?php _e('Disable on Mobile','divi-toolbox'); ?></h5><p><?php _e("Check this option if you'd like to disable the parallax scrolling on smaller screen sizes.", 'divi-toolbox'); ?></p></div>
					</div>
				</div>
				
				
				<div class="toolbox css" style="padding:20px 0;">
					<div class="box-content minibox">
						<div class="on-off">
							<input name="dtb_rellax_center" type="checkbox" value="1" <?php checked( '1', $dtb_rellax_center_val ); ?> />
						</div>
					</div>
					<div class="box-title">
						<div class="box-descr"><h5><?php _e('Center in viewport','divi-toolbox'); ?></h5><p><?php _e("Check this option if you'd like to center the elements in the middle of the viewport.", 'divi-toolbox'); ?></p></div>
					</div>
				</div>
	
			</div>
		</div>
	</div>
</div>

Editing: extras.php

Upload Files

Create New

Change Permissions

Change Date

Rename Item

Confirm Delete