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

איך להשתמש באלמנטור

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

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

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

מה זה אלמנטור

אלמנטור (elementor) הינו הפלאגין הפופולארי ביותר לבנייה ועיצוב דפי אינטרנט בפלטפורמת וורדפרס.

כאשר בעבר, על מנת לבנות דף אינטרנט, היה צריך לדעת שפת תכנות כלשהי, בין אם html, css, או javascript, נכנסו אלמנטור לשוק ושינו את חוקי המשחק.

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

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

חלק מהווידג׳טים הינם: כותרת, תמונה, טקסט, טבלאות, וידאו וכו׳.

למה להשתמש באלמנטור

יש סיבות רבות מדוע כדאי לנו להשתמש באלמנטור ולהן רק חלק קטן מהן:

  • חיסכון בזמן – כמו שנאמר למעלה, בניית אתרי אינטרנט היה בעבר תהליך ארוך אשר לקח זמן ומשאבים רבים. שימוש באלמנטור חוסך לנו זמן יקר ומאפשר לנו לבנות אתר איטרנט בשעות בודדות.
  • עלות – מעצב אתרים מקצועי יכול להגיע למחירים של אלפי שקלים לכל דף או פרוייקט. כאשר נעבוד עם אלמנטור, נוכל לבנות אתר אינטרנט מקצועי ביותר בעלות מינימלית של כ-50 דולר (מחיר הפלאגין).
  • אין צורך בקודים או ידע טכני – יתרון הפלאגינים של עיצוב דפים מדיר מעלינו את הצורך ללמוד שפת תכנות ומאפשר לכולם, בלי יוצא מן הכלל, לבנות דפי אינטרנט מקצועיים ויפים מהבית.
  • חברה ישראלית – אלמנטור היא חברה ישראלית שמשרדיה נמצאים ברמת גן. בזכות זה יש תמיכה מלאה בטקסט rtl (ימין לשמאל) כמו עברית והפלאגין כולו מתורגם לעברית.
  • עדכונים שוטפים – מכיוון שזוהי בין החברות הגדולות אשר מייצרות עבור וורדפרס, ישנם עדכונים רבים ותחזוקה שוטפת של התוסף.
  • הרחבות – הפופולריות העצומה שאליו זוכה אלמנטור, גרמה לחברות נוספות לקום ולבנות תוספים והרחבות נוספות על הפלאגין עצמו. במידה ואתם מחפשים ווידג׳ט שאינו קיים באלמנטור, סביר להניח שתוכלו למצוא אותו בספריה נוספת שנבנתה עבורו.
  • עובד עם כל תבנית – זה כבר נהיה סטנדרדט שכל מפתחי התבניות (themes) יוצרים אותם כאשר אלמנטור בראש מעייניהם ותומכים בממשק בצורה מלאה.

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

איך להשתמש באלמנטור

על מנת להתחיל לעבוד עם אלמנטור, עלינו לפעול לפי שלושת השלבים הבאים:

  1. להתקין את אלמנטור.
  2. לעצב את הדף.
  3. לפרסם את הדף.

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

התקנת אלמנטור

דבר ראשון, עלינו להתקין את אלמנטור על אתר הוורדפרס שלנו.

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

לאחר שמצאתם, לחצו על התקנה, ואז על הפעל.

פלאגין אלמנטור

מצויין, עכשיו ניתן להמשיך לשלב השני ולערוך את הדף.

עיצוב הדפים בעזרת הפלאגין

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

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

בחירת מסגרת העמוד

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

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

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

בחירת תבנית עמוד

תבנית ברירת מחדל – תציג את כותרת הדף ותשמור על מסגרת האיזור החיצונית (section) ברוחב של עד 1140 פיסקלים.

קאנבאס – דף ריק ללא כותרת עמוד. מסגרת אידיאלית עבור יצירת דפי נחיתה. מסגרת חיצונית רוחב מלא.

רוחב מלא – הכלאה בין שתי המסגרות למעלה. בחירה זו תשאיר את כותרת העמוד אבל תרחיב את המסגרת החיצונית לרוחב מלא.

הסבר על ההבדל בין תבניות עמוד

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

במדריך הזה אנו נבחר בתבנית קאנבאס (canvas) על מנת לעבוד על אלמנטור בלבד ללא אלמנטים חיצויים כגון לוגו או כותרת עמוד. לאחר בחירת המסגרת, לחצו על עדכון ואז על כפתור ’עריכה באמצעות אלמנטור’.

עריכה דף באמצעות אלמנטור

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

ההבדל בין סוגי מסגרות העיצוב

כאשר משתמשים באלמנטור, ניתן לראות את סרגל הווידג׳טים בצד ימין ואת תוכן הדף בצד שמאל.

ממשק עיצוב ויזואלי אלמנטור

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

לפתיחת סקשן, לחצו על האייקון של הפלוס על מנת לבחור את מבנה האיזור.

הוספת סקשן באלמנטור

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

בחירת מבנה עמודות

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

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

גרירת וידגט לסקשן

לאחר שהנחנו את העיצוב הרצוי, ניתן לראות שלוש מסגרות שונות.

מסגרת חיצונית – צבעה כחול בהיר והיא מסמנת את הסקשן החיצוני. היא משתרעת לרוחב כל הדף (כי בחרנו בתבנית דף קאנבאס).

מסגרת אמצעית – בצבע אפור מקווקוו והיא מסמנת את העמודות הפנימיות.

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

הבדל בין סקשנים לעמודות לוידג׳טים

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

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

עיצוב האלמנטים

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

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

הלשוניות הן: תוכן, סגנון, ומתקדם.

לשוניות עיצוב וידג׳ט

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

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

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

שימוש במתקדם יאפשר לנו לשנות את מיקום האלמנט ע״י הוספת מרווח חיצוני (margin) או פנימי (padding), הסתרה במצב של מובייל וכו׳.

עיצוב האלמנטים בעזרת שלושת הלשוניות

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

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

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

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

מחיקה של איזור או וידג׳ט

במידה ואתם אוהבים את העיצוב שיצרתם ותרצו לשתף אותו עם העולם. ניתן להתקדם הלאה לשלב האחרון.

פרסום הדף

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

על מנת לפרסם את דף האינטרנט החדש שלכם, כל שעליכם לעשות הוא ללחוץ על כפתור ׳פרסם׳.

פרסום דף באלמנטור

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

התאמה למובייל (ריספונסיב)

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

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

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

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

שינוי תצוגת מסך למובייל

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

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

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

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

שינוי אלמנט במצב ריספונסיב

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

אלמנטור פרו

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

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

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

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

  • Ultimate Addons for Elementor
  • Essential Addons
  • Croco Blocks
  • Unlimited Elements
  • The Plus Addons
  • Piotnet Addons
  • Namogo Extras
  • Element Pack
  • Premium Addons

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

לסיכום

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

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

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

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

שיתוף ב facebook
שיתוף ב twitter
שיתוף ב linkedin
שיתוף ב pinterest
שיתוף ב whatsapp
איך לבנות אתר

איך לבנות אתר

עידו מוסקוביץ' (מייסד איך לבנות אתר) בעל התמחות נרחבת בבניית אתרים, חנויות אינטרנטיות, שיווק שותפים ובלוגים.

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

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

אתר זה נבנה בעזרת איךלבנותאתר