Header Button

The header builder ( found in  Appearance > Customize > Header ) has three rows in which you can easily select and arrange the available components you can find while hovering over each division of the rows.

Add a Header Button

Just click on the ➕ symbol and a list of components will appear.

From there you can add the Button.

Open customizations for Button

To open the customizing options, just click on the newly added Button component. This will open the Button panel on the left side, from where you can customize the component.


⚙️ General

  • Appearance > Customize > Header > Button > General

Add your custom label and link for the header button

  • Text - type the desired text to appear on the button label.
  • Link - insert a button link. 

The three dots triangle you can see at the end of the rows is for the Dynamic Tags:

For both the Text and Link options, you have the option of entering your own custom text or using dynamic tags.

Dynamic Tags draws content from the website, or from the current page/post, changing dynamically according to the Page or Post it’s on.


 📐Layout

  • Appearance Customize Header Primary Menu > Layout

Custom padding and margin

In the Layout tab, you have access to advanced positioning options like: 

  • Alignment ( inside the header builder available space for the Button component ) - left / center / right / justify ( Desktop | Tablet | Mobile ).
  • Padding - available in PX, EM, and %, with a link button that helps with establishing the same dimension for all the directions  ( Desktop | Tablet | Mobile ), along with a reset arrow.
  • Margin  - available in PX, EM, and %, with a link button that helps with establishing the same dimension for all the directions  ( Desktop | Tablet | Mobile ).

📝  Note: Neve has only one Button component included in the header builder. Two extra Button components are part of Neve Pro's Header Booster module.


🖌 Style

  • Appearance Customize Header Primary Menu > Style

In the style tab you can choose between two styles for the button:

    • Filled  
      • Normal 
        • setting colors for Background and Text - with the option to choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.
      • Hover
        • setting colors for Background and Text - with the option to choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.
      • Border Radius - with a link button to connect all the values.

    • Outline
      • Normal 
        • setting colors for Background and Text - with the option to choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.
      • Hover
        • setting colors for Background and Text - with the option to choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.
      • Border Radius - with a link button to connect all the values.
      • Border Width - with a link button to connect all the values.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.