איך מקימים סיידבר ותפריט עליון באלמנטור?

איך מקימים סיידבר ותפריט עליון באלמנטור?

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

בניית אתר באמצעות מערכת וורדפרס:

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

שימוש באלמנטור לבניית אזורים שונים באתר:

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

מהו תפריט עליון ומה יהיה בו?

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

כיצד נבנה תפריט עליון באלמנטור?

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

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

התחברו ללוח הבקרה של האתר שלכם ובתפריט הצדדי לחצו על "עיצוב" -> "תפריטים". כעת תוכלו לערוך את התפריט הראשי הקיים שלכם או ללחוץ על "צור תפריט חדש". אל תפריט זה הוסיפו את העמודים הראשיים שאתם רוצים וסדרו אותם בהתאם לצורך שלכם. שימו לב שתוכלו גם לשלב עמודים כתת קטגוריה לעמודים אחרים ובכך יצא לכם בעריכה תפריט נפתח. לאחר שבחרתם את העמודים הרצויים וסידרתם אותם בסדר שאתם רוצים – תגללו למטה וסמנו בV את האופציה main menu או primary navigation תלוי מה מופיע לכם. לבסוף לחצו על שמור. מומלץ גם לתת שם לתפריט שיצרתם כי תכף תצטרכו לבחור אותו באלמנטור ולכן כדאי לדאוג לזה כבר עכשיו.

עיצוב תפריטים

יצירת תפריט

בשלב השני:

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

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

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

בניית HEADER

מהו סיידבר ומה נרצה שיהיה בו?

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

כיצד נבנה סיידבר באלמנטור?

היכנסו ללוח הבקרה של האתר שלכם ותחת טמפלטים -> הוספת חדש – נגדיר שאנו רוצים "עמוד יחיד" וניתן לו שם "סיידבר". כעת כשניצור את העמוד נוכל לבחור בתבנית מוכנה שאלמנטור פרו מאפשר לנו בלוק מעוצב מוכן עם 2 עמודות – אחת לתוכן ואחת לסיידבר. נבחר אחת מהן או ניצור בעצמנו מאפס. במידה ובחרנו עיצוב מוכן עם עליית העמוד לאחר היצירה שלו נוכל לראות שאזור הסיידר כולל אלמנט סיידר שאם יצרנו באזור הווידג'טים של וורדפרס (עיצוב -> ווידג'טים) סיידר אז נוכל פשוט לבחור אותו כאן והוא יופיע לנו עם כל האלמנטים שכבר יצרנו. במידה ואין לנו אחד כזה פשוט נמחק את האלמנט הזה ונתחיל להוסיף לעמוד זו אלמנטים שונים מסרגל האלמנטים שאנו רוצים שיופיעו שם. לדוגמה: פוסטים אחרונים. נגדיר את המאפיינים כך שיוצגו בצורה יפה ואסתטית בסיידבר שלנו ונמשיך להוספה של אלמנטים שונים בעמודה. לאחר שסיימנו לעצב את התפריט הצדדי נפרסם את העמוד ונגדיר היכן אנו רוצים שהסיידבר יופיע (כל עמודי האתר, רק עמודים, רק פוסטים וכו'). לעתים תרצו ליצור יותר מתפריט צדדי אחד לאזורים שונים באתר.

טמפלטים

איך עובדים עם שורט קוד באלמנטור?

איך עובדים עם שורט קוד באלמנטור?

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

בניית אתר לעסק באמצעות מערכת וורדפרס:

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

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

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

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

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

אלמנט השורט קוד – מהו ומתי נצטרך אותו?

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

מדוע נרצה לעבוד עם אלמנט השורט קוד ולא עם עריכת הHTML של אלמנט הטקסט?

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

איך נוסיף שורט קוד לעמוד באתר שלנו?

זה מאוד פשוט למעשה. כל שאתם צריכים הוא להיכנס לעריכה באלמנטור של העמוד אותו אתם רוצים לערוך -> לחפש בסרגל האלמנטים את האלמנט shortcode (מומלץ להיעזר בחיפוש המהיר שם) -> למשוך את האלמנט שורט קוד לעמודה בטקסט בה אתם רוצים למקם אותו ולהדביק את הקוד שקיבלתם מאותו תוסף/כלי שאתם רוצים להטמיע. אתם תוכלו לראות את התיבה הלבנה בצד ימין אליה תוכלו להדביק את הקוד. כעת בדקו בלייב את האלמנט עצמו ושהוא מופיע כפי שאתם רוצים.

עריכת שורקוד

שורקוד

מה קורה במידה וצריך לבצע התאמות של גודל וצבעים או הגדרות אחרות באלמנט שאנו שותלים?

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

לסיכום; שימוש בקודים קצרים (SHORTCODE) הוא שימוש פופולרי מאוד בוורדפרס ובבניית אתרים בכלל. לשמחתנו כיום ניתן לבצע הטמעה מהירה ופשוטה באמצעות האלמנטור. גם אם יש לכם אלמנטור בגרסה החינמית שלו תוכלו למצוא תוסף שורט קוד חיצוני לאלמנטור אותו תוכלו להתקין ולחבר אל האלמנטור שלכם. כמובן הדבר המומלץ ביותר הוא פשוט להשתמש באלמנטור פרו לאתרים שלכם או לעבוד עם חברת בניית אתרים העושה שימוש בתוסף הפרו עבור לקוחותיה והיא גם תוכל לבצע עבורכם את ההטמעה של הקוד באתר בקלות ובמהירות.

יצירת FOOTER ו-HEADER באלמנטור

יצירת FOOTER ו-HEADER באלמנטור

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

איך בונים אתר בשנת 2021?

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

מהי מערכת וורדפרס ומה היתרונות שלה?

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

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

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

מהו אזור של HEADER באתר?

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

HEADER

איך נקים אזור HEADER באלמנטור?

היכנסו ללוח הבקרה של האתר שלכם. בתפריט הצדדי תראו מתחת לאלמנטור את הקטגוריה "טמפלטים" בלחיצה על זה יפתח תת התפריט ולחצו שם על "הוספת חדש". כעת תוכלו לבחור את סוג הטמפלט החדש שאתם בונים -> בחרו בHEADER. תנו שם לתבנית שתדעו במה מדובר וצרו את התבנית. כעת תוכלו לבחור בלוקים מעוצבים של HEADER לפי ההמלצות של האלמנטור (אם יש לכם אלמנטור פרו) או פשוט ללחוץ על האיקס וליצור את ההידר מאפס כרצונכם. כעת תוכלו ליצור אזורים ועמודות ולצקת אליהן אלמנטים לפי הצורך שלכם, לסדר את הגודל, הצבעים, המרחקים בין האלמנטים והמיקום שלהם כדי לעצב את החלק העליון של האתר כפי שאתם רוצים. בין היתר מומלץ להשתמש בכותרת ראשית לאתר ו/או לוגו, באנר פרסומי אם תרצו בחלק העליון (אפשר באמצעות שתילת קוד HTML), תוכלו להוסיף תפריט, כפתור מיוחד למשל ליצירת קשר מהירה ועוד. לחצו על שמור ופרסם. לאחר הפרסום תוכלו לבחור היכן הHEADER יוצג. לחצו על "הוסף תנאי" ואפשרו לו להיות מוצג בכל האתר. אם תרצו תוכלו גם להגביל את ההופעה שלו בעמודים מסוימים.

בניית HEADER

טמפלטים

 

בניית HEADER

מהו אזור של FOOTER באתר?

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

פוטר

כיצד נקים אזור FOOTER באלמנטור?

בדומה להקמה של אזור ההידר כך נקים את אזור הפוטר. נכנס לטמפלטים ->הוספת חדש. נבחר ב"FOOTER", ניתן לתבנית שם ונערוך את האזור באמצעות אלמנטור. מומלץ תחילה להקים בלוק המחולק ל3-4 עמודות ובעמודות הללו לכלול את הקישורים או המידע שאתם רוצים. גררו את האלמנטים מהסרגל הצדדי לעמודות לפי הצרכים שלכם והתחילו לעצב בנחת את אזור הפוטר שלכם. כאשר אתם שומרים זכרו להגדיר כתנאי היכן אתם רוצים שהפוטר יופיע.

בניית FOOTER

בניית FOOTER

איך ליצור אייקון עם אנימציה?

איך ליצור אייקון עם אנימציה?

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

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

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

היתרונות בהוספת אנימציות לעיצוב האתר שלנו:

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

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

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

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

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

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

שלב 1

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

שלב 2

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

שלב 3

היכנס בלוח הבקרה של האתר שלכם לתוספים -> תוסף חדש. כעת חפשו lordicon או את התוסף האחר שאתם רוצים להתקין (אנו משתמשים בlordicon כדוגמה מומלצת). לאחר שתתקינו ותפעילו את התוסף תוכלו לראות את השם של התוסף בצד ימין בתפריט.

lordicon

שלב 4

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

lordicon

שלב 5

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

lordicon

שלב 6

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

שלב 7

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

שורקוד

פופאפים באלמנטור

פופאפים באלמנטור

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

מדוע אנו בחברת די ווב אוהבים לבנות אתרים במערכת WORDPRESS?

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

עיצוב אתר ומיתוג העסק – הפיכה של התכנון על הנייר למציאות צבעונית יפיפייה:

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

שימוש באלמנטור לעיצוב ובניית אתר העסק:

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

התכונות המיוחדות של האלמנטור:

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

 

מהם פופאפים וכיצד הם יכולים לעזור לנו?

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

פופאפ פופאפ

 

 

סוגי פופאפים שניתן לעצב עם אלמנטור באתר שלנו:

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

פופאפ באלמנטור פופאפ באלמנטור

למה יכולים לשמש אותנו הפופאפים?

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

יתרונות הפופאפים של אלמנטור:

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

התאמות מלאות באופן אישי לצרכי העסק:

ניתן להתאים את החלונות הקופצים בעמודים ובפוסטים שאתם רוצים: בכל האתר, רק בפוסט/בעמוד מסוים, רק בפוסטים בקטגוריה מסוימת, רק בדפי חיפוש וכו'. ניתן לקבוע את הפעולות שיגדירו את רגע ההקפצה של החלוץ: מיקום העכבר לפני יציאה, גלילה של העמוד, עמוד נטען, לאחר חוסר פעילות של זמן מה באתר, לאחר הקלקה כלשהי באתר ועוד. לבסוף תוכלו להתאים את החלונות הקופצים לפי משתמשים, למשל רק לכאלה המגיעים מכתובת URL מסוימת, רק למכשירים מסוימים, רק לגולשים שביצעו פעולה מסוימת באתר, רק למשתמשים שאינם רשומים ועוד.