Divi: כיצד להתאים אישית אלמנט רשת במודול "תיק עבודות שניתן לסינון"

האם תרצה לדעת כיצד להתאים אישית את רכיבי הרשת של מודול ה- Filterable Portfolio של Divi עקבו אחרינו במדריך הזה...

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

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

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

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

מהו מודול תיק העבודות הניתן לסינון ב-Divi?

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

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

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

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

תחומים שיש לקחת בחשבון בעת ​​יצירת תיק העבודות הניתן לסינון של Divi

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

• כותרת הפרויקט
• קטגוריית פרויקט
• Vignette
• סינון טקסט
• תמונה ממוזערת על ריחוף
• דִפּוּף

זו לא רשימה מלאה, ואפילו לא התחלנו לדבר על איך CSS הוסיפה התאמות אישיות עמוקות יותר למודול הזה!

כיצד נתאים אישית את מודול ה-Filtable Portfolio של Divi

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

פריסת האלמנטים במצגת "כנס Divi"

פריסת אלמנטים בדף "מדריך יוגה מקוון של Divi"

אתה יכול להוריד בקלות את שתי הפריסות מ- Divi Builder. 

עכשיו בואו נתחיל!

ראה גם: Divi: בחר בין פריסת הרשת והפריסה ברוחב המלא של מודול הפורטפוליו הניתן לסינון

התאמה אישית של מודול תיק העבודות המסונן של Divi: "מהדורת כנס Divi"

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

היכנסו לספריית Divi Layout

לחץ על הסמל "טען מהספרייה"כדי לגשת לספריית הפריסה של Divi

אתר את הפריסה בספריית Divi Layout

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

התקן פריסה

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

הסר והחלף את מודול התמונה

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

הכנס את מודול הפורטפוליו הניתן לסינון של Divi

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

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

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

ככזה, אנו ממליצים לבחור בכפולה של 4 (4, 8, 12, 16 וכו') כמספר הפוסטים עבור תיק העבודות שלך. 

עבור הדרכה זו, נשתמש ב-12 פרויקטים ברשת שלנו.

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

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

סגנון טקסט

• יישור טקסט: ממורכז
• צבע טקסט: כהה

סגנון טקסט כותרת

• רמת כותרת כותרת: H2
• גופן כותרת: Krona One
• צבע טקסט: #000000

סגנון מטא טקסט

• גופן מטה: ברירת מחדל (Open Sans)
• צבע מטא טקסט: #ff6651

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

שנה את גבול התמונות הממוזערות של הפרויקט ואת הפינות המעוגלות

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

תמונה

• תמונה:
  • פינות מעוגלות: 50px 50px 50px 0px
  • סגנונות גבול: הכל
  • רוחב גבול: 3 פיקסלים
  • צבע: #000000
  • סגנון גבול: מוצק

זה ייתן לתמונות הממוזערות שלנו צורה שתואמת לשאר התמונות האחרות בחבילת הפריסה.

התאמה אישית של שכבת הרחף

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

חֲפִיפָה

• צבע סמל זום: #bcf5fd
• צבע שכבת רחף: #ff6651
• בוחר אייקונים לרחף: זום

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

התאמה אישית של עימוד

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

טקסט עימוד

• עימוד:
  • גופן: Krona One
  • יישור טקסט: ממורכז
  • צבע טקסט: #ff6651, #000000 (רחף)

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

עימוד תיק

border-top: 0px;

שימוש בהגדרות Divi ו-CSS להתאמה אישית של טקסט מסנן

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

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

טקסט קריטריוני סינון

• קריטריוני סינון:
  • גופן: Krona One
  • צבע גופן: #ffffff, #000000 (רחף)

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

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

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

CSS מותאם אישית

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

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}

סגנון טאב פעיל של מסנן תיק עבודות

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

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

background: #ff6651;
color: #ffffff !important;

מדינה על ריחוף

בעת העכבר, נשנה את הרקע לשחור.

color: #000000!important;

מראה סופי של עיצוב תיק העבודות הניתן לסינון של Divi עם "Divi Conference"

הנה המראה הסופי!

ועכשיו, כך זה נראה כשאתה מרחף!

התאמה אישית של מודול תיק העבודות הניתן לסינון של Divi: "מדריך יוגה מקוון של Divi"

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

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

הוספת מודול תיק ההשקעות הניתן לסינון

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

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

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

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

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

התאמה אישית של טקסט קריטריוני סינון, כותרת הפרויקט וטקסט עימוד

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

טקסטים

• יישור טקסט: ממורכז
• צבע טקסט: בהיר

טקסט כותרת

• גופן כותרת: סינזל
• צבע טקסט כותרת: #ffffff

טקסט קריטריונים לסנן

• קריטריוני סינון משקל גופן: מודגש
• טקסט קריטריוני סינון צבע: #ffffff

טקסט עימוד

• משקל גופן עימוד: מודגש

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

יצירת שכבת-על שקופה בעת ריחוף

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

• צבע סמל זום: #323741
• צבע שכבת רחף: rgba (255 201 165, 0,85)
• בורר סמלים בריחוף: חפש גיליון וראה את הסמל למעלה

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

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

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

נשתמש גם ב-"border" כמחלקת CSS עבור מודול זה.

• מחלקה CSS: גבול

CSS מותאם אישית

/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}

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

CSS נוסף לגבול העימוד בסגנון

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

/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}

סגנון טקסט של קריטריונים לסנן

בדומה לסגנון של מודול ה- Divi Conference Portfolio שלנו, אנו רוצים להוסיף ג'אז למסנני הקטגוריות שלנו. שוב, אנחנו רוצים לצייר מהסגנון שכבר קיים בתבנית שסופקה לנו. 

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

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
 
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}

עם שתי התוספות החדשות הללו ל-CSS המותאם אישית שלנו, כך נראה מודול הפורטפוליו הניתן לסינון שלנו.

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

CSS מותאם אישית

מסנן תיקים פעיל:

background: #ffffff;
color: #323741 !important;

הסר את אנימציית המודול

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

CSS מותאם אישית

/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}

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

שנה את רשת תיק עבודות מארבע עמודות לשלוש

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

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

CSS מותאם אישית

עבור קטע אחרון זה, נוסיף את מזהה ה-CSS #רשת שלוש עמודות למודול שלנו. תמיד נשמור על מחלקת ה-CSS הקודמת שלנו שלמה.

/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
 
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}

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

סיכום

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

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

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

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

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

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

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

...