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

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

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

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

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

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

בואו נתחיל!

סקירה

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

הרעיון

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

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

לאחר מכן נוכל להוסיף מסיכת רקע לעמודה.

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

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

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

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

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

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

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

לאחר מכן יהיה לך בד ריק להתחיל בעיצוב ב- 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
  • מקור חוזר: מרכז

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

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

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

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

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

• אפשר תנועה אופקית: כן
• היסט התחלתי: 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: הנושא הטוב ביותר בוורדפרס בכל הזמנים.

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

...