0/0
Buy Theme

Introduction

Thank you for purchasing our Zozo Header Footer Plugin. We are happy that you are one of our customers and we assure you will not be disappointed. We do our best to produce top notch themes with great functionality, premium designs, and clear code.

  • Get started by spending some time with the documentation to get familiar with Zozo Header Footer Plugin.
  • Build awesome websites for you or your clients with ease.
  • You can contribute to make Zozo Header Footer Plugin better reporting bugs.
  • Stuck with something? Get help from the community.
  • We love to have you in Zozo Header Footer Plugin family. We are making it more awesome everyday.


Help and Support

We have a great Support Team. No matter what issue you are facing our Support Team will help you resolve your issues.

Instant Support:

For instant support please send you chat ID ( Skype or Gtalk ) and Whatsapp. We do not provide support for additional customization, 3rd party plug-ins integration or any other compatibility issues that might arise. Nevertheless, there is an exception that is only applied to the plug-in(s) we have developed and integrated ourselves.

Support Hours:

If you have any questions that are beyond the scope of this help file, feel free to post them on our support message board (forum) at https://zozothemes.ticksy.com/. We will respond as soon as possible (within 24 – 48 hours, usually faster). We are open from 9am to 7pm (GMT), from Monday till Friday. Please be aware that a lot of the questions that are posted in the forum have been posted many times before, and get the same answers each time.

Before submitting a new ticket, please try searching the forum for an answer, as well as checking our Articles. The forum has its own inner search and also has been indexed by Google, so if you can not find your answer with a forum search, it is worth typing it into Google too. Please make sure you have looked at all the available resources before submitting a support request.

Installation

WordPress Information

If you are new to WordPress, there is a step-by-step plan for getting started. Plenty of options for assistance are listed in this article. If you need help installing WordPress, below are all the useful links for WordPress information.


How to install Zozo Header Footer Plugin?

IMPORTANT! Before you begin, make sure that you have installed & activated Elementor Plugin on your website.

Follow these steps below to install Zozo Header Footer Plugin:

Step 1: Go to your WordPress Dashboard and navigate to Wp-admin > Plugins > Add New > Upload Plugin > Choose File. Then simply click on the ‘Install Now’ button.

Step 2: After the installation is completed, click on the ‘Activate’ button and Zozo Header Footer will be activated.

Step 3: After you have successfully completed Step 2, You will find Elementor Header & Footer Builder will appear in the Appearance Menu.

Elementor Header & Footer Builder

Here you can create Multiple Custom Header & Footer Templates or any Custom Blocks.

Appearance > Elementor Header & Footer Builder >> Add New Create Header/Footer/Custom Block Templates.


Zozo Header & Footer Builder Options
  • Type of Template: Here you can select the type of the template like Header/Footer/Custom Block.
  • Display On: Choose the location where you want to display the template. You can select Multiple locations by clicking "Add Display Rule"
  • Also you can display this template any particular page/post/Taxonomie etc., by choosing Specific pages/posts/Taxonomies,etc

  • Do Not Display On: You can exclude the locations where you don't want to display the template by clicking "Add Exclusion Rule"
  • User Roles: Here you can choose the template based on the user role


    • Zozo Header & Footer Shortcodes

    These Shortcodes help you to build the professional & creative Header/Footer/Custom Block Templates.

    Search

    Content

    Search
    • Search Layout - Choose any of the Search Layout style here.
    • Alignment - Assign Search Option to the Left/Center/Right.
    • Max Height - Set the Max height value of the Search box here.

    Style

    Icon
    Here you can set style for Icon’s Normal View and Hover View.
    • Primary Color - Select the Primary Color of the Icon here.
    • Background Color - Select the Background Color for the Icon.
    • Border Color - Select the Border Color of the Icon.
    • Size - This is option for set the size of the Icon.
    • Padding - Here you can set padding value of the Icon.
    • Rotate - This option is for rotate the icon.
    • Spacing - This option set space for the icon.
    • Border Width - Here you can Icon's border width.
    • Border Radius - Set the radius style for the Icon's border here.
    Button
    Here you can set style for Button’s Normal View and Hover View.
    • Text Shadow - Here you can set text shadow effect to the Button.
    • Text Color - Here you can add text Color.
    • Background Color - Here you can add Button's Background Color.
    • Border Type - This is option for selecting type of the border.
    • Border Radius - Set the radius style for the button's border here.
    • Box Shadow - This option is for set box shadow style for the button.
    • Padding - Here you can set padding value of the button.
    • Typography - Here you can choose button's font family, size, weight etc..
    Text Box
    • Placeholder Color - Here you can add Search Placeholder Color.
    • Primary Color - Select the Primary Color of the Placeholder here.
    • Background Color - Select the Background Color for the Placeholder.
    • Border Type - This is option for selecting type of the border.
    • Border Radius - Set the radius style for the Text Box's border here.
    • Box Shadow - This option is for set box shadow style for the Text Box.
    • Padding - Here you can set padding value of the Text Box.
    • Typography - Here you can choose Text Box's font family, size, weight etc..

    Advanced

    This settings will apply for the whole section.

    Layout
    • Margin - Here you set margin value for the section.
    • Padding - Here you can set padding value for the section.
    • Width - Select section's width here.
    • Position - Here you can set section's position.
    • Z-index - Here you can set Z-index value for the section
    • Css ID - Enter the Section's unique Id here.
    • Css Classes - Here you add extra css classes.
    Motion Effects
    • Here you can set Animation for the section.
    Transform
    • The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
    Background
    • Here you can set Background color, background image for the section.
    Border
    • Add Border, Border radius, Box shadow for the section here.
    Mask
    • This option allows you to set mask for the the section. here you can set mask shape, size and position.
    Responsive
    • Here you Hide the specific section on Desktop / Tablet / Mobile.

    Search Examples

    Secondary Bar

    Content

    Trigger
    • Default Icon - Select the Secondary bar icon here.
    • Alignment - Assign Secondary bar icon to the Left/Center/Right.
    Sidebar
    • Choose Sidebar - Select the sidebar that you want to display on the secondary bar.
    • Open From - Choose the position that Secondary bar display from (Left/Right).
    • Open Type - Select the Secondary bar's open type (Overlay/Push).
    • Width - Set the Width of the Secondary bar here.

    Style

    Icon
    Here you can set style for Icon’s Normal View and Hover View.
    • Primary Color - Select the Primary Color of the Icon here.
    • Background Color - Select the Background Color for the Icon.
    • Border Color - Select the Border Color of the Icon.
    • Size - This is option for set the size of the Icon.
    • Padding - Here you can set padding value of the Icon.
    • Rotate - This option is for rotate the icon.
    • Spacing - This option set space for the icon.
    • Border Width - Here you can Icon's border width.
    • Border Radius - Set the radius style for the Icon's border here.
    Secondary Area
    • Typography - Here you can choose the Secondary Area's font family, size, weight etc..
    • Heading Typography - Here you can choose the Secondary Area Heading's font family, size, weight etc..
    • Font Color - Here you can add Secondary Area's Text Color.
    • Link Color - Select the Link Color for the Secondary Area.
    • Link Hover Color - Select the Link Hover Color for the Secondary Area.
    • Background Type - Here you can choose background type of the Secondary Area.
    • Color - Choose Secondary Area's color here.
    • Image - Upload the Secondary Area's Image here.
    • Margin - Here you can Set Margin value.
    • Padding - This option for set padding value of the Secondary Area.

    Advanced

    This settings will apply for the whole section.

    Layout
    • Margin - Here you set margin value for the section.
    • Padding - Here you can set padding value for the section.
    • Width - Select section's width here.
    • Position - Here you can set section's position.
    • Z-index - Here you can set Z-index value for the section
    • Css ID - Enter the Section's unique Id here.
    • Css Classes - Here you add extra css classes.
    Motion Effects
    • Here you can set Animation for the section.
    Transform
    • The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
    Background
    • Here you can set Background color, background image for the section.
    Border
    • Add Border, Border radius, Box shadow for the section here.
    Mask
    • This option allows you to set mask for the the section. here you can set mask shape, size and position.
    Responsive
    • Here you Hide the specific section on Desktop / Tablet / Mobile.

    Seconday bar Examples

    Menu

    Content

    Menu
    • Menu Layout - Choose any of the Menu here.
    • Max Height - Set the Max height value of the Menu here.
    Layout
    • Layout - This option is for selecting Layout style of the menu.
    • Alignment - Assign Menu Layout to the Left/Center/Right/Justify.
    • Submenu Icon - Choose the type of the Submenu here.
    • Mobile Menu From - Choose, where you want to display mobile menu here.
    • Trigger Alignment - This option is for align the trigger to the Left/Center/Right.

    Style

    Main Menu
    • Padding - Here you can set the padding value for the Main Menu.
    • Space Between - This option is for adjust the space between menus.
    • Row Spacing - Here you can adjust the row space.
    • Menu Typography - Here you can choose the Main Menu's font family, size, weight etc..
    • Text Color - Here you can set color of the menu in Normal/Hover/Active view.
    • Background Color - Here you can set background color of the menu in Normal/Hover/Active view.
    Dropdown
    • Border Type - Choose a dropdown menu's border type here.
    • Border Radius - Set the radius style for the button's border here.
    • Box Shadow - This option is for set box shadow style for the dropdown menu.
    • Padding - Here you can set padding value of dropdown menu.
    • Margin - Here you can set padding value of the dropdown menu.
    • Menu Typography - Here you can choose dropdown menu's font family, size, weight etc..
    • Text Color - Here you can set color of the dropdown menu in Normal/Hover/Active view.
    • Background Color - Here you can set background color of the dropdown menu in Normal/Hover/Active view.
    Toggle Icon
    • Padding - Here you can set padding value of the Toggle Icon.
    • Margin - Here you can set padding value of the Toggle Icon.
    • Color - Select the Color of the Toggle Icon in Normal/Hover/Active view.
    • Background Color - Here you can set background color of the Toggle Icon in Normal/Hover/Active view.
    • Icon Size - This is option for set the Toggle Icon's size.
    • Border Width - Here you can set the border width of the the Toggle icon.
    • Border Radius - Set the radius style for the Toggle Icon's border here.
    Flyout
    • Padding - Here you can set padding value of the button.
    • Margin - Here you can set padding value of the button.
    • Background Color - Select the Background Color for the Placeholder.
    • Menu Top Space - This is option for selecting type of the border.
    • Box Shadow - This option is for set box shadow style for the Text Box.
    • Text Color - Here you can set color of the menu in Normal/Hover/Active view.
    • Background Color - Here you can set background color of the menu in Normal/Hover/Active view.

    Advanced

    This settings will apply for the whole section.

    Layout
    • Margin - Here you set margin value for the section.
    • Padding - Here you can set padding value for the section.
    • Width - Select section's width here.
    • Position - Here you can set section's position.
    • Z-index - Here you can set Z-index value for the section
    • Css ID - Enter the Section's unique Id here.
    • Css Classes - Here you add extra css classes.
    Motion Effects
    • Here you can set Animation for the section.
    Transform
    • The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
    Background
    • Here you can set Background color, background image for the section.
    Border
    • Add Border, Border radius, Box shadow for the section here.
    Mask
    • This option allows you to set mask for the the section. here you can set mask shape, size and position.
    Responsive
    • Here you Hide the specific section on Desktop / Tablet / Mobile.

    Menu Examples

    Sticky Header

    • If you want to make your Header Sticky, Edit Section >> Style >> ZHF Sticky Settings Here you can enable it.

    Attention! If you want to make your entire header sticky (Topbar/Logobar/Navbar), Put all those in a single section by using inner rows.

    Sticky Header Examples

    Copyright

    Content

    Copyright
    • Copyright Text - Enter your Copyright Text here.
    • Link - Here you can enter the Link of the Copyright Tex.
    • Alignment - Assign Copyright Text to the Left/Center/Right.

    Style

    Copyright
    • Typography - Here you can choose the Copyright's font family, size, weight etc..
    • Text Color - Here you can add Copyright's Text Color.
    • Link Color - Select the Link Color for the Copyright Text.

    Advanced

    This settings will apply for the whole section.

    Layout
    • Margin - Here you set margin value for the section.
    • Padding - Here you can set padding value for the section.
    • Width - Select section's width here.
    • Position - Here you can set section's position.
    • Z-index - Here you can set Z-index value for the section
    • Css ID - Enter the Section's unique Id here.
    • Css Classes - Here you add extra css classes.
    Motion Effects
    • Here you can set Animation for the section.
    Transform
    • The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
    Background
    • Here you can set Background color, background image for the section.
    Border
    • Add Border, Border radius, Box shadow for the section here.
    Mask
    • This option allows you to set mask for the the section. here you can set mask shape, size and position.
    Responsive
    • Here you Hide the specific section on Desktop / Tablet / Mobile.

    Copyright Examples

    Page Title

    Content

    Page Title
    • Prefix Title - Enter the Archive Page's Prefix title here.
    • Suffix Title - Enter the Archive Page's Suffix title here.
    • Heading Tag - Here you can choose the section title box title heading tag.
    • Alignment - Assign Title to Left/Center/Right.
    • Breadcrumb - Enable/Disable Breadcrumb here.
    • Display Style - Here you can select where to display breadcrumb.
    Breadcrumb
    • Display Position - Choose the breadcrumbs position here Top/bottom.
    • Alignment - Assign breadcrumb to Left/Center/Right.
    • Separator Icon - Here you can choose the breadcrumbs's Separator Icon.

    Style

    General
    • Padding - Here you can set padding value of the Page Title.
    • Margin - Set margin value for the Page Title here.
    • Background Type - Select the Background Type of the Page title [Image/Color/Video].
    • Background Overlay Type - Select the Background Overlay Type of the Page title here [Image/Color/Video].
    Page Title
    • Page Title Color - Here you can choose the color of the Page Title.
    • Typography - Here you can choose Page Title's font family, size, weight etc..
    Breadcrumb

      Breadcrumb Separator

    • Size - Choose the Breadcrumb Separator Icon's size here.
    • Height - Here you can choose Breadcrumb Separator Icon's height.
    • Width - Set the width of the Breadcrumb Separator here.
    • Line Height - Here you can choose Breadcrumb Separator Icon's Line height.
    • Text Color - Select the Breadcrumb Separator Icon's color here.
    • Background Color - Select the Background Color for the Breadcrumb Separator Icon.
    • Border Type - Choose the Breadcrumb Separator Icon's border type here.
    • Width - This option is for set width of the separator icons's border.
    • Color - Here you can choose the separator icons's border color.
    • Border Radius - Here you can set border radius value for the breadcrumb
    • Padding - Here you can set padding value of the Breadcrumb Separator.
    • Margin - Here you can set Margin value of the Breadcrumb Separator.

    Advanced

    This settings will apply for the whole section.

    Layout
    • Margin - Here you set margin value for the section.
    • Padding - Here you can set padding value for the section.
    • Width - Select section's width here.
    • Position - Here you can set section's position.
    • Z-index - Here you can set Z-index value for the section
    • Css ID - Enter the Section's unique Id here.
    • Css Classes - Here you add extra css classes.
    Motion Effects
    • Here you can set Animation for the section.
    Transform
    • The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
    Background
    • Here you can set Background color, background image for the section.
    Border
    • Add Border, Border radius, Box shadow for the section here.
    Mask
    • This option allows you to set mask for the the section. here you can set mask shape, size and position.
    Responsive
    • Here you Hide the specific section on Desktop / Tablet / Mobile.

    Page Title Examples

    Registration

    Advanced

    This settings will apply for the whole section.

    Layout
    • Margin - Here you set margin value for the section.
    • Padding - Here you can set padding value for the section.
    • Width - Select section's width here.
    • Position - Here you can set section's position.
    • Z-index - Here you can set Z-index value for the section
    • Css ID - Enter the Section's unique Id here.
    • Css Classes - Here you add extra css classes.
    Motion Effects
    • Here you can set Animation for the section.
    Transform
    • The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
    Background
    • Here you can set Background color, background image for the section.
    Border
    • Add Border, Border radius, Box shadow for the section here.
    Mask
    • This option allows you to set mask for the the section. here you can set mask shape, size and position.
    Responsive
    • Here you Hide the specific section on Desktop / Tablet / Mobile.

    Minicart

    Content

    General
    • Cart Layout - This option is for selecting Cart Layout.
    • Alignment - Assign Copyright Cart Layout to the Left/Center/Right.
    • Max Height - Here you can set the height of the cart.

    Style

    General
    Here you can set style for Cart’s Normal View and Hover View.
    • Cart Color - Here you can choose the Color of the Cart.
    • Count Color - Add the Count color of the cart here.
    • Count Background Color - Set Background color for the count here.
    Dropdown
    • Padding - Here you can set padding value for cart's dropdown.
    • Text Color - This option for selecting dropdown's text color.
    • Background Color - Set Background color for the dropdown here.
    • Link Color - Add the dropdown's link color here.

    Advanced

    This settings will apply for the whole section.

    Layout
    • Margin - Here you set margin value for the section.
    • Padding - Here you can set padding value for the section.
    • Width - Select section's width here.
    • Position - Here you can set section's position.
    • Z-index - Here you can set Z-index value for the section
    • Css ID - Enter the Section's unique Id here.
    • Css Classes - Here you add extra css classes.
    Motion Effects
    • Here you can set Animation for the section.
    Transform
    • The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
    Background
    • Here you can set Background color, background image for the section.
    Border
    • Add Border, Border radius, Box shadow for the section here.
    Mask
    • This option allows you to set mask for the the section. here you can set mask shape, size and position.
    Responsive
    • Here you Hide the specific section on Desktop / Tablet / Mobile.

    Divider

    • Here is the Horizontal divider. You can use divider to divide the sections, columns and etc.,
    • Edit Divider Shortcode>> Advanced >> Transform >> Rotate >> Here you can rotate your divider vertically or in other directions.

    Divider Examples

    Common Faq's

    Here we discussed about Common themes and its features Frequently Asked Questions.

    How to install Zozo Header Footer Plugin?

    Go to your WordPress Dashboard and navigate to wp-admin > Plugins > Add New > Upload Plugin > Choose File. Then simply click on the ‘Install Now’ button.

    You will get Eight unique and creative Shortcodes from Zozo Header Footer Plugin to enhance your Elementor page building experience.
    Yes, Zozo Header Footer Plugin is Multi-site compatible.
    You can use any theme which is compatible with Elementor.
    You do not require any coding knowledge at all to use Zozo Header Footer Plugin, because of its ease of use and drag & drop capability.
    To run Zozo Header Footer Plugin for Elementor on your website, you need WordPress Version: 4.0 or Higher and PHP Version: 5.4 or Higher.
    Yes, all the Zozo Header Footer Plugin elements are responsive for all the devices.
    This error generally happens if you do not have sufficient (at least 128M) PHP Memory Limit on your WordPress Website.So, make sure to increase your Memory Limit to get rid of this error.
    No, you can also create Multiple Custom Blocks.
    Yes, This plugin allows you to display your template on any Individual page.
    • Edit the Section of your Navbar >> Style >> ZHF Sticky Settings >> Here you can enable it.

    Attention! If you want to make your entire header sticky (Topbar/Logobar/Navbar), Put all those in a single section by using inner rows.

    • Yes. Edit Divider Shortcode >> Advanced >> Transform >> Rotate >> Here you can rotate your divider vertically or in other directions.
    • Edit Shortcode >> Advanced >> Width >> Select Inline(auto) Option here.

    For Search Engine Optimization

    • Set your Permalinks
      WordPress comes with a default permalink settings to allow you to change them as per your convenience and needs. These settings can be found in settings -> permalinks.
    • Create a sitemap for your website
      Your website can contain hundreds of pages and in order to get your web pages indexed by Google, you need to tell Google your website structure. Creating a Google XML sitemap is extremely easy. WordPress offers an extremely useful plugin called Google XML Sitemaps that automatically generates a sitemap of your website which will help search engines to better index your site.
    • Use Google Analytics
      Google Analytics is a popular analytic tool developed and offered by Google. It is absolutely free to use and helps you keep track of your website traffic. The tool lets you know about the traffic source, behavior and various other important attributes that will help you better reach your target audience.
      Google Analytics helps you perform a number of different chores including locating a 404 error page, examining the behavior of your visitors, source of your traffic, combating referral spam and so much more.
    • Use SEO Plugins
      WordPress also offers many SEO Plugins including Yoast SEO, All in One SEO Plugin and so much more that take care of your website and encourage you to add Meta title, Meta description, Meta tags, keywords and more. These plugins offer complete SEO solution that is available for WordPress.
    • Optimize your media
      Media is an important part of any website. However, they can either completely ruin or improve your SEO efforts. How you tag and name your images will determine your SEO. With proper tagging, you are most likely to improve your chances of being ranked higher in image searches.
      Just uploading an image with a complex name isn’t a good SEO practice. When uploading an image to your WordPress website, you get an option to change its title, add a small caption, alt text, and description. Leveraging these options can significantly improve your website’s search engine rankings. It’s important for webmasters to use reverse image search tool for adding quality image on their websites. It will help them to increase organic traffic.
    • Make your content Shareable
      Social Media has gained a huge popularity over the past few years. Today, almost every web user is active on various social media networks such as Facebook, Twitter, LinkedIn, Google+ and so much more. Making your content shareable allows your readers to share it across different social networks while driving huge traffic to your site.Adding social sharing buttons to your website not only drives traffic but also improves your website’s credibility. So, never take the social media power for granted
    • Producing High-Quality Written Content
      What is the most used SEO tactic for enhanced search engine rankings? It’s high quality, user-engaging content.Whether you are running a blog or a corporate website, you are going to need quality content to rank higher in the search engines.The idea of quality content is not only related to a post which is free of grammatical errors and spelling mistakes but also that appeals to the readers.
    • Using Correct Heading Tags
      In regards to good SEO practices, appropriately using heading tags is extremely crucial. However, if you are just a beginner, you might not be aware of heading tags and how to use them correctly.You can see heading tags in your editor, and are allowed to choose from heading 1 to heading 6.But which one to choose? You may ask.The H1 tag must always be employed for the title of the blog post and it is imperative to keep your H1 clear and informative. Your title should tell your readers what exactly your content is about and they must be interested in reading the entire content. Once you have used H1 heading correctly, you would want to use H2 tag for additional headings and then H3 and H4 tags for sub-headings and so on.Using heading tags is not only crucial for best SEO Practices but also for improving user engagement. It gives your users a better idea about your content and captures their attention in no time.
    • Hosting
      Everyone might know the fact that Google ranks a site based on page speed in 2019 and beyond. Apart from using regular SEO techniques, one need to use a good and reliable hosting for their sites. One thing that helped us to rank higher than our competitors is using hosting with SSD drives. Many big hosts like Hostgator, Bluehost use traditional hard drives, while there are some others you can count on like Fastcomet hosting since it comes with SSD drives.
    Best WordPress Security Tips & Techniques we listed below
    • Keeping WordPress Updated
    • Passwords and User Permissions
    • The Role of Web Hosting
    • Use Best WordPress Security Plugin
    • Enable Web Application Firewall (WAF)
    • Move WordPress Site to SSL/HTTPS
    • Disable File Editing
    • Disable PHP File Execution
    • Limit Login Attempts
    • Add Two Factor Authentication
    • Change WordPress Database Prefix
    • Password Protect WP-Admin and Login
    • Disable Directory Indexing and Browsing
    • Disable XML-RPC in WordPress
    • Automatically log out Idle Users
    • Add Security Questions to WordPress Login
    • Scanning WordPress for Malware and Vulnerabilies

    Sources and Credits

    This section discloses the sources of various files used within the theme and describes their function. Use this section to gain an understanding on how the theme functions behind the scenes, if considering any type of modification.

    • Fonts:
      1. Used Google Fonts For Full Theme. You can also change any google font.
    • Images:
      1. Used Pexels
      2. Used Pixabay

    Thank you for purchasing our Zozo Header Footer Plugin. We hope that you find all your questions regarding this Plugin answered in this Documentation as much in details as possible. However, if you still need support, do not hesitate to contact us at our support forum for this Plugin. If you have any questions that are beyond the scope of this help file, Feel free to post them on our Support Ticket center. Thanks so much!