האם תרצה ליצור מדור Hero Divi עם מודול Fullwidth Header או לעצב אחד בעצמך?
בנה קטע גיבור של אתר אינטרנט מאפס או שימוש במודול Divi Fullwidth Header הן שתי הדרכים ליצור עיצוב מושך את העין עבורך אתר אינטרנט.
במאמר זה, נבחן את היתרונות והחסרונות של שימוש במודול Fullwidth Header לעומת יצירת קטע Hero משלך עם Divi.
בואו נלך!
החשיבות של מדורי גיבורי אתרים
קטע גיבור הוא הקטע הראשון שלך מבקרים לראות מתי הם מגיעים על שלך אתר אינטרנט. לעתים קרובות זהו באנר ברוחב מלא ויכול להיקרא גם כותרת גיבור. זה מקום בולט באתר שלך כי יש לו את הכוח להשאיר רושם ראשוני מתמשך.
קראו גם: Divi: כיצד להציג את מודול Fullwidth Header במסך מלא
לכן חשוב שהוא מעוצב בצורה כזו שיהיה קל לקריאה ועדיין מושך את העין ומשכנע. קטעי אתר Hero חשובים מכיוון שהם יכולים למשוך את תשומת הלב של לקוחות פוטנציאליים, לתאר במהירות דף ולהוביל למעורבות נוספת ולידים פוטנציאליים. קטעי גיבור צריכים להיות ממותגים, לכלול כותרת H1 ו-CTA.
צור קטע גיבור מאפס
עיצוב מדור Hero מאפס מאפשר לך לקבל שליטה מלאה על העיצוב ו תוכן. בהתאם למצב ולצרכים שלך, זה יכול להיות פתרון מצוין לאתר שלך.
בואו נסתכל על היתרונות והחסרונות של גישה זו.
היתרונות של גישה זו
ראשית, בואו נסתכל על היתרונות של בניית אתר Hero מדור מאפס באמצעות Divi.
- שליטה מלאה בעיצוב
- השתמש בכל מודול Divi
חסרונות של גישה זו
עכשיו בואו נסתכל על החסרונות של יצירת מדור גיבורים מאפס.
- צריך לבנות מאפס
- דורש מספר מודים
צור קטע גיבור עם מודול הכותרת של Divi Fullwidth
יצירת מדור גיבורים באמצעות מודול Divi Fullwidth Header מקלה על יצירת עיצוב רספונסיבי מושך עין לנייד תוך דקות ספורות.
בואו נסתכל על היתרונות והחסרונות של גישה זו.
היתרונות של גישה זו
בואו נסתכל על היתרונות של בניית קטע Hero עם מודול Divi Fullwidth Header.
- כולו שלך תוכן נמצא במודול בודד
- העיצוב כבר עבר אופטימיזציה
חסרונות של גישה זו
עכשיו בואו נעריך את החסרונות של עיצוב קטע Hero עם מודול ה- Divi Fullwidth Header.
- פחות גמישות עם עיצוב
מודול Divi Fullwidth Header מגיע עם אפשרויות עבור תוכן מוגדר מראש, בעוד שרבים יכולים להיות מוגבלים אם אתה מחפש להוסיף קטע תוכן שאינו זמין במודול. זה אומר שתהיה לך פחות גמישות עם העיצוב הכללי.
בניית שני חלקי הגיבור צעד אחר צעד
כעת, לאחר שהבנתם את היתרונות והחסרונות של שתי הגישות, בואו נבנה כל קטע Hero כך שתוכלו לראות בדיוק איך כל גישה עובדת.
צור דף חדש עם Divi Builder
כדי להתחיל, תצטרך לבצע את הפעולות הבאות:
- התקן את Divi באתר וורדפרס שלך.
- הוסף עמוד ותן לו כותרת.
- אפשר בונה חזותי
צור את מדור הגיבורים שלך מאפס
עכשיו כשהדף שלנו מוגדר, בואו נתחיל ליצור מדור גיבורים מאפס.
הורד את DIVI עכשיו!!!
הפעל את "Divi Builder"
על מנת להשתמש בבונה הגרירה והשחרור של Divi, נצטרך להפעיל את Visual Builder על ידי לחיצה על הכפתור "השתמש ב- DiviBuilder". פעולה זו תטען מחדש את הדף באמצעות 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
עכשיו בואו נראה כיצד ליצור מחדש את קטע הגיבור הזה באמצעות מודול ה- Fullwidth Header של Divi.
הורד את DIVI עכשיו!!!
הוסף דף ובחר בנה מאפס
הוסף דף חדש, תן לו כותרת, ואז לחץ על "השתמש ב- Divi Builder" ואז בחר בנה מאפס.
הכנס קטע ברוחב מלא וכותרת ברוחב מלא
הכנס קטע רוחב מלאואז בחר כותרת רוחב מלא בספריית המודולים.
תוכן
הוסף את התוכן הטקסטואלי למודול בלשונית טקסט.
תמונות
הוסף את התמונות בלשונית התמונה.
שנה צבע רקע
בלשונית הרקע, הגדר את ההגדרה הבאה:
- רקע: #1D1D25
טקסט כותרת
הגדר הגדרות טקסט בכותרת:
- משקל גופן כותרת: מודגש
- גודל טקסט: 90 פיקסלים
טקסט גוף
הגדר הגדרות טקסט גוף:
- צבע טקסט גוף: rgba(255,255,255,0.55)
טקסט כתוביות
הגדר את הגדרות טקסט הכיתוב:
- משקל גופן כתוביות: מודגש
- צבע טקסט: #4C594C
- מרווח בין אותיות: 3 פיקסלים
כפתורים
עכשיו בואו נתאים אישית את שני הכפתורים.
כפתור אחד
בכרטיסייה Button One, הגדר את ההגדרות הבאות:
- השתמש בסגנונות מותאמים אישית עבור כפתור ראשון: כן
- כפתור אחד
- רקע: #4c594c
- רוחב גבול: 0 פיקסלים
- רדיוס גבול: 0px
- הצג סמל: כן
- הצג רק סמל על ריחוף: לא
- ריפוד: 25 פיקסלים (למעלה ולמטה); 25 פיקסלים (שמאל), 50 פיקסלים (ימין)
כפתור שני
בכרטיסייה כפתור שני, הגדר את ההגדרות הבאות:
- השתמש בסגנונות מותאמים אישית עבור כפתור שני: כן
- לחצן שני רוחב גבול: 0 פיקסלים
- רדיוס גבול: 0px
- ריפוד: 25 פיקסלים (עליון, תחתון, שמאל וימין)
- Button Box Shadow: בחר את ה-4
- Box Shadow מיקום אופקי: 0px
- Box Shadow מיקום אנכי: 2px
- צבע צל: #ffffff
כך ! כעת יש לך קטע גיבור מעוצב במלואו באמצעות מודול Divi Fullwidth Header.
הורד את DIVI עכשיו!!!
סיכום
בניית קטע Hero עם Divi היא קלה, בין אם אתה בונה מאפס ובין אם אתה משתמש במודול Fullwidth Header. שתי האפשרויות מאפשרות לך ליצור עיצובי כותרות מדהימים שתופסים את העניין שלך מבקרים.
בהתאם לצרכים הייחודיים שלך, כל אחת מהאפשרויות היא אפשרות מצוינת לשקול בעת עיצוב קטע הגיבור שלך.
אחרי שקראת את היתרונות והחסרונות של שניהם, איך תעצב את מדור הגיבורים שלך?
אנו מקווים שהמדריך הזה יתן לך השראה לפרויקטים הבאים של Divi. אם יש לך חששות או הצעות, מצא אותנו פרק התגובות לדון בזה.
אפשר גם להתייעץ המשאבים שלנו, אם אתה זקוק ליותר אלמנטים לביצוע הפרויקטים שלך ליצירת אתרי אינטרנט.
אל תהססו להתייעץ גם עם המדריך שלנו בנושא יצירת בלוג וורדפרס או על אחד על Divi: הנושא הטוב ביותר בוורדפרס בכל הזמנים.
אבל בינתיים, שתף מאמר זה ברשתות החברתיות השונות שלך.
...
