הדרך לבנות אתר מהיר ועצבני

לפני ואחרי, טריק מדליק

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

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

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

הנה למשל – עם ובלי

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

או שקיעה מתחלפת

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

ואפשר גם לשים תמונות שונות לגמרי,

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

טוב, נראה לי שהרעיון ברור, נשאר עכשיו רק לשחק קצת.

 

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

  1. מורידים תוסף שנקרא twentytwenty ומפעילים אותו.
  2. פותחים פוסט/מאמר חדש.
  3. בתוכן במקום שצריכה להכנס התמונה מתחילים שורה חדשה וכותבים (בלי הרווחים בין הסוגריים המרובעים, צריך למחוק אותם):
    [ twentytwenty ]
  4. אחר כך מוסיפים שתי תמונות, הראשונה היא זו שתהיה לפני (מן הסתם).
  5. ואחרי כן מוסיפים את השורה הזו (שוב, בלי הרווחים):
    [ /twentytwenty ]
  6. לשמור… וזהו. נכון פשוט?

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

לאמיצים והיצירתיים –
שימו בתגובות כאן למטה קישור לדף עם "לפני ואחרי" באתר שלכם.

fav
קראת, נהנית ובא לך עוד?
יש כמה אנשים חכמים שנרשמו כאן ועכשיו מקבלים את החדשות שלי לפני כולם.
שווה לך להצטרף… רק להרשם (עם שם מדליק, לפעמים השם צץ במייל) ולשלוח.