האם תרצה ליצור מדור Hero Divi עם מודול Fullwidth Header או לעצב אחד בעצמך?
בניית מדור גיבור לאתר מאפס או שימוש במודול הכותרת המלאה של Divi הן שתי דרכים ליצור עיצוב מושך את העין לאתר שלכם.
במאמר זה, נבחן את היתרונות והחסרונות של שימוש במודול Fullwidth Header לעומת יצירת מדור Hero משלכם עם Divi.
בואו נלך!
חשיבותם של מקטעי גיבור האתר
כותרת ראשית (Hero Section) היא הקטע הראשון שהמבקרים רואים כשהם מגיעים לאתר שלכם. לרוב מדובר בבאנר ברוחב מלא וניתן לכנותו גם כותרת ראשונית ראשונית (Hero Header). זוהי נקודה בולטת באתר שלכם משום שיש לה את הכוח ליצור רושם ראשוני מתמשך.
קראו גם: Divi: כיצד להציג את מודול Fullwidth Header במסך מלא
לכן חשוב שהוא יעוצב כך שיהיה קל לקריאה, ובמקביל יהיה מעניין ומשכנע. מדורי גיבורים (Hero) באתר חשובים משום שהם יכולים למשוך את תשומת ליבם של לקוחות פוטנציאליים, לתאר במהירות דף ולהוביל למעורבות נוספת ולידים פוטנציאליים. מדורי גיבורים צריכים להיות מסומנים בבירור, לכלול כותרת H1 וקריאה לפעולה (CTA).
צור קטע גיבור מאפס
עיצוב מדור Hero מאפס מעניק לך שליטה מלאה על העיצוב והתוכן. בהתאם למצבך ולצרכים שלך, זה יכול להיות פתרון מצוין לאתר שלך.
בואו נסתכל על היתרונות והחסרונות של גישה זו.
היתרונות של גישה זו
ראשית, בואו נבחן את היתרונות של יצירת מדור Hero באתר מאפס באמצעות Divi.
- שליטה מלאה בעיצוב
- השתמש בכל מודול Divi
חסרונות של גישה זו
בואו נבחן כעת את החסרונות של יצירת מדור גיבורים מאפס.
- צריך לבנות מאפס
- דורש מספר מודים
צור קטע גיבור עם מודול הכותרת של Divi Fullwidth
יצירת מדור גיבור (Hero Section) באמצעות מודול הכותרת המלאה של Divi מאפשרת יצירת עיצוב מושך את העין, ידידותי למובייל ורספונסיבי תוך דקות ספורות.
בואו נסתכל על היתרונות והחסרונות של גישה זו.
היתרונות של גישה זו
בואו נסתכל על היתרונות של בניית מקטע Hero עם מודול הכותרת המלאה של Divi.
- כל התוכן שלך נמצא במודול אחד
- העיצוב כבר עבר אופטימיזציה
חסרונות של גישה זו
בואו נעריך כעת את החסרונות של עיצוב מקטע Hero עם מודול הכותרת המלאה של Divi.
- פחות גמישות עם עיצוב
מודול הכותרת המלאה של Divi מגיע עם אפשרויות תוכן מוגדרות מראש, אך הן יכולות להיות מוגבלות אם תרצו להוסיף אלמנטים של תוכן שאינם זמינים במודול. משמעות הדבר היא שתהיה לכם פחות גמישות עם העיצוב הכללי.
בניית שני חלקי הגיבור צעד אחר צעד
כעת, לאחר שהבנתם את היתרונות והחסרונות של שתי הגישות, בואו נבנה כל קטע Hero כך שתוכלו לראות בדיוק איך כל גישה עובדת.
צור דף חדש עם Divi Builder
כדי להתחיל, תצטרך לבצע את הפעולות הבאות:
- התקן את Divi באתר וורדפרס שלך.
- הוסף עמוד ותן לו כותרת.
- אפשר בונה חזותי
צור את מדור הגיבורים שלך מאפס
עכשיו כשהדף שלנו מוגדר, בואו נתחיל ליצור מדור גיבורים מאפס.
הורד את DIVI עכשיו!!!
הפעל את "Divi Builder"
כדי להשתמש בבונה הגרירה והשחרור של Divi, נצטרך להפעיל את בונה הוויזואלי על ידי לחיצה על הכפתור. "השתמש ב-Divi Builder". פעולה זו תטען מחדש את הדף באמצעות Divi Visual Builder.
בחר: בנה מאפס
כעת, לאחר שהדף שלך נטען מחדש כאשר בונה הוויזואליה מופעל, לחץ על "אפשרויות".בנה מאפס"כדי שיהיה לנו דף ריק לעבוד איתו בשלב התכנון."
הוסף שורה והגדר עמודות
צור שורה עם מבנה העמודות הבא.
הוסף אופנים
כעת נוסיף את מודולי התוכן שנצטרך.
- 2 מודולי טקסט, מפריד, כפתור בעמודה השמאלית
- 1 תמונה מודול בעמודה האמצעית
- 1 תמונה מודול בעמודה הימנית
קטע סגנון
עכשיו בואו נגדיר את הגדרות המדור.
הוסף קטע ולאחר מכן הגדר את ההגדרות הבאות:
- רקע: #1d1d25
סגנון טקסט כותרת עליונה
התאם אישית את טקסט הכותרת:
- כותרת 1:
- משקל גופן: חצי מודגש
- צבע טקסט: #ffffff
- גודל טקסט: 90 פיקסלים
- גובה קו: 1,1 אמ
מפריד
הגדר את הגדרות המחלק:
- צבע קו: rgba(255,255,255,0.3)
- משקל מפריד: 10 פיקסלים
- רוחב מרבי: 260 פיקסלים
טקסט גוף
התאמה אישית של טקסט גוף:
- צבע טקסט: rgba(255,255,255,0.7)
- גודל טקסט: 13 פיקסלים
- גובה קו: 1,8 אמ
כפתור
עכשיו בואו נתאים אישית את הכפתור.
בלשונית הכפתור:
- השתמש בסגנונות מותאמים אישית עבור כפתור: כן
- גודל טקסט לחצן: 14 פיקסלים
- צבע טקסט: #ffffff
- רקע לחצן:
- רוחב גבול: 0 פיקסלים
- רדיוס גבול: 0 פיקסלים
בלשונית מרווח:
- למעלה ולמטה: 40 פיקסלים
- שמאל וימין: 20 פיקסלים
הוספת תמונות
הוסף את התמונות למודולי התמונות.
התאם את הגדרות הקו
פרמטרים בשורה:
- שוליים (משמאל): 15vw
התאם את העמודה השנייה
בעמודה השנייה, הגדר את ההגדרות הבאות:
CSS מותאם אישית
הדבק את הקוד הבא לתוך מקטע הקוד של האלמנט הראשי:
argin-right: -15vw!important;
z-index: 100!important;המרווח
הוסף 100 פיקסלים של ריפוד עליון.
כך ! כעת יש לך קטע גיבור מותאם אישית בעיצוב מלא.
הורד את DIVI עכשיו!!!
צור את מדור הגיבורים שלך עם מודול הכותרת המלאה של Divi
בואו נראה כעת כיצד לשחזר את מקטע ה-Hero הזה באמצעות מודול הכותרת המלאה של Divi.
הורד את DIVI עכשיו!!!
הוסף דף ובחר בנה מאפס
הוסיפו עמוד חדש, תנו לו כותרת, לאחר מכן לחצו על "השתמשו ב-Divi Builder" ולאחר מכן בחרו בנה מאפס.
הכנס קטע ברוחב מלא וכותרת ברוחב מלא
הכנס קטע רוחב מלאואז בחר כותרת רוחב מלא בספריית המודולים.
תוכן
הוסף את תוכן הטקסט למודול בכרטיסייה טקסט.
תמונות
הוסף את התמונות ללשונית התמונות.
שנה צבע רקע
בלשונית הרקע, קבע את ההגדרות הבאות:
- רקע: #1D1D25
טקסט כותרת
קבע את הגדרות טקסט הכותרת:
- משקל גופן כותרת: מודגש
- גודל טקסט: 90 פיקסלים
טקסט גוף
הגדר הגדרות טקסט גוף:
- צבע טקסט גוף: rgba(255,255,255,0.55)
טקסט כתוביות
הגדר את הגדרות טקסט הכיתוב:
- משקל גופן כתוביות: מודגש
- צבע טקסט: #4C594C
- מרווח בין אותיות: 3 פיקסלים
כפתורים
עכשיו בואו נתאים אישית את שני הכפתורים.
כפתור אחד
בכרטיסייה כפתור אחד, קבע את ההגדרות הבאות:
- השתמש בסגנונות מותאמים אישית עבור כפתור ראשון: כן
- כפתור אחד
- רקע: #4c594c
- רוחב גבול: 0 פיקסלים
- רדיוס גבול: 0px
- הצג סמל: כן
- הצג רק סמל על ריחוף: לא
- ריפוד: 25 פיקסלים (למעלה ולמטה); 25 פיקסלים (שמאל), 50 פיקסלים (ימין)
כפתור שני
בלשונית כפתור שני, קבע את ההגדרות הבאות:
- השתמש בסגנונות מותאמים אישית עבור כפתור שני: כן
- לחצן שני רוחב גבול: 0 פיקסלים
- רדיוס גבול: 0px
- ריפוד: 25 פיקסלים (עליון, תחתון, שמאל וימין)
- Button Box Shadow: בחר את ה-4
- Box Shadow מיקום אופקי: 0px
- Box Shadow מיקום אנכי: 2px
- צבע צל: #ffffff
כך ! כעת יש לך מדור Hero שעוצב במלואו באמצעות מודול הכותרת המלאה של Divi.
הורד את DIVI עכשיו!!!
סיכום
בניית מדור Hero עם Divi היא קלה, בין אם אתם בונים מאפס או משתמשים במודול Fullwidth Header. שתי האפשרויות מאפשרות לכם ליצור עיצובי כותרות מדהימים שימשכו את תשומת ליבם של המבקרים שלכם.
בהתאם לצרכים הייחודיים שלך, כל אחת מהאפשרויות היא אפשרות מצוינת לשקול בעת עיצוב מדור הגיבורים שלך.
אחרי שקראת את היתרונות והחסרונות של שניהם, איך תעצב את מדור הגיבורים שלך?
אנו מקווים שהמדריך הזה יתן לך השראה לפרויקטים הבאים של Divi. אם יש לך חששות או הצעות, מצא אותנו פרק התגובות לדון בזה.
אפשר גם להתייעץ המשאבים שלנו, אם אתה זקוק ליותר אלמנטים לביצוע הפרויקטים שלך ליצירת אתרי אינטרנט.
אל תהססו להתייעץ גם עם המדריך שלנו בנושא יצירת בלוג וורדפרס או על אחד על Divi: הנושא הטוב ביותר בוורדפרס בכל הזמנים.
אבל בינתיים, שתף מאמר זה ברשתות החברתיות השונות שלך.
...