Da

✏️ Editing: js-templates.php

<?php
global $post;
$layouts = apply_filters( 'siteorigin_panels_prebuilt_layouts', array() );
?>

<a class="so-tool-button so-widget-add" title="<?php esc_attr_e( 'Add Widget', 'siteorigin-panels' ) ?>" tabindex="0">
				<span class="so-panels-icon so-panels-icon-add-widget"></span>
				<span class="so-button-text"><?php esc_html_e('Add Widget', 'siteorigin-panels') ?></span>
			</a>

<a class="so-tool-button so-row-add" title="<?php esc_attr_e( 'Add Row', 'siteorigin-panels' ) ?>" tabindex="0">
				<span class="so-panels-icon so-panels-icon-add-row"></span>
				<span class="so-button-text"><?php esc_html_e('Add Row', 'siteorigin-panels') ?></span>
			</a>

<a class="so-tool-button so-prebuilt-add" title="<?php esc_attr_e( 'Prebuilt Layouts', 'siteorigin-panels' ) ?>" tabindex="0">
				<span class="so-panels-icon so-panels-icon-layouts"></span>
				<span class="so-button-text"><?php esc_html_e('Layouts', 'siteorigin-panels') ?></span>
			</a>

<?php if( !empty($post) ) : ?>

<a class="so-tool-button so-history" style="display: none" title="<?php esc_attr_e( 'Edit History', 'siteorigin-panels' ) ?>" tabindex="0">
					<span class="so-panels-icon so-panels-icon-history"></span>
					<span class="so-button-text"><?php _e('History', 'siteorigin-panels') ?></span>
				</a>

<a class="so-tool-button so-live-editor" style="display: none" title="<?php esc_html_e( 'Live Editor', 'siteorigin-panels' ) ?>" tabindex="0">
					<span class="so-panels-icon so-panels-icon-live-editor"></span>
					<span class="so-button-text"><?php _e('Live Editor', 'siteorigin-panels') ?></span>
				</a>

<?php endif; ?>

<?php if( SiteOrigin_Panels::display_premium_teaser() ) : ?>
				<a class="so-tool-button so-learn" title="<?php esc_attr_e( 'Page Builder Addons', 'siteorigin-panels' ) ?>" href="<?php echo esc_url( SiteOrigin_Panels::premium_url() ) ?>" target="_blank" rel="noopener noreferrer" style="margin-left: 10px;" tabindex="0">
					<span class="so-panels-icon so-panels-icon-addons"></span>
					<span class="so-button-text"><?php esc_html_e( 'Addons', 'siteorigin-panels' ) ?></span>
				</a>
			<?php endif; ?>
			
			<a class="so-switch-to-standard" tabindex="0"><?php _e('Revert to Editor', 'siteorigin-panels') ?></a>

</div>

</div>

<div class="so-panels-welcome-message">
			<div class="so-message-wrapper">
				<?php
				printf(
					__( 'Add a %s, %s or %s to get started. Read our %s if you need help.', 'siteorigin-panels' ),
					"<a href='#' class='so-tool-button so-widget-add'>" . __( 'Widget', 'siteorigin-panels' ) . "</a>",
					"<a href='#' class='so-tool-button so-row-add'>" . __( 'Row', 'siteorigin-panels' ) . "</a>",
					"<a href='#' class='so-tool-button so-prebuilt-add'>" . __( 'Prebuilt Layout', 'siteorigin-panels' ) . "</a>",
					"<a href='https://siteorigin.com/page-builder/documentation/' target='_blank' rel='noopener noreferrer'>" . __( 'documentation', 'siteorigin-panels' ) . "</a>"
				);
				?>
			</div>

<?php if( SiteOrigin_Panels::display_premium_teaser() ) : ?>
				<div class="so-tip-wrapper">
					<strong><?php _e( 'Pro Tip', 'siteorigin-panels' ) ?>: </strong>
					<?php SiteOrigin_Panels_Admin::display_footer_premium_link() ?>
				</div>
			<?php endif; ?>
		</div>

</div>

</script>

<div class="so-row-toolbar">
			{{% if( rowLabel ) { %}}
			<h3 class="so-row-label">{{%= rowLabel %}}</h3>
			{{% } %}}
			<span class="so-row-move so-tool-button"><span class="so-panels-icon so-panels-icon-move"></span></span>

<div class="so-dropdown-links-wrapper">
					<ul>
						<li><a class="so-row-settings"><?php _e('Edit Row', 'siteorigin-panels') ?></a></li>
						<li><a class="so-row-duplicate"><?php _e('Duplicate Row', 'siteorigin-panels') ?></a></li>
						<li><a class="so-row-delete so-needs-confirm" data-confirm="<?php esc_attr_e('Are you sure?', 'siteorigin-panels') ?>"><?php _e('Delete Row', 'siteorigin-panels') ?></a></li>
						<li class="so-row-colors-container">
							<?php
							// See css/admin.less variable @row_colors. This should match the number of colors defined there.
							$row_color_count = 5;

for ( $i = 1; $i <= $row_color_count; $i++ ) {
								$classes = array( 'so-row-color', 'so-row-color-' . $i );

?>
								<div data-color-label="<?php echo esc_attr( $i ); ?>"
									class="<?php echo esc_attr( implode( ' ', $classes ) ) ?>{{% if( rowColorLabel == '<?php echo esc_attr( $i ); ?>' ) print(' so-row-color-selected'); %}}"
									></div>
								<?php
							}
							?>
						</li>
					</ul>
					<div class="so-pointer"></div>
				</div>
			</span>
		</div>

</div>

</div>
</script>

<div class="so-title-bar {{% if ( dialogIcon ) print( 'so-has-icon' ) %}}">
			<a class="so-show-left-sidebar"><span class="so-dialog-icon"></span></a>
			{{% if ( ! _.isEmpty( dialogIcon ) ) { %}}
				<div class="so-panels-icon so-panels-icon-{{%- dialogIcon %}}"></div>
			{{% } %}}
			<h3 class="so-title{{% if ( editableLabel ) print(' so-title-editable')%}}"
			    {{% if ( editableLabel ) print('contenteditable="true" spellcheck="false" tabIndex="0"')%}}
				>{{%= title %}}</h3>
			<div class="so-title-bar-buttons">
				<a class="so-previous so-nav"><span class="so-dialog-icon"></span></a>
				<a class="so-next so-nav"><span class="so-dialog-icon"></span></a>
				<a class="so-show-right-sidebar"><span class="so-dialog-icon"></span></a>
				<a class="so-close" tabindex="0"><span class="so-dialog-icon"></span></a>
			</div>
		</div>

<div class="so-sidebar so-left-sidebar">
			{{% if(typeof left_sidebar  != 'undefined') print(left_sidebar ); %}}
		</div>

<div class="so-sidebar so-right-sidebar">
			{{% if(typeof right_sidebar  != 'undefined') print(right_sidebar ); %}}
		</div>

<div class="so-content panel-dialog">
			{{%= content %}}
		</div>

<div class="so-toolbar">
			<div class="so-status">{{% if(typeof status != 'undefined') print(status); %}}</div>
			<div class="so-buttons">
				{{%= buttons %}}
			</div>
		</div>

</div>
</script>

</div>
		</div>

</div>
</script>

</div>

</div>
</script>

</div>

</div>
</script>

<h3 class="title">
			{{%= title %}}
		</h3>

<div class="row-set-form">
				<?php
				$cells_field = apply_filters('siteorigin_panels_row_column_count_input', '<input type="number" min="1" max="12" name="cells" class="so-row-field" value="2" />');
				$ratios = apply_filters('siteorigin_panels_column_ratios', array(
					'Even' => 1,
					'Golden' => 0.61803398,
					'Halves' => 0.5,
					'Thirds' => 0.33333333,
					'Diagon' => 0.41421356,
					'Hecton' => 0.73205080,
					'Hemidiagon' => 0.11803398,
					'Penton' => 0.27201964,
					'Trion' => 0.15470053,
					'Quadriagon' => 0.207,
					'Biauron' => 0.30901699,
					'Bipenton' => 0.46,
				) );
				$ratio_field = '<select name="ratio" class="so-row-field">';
				foreach( $ratios as $name => $value ) {
					$ratio_field .= '<option value="' . esc_attr($value) .  '">' . esc_html($name . ' (' . round($value, 3) . ')') . '</option>';
				}
				$ratio_field .= '</select>';

$direction_field = '<select name="ratio_direction" class="so-row-field">';
				$direction_field .= '<option value="right">' . esc_html__('Left to Right', 'siteorigin-panels') . '</option>';
				$direction_field .= '<option value="left">' . esc_html__('Right to Left', 'siteorigin-panels') . '</option>';
				$direction_field .= '</select>';

printf(
					preg_replace(
						array(
							'/1\{ *(.*?) *\}/',
						),
						array(
							'<strong>$1</strong>',
						),
						__('1{Set row layout}: %1$s columns with a ratio of %2$s going from %3$s', 'siteorigin-panels')
					),
					$cells_field,
					$ratio_field,
					$direction_field
				);
				echo '<button class="button-secondary set-row">' . esc_html__('Set', 'siteorigin-panels') . '</button>';
				?>
			</div>

</div>

<div class="buttons">
			{{% if( dialogType == 'edit' ) { %}}
				<div class="action-buttons">
					<a class="so-delete" tabindex="0"><?php _e('Delete', 'siteorigin-panels') ?></a>
					<a class="so-duplicate" tabindex="0"><?php _e('Duplicate', 'siteorigin-panels') ?></a>
				</div>
			{{% } %}}

{{% if( dialogType == 'create' ) { %}}
				<input type="button" class="button-primary so-insert" tabindex="0" value="<?php esc_attr_e('Insert', 'siteorigin-panels') ?>" />
			{{% } else { %}}
				<input type="button" class="button-primary so-save" tabindex="0" value="<?php esc_attr_e('Done', 'siteorigin-panels') ?>" />
			{{% } %}}
		</div>

</div>
</script>

<ul class="so-sidebar-tabs">
				<?php if( !empty( $layouts ) ) : ?>
					<li>
						<a href="#prebuilt"><?php _e('Prebuilt Layouts', 'siteorigin-panels') ?></a>
					</li>
				<?php endif; ?>
				
				<?php
				$directories = SiteOrigin_Panels_Admin_Layouts::single()->get_directories();
				foreach ( $directories as $id => $directory ) {
					?><li><a href="#directory-<?php echo urlencode( $id ) ?>"><?php echo esc_html( $directory['title'] ) ?></a></li><?php
				}
				?>
				<li><a href="#import"><?php _e('Import/Export', 'siteorigin-panels') ?></a></li>

<?php
				$post_types = siteorigin_panels_setting('post-types');
				foreach($post_types as $post_type) {
					$type = get_post_type_object( $post_type );
					if( empty($type) ) continue;
					?><li><a href="#<?php echo 'clone_'.$post_type ?>"><?php printf( __('Clone: %s', 'siteorigin-panels'), $type->labels->name ) ?></a></li><?php
				}
				?>
			</ul>

</div>

<div class="buttons">
			<span class="so-dropdown-wrapper">
				<input type="button" class="button-primary so-dropdown-button so-import-layout disabled" value="<?php esc_attr_e('Insert', 'siteorigin-panels') ?>" disabled="disabled"/>

<div class="so-dropdown-links-wrapper hidden">
					<ul class="so-layout-position">
						<li><a class="so-toolbar-button" data-value="after" tabindex="0"><?php esc_html_e('Insert after', 'siteorigin-panels') ?></a></li>
						<li><a class="so-toolbar-button" data-value="before" tabindex="0"><?php esc_html_e('Insert before', 'siteorigin-panels') ?></a></li>
						<li><a class="so-toolbar-button so-needs-confirm" data-value="replace" data-confirm="<?php esc_attr_e('Are you sure?', 'siteorigin-panels') ?>" tabindex="0"><?php esc_html_e('Replace current', 'siteorigin-panels') ?></a></li>
					</ul>
				</div>
			</span>
		</div>

</div>
</script>

<div class="so-directory-items-wrapper">
			{{% if(items.length === 0) { %}}
				<div class="so-no-results">
					<?php _e( "Your search didn't return any results", 'siteorigin-panels' ); ?>
				</div>
			{{% } else { %}}
				{{% _.each(items, function(item) { %}}
					<div class="so-directory-item" data-layout-id="{{%- item.id %}}" data-layout-type="{{%- item.type %}}">
						<div class="so-directory-item-wrapper" tabindex="0">
							<div class="so-screenshot" data-src="{{%- item.screenshot %}}">
								<div class="so-panels-loading so-screenshot-wrapper"></div>
							</div>
							<div class="so-description">{{%- item.description %}}</div>

<div class="so-bottom">
								<h4 class="so-title">{{%= item.title %}}</h4>
								{{% if( item.preview ) { %}}
									<div class="so-buttons">
										<a href="{{%- item.preview %}}" class="button-secondary so-button-preview" target="_blank" rel="noopener noreferrer">Preview</a>
									</div>
								{{% } %}}
							</div>
						</div>
					</div>
				{{% }); %}}
			{{% } %}}
		</div>

<p class="drag-drop-buttons">
					<input type="button" value="<?php esc_attr_e('Select Import File', 'siteorigin-panels'); ?>" class="file-browse-button button" />
				</p>

<div class="export-file-ui">
			<iframe id="siteorigin-panels-export-iframe" style="display: none;" name="siteorigin-panels-export-iframe"></iframe>
			<form action="<?php echo admin_url('admin-ajax.php?action=so_panels_export_layout') ?>" target="siteorigin-panels-export-iframe" class="so-export" method="post">
				<input type="submit" value="<?php esc_attr_e('Download Layout', 'siteorigin-panels') ?>" class="button-primary" />
				<input type="hidden" name="panels_export_data" value="" />
				<?php wp_nonce_field('panels_action', '_panelsnonce') ?>
			</form>
		</div>
	</div>
</script>

</div>
</script>

<div class="so-sidebar-tools">
			<button
				class="live-editor-save button-primary"
				data-save="<?php esc_html_e('Save Draft', 'siteorigin-panels') ?>"
				data-update="<?php esc_html_e('Update', 'siteorigin-panels') ?>"
			><?php esc_html_e('Update', 'siteorigin-panels') ?></button>
			<button class="live-editor-close button-secondary"><?php esc_html_e('Close', 'siteorigin-panels') ?></button>

<a class="live-editor-mode live-editor-desktop so-active" title="<?php esc_attr_e( 'Toggle desktop mode', 'siteorigin-panels' ) ?>" data-mode="desktop" data-width="100%"  tabindex="0">
				<span class="dashicons dashicons-desktop"></span>
			</a>
			<a class="live-editor-mode live-editor-tablet" title="<?php esc_attr_e( 'Toggle tablet mode', 'siteorigin-panels' ) ?>" data-mode="tablet" data-width="720px" tabindex="0">
				<span class="dashicons dashicons-tablet"></span>
			</a>
			<a class="live-editor-mode live-editor-mobile" title="<?php esc_attr_e( 'Toggle mobile mode', 'siteorigin-panels' ) ?>" data-mode="mobile" data-width="320px" tabindex="0">
				<span class="dashicons dashicons-smartphone"></span>
			</a>

</div>

</div>
</script>

{{% if( settings.search ) { %}}
			<div class="so-search-wrapper">
				<input type="text" placeholder="{{%- settings.searchPlaceholder %}}" />
			</div>
		{{% } %}}
		<ul class="so-items">
			{{% for( var k in items ) { %}}
				<li data-key="{{%- k %}}" class="so-item {{% if( !_.isUndefined( items[k].confirm ) && items[k].confirm ) { print( 'so-confirm' ); } %}}">{{%= items[k][settings.titleKey] %}}</li>
			{{% } %}}
		</ul>
		{{% if( settings.search ) { %}}
		<div class="so-no-results">
			<?php _e('No Results', 'siteorigin-panels') ?>
		</div>
		{{% } %}}
	</div>
</script>

📁 Sid Gifari File Manager