Wix Pro Gallery: עיצוב הגלריה
8 דקות
רוצים גלריה שאי אפשר להתעלם ממנה? שנו והוסיפו עיצובים שיהפכו אותה לייחודית. תנו טאצ' מקצועי לגלריה וערכו את העיצוב של הפריסה, הצבעים, הפונטים ועוד.
כדי לערוך את העיצוב של ה-Pro Gallery:
- היכנסו ל-editor.
- הקליקו על אלמנט ה-Pro gallery בעמוד.
- הקליקו על Settings (הגדרות).
- הקליקו על הלשונית Design (עיצוב).
- לבחור מה הייתם רוצים לעצב ולהתאים:
Overlay & Icons (שכבת כיסוי ואייקונים)
שכבת כיסוי מופיעה מעל התמונה ומוסיפה אפקט כשמעבירים את העכבר מעליה. אתם יכולים לערוך את האפקט הזה וגם את האייקונים שלכם.
- הקליקו על Overlay & Icons (שכבת כיסוי ואייקונים).
- בחרו אם הכיסוי יהיה מלא או חלקי וערכו את ההגדרות הבאות:
- Full Overlay: שכבת הכיסוי מכסה כל פריט הגלריה.
- Gradient: הקליקו על המתג כדי ליצור שכבת כיסוי מדורגת.
- Color & Opacity 1 and 2: הקליקו על תיבת הצבע הרלוונטית כדי לשנות את שני צבעי הדירוג, וגררו את פס ההזזה כדי לשנות את רמת השקיפות של הצבעים.
- Gradient Direction: גררו את פס ההזזה כדי לשנות את כיוון ההדרגה של שכבת הכיסוי.
- Icon color: הקליקו על תיבת הצבע כדי לשנות את הצבע של האייקונים בגלריה שמופיעים במעבר עם העכבר.
- Color overlay (צבע שכבת הכיסוי): הקליקו על תיבת הטקסט כדי לבחור צבע וגררו את פס ההזזה כדי לשנות את רמת השקיפות של שכבת הכיסוי.
- Icon Color: הקליקו על תיבת הצבע ובחרו צבע חדש לאייקונים בגלריה.
- Gradient: הקליקו על המתג כדי ליצור שכבת כיסוי מדורגת.
- Partial Overlay: שכבת הכיסוי תכסה רק חלק מהפריט בגלריה.
- Set size in: בחרו אם הגודל של שכבת הכיסוי יהיה באחוזים או בפיקסלים.
- Size: גררו את פס ההזזה או כתבו ערך כדי לבחור את גודל שכבת הכיסוי.
- Overlay starts from: בחרו את המיקום של שכבת הכיסוי.
- Padding: גררו את פס ההזזה כדי לבחור כמה מרווח יהיה בין המסגרת של הגלריה לבין שכבת הכיסוי.
- Gradient: הקליקו על המתג כדי ליצור שכבת כיסוי מדורגת.
- Color & Opacity 1 and 2: הקליקו על תיבת הצבע הרלוונטית כדי לשנות את שני צבעי הדירוג, וגררו את פס ההזזה כדי לשנות את רמת השקיפות של הצבעים.
- Gradient Direction: גררו את פס ההזזה כדי לשנות את כיוון ההדרגה של שכבת הכיסוי.
- Icon color: הקליקו על תיבת הצבע כדי לשנות את הצבע של האייקונים בגלריה שמופיעים במעבר עם העכבר.
- Color overlay (צבע שכבת הכיסוי): הקליקו על תיבת הטקסט כדי לבחור צבע וגררו את פס ההזזה כדי לשנות את רמת השקיפות של שכבת הכיסוי.
- Icon Color: הקליקו על תיבת הצבע ובחרו צבע חדש לאייקונים בגלריה.
- Full Overlay: שכבת הכיסוי מכסה כל פריט הגלריה.
- בחרו אפקט לשכבת הכיסוי מהאפשרויות הבאות:
- No effect: לא יופעל אפקט על שכבת הכיסוי.
- Fade in: שכבת הכיסוי תופיע בהדרגה במעבר עם העכבר.
- Expand: שכבת הכיסוי תתרחב במעבר עם העכבר.
- Slide up: שכבת הכיסוי תגלוש למעלה במעבר עם העכבר.
- Slide right: שכבת הכיסוי תגלוש ימינה במעבר עם העכבר.
Texts (טקסט)
אתם יכולים לשנות את העיצוב של הטקסט בכותרת ובתיאור, אם בחרתם להציג אותם בטאב
Layout (פריסה). אם אתם לא רואים את אפשרויות
הטקסט (שלב 1 בהמשך), עברו לטאב
Layout, הקליקו על
Customize Layout (עריכת הפריסה) וסמנו את התיבות שליד
Title ו-
Description כדי שהכותרת והתיאור יופיעו.
- הקליקו על Texts (טקסטים).
- עצבו את הטקסט באמצעות האפשרויות הבאות:
- Info to display: סמנו את התיבות שליד הפרטים שאתם רוצים להציג (כותרת, תיאור ומספר שקף).
שימו לב: מספר השקף מופיע רק בפריסת שקף, כשבחרתם שהשקפים ישתנו אוטומטית.
- Title style and color: בחרו את הפונט והצבע של הטקסט בכותרת.
- Description font style and color: בחרו את הפונט ואת הצבע של הטקסט בתיאור.
- Horizontal alignment: בחרו איך ליישר את הטקסט לרוחב (לשמאל, למרכז או לימין).
- Vertical alignment: בחרו איך ליישר את הטקסט לאורך (לשמאל, למרכז או לימין).
- Text vertical padding: גררו את פס ההזזה כדי לבחור כמה מרווח יהיה בין הטקסט לאורך לבין המסגרת.
- Text horizontal padding: גררו את פס ההזזה כדי לבחור כמה מרווח יהיה בין הטקסט האופקי לבין המסגרת.
- Info to display: סמנו את התיבות שליד הפרטים שאתם רוצים להציג (כותרת, תיאור ומספר שקף).
Buttons (כפתורים)
החלק הזה יופיע אם בחרתם להציג את הכפתור
Load More (לטעון עוד) בטאב
Layout (פריסה).
כאן אתם יכולים לשנות את הטקסט, הפונט, הצבע ורדיוס הפחנות של כפתור Load more (לטעון עוד).
כאן אתם יכולים לשנות את הטקסט, הפונט, הצבע ורדיוס הפחנות של כפתור Load more (לטעון עוד).
- הקליקו על Buttons (כפתורים).
- ערכו את הכפתורים באמצעות האפשרויות הבאות:
- Button text: הכניסו את הטקסט שמופיע על גבי הכפתור.
- Font style & color: בחרו את הפונט ואת הצבע של הכפתור.
- Button color & opacity : גררו את פס ההזזה כדי לשנות את הצבע והשקיפות של הכפתור והקליקו על תיבת הצבע כדי לבחור צבע.
- Border width & color גררו את פס ההזזה כדי לשנות את רוחב המסגרת והקליקו על תיבת הצבע כדי לבחור צבע.
- Corner Radius: גררו את פס ההזזה כדי לשנות את רדיוס הפינות.
Navigation Arrows (חיצי ניווט)
אתם יכולים להפעיל חיצי ניווט בפריסות Thumbnails, Slider, Slideshow ו-Column. אתם יכולים לערוך את המיקום, הגודל והצבע שלהם כדי לעזור לגולשים שלכם לנווט בגלריה בקלות.
- הקליקו על Navigation Arrows.
- הקליקו על המתג כדי להפעיל חיצים בגלריה.
- ערכו את עיצוב החצים באמצעות האפשרויות הבאות:
- Arrow style: הקליקו כדי לבחור עיצוב חץ, או הקליקו על אייקון ההוספה
להעלות משלכם. - Arrow background: הקליקו על התפריט הנפתח כדי לבחור רקע לחץ, הצללה, במסגרת או בלי רקע.
- Shadow: הוסיפו צל קל מסביב לחץ.
- מסגרת: הוספת מסגרת מסביב לחץ. הקליקו על תיבת הצבעים כדי לשנות את צבע התיבה וגררו את פסי ההזזה הרלוונטיים כדי לשנות את השקיפות שלה ולעגל את הפינות שלה.
- None: ללא רקע לחץ.
- Arrow size: גררו את פס ההזזה כדי להגדיל או להקטין את הגודל של חיצי הניווט.
- Arrow color: הקליקו על תיבת הצבע כדי לבחור את צבע חץ הניווט. בחרו צבע מתוך צבעי האתר שלכם או בחרו צבע משלכם.
- Arrow position: בחרו בתיבת הסימון הרלוונטית כדי להציג את חיצי הניווט בגלריה או מחוצה לה. שימו לב: חיצי ניווט בגלריה עלולים לכסות חלק מהפריטים הגלריה.
- Center arrows to: בחרו למרכז את החצים משני הצדדים של הגלריה, או התמונות או הטקסט.
- Horizontal Padding: גררו את פס ההזזה כדי לשנות את המרווח בין החצים למסגרת הגלריה.
- Arrow style: הקליקו כדי לבחור עיצוב חץ, או הקליקו על אייקון ההוספה
Item Style (סגנון הפריט)
כל תמונה או סרטון בגלריה הוא פריט. אתם יכולים לשנות את העיצוב של הפריטים גם בתצוגה רגילה וגם במצב של מעבר עם העכבר.
- הקליקו על Item Style (סגנון הפריט).
- ערכו את התצוגה הרגילה של הפריט תחת Item Style (סגנון הפריט):
- רוחב וצבע המסגרת: גררו את פס ההזזה כדי לשנות את רוחב המסגרת והקליקו על תיבת הצבע כדי לבחור צבע.
- Corner radius: גררו את פס ההזזה כדי לעגל או לרבע את הפינות.
שימו לב: האפשרויות Border width & color ו-Corner radius מופיעות רק כשבוחרים לחתוך את התמונות הממוזערות בהגדרות הפריסה, וחלות רק על התמונה הראשית (לא על התמונות הממוזערות).
- Shadow: הקליקו על המתג כדי להציג או להסתיר צללית:
- כשהמתג פועל: מופיעה צללית מסביב לפריט בגלריה. ערכו את השקיפות, הצבע, הטשטוש, הכיוון והגודל של הצללית.
- כשהמתג כבוי: לא מופיעה צללית מסביב לפריט בגלריה.
- בחרו מה יקרה כשגולש יעבור עם העכבר מעל הפריט בגלריה:
- No effect: לא יופעל אפקט במעבר עם העכבר.
- Zoom in: התמונה תגדל במעבר עם העכבר.
- Blur: התמונה תהפוך למטושטשת במעבר עם העכבר.
- Grayscale: התמונה תהפוך לשחור-לבן במעבר עם העכבר.
- Shrink: התמונה תתכווץ במעבר עם העכבר.
- Invert: צבע התמונה יתהפך במעבר עם העכבר.
- Color in: התמונה תהפוך משחור-לבן לצבעונית במעבר עם העכבר.
- Darken: התמונה תהפוך לכהה יותר במעבר עם העכבר.
- בחרו מה יקרה בזמן שהתמונה נטענת:
- Blurred image: בזמן הטעינה תופיע גרסה מטושטשת של התמונה.
- Color placeholder: יופיע צבע במקום התמונה בזמן שהיא נטענת.
אנימציות גלילה / שקפים
הוסיפו אפקט אנימציה שמופיע כשהגולשים גוללים את הגלריה שלכם. אתם יכולים להתאים אישית את האנימציה שבחרתם על ידי הוספת מעבר ועריכת הזמן שלו.
שימו לב:
- האנימציות הזמינות תלויות בפריסת הגלריה שתבחרו.
- עריכה של הגדרות האנימציה זמינה רק בפריסות עם גלילה אופקית (horizontal scroll).
הוספת אנימציית גלילה:
- הקליקו על Scroll Animations (אנימציות גלילה).
- בחרו מה קורה כשגולשים גוללים בגלריה:
- No effect: לא יופעל אפקט בגלילה.
- Fade in: תמונות מופיעות בהדרגה במהלך הגלילה.
- Grayscale: במהלך הגלילה התמונה הופכת לשחור-לבן.
- Slide up: התמונה גולשת למעלה בזמן הגלילה.
- Expand: התמונה תגדל כשהגלילה גדלה.
- Shrink: התמונה הולכת וקטנה במהלך הגלילה.
- Zoom out: התמונה מתרחקת במהלך הגלילה.
- One color: צבע יחיד יופיע על התמונות בזמן הגלילה.
התאמה אישית של האנימציה:
- הקליקו על Customize Animations (עריכת האנימציות).
- ערכו את הגדרות האנימציה שלכם:
- Transition style: הקליקו על התפריט הנפתח כדי לשנות את אפקט המעבר של פריטי הגלריה. האפקט הזה יופיע במהלך הגלילה, כשהגולשים עוברים מפריט אחד לאחר.
- Duration: גררו את פס ההזזה כדי לשנות את משך האנימציה.
מצב הרחבה (Expand Mode)
החלק הזה מופיע רק אם בחרתם באפשרות "Open in Expand Mode" ("פתיחה במצב הרחבה") בחלונית ההגדרות של Pro Gallery, כשמשתמש מקליק על פריט בגלריה. כאן אתם יכולים לערוך את מצב ההרחבה של הגלריה כדי שיתאים לעיצוב ולמותג של האתר.
- הקליקו על Expand Mode (מצב הרחבה).
- הקליקו על Customize Expand Mode (ערכית מצב ההרחבה) וערכו את מצב ההרחבה של הגלריה באמצעות האפשרויות הבאות:
- What info is shown? (איזה מידע מוצג)בחרו להציג כותרת, תיאור ו/או לינק.
- Where does it appear? (איפה זה מופיע)בחרו איפה אתם רוצים למקם את המידע:
- Side: המידע מופיע מימין לפריט בגלריה.
- Bottom: המידע מופיע מתחת לפריט הגלריה.
- When does it show? (מתי זה מופיע)בחרו מתי יוצג המידע:
- Always: המידע יוצג תמיד.
- When clicking info icon: המידע יוצג רק כשהגולשים יקליקו על אייקון המידע בפינה השמאלית העליונה של Expand Mode.
- Allow full screen: בחרו כדי לאפשר למבקרים לצפות בפריטי גלריה במסך מלא.
- Background color: הקליקו על תיבת הצבע כדי לבחור צבע רקע למצב ההרחבה. בחרו צבעים מהאתר שלכם או הוסיפו צבע.
- Icon color: הקליקו על תיבת הצבע כדי לבחור צבע לאייקונים במצב הרחבה. בחרו צבעים מהאתר שלכם או הוסיפו צבע.
- Title style (סגנון הכותרת):
- הקליקו על התפריט הנפתח כדי לערוך את הפונט, הסגנון והגודל מתוך בוחר הפונטים.
- הקליקו על תיבת הצבע כדי לשנות את צבע הטקסט של הכותרת.
- Description style (סגנון התיאור):
- הקליקו על התפריט הנפתח כדי לערוך את הפונט, הסגנון והגודל מתוך בוחר הפונטים.
- הקליקו על תיבת הצבע כדי לשנות את צבע הטקסט של התיאור.
- Text alignment: בחרו את היישור של הטקסט: לשמאל, למרכז או לימין.
