כיצד ליצור Presto Popup #

Presto Popup מאפשר לך להציג את סרטוני נגן Presto שלך בחלון קופץ חיוני שמופעל על ידי תמונה, כפתור או בלוקים מותאמים. זה עובד בצורה חלקה עם Media Hub, כך שתוכל להשתמש בסרטונים קיימים שלך. הוסף אותו לכל עמוד באמצעות block (בלוק) או shortcode (קוד קצר); פשוט, גמיש ויעיל.

מדריך מהיר זה יעזור לך ללמוד כיצד להשתמש ב-Presto Popup. בסוף, תדע כיצד להגדיר מה גורם לחלון הקופץ להופיע, לשנות את המראה שלו, ולהוסיף סרטונים מ-Media Hub.

שימוש ב-Presto Popup Block #

כדי להתחיל, פתח עמוד או פוסט חדש והוסף את בלוק Presto Popup ב-Block Editor (עורך הבלוקים). לאחר מכן, בחר בדיוק כיצד אתה רוצה שהחלון הקופץ יופעל. לדוגמה זו, אנו נבחר Image (תמונה).

• לאחר מכן, בואו נבחר את הסרטון שיופיע בחלון הקופץ. לחץ על Select Media (בחר מדיה) כדי לבחור סרטון מספריית Media Hub הקיימת שלך.
  • או בחר Video Type (סוג וידאו) מהאפשרויות כמו Video (וידאו), YouTube, Vimeo או Audio (אודיו) כדי להכניס סרטונים חדשים.

כמעט סיימנו! מכיוון שבחרנו Image (תמונה) כטריגר החלון הקופץ בעבר, בואו כעת נבחר תמונה שתשמש לפתיחת החלון הקופץ.

Image Popup Trigger (טריגר חלון קופץ של תמונה) #

🎉 זהו! זה עתה יצרת את ה-Presto Popup שלך – כל הכבוד!

Button Popup Trigger (טריגר חלון קופץ של כפתור) #

אם תעדיף, אתה יכול פשוט להוסיף כפתור שיפתח את החלון הקופץ.

Custom Popup Trigger (טריגר חלון קופץ מותאם) ( Pro ) #

לחלופין, אתה יכול להוסיף בלוקים מותאמים, אשר יפעלו כטריגר לחלון הקופץ.

שימוש בקוד Presto Popup shortcode #

פשוט הוסף בלוק shortcode לעמוד שלך. כעת אתה יכול להכניס את ה-shortcode להלן.

עם כפתור #

		<div 
		class="presto-popup wp-block-presto-player-popup" data-wp-interactive="presto-player/popup"		data-wp-context='{"id":"123"}'		>
			
<div class="wp-block-presto-player-popup">		<div 
		class="wp-block-presto-player-popup-trigger" aria-label="Open Presto Popup dialog" data-wp-on--click="actions.showPopup" tabindex="0" data-wp-on--keydown="actions.handleKeydown" aria-haspopup="dialog" data-wp-on-document--keydown="callbacks.handleKeydown" data-wp-bind--aria-expanded="state.overlayEnabled"		>
			
<div class="wp-block-presto-player-popup-trigger">
			<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
			<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Open my popup!</a></div>
			</div>
			

עם תמונה #

		<div 
		class="presto-popup wp-block-presto-player-popup" data-wp-interactive="presto-player/popup"		data-wp-context='{"id":"123"}'		>
			
<div class="wp-block-presto-player-popup">		<div 
		class="wp-block-presto-player-popup-trigger" aria-label="Open Presto Popup dialog" data-wp-on--click="actions.showPopup" tabindex="0" data-wp-on--keydown="actions.handleKeydown" aria-haspopup="dialog" data-wp-on-document--keydown="callbacks.handleKeydown" data-wp-bind--aria-expanded="state.overlayEnabled"		>
			
<div class="wp-block-presto-player-popup-trigger">
				<div class="wp-block-cover presto-popup-cover-trigger" style="border-radius:5px;aspect-ratio:16/9;min-height:336px;aspect-ratio:unset;"><span aria-hidden="true" class="wp-block-cover__background has-background-dim has-background-dim-50" style="background-color:#131313"></span><div class="wp-block-cover__image-background" style="background-image:url(https://placehold.co/600x400);background-position:50% 50%"></div><div class="wp-block-cover__inner-container is-layout-constrained wp-block-cover-is-layout-constrained">
				<div class="wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-23441af8 wp-block-group-is-layout-flex"><div class="wp-block-group__inner-container"><div class="wp-block-group__inner-container"><div class="wp-block-group__inner-container"><div class="wp-block-group__inner-container"><div class="wp-block-group__inner-container"><div class="wp-block-group__inner-container"><div class="wp-block-group__inner-container"><div class="wp-block-group__inner-container"><div class="wp-block-group__inner-container"><div class="wp-block-group__inner-container">
				<figure class="wp-block-image aligncenter size-large is-style-default wp-duotone-unset-1" style="width:48px"><img decoding="async" src="https://schoolyland.co.il/wp-content/plugins/presto-player/img/play-button.svg" alt="" style="width:48px;height:auto"/></figure>
				</div>
				</div></div>
				</div>
		</div>

</div>
		</div>
		

עם התוכן שלך #

		<div 
		class="presto-popup wp-block-presto-player-popup" data-wp-interactive="presto-player/popup"		data-wp-context='{"id":"123"}'		>
			
<div class="wp-block-presto-player-popup">		<div 
		class="wp-block-presto-player-popup-trigger" aria-label="Open Presto Popup dialog" data-wp-on--click="actions.showPopup" tabindex="0" data-wp-on--keydown="actions.handleKeydown" aria-haspopup="dialog" data-wp-on-document--keydown="callbacks.handleKeydown" data-wp-bind--aria-expanded="state.overlayEnabled"		>
			
<div class="wp-block-presto-player-popup-trigger"></div>
		</div>

</div>
		</div>
		
 &lt;div style="background:#f3f3f3; padding:12px 20px; border-radius:8px; text-align:center;"&gt;
 &lt;h4&gt;Learn How It Works&lt;/h4&gt;
 &lt;p&gt;Click to watch a quick video tutorial.&lt;/p&gt;
 &lt;/div&gt;
</div>
		</div>

</div>
		</div>
		

אפשרויות Presto Popup Shortcode #