מה אנחנו עושים?
עבדתם כבר עם וורדפרס ורוצים להכיר את אלמנטור? אנחנו עומדים לבנות דף נחיתה פשוט עם אלמנטור שיעזור לנו להכיר טוב יותר את סביבת העבודה של אלמנטור ואת השימוש בו!
איך מתחילים?
ניצור עמוד חדש באתר שלנו וניתן לו שם, נתחיל מלבחור תבנית בצד שמאל של העמוד שהגענו אליו (עמוד העריכה הבסיסי של וורדפרס) ותחת "מאפייני עמוד" נבחר בתבנית הדף את התבנית "אלמנטור קנבס", בדיוק כמו שהשם אומר התבנית תהפוך את הדף שלנו לקנבס בשביל אלמנטור. נלחץ על כפתור הפרסום הכחול מעל וכבר שמרנו לעצמנו את הדף! עכשיו אפשר להתחיל לערוך את הדף דרך אלמנטור.
כדי להתחיל לערוך את הדף נלחץ על "עריכה באמצעות אלמנטור". מה שיפתח לנו עכשיו הוא דף חדש עם מסך העבודה של אלמנטור. במרכז הדף נראה קופסה מקווקות עם הכפתורים "הוסף אזור חדש" ו-"הוספת טמפלט" ומתחת את הטקסט "או גרור לכאן וידג'ט"
בתפריט בצד ימין נמצאים הוידג'טים שאפשר לגרור, ובתחתית התפריט על פס השחור, כפתור פרסום \ עדכון שיעדכן את השינויים שעשינו לדף ויציג אותם בדף הציבורי, כפתור הצג שינויים שיאפשר לנו לראות את השינויים שעשינו לדף לפני שנעלה אותם (עין), היסטוריית עריכה (חץ מעוגל), מצב רספונסיביות (מסך מחשב \ טלפון) והגדרות (גלגל שיניים).
עכשיו כשאנחנו יודעים איזה כפתורים יש לנו, נדבר קצת יותר לעומק על שניים מהם!
רספונסיביות
קיימים שלושה מצבי רספונסיביות שנותנים לנו לערוך את הדרך בה הדף יוצג במכשירים שונים. אנחנו נעבוד עם שני מצבים, דסקטופ ומובייל. נתחיל תמיד בעבודה על מצב דסקטופ, וכשהדף יראה לנו כמו שצריך במצב דסקטופ, נעבור למצב מובייל ונתאים את העיצוב שכבר בנינו במצב דסקטופ לגודל מסך של טלפון. בדרך כלל אלה יהיו שינויים קטנים כמו להגדיל או להקטין חלקים מסוימים בדף על מנת שיתאימו לתצוגה נוחה במובייל.
חשוב להדגיש! כשעובדים במצב מובייל, רוב השינויים שתעשו לא ישפיעו על העיצוב שבניתם במצב דסקטופ! כך שכל מה שנשאר לעשות הוא לדאוג שהדף יראה טוב גם במובייל.
הגדרות (רקע)
בתפריט ההגדרות נוכל להגדיר שינויים כלליים שחלים על כל הדף כמו כותרת, תבנית, סטטוס פרסום של הדף ואפשרויות סגנון שונות כמו רקע. כשנתחיל את העבודה עם דף באלמנטור הרקע שלו יהיה לבן, אנחנו רוצים להגדיר בהתחלה רקע כדי שנוכל להתחיל לעבוד על העיצוב של הדף. בדף הנחיתה שאנחנו בונים לדוגמה יש טקסט לבן, לכן נגדיר רקע שאיתו נוכל לראות את העיצוב כמו שצריך.
כדי לשנות את הרקע נלך אל תווית סגנון בהגדרות ושם נבחר בסוג רקע קלאסי שמסומן במברשת. יפתח לנו ריבוע המאפשר לנו לבחור תמונת רקע, נלחץ עליו ונבחר את הרקע שאנחנו רוצים מספריית המדיה או שנעלה רקע בעצמנו לאתר דרך תווית "העלאת קבצים."
אחריי שהעלנו את הרקע, אנחנו רוצים שהרקע יתאים את עצמו לכסות את כל המסך. כדי לעשות את זה, נלך אל הבחירה "גודל" שעכשיו נמצאת מתחת לאיפה שהעלנו את התמונה ונבחר "כיסוי", זה הכל! עכשיו כשיש לנו רקע אפשר להתחיל לעצב!
מתחילים לעצב!
דף הנחיתה שלנו מורכב מכמה אלמנטים פשוטים, נעבור על איך נכניס כל אחד מהם לדף שלנו ואיך כל אחד פועל בנפרד.
כותרת 1
האלמנט (וידג'ט) הראשון שנוסיף הוא כותרת!
נגרור בלוק של כותרת מצד ימין אל הדף שאנחנו בונים. בדף הדוגמה שלנו הכותרת ממורכזת והטקסט גדול יותר, איך עושים את זה? כשלוחצים על הכותרת שהוספנו יפתחו לנו אפשרויות שדומות קצת לאלה בהגדרות. בתווית התוכן בצד ימין נוכל לכתוב את הטקסט שלנו ולקבוע דברים שקשורים לתוכן כמו את היישור של הטקסט, אנחנו ניישר למרכז הפעם.
תחת התווית סגנון נוכל לשנות בדיוק את זה. בסגנון של הכותרת אפשר לשנות צבע ובאפשרויות הטיפוגרפיה של הטקסט (כפתור עם אייקון של עט) אפשר לשנות דברים שיותר קשורים לצורה של הטקסט כמו: לבחור את סוג הפונט שאנחנו רוצים, את הגודל של הכתב, משקל (כמה הטקסט בולט ומודגש), להוסיף עיטור (קו תחתון \ עליון), לקבוע גובה שורה ולשנות את המרווח בין האותיות.
נחליף את הצבע של הכותרת ללבן (לחיצה על הריבוע ליד צבע טקסט) ובטיפוגרפיה נקבע את המשקל ל-900 ואת הגודל ל-44. וזהו! הכותרת שלנו מוכנה!
טיפ מהיר!
כדי לחזור חזרה אל התפריט הראשי של אלמנטור עם הוידג'טים שאפשר להוסיף, נלחץ על הכפתור עם הריבועים בצד השמאלי בראש התפריט.
כותרת 2
ניצור עוד כותרת מתחת לכותרת הראשונה עם כיתוב נוסף, נמרכז אותה, נשנה את הגודל שלה ל-40 ונשאיר את המשקל כברירת מחדל. את הצבע נשאיר בתור הכחול שמגיע כברירת מחדל עם הכותרת.
אל האלמנט הבא!
טקסט - עורך הטקסט
עכשיו כששני הכותרות שלנו במקום, אפשר להוסיף את הטקסט! (הפעם פסקה)
כדי להוסיף את הטקסט נלך חזרה אל תפריט הוידג'טים ונגרור מתחת לשתי הכותרות אלמנט "עורך טקסט". הוידג'ט הזה פועל מאוד דומה לכותרת אבל נועד לפסקאות טקסט ארוכות יותר.
נכניס את הטקסט שלנו בתווית תוכן ונדגיש אותו ואחר כך שוב תחת סגנון נשנה את הצבע של הטקסט ללבן, נגדיל את הטקסט מעט באפשרויות טיפוגרפיה, ונמרכז אותו. נלחץ עדכן ונעבור לחלק הבא בדף שלנו!
כותרת עם רקע וקצת על ריווח
הפעם נוסיף טוויסט לכותרת שלנו, עם רקע!
כדי להוסיף לכותרת רקע, נכניס לדף שלנו כותרת כמו השתיים שהכנו כבר למעלה, נשנה את הצבע שלה, נגדיל אותה דרך טיפוגרפיה ועכשיו כדי להוסיף את הרקע ניכנס לתווית חדשה, "מתקדם" ושם תחת רקע, אפשר לבחור את הרקע הקלאסי שאנחנו מכירים אבל הפעם נבחר הפעם בסוג רקע של מעבר צבע. עכשיו יש לנו אפשרויות להגדרת מעבר צבע (Gradient), נוכל לבחור את שני הצבעים למעבר, את המיקום של כל צבע על המעבר (כמה מקום כל צבע יתפוס מהרקע) ואת הזווית שבה הצבעים נפגשים.
עכשיו כשיש לנו רקע, לכותרת, אפשר לראות שהרקע נורא צמוד לכותרת שלנו בגובה, ומתפרש על הדף לשני הצדדים, כשבדף הדוגמה שלנו הרקע יותר ממורכז ולכותרת יש יותר מקום לנשום. כדי לשנות את זה נבחר תחת התווית "מתקדם" של הכותרת בסגנון אלמנט, שם יש לנו שוליים פנימיים וחיצוניים שאפשר להעלות ולהוריד לארבעת הכיוונים כשהאייקון של השרשרת בצד מופעל, ובנפרד לכל כיוון כשהאייקון כבוי.
שוליים פנימיים מגדירים כמה נפח ניתן לכותרת מבפנים, כשנגדיל את השוליים הפנימיים יהיה יותר שטח ריק מסביב לכותרת עצמה, אבל בתוך המסגרת שבה הכותרת נמצאת, כאילו הכותרת דוחפת את מה שמסביב לה מבפנים, כאן נשתמש בשוליים פנימיים כדי לתת לכותרת קצת מקום לנשום בתוך הרקע.
שוליים חיצוניים מגדירים כמה אנחנו דוחפים את המסגרת שבה הכותרת נמצאת. ככה נוכל לדוגמה לדחוף את הכותרת קצת למעלה או למטה אם נרצה להשאיר מרווח מעל או מתחת לכותרת ומתחת לרקע.
במקרה שלנו, כדי להקטין את הרוחב של הרקע נבטל את האייקון של השרשרת בצד ימין, ונעלה את השוליים החיצוניים מימין ומשמאל באופן שווה ככה שהרקע של הכותרת יתפוס חלק קטן יותר מהמסך.
שוליים חיצוניים ופנימיים מאוד חשובים למיקום וריווח של אלמנטים בדף, תרגישו חופשי לשחק איתם עד שתרגישו בנוח איתם!
נוכל גם לעגל את הפינות של הרקע תחת האפשרות של "מסגרת" בתווית "מתקדם" כמו שהגדרנו את השוליים מקודם!
רשימת אייקונים
האלמנט הבא שנוסיף הוא רשימה עם אייקונים. כדי להוסיף אותה נחפש בתפריט הוידג'טים בצד "רשימת אייקונים" ונגרור את הוידג'ט אל מתחת לכותרת עם הרקע שהוספנו מקודם. בתוכן התוכן של הרשימה נוכל לראות את הפריטים שנמצאים כרגע ברשימה, לגרור ולסדר אותם מחדש, ליצור פריטים חדשים, לשכפל אותם עם האייקון של הדפים ליד כל פריט או למחוק אותם עם האיקס.
כשנלחץ על אחד מהפריטים ברשימה נוכל לערוך את הטקסט שלו, לבחור את האייקון שלו ולהוסיף קישור לטקסט. אנחנו רוצים שכל הפריטים ברשימה שלנו יהיו עם אייקון של וי ✔ אז נמחק את שתי הפריטים עם האייקון של העיגול והאיקס שמגיעים עם הרשימה ונשכפל את האחד עם הוי. נוסיף את כל הטקסט והפריטים שאנחנו צריכים לרשימה ונעבור לשלב הבא!
טופס
הדבר הבא שנוסיף לדף שלנו הוא טופס, כדי להוסיף אותו נגרור אלמנט של טופס מתפריט הוידג'טים בצד ימין. כמו עם רשימת האייקונים ממקודם, בתווית התוכן של הטופס אנחנו יכולים לראות את השדות את הטופס מסודרים ברשימה, עם האפשרות לסדר, להוסיף, לשכפל ולמחוק.
נתחיל מהשדה של השם. כשנלחץ עליו נוכל לשנות את הסוג של השדה (לדוג' טקסט, טלפון, מייל וכו'), את התווית שתופיע מעל השדה, את הטקסט הפנימי שלו שיופיע בתוך השדה, לבחור אם השדה הוא שדהחובה, ואת הרוחב של השדה באחוזים.
לטופס שלנו אנחנו לא רוצים תווית מעל השדה לכן נמחק אותה, אנחנו רוצים שהשדה של השם יהיה חובה אז נלחץ על המתג שהופך את השדה לחובה, ואנחנו רוצים שהשדה יהיה רק 50% ברוחב שלו על מנת שנוכל להכניס באותה שורה שדה נוסף, אז נהפוך את השדה ל-50%.
נעבור לשדה הבא, האימייל. במקרה שלנו אנחנו רוצים לקבל לא מייל, אלא טלפון, אז בתוך האפשרויות של השדה לאימייל, נבחר בסוג השדה את האפשרות של טלפון, נמחק את התווית, בטקסט הפנימי נכניס "נייד", נהפוך גם את השדה הזה לחובה ונשנה את הרוחב שלו ל-50% כך שיכנס עם השדה של השם באותה שורה.
אפשר להוסיף גם שדות מסוג בחירה, לדוגמה: "האם העסק מקודם בפייסבוק?" בהם נכניס את התשובות בתיבת הטקסט כשכל תשובה נמצאת בשורה נפרדת. בשדות אלה התווית היא חובה מכיוון שהמלל של שדות אלה נמצא בתווית.
עכשיו כשהגדרנו את השדות שלנו אפשר לעבור לתווית הסגנון ולעצב את הטופס שלנו. תחת האפשרויות של טופס נוכל להגדיר את הריווח בין העמודות והשורות של הטופס, להגדיר את העיצוב לטקסט התווית כמו שהגדרנו לכותרות והטקסט הקודמים. תחת שדה נוכל להגדיר את הרקע של השדות, צבע הטקסט הפנימי, רוחב מסגרת שאפשר להגדיל כמו עם השוליים ממקודם, בנפרד לכל צד או מאוחד ועיגול הפינות של השדות.
הדבר האחרון שנשאר לנו לערוך בטופס הוא את הכפתור. בתווית התוכן של השדה, נבחר ב-"כפתור שליחה" מתחת לאפשרויות לשדות הטופס. שם נוכל לערוך את הטקסט של הכפתור, להוסיף לו אייקון, לבחור את לו רוחב וליישר אותו.
בתווית הסגנון, באפשרויות לכפתור נוכל להגדיר את העיצוב של הכפתור בשני מצבים: רגיל והובר.
העיצוב הרגיל יופיע כשאין שום אינטראקציה עם הכפתור, זה העיצוב של הכפתור שיופיע רוב הזמן, הובר יופיע כשנרחף עם העכבר מעל הכפתור. בעיצוב הכפתור נוכל לשנות את גודל הטקסט בפנים דרך טיפוגרפיה, את צבע הטקסט, את צבע הרקע של הכפתור, ואת המסגרת שלו.
תחת האפשרויות להובר נוכל לשנות את כל העיצוב של הכפתור כמו מקודם, ולהוסיף גם אנימציה במעבר על הכפתור.
והטופס שלנו מוכן!
תמונה - לוגו
כמעט סיימנו! אם לא התייאשתם מהטופס, כל מה שנשאר להוסיף הוא תמונה, הלוגו. נוסיף מתחת לטופס שלנו וידג'ט תמונה מצד מהתפריט בצד ימין ויפתחו לנו אפשרויות להוסיף תמונה כמו שעשינו עם הרקע בתחילת המדריך. נוסיף תמונה של הלוגו שלנו מספריית המדיה או שנעלה אחת, נדאג ליישר אותה למרכז באפשרויות היישור שבתחתית התפריט, ובמידה והתמונה גדולה מדי נוכל ללכת לסגנון ולהקטין את התמונה בסליידר הגודל.
וזהו!
הכנו דף נחיתה! נלחץ על כפתור העין לתצוגה מקדימה, ניכנס למצב מובייל בכפתור הרספונסיביות ונגדיל או נקטין דברים כמו טקסטים שלא מתאימים למובייל ולסיום נלחץ על עדכן ונעלה את דף הנחיתה שלנו.
בהצלחה!
