<?php
/**
 * Shortcodes page for Sports Leagues
 *
 * @link       https://anwp.pro
 * @since      0.5.11
 *
 * @package    Sports_Leagues
 * @subpackage Sports_Leagues/admin/views
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>

<div class="anwp-b-wrap">
	<div class="inside p-3" style="max-width: 800px;">
		<h1 class="mb-4"><?php echo esc_html__( 'How To\'s', 'sports-leagues' ); ?></h1>
		Shortcode is a special "macros" that lets you insert specific content with very little effort.
		<br>Some recommended use cases are listed below.

		<h2 class="mt-5">How to insert a shortcode into Gutenberg editor</h2>
		<ul>
			<li> > Create the desired shortcode with Shortcode Builder.</li>
			<li> > Copy and paste it into Shortcode element in the Gutenberg editor.</li>
		</ul>
		<div class="embed-responsive embed-responsive-16by9 border shadow">
			<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/Odn3HDvJosk?rel=0" allowfullscreen></iframe>
		</div>

		<h2 class="mt-5">How to use shortcode UI helper in Classic Editor</h2>

		<ul>
			<li> > Install <a href="https://wordpress.org/plugins/classic-editor/">Classic Editor plugin</a></li>
			<li> > Click on Sports Leagues button in the editor panel</li>
			<li> > Create and insert desired shortcode</li>
		</ul>
		<div class="embed-responsive embed-responsive-16by9 border shadow">
			<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/pBDB-xfG5Dg?rel=0" allowfullscreen></iframe>
		</div>


		<h2 class="mt-5">How to use shortcode UI helper in Gutenberg Editor</h2>

		<ul>
			<li> > Add Classic element</li>
			<li> > Click on Sports Leagues button in the editor panel</li>
			<li> > Create and insert desired shortcode</li>
		</ul>
		<div class="embed-responsive embed-responsive-16by9 border shadow">
			<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/qbyHxCDSZ2A?rel=0" allowfullscreen></iframe>
		</div>

		<h2 class="mt-5">How to insert a shortcode into Elementor page builder</h2>

		<ul>
			<li> > Create the desired shortcode with Shortcode Builder.</li>
			<li> > Copy and paste it into Shortcode widget in the Elementor</li>
		</ul>
		<div class="embed-responsive embed-responsive-16by9 border shadow">
			<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/pDkOnCRcFfI?rel=0" allowfullscreen></iframe>
		</div>
	</div>
</div>
