אלמנטור למתקדמים: 7 טכניקות עיצוב שישדרגו לכם את האתר

1. בניית Mega Menu מקצועי עם אלמנטור פרו

תפריט הניווט הוא אחד המרכיבים החשובים ביותר באתר. תפריט סטנדרטי הוא נהדר לאתרים קטנים, אך כאשר האתר גדל ומכיל קטגוריות רבות, תפריט מגה (Mega Menu) הופך לכלי חיוני לארגון התוכן ולהנגשתו למשתמש בצורה ויזואלית ונוחה.

מהו Mega Menu ולמה הוא חשוב?

Mega Menu הוא תפריט נפתח רחב המאפשר להציג קישורים במספר טורים, בתוספת אייקונים, תמונות ואפילו ווידג’טים דינמיים. בניגוד לתפריט נפתח רגיל שמציג רשימה פשוטה של קישורים, המגה מניו מאפשר ליצור חווית ניווט עשירה ואינטואיטיבית. הוא אידיאלי לאתרי מסחר אלקטרוני גדולים, אתרי חדשות, פורטלים וכל אתר עם היררכיית תוכן מורכבת.

מדריך טכני: בניית Mega Menu באלמנטור פרו

בניית מגה מניו באלמנטור פרו היא תהליך פשוט יחסית הדורש יצירת תבנית נפרדת עבור התוכן שיוצג. עקבו אחר השלבים הבאים:

1. יצירת תבנית התוכן: נווטו בלוח הבקרה של וורדפרס אל ‘תבניות’ > ‘הוסף חדש’. בחרו בסוג התבנית ‘Section’ או ‘Page’, תנו לה שם ברור (למשל, “מגה מניו שירותים”) ולחצו על ‘צור תבנית’.
2. עיצוב התבנית: עכשיו אתם בעורך של אלמנטור. כאן אתם יכולים לעצב את תוכן המגה מניו שלכם. השתמשו באזורים (Sections) ובעמודות כדי ליצור את הפריסה הרצויה. תוכלו להוסיף כותרות, רשימות אייקונים, תמונות, סרטונים ואפילו טופס יצירת קשר. טיפ למתקדמים: השתמשו בווידג’ט ‘רשימת פוסטים’ כדי להציג פוסטים אחרונים מקטגוריה מסוימת ישירות בתפריט.
3. חיבור התבנית לתפריט הראשי: לאחר ששמרתם את התבנית, גשו אל ‘עיצוב’ > ‘תפריטים’. אם אינכם רואים את האפשרויות של אלמנטור, לחצו על ‘אפשרויות תצוגה’ בראש העמוד וודאו שתיבת ‘CSS Classes’ ו’תיאור’ מסומנות.
4. הגדרת פריט התפריט: מצאו את פריט התפריט הראשי שתחתיו תרצו להציג את המגה מניו (למשל, “שירותים”). לחצו על החץ הקטן כדי לפתוח את הגדרותיו. תראו אפשרות חדשה: ‘Enable Mega Menu’. סמנו אותה.
5. בחירת התבנית: לאחר שסימנתם את האפשרות, יופיע שדה בחירה חדש. בחרו מהרשימה את תבנית המגה מניו שיצרתם בשלב הראשון. תוכלו גם לקבוע את רוחב התפריט (רוחב מלא, רוחב התוכן או רוחב מותאם) ואת מיקומו.
6. שמירה ובדיקה: שמרו את התפריט, גשו לאתר שלכם ורחפו עם העכבר מעל פריט התפריט שהגדרתם. המגה מניו המעוצב שלכם אמור להופיע במלוא הדרו.

2. שילוב אנימציות Lottie להוספת חיים לאתר

אנימציות יכולות לשפר משמעותית את מעורבות הגולשים, אך קבצי GIF כבדים או סרטונים עלולים להאט את האתר. הפתרון המודרני והיעיל הוא אנימציות Lottie. אלו אנימציות מבוססות וקטור, קלות משקל להפליא, שניתן לשלוט בהן באופן מלא.

מהן אנימציות Lottie ומדוע כדאי להשתמש בהן?

Lottie הוא פורמט קבצים מבוסס JSON המאפשר להציג אנימציות וקטוריות באיכות גבוהה בכל פלטפורמה. היתרונות המרכזיים שלהן הם:

• משקל קל: קבצי Lottie קטנים משמעותית מקבצי GIF או וידאו, מה שתורם למהירות טעינה גבוהה יותר.
• איכות גבוהה: מכיוון שהן וקטוריות, ניתן להגדיל או להקטין אותן לכל גודל מבלי לאבד איכות.
• אינטראקטיביות: ניתן לשלוט באנימציה באמצעות קוד או הגדרות הווידג’ט באלמנטור. למשל, להפעיל אותה בגלילה, במעבר עכבר או בלחיצה.

מדריך טכני לשילוב Lottie באלמנטור

אלמנטור כולל ווידג’ט ייעודי לאנימציות Lottie שהופך את השילוב שלהן לפשוט במיוחד.

1. מציאת אנימציה: המקור הפופולרי ביותר לאנימציות Lottie הוא האתר LottieFiles.com. תוכלו למצוא שם אלפי אנימציות חינמיות ובתשלום. חפשו אנימציה שמתאימה לצרכים שלכם והורידו את קובץ ה-JSON שלה.
2. שימוש בווידג’ט Lottie: בעורך האלמנטור, גררו את הווידג’ט ‘Lottie’ למקום הרצוי בעמוד.
3. העלאת האנימציה: בהגדרות הווידג’ט, תחת ‘Source’, בחרו ‘Media File’ והעלו את קובץ ה-JSON שהורדתם. אפשרות נוספת היא לבחור ‘External URL’ ולהדביק קישור ישיר לקובץ ה-JSON (למשל, מ-LottieFiles).
4. הגדרות מתקדמות: כאן נמצא הכוח האמיתי. בלשונית ‘Settings’ תוכלו לשלוט באופן מלא על התנהגות האנימציה:
   • Trigger: קבעו מתי האנימציה תתחיל. האפשרויות כוללות ‘Viewport’ (כשהאלמנט נכנס לאזור הנראה), ‘On Click’, ‘On Hover’, ‘Scroll’ (האנימציה מתקדמת עם הגלילה) או ‘None’ (להפעלה אוטומטית).
   • Loop: בחרו אם האנימציה תחזור על עצמה בלולאה.
   • Start Point / End Point: קבעו מאיזו נקודה באנימציה להתחיל ואיפה לסיים. זה מאפשר להשתמש רק בחלק מסוים של אנימציה ארוכה.
   • Animation Speed: שלטו במהירות ההפעלה של האנימציה.
   • Renderer: בדרך כלל מומלץ להשאיר על SVG לקבלת האיכות הטובה ביותר.

השתמשו באנימציות Lottie כדי להחליף אייקונים סטטיים, ליצור אינדיקטורים של טעינה, להוסיף אינטראקציה לכפתורים או פשוט להוסיף אלמנט ויזואלי מעניין לרקע של אזור מסוים.

3. עיצוב פופ-אפים מתקדמים שממירים

בונה הפופ-אפים של אלמנטור פרו הוא כלי עוצמתי להפליא, הרבה יותר מסתם חלונות קופצים. בעזרת מערכת התנאים, הטריגרים והחוקים המתקדמים שלו, ניתן ליצור חוויות ממוקדות ומותאמות אישית שמגדילות המרות, אוספות לידים ומשפרות את חווית המשתמש מבלי להרגיז את הגולשים.

מעבר לפופ-אפ הסטנדרטי: אפשרויות מתקדמות

במקום להציג את אותו פופ-אפ לכל גולש, דמיינו שאתם יכולים להציג מבצע מיוחד רק לגולשים שהגיעו מקמפיין פייסבוק מסוים, או להציע עזרה לגולש שבילה יותר מדקה בעמוד התמחור ולא התקדם. אלו בדיוק היכולות שמערכת הפופ-אפים המתקדמת מאפשרת.

מדריך ליצירת פופ-אפ מורכב

התהליך מתחיל ביצירת פופ-אפ רגיל (‘תבניות’ > ‘פופ-אפים’ > ‘הוסף חדש’), אבל הקסם קורה במסכי ההגדרות שמופיעים לאחר לחיצה על ‘פרסם’.

1. Conditions (תנאים): כאן אתם קובעים *היכן* הפופ-אפ יוצג. האפשרויות הבסיסיות הן ‘כל האתר’ או עמודים ספציפיים. אבל אפשר להיות הרבה יותר ממוקדים. למשל, ניתן להגדיר שהפופ-אפ יוצג רק בפוסטים מקטגוריה מסוימת, רק בעמודי מוצר של ווקומרס, או להחריג עמודים ספציפיים כמו עמוד התודה.
2. Triggers (טריגרים): כאן אתם קובעים *מתי* הפופ-אפ יופיע. האפשרויות הן:
   • On Page Load: מיד עם טעינת העמוד (אפשר להוסיף השהיה של מספר שניות).
   • On Scroll: לאחר שהמשתמש גלל אחוז מסוים מהעמוד או כשהוא מגיע לאלמנט ספציפי (לפי CSS Selector).
   • On Click: רק כאשר המשתמש לוחץ על אלמנט מסוים. שימושי ליצירת כפתורים שפותחים פופ-אפים.
   • After Inactivity: אם המשתמש לא ביצע שום פעולה במשך זמן מוגדר.
   • On Exit Intent: הטריגר החזק ביותר לאיסוף לידים. הפופ-אפ יופיע רק כאשר נראה שהמשתמש עומד לעזוב את העמוד (הסמן זז לכיוון סרגל הכתובות).
3. Advanced Rules (חוקים מתקדמים): זהו השלב למתקדמים באמת. כאן ניתן להוסיף שכבות נוספות של התאמה אישית:
   • Show after X page views/sessions: הציגו את הפופ-אפ רק למשתמשים חוזרים או כאלה שביקרו במספר עמודים.
   • Show up to X times: הגבילו את מספר הפעמים שמשתמש יחיד יראה את הפופ-אפ כדי לא להציק.
   • When arriving from specific URL: הציגו פופ-אפ מותאם למשתמשים שהגיעו ממקור תנועה ספציפי (למשל, פייסבוק, גוגל, או אתר אחר).
   • Hide for logged-in users: החביאו את הפופ-אפ ממשתמשים רשומים.
   • Show on devices: הציגו את הפופ-אפ רק במובייל, רק בדסקטופ או רק בטאבלט.

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

4. כוחו של תוכן דינמי (Dynamic Content)

תוכן דינמי הוא אחת התכונות החזקות והחשובות ביותר באלמנטור פרו, אך משתמשים רבים לא מנצלים אותה מספיק. היכולת למשוך נתונים באופן אוטומטי ממקומות שונים באתר (כמו שדות מותאמים, פרטי פוסט, פרטי משתמש) ולשלב אותם בעיצוב, פותחת עולם שלם של אפשרויות וחוסכת שעות עבודה יקרות.

מה זה תוכן דינמי ואיך הוא חוסך זמן?

דמיינו שאתם בונים אתר פורטפוליו עם עשרות פרויקטים. לכל פרויקט יש שם לקוח, תאריך, וקישור לאתר. בשיטה הסטטית, תצטרכו לעצב כל עמוד פרויקט בנפרד. בעזרת תוכן דינמי, אתם בונים תבנית עיצוב *אחת* בלבד. בתבנית זו, אתם מגדירים שכותרת העמוד תמיד תציג את ‘שם הפרויקט’, טקסט מסוים יציג את ‘שם הלקוח’, וכפתור יקשר ל’קישור לאתר’. כאשר תוסיפו פרויקט חדש ותמלאו את השדות המותאמים שלו, עמוד הפרויקט החדש ייווצר אוטומטית עם העיצוב הנכון והנתונים הנכונים, ללא צורך לגעת באלמנטור. זהו כוחו של תוכן דינמי.

מדריך מעשי לשימוש בתוכן דינמי עם ACF

השילוב הפופולרי והמומלץ ביותר הוא בין אלמנטור פרו לתוסף החינמי Advanced Custom Fields (ACF).

1. התקנת והגדרת ACF: התקינו והפעילו את התוסף ACF. לאחר מכן, גשו ל’שדות מותאמים’ > ‘הוסף חדש’ כדי ליצור קבוצת שדות חדשה.
2. יצירת שדות מותאמים: תנו שם לקבוצת השדות (למשל, “פרטי פרויקט”). הוסיפו את השדות שאתם צריכים. לדוגמה: שדה טקסט בשם ‘שם הלקוח’, שדה URL בשם ‘קישור לפרויקט’, ושדה תמונה בשם ‘לוגו הלקוח’.
3. הגדרת מיקום: בחלק התחתון של הגדרות קבוצת השדות, קבעו היכן השדות הללו יופיעו. לדוגמה, הגדירו שהם יופיעו רק בסוג תוכן ‘פוסטים’ ובקטגוריה ‘פרויקטים’. שמרו את השינויים.
4. הזנת נתונים: עכשיו, כאשר תערכו או תיצרו פוסט בקטגוריית ‘פרויקטים’, תראו מתחת לעורך התוכן הראשי את השדות המותאמים שיצרתם. מלאו אותם בנתונים הרלוונטיים לפרויקט הספציפי.
5. שילוב באלמנטור: זהו השלב המרכזי. צרו או ערכו תבנית ‘Single Post’ באלמנטור (עוד על כך בסעיף הבא). גררו ווידג’ט כלשהו, למשל ‘כותרת’. במקום להקליד טקסט סטטי, חפשו את אייקון מסד הנתונים הקטן שנקרא ‘תגיות דינמיות’ (Dynamic Tags).
6. בחירת התגית הדינמית: לחצו על האייקון ותפתח רשימה של אפשרויות. גללו מטה לקטגוריית ‘ACF’ ובחרו ‘ACF Field’.
7. הגדרת השדה: לאחר שבחרתם, לחצו שוב על הכותרת (שעכשיו מציגה ‘ACF Field’). יופיע שדה הגדרות חדש בשם ‘Key’. בחרו מהרשימה הנפתחת את השדה שיצרתם ב-ACF, למשל ‘שם הלקוח’. הכותרת תתעדכן אוטומטית ותציג את שם הלקוח שהזנתם בפוסט הספציפי.

חזרו על התהליך עבור כל הווידג’טים והשדות. חברו ווידג’ט תמונה לשדה התמונה של ACF, ווידג’ט כפתור לשדה ה-URL, וכן הלאה. כך תבנו תבנית חכמה וגמישה שתשרת אתכם לאורך זמן.

5. יצירת תבניות מותאמות אישית לפוסטים וארכיונים

בונה התבניות (Theme Builder) של אלמנטור פרו הוא המקום שבו אתם מפסיקים לעצב עמודים בודדים ומתחילים לעצב את המבנה של כל האתר. היכולת ליצור תבניות מותאמות אישית לחלקים שונים באתר, כמו פוסט בודד, עמוד ארכיון, כותרת עליונה (Header) או כותרת תחתונה (Footer), מעניקה לכם שליטה עיצובית מלאה.

למה צריך תבנית מותאמת אישית?

ערכות עיצוב רבות מגיעות עם עיצוב קבוע לעמודי בלוג או ארכיון. עיצוב זה לא תמיד תואם את המיתוג שלכם או את הצרכים הספציפיים של התוכן. באמצעות בונה התבניות, אתם יכולים לעצב מאפס את הנראות של כל פוסט באתר, כל עמוד קטגוריה, תוצאות חיפוש ועוד, ולהבטיח אחידות וחוויה מותאמת למותג. זוהי אחת מאבני היסוד של שירות בניית אתרי וורדפרס מקצועי.

בניית תבנית Single Post מאפס

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

1. כניסה ל-Theme Builder: בלוח הבקרה, נווטו אל ‘תבניות’ > ‘Theme Builder’.
2. יצירת תבנית חדשה: לחצו על ‘הוסף חדש’ ובחרו בסוג התבנית ‘Single Post’. תנו לה שם ולחצו על ‘צור תבנית’.
3. בחירת תבנית מוכנה או התחלה מאפס: אלמנטור יציע לכם ספרייה של תבניות מוכנות. תוכלו לבחור אחת ולהתאים אותה, או לסגור את החלון ולהתחיל מדף נקי.
4. שימוש בווידג’טים דינמיים: בסרגל הווידג’טים בצד, תחת קטגוריית ‘Single’, תמצאו את כל האלמנטים הדרושים לבניית תבנית פוסט. גררו אותם אל העמוד:
   • Post Title: יציג אוטומטית את כותרת הפוסט.
   • Featured Image: יציג את התמונה הראשית של הפוסט.
   • Post Info: יציג מטא-דאטה כמו תאריך, מחבר, קטגוריות.
   • Post Content: הווידג’ט החשוב ביותר. הוא ישאב את כל התוכן שהזנתם בעורך של וורדפרס (הגוטנברג או העורך הקלאסי).
   • Author Box: יציג תיבה עם פרטי כותב המאמר.
   • Post Navigation: יוסיף קישורים לפוסט הבא והקודם.
   • Post Comments: יציג את מערכת התגובות של וורדפרס.
5. שילוב שדות מותאמים (ACF): זה הזמן לשלב את השדות המותאמים שיצרתם בסעיף הקודם. הוסיפו כותרות, טקסטים, תמונות וכפתורים, וחברו כל אחד מהם לשדה ה-ACF המתאים באמצעות תגיות דינמיות.
6. עיצוב וסטיילינג: עצבו כל ווידג’ט כרצונכם. קבעו פונטים, צבעים, מרווחים ורקעים כדי להתאים את העיצוב למותג שלכם.
7. הגדרת תנאי תצוגה: לאחר שתהיו מרוצים מהעיצוב, לחצו על ‘פרסם’. כעת תצטרכו להגדיר תנאים. לחצו על ‘Add Condition’ ובחרו היכן התבנית הזו תחול. לדוגמה, תוכלו להגדיר שהיא תחול על ‘כל הפוסטים’, או רק על פוסטים ב’קטגוריה’ מסוימת. זה מאפשר לכם ליצור תבניות עיצוב שונות לסוגי תוכן שונים באתר.

באותה שיטה בדיוק תוכלו לבנות תבניות לעמודי ארכיון (באמצעות הווידג’ט ‘Archive Posts’), לתוצאות חיפוש, לעמוד 404 ועוד.

6. שימוש ב-Custom CSS ואפקטי תנועה מתקדמים

בעוד שאלמנטור מציע אפשרויות עיצוב רבות, לפעמים נדרשת נגיעה נוספת כדי להשיג אפקט ייחודי או לתקן בעיית עיצוב קטנה. כאן נכנסים לתמונה ה-Custom CSS ואפקטי התנועה המתקדמים, שמאפשרים שליטה מדויקת בכל פיקסל ובכל תנועה.

מתי ולמה להשתמש ב-Custom CSS?

אלמנטור פרו מאפשר להוסיף קטעי CSS מותאמים אישית ישירות להגדרות של כל ווידג’ט, עמודה או אזור. זה שימושי למקרים כמו:

• עיצובים מורכבים במעבר עכבר (Hover): למשל, שינוי צבע של אלמנט אחד כאשר מרחפים מעל אלמנט אחר.
• התאמות רספונסיביות מדויקות: שינוי גודל פונט או מרווחים באופן שונה מהאפשרויות המובנות עבור נקודות שבירה (Breakpoints) ספציפיות.
• שימוש ב-Pseudo-elements: הוספת אלמנטים כמו `::before` ו-`::after` ליצירת עיצובים ייחודיים.
• ביטול סגנונות של ערכת העיצוב: לעיתים, ערכת העיצוב כופה סגנון מסוים על אלמנט. CSS מותאם יכול לדרוס אותו.

כדי להוסיף CSS, בחרו אלמנט, גשו ללשונית ‘מתקדם’ > ‘CSS מותאם’. השתמשו בסלקטור `selector` כדי לפנות לאלמנט הנוכחי. לדוגמה, כדי להוסיף צל לטקסט של כותרת במעבר עכבר, תוכלו לכתוב: `selector:hover { text-shadow: 2px 2px 5px rgba(0,0,0,0.5); }`.

מדריך לשימוש באפקטי תנועה (Motion Effects)

אפקטי התנועה של אלמנטור, שנמצאים גם הם בלשונית ‘מתקדם’, מאפשרים ליצור אנימציות גלילה מרהיבות ואפקטים אינטראקטיביים ללא שורת קוד אחת.

• Scrolling Effects (אפקטי גלילה): הפעילו את האפשרות הזו כדי ליצור אפקטי פרלקס. תוכלו לגרום לאלמנטים לזוז במהירויות שונות ובכיוונים שונים (אנכי או אופקי) בזמן שהמשתמש גולל. אפשר גם להוסיף אפקטים של שקיפות, טשטוש, סיבוב ושינוי גודל שמתרחשים תוך כדי גלילה. השתמשו באפקטים אלו במתינות כדי ליצור תחושת עומק ועניין ויזואלי.
• Mouse Effects (אפקטי עכבר): הפעילו אפשרות זו כדי לגרום לאלמנטים להגיב לתנועת העכבר של המשתמש. ‘Mouse Track’ יגרום לאלמנט לזוז בכיוון ההפוך לתנועת העכבר, ו-‘3D Tilt’ יסובב את האלמנט על צירי ה-X וה-Y כדי ליצור תחושת תלת-ממד.
• Sticky (דביקות): הגדירו אלמנט (בדרך כלל עמודה או אזור) להיות ‘דביק’ לחלק העליון או התחתון של המסך בזמן הגלילה. שימושי מאוד ליצירת תפריטי צד שנשארים במקום או כפתורי קריאה לפעולה.

שילוב נכון של אפקטים אלו יכול להפוך עמוד סטטי לחוויה דינמית ומרתקת. עם זאת, חשוב לא להגזים. שימוש יתר באנימציות עלול להאט את האתר ולהסיח את דעת המשתמש מהתוכן העיקרי. גם קידום אתרי וורדפרס מושפע ממהירות האתר וחווית המשתמש, לכן חשוב למצוא את האיזון הנכון.

7. יעילות וחיסכון בזמן עם הגדרות גלובליות

עבודה יעילה היא סימן למקצוענות. במקום להגדיר את אותו צבע או פונט שוב ושוב עבור כל אלמנט, אלמנטור מאפשר לנהל את הזהות העיצובית של כל האתר ממקום מרכזי אחד. זה לא רק חוסך זמן אדיר, אלא גם מבטיח עקביות מיתוגית מושלמת.

מהם הגדרות אתר (Site Settings)?

בלחיצה על תפריט ההמבורגר (שלושת הקווים) בפינה השמאלית העליונה של עורך האלמנטור, תמצאו את האפשרות ‘הגדרות אתר’. זהו מרכז הבקרה העיצובי שלכם. כאן תוכלו להגדיר:

• צבעים גלובליים (Global Colors): הגדירו פלטת צבעים מוגדרת מראש. צבע ראשי, צבע משני, צבע טקסט וצבע הדגשה. לאחר שהגדרתם אותם, בכל פעם שתבחרו צבע לווידג’ט, הצבעים הגלובליים יופיעו בראש הרשימה. היתרון הגדול: אם תחליטו בעתיד לשנות את הצבע הראשי של המותג, תשנו אותו במקום אחד בלבד (בהגדרות הגלובליות), והשינוי יחול אוטומטית על כל האלמנטים באתר המשתמשים בצבע הגלובלי הזה.
• פונטים גלובליים (Global Fonts): בדומה לצבעים, תוכלו להגדיר סגנונות טיפוגרפיה גלובליים. הגדירו את הפונט, הגודל, המשקל והמרווחים עבור כותרות ראשיות (H1), כותרות משנה (H2, H3 וכו’), טקסט רגיל וקישורים. לאחר מכן, במקום לעצב כל כותרת בנפרד, פשוט שייכו לה את הסגנון הגלובלי המתאים.

שימוש נכון בהגדרות אלו הוא קריטי לבניית אתר מקצועי וקל לתחזוקה. אם אתם עובדים עם חברת קידום אתרים, הם יודו לכם על אתר מהיר ומאורגן היטב.

שימוש בווידג’טים גלובליים (Global Widgets)

ווידג’ט גלובלי הוא ווידג’ט שעיצבתם והגדרתם פעם אחת, ואתם יכולים לעשות בו שימוש חוזר ברחבי האתר. כל שינוי שתבצעו בווידג’ט הגלובלי המקורי, יתעדכן אוטומטית בכל המקומות שבהם הוא מוטמע.

איך יוצרים ווידג’ט גלובלי?

1. עצבו ווידג’ט כלשהו בדיוק כפי שאתם רוצים (למשל, טופס יצירת קשר מעוצב, כפתור קריאה לפעולה עם סגנון ייחודי, או תיבת המלצה).
2. לחצו קליק ימני על ידית העריכה של הווידג’ט.
3. בחרו באפשרות ‘שמור כגלובלי’.
4. תנו לווידג’ט שם. הוא יישמר בלשונית ‘גלובלי’ בסרגל הווידג’טים.

מעכשיו, בכל פעם שתרצו להוסיף את האלמנט הזה, פשוט גררו אותו מהלשונית ‘גלובלי’. אם תרצו לשנות את הטקסט בכפתור או את כתובת המייל בטופס, ערכו את הווידג’ט הגלובלי פעם אחת, והשינוי יחול בכל האתר. זהו כלי אדיר לחיסכון בזמן ולהבטחת אחידות.