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

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

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

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

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

בואו נתחיל.

סקירה

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ראה גם: 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 em. סגור את ההגדרות ושמור את התבנית.

• מטאטקסט:
  • גודל (שולחן עבודה): 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 Display עבור הגופן והגדר אותו ליישור בינוני, רישיות, יישור ימני עבור גרסת שולחן העבודה ויישור שמאלי עבור גרסת הטלפון. בחר #7b7975 לצבע.

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

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

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

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

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

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

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

מחבר

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

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

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

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

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

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

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

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

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

תַאֲרִיך

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

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

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

commentaires

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

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

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

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

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

• אחרי: הערות

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

תוצאות

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

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

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

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

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

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

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

סיכום

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

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

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

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

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

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

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

...