Le 4 regole per progettare una sezione Hero che funziona

[tatsu_section bg_color= "" bg_image= "" bg_repeat= "no-repeat" bg_attachment= '{"d":"scroll"}' bg_position= '{"d":"top left"}' bg_size= '{"d":"cover"}' bg_animation= "none" padding= '{"d":"0px 0px 30px 0px"}' margin= '{"d":"0px 0px 0px 0px"}' bg_video_mp4_src= "" bg_video_ogg_src= "" bg_video_webm_src= "" overlay_color= "" overlay_blend_mode= "normal" section_height_type= "auto" custom_height= '{"d":""}' vertical_align= "center" top_divider= "none" top_divider_zindex= "9999" bottom_divider_zindex= "9999" bottom_divider= "none" top_divider_height= '{"d":"100"}' top_divider_position= "above" bottom_divider_height= '{"d":"100"}' bottom_divider_position= "below" top_divider_color= "#ffffff" bottom_divider_color= "#ffffff" invert_top_divider= "0" invert_bottom_divider= "0" flip_top_divider= "0" flip_bottom_divider= "0" section_id= "" section_class= "" section_title= "" offset_value= "0px" full_screen_header_scheme= "background--dark" overflow= "" z_index= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "r1ZR1uXuNY"][tatsu_row full_width= "0" bg_color= "" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" no_margin_bottom= "0" equal_height_columns= "0" gutter= "medium" column_spacing= "px" fullscreen_cols= "0" swap_cols= "0" padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":"0px 0px"}' row_id= "" row_class= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" border_radius= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" layout= "1/1" key= "HklCyOmu4K"][tatsu_column bg_color= "" bg_image= "" bg_repeat= "no-repeat" bg_attachment= "scroll" bg_position= '{"d":"top left"}' bg_size= '{"d":"cover"}' padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "0" box_shadow_custom= "0px 0px 0px 0px rgba(0,0,0,0)" bg_video_mp4_src= "" bg_video_ogg_src= "" bg_video_webm_src= "" overlay_color= "" overlay_blend_mode= "normal" animate_overlay= "none" link_overlay= "" vertical_align= "none" sticky= "0" offset= '{"d":"0px 0px"}' column_parallax= "0" column_width= '{"d":100,"l":100,"t":100,"m":100}' column_mobile_spacing= "0" image_hover_effect= "none" column_hover_effect= "none" hover_box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" overflow= "" col_id= "" column_class= "" top_divider= "none" top_divider_height= '{"d":"100","m":"0"}' top_divider_color= "#ffffff" flip_top_divider= "0" top_divider_zindex= "9999" bottom_divider= "none" bottom_divider_height= '{"d":"100","m":"0"}' bottom_divider_color= "#ffffff" flip_bottom_divider= "0" bottom_divider_zindex= "9999" left_divider= "none" left_divider_width= '{"d":"50","m":"0"}' left_divider_color= "#ffffff" invert_left_divider= "0" left_divider_zindex= "9999" right_divider= "none" right_divider_width= '{"d":"50","m":"0"}' right_divider_color= "#ffffff" invert_right_divider= "0" right_divider_zindex= "9999" z_index= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" layout= "1/1" key= "rJC1_XONF"][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "r1vbdXdVK"]

Indice:

1. Cos'è una sezione hero?
2. Perché dovresti usare un'immagine hero sul tuo sito web?
3. Le 4 regole per progettare una sezione Hero che funziona
4. Esempi

[/tatsu_text][/tatsu_column][/tatsu_row][/tatsu_section][tatsu_section bg_color= "" bg_image= "" bg_repeat= "no-repeat" bg_attachment= '{"d":"scroll"}' bg_position= '{"d":"top left"}' bg_size= '{"d":"cover"}' bg_animation= "none" padding= '{"d":"0px 0px 30px 0px"}' margin= '{"d":"0px 0px 0px 0px"}' bg_video_mp4_src= "" bg_video_ogg_src= "" bg_video_webm_src= "" overlay_color= "" overlay_blend_mode= "normal" section_height_type= "auto" custom_height= '{"d":""}' vertical_align= "center" top_divider= "none" top_divider_zindex= "9999" bottom_divider_zindex= "9999" bottom_divider= "none" top_divider_height= '{"d":"100"}' top_divider_position= "above" bottom_divider_height= '{"d":"100"}' bottom_divider_position= "below" top_divider_color= "#ffffff" bottom_divider_color= "#ffffff" invert_top_divider= "0" invert_bottom_divider= "0" flip_top_divider= "0" flip_bottom_divider= "0" section_id= "" section_class= "" section_title= "" offset_value= "0px" full_screen_header_scheme= "background--dark" overflow= "" z_index= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "Bk-FtdX_4K"][tatsu_row full_width= "0" bg_color= "" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" no_margin_bottom= "0" equal_height_columns= "0" gutter= "medium" column_spacing= "px" fullscreen_cols= "0" swap_cols= "0" padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":"0px 0px"}' row_id= "" row_class= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" border_radius= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" layout= "1/1" key= "BygtFu7dVK"][tatsu_column bg_color= "" bg_image= "" bg_repeat= "no-repeat" bg_attachment= "scroll" bg_position= '{"d":"top left"}' bg_size= '{"d":"cover"}' padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "0" box_shadow_custom= "0px 0px 0px 0px rgba(0,0,0,0)" bg_video_mp4_src= "" bg_video_ogg_src= "" bg_video_webm_src= "" overlay_color= "" overlay_blend_mode= "normal" animate_overlay= "none" link_overlay= "" vertical_align= "none" sticky= "0" offset= '{"d":"0px 0px"}' column_parallax= "0" column_width= '{"d":100,"l":100,"t":100,"m":100}' column_mobile_spacing= "0" image_hover_effect= "none" column_hover_effect= "none" hover_box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" overflow= "" col_id= "" column_class= "" top_divider= "none" top_divider_height= '{"d":"100","m":"0"}' top_divider_color= "#ffffff" flip_top_divider= "0" top_divider_zindex= "9999" bottom_divider= "none" bottom_divider_height= '{"d":"100","m":"0"}' bottom_divider_color= "#ffffff" flip_bottom_divider= "0" bottom_divider_zindex= "9999" left_divider= "none" left_divider_width= '{"d":"50","m":"0"}' left_divider_color= "#ffffff" invert_left_divider= "0" left_divider_zindex= "9999" right_divider= "none" right_divider_width= '{"d":"50","m":"0"}' right_divider_color= "#ffffff" invert_right_divider= "0" right_divider_zindex= "9999" z_index= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" layout= "1/1" key= "ByFFuQ_Nt"][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "B1s2dXu4t"]

1. Cos'è una sezione hero?

[/tatsu_text][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "ByolKXuEt"]

Una Sezione Hero è una grande area presente nella parte superiore di una pagina, di fronte e al centro, fornisce agli utenti la prima impressione del tuo sito, quindi è importante che segua le migliori pratiche di design. È tipicamente un'immagine prominente, uno slider, un testo o un elemento simile che ha un posto d'onore in cima al layout della tua homepage e possibilmente delle pagine successive.

C'è sempre uno scopo e un focus per queste sezioni, non servono solo per impostare un look e un tono generale. Il modo in cui un sito web è progettato influenza direttamente il modo in cui l'utente percepisce il brand. L'uso di un'immagine principale sul tuo sito può aiutare a stabilire la fiducia tra i nuovi visitatori e convertirli in clienti, aiutandoli a comprare il concetto del tuo sito.

Questa parte della pagina dovrebbe idealmente includere informazioni su quattro cose:

[/tatsu_text][tatsu_lists style= "icon" circled= "0" icon_bg= "" icon_color= '{"id":"palette:0","color":"rgba(125,65,245,1)"}' timeline= "0" timeline_color= "" list_item_margin= '{"d":"12"}' vertical_alignment= "center" custom_border= "0" border= '{"d":"0"}' border_color= "" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' outer_border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "SkEJYFQdNK"][tatsu_list icon= "icon-icon_check" circled= "0" icon_bg= "" icon_color= "" border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "SkkFFmdEK"]

Cosa avete da offrire

[/tatsu_list][tatsu_list icon= "icon-icon_check" circled= "0" icon_bg= "" icon_color= "" border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "B1l1FKmu4K"]

Perché le persone dovrebbero fidarsi di te

I vantaggi di lavorare con te

Quale azione dovrebbero intraprendere dopo

[/tatsu_list][/tatsu_lists][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "Hyk-5Q_NF"]

Insieme a questi aspetti chiave, bisogna trovare un modo per far risaltare il vostro brand rispetto alla concorrenza. Ci sono varie idee di design della sezione hero che potresti usare a seconda dell'aspetto del tuo sito web e dello stile che preferisci.

[/tatsu_text][/tatsu_column][/tatsu_row][/tatsu_section][tatsu_section bg_color= "" bg_image= "" bg_repeat= "no-repeat" bg_attachment= '{"d":"scroll"}' bg_position= '{"d":"top left"}' bg_size= '{"d":"cover"}' bg_animation= "none" padding= '{"d":"0px 0px 30px 0px"}' margin= '{"d":"0px 0px 0px 0px"}' bg_video_mp4_src= "" bg_video_ogg_src= "" bg_video_webm_src= "" overlay_color= "" overlay_blend_mode= "normal" section_height_type= "auto" custom_height= '{"d":""}' vertical_align= "center" top_divider= "none" top_divider_zindex= "9999" bottom_divider_zindex= "9999" bottom_divider= "none" top_divider_height= '{"d":"100"}' top_divider_position= "above" bottom_divider_height= '{"d":"100"}' bottom_divider_position= "below" top_divider_color= "#ffffff" bottom_divider_color= "#ffffff" invert_top_divider= "0" invert_bottom_divider= "0" flip_top_divider= "0" flip_bottom_divider= "0" section_id= "" section_class= "" section_title= "" offset_value= "0px" full_screen_header_scheme= "background--dark" overflow= "" z_index= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "Hy-IN5X_4F"][tatsu_row full_width= "0" bg_color= "" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" no_margin_bottom= "0" equal_height_columns= "0" gutter= "medium" column_spacing= "px" fullscreen_cols= "0" swap_cols= "0" padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":"0px 0px"}' row_id= "" row_class= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" border_radius= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" layout= "1/1" key= "Hyx8Nq7_NK"][tatsu_column bg_color= "" bg_image= "" bg_repeat= "no-repeat" bg_attachment= "scroll" bg_position= '{"d":"top left"}' bg_size= '{"d":"cover"}' padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "0" box_shadow_custom= "0px 0px 0px 0px rgba(0,0,0,0)" bg_video_mp4_src= "" bg_video_ogg_src= "" bg_video_webm_src= "" overlay_color= "" overlay_blend_mode= "normal" animate_overlay= "none" link_overlay= "" vertical_align= "none" sticky= "0" offset= '{"d":"0px 0px"}' column_parallax= "0" column_width= '{"d":100,"l":100,"t":100,"m":100}' column_mobile_spacing= "0" image_hover_effect= "none" column_hover_effect= "none" hover_box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" overflow= "" col_id= "" column_class= "" top_divider= "none" top_divider_height= '{"d":"100","m":"0"}' top_divider_color= "#ffffff" flip_top_divider= "0" top_divider_zindex= "9999" bottom_divider= "none" bottom_divider_height= '{"d":"100","m":"0"}' bottom_divider_color= "#ffffff" flip_bottom_divider= "0" bottom_divider_zindex= "9999" left_divider= "none" left_divider_width= '{"d":"50","m":"0"}' left_divider_color= "#ffffff" invert_left_divider= "0" left_divider_zindex= "9999" right_divider= "none" right_divider_width= '{"d":"50","m":"0"}' right_divider_color= "#ffffff" invert_right_divider= "0" right_divider_zindex= "9999" z_index= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" layout= "1/1" key= "HJL45Qu4F"][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "Hkq_57uVF"]

2. Perché dovresti usare un'immagine hero sul tuo sito web?

[/tatsu_text][tatsu_image image= "https://www.irbox.it/wp-content/uploads/2021/10/62.1-Le-4-regole-per-progettare-una-sezione-Hero-che-funziona.jpg" image_varying_size_src= "https://www.irbox.it/wp-content/uploads/2021/10/62.1-Le-4-regole-per-progettare-una-sezione-Hero-che-funziona-1024x626.jpg" alignment= "center" border_width= "0" border_color= "" id= "5375" size= "large" adaptive_image= "1" max_width= '{"d":"100%"}' rebel= "0" width= '{"d":"100%"}' shadow= "none" custom_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" drop_shadow= "drop-shadow(0px 0px 0px rgba(0,0,0,0))" border_radius= "0" lazy_load= "1" placeholder_bg= "" offset= '{"d":"0px 0px"}' lightbox= "0" link= "" new_tab= "0" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":"0px 0 0 0"}' margin= '{"d":"0px 0 0 0"}' key= "HyHoHV_EF"][/tatsu_image][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "rk7N8EOEF"]

Organic Themes

Gli utenti impiegano solo 50 millisecondi per formarsi un'opinione su un sito web. Ecco perché devi assicurarti che il tuo sito sia facile da leggere, chiaro e piacevole. Usare un'immagine principale è un buon modo per assicurarsi che gli utenti possano identificarsi e relazionarsi con il tuo sito.

Le immagini grandi e sovradimensionate catturano l'attenzione dell'utente non appena arrivano su una pagina. Aiutano anche gli utenti a identificare il punto di vendita unico del brand e a formarsi un'opinione sul brand non appena la pagina viene caricata. Molti web designer creano immagini hero usando foto di veri volti umani. Questo aiuta i designer a personificare gli utenti, oltre a permettere agli utenti di relazionarsi con il brand,

E nel tentativo di creare esperienze più personalizzate per gli utenti web, alcuni designer optano per immagini hero animate (utilizzando video, cursori o caroselli). Questo aiuta ad attirare gli utenti non appena arrivano sulla homepage del sito e rende l'esperienza più vivace.

[/tatsu_text][/tatsu_column][/tatsu_row][/tatsu_section][tatsu_section bg_color= "" bg_image= "" bg_repeat= "no-repeat" bg_attachment= '{"d":"scroll"}' bg_position= '{"d":"top left"}' bg_size= '{"d":"cover"}' bg_animation= "none" padding= '{"d":"0px 0px 30px 0px"}' margin= '{"d":"0px 0px 0px 0px"}' bg_video_mp4_src= "" bg_video_ogg_src= "" bg_video_webm_src= "" overlay_color= "" overlay_blend_mode= "normal" section_height_type= "auto" custom_height= '{"d":""}' vertical_align= "center" top_divider= "none" top_divider_zindex= "9999" bottom_divider_zindex= "9999" bottom_divider= "none" top_divider_height= '{"d":"100"}' top_divider_position= "above" bottom_divider_height= '{"d":"100"}' bottom_divider_position= "below" top_divider_color= "#ffffff" bottom_divider_color= "#ffffff" invert_top_divider= "0" invert_bottom_divider= "0" flip_top_divider= "0" flip_bottom_divider= "0" section_id= "" section_class= "" section_title= "" offset_value= "0px" full_screen_header_scheme= "background--dark" overflow= "" z_index= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "SJWO3L4uNF"][tatsu_row full_width= "0" bg_color= "" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" no_margin_bottom= "0" equal_height_columns= "0" gutter= "medium" column_spacing= "px" fullscreen_cols= "0" swap_cols= "0" padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":"0px 0px"}' row_id= "" row_class= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" border_radius= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" layout= "1/1" key= "HylO28VONY"][tatsu_column bg_color= "" bg_image= "" bg_repeat= "no-repeat" bg_attachment= "scroll" bg_position= '{"d":"top left"}' bg_size= '{"d":"cover"}' padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "0" box_shadow_custom= "0px 0px 0px 0px rgba(0,0,0,0)" bg_video_mp4_src= "" bg_video_ogg_src= "" bg_video_webm_src= "" overlay_color= "" overlay_blend_mode= "normal" animate_overlay= "none" link_overlay= "" vertical_align= "none" sticky= "0" offset= '{"d":"0px 0px"}' column_parallax= "0" column_width= '{"d":100,"l":100,"t":100,"m":100}' column_mobile_spacing= "0" image_hover_effect= "none" column_hover_effect= "none" hover_box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" overflow= "" col_id= "" column_class= "" top_divider= "none" top_divider_height= '{"d":"100","m":"0"}' top_divider_color= "#ffffff" flip_top_divider= "0" top_divider_zindex= "9999" bottom_divider= "none" bottom_divider_height= '{"d":"100","m":"0"}' bottom_divider_color= "#ffffff" flip_bottom_divider= "0" bottom_divider_zindex= "9999" left_divider= "none" left_divider_width= '{"d":"50","m":"0"}' left_divider_color= "#ffffff" invert_left_divider= "0" left_divider_zindex= "9999" right_divider= "none" right_divider_width= '{"d":"50","m":"0"}' right_divider_color= "#ffffff" invert_right_divider= "0" right_divider_zindex= "9999" z_index= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" layout= "1/1" key= "rJ_3LNONt"][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "HkApLVOVF"]

3. Le 4 regole per progettare una sezione Hero che funziona

[/tatsu_text][tatsu_code id= "" class= "" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "B1sDLBiVF"][/tatsu_code][tatsu_animated_heading text= "1. Usa un'immagine o un video accattivante" tag_to_use= "h4" anime_type= "anime_split_word" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "6" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HJ1Du4ONY"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "HkXYOV_EK"]

L’ immagine hero su una pagina di destinazione potrebbe essere qualsiasi cosa da un design grafico a una fotografia di alta qualità o un video coinvolgente. Questi sono probabilmente l'aspetto più importante della sezione hero perché i consumatori sono generalmente più attratti da design colorati, grafica accattivante e video che condividono informazioni interessanti rispetto alle semplici righe di testo.

Con una manciata di modi per integrare la vostra immagine hero nel design della sezione hero, il tipo di solito determina il suo utilizzo. Per esempio, una striscia colorata può essere aggiunta insieme a qualsiasi cosa, da un pezzo unico di clipart a una grafica professionale. Si può poi integrare il testo per includere le informazioni chiave di ciò che fai, perché dovrebbero sceglierti, i vantaggi che offri e altri dettagli.

D'altra parte, potresti anche incorporare un eccellente video che catturerà la loro attenzione e fornirà loro tutte le stesse informazioni. Il video è già uno dei modi migliori per aumentare il ROI dei tuoi sforzi di marketing e usarne uno nella sezione hero della tua landing page porterà spesso a tassi di conversione più alti.

[/tatsu_text][tatsu_animated_heading text= "2. Crea un titolo potente" tag_to_use= "h4" anime_type= "anime_split_letter" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "6" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "By73OEu4F"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "rkGCuVOVY"]

Il titolo della tua sezione hero gioca un ruolo fondamentale nel catturare l'interesse di un visitatore del sito o nell'annoiarlo a clicare il pulsante "Indietro".
Generalmente, la tua headline sarà la prima frase o una breve dichiarazione che si distingue dal resto. Più efficace sarà meno probabilità ci saranno che la gente esca dal tuo sito web.

[/tatsu_text][tatsu_animated_heading text= "3. Utilizza un forte sottotitolo" tag_to_use= "h4" anime_type= "anime_split_letter" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "6" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "r1D-tEOEY"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "rJ2XKVd4t"]

Il subheading ti dà un po' più di spazio per espandere la tua attività e la tua offerta. Dovresti includere brevi dettagli sui tuoi prodotti e servizi mentre introduci anche la mentalità di base dietro il tuo brand.

Questo è il punto ideale per infondere fiducia nei visitatori del tuo sito e per definire rapidamente i benefici che riceveranno lavorando con la tua azienda o acquistando dal tuo negozio. È anche essenziale che tu mantenga questa parte del tuo sito web aggiornata per garantire che le persone sappiano sempre cosa possono aspettarsi da te.

[/tatsu_text][tatsu_animated_heading text= "4. Includi una chiamata all'azione" tag_to_use= "h4" anime_type= "anime_split_letter" text_color= '{"id":"palette:0","color":"#000000"}' line_color= '{"id":"palette:0","color":"#000000"}' alignment= "left" anime_duration= "6" typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "r1V8FVd4K"][/tatsu_animated_heading][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "r1autEuEK"]

Nessuna sezione hero di un sito web sarebbe completa senza una forte, chiara e invitante call-to-action (CTA).

Troppi siti web dimenticano questa parte e lasciano i loro potenziali clienti senza sapere cosa fare dopo. Senza una CTA da seguire, probabilmente saranno confusi e frustrati prima di cercare un'opzione alternativa con un'altra azienda.

Ci sono molti esempi diversi di CTA che puoi includere nella tua sezione hero. Portate il vostro cliente ad iscriversi alla vostra newsletter o invitatelo a scaricare la vostra app se ne avete una. Potresti anche offrire loro uno sconto sul loro primo acquisto o anche una prova gratuita dei tuoi servizi.

LEGGI QUI IL MIO ARTICOLO SULLA CALL TO ACTION

[/tatsu_text][tatsu_interactive_box style= "stacked" alignment= "center" url= "https://www.irbox.it/web-design/8-regole-essenziali-per-creare-call-to-action" bg_image= "https://www.irbox.it/wp-content/uploads/2021/07/32.-Le_8_regole_essenziali_per_creare_un_efficace_Call_To_Action_nel_2021.jpg" new_tab= "1" overlay_blend_mode= "normal" overlay_color= "" bg_color= "" hover_bg_color= '{"id":"palette:0","color":"#000000"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "4" height= "350" vertical_alignment= '{"d":"center"}' icon= "icon-arrow_carrot-2down" svg_icon= "linea:basic_paperplane" icon_size= "80" icon_color= "rgba(159,114,250,1)" icon_hover_color= '{"id":"palette:1","color":"#ffffff"}' title= "" title_font= "h5" title_color= "" title_hover_color= '{"id":"palette:1","color":"#ffffff"}' content_color= "" content_hover_color= '{"id":"palette:1","color":"#ffffff"}' arrow_color= "#fff" box_shadow= "0 1px 6px 0 rgba(0,0,0,0.1)" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' svg_icon_color= '{"id":"palette:0","color":"#000000"}' key= "r1SZ5Eu4t"][/tatsu_interactive_box][/tatsu_column][/tatsu_row][/tatsu_section][tatsu_section bg_color= "" bg_image= "" bg_repeat= "no-repeat" bg_attachment= '{"d":"scroll"}' bg_position= '{"d":"top left"}' bg_size= '{"d":"cover"}' bg_animation= "none" padding= '{"d":"0px 0px 90px 0px"}' margin= '{"d":"0px 0px 0px 0px"}' bg_video_mp4_src= "" bg_video_ogg_src= "" bg_video_webm_src= "" overlay_color= "" overlay_blend_mode= "normal" section_height_type= "auto" custom_height= '{"d":""}' vertical_align= "center" top_divider= "none" top_divider_zindex= "9999" bottom_divider_zindex= "9999" bottom_divider= "none" top_divider_height= '{"d":"100"}' top_divider_position= "above" bottom_divider_height= '{"d":"100"}' bottom_divider_position= "below" top_divider_color= "#ffffff" bottom_divider_color= "#ffffff" invert_top_divider= "0" invert_bottom_divider= "0" flip_top_divider= "0" flip_bottom_divider= "0" section_id= "" section_class= "" section_title= "" offset_value= "0px" full_screen_header_scheme= "background--dark" overflow= "" z_index= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HybEhqVONF"][tatsu_row full_width= "0" bg_color= "" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" no_margin_bottom= "0" equal_height_columns= "0" gutter= "medium" column_spacing= "px" fullscreen_cols= "0" swap_cols= "0" padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":"0px 0px"}' row_id= "" row_class= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" border_radius= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" layout= "1/1" key= "Bkg4394_4t"][tatsu_column bg_color= "" bg_image= "" bg_repeat= "no-repeat" bg_attachment= "scroll" bg_position= '{"d":"top left"}' bg_size= '{"d":"cover"}' padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "0" box_shadow_custom= "0px 0px 0px 0px rgba(0,0,0,0)" bg_video_mp4_src= "" bg_video_ogg_src= "" bg_video_webm_src= "" overlay_color= "" overlay_blend_mode= "normal" animate_overlay= "none" link_overlay= "" vertical_align= "none" sticky= "0" offset= '{"d":"0px 0px"}' column_parallax= "0" column_width= '{"d":100,"l":100,"t":100,"m":100}' column_mobile_spacing= "0" image_hover_effect= "none" column_hover_effect= "none" hover_box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" overflow= "" col_id= "" column_class= "" top_divider= "none" top_divider_height= '{"d":"100","m":"0"}' top_divider_color= "#ffffff" flip_top_divider= "0" top_divider_zindex= "9999" bottom_divider= "none" bottom_divider_height= '{"d":"100","m":"0"}' bottom_divider_color= "#ffffff" flip_bottom_divider= "0" bottom_divider_zindex= "9999" left_divider= "none" left_divider_width= '{"d":"50","m":"0"}' left_divider_color= "#ffffff" invert_left_divider= "0" left_divider_zindex= "9999" right_divider= "none" right_divider_width= '{"d":"50","m":"0"}' right_divider_color= "#ffffff" invert_right_divider= "0" right_divider_zindex= "9999" z_index= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" layout= "1/1" key= "ryV3qNd4t"][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "HyLa5NuVF"]

4. Esempi di sezione hero

[/tatsu_text][tatsu_image image= "https://www.irbox.it/wp-content/uploads/2021/10/62.2-Le-4-regole-per-progettare-una-sezione-Hero-che-funziona.jpg" image_varying_size_src= "https://www.irbox.it/wp-content/uploads/2021/10/62.2-Le-4-regole-per-progettare-una-sezione-Hero-che-funziona-1024x412.jpg" alignment= "center" border_width= "0" border_color= "" id= "5377" size= "large" adaptive_image= "1" max_width= '{"d":"100%"}' rebel= "0" width= '{"d":"100%"}' shadow= "none" custom_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" drop_shadow= "drop-shadow(0px 0px 0px rgba(0,0,0,0))" border_radius= "0" lazy_load= "1" placeholder_bg= "" offset= '{"d":"0px 0px"}' lightbox= "0" link= "" new_tab= "0" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' key= "SJtVoVOVF"][/tatsu_image][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "ByTli4_NY"]

1. Tesla

Questa hero image è tutta incentrata sul mostrare il modello S e sull'uso di componenti UI per rendere facile agli utenti iniziare il processo di acquisto.

I pulsanti CTA sono ben progettati, in modo che siano visibili ma svolgano un ruolo di supporto all'immagine hero dell'auto. Complessivamente, Tesla ci mostra che un'immagine-hero non deve essere complessa per funzionare, ma piuttosto ha bisogno di fornire l'idea del prodotto che viene venduto.

[/tatsu_text][tatsu_image image= "https://www.irbox.it/wp-content/uploads/2021/10/62.3-Le-4-regole-per-progettare-una-sezione-Hero-che-funziona.jpg" image_varying_size_src= "" alignment= "center" border_width= "0" border_color= "" id= "5379" size= "full" adaptive_image= "1" max_width= '{"d":"100%"}' rebel= "0" width= '{"d":"100%"}' shadow= "none" custom_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" drop_shadow= "drop-shadow(0px 0px 0px rgba(0,0,0,0))" border_radius= "0" lazy_load= "1" placeholder_bg= "" offset= '{"d":"0px 0px"}' lightbox= "0" link= "" new_tab= "0" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":"0px 0 0 0"}' margin= '{"d":"0px 0px 15px 0px"}' key= "SkyGTN_4t"][/tatsu_image][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "Syf5kUuVt"]

2. Uniqlo

Non appena atterri sulla homepage, sei immediatamente aggiornato sulle attività e le notizie, grazie all'header carosello interattivo.

Il carosello scorre automaticamente attraverso quattro diapositive, ognuna delle quali contiene un'immagine hero a tutta larghezza, un testo di intestazione e una Call To Action. La combinazione di grandi immagini, caratteri chiari e semplici effetti di scorrimento focalizza la tua attenzione sulle informazioni più importanti e attuali del brand. Puoi anche sfogliare le informazioni al tuo ritmo, usando le frecce destra e sinistra ai lati del carosello.

[/tatsu_text][tatsu_image image= "https://www.irbox.it/wp-content/uploads/2021/10/62.4-Le-4-regole-per-progettare-una-sezione-Hero-che-funziona.jpg" image_varying_size_src= "https://www.irbox.it/wp-content/uploads/2021/10/62.4-Le-4-regole-per-progettare-una-sezione-Hero-che-funziona-1024x586.jpg" alignment= "center" border_width= "0" border_color= "" id= "5380" size= "large" adaptive_image= "1" max_width= '{"d":"100%"}' rebel= "0" width= '{"d":"100%"}' shadow= "none" custom_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" drop_shadow= "drop-shadow(0px 0px 0px rgba(0,0,0,0))" border_radius= "0" lazy_load= "1" placeholder_bg= "" offset= '{"d":"0px 0px"}' lightbox= "0" link= "" new_tab= "0" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' key= "SkMxeUuVF"][/tatsu_image][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "H1OeeUONK"]

3. Samsung

Il carosello scorre automaticamente attraverso quattro diapositive, ognuna delle quali contiene un'immagine hero a tutta larghezza e un testo di intestazione. La combinazione di grandi immagini, caratteri chiari e semplici effetti di scorrimento focalizza la tua attenzione sulle informazioni più importanti e attuali del brand, senza dover cliccare da nessuna parte. Puoi anche sfogliare le informazioni al tuo ritmo, usando le frecce destra e sinistra ai lati del carosello.

Samsung va oltre un'immagine statica, optando invece per un carosello completo. Ogni immagine offre un buon impatto visivo, una copia concisa e una CTA. Il carosello include anche un video, rendendolo un'esperienza ancora più interattiva.

Le immagini hero abbiano tutte colori audaci che evidenziano l'atmosfera giovane che Samsung stava cercando di trasmettere con il loro nuovo smartphone.

[/tatsu_text][tatsu_image image= "https://www.irbox.it/wp-content/uploads/2021/10/62.5-Le-4-regole-per-progettare-una-sezione-Hero-che-funziona.jpg" image_varying_size_src= "https://www.irbox.it/wp-content/uploads/2021/10/62.5-Le-4-regole-per-progettare-una-sezione-Hero-che-funziona-1024x456.jpg" alignment= "center" border_width= "0" border_color= "" id= "5382" size= "large" adaptive_image= "1" max_width= '{"d":"100%"}' rebel= "0" width= '{"d":"100%"}' shadow= "none" custom_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" drop_shadow= "drop-shadow(0px 0px 0px rgba(0,0,0,0))" border_radius= "0" lazy_load= "1" placeholder_bg= "" offset= '{"d":"0px 0px"}' lightbox= "0" link= "" new_tab= "0" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' key= "H1Iv-8O4F"][/tatsu_image][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "rkcv-I_VF"]

4. Airbnb

Dall'uso della tipografia per rafforzare la personalità del loro brand alla costruzione di una UI che invoglia gli utenti a cercare l'avventura, Airbnb conosce l'UX che converte.

Con la pandemia, il turismo ha visto il suo mercato quasi scomparire. Airbnb, anche se pesantemente colpita, ha usato la sua immagine hero per cambiare il discorso di vendita. Il brand ha usato un'illustrazione personalizzata che dipinge un quadro per gli utenti: i componenti UI combinati con l'illustrazione creano una homepage molto convincente, rendendola un meraviglioso esempio di design UX intelligente.

[/tatsu_text][tatsu_image image= "https://www.irbox.it/wp-content/uploads/2021/10/62.6-Le-4-regole-per-progettare-una-sezione-Hero-che-funziona.jpg" image_varying_size_src= "https://www.irbox.it/wp-content/uploads/2021/10/62.6-Le-4-regole-per-progettare-una-sezione-Hero-che-funziona-1024x596.jpg" alignment= "center" border_width= "0" border_color= "" id= "5383" size= "large" adaptive_image= "1" max_width= '{"d":"100%"}' rebel= "0" width= '{"d":"100%"}' shadow= "none" custom_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" drop_shadow= "drop-shadow(0px 0px 0px rgba(0,0,0,0))" border_radius= "0" lazy_load= "1" placeholder_bg= "" offset= '{"d":"0px 0px"}' lightbox= "0" link= "" new_tab= "0" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' key= "ryoAfIOVt"][/tatsu_image][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "HJ6eQ8_4F"]

5. Nike

Nike è nota per fare affidamento su un'immagine hero al fine di creare rapidamente nuove campagne, spesso su misura per quel momento specifico. Questo dà al sito web un sacco di flessibilità, rendendo Nike un negozio che è sempre interessante al primo sguardo.

Ancora una volta vediamo un uso fantastico delle immagini. In questo caso, abbiamo una immagine grande del prodotto che si aggiunge al messaggio principale della nuova campagna mondiale che hanno lanciato.

Per concludere, includere una sezione hero nel tuo sito web può essere un ottimo modo per focalizzare l'attenzione dell'utente non appena arriva sul sito, può aiutare i vostri utenti a dare un senso al vostro contenuto.
Mettere insieme una sezione hero può richiedere molto tempo, ricerca e pazienza ma se lo fai correttamente, vedrai che questa parte del tuo sito web avrà un impatto importante sul tuo business.
Spero che gli esempi che abbiamo visto ti abbiano dato un'idea di come struttura la sezione hero del tuo sito.
Se hai bisogno di un consiglio, contattami qui.

Un saluto.
Irina

[/tatsu_text][/tatsu_column][/tatsu_row][/tatsu_section]