השתמשו בפס Pagination Bar כדי להעניק למבקרים דרך פשוטה ואינטואיטיבית לדפדוף בתוך אוסף גדול של פריטים בתוך Repeater או Gallery. פס הפאגינציה מאפשר למבקרים לנווט בין "דפים", כלומר קבוצות של פריטים המוצגות בעמוד דינמי.

השדה Items per load שבמאגר הנתונים קובע את מספר הפריטים המרבי שיוצגו בכל "דף".

מספר הדפים שפס הפאגינציה יציג מחושב לפי סך כל הפריטים שהמאגר שולף, חלקי הערך שהוזן בשדה Items per load.לדוגמה, אם קיימים 50 פריטים גלויים באוסף והגדרתם את Items per load ל-10, פס הפאגינציה יציג 5 דפים (50/10=5). כל דף מייצג קבוצת פריטים, ופס הפאגינציה מאפשר למבקרים לנווט ביניהן.

שלב 1 | הוספת פס פאגינציה והתאמה אישית

הוסיפו Pagination Bar לאתר והתאימו אותו כך שישתלב באופן מושלם עם העיצוב של האתר בהתאם לצרכים הוויזואליים שלכם.

עברו לעורך האתר Wix Studio Editor.

גשו לעמוד הדינמי הרלוונטי שמיועד להציג מספר פריטים:

• לחצו על Pages בצד שמאל של העורך.

• לחצו על העמוד הדינמי הרלוונטי שיכול להציג מספר פריטים במקביל.🔎 הערה: פסי פאגינציה אינם רלוונטיים לעמודים דינמיים המציגים פריט אחד בלבד בכל פעם.

כדי להוסיף פס פאגינציה:

• לחצו על Add Elements בצד שמאל של העורך.

• לחצו על Menu & Search, ובחרו ב-Pagination Bars.

• גררו את פס הפאגינציה שברצונכם להוסיף אל תוך העמוד

התאימו את ההגדרות, הפריסה והעיצוב של פס הפאגינציה:

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

• בחרו את פריסת הפס – אופקית או אנכית – בהתאם לעיצוב העמוד.

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

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

Settings

בחרו את סוג כפתורי הניווט שיוצגו בפס הפאגינציה.

• לחצו על סמל Settings.

• תחת Button display, בחרו אחת מהאפשרויות הבאות:

  Text: הפס יציג עד ארבעה כפתורי ניווט: 'Previous', 'Next', 'First', ו-'Last'. ניתן לערוך את הטקסט של כל כפתור כך שיתאים לצרכים שלכם.

  Arrows: הפס יציג ארבעה זוגות של חיצים המשמשים ככפתורי ניווט עבור: 'Previous', 'Next', 'First', ו-'Last'.

• לחצו על השדה Accessible names והזינו טקסט שמתאר את הרכיב עבור קוראי מסך. טקסט זה אינו מוצג באתר החי.

פריסה (Layout)

לחצו על Change Layout כדי להתאים את פריסת פס הפאגינציה, ובחרו מתוך האפשרויות הבאות:

Show current page:

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

Button display:

בחרו האם הכפתורים יוצגו כטקסט או כחיצים.

Show first & last buttons:

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

Spacing between inner / outer buttons:

כוונו את המרווחים בין הכפתורים הפנימיים והחיצוניים.

Page / button padding:

התאימו את הריווח הפנימי (padding) של הרכיב והכפתורים.

Direction:

הגדירו את כיוון הכפתורים – מימין לשמאל או משמאל לימין.

Alignment:

הגדירו את יישור הכפתורים – לשמאל, למרכז, לימין או Justify (פריסה מלאה).

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

עיצוב (Design)

לחצו על סמל Design בלוח הבקרה הימני (Inspector panel).

תחת What do you want to design?, בחרו את הרכיב שברצונכם לעצב.

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

• צבעי רקע (background fills)

• גבולות (borders)

• פינות מעוגלות (corners)

• גודל האייקונים (icon size)

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

שלב 2 | חיבור ל-CMS

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

לחצו על פס הפאגינציה.

לחצו על סמל Connect to CMS.

לחצו על התפריט הנפתח Choose a dataset ובחרו את אותו מאגר נתונים (dataset) שמחובר אל ה-Repeater או ה-Gallery שלכם.

במידת הצורך התאימו את מספר הפריטים שיוצגו בכל "דף" בפס הפאגינציה:

🔎 הערה: מספר זה הוא גם המספר המרבי של פריטים שנטענים בכל פעם בתוך ה-Repeater או ה-Gallery.

כדי לשנות זאת, עברו להגדרות המאגר (dataset settings) ועדכנו את הערך בשדה Items per load בהתאם לצורך.

התאימו את הגודל של פס הפאגינציה באמצעות מתיחה או שינוי גבולות ידני:

Stretch to width:

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

Manually:

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

לסיום:

• לחצו על סמל Preview בפינה הימנית העליונה כדי לבדוק כיצד פס הפאגינציה פועל בתצוגה מקדימה.

• לחצו על Publish כדי לפרסם את השינויים באתר החי.