ელემენტორის ვებსაიტის ჰედერის დიზაინის საფუძვლები

blog

ვებსაიტის ჰედერი არის თქვენი საიტის პირველი განყოფილება, რომელიც იპყრობს თვალს. როგორც ასეთი, ეს არის თქვენი შანსი, მოახდინო შესანიშნავი პირველი შთაბეჭდილება. ამ სტატიაში:

  • ისწავლით რა არის ვებსაიტის ჰედერი;
  • აღმოაჩენთ ჰედერის რამდენიმე აუცილებელი ელემენტი;
  • გაიცნობთ საუკეთესო პრაქტიკებს, რომლებიც უნდა გახსოვდეთ;
  • განვიხილავთ ჰედერის დიზაინის შესანიშნავ მაგალითებს;
  • შეისწავლითთ როგორ შექმნათ Elementor ვებსაიტის ჰედერი.

რა არის ვებსაიტის ჰედერი?

ვებსაიტის ჰედერი ხშირად განსაზღვრავს, დარჩება თუ არა სტუმარი თქვენს საიტზე თუ დაუყოვნებლივ დატოვებს. ეს არის მოწვევა ვებსაიტის დასათვალიერებლად და შესაძლებლობა გაეცნოთ კლიენტებს საიტის ნავიგაციას ერთი შეხედვით. ამიტომ ჰედერი უნდა შეიცავდეს შესამჩნევ ელემენტებს, როგორიცაა ბრენდის ლოგო, ჰამბურგერის მენიუ, CTA ღილაკები და საიტის მთავარი გვერდების ბმულები.

ხშირად, მომხმარებლებმა შეიძლება არ შეაფასონ საიტის ეს ელემენტი, რადგან ისინი მიიჩნევენ, რომ ჰედერი სხვა არაფერია, თუ არა გრძელი, ჰორიზონტალური სტრიქონი საიტის ზედა ნაწილში. მაგრამ ახლახან, თანამედროვე ვებსაიტების ბილდერებმა, როგორიცაა WordPress, ეს განმარტება ზედმეტი გახადეს

WordPress ვებსაიტის ჰედერის პლაგინები შეიცავს უამრავ დიზაინის შაბლონს, რომლებიც განსხვავდება ზომით, პოზიციით და ელემენტების არსებობით.

დღეს, ვებსაიტების ჰედერები არის მთავარი გვერდის მენიუს ზემოთ. ისინი უფრო მეტია, ვიდრე უბრალოდ ტექსტის/ღილაკების ნაკრები, მაგრამ არის ველი კრეატიული გადაწყვეტილებებისთვის, რაც მათ აქცევს ფოკუსურ არეალს ნებისმიერი საიტისთვის, რომელსაც სურს გამოიყენოს იგი რეკლამისთვის ან კონვერტაციის კოეფიციენტის გაზრდისთვის.

ვებსაიტის ჰედერის ძირითადი პრინციპები

ვებ დიზაინში, ვებსაიტის ჰედერი არის ვებგვერდის ფართობი შინაარსის ზემოთ. ზოგჯერ, ჰედერები შეიცავს შემდეგ ელემენტებს:

  • კომპანიის ლოგო და საკონტაქტო ინფორმაცია;
  • ლოზუნგი;
  • ნავიგაციის ზოლი;
  • პროდუქციის რეკლამირების განყოფილება;
  • CTA;
  • გამოძახების ღილაკი;
  • განახლებების ან საინფორმაციო ბიულეტენების გამოწერის ფორმა (დაბრუნების ღილაკის ჩათვლით);
  • საძიებო ზოლი;
  • ენის ზოლი და ა.შ.

ეს არის sticky ჰედერის მაგალითი, რომელიც შეიქმნა JetPlugins-ის გამოყენებით.

college website header screenshot
წყარო: Khawarizmi Intl College

ან უფრო ლაკონური ვარიანტი:

fiep digital header screenshot
წყარო: Fiep.Digital

არ არსებობს შეზღუდვები, მაგრამ თქვენ უნდა შეამოწმოთ რამდენიმე ელემენტი WordPress-ით შემუშავებული წარმატებული ვებსაიტის შესაქმნელად. ვებსაიტის ჰედერის დიზაინისთვის, თქვენ უნდა:

  • უკეთესი ჰედერის ან ყველაზე კრეატიული ჰედერის შექმნის მცდელობისას, გაითვალისწინეთ, რომ საიტის ყველა ელემენტმა უნდა შეუწყოს ხელი საიტის ინდექსირებას;
  • მოერიდეთ სურათებს, როგორიცაა გრაფიკული ლოგო, რადგან ეს ართულებს ძიების ინდექსირებას;
  • მოერიდეთ მრავალი გრაფიკის ან ანიმაციის გამოყენებას, რადგან ისინი აღიზიანებენ მომხმარებლებს დათვალიერების სიჩქარის შენელებით;
  • გამოიყენეთ ტექნიკური (არა გრაფიკული) მენიუები ჰედერში, რადგან მათ აქვთ უკეთესი წაკითხვადობა და ადვილად შეიძლება შეიცვალოს;
  • დარწმუნდით, რომ ჰედერი ხელს არ უნდა შეუშალოს საიტის წაკითხვას, მაგრამ იყოს მოსახერხებელი და ინტუიციური.

რა არის ვებსაიტის ჰედერის აუცილებელი ელემენტები?

როგორც წესი, არ არსებობს შეზღუდვა, როდესაც საქმე ეხება დიზაინს, მაგრამ საჭიროა ფოკუსირება დეტალებზე. ვებსაიტების ჰედერების უფრო ფართოდ გავრცელებული ელემენტები წარმოდგენილია ზემოთ. კერძოდ, ვებსაიტის ჰედერი უნდა იყოს კითხვადი , მაგრამ არა ძალიან კრეატიული.

ეს ნიშნავს, რომ მთავარი ელემენტი შეიძლება იყოს ლოგო, როგორც ეს გააკეთა ამ საიტმა:

website header with logo
წყარო: Aldecor

სხვა ელემენტები შეიძლება დამალული იყოს მენიუში, როგორც ეს გააკეთა ამ საიტმა:

clean website header design
Source: Hsolution

სხვა საიტები ფოკუსირებულია საძიებო ზოლზე:

header with search bar
წყარო: 10 000+ Free Online Courses

თქვენ შეგიძლიათ გაზარდოთ თქვენი ვებსაიტის სათაურის სიმაღლე, რათა მოერგოს საჭირო ელემენტებს:

header example
წყარო: Carlson Engineering

ზოგი იყენებს კონტრასტულ ფონტებს მრავალი ელემენტის ხაზგასასმელად:

highlight website header elements
წყარო: Sina Svetulka

რომ შევაჯამოთ:

  • ჰედერები განსხვავდება ზომით, დიზაინით და გარჩევადობით, მაგრამ ექვემდებარება იმ ელემენტების ტიპებს, რომელთა გამოყენებაც გსურთ;
  • ჰედერის ზომა უნდა იყოს საკმარისი იმისათვის, რომ შეიცავდეს მინიმუმ საკონტაქტო ინფორმაციას, ლოგოს და კომპანიის სახელს. თქვენ ასევე შეგიძლიათ ჩართოთ ჰორიზონტალური მენიუ და საძიებო ზოლი;
  • ჰედერის დიზაინი უნდა იყოს ლაკონური, კარგად სტრუქტურირებული და იკითხებოდეს (თქვენ უნდა გამოიყენოთ შესაბამისი ფონტები);
  • ვებსაიტების ძალიან ნათელი და წებოვანი ჰედერები შესაძლოა სრულიად შეუსაბამო იყოს ზოგიერთი ვებსაიტისთვის (მედიცინა, იურიდიული მომსახურება და ა.შ.);
  • ჰედერის დიზაინი შიდა გვერდზე არის მთავარი გვერდის ჰედერის მოკლე ვერსია;
  • ტრადიციულად, ჰედერის სიგანე არის 1240 პიქსელი, მაგრამ სიმაღლე მერყეობს 200 პიქსელიდან 350 პიქსელამდე, რაც დამოკიდებულია ინფორმაციაზე, რომელიც უნდა იყოს წარმოდგენილი;
  • მიუხედავად ამისა, სათაურის სიგანე 960 პიქსელი მუშაობს უმეტეს ვებსაიტებზე, ხოლო მინიმალური გარჩევადობა არის 1024 პიქსელი.

მიუხედავად იმისა, რომ ვებსაიტის სათაური ემსახურება მსგავს მიზანს საიტიდან საიტზე, მთავარი საიდუმლო არის მორგებული სათაური ინდივიდუალური ზომით.

ვებსაიტის სათაურის საუკეთესო მაგალითები

Awwwards.com განსაკუთრებული სათაურის დიზაინები:

awwwards example

მოდით გადავხედოთ საუკეთესო ვებსაიტების პრაქტიკას 2021-ს, ზოგიერთი მახასიათებლის განზოგადებისთვის.

ერთი შეხედვით მინიმალიზმი ჭარბობს. შემდეგი საიტები ამჯობინეს ამ სტილს:

minimalistic website header design
წყარო: IQONIC DESIGN – Awwwards Nominee
awwards winner website header
წყარო: Maple from Canada | Kids – Awwwards Nominee
header example
წყარო: Dashcom UI Kit – Awwwards Nominee

ეს არის მონეტის ერთ-ერთი მხარე, რადგან არის საკმაოდ ინფორმაციული საიტის ჰედერი სინგაპურიდან, ანდრეა კუოს მიერ:

informative website header
წყარო: Stacked – Awwwards Nominee

ასევე ყურადღებას იმსახურებს ამ საიტის ვებსაიტის სათაური პორტუგალიიდან:

interactive website header
წყარო: Parques de Sintra – Awwwards Nominee

მომხმარებლები დაინახავენ, რომ ზოგიერთი საიტი წარმოაჩენს რაღაც სახალისო და ხალისიანს როგორც ჰედერში, ასევე შინაარსში და ხალხი უპირატესობას ანიჭებს მინიმალისტური სტილის საიტებს ვიდეოზე ან დიდ ჰედერებზე. თქვენ უბრალოდ უნდა აირჩიოთ ელემენტი, რომელიც ყურადღებას იპყრობს.

როგორ შევქმნათ ელემენტორით ვებსაიტის ჰედერი?

ამჟამად, WordPress ფლობს მსოფლიო ვებსაიტების 43%-ს. WordPress-თვის მრავალი გვერდის ბილდერს შორის, მომხმარებლები უპირატესობას ანიჭებენ Elementor-ს ვიდრე გუტენბერგს ან Divi შემქმნელს. Elementor-ის თანამედროვე ბილდერი აერთიანებს სიმარტივეს და ხილვადობას შეუზღუდავ და უნიკალურ შესაძლებლობებთან, როგორიცაა:

  • 100+ უფასო შაბლონი, ვიჯეტი და წებოვანი ელემენტები;
  • ავტომატური შენახვა და ვერსიების ისტორია, hotkeys (მაგალითად, კოპირება/ჩასმა, გაუქმება და ა.შ.);
  • მომხმარებლებს შეუძლიათ გამოიყენონ ჩაშენებული ბიბლიოთეკის ფონტები, ასევე Google, Adobe და მორგებული ფონტები;
  • რთული ანიმაცია (მოძრაობის ეფექტები);
  • ბოლოდან ბოლომდე ვიჯეტები, რომელთა მართვა შესაძლებელია ერთდროულად;
  • დინამიური შინაარსის ავტომატური ჩასმა შაბლონის ნებისმიერ ნაწილში;
  • HTML თავისუფალი და ცოცხალი საიტის განვითარება;
  • შესაძლებელია გუნდური მუშაობა;
  • CSS სტილის და API-ების კონფიგურაცია;
  • უფასო გაკვეთილების და სახელმძღვანელოების სიმრავლე, მათ შორის ვიდეოები;
  • მარტივი წვდომა პლაგინებზე და აპებზე (მაგ. Crocoblock დანამატები, Popup Builder, Visual Form Builder, Theme Builder).

Elementor Pro გაძლევთ საშუალებას შექმნათ თქვენთვის სასურველი ნებისმიერი ჰედერი.

Elementor Pro-ით ვებსაიტის ჰედერის შესაქმნელად უბრალოდ გადადით: Dashboard > Templates > ThemeBuilder > Add New Template > Header > Create Header.

გამოცდილი მომხმარებელიც კი გრძნობს თავს ბავშვად ტკბილეულის მაღაზიაში და აოცებს შეუზღუდავი ოფციების ბარები. ზოგადად, სათაურის ვიჯეტების შესაძლო ჯგუფებია:

  • ავტორიზაციის ბმულები;
  • Hamburger Panel;
  • ლოგო;
  • რეგისტრაცია;
  • Breadcrumbs;
  • შესვლა;
  • ნავიგაციის მენიუ;
  • საძიებო ზოლი;
  • გაფართოებები, როგორიცაა Sticky Order და Column Order.. 

თქვენ შეგიძლიათ იპოვოთ მეტი ინფორმაცია WordPress header templates creation სახელმძღვანელოში. თუ თქვენ ეძებთ სანდო ალტერნატივას კრეატიული ჰედერის დიზაინისთვის, შეამოწმეთ Crocoblock-ის JetPlugins ელემენტორისთვის. მაგალითად, JetThemeCore საშუალებას მოგცემთ შექმნათ ვებსაიტის ჰედერის დიზაინის შაბლონები, ხოლო JetBlocks მოდული შეიცავს აუცილებელ ვიჯეტებს მათი შინაარსით შესავსებად.

ყველას შეუძლია შექმნას ვებსაიტის ჰედერი უფასო Elementorდა JetBlocks ან JetMenu გამოყენებით. სერიოზულ პროექტებს სჭირდებათ მორგებული ელემენტები, როგორიცაა კარგი სათაური ან მენიუ, და JetThemeCore JetBlocks-ით აძლევს ვებ დიზაინერებს უფლებას შექმნან საიტის მორგებული ელემენტი ნულიდან.

ეს პლაგინები აკონფიგურირებენ სათაურებსა და ქვედა კოლონტიტულებს მათ გასამდიდრებლად, რაც მათ ფასს19,99$ ღირებულს ხდის. მოდით განვიხილოთ JetBlocks მოდულის ფუნქციონირება უფრო დეტალურად.

რატომ არის JetBlocks შესაფერისი ჰედერის/ფუტერის შესაქმნელად?

დროდადრო, მომხმარებლებს სურთ გააფართოვონ Elementor-ის ფუნქციონირება. ამ შემთხვევაში, JetBlocks მოდული ერთ-ერთი საუკეთესო გამოსავალია. ის მიზნად ისახავს ჰედერებს/ფუტერებს და ხდის მათ უფრო მეტს, ვიდრე მოსაწყენ, ჰორიზონტალურ ხაზს ისეთი ელემენტების გზით, როგორიცაა საძიებო ზოლი, ლოგო, კალათა, ჰამბურგერის პანელი და ა.შ.

გარდა ამისა, JetBlocks-ს აქვს შემდეგი ფუნქციები, რომლებიც ხელს უწყობს ჰედერის დიზაინს და გამოყენებას:

  • სათაურის დაფიქსირება, რომ დარჩეს გვერდის ზედა ნაწილში სქროლვისას;
  • გვერდზე ელემენტების განლაგების მიზნით Z- ინდექსის ყურადღების მიქცევა;
  • განყოფილების მინდვრების, paddings და გამჭვირვალობის სხვადასხვა დონის დაზუსტება;
  • განსხვავებული ვარიანტები ფონის და მისი ჩრდილის;
  • ანიმაციების დამატება და მათი გადასვლის ხანგრძლივობის შერჩევა.

ამრიგად, JetBlocks მოდული Elementor-ისთვის საშუალებას აძლევს როგორც ახალბედებს, ასევე გამოცდილ მომხმარებლებს შექმნან ჰედერის შაბლონები უფრო სწრაფად და ეფექტურად ინსტრუმენტების გამოყენებით. დამატებითი დეტალები იმის შესახებ, თუ როგორ გამოიყენოთ JetBlocks არის აქ:

ელემენტორით ვებსაიტის საუკეთესო ჰედერები, შექმნილი Crocoblock-ით

აქ არის საუკეთესო ჰედერების მაგალითები. ვებსაიტების ჰედერის დიზაინში გარკვეული შეზღუდვების მიუხედავად, მათმა გამოცდილებამ ამ სფეროში შესაძლებელი გახადა გარკვეული მახასიათებლების დაზუსტება. ესენია:

  • სერვისების საიტების სათაურები შეიცავს მარჯვენა მხარეს წებოვან ღილაკებს;
right-side sticky header buttons
წყარო: Finizon
  • დიზაინის სტუდიოები ან კრეატიული სააგენტოები, რომლებიც ამშვენებენ თავიანთი საიტის ჰედერებს თავიანთი ლოგოებით;
decorate website header design
წყარო: SWC LASTARRIA
  • სლოგანები (ტექსტები) მისასალმებელია;
website header with text
წყარო: Williams Designers & Builders
  • საიტები შეიცავს წებოვან ელემენტებს, რომელიც ხშირად ეხება ლოგოს;
sticky website header
წყარო: PP Lion
  • sites present pictures in the headers;
website menu with pictures
წყარო: JelleTas
  • ყველა საიტისთვის, ძიების ღილაკი ან ველი გამოყოფილია და განსხვავებული ფორმის/ფერისაა;
search bar navigation header
წყარო: Eco y Bionegocios
  • სათაურები შეიცავს კონტაქტების, სოციალური ქსელების, კალათების ინტუიციურ იკონებს და ა.შ.;
website header with social media buttons
წყარო: Alexandros Mykonos
  • ჰედერები მეგა მენიუ და/ან ჩასაშლელი მენიუებით;
website header with dropdown menu
წყარო: Forniture Chimiche Integrate
  • ჰედერს შეიძლება ჰქონდეს მოკლე შეტყობინებები;
website header with short message
წყარო: Strongmune
  • ჰამბურგერის მენიუ განსხვავებულია და შეიცავს სხვადასხვა რაოდენობის ხაზებს;
menu icons examples
  • საერთოდ უარი თქვით ჰედერზე;
website without header
წყარო: Blue Beat Digital
  • დააყენეთ ჰედერი სადმე, მაგალითად, არა ზევით, არამედ გვერდით. ეს კარგი იდეაა, არა?

დასკვნა

ჰედერები არის ვებსაიტის დიზაინის გადამწყვეტი ასპექტი, რადგან ისინი განსაზღვრავს, ვიზიტორი გააგრძელებს თქვენს გვერდზე ყოფნას თუ არა. აქედან გამომდინარე, მნიშვნელოვანია შექმნათ საინტერესო და მოსახერხებელი ჰედერი, Elementor Pro კი არის ერთ-ერთი საუკეთესო ინსტრუმენტი სამუშაოდ.

Crocoblock-ის JetBlocks პლაგინი Elementor-ისთვის აფართოებს ვებ დიზაინის კრეატიულობას ყველასთვის, კოდირების უნარების მიუხედავად. მცირე, მაგრამ ხშირი განახლებები საშუალებას მისცემს თქვენს ვებსაიტს დინამიურად განვითარდეს, მრავალი სასარგებლო და ინტერაქტიული ფუნქციით. Elementor Pro-თი ჰედერების შექმნა, განსაკუთრებით Crocoblock-ის დანამატების გამოყენებით, დაგეხმარებათ შექმნათ შესანიშნავი პირველი შთაბეჭდილება ვებსაიტის მომხმარებელზე და გაზარდოთ თქვენი გვერდის ფუნქციონირება.

header example
წყარო: bambarbia

Free consultation ?

Have an idea or question ? We can assist you for free. Just leave your contact details below.