בלוג

  • מה זה בכלל שורטקודים?

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

    דף התמיכה של WordPress.com מגדיר אותם כך:

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

    בהשוואה לקוד רגיל, שבדרך כלל נראה כך:

    HTML5-video-tag-sample-code
    (אה… מה?)

    שורטקודים באופן כללי נראים בערך כך:

    embed_shortcode
    (פשוט וקל.)

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

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

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

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

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

    בניית אתרים מהנה!

  • מיפוי שורטקודים: כיצד PBS יתמוך ב-800+ תוספים וב-2,000+ שורטקודים

    How-PBS-Supports-800-Plugins-2000-ShortcodesWhen I started getting further into software development and WordPress, I noticed that not a lot of page builders I come across with have that “page builder standard” I was looking for: fast, easy, convenient.

    Page Builder Sandwich, then, was created with the goal of having a builder meet these same standards.

    I wanted- and still want it– to be the best page builder out there, and the best way I could accomplish that, I figured, was to add in features in a way in which page building becomes helpful and accessible to everyone –developers and noobs alike.

    I’d like to note though, that I didn’t simply create PBS with the intent of merely bombarding it with features just for the sake of it.

    I want to add in features that people would want to work with; features that hopefully, would make the experience of page building feel a little bit more like magic.

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

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

    But I think it’d be better if we take it to the next level; to take a bigger leap, do something more drastic, something drizzled with a little more awesomesauce.

    And so we came up with an idea: “How about we start supporting 800+ plugins along with their 2000+ shortcodes?!?!”

    I know what you’re thinking: “How the heck can you support that much shortcodes? Is that even possible?”

    Well, the simple answer is yes. Yes it is.

    And we’ve managed to achieve this feat through shortcode mapping.

    What is Shortcode Mapping?

    Shortcode mapping
    Shortcode mapping makes building shortcodes more friendly.

    Put more simply, shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

    היתרונות של מערכת כזו הם משמעותיים למדי:

    1.) Since PBS already knows what your shortcodes are, you get to spend less time going through the documentation of each plugin you use, and check how to use their shortcodes.

    2. ) In other words: Say goodbye to the grueling task of manually typing in your shortcodes!

    3.) With shortcode mapping, you can also say goodbye to manually checking post type ID’s. How? PBS can give you a list of all your contact forms through a drop-down list, so instead of looking for ID’s while on admin mode, you can pick from the list we made instead.

    4.) You’ll get to use dropdowns, colorpickers, image uploaders, and even number sliders when adjusting shortcode attributes.

    5.) Overall faster page building time!

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

    כיצד מיפוי שורטקודים עובד בבוני עמודים אחרים

    Lonely times
    Each person/site does their own shortcode mapping.

    Other page builders have a dedicated admin page for shortcode mapping. You go inside your admin page, and then their admin page. You put in your shortcode, edit a number of text fields, then hit save. Finally, when you go to your page builder editor, the shortcode is now there in element list.

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

    What’s more, all your mappings only reside on your site. So when the times comes that you need to work on another site, you’ll have to copy your mappings all over again. Additionally, if and when you install a new plugin that has shortcodes, then you’re going to have to map those too.

    כיצד מיפוי שורטקודים עובד ב-Page Builder Sandwich

    Shortcode mapping is centralized
    Shortcode mappings are shared across all users.

    Unlike the norm, shortcode mapping in Page Builder Sandwich is done on a global scale. The most used and popular plugins are gathered first, and all their shortcode mappings are created and updated in a central area. These will then spread out to all users depending on what they have installed. In other words, PBS studies and reviews all the shortcodes you have, including your activated plugins. Afterwards, it gives you the mapping of basically everything you need.

    זה מעניק לנו המון יתרונות נהדרים:

    1. Maximum coverage. Since we’ll be mapping out the shortcodes of the popular plugins, PBS will be able to support a majority of the shortcodes available on your site.
    2. Constant and frequent additions, updates and corrections. And since it’s in a central area, changes can be made quickly, and can be disseminated to all users.
    3. It basically works like magic. Let’s say you just installed a new plugin. Then you activate it, all mappings for its shortcodes will automatically get sent to you right away.
    4. Gone are the days when you have to personally map shortcodes yourself. PBS will do that for you.
    5. Your site remains lean and fast, and will only contain shortcode mappings that are relevant to you.
    6. Plugin zip size remains small. Even though PBS supports thousands of shortcodes, the plugin file size is still small. Your site and your backups remain small too!

    In case you’re interested in reading into how we made all of this possible,  we actually have a second part to this article in which things might start sounding a little more technical (if that’s your drift).

    הירשמו לניוזלטר שלנו!

    You can also opt to sign up to our mailing list, which will automatically notify you when we officially release this feature, (you can get future updates from us too, if you want). The shortcode mapping functionality will be out for our customers tentatively on August 12 August 15 2016. Not all shortcodes will be mapped by this time (our estimate is maybe 100 plugins), but mapping will be continuously done and customers will get them as soon as new ones roll out.

    So sign up to our newsletter to get news on shortcode mapping, when we’ll release it, and when we open shortcode mapping to the public! Until then, we hope you enjoy this new feature of ours, and that you have fun exploring it!

  • הוספת מפות מעוצבות לדף שלך היא חוויה אינטראקטיבית

    Adding-Stylish-Maps-to-your-Page-is-an-Interactive-Experience-2כעת תוכלו להוסיף מפות בעיצובי העמודים שלכם באמצעות Page Builder Sandwich!

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

    הנה הצצה:

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

    כך מוסיפים מפה באמצעות בונה עמודים טיפוסי:

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

    הדרך של Page Builder Sandwich להוספת מפה

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

    כך מוסיפים מפה באמצעות Page Builder Sandwich:

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

    הדרך שלנו הרבה יותר מהנה ואינטואיטיבית. אתם בעצם מקיימים אינטראקציה עם המפה בדיוק כפי שהייתם עושים ב-Google Maps רגיל.

    מפות צבעוניות או עיצוב באמצעות SnazzyMaps

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

    הנה אחת שצבענו בוורוד:

    Page Builder Sandwich תומך גם בערכות צבעים מורכבות יותר דרך SnazzyMaps. יש להם רשימה ענקית של ערכות צבעים שנתרמו על ידי משתמשים, והם מאפשרים לכם ליצור ערכה משלכם אם תרצו שליטה רבה יותר בצבעים.

    פשוט מצאו את ערכת הצבעים שאהבתם, העתיקו את הקוד והדביקו אותו ב-Page Builder Sandwich. ערכת הצבעים תוחל על המפה שלכם באופן מיידי.

    הנה ערכת צבעים מגניבה בשם papuportal dark מ-SnazzyMaps:

    מקמו מפות בכל מקום שתרצו

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

    אם עדיין אין לכם את Page Builder Sandwich, תוכלו לנסות את גרסת הפרימיום על ידי לחיצה על הקישור "Live Demo" למעלה.

  • 5 סיבות מדוע רווח לבן חשוב

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

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

    אז למה רווח לבן חשוב?

    newsfeed
    מקור התמונה: News Feed

    סיבה מס' 1: משפר את הקריאות

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

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

    hpmagicwords
    מקור התמונה: HP Magic Words

    סיבה מס' 2: מאיץ את האינטראקציה

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

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

    google
    מקור התמונה: Google

    סיבה מס' 3: מושך את תשומת הלב לאלמנטים הנכונים

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

    זכרו, אם הכל בולט, שום דבר לא בולט.

    מקור התמונה: Pocket Penguins

    סיבה מס' 4: הרושם הראשוני קובע

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

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

    flockknitwear
    מקור התמונה: Flock Knitwear

    סיבה מס' 5: מסייע ליצור מרחב נשימה ואיזון

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

    סיכום

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

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

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

  • הבעיה הלא מדוברת של שורטקודים

    The-Unspoken-Problem-of-Shortcodes

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

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

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

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

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

    אז מה הבעיה כאן? זה נשמע פשוט מספיק, פשוט מזינים טקסט קצר עם סוגריים וזהו.

    וכאן נכנס לתמונה ה-Shortcode API..

    שפע של שורטקודים

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

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

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

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

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

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

    Screen-Shot-2016-06-22-at-11.27.09-AM

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

    Screen-Shot-2016-06-22-at-11.28.54-AM

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

    Screen-Shot-2016-06-22-at-11.22.41-AM

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

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

    הפתרון האידיאלי

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

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

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

    ההסתייגות

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

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

    ה-Shortcode API אינו מספק שום תשתית להוספת תיאורי שורטקודים, המרת סוגי מאפיינים (type casting) או תיאורי מאפיינים. ואלא אם כן וורדפרס עצמה תוסיף אזור מרכזי לגישה לשורטקודים, אני בספק אם תשתית כזו תיווצר.

    סיכום

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

    חלופה

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

    אנחנו כאן ב-Page Builder Sandwich יוצרים משהו שבתקווה יוכל לפתור את חידת השורטקודים הזו. הירשמו לניוזלטר שלנו למטה כדי לקבל עדכונים על ההתקדמות שלנו.

  • 5 טיפים פשוטים כדי לגרום לאתר שלך להיראות טוב

    5-Simple-Ways-To-Make-Your-Website-Look-GoodIn general, one thing that most people tend to overlook is today’s demand for functional design and aesthetics. While not all of us may be aware of the extent of just how much it matters, the fact remains that design is a very crucial factor towards success—any kind of success– including your website’s. Yes, your content is an important key towards reeling your audience in, but how your site looks will definitely be a determining factor as well.

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

    Add high-quality images

    You want to add the best quality images on your website that reflect your brand style, but if you don’t have a high-resolution camera or the money to pay a photographer, you can get free stock photos from sources like Pexels and Pixabay. Images should pertain directly to the content of your site. Including images is always better than no images at all.

    בחרו את הצבעים הנכונים

    booneselections
    Lawrence Boone Selections uses black to add a sense of luxury and value to their website
    juicebox
    Juicebox used this zesty combination for people to get that organic and fresh that the brand represents

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

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

    Additional Tip: There are great tools such as Adobe Colour CC and Coolors to make picking colors easier.

    השתמשו בגופנים מנוגדים

    Font Pairing There are more fonts other than Arial, Georgia and Times New Roman. Google Web Fonts offer a variety of typefaces you can use for free on your site. Just like with choosing colors you can easily over do fonts, so I suggest you do not use more than two typefaces on your website. Most well-designed websites use two typefaces only, one for the headlines and one for the body text.

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

    שמרו על מראה נקי באמצעות שטח לבן

    Whitespace is one of the easiest and most effective ways to create a visually effective website. Your website should look well organized and clutter free, directing users exactly where they need to go. Make sure elements stand out and are grouped together by using whitespace properly.

    הפכו אותו לידידותי למובייל

    People are probably going to visit your site at different times using different devices and screen sizes. While content is important, consistency across devices provides a better user-experience for anyone who visits your site. It makes it easier for users to share and link contents on your website to social media platforms on mobile. On top of that, Google prioritizes responsive websites on search results.

    טיפ נוסף: שימוש ב-Page Builder Sandwich באתר שלכם יאפשר באופן אוטומטי תצוגה בנייד ויתאים אותה לגודל מסך של מובייל.

    סיכום

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

  • WordPress.com מול WordPress.org

    Wordpress-Com-VS-Wordpress-Orgאם אתם חדשים יחסית בבניית אתרים, רוב הסיכויים שאתם כנראה לא מכירים את הוויכוח הגדול שבין WordPress.com ל-WordPress.org. אולי אפילו לא ידעתם שאחד מהם קיים בנוסף לשני, ועל היתרונות והחסרונות השונים של כל אחד מהם. אז מהו, תגידו לי, הוויכוח הגדול הזה בין שימוש ב-WordPress.com לבין WordPress.org? האם השני הוא סתם חיקוי זול שמחכה שיתבעו אותו?

    ובכן, לא.

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

    “אבל איך אני יודע איזה מהם אני צריך?”

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

    WordPress.com: למה ומתי כדאי לי?

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

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

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

    WordPress.org: מתי הזמן לשקול זאת?

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

    “אבל רגע, למה שארצה את זה? האם כל הפואנטה של וורדפרס היא לא להקל על בניית אתרים?”

    …לא בדיוק. תחשבו על זה כך: The Daily Post יוצר אנלוגיה מצוינת בין WordPress.org ל-WordPress.com, באופן שגם הטירון שבטירונים (כמוני למשל) מבין את העיקרון מיד.

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

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

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

    עד עכשיו, יש לקוות שקיבלתם תמונה ברורה יותר של ההבדלים הבולטים בין WordPress.com ל-WordPress.org. אך על קצה המזלג:

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

    השליטה בתוכן מוגבלת;

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

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

    בניית אתרים מהנה!

  • למה וורדפרס?

    Why-Wordpressדבר אחד שחשוב לקחת בחשבון כשבונים את אתר האינטרנט הראשון שלכם – בין אם אתם עסק, פרילנסרים, או כל דבר וכל אחד, בעצם – הוא שלא כולם בקיאים בשפת הקוד ופיתוח תוכנה. ייתכן שאתם, למשל, שפים שרוצים לפרסם את המתכונים שלהם ברשת. ייתכן גם שאתם סטודנטים לאמנויות שזקוקים לתיק עבודות בעל מראה מקצועי, או עסק בתחילת דרכו שזקוק לאתר משלו. בין אם מדובר בזה או בזה או בכל מה שביניהם, העובדה נותרת בעינה: בעוד שחלקנו עשויים להכיר את יסודות הקוד, לא כולנו מפתחים במשרה מלאה, ולא כל מי שזקוק או רוצה אתר יודע כיצד לבנות אחד מאפס. כאן WordPress עשויה לעזור. עולה השאלה: "למה דווקא WordPress?"

    סיבה מס' 1

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

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

    בהשוואה לבניית אתר מאפס, שבדרך כלל תתחיל כך:

    screenshot-1 עם מערכת לניהול תוכן, אתם מתחילים עם משהו כזה:

    WordPress
    ממשק הניהול האחורי של WordPress. ניהול ויצירת אתרים הופכים לקלים יותר עם CMS.

    אולי תשאלו את עצמכם: "WordPress נראית נהדר, אבל מה אם אין בה את התכונות שאני רוצה לאתר שלי?", או "מה אם אני רוצה מפה, נגן מוזיקה, מנוע מטמון (caching) או מערכת אבטחה אמינה יותר?"

    …מבחינה טכנית, ל-WordPress כנראה יש את התכונה שאתם רוצים, והיא תגיע בצורה של תוסף (Plugin) ל-WordPress.

    סיבה מס' 2

    תוספים: הדובדבן שבקצפת של עוגת ה-WordPress

    אם אתם חוששים ש-WordPress אינה כוללת את התכונה המסוימת שאתם עשויים לרצות באתר שלכם, אל תדאגו: כנראה שיש לה אותה.

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

    נכון לעכשיו, ל-WordPress יש אלפי תוספים כאלה – וחלקם אף זמינים בחינם ו/או כוללים גרסאות חינמיות, כולל PBS.

    סיבה מס' 3

    קוד פתוח: קהילת WordPress

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

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

    סיבה מס' 4

    WordPress היא הדבר האמיתי.

    CNN, הבלוג הרשמי של מלחמת הכוכבים, מגזין Time ואפילו (תנשמו עמוק!) ביונסה – כולם מפעילים אתרים מבוססי WordPress, לצד רבים אחרים. השמות הגדולים האלה הם לא הדבר היחיד שמגבה את האמינות של WordPress – לפי Treehouse.com, כ-25% מכלל האתרים ברחבי הרשת מופעלים על ידי WordPress. בהתחשב בכמה מיליוני ואלפי אתרים קיימים… ובכן, 25% זה מספר די גדול.

    סיבה מס' 5

    אפשרויות התאמה אישית בשפע!

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

    סיבה מס' 6:

    זה בחינם.

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

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

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

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

    בניית אתרים מהנה!

  • 3 דברים שכדאי לשקול לפני שצוללים לבוני עמודים

    3-Things-to-Consider-Before-Diving-Into-Page-Buildersיש סיכוי מסוים שאתם כאן כי שמעתם ש-PBS הוא ככל הנראה אחד מקיצורי הדרך המהירים ביותר לבניית אתרים. בעוד שבוני עמודים, באופן כללי, נועדו להקל על הדברים, עדיין ישנם כמה דברים שכדאי לקחת בחשבון לפני שצוללים עמוק יותר לתחום הספציפי הזה של פיתוח וורדפרס.

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

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

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

    אולי תרצו לבדוק את השטח קודם, רק כדי להיות בטוחים

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

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

    עיצובים עושים הבדל עצום

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

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

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

    בניית אתרים מהנה!

  • כיצד ליצור כותרות Hero בסיסיות ב-3 שלבים פשוטים

    How-to-Create-Basic-Hero-Headers-2

    061716_PBS_Jihan_How to Create Basic Hero Headers_Done

    When your dream website finally becomes a reality, the first thing you want your audience to know is what your site’s all about. The trick to reel them in is to give them a good but quick summary of your site’s content – and the easiest way to do that is by creating a Hero Header for your page.

    מהם כותרות הירו (Hero Headers)?

    The purpose of the Hero Header is to visually communicate with your target audience in the fastest and most efficient way possible. You need to grab their attention quickly, in a way that it says: “Hey, this is my website, and here are the reasons it may be worth your time.”

    Typically, hero headers take up most of the space on the page, usually with large text and an equally large background image in order to give your readers a quick but firm-enough grasp as to what your website can offer them.

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

    שלב 1: הוספת עמודה והתאמת רוחב השורה

    061716_PBS_Jihan_How-to-Create-Basic-Hero-HeadersClick 1 Column below the Insert Content tab on the inspector (that thing on the left/sidebar). Make sure your caret (the blinking cursor on the text box) is inside the text box.

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-1-b_Revised-1Under the Row Properties tab, you may change the background color in order to use it as a guide for the next steps. Change Row Width from Normal to Full-Width: Retained Content Width using the toggle button shown above.

    What’s the difference between Normal, Full-Width and Full-Width: Retained Content Width?

    Row Width-Normal

    Normal – Background, text and other elements are contained within the bounds of your current theme’s row width

    Row Width-Full-Width

    Full-Width – Background, text and other elements fill the entire width of your browser window

    Row Width-Full-Width Retain

    Full Width: Retained Content Width – Only the background fills the entire width of your browser window. Text and other elements are contained within the bounds of your current theme’s row width

    In this layout, Full Width: Retained Content Width is used because the text that will be applied is centered; not full-width.

    שלב 2: התאמת שוליים (Margin) ליצירת שטח לבן (Whitespace)

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-2-revisedIncrease the top and bottom margin by hovering the cursor on the arrow pointing to the margin you want to adjust. When the cursor turns into a double-headed arrow, click and drag down to your desired margin height. Its important to put Whitespace (also called Negative Space) between elements in a composition to create flow and help draw focus to the content on the page.

    שלב 3: הוספת רקע עם שכבות של טקסט ואלמנטים

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-aTo add a background image with text and element overlays, simply click the Background Image icon under the Row Properties tab, upload your desired background image, and select to apply.

    061716_PBS_Jihan_How to Create Basic Hero HeadersTip #1: For Premium users, using the Background Image Tint option, helps to provide more contrast for text, buttons or other elements. You can select a tint color and adjust its value by clicking on the Background Color icon. Both icons can be found under Background on the Row Properties tab.

    061716_PBS_Jihan_How-to-Create-Basic-Hero-Headers_Step-3-cType in the message for your header. See Text Formatting tab to adjust the style. Choose typefaces that are easy to read and goes well with the background image. Remember to show contrast from the background image.

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

    061716_PBS_Jihan_How to Create Basic Hero Headers_Step-3-dYou can also add buttons by clicking on Button below the Insert Content tab.

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

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

    בניית אתרים מהנה!