רבולושן סליידר הוא תוסף המצגות המתקדם ביותר בעולם עבור וורדפרס. במדריך זה נסקור את האפשרויות המרכזיות שבתוסף שיאפשרו לכם לעצב את סליידרים לאתר האינטרנט שלכם.
מסך פתיחה
בלוח הבקרה לחצו על לשונית Revolution Slider. במסך הפתיחה תראו את הסליידרים שכבר קיימים במערכת או אפשרות להוסיף סליידר חדש.
כדי לערוך סליידר קיים יש ללחוץ על התמונה שלו. במעבר על תמונת הסליידר, לחיצה על אייקון גלגל השיניים תוביל לעריכת הגדרות הסליידר ולחיצה על אייקון העיפרון תוביל לחלון עריכת השקופיות. לחיצה על החץ תפתח אפשרויות נוספות: ייצוא, שכפול, מחיקה ותצוגה מקדימה.
יצירת סליידר חדש
חלון ההגדרות מחולק לעמודה המרכזית עם ההגדרות החשובות ועמודת צד עם טאבים שפותחים אפשרות התאמה אישית של כל פרט ופרט. בצד המסך תמצאו סרגל עם 5 כפתורים צבעוניים לניווט מהיר שילוו אתכם לכל אורך העבודה, למרות שהכפתורים לא תואמים לשיטת הכתיבה העברית (RTL) – לחיצה עליהם עדיין עובדת ועוזרת.
1. מקור תוכן (Content Source)
כברירת מחדל רבולושן סליידר מופעל על מצב Default והוא יציג בשקפים את התוכן שתוסיפו לו בעריכת השקופיות. כפי שניתן לראות רבולושן תומך ביצירת סליידרים מבוססי תוכן ממקור חיצוני (פייסבוק, יוטיוב, אינסטגרם, פוסטים, מוצרים ועוד), זה מצריך ידע מתקדם כדי ליצור מצגות מבוססי תוכן ממקור אחר.
2. כותרת סליידר (Slider Title & Shortcode)
בשדה הראשון (משמאל) תכתבו את שם הסליידר כפי שיופיע במערכת, בשדה השני תנו לסליידר מזהה ובשלישי תקבלו את השורטקוד של הסליידר. כדי למנוע בעיות הימנעו משימוש בשם ומזהה שכוללים אותיות בעברית והשתמשו באותיות באנגלית ובמספרים. חשוב לציין שחייבים לתת כותרת לסליידר, אחרת אי אפשר להתקדם לעריכת השקופיות.
3. סוג סליידר (Slider Type)
החל מרבולושן גרסא 5 נוספה אפשרות ליצור לא רק סליידרים, אלא גם קרוסלות וסצנות הירו. בחירה של כל אחד משלושת המצבים תציג טמפלטים מוכנים המשלבים אפשרויות סגנון ועיצוב (שניתן לשנות באופן ידני), הטמפלטים שימושיים מאד כדי להכיר את יכולות ואפשרויות המערכת.
Standard Slider – מצב זה הוא המצב הרגיל של מצגת עם מספר שקפים כפי שהיה ברבולושן בגרסאות קודמות
Hero Scene – מצב זה נועד למי שמעוניין לשים רק שקופית אחת שלא תתחלף
Carousel Slider – קרוסלת שקפים שמוצגים אחד ליד השני
4. פריסת סליידר (Slider Layout)
כדי שהסליידר יופיע באופן מיטבי באתר, חשוב לבחור את הפריסה המתאימה לסליידר. ניתן לבחור מבין 3 אפשרויות:
Auto – סליידר במצב אוטומט יציג את הסליידר ביחסים שתקבעו לו (רוחב וגובה). שימו לב שכשאר משתמשים בסליידר באמצעות ה-Builder רוחב הסליידר נקבע לפי רוחב העמודה.
Full Width – סליידר במצב רוחב מלא יציג את תמונת הרקע לכל רוחב הדפדפן.
Full Screen – סליידר במצב מסך מלא נפרס על כל גודל הדפדפן ומתאים את עצמו לפי רזולוציית המסך של הגולש
גודל הגריד (Layer Grid Size)
הגריד מגדיר את גבולות האזור שבו מוצגים האלמנטים (כותרות ותמונות) שתוסיפו בתוך הסליידר (שימו לב: הגריד לא משפיע על רקע השקופית).
עבור סליידרים במצב אוטומטי או רוחב מלא: גובה הגריד יקבע את גובה הסליידר שלכם, רוחב הגריד יקבע את גודל האיזור שבו יוצגו האלמנטים. לדוגמא: בחרתם סליידר ברוחב מלא, רקע התמונה של השקופיות יופיע לכל רוחב המסך, אבל התוכן שתוסיפו בשקופית יופיע רק במרכז המסך בתוך אזור הגריד. גם כדי לשמור על יחס תקין של מצגת עבור התקנים ניידים (רספונסיב) חשוב לשמור על רוחב גריד מקסימאלי של 940 או 1140 פיקסל בהתאם לרוחב האתר בערכת העיצוב שלכם.
גריד מותאם אישית (Custom Grid Size)
בגרסא זאת נוספה האפשרות לשלוט על גודל הגריד במצב רספונסיב. לחיצה על הסוויצ׳ר וסימון אפשרות זאת כ-On תאפשר לכם לקבוע שהמצגת שלכם לא תוקטן באותו יחס עבור סמארטפונים, אלא תקבל יחס שונה ומותאם אישית עבור כל התקן שתבחרו.
אפשרויות מתקדמות
בעמודה הימנית תמצאו אינספור הגדרות ואפשרויות עבור המצגת שלכם. בחרנו עבורכם את ההגדרות הפופולאריות והחשובות
אפשרויות כלליות (General Setting)
Slideshow – שליטה על עצירת שקופית בעת מעבר עכבר על המצגת, עצירת המצגת אחרי X זמן או אחרי X פעמים שהשקופיות מתחלפות, ניגון שקפים באופן ראנדומלי וניגון חוזר של שקף בודד
Defaults – הגדרות ברירת מחדל עבור כל השקופיות שבמצגת: משך הזמן של שקופית, מעבר בין שקופיות, אורך הזמן של המעבר והגדרות רקע
Progress Bar – אפשרות להציג פס חיווי בראש או תחתית המצגת, ניתן לקבוע את הגובה והצבע של פס החיווי
אפשרויות עיצוב (Layout & Visual)
Appearance – הוספת צל לתחתית המצגת, יצירת מסיכה של נקודות שחורות או לבנות ע״פ המצגת, רקע המצגת (מופיע בזמן הטעינה ומעבר בין שקופיות) והוספת מסגרת למצגת
Spinner – תוכלו לבחור את האנימציה שתופיע בזמן הטעינה של המצגת
Mobile – הסרת מצגת ממובייל, ביטול אפקט KenBurn במכשירי מובייל ואפשרויות הסתרת אלמנטים ושכבות לפי רוחב התקן
אפשרויות ניווט (Navigation)
Arrows & Bullets – הוספת חיצי או נקודות ניווט, בגרסא זאת נוספו אפשרויות עיצוב ותצוגה לחיצים (מיקום, מרווח, הסתרה לפי זמן או התקן ועוד)
Tabs & Thumbs – אפשרות להוספת טאבים או תמונות ממוזערות למעבר בין שקופיות
Touch – אפשרויות מתקדמות עבור מסכי מגע
Misc – אפשרויות לניווט באמצעות מקלדת
אפקט פרלקס (Parallax)
בלשונית זאת תוכלו להגידר אפקט Parallax למצגת שלכם
טיפול בבעיות (Problem Handling)
בלשונית זאת תוכלו להגדיר תמונה חילופית עבור התקנים ניידים ו/או דפדפן אקספלורר 8 שלא תומכים בצורה מושלמת ברבולושן ועוד
פונטים (Google Fonts)
בלשונית זאת תוכלו להוסיף פונטים שמוטמעים באתר שלכם או מתוך מאגר הפונטים של Google. לחצו על כפתור Add New Font > כתבו את שם הפונט כפי שהוא מוגדר בקבצי ה-css + המשקלים בהם הוא תומך (לדוגמא: Open+Sans+Hebrew:400,600,700). אחרי שהוספתם אותו לרשימה תוכלו להשתמש בו בעריכת השקופית