Divi: כיצד להוסיף מדור גיבור לפוסט בבלוג

האם תרצה לשפר את הפוסטים שלך בבלוג? Divi על ידי הוספת קטע גיבור אליו?

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

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

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

בואו נתחיל.

סקירה

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

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

מדור גיבורים עם מודול גרסת שולחן העבודה של Post Title

מדור גיבורים עם מודול גרסת ה-Post Title לנייד

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

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

פריסת קטע גיבור חלופית עם מודול כותרת פוסט נייד

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

מדור גיבורים עם גרסת מטא נתונים לנייד

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

תבניות פוסטים בבלוג עבור מדור הגיבורים במסך מלא

ניתן ליצור את תבנית פוסט הבלוג ב-Divi Theme Builder מאפס או להוריד תבנית מהבלוג של Elegant Themes. כדי למצוא אותן, חפשו בבלוג. "תבנית פוסט בבלוג בחינם". אם אתה מוריד תבנית, הקפד לפתוח אותה.

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

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

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

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

שיטה 1: מודול כותרת פוסט במסך מלא

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

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

בחר כותרת ההודעה ברוחב המלא ברשימת המודולים ברוחב מלא.

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

• מיקום תמונה מומלצת: מעל הכותרת

גלול למטה אל צבע רקע והגדר את הצבע ל-#fff9f2

• רקע: #fff9f2

טקסט כותרת

בחר את הכרטיסייה לְעַצֵב. לטקסט כותרת, שמור על H1 ובחר ב-Playfair Display. הגדר אותו ל-Left Justified ובחר #34332e עבור הצבע.

• כותרת:
  • רמת כותרת: H1
  • גופן: Playfair Display
  • יישור טקסט: מוצדק לשמאל
  • צבע טקסט: #34332e

עבור גודל טקסט , הגדר את גרסת שולחן העבודה ל-65px, את גרסת הנייד ל-42px ואת גובה השורה ל-1,2em.

• גודל טקסט של כותרת (שולחן עבודה): 65 פיקסלים (שולחן עבודה), 42 פיקסלים (טלפון)
• גובה שורת הכותרת: 1,2 אמ

מטא טקסט

גלול למטה אל מטא טקסט. בחר Montserrat עבור הגופן והגדר אותו ליישור בינוני, רישיות, יישור ימני עבור גרסת שולחן העבודה ויישור שמאלי עבור גרסת הנייד. בחר #7b7975 לצבע.

• MetaFont:
  • גופן: מונטסראט
  • משקל: בינוני
  • סגנון: TT
• מטאטקסט:
  • יישור: ימין (שולחן עבודה), שמאל (טלפון)
  • צבע: #7b7975

הגדר את גודל גופן עבור גרסת שולחן העבודה, הגדירו את גודל הגופן ל-14 פיקסלים, עבור גרסת המובייל ל-10 פיקסלים, את ריווח האותיות ל-1 פיקסלים ואת גובה השורות ל-1,6 אלמוגים. סגרו את ההגדרות ושמרו את התבנית.

• מטאטקסט:
  • גודל (שולחן עבודה): 14 פיקסלים
  • גודל (טלפון): 10 פיקסלים
• מרווח בין אותיות: 1 פיקסלים
• גובה קו: 1,6 אמ

כותרת בתמונת רקע

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

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

• מיקום תמונה מומלצת: כותרת/תמונת רקע מטא

גלול למטה אל רקע ובחר שיפוע רקעהגדירו את הצבע השמאלי ל-#fff9f2, את הצבע הימני ל-rgba (255,255,255,0), את הכיוון ל-90 מעלות, את מיקום ההתחלה ל-30%, ובחרו כן כדי למקם את הגרדיאנט מעל תמונת הרקע. סגרו ושמרו את ההגדרות שלכם.

• עצירות שיפוע:
  • 30%: #fff9f2
  • 100%: rgba(255,255,255,0)
• כיוון שיפוע: 90 מעלות
• מעבר מרובע מעל תמונת רקע: כן

שיטה 2: קטע גיבור מסך מלא עם מטא נתונים

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

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

הגדרות מדור גיבורים במסך מלא עם מטא נתונים

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

• עצירות שיפוע:
  • 30%: #fff9f2
  • 100%: rgba(255,255,255,0)
• כיוון שיפוע: 90 מעלות
• מעבר מרובע מעל תמונת רקע: כן

בחר תמונת רקע ובחרו את האפשרות השתמש בתוכן דינמי.

לבחור תמונה מצורפת באפשרויות.

בחר את הכרטיסייה עיצובוגללו למטה אל שינוי גודל. הוסף 100Vh לגובה המינימלי. סגור את הגדרות המדור.

• גובה מינימלי: 100Vh

הגדרות מדור גיבורים במסך מלא עם מטא נתונים

לאחר מכן, הוסף שורה כפולה של עמודות למקטע.

הוסף מודול טקסט בעמודה הימנית.

עבור התוכן שלו, בחר השתמש בתוכן דינמי.

לבחור כותרת פוסט/ארכיון ברשימת האפשרויות.

• תוכן דינמי: כותרת פוסט/ארכיון

עבור אל הכרטיסייה עיצוב.

• כּוֹתֶרֶת:
  • טקסט: H1
  • גופן: Playfair Display
  • יישור טקסט: מוצדק לשמאל
  • צבע טקסט: #34332e

לגודל של טקסטים , מוגדר עבור גרסת שולחן העבודה ל-65px, עבור גרסת נייד ל-42px וגובה שורה ל-1,2em.

• כּוֹתֶרֶת:
  • גודל טקסט: 65 פיקסלים (שולחן עבודה), 42 פיקסלים (טלפון)
  • גובה קו: 1,2 אמ

גלול למטה אל רווח והזן 50% עבור ריפוד עליון. סגור את ההגדרות.

• ריפוד: 50% (למעלה)

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

מדור גיבורים עם קטגוריית מטא נתונים

הוסף קטע חדש קבוע תחת מדור הגיבורים.

פתח את ההגדרות שלו והגדר את couleur רקע על #fff9f2. סגור את ההגדרות.

• צבע רקע: #fff9f2

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

גיבור מסך מלא עם טקסט של קטגוריית מטא נתונים

הוסף מודול טקסט בעמודה השמאלית.

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

בחר קטגוריות קודמות ברשימה.

• תוכן דינמי: קטגוריות פוסטים

בחר את הכרטיסייה עיצוב גללו מטה אל "טקסט כותרת". בחרו H4. בחרו "תצוגת Playfair" כגופן והגדירו אותו ל-medium, אותיות גדולות, מיושר לימין עבור גרסת שולחן העבודה ו-left-left עבור גרסת הטלפון. בחרו #7b7975 כצבע.

• כּוֹתֶרֶת:
  • תצוגת טקסט
  • גופן: Playfair Display
  • משקל גופן: בינוני
  • סגנון: TT
  • יישור טקסט: מרכז
  • צבע טקסט: #7b7975

הגדירו את גודל הגופן עבור גרסת שולחן העבודה ל-14 פיקסלים, עבור גרסת המובייל ל-10 פיקסלים, את ריווח האותיות ל-1 פיקסלים ואת גובה השורות ל-1,6 אלמוגים. סגרו את ההגדרות ושמרו את התבנית.

• כותרת 4:
  • גודל (שולחן עבודה): 14 פיקסלים
  • גודל (טלפון): 10 פיקסלים
  • מרווח בין אותיות: 1 פיקסלים
  • גובה קו: 1,6 אמ

גלול למטה אל רווח והוסיפו 0px לשוליים התחתונים. סגור את ההגדרות.

• שוליים (למטה): 0px

קטע גיבור במסך מלא עם מטא נתונים של מטא טקסט

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

מחבר

פתח את ההגדרות ומחק תוכן דינמי.

לחץ על השתמש בתוכן דינמי ולבחור מחבר הודעה.

• תוכן דינמי: מחבר פוסט

בכרטיסייה עיצוב, שנה את ההגדרות הבאות. 

• כותרת 4:
• גופן: מונטסראט
• משקל גופן: בינוני
• סגנון: TT
• יישור טקסט (שולחן עבודה): מרכז
• יישור טקסט (טלפון): שמאלה
• צבע: #7b7975

הפרמטרים של גודל גופן לִכלוֹל:

• גודל טקסט: 14 פיקסלים (שולחן עבודה), 10 פיקסלים (טלפון)
• מרווח בין אותיות: 1 פיקסלים
• גובה קו: 1,6 אמ

La שוליים תחתונים חייב להיות 0px.

• שוליים (למטה): 0px

תַאֲרִיך

העתק מודול המחבר וגרור אותו לעמודה הבאה.

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

• תוכן דינמי: תאריך פרסום פוסט

commentaires

בכל מקרה, עותק מודול Post Publish Date וגרור אותו לעמודה האחרונה.

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

לבחור ספירת תגובות מהבחירות שלך.

• תוכן דינמי: ספירת תגובות

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

• אחרי: הערות

קרא גם: Divi: כיצד להציג את מודול Fullwidth Header במסך מלא

תוצאות

מדור גיבורים עם מודול גרסת שולחן העבודה של Post Title

מדור גיבורים עם מודול גרסת ה-Post Title לנייד

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

פריסת קטע גיבור חלופית עם מודול כותרת פוסט נייד

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

מדור גיבורים עם מטא נתונים של גרסת נייד

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

סיכום

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

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

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

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

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

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

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

...