אם אתם רוצים לדעת איך בונים אתר אינטרנט, אתם צריכים לדעת שזה לא מתאים לכל אחד. אבל, לכל מי שיש טיפה אוריינטציה טכנית ועיצובית יסתדר יופי. ומי שלא? זה בסדר, במדריך הזה השתדלתי לעשות את זה פשוט ומובן לכל אחד.
לפני שנלמד איך לבנות אתר אינטרנט – למי המדריך מתאים:
- בעל עסק שרוצה לבנות בעצמו אתר תדמית או כרטיס ביקור לעסק
- למי שרוצה לפתוח בלוג
- מי שרוצה ללמוד לבנות אתר ובעתיד לעסוק בתחום בצורה מקצועית
- לסקרנים וכאלה שסתם אוהבים ללמוד.
מה העלויות?
דומיין – זהו הכתובת שתיצרו לאתר שלכם. עלות: 62 ₪ לשנה.
כך שבחישוב חודשי העלות שלכם עבור אחזקת אתר תהיה בסה"כ כ-65 ₪ לחודש.
בחישוב עדין מספיק שבזכות האתר יגיע אליכם לקוח אחד אז כיסיתם את עלות האתר לאותו החודש (ואפילו לשנה – תלוי בעסק שלכם) ובנוסף לכך עשיתם רווח, מגניב לא?
למה לבנות אתר אינטרנט דווקא בוורדפרס?
יש הרבה פלטפורמות לבניית אתרים שעושות אחלה עבודה כל אחת בדרך שלה (למידע נוסף על פלטפורמות לבניית אתרים). הפלטפורמות הפופולריות ביותר שבנויים עליהם רוב האתרים בעולם הם Wix, Magento, Shopify, Wordpress. במדריך הזה אנחנו נלמד איך בונים אתר אינטרנט בפלטפורמת וורדפרס.
וורדפרס היא מערכת ניהול תוכן מבוססת קוד פתוח הגדולה והנפוצה ביותר בעולם ובנויים עליה למעלה מ- 30% מכל האתרים בעולם ובניהם אתרי חדשות גדולים כמו CNN, הניו יורק טיימס וכו'.
עם וורדפרס אפשר לנהל בקלות את כל התוכן שיש באתר על ידי יצירה של דפים, פוסטים, מוצרים וכ'ו. כמעט כל מקדם אתרים שתשאלו יגיד לכם שוורדפרס היא מס' 1 עבור קידום אורגני של האתר.
אז איך בונים אתר אינטרנט בוורדפרס?
אז יאללה, בואו נתחיל במדריך שלב אחר שלב ונלמד איך לבנות אתר אינטרנט כמו אלופים.
* במדריך הזה אתם תלמדו לבנות אתר תוכן בסיסי.
* אם נתקלתם במשהו שלא מובן לכם או שאתם מתקשים במדריך – אשמח לעזור בתגובות למטה
בשלב הראשון בשביל לבנות אתר אינטרנט אתם צריכים חברה שתאחסן את האתר שלכם. אחסון אתרים זה בעצם "הבית" של האתר שלכם שעליו תרוץ מערכת וורדפרס, בלעדיו האתר לא יוכל להתקיים.
חשוב לבחור בחברת אחסון עם שרתים מהירים ויציבים על מנת לא לפגוע בביצועים של האתר מבחינת חווית המשתמש (מהירות, נפילות שרתים וכו'). בשביל שהשרת יספק את הביצועים הטובים ביותר חשוב לבחור בחברת אחסון אתרים שנמצאת במיקום זהה לזה שהגולשים שלכם מגיעים מימנו, ובמקרה שלנו הוא קהל ישראלי – לכן נבחר בחברת קלאודוויז עם שרתים שנמצאים בתל אביב (יתרון נוסף – תמיכה טכנית מעולה וזמינה 24/7).
חברת אחסון אתרים המומלצת ביותר בקרב רבים לאחסון אתר וורדפרס היא חברת Cloudways.com. יש לה 3 יתרונות בולטים:
- תמיכה טכנית 24/7 (תמיכה מצויינת – מניסיון).
- אזור אישי ולוח בקרה ברורים עם חווית משתמש מעולה.
- 3 ימי ניסיון בחינם
איך לבנות אתר אינטרנט - מתחילים
1. רכישת שטח אחסון לאתר - הרשמה ל Cloudways
לחצו כאן למעבר ל-Cloudways ולחצו על "Start Free Trial"
הירשמו עם הפרטים שלכם והזינו את קוד הקופון שקיבלנו מקלאודוויז GROW30 שיקנה לכם 30% הנחה ל-3 חודשים. ניתן גם להירשם עם חשבון גוגל שלכם ובשלב הבא תוכלו להוסיף את קוד הקופון ולבחור סיסמא.
לאחר מכן, נבחר את השרת שעליו נרצה להתקין את אתר הוורדפרס שלנו.
לפי השלבים הבאים:
- ניתן שם לאתר עצמו איך שיוצג בקלאודוויז
- לאחר מכן ניתן שם לשרת עצמו
- נבחר בשרתי Vultr
- נבחר בשרת עם 1GB זיכרון (זה מספיק בתור התחלה)
- נבחר במיקום השרת – במקרה שלנו Asia Pasific – Tel Aviv
- לאחר מכן נלחץ על Launch Now
כעת נמתין עד שהשרת יוקם ועליו את הוורדפרס שלנו.
2. התחברות לאתר וורדפרס החדש שנוצר
לאחר המתנה של מספר דקות נתבשר בהשלמת הכנת אתר הוורדפרס שלנו. נלחץ על לשונית "Applications"
לאחר מכן נלחץ על האתר שיצרנו.
הדף הבא שייפתח זה בעצם לוח הבקרה של האתר וורדפרס שלכם. כתובת האתר הזמנית שקיבלתם יחד עם האתר נמצאת תחת "Application URL"
בשלב זה אנחנו נתחבר לאתר וורדפרס שנוצר. נלחץ על הלינק להתחברות לאתר שנמצא תחת Admin Panel ונתבקש להזין שם משתמש וסיסמא. שם המשתמש והסיסמא שנוצר עבורכם יופיע בלוח הבקרה של האתר תחת השם Username ו-Password
הזינו את שם המשתמש והסיסמא והתחברו ללוח הבקרה של האתר שלכם.
3. שינוי שפה לעברית
לאחר התחברות ללוח הבקרה של אתר הוורדפרס שלכם השפה שתופיע תהיה אנגלית. על מנת שיהיה לנו קל יותר לנווט באתר נשנה את השפה לעברית.
נעבור עם סמן העכבר מבלי ללחוץ על "Settings" ואז נלחץ על "General"
בעמוד שייפתח נבחר בשפה העברית בתפריט הנפתח "Site Language" ולאחר מכן נלחץ על "Save Changes"
כעת לוח הבקרה של וורדפרס יוצג בשפה העברית והניווט יהיה יותר קל ומותאם למדריך הנוכחי.
4. הכרת הסרגל הימני בוורדפרס
לשונית עיצוב
לאחר שהגדרתם וביצעתם את כל השלבים הראשונים תגיעו למסך הראשי של וורדפרס. מצידו הימני של המסך נמצא סרגל כלים שבעזרתו אתם בונים את האתר וקובעים הגדרות לגבי השימוש באתר.
ההסבר על כל הסרגל והאפשרויות שלו זה מדריך בפני עצמו שאותו כתבתי בנפרד. אך לצורך המדריך הנוכחי יש להכיר 4 אלמנטים עיקריים:
1. עמודים – אלה הם הדפים הסטטיים של האתר. דפים סטטיים הם בעצם הדפים שאתם כותבים בהם תוכן ומשנים אותו לעיתים רחוקות כמו: דף אודות, עמוד הבית, עמוד צור קשר וכו'.
2. פוסטים – כל אחד משתמש בצורה שונה בפוסטים אבל המהות המרכזית שלהם היא בעיקר למאמרים שאתם רושמים מדי יום באתר ותכנים דינמיים. את הפוסטים עצמם אפשר לקטלג לפי קטגוריות ולהוסיף להם תגיות (בניגוד לעמודים). דוגמא:
- פוסט – איך לבנות אתר אינטרנט
- קטגוריה – בניית אתרים
- תגיות – אתר וורדפרס, אלמנטור
3. עיצוב – עבור המדריך הנוכחי חשוב להכיר את לשונית "תבניות" ולשונית "תפריטים".
- תבניות – האתר שלכם יהיה בנוי על בסיס תבנית, את התבנית ניתן לערוך על ידי העורך הקלאסי שוורדפרס מציע או בעזרת אלמנטור שמייתר כמעט לגמרי את השימוש בעורך הקלאסי. (ארחיב על בהמשך)
- תפריטים – בלשונית תפריטים אתם בעצם תבנו תפריטי ניווט בבר העליון באתר ובבר התחתון. ממש כמו שאתם רואים כרגע באתר שלנו. לתפריט העליון קוראים "הדר" ולתחתון קוראים "פוטר". (ארחיב על זה בהמשך)
4. תוספים – לשונית תוספים נותנת לכם את האפשרות להתקין תוספים לוורדפרס שעוזרים לכם במגוון צורות הן מבחינת העיצוב והן מבחינת פונקציות באתר. הם בעצם תוספים לפונקציות הבסיסיות. במדריך הזה נלמד איך להתקין את התוספים לשיחות טלפון וואטסאפ.
5. הגדרות – בזהה לשאר הלשוניות בסרגל הימני בלשונית הגדרות יש שלל אפשרויות שניתן לבצע באתר. האפשרות שתלמדו במדריך הזה היא הגדרת עמוד הבית לאתר.
5. התקנת אלמנטור ובחירת תבנית לאתר - הטובה ביותר עבור אלמנטור
תבניות הם בעצם הערכה העיצובית לאתר, כמו שהסברתי בסעיף הקודם שלפוסטים ולעמודים יש את העורך הקלאסי, כך גם לתבניות יש עורך קלאסי שדרכו ניתן להגדיר את העיצוב באתר ולמקם כל פונקציה במקום הרצוי.
אך מכיוון שבמדריך הזה אתם תשתמשו באלמנטור שזהו עורך הרבה יותר נוח ויעיל מזה של העורך הקלאסי, ובכלל אלמנטור נותנים לנו עוד הרבה אפשרויות שמיתרות את השימוש בעורך הקלאסי.
עם אלמנטור אנחנו בעצם נערוך את התבנית שמותקנת באתר ועל מנת שאלמנטור יעבוד בצורה המיטבית עם התבנית. חשוב לבחור תבנית שעובדת בצורה האופטימלית ביותר עם אלמנטור. לתבנית הזו קוראים Hello, זו תבנית שאלמנטור בעצמם יצרו והיא עובדת בצורה האופטימלית ביותר עם אתרים שבנויים על אלמנטור.
התקנת תוסף Elementor
נלחץ על "תוספים" ואז "Add New Plugin". בשורת החיפוש נקליד "elementor" ואז נלחץ על "Install Now"
לאחר שההתקנה תסתיים נלחץ על "activate"
לרוב המשתמשים נפתח חלון ההגדרה של אלמנטור לאחר לחיצה על "activate". אין צורך להגדיר כלום לכן נסגור את החלון בעזרת לחצן הסגירה מצידו השמאלי העליון של המסך.
התקנת תבנית Hello Elementor
1. בסרגל הימני שעליו דיברנו בסעיף של סרגל הכלים, לחצו על לשונית "עיצוב" ולאחר מכן על בחרו ב"תבניות".
לאחר מכן, בחלון שנפתח יוצגו בפניכם התבניות שמותקנות אצלכם. והתבנית שמותקנת ורצה כרגע על האתר היא התבנית המודגשת מימין שמציגה את האפשרות "התאמה אישית"
2. בשלב הבא, מכיוון שכרגע התבנית Hello Elementor אינה מותקנת אצלכם תצטרכו להתקין אותה ולהריץ אותה באתר. לחצו למעלה על כפתור "תבנית חדשה"
3. לאחר מכן בתיבת החיפוש משמאל הקלידו "Hello Elementor" ובתוצאות החיפוש בחרו ב-הלו אלמנטור ולחצו על "התקנה".
4. תבנית הלו אלמנטור מגיעה עם הדר ופוטר מובנים בתבנית ואותם אנחנו נרצה להסיר.
מה זה בעצם הדר ופוטר?
בכל אתר יש את התפריט העליון והתפריט התחתון, התפריטים האלה הם קבועים ומוצגים בכל עמוד באתר.
למה להסיר אותם?
מכיוון שאנחנו משתמשים בעורך של אלמנטור ויוצרים עיצוב מותאם אישית אנחנו רוצים ליצור עיצוב מותאם גם להדר והפוטר. לכן נרצה להסיר את ההדר והפוטר שמגיעים עם התבנית כדי שנוכל להשתמש בזה של אלמנטור במקום.
נלחץ על עיצוב > הגדרות תבנית ואז נסמן את Disable cross-site header & footer לאחר מכן נלחץ על Save Settings
6. יצירה ועיצוב של עמודי התוכן (עמוד הבית, עמודים משפטיים ואודות)
בשלב הזה אתם תתחילו לעצב את האתר שלכם כאוות נפשכם. עיצוב האתר והוספת תוכן נעשה דרך הדרכים שהצגתי קודם לכן עמודים ופוסטים.
במדריך הנוכחי אתם תלמדו איך בונים את העמודים, מכיוון שאנחנו מתמקדים באתר בסיסי (אתר תדמית למשל) ועבור זה לא דרוש להתעסק עם הפוסטים בתור התחלה. אך שתדעו, הדרך שבה תלמדו לבנות ולעצב עמוד היא אותה הדרך עבור פוסטים. אם תרצו להוסיף בלוג לאתר שלכם ולרשום מאמרי תוכן עשו זאת באותה הדרך כמו העמודים.
איך יוצרים את עמוד הבית?
1. בסרגל הימני בוורדפרס לחצו על "עמודים" ולאחר מכן על "כל העמודים".
בעמוד שיופיע לאחר מכן לחצו למעלה לחצו על "עמוד חדש".
2. בעמוד שייפתח נותנים שם לעמוד "עמוד הבית" ולאחר מכן לוחצים על "עריכה באמצעות אלמנטור"
3. לאחר מכן יפתח עמוד, בצידו הימני סרגל הכלים של העורך הויזואלי – אלמנטור ובצידו השמאלי דף לבן ששם ממקמים את כל העיצוב. שיטת העבודה עם סרגל הכלים הזה הוא בשיטת Drag&Drop ובעברית גרור ושחרר. בעצם כל מה שעליכם לעשות הוא לגרור פונקציות מהסרגל הימני אל תוך העמוד הלבן משמאל שזהו האתר שלכם, ומדויק יותר הדף הספציפי באתר שלכם שאותו אתם יוצרים.
פריסת העמוד כוללת כרגע את העורך של אלמנטור והגדרות העורך הקלאסי שמציג לנו את הכותרת של העמוד. אתם צריכים לבטל את הגדרת ההצגה של העורך הקלאסי ולקבוע עריכת דף נקייה מ-0 בעזרת אלמנטור.
לחצו בתפריט העליון על לחצן ההגדרות.
בלשונית פריסת העמוד בחרו ב"אלמנטור רוחב מלא".
כמו שאתם רואים עכשיו הכותרת של העמוד שמוצגת בגלל העורך הקלאסי נעלמה ואנחנו נעצב הכל מ-0 בעזרת אלמנטור.
שימוש באלמנטור - פונקציות בסיס
השימוש באלמנטור היא תורה שלמה, ולצערי לא אוכל ללמד אתכם את כל התורה בכמה שורות קצרות ועבור זה דרוש לקרוא מדריך מקיף על השימוש באלמנטור.
אבל לשם המדריך והשלמת בניית האתר שלכם, תלמדו את השימוש בטמפלטים המוכנים באלמנטור. מהרגע שתבינו את העיקרון יהיה לכם הרבה יותר קל לעצב את האתר בכל עיצוב שתרצו מ-0.
פונקציות הבסיס שיש ללמוד הם "קונטיינרים" ו-"גרירת וידג'טים". בעזרת שלושת הפונקציות הללו ניתן בקלות לעצב כל מילימטר באתר.
קונטיינרים – אזורים הם שטחי העבודה על גבי האתר שבהם ניתן לקבוע פונקציות, לגרור וידג'טים ובנוסף לכך, לקבוע כמה עמודות יהיו בפנים (וכך לעצב כל עמודה בנפרד) את העמודות בפנים פותחים בעזרת קונטיינרים פנימיים. זה אולי ישמע לכם מסובך אבל בעוד כמה פסקאות תלמדו ויזואלית איך עושים זאת וההבנה תהיה קלה יותר.
גרירת וידג'טים – וידג'טים הם כל מה שנמצא בסרגל הימני של אלמנטור, כל וידג'ט קובע פעולה שונה ואת הפעולה לעיתים קרובות אפשר להבין על ידי השם של הוידג'ט.
לצורך המחשת השימוש נשתמש כדוגמא וניצור עיצוב על סמך הדוגמא הזו. הדוגמא שנשתמש היא באנר עליון עם תמונה וטקסט בתוכה כמו בדוגמא שבתמונה.
7. איך יוצרים קונטיינרים (עמודות) - עם תמונות וטקסט בפנים
1. בעמוד הלבן שנמצא מצד שמאל לוחצים על הכפתור עם סימן ה- "+".
2. לאחר מכן ייפתחו בפניכם 2 אפשרויות, בחרו באפשרות הראשונה פלקבוקס שזוהי השיטה הבסיסית ובה משתמשים ברוב המקרים.
3. לאחר מכן יפתחו בפניכם אפשרויות של בחירת מספר הקונטיינרים שיהיו בתוך הקונטיינר הראשי. כל ריבוע אפור מציין מציין את מספר הקונטיינרים ואת החלוקה שלהם 2 הריבועים הראשונים מציינים את כיוון התוכן שיהיה בתוך הקונטיינר. לצורך המדריך תלחצו על קונטיינר עם עמודה אחת וכיוון כלפי מטה (כמו בתמונה).
4. לאחר מכן בחלקו העליון של העמוד יפתח "קונטיינר" ובתוכו הסימן +. עברו עם העכבר מעל הקונטיינר ויופיע בר ורוד עם 3 אייקונים, לחצו על האייקון האמצעי.
5. בסרגל הימני יפתחו בפניכם אפשרויות לעריכת הקונטיינר, מכיוון שאנחנו רוצים להעלות תמונה נגדיל את הגובה של הקונטיינר.
נילך ללשונית "גובה מינימאלי" ותקבעו את הגובה הרצוי, במקרה הוכחי בחרתי ב648PX.
בשלב הבא נוסיף את התמונה שתופיע בקונטיינר. לחצו על האפשרות האמצעית בבר העליון של הסרגל שנקראת "סגנון".
6. בלשונית סוג רקע תלחצו על סימן המברשת, לאחר מכן לחצו על סימן ה + תחת לשונית "תמונה". העלו את התמונה הרצויה שלכם לוורדפרס. לאחר שהתמונה הועלתה לחצו למטה על הכפתור הכחול "הוספת מדיה".
7. כאשר התמונה תתווסף לקונטיינר אתם תראו מצד שמאל את התמונה שהעלתם. לעיתים קרובות בגלל גודל התמונה המקורית מיקום התמונה באזור תיראה כ-2 תמונות או לא תהיה ממורכזת, על מנת להגדיל את גודל התמונה ולמרכז אותה בסרגל הימני תלחצי על התפריט של הלשונית "גודל תצוגה" ובחרו ב"כיסוי". אם התמונה עכשיו בגודל הרצוי אך לא ממורכזת, בתפריט הנפתח בלשונית "מיקום" בחרו "מרכז מרכז" או בחרו ב"מותאם" ותבחרו את המיקום המתאים.
8. כעת נרצה לתת קצת צבע שחור לשכבת הרקע של התמונת על מנת שהטקסט שנוסיף בהמשך יבלוט. לחצו על לשנות שכבת רקע ולאחר מכן בחרו בצבע כהה.
9. כעת על מנת להוסיף את הכותרת, לחצו על לחצן ה + העליון שזהו לחצן המעבר אל התפריט הראשי. לאחר מכן תגררו את הוידג'ט שנקרא "כותרת" אל תוך שטח הקונטיינר (עם סימן ה +).
10. רשמו את הטקסט הרצוי בתיבת הטקסט מצד ימין.
11. צבע ברירת המחדל של הכותרת באלמנטור הוא תכלת, כעת אנחנו נמרכז את הכותרת, נשנה את צבע הכותרת ללבן וקצת נגדיל אותה. עקבו על פי השלבים.
1. לחצו על סגנון ואז בחרו צבע
2. לחצו על האייקון האמצעי על מנת לעבור להגדרות של הקונטיינר ובחרו ביישור לאמצע
3. לחצו חזרה על ווידג'ט הכותרת ובלשונית "סגנון" לחצו על סמן העיפרון ובחרו את גדול הטקסט
זהו הבסיס של העיצוב באלמנטור כל מה שאתם צריכים לעשות זה לגרור וידג'טים מהסרגל הימני אל תוך הקונטיינרים, שלב שלב עד סיום העיצוב. מכיוון שהסבר מפורט אודות העיצוב יהיה ארוך לדעתי זה רק יקשה עליכם בעיצוב, לכן הדרך הכי טובה שתלמדו לערוך היא על ידי ניסוי וטעייה.
לאחר שסיימתם לערוך את עמוד הבית חשוב לזכור תמיד ללחוץ על הכפתור הורוד מצד שמאל למעלה "פרסם" או "עדכן".
לאחר שפרסמתם את עמוד הבית חזרו ללוח הבקרה של וורדפרס ללשונית "עמודים" ופתחו עמוד חדש עבור שאר הדפים שתרצו לעצב ולרשום תוכן בתוכם (כמו אודות, תקנון האתר וכ'ו).
חזרה ללוח הבקרה
במידה ואתם מסתבכים, לאלמנטור יש אפשרות לטמפלטים מוכנים. כל מה שעליכם לעשות הוא לבחור טמפלט מוכן, לשנות את עיצובו ולתרגם אותו לפי רצונכם. בחירת טמפלט נעשית דרך הכפתור השמאלי ליד לחצן ה +, כמו בתמונה.
8. הגדרת עמוד הבית בוורדפרס
את השלב הזה תבצעו לאחר שסיימתם לעצב את כל עמודי האתר שלכם. בעצם בשלב הזה מה שתעשו זה לומר לוורדפרס מהו עמוד הבית/עמוד הראשי של האתר שלכם. כאשר שאנשים יקלידו את כתובת האתר שלכם הם יגיעו לעמוד הראשי שאותו אתם הגדרתם.
בלוח הבקרה של וורדפרס, בסרגל הימני לחצו ע "הגדרות" ולאחר מכן לחצו על "קריאה". בלשונית "תצוגת העמוד הראשי" בחרו בתפריט הנפתי "עמוד הבית" את העמוד שאותו תרצו להגדיר כעמוד הבית/הדף הראשי.
במקרה שלי קראתי לעמוד הראשון שעיצבתי בשם "עמוד הבית" לכן בחרתי בעמוד הבית. לאחר שבחרתם לחצו על הכפתור הכחול למטה "שמור שינויים. כעת ברגע שהגולש יקליד או יכנס לדומיין הראשי של האתר שלכם הוא יראה את העמוד שהגדרתם כעמוד הבית.
9. יצירת תפריטי ניווט בוורדפרס - הדר ופוטר
עכשיו כשהגענו לצעד של 2 משימות לפני הסיום, על מנת שהגולשים יוכלו לנווט בקלות בין העמודים שיצרתם, אתם צריכים להציע להם אותם. את העמודים מציגים בתוך תפריט שנמצא בתפריט העליון וגם בתפריט התחתון.
תפריט עליון לדוגמא נראה ככה:
התפריט בנוי בעצם מ-2 חלקים, תפריט, הדר ולוגו. מצד ימין נמצא הלוגו שלכם מצד שמאל (יותר נכון, באמצע בד"כ) נמצא התפריט שלכם. ושניהם מוטמעים בהדר. קודם עליכם להתחיל בליצור את התפריט ואחרי זה נמשיך בהטמעתו יחד עם הלוגו בהדר.
1. בסרגל הימני בוורדפרס לחצו על "עיצוב" ולאחר מכן לחצו על "תפריטים".
2. יצירת תפריט חדש
בעמוד שנפתח צריכים ליצור תפריט חדש. בעצם התפריט שניצור ישמש גם לתפריט העליון באתר וגם לתחתון, ובעתיד כשיהיו לכם יותר דפים וקטגוריות באתר תוכלו לפתוח תפריט בנפרד לתפריט העליון והתחתון.
אז בשדה הריק "שם התפריט" נבחר בשם "תפריט עליון ותחתון" ולאחר מכן תלחצו על "ליצור תפריט"
כעת מה שתראו הוא שמצד ימין נפתחו אפשרויות לבחירת הדפים שיצרתם. בשלב הזה מה שאתם צריכים לעשות זה להוסיף את העמודים האלה לתפריט.
- סמנו את תיבת הסימון ליד שם העמוד (סמנו את כל העמודים שיצרתם).
- לחצו על "הוספה לתפריט".
- כעת לאחר שהעמודים התווספו תגררו את העמודים לפי הסדר הרצוי, (מומלץ שעמוד הבית יהיה ראשון).
- לאחר שסיימתם לחצו על "שמור".
3. בשלב הבא, על מנת שהתפריט שיצרתם יופיע בכל עמוד באתר צריך ליצור את ההדר כעיצוב באתר ולתת לו הוראה להופיע בכל עמוד – את זה עושים באמצעות התקנת תוסף.
על מנת ליצור את ההדר כעיצוב באתר יש 2 דרכים האחת היא עם תוסף אלמנטור פרו, והדרך השנייה היא באמצעות תוסף חינמי. מכיוון שהמדריך הזה הוא בסיסי לצורך למידה ננסה להוזיל עלויות ונבחר באפשרות החינמית, אך באופן כללי חשוב לדעת שאלמנטור פרו הוא כלי מומלץ ואפילו חיוני מאוד להמשך השיפורים באתר ועלותו מזערית ביחס לתמורה שהוא נותן לפרטים נוספים לחצו כאן.
- בסרגל הימני בוורדפרס לחצו על "תוספים" ולאחר מכן על "תוסף חדש".
- בשורת החיפוש מצד שמאל כתבו את שם התוסף הבא: Elementor – Header, Footer & Blocks Template, שזהו התוסף שמאפשר ליצור הדר ופוטר באתר.
- התקינו את התוסף על ידי לחיצה על "התקנה", לאחר סיום ההתקנה לחצו על "הפעלה".
4. כעת בואו נתחיל לעצב את ההדר
זה תהליך מהיר יותר מעיצוב העמוד. בסרגל הימני לחצו על "עיצוב" ולאחר מכן על Elementor – Header, Footer & Blocks. בדף מצד שמאל לחצו על "add new".
5. בשלב הזה ניצור הדר, בכותרת הטמפלט רשמו "הדר" ולאחר מכן בתפריט הנפתח למטה בסוג הטמפלט בוחרים ב-"header" ומתחתיו בוחרים בטריגר של "entire website". מיד לאחר מכן לחצו על הכפתור הכחול "עריכה באמצעות אלמנטור".
6. אתם תבחינו שנפתח לכם לוח העבודה של העורך אלמנטור. כעת מה שניצור בתוכו יהיה ההדר של האתר שלכם.
לחצו על סימן ה +, ומיד תבחרו שמבנה העמודה יהיה כפי שמסומן בתמונה.
ואז אתם צריכים לחזור לכל הווידג'טים בדף הראשי של הסרגל של אלמנטור, עשו זאת על ידי לחצי על האייקון השמאלי העליון בעורך.
7. בשלב אתם צריכים להוסיף את הלוגו שלכם להדר, עשו זאת על ידי גרירה של הוודג'ט "תמונה" לעמודה הימנית של ההדר.
השתדלו לשמור על אסטיות וגדלים שנעימים לעין למטרת חווית משתמש טובה. בכל שלב תוכלו לגרור את את העמודה ימין ושמאלה וכך להתאים את הגודל הרצוי.
8. ועכשיו בואו נוסיף את התפריט שיצרנו. לחצו שוב על האייקון השמאלי העליון בעורך של אלמנטור.
בשורת החיפוש של העורך חפשו "navigation menu" ולאחר מכן תגררו את הווידג'ט אל תוך העמודה השמאלית. ייתכן והתפריט יהיה בצדו השמאלי של העמודה לכן בסרגל הימני לחצו על "layout" ובשלונית "Alignment" בחרו באמצע או בימין.
ולסיום לחצו על הכפתור הירוק "פרסם"
על מנת ליצור את התפריט התחתון חזרו על אותו התהליך רק שבהגדרות הטמפלט כאשר אתם יוצרים אותו במקום "Header" בחרו ב"footer".
>> תרצו לדעת איך יוצרים טופס יצירת קשר? מעבר למדריך
10. הגדרות פרטי בעלי דומיין, הצבעה על השרת ותשלום על הדומיין.
לחצו כאן למעבר ל-Mynames, לאחר מכן בתיבת החיפוש הכניסו את שם הדומיין שאותו אתם רוצים שיהיה לאתר שלכם ובדקו אם הוא זמין.
אם הדומיין לא זמין, יהיה רשום לכם מתחת לסיומת שלו "תפוס" ואם הדומיין זמין כפתור "רישום דומיין" יופיע בצבע ירוק.
אם הדומיין שבחרתם תפוס אז כנראה יש כבר מישהו שמשתמש בו, תמצאו דומיין אחר. סיימו עם הרכישה ונעבור לשלב הבא.
* לאחר רכישת הדומיין תצטרכו לחכות עד 24 שעות לאישור הדומיין.
הצבעה על השרת בקלאודוויז
כעת על מנת שחברת אחסון השרתים קלאודוויז תקלוט את הדומיין החדש שרכשתם יש להצביע אל השרתים שלה.
1. התחברו לחשבון הקלאודוויז שלכם. והעתיקו את מספר הIP של השרת שלכם שנמצא תחת "Public IP".
בכתובת הIP שהעתקנו נשתמש בהמשך.
2. תתחברו לMynames עם שם המשתמש והסיסמא שהגדרתם ולחצו על "דומיינים".
3. לאחר מכן לחצו על הדומיין שרכשתם ובלשוניות למעלה לחצו על "ניהול DNS". ולאחר מכן לחצו על הלשונית + A
4. לאחר מכן ייפתחו 2 לשוניות. בלשונית "שם" רשמו את כתובת האתר שלכם ובשדה "ערך" רשמו את כתובת הIP שהעתקם בשלב הקודם.
5. לאחר מכן אתם צריכים להמתין לאישור החיבור שזה עורך בערך 24 שעות. בסיום ההמתנה התחברו בחזרה ללוח הבקרה של חברת אחסון האתרים Cloudways, לחצו על לשונית Domain Management. ואז לחצו על "Add Domain"
הוסיפו את שם הדומיין שאותו רכשתם ולחצו על "Save changes"
לאחר שהוספתם את הדומיין, באותו העמוד לחצו על 3 הנקודות מצד ימין ותבחרו "Make primary" שזה יהפוך את הדומיין שרכשתם לדומיין הראשי של האתר. לאחר מספר רגעים הדומיין יתעדכן ותוכלו להיכנס לאתר בעזרת הדומיין שרכשתם.
מדריך איך לבנות אתר אינטרנט - לסיכום
כאן הסתיים המדריך, רוב הסיכויים שלמדתם איך בונים אתר אינטרנט ועבר לכם בקלות. במידה ונתקלתם בקשיים אתם מוזמנים לכתוב למטה ואשמח לסייע בכל קושי או שאלה שיש לכם.
מדריכים משלימים:
בוודאי! בזכות הממשק של וורדפרס יחד עם אלמנטור כל אחד יכול לבנות אתר ללא עזרה של מתכנת.
דומיין – זהו הכתובת שתיצרו לאתר שלכם. עלות: 74 ₪ לשנה.
כך שבחישוב חודשי העלות שלכם עבור אחזקת אתר תהיה בסה"כ כ-65 ₪ לחודש.
