How to design and customize your Vzy site's header

This is the top section of your website, where your brand name or logo is displayed along with the pages you create. It’s like a map that guides your visitors through your website. On mobile, pages can be accessed through the menu bar, represented by the hamburger icon.

To change the layout of header on desktop

  1. Click the header section in the editor
  2. Go to Style section of the panel
  3. Choose from the layouts provided.

To upload a Logo and Image

  1. To use text as logo, click the header section in your editor
  2. Select Text in Logo
  3. Enter your brand name in the text box provided
  4. Go to Style section of the panel to choose text color
  5. To upload an image, click the header section in your editor
  6. Select Image in Logo
  7. Click the image placeholder in Light
  8. Click Upload Image
  9. Select the image you want to upload
  10. Repeat this process in Dark.

To add a new menu in the header

  1. Click the header section in the editor
  2. Click Add Menu to add a new menu.

To edit a menu in header

  1. Click the header section in the editor
  2. Click the menu you want to edit
  3. Enter the name of the menu and URL you want it directed to

To link menu in header to a page or an external page

  1. Click the header section in the editor
  2. Click the menu you want to edit
  3. In the URL box, type the page you want to link to
  4. There will be a pop-up suggesting the page
  5. Click it
  6. To an external page, click the header section in the editor
  7. Click the menu you want to edit
  8. In the URL box, type or paste the external page you want to link it to.

To add an announcement banner to your site.

  1. Click the header section in the editor
  2. In the Style section of the panel
  3. Go to announcement
  4. Toggle it on.

To edit the announcement banner on your site

  1. Click the header section in the editor
  2. In the panel, go to announcement and click it
  3. Enter the content of the announcement in the text box
  4. Enter the link you want your website visitors to be directed to.

To turn on or off the announcement banner

  1. Click the header section in the editor
  2. In the panel, go to Style section
  3. Go to announcement
  4. Toggle off or on as desired.

To move the announcement banner

  1. Click the header section in the editor
  2. In the panel, go to the Style section
  3. Go to announcement below
  4. Toggle it on.

To edit the buttons in the header

  1. Click the header section in the editor
  2. Go to buttons and click on it
  3. Enter the call-to-action text and URL you want visitors directed to

To turn off buttons in the header

  1. Click the header section in the editor
  2. Go to Style section
  3. You’ll find button 1 and button 2
  4. Turn off one or both as desired.

To turn on full width for your site

  1. Click the header section in the editor
  2. In the Style section of your site
  3. Go to full width
  4. Toggle it on.

Benefits of header

  • Provides easy navigation: The header of a website acts as a map that navigates visitors through the site, allowing them to easily find information and transition between pages. This also improves user experience.
  • Boosts brand recognition: Adding your brand name or logo to the header of your website can create a strong visual identity, which enhances brand recognition and establishes your online presence.
  • Enhances aesthetics: The header is often the most prominent part of a website. By designing a header that looks great and is visually appealing, you can enhance the overall aesthetics of your website.
  • Makes a strong first impression: The header is the first thing users see when they visit your website. Creating a strong, visually appealing header, can make a great first impression and encourage users to explore your site further.

Hi Christopher!
First of all I cannot find “full width” in the editor style section. Is it “fill” (width) what you mean?
Is it also possible to give the whole site or templates like “hero”, “pricing”, “text” or etc. the full width?
I don’t like the white margins.
Best regards

Hello dozentenpool24,

In the editor style, it is actually “Fill Width,” not “Full Width.” It is possible to apply the “Fill Width” setting to the “Hero,” “Cards,” “Lists,” “Posts,” “Gallery,” “Logos,” “Testimonials,” “Pricing,” “Accordions,” and “Embed” sections, but not to the “Text” section.

If you don’t like the white margins, you can fill them with a color, image, or video to make your site more visually appealing.

Best regards,
Vzy Team

Margin:
I don’t like to fill the white margin. I would like the text to have the maximum width (like the banner, for example). Without margins. Is that possible?
Fill Width:
If I select “fill width” in the editor style for the templates “cards”, “logos”, “pricing” etc., there are huge gaps at the top and bottom between the templates in front and behind.

Hi dozentenpool24,

To fix this issue, please follow these steps:

  1. Select “Height” to be “Fit.”
  2. Select “Width” to be “Fill.”
  3. Choose either Small (S), Medium (M), Large (L), or Extra Large (XL) from the “Spacing” options.

Please apply these settings and update us on the results.

Best regards,
Vzy Team

Hi Christopher,

  1. in the logo editor style there’s no “Width”, only “Height” (sorry, in my former message it must say "if I select “full height” in the editor style for…)
  2. the results are almost the same, when I use S ,M ,L or XL. There are gasps. Only the size is different.

But the most important question of my former message was “I don’t like to fill the white margin. I would like the text to have the maximum width (like the banner, for example). Without margins. Is that possible?” Please give me an answer. Thanks.

Hello dozentenpool24,

We will review your request regarding the logo editor style and the text width without margins and update you as soon as possible.

Best regards,
Vzy Team

Hello dozentenpool24,

Thank you for bringing this to our attention. Please schedule a time Get Support | Vzy | Cal.com in the timezone (America/Denver GMT -6:00) when you will be available so we can have a Google Meet and permanently resolve this issue for you.

We appreciate your patience and cooperation.

Best regards,

Vzy Team