אז איך עשיתי את זה? הדרכה מקצועית למסך הפתיחה באתר החדש שלי >>>

שימוש סטנדרטי, לא בבית ספרנו

ברוך ה' לאחרונה השקתי את האתר החדש שלי!

אחת השאלות ששאלו אותי הייתה: "איך עשית את העיגולים במסך הפתיחה?"

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

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

מוקאפ מסך פתיחה.png

וככה הוא נראה אחרי מעבר עכבר על אחד העיגולים:
(בתוספת אנימציה מגניבה – תצטרכו להיכנס לאתר כדי לראות בעצמכם!)

מוקאפ מסך פתיחה אחרי מעבר עכבר.png

אז איך הגדרתי שבמעבר עכבר על העיגול – תמונה של אחד האתרים שבניתי תגלוש למסך?

הכל טמון בווידג'ט פשוט מאוד: קופסה מתהפכת.

אבל רגע! אין כאן היפוך, ואין כאן טקסט או כפתור! איך הגעת לקופסה מתהפכת?!

ווידג'ט קופסה מתהפכת.jpg

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

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

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

את השדות של הכותרת והתיאור השארתי ריקים. כך:

הגדרות צד קדמי.jpg

ברקע של הצד הקדמי – הגדרתי שהרקע יהיה שקוף, כך:

רקע צד קדמי.jpg

ומה מאחורה?

קודם כל, כל התוכן ריק (כולל השדה של הכפתור, זאת אומרת שלא יופיע כפתור), חוץ מקישור שהחלתי על כל הקופסה:

הגדרות צד אחורי.jpg

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

רקע צד אחורי.jpg

ומה עם ההיפוך? הקופסה הרי לא מתהפכת במעבר עכבר…

צודקים! את החלפת הצדדים הגדרתי כך:

הגדרות היפוך.jpg

וזהו!

איך עוד אפשר להשתמש בטריק הזה?

מוזמנים לנסות ולמצוא דרכים יצירתיות להשתמש בווידג'ט הזה בצורה לא שגרתית. אשמח לראות את התוצאות!

בהצלחה!

 

Mockup credit: Website mockup psd created by graphictwisterwww.freepik.com

אולי תאהבו גם...

אהבת את מה שראית?

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