יש עבודות שהערך שלהן מתגלה רק כשרואים מאיפה התחלנו: שיפוץ של מטבח, ריטוש של תמונה, טיפול בעור או ניקוי של חזית בניין. שתי תמונות זו ליד זו משאירות לגולשים לחפש את ההבדלים בעצמם. השוואת תמונות מניח אותן זו על זו, ונותן לגולשים קו הפרדה אחד שחושף את השינוי בקצב שלהם.
מה הווידג'ט עושה
הווידג'ט מציג תמונת "לפני" ותמונת "אחרי" באותה מסגרת, וביניהן קו הפרדה עם ידית. מזיזים את הקו, והחלק שרואים מכל תמונה גדל או קטן. ההשוואה עובדת עם עכבר, במסכי מגע ובמקלדת.
- כלול: זו לצד זו או זו מעל זו
ב"פריסת ההשוואה" בוחרים אם "לפני" יופיע בתחילת השורה או למעלה.
- כלול: שלוש דרכים להזיז את הקו
גרירה, לחיצה או נגיעה שמקפיצה אותו לנקודה, או קו שעוקב אחרי העכבר.
- כלול: ארבעה מראות לידית
עיגול עם חיצים, כמוסה בצבע ההדגשה, קו דק עם נקודה או זכוכית חלבית.
- כלול: תוויות גמישות
התוויות מוצגות תמיד, רק במעבר עכבר או בכלל לא, ואפשר לכתוב בהן כל טקסט במקום "לפני" ו"אחרי".
- כלול: רמז עדין
כשהווידג'ט נכנס לתצוגה, הקו זז קלות פעם אחת כדי להראות לגולשים שאפשר להזיז אותו.
- כלול: נבנה עם חשיבה על נגישות
הקו זז גם במקשי החיצים, וקוראי מסך מודיעים כמה מכל תמונה מוצג. הווידג'ט נבנה כדי לעזור לעמוד בדרישות הנגישות.
ככה זה נראה
שתי דוגמאות חיות. בראשונה גוררים את הידית, או לוחצים על נקודה בתמונה והקו קופץ אליה. בשנייה הקו עוקב אחרי העכבר, והתוויות מופיעות רק במעבר עכבר. בטלפון גוררים את הקו או נוגעים במקום הרצוי.
ידית כמוסה: לחיצה מקפיצה את הקו
קו דק שעוקב אחרי העכבר
למי זה מתאים
הווידג'ט מתאים לכל עסק שהתוצאה שלו נראית לעין. קבלני שיפוצים ומעצבי פנים יכולים להציג חדר לפני העבודה ואחריה, קליניקה לאסתטיקה יכולה להראות תוצאה של טיפול (כמובן, רק באישור המטופלים), וסטודיו לצילום יכול להציג תמונה גולמית מול התמונה המעובדת. גם חנות אונליין יכולה להראות מוצר לפני הניקוי ואחריו, וקורס לעריכת תמונות יכול להמחיש כל תרגיל בהשוואה אחת.
איך מגדירים
- בוחרים את התמונות
בתוכן > תמונות בוחרים את תמונת "לפני" ואת תמונת "אחרי".
- מגדירים את קו ההפרדה
בתוכן > קו ההפרדה בוחרים את "פריסת ההשוואה", את "מיקום התחלתי של קו ההפרדה" ואת אופן "הזזת קו ההפרדה".
- כותבים את התוויות
בתוכן > תוויות בוחרים מתי להציג אותן ב"הצגת התוויות", כותבים את התווית "לפני" ואת התווית "אחרי", ובוחרים את "מיקום התווית".
- מעצבים את המסגרת
בסגנון > מסגרת בוחרים ב"קביעת הגודל לפי" צורה או גובה קבוע, ואז קובעים "עיגול פינות" וצל.
- בוחרים מראה לידית
בסגנון > קו ההפרדה והידית בוחרים את "מראה הידית" ואת הצבעים שלה.
טיפים
שאלות נפוצות
העמוד עדיין נגלל בטלפון כשמחליקים על התמונות?
כן. החלקה למעלה ולמטה גוללת את העמוד, ורק החלקה הצידה מזיזה את קו ההפרדה. כשהתמונות זו מעל זו, גוררים את הידית עצמה.
אפשר לבטל את התנועה הקצרה של הקו כשהוא נכנס לתצוגה?
כן. בתוכן > קו ההפרדה מכבים את "רמז כשהוא נכנס לתצוגה". גולשים שביקשו מהמכשיר פחות תנועה לא רואים אותה בכלל.
איך מזיזים את הקו בלי עכבר?
במקלדת: מקשי החיצים מזיזים אותו מעט, Page Up ו-Page Down מזיזים אותו הרבה, ו-Home ו-End מעבירים אותו לקצוות.
התמונות שלי לא באותו גודל. מה יקרה?
שתי התמונות ממלאות את אותה מסגרת. ב"צורה" בוחרים את הפרופורציות שלה, וב"החלק שנשאר בתצוגה" בוחרים אם יישארו גלויים המרכז, החלק העליון או החלק התחתון של התמונות.
הווידג'ט "השוואת תמונות" כלול ב-PeleAddons, בחינם ובלי נעילות. הוא פעיל מיד אחרי ההתקנה, ומוצאים אותו בפאנל של Elementor בקטגוריה PeleAddons.