בפוסט השלישי בסדרה הפוסטים על Dynamic Content for Elementor אני רוצה לדבר על הווידג'טים שמתעסקים עם חלון מודאלי או פופאפ. (לפוסט הראשון על Add to Favorites, לפוסט השני על File Browser).
לכל פוסט יש עמוד משלו, אם זה העמוד הדיפולטי של פוסט בתבנית או משהו מותאם אישית. בדרך כלל, בלחיצה על קישור לפוסט, נעזוב את העמוד הנוכחי שלנו ונעבור לעמוד של הפוסט.
אבל לפעמים נרצה להישאר בעמוד שלנו ולהציג את תוכן הפוסט כחלון מודלי / פופאפ באותו עמוד שאנו נמצאים בו. אנשי UX ידעו לאפיין טוב יותר ממני מתי זה נכון אבל אני יכול להגיד שמניסיון שלי, נתקלתי בכמה מקומות בהם חשבתי שזה נכון.
בפוסט זה אראה איך לעשות זאת בקלות עם תוסף לאלמנטור נקרא Dynamic Content for Elementor. (ישנם כמובן עוד דרכים לעשות את זה).
איך לפתוח פוסט בפופאפ בשני שלבים
שלב ראשון, בעזרת אלמנטור פרו, צרו תבנית לפוסט שלכם. הכניסו את הערכים בצורה דינמאית לפי הצורך.
שלב שני, צרו לולאה שתכיל את הטמפלייט לכל פוסט מהפוסטים, גם פה כמובן השתמשו ביכולות הדינמאיות בהתאם לצורך. בווידג'ט שאתם משתמשים כדי להציג את הפוסטים, בחרו בתצוגה של הלולאה שלכם במקום התצוגה הדיפולטית.
ביצירת הלואלה, במקום לשים כפתור של "קרא עוד" שיכיל קישור לפוסט, יש לכם 2 אופציות:
- ווידג'ט שנקרא Modals
- ווידג'ט שנקרא Fire Modal Window
שני הווידג'טים הם חלק מהתוסף dynamic.ooo.
אם בחרתם ב Modals, באפשרות של Content type לחצו על Template ובחרו בטמפלייט שיצרתם לפוסט המדובר. ב Settings תוכלו לבחור מה יהיה תפקיד הכפתור, האם לפתוח או לסגור חלון מודלי, מתי הפעולה תתבצע, ומתי לסגור את החלון המודלי שנפתח (אם בחרתם באופציה של פתיחה). ישנם עוד הגדרות עיצוביות שתצטרכו לשחק איתם בהתאם לצורך.
אם בחרתם ב Fire Modal Window, תצטרכו פחות או יותר רק לבחור את הטמפלייט המתאים.
סיכום
הפעם לא הוספתי לפוסט תמונות שמדגימות את כל ההגדרות אבל אני באמת חושב שזה די פשוט וברגע שתשחקו עם זה, תסתדרו מיד. האפשרות להראות תוכן דינאמי כפופאפ יכולה להיות מאוד שימושית לפעמים. ניתן להתשמש עם זה לא רק להציג פוסט בפופאפ אלא להציג כל תוכן באתר בין אם הוא מוגדר עם נתונים דינאמיים או סטאטיים. בקישורים ששמתי בשמות הווידג'טים יש דוגמאות חיות שתוכלו לראות אבל הדוגמאות שם לא מוצלחות בלשון המעטה. תתפרעו במחשבה עם הדוגמה שאתם רוצים.
אם אהבתם את התוסף ותרצו לרכוש אותו, אשמח אם תרכשו דרך הקישור שלי – Dynamic Content for Elementor.
