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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

סידור מרכיבי מתווה "כנס דיווי".

סידור האלמנטים של פריסת "מדריך יוגה דיווי אונליין".

אתה יכול בקלות להוריד את שתי הפריסות מ Divi בּוֹנֶה. 

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

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

התאמה אישית של מודול הפורטפוליו הניתן לסינון של Divi: "Divi Conference Edition"

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

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

לחץ על הסמל « טען מהספרייה כדי להיכנס לספריית Divi Layout

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

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

התקן פריסה

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

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

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

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

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

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

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

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

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

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

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

סגנון טקסט

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

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

• רמת כותרת כותרת: 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;
}

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

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;

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

כדי לספק חוויה נקייה יותר, נסיר את ברירת המחדל של הנפשה שמגיעה עם מודול ה-Filtable Portfolio. לשם כך נצטרך קודם כל לחזור להגדרות הדף שלנו ולהוסיף קצת 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. הצגת העבודה שלך היא חלק חשוב בניהול עסק מקוון, בלוג או מותג. 

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

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

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

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

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

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

...