Divi: כיצד ליצור מסכות רקע מונפשות ודפוסים בעת גלילה

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

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

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

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

אנחנו חושבים שתאהבו את התוצאה.

בואו נתחיל!

סקירה

הנה המחשה מהירה של איך תיראה אנימציית גלילה ברקע במדריך זה.

הרעיון

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

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

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

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

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

נתחיל ביצירת דף עם Divi Builder

כדי להתחיל, תצטרך לבצע את הפעולות הבאות:

מלוח המחוונים של וורדפרס, עבור אל עמודים> הוסף חדש ליצור דף חדש.

תן לזה כותרת שנראית לך הגיונית ולחץ השתמש ב- Divi Builder

לאחר מכן לחץ על התחל לבנות (בנה מאפס)

לאחר מכן יהיה לך בד ריק להתחיל בעיצוב ב- Divi.

קראו גם: Divi: כיצד להשתמש ב-"Gradient Builder" כדי לייפות את התמונות שלך

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

עיצוב רקע של המדור

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

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

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

• שוליים: 80 vh (למעלה ולמטה)
• ריפוד: 0px (למעלה ולמטה)

עיצוב גרדיאנט רקע עבור הקטע

כעת נוכל להוסיף גרדיאנט רקע מותאם אישית לקטע.

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

• עצירות שיפוע:
  • 0%: #4158d0
  • 50%: #c850c0
  • 100%: #ffcc70

לאחר מכן שנה את כיוון השיפוע הליניארי:

• כיוון שיפוע: 270 מעלות

הוסף שורות למקטע

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

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

כעת אמורה להיות לך שורה עליונה עבור אנימציית גלילה ברקע ושורה עבור התוכן הרגיל.

התאמה אישית של קו

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

פתח את הגדרות הקו. תחת הכרטיסייה מתקדם, עדכן את הדברים הבאים:

• מיקום: מוחלט

זה יאפשר לקו לחפוף את הקטע מבלי לתפוס מקום ממשי במסמך. 

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

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

• Aquasize Column Heights: כן
• רוחב: 100%
• רוחב מרבי: 100%
• גובה: 100%
• ריפוד: 0px (למעלה ולמטה)

עכשיו אולי לא תוכלו לראות את הקו, אבל עכשיו הוא מכסה בצורה מושלמת את הרקע של כל הקטע.

צור דוגמת רקע עבור הקו

בדוגמה זו נוסיף את התבנית פתיתי ניר ססגונים כרקע קו.

פתח את הגדרות הקו. תחת האפשרות רקע, בחר את הכרטיסייה דפוס רקע ועדכן את הדברים הבאים:

• תבנית רקע: קונפטי
• תבנית:
  • צבע: #f6bef7
  • גודל: גודל מותאם אישית
  • רוחב: 35 vw
  • מקור חוזר: מרכז

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

הוסף אפקטי גלילה לקו

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

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

בחר את הכרטיסייה תנועה אופקית ועדכן את הדברים הבאים:

• אפשר תנועה אופקית: כן
• היסט התחלתי: 0,5 (ב-0%)
• אמצע היסט: 0 (מ-40% ל-60%)
• היסט סיום: -0,5 (ב-100%)

פעולה זו תזיז את דפוס הרקע של הקו מ-50 פיקסלים שמאלה ומסתיימת ב-50 פיקסלים ימינה.

בחר בכרטיסייה "הגדלה והקטנה" ועדכן את הפרטים הבאים:

• אפשר קנה מידה למעלה ולמטה: כן
• קנה מידה התחלתי: 150% (ב-0%)
• קנה מידה בינוני: 100% (מ-40% ל-60%)
• סולם סיום: 150% (ב-100%)

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

בחר את הכרטיסייה "סיבוב " ועדכן את הדברים הבאים:

• אפשר סיבוב: כן
• סיבוב התחלתי: 10 מעלות (ב-0%)
• סיבוב אמצע: 0 מעלות (מ-40% ל-60%)
• סיבוב סיום: -10 מעלות (ב-100%)

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

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

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

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

• מסכה: Layer Blob
• צבע: #ffffff
• שינוי מסכה: היפוך אופקי, היפוך

הוסף אפקטי גלילה לעמודה

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

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

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

• אפשר סיבוב: כן
• סיבוב התחלתי: -15 מעלות (ב-0%)
• סיבוב אמצע: 0 מעלות (מ-40% ל-60%)
• סיבוב סיום: 15 מעלות (ב-100%)

הסתר את הצפת הקטע

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

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

• גלישה אופקית: מוסתרת
• גלישה אנכית: מוסתרת

עכשיו זה נראה טוב יותר.

ראה גם: Divi: 12 שילובים של מסכות ודוגמאות רקע

הוספת תוכן לשורה שנוצרה למטרה זו

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

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

תוצאה סופית

בואו נסתכל על התוצאה הסופית של העיצוב שלנו.

הורד את DIVI עכשיו!!!

סיכום

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

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

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

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

אל תהססו להתייעץ גם עם המדריך שלנו בנושא יצירת בלוג וורדפרס או על אחד על Divi: הנושא הטוב ביותר בוורדפרס בכל הזמנים.

אבל בינתיים, שתף מאמר זה ברשתות החברתיות השונות שלך.

...