גילה אולייר · Photollier

Ram's Designs
פרויקטים גילה אולייר

גילה אולייר · העין השלישית

גלריה וחנות הדפסים · UX/UI · WooCommerce

גילה אולייר היא צלמת וסופרת ספרי ילדים, והמותג שלה נקרא "העין השלישית". היא מצלמת נופים, מאקרו של פרחים, שקיעות ומסעות. כשהתחלנו לא היו לה אתר ודומיין, רק מאות תמונות שהגיעו במיילים ובתיקיית דרייב. בניתי לה את photollier.com: גלריה של 223 תמונות ב-9 קטגוריות, שבה כל תמונה היא גם מוצר עם 5 אפשרויות הדפסה. האתר נמסר בלי סליקה ועובד במצב קטלוג, וגילה מוסיפה בו תמונות ומוצרים בעצמה.

תפקידעיצוב · UX/UI · פיתוח
תעשייהצילום · אמנות
שנה2026
פלטפורמהWordPress · WooCommerce
היקף223 מוצרים · 9 עמודים
סטטוסחי באוויר
photollier.com/gallery
הגלריה והחנות של גילה אולייר: סרגל 9 קטגוריות ורשת תמונות
223
תמונות שהפכו למוצרים
לכל אחת מק"ט GILA-<id>
9
קטגוריות סינון
מטבע ונופים ועד שקיעות
5
אפשרויות לכל תמונה
מקובץ דיגיטלי ועד מהדורה מוגבלת ממוסגרת
171KB→7.8KB
נתוני אלמנטור בעמוד הגלריה
הרשת נבנית מהמוצרים עצמם
1
שורה כדי לחזור לחנות מלאה
בלי לגעת באף מוצר
~10
שבועות מחומרי גלם למסירה
10.6–19.8.2026, לא ברצף
סקירת הפרויקט

30 שניות, אם אתה ממהר.

האתגר

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

הגישה

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

התוצאה

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

מוקאפ / חי

מהמוקאפ לאתר החי.

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

עמוד תיק העבודות במוקאפ עמוד תיק העבודות באתר החי
מוקאפבאוויר

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

האתגר

ארכיון, עוד לא אתר.

גילה הגיעה עם תמונות: שקיעות, סרדיניה, אגמים ושלכת בצפון-מערב ארה"ב, המצפה התת-ימי באילת, אגינה ביוון ועוד. 95 תמונות מדרייב, 66 מג'ימייל, 15 מאגינה, ושני ספרי ילדים כקובצי PDF. לא היו לה לוגו, שפה מותגית או אינסטגרם, רק עמוד פייסבוק עסקי.

01

מאות קבצים, בלי סדר

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

02

שלוש זהויות באתר אחד

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

03

לקוחה שמנהלת לבד

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

04

חנות, בלי סליקה

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

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

אפיון

שישה עמודים, וגלריה שהיא גם חנות.

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

photollier.com
גלריה וחנות
  • 223 תמונות/gallery/
  • 9 קטגוריות ועוד "הכל"
  • עמוד מוצר עם 5 אפשרויות
תיק עבודות
  • 6 כרטיסים/portfolio/
  • תמונה, כותרת וסיפור
ספרים
  • "ברח לי"לגילאי 4–8 · 2018
  • "בארץ הגמדים"לגילאי 3–6 · 2023
אודות וקשר
  • אודות
  • טופס אמיתי/contact/
מנהלה
  • מדיניות פרטיות
  • הצהרת נגישות
  • תקנון
זרימות משתמש

שלוש זרימות: של המבקרים, ושל גילה.

רכישה במצב קטלוגמבקר באתר
גלריה←פילטר קטגוריה←עמוד מוצר: 5 אפשרויות←"לרכישת התמונה — צרו קשר" / וואטסאפ←טופס עם הודעה ממולאת←פנייה בלוח הבקרה + מייל לגילה
תמונה חדשהגילה, בלוח הבקרה
העלאת תמונה←מוצר חדש: כותרת, תמונה, קטגוריה←5 וריאציות, מחירים, תיאור ומק"ט נוצרים לבד←התמונה בגלריה ובפילטר
תמונה לתצוגה בלבדגילה, באותו מסך
מסך המוצר←צ'קבוקס אחד←בגלריה: כפתור "לצפייה"←בלי מחיר ובלי רכישה
החלטות UX

כל החלטה, והסיבה שמאחוריה.

מצב קטלוג במקום חנות שבורה

המחירים והגדלים ממשיכים להופיע. "הוספה לסל" הוחלף ב"לרכישת התמונה — צרו קשר" ובכפתור וואטסאפ, שבהודעה שלו כבר כתוב שם התמונה. ‎/cart ו-‎/checkout מפנים לטופס, שנפתח עם ההודעה ממולאת ועם הנושא "רכישת הדפס" מסומן.

חזרה לחנות מלאה בשורה אחת

מצב הקטלוג הוא מתג, לא שינוי במוצרים. אם תיפתח סליקה, gila_catalog_mode = 0 מחזיר את החנות המלאה, וכל 223 המוצרים והווריאציות שלהם נשארים כמו שהם.

צ'קבוקס, לא סוג תוכן חדש

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

פילטרים שנבנים מהמוצרים

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

מוצר חדש בשלושה שדות

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

פנייה שלא הולכת לאיבוד

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

תהליך

מקבצים במייל לאתר חי, בכ-10 שבועות.

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

1
10–13.6 · חומרי גלם

לאסוף את הארכיון

התמונות הגיעו במיילים לפי נושא (שקיעות, סרדיניה, אגמים ושלכת, המצפה התת-ימי באילת ועוד), ועוד 95 תמונות מדרייב, 66 מג'ימייל ו-15 מאגינה. מקובצי ה-PDF של שני ספרי הילדים חילצתי את הכריכות. במקביל, גילה מילאה שאלון אפיון.

2
14–15.6 · מוקאפ

מוקאפ HTML מלא לשישה עמודים

ראשי, גלריה, אודות, תיק עבודות, ספרים וצור קשר, עם קובץ CSS משותף. באותם ימים עברתי 9 איטרציות על הדר המובייל, עד לגרסה שבה הלוגו במרכז, ההמבורגר מימין והכפתור משמאל, במיקום אבסולוטי ובלי הבלבול של flex ב-RTL.

מוקאפ תיק העבודות
תיק עבודות: שישה כרטיסים, עם טקסטים שעוד לא תאמו לתמונות
מוקאפ עמוד הספרים
ספרים: כרטיס לכל ספר. השם בכותרת עוד לא תוקן
מוקאפ צור קשר
צור קשר: טופס שנראה מוכן, אבל עוד לא שלח כלום
3
17–22.6 · בנייה

מהמוקאפ לאלמנטור

בניתי מחדש את כל שישת העמודים. כל סקשן הוא container עם ווידג'ט HTML אחד, כדי לשמור נאמנות מלאה למוקאפ, והפריסה נעשתה דרך REST API בסקריפטי Python. הגלריה התחילה עם 21 תמונות, ובין 30.6–1.7 העליתי תמונות נוספות מג'ימייל.

4
26.7 · חנות

223 תמונות, 223 מוצרים

כל תמונה הפכה למוצר variable עם 5 וריאציות, ואת מודל המחירים של גילה יישמתי כפי שהוא. המק"ט בנוי כ-GILA-<media_id>, כך שאפשר להריץ את הסקריפט שוב בלי ליצור כפילויות. באותו יום החנות נפתחה לציבור, ותיקנתי את המטבע מדולר לשקל.

5
16–19.8 · מסירה

מאתר יפה לכלי שגילה מנהלת

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

שפה עיצובית

קרם, דיו וזהב.

האופי הוא של גלריית אמנות: אלגנטי וחם, קרם וזהב, ותמונות גדולות. ה-Hero של דף הבית הוא שקיעה מעל הים. כל המחלקות ב-CSS מתחילות ב-gila-, כדי שלא יתנגשו באלמנטור, ועל כל תמונה בגלריה יש סימן מים "© גילה אולייר".

פלטה (מתוך ה-CSS החי)

קרם#f6f1eaרקע ראשי
קרם עמוק#ede7ddרקע משני
דיו#1c1912טקסט ומשטחים כהים
אפור חם#7a7267טקסט מושתק
זהב#b8922aכפתורים, CTA והדגשות
זהב בהיר#d0aa3eזהב משני

טיפוגרפיה

העין השלישיתFrank Ruhl Libre · כותרות
צילומי נוף, מאקרו של פרחים, שקיעות ומסעות.Assistant · גוף טקסט

סריף עברי לכותרות ופונט נקי לגוף הטקסט, וכל האתר בנוי RTL מלא.

הדר שקוף מעל השקיעה

ה-Hero של דף הבית ממלא את כל המסך, והתפריט נשאר שקוף עד גלילה של 60px.

הדר מובייל ב-9 איטרציות

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

פוטר רחב מהעמוד, בכוונה

הפוטר הורחב ל-1560px ול-4 עמודות, כשגוף העמוד הוא 1200px. פרטי הקשר קיבלו עמודה משלהם. נבדק ברוחבים 1560, 1024 ו-390, בלי גלילה אופקית.

עמודי מנהלה שאפשר לקרוא

Hero בסגנון האתר, תוכן עניינים דביק עם scroll-spy שמתקפל ל-<details> מתחת ל-980px, סעיפים ממוספרים וגרסה מותאמת להדפסה.

פיתוח

קוד קטן, שמחזיק את כל הזרימה.

הבסיס הוא WordPress עם Elementor Pro (הדר ופוטר ב-Theme Builder), תבנית Hello Elementor ו-WooCommerce. כל מה שייחודי לאתר נכתב ב-6 סניפטים מותאמים.

WordPressWooCommerceElementor ProHello ElementorCode SnippetsCookieAdminתוסף נגישותREST APIPython
[gila_gallery]

בונה את סרגל הפילטרים ואת הרשת ישירות מהמוצרים. התוצאה נשמרת בקאש (transient) שמתנקה בכל שינוי מוצר.

[gila_contact_form]

שולח מייל עם wp_mail ושומר כל פנייה כ-CPT "פניות מהאתר". מוגן ב-nonce, ב-honeypot ובחסימת שליחה כפולה.

gila_catalog_mode

מתג מצב הקטלוג: כפתורי "צרו קשר" ווואטסאפ, והפניה של העגלה והקופה לטופס עם מילוי מראש.

woocommerce_new_product

הקמה אוטומטית: 5 וריאציות, מחירים, תיאור ומק"ט לכל מוצר חדש בקטגוריית התמונות.

render_content

פילטר שמריץ do_shortcode בווידג'ט HTML של אלמנטור, רק על תוכן שמכיל [gila_. כך הטופס נשאר בתוך ה-grid של העמוד.

[gila_year]

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

מה נבדק לפני המסירה

  • 223 כרטיסים ו-10 כפתורי פילטר (כולל "הכל"). ספירת כל פילטר תואמת את מונה הקטגוריה, ואין אף תמונה שבורה.
  • הטופס: המייל נשלח (sent: true) והפנייה נשמרה (mail_sent: 1).
  • הגלריה החיה נבדקה שוב ב-1.10.2026, ועדיין מציגה 223 כרטיסים.

עמודי מנהלה לפי העובדות

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

מה עוד לא נמדד

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

כשהכל נראה תקין, ושום דבר לא עובד.

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

01

העריכות הצליחו, והמבקרים לא ראו כלוםשתי התקנות, שני מסדי נתונים

+
הסימפטום

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

האבחון

היו שתי התקנות נפרדות. photollier.com הוא עותק של התקנת הסטייג'ינג הישנה, עם מסד נתונים משלו, ואני עבדתי מול הישנה.

הפתרון

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

02

טופס שאמר "נשלח!" ולא שלח כלוםשארית מהמוקאפ

+
הסימפטום

הטופס הציג "✓ ההודעה נשלחה!", ושום פנייה לא הגיעה.

האבחון

טופס המוקאפ עשה רק preventDefault. הוא מעולם לא שלח דבר.

הפתרון

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

03

דף ברוחב 11,688 פיקסליםבגלל שדה שאף אחד לא רואה

+
הסימפטום

אחרי שהוספתי את הטופס, כל הדף קיבל גלילה אופקית. רוחב המסמך הגיע ל-11,688px.

האבחון

שדה ה-honeypot, שנועד לתפוס בוטים, הוסתר עם position:absolute; left:-9999px.

הפתרון

display:none. השדה עדיין שם בשביל הבוטים, והדף חזר לרוחב שלו.

04

העגלה "לא שומרת עוגיות"האבחון הראשון שלי היה שגוי

+
הסימפטום

נראה כאילו העגלה לא שומרת שום מוצר.

האבחון

האבחון הראשון שלי, "השרת בולע את Set-Cookie", היה שגוי. בפועל ניסיתי להוסיף לעגלה מוצר variable בלי לבחור וריאציה, ו-WooCommerce דחה את זה כמצופה. בנוסף, באנר העוגיות חוסם עד שלוחצים עליו.

הפתרון

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

05

קישור לטופס שפתח עמוד מוצרמילה שמורה של וורדפרס

+
הסימפטום

הקישור ‎/contact/?product=X, שאמור לפתוח את הטופס עם שם התמונה, הציג עמוד מוצר במקום עמוד הקשר.

האבחון

product הוא query var שמור של וורדפרס.

הפתרון

שיניתי את שם הפרמטר ל-gila_product.

06

מוצר חדש, בלי וריאציותההוק רץ מוקדם מדי

+
הסימפטום

מוצר שנוצר דרך ה-API לא קיבל את 5 הווריאציות האוטומטיות.

האבחון

save_post_product רץ לפני ש-WooCommerce משייך למוצר את הקטגוריות ואת התמונה.

הפתרון

העברתי את הלוגיקה להוקים woocommerce_new_product ו-woocommerce_update_product.

07

בורר גודל בעברית שנתקעואי אפשר היה לקנות

+
הסימפטום

בורר הגודל בעמוד המוצר "נתקע", ואי אפשר היה להשלים רכישה.

האבחון

מפתח המאפיין "גודל" נשמר לא מקודד, ו-WooCommerce חיפש slug.

הפתרון

sanitize_title('גודל') כמפתח, והתווית העברית כערך.

תצוגת המוצר

המוצר עצמו.

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

photollier.com/portfolio
עמוד תיק העבודות המלא

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

photollier.com
ה-Hero של דף הבית: שקיעה מעל הים
דף הבית

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

photollier.com/gallery
כרטיסי הגלריה
כרטיסי הגלריה

כל כרטיס הוא מוצר: תמונה עם סימן המים של גילה, כותרת, קטגוריה ושנה.

photollier.com/books
עמוד הספרים
ספרים

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

photollier.com/contact
עמוד צור קשר
צור קשר

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

photollier.com/terms
תקנון האתר
תקנון

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

תיבת ההזמנה במצב קטלוג
תיבת ההזמנה במצב קטלוג

5 אפשרויות ההזמנה, "לרכישת התמונה — צרו קשר" וכפתור וואטסאפ שבהודעה שלו כבר כתוב שם התמונה. (צולם ב-18.8.2026.)

תפריט הנגישות בהצהרת הנגישות
הצהרת הנגישות

12 הכלים ברשימה נלקחו מההגדרות של תוסף הנגישות בפועל. (צולם ב-19.8.2026.)

מובייל

אותה גלריה, בכף היד.

אודות במובייל
אודות
תיק עבודות במובייל
תיק עבודות
ספרים במובייל
ספרים
צור קשר במובייל
צור קשר
תקנון במובייל
תקנון
הצהרת נגישות במובייל
הצהרת נגישות

יש לכם ארכיון שמחכה להפוך לגלריה?

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

בואו נדבר →
פרויקטים נוספים

עוד עבודות שלנו

Scroll to Top
קבעו שיחת אסטרטגיה ←