1. Introduction
  2. Getting Started
    1. Requirements
    2. WordPress Installation
    3. Theme Installation
      1. Through "Envato Market"
      2. Through WordPress
      3. Through FTP Upload
    4. Theme Setup Wizard
    5. Child Theme
    6. Sample Data
  3. Theme/Plugin Update
  4. Theme Options
    1. Layout Settings
    2. Site Logo
    3. Sticky Header
    4. Site Preloader Option
    5. Back to Top
    6. Header
      1. Site Header
      2. Topbar
      3. Search
    7. Page Header
    8. Page Settings
    9. Footer
    10. Blog/Post Settings
      1. Blog Settings
      2. Archive Settings
      3. Single Post
    11. Portfolio
    12. Color Scheme
    13. WooCommerce
      1. Products Listing
      2. Products Filters
      3. Single Product
      4. Checkout
      5. Wishlist
      6. Compare
      7. Quick View
      8. My Account
      9. Cookie Law Info
      10. Swatch Settings
      11. Promo Popup
    14. Faq Settings
    15. Site Info
      1. Social Profiles
      2. Site Contacts
      3. Opening Hours
    16. Social Sharing
    17. Typography
    18. 404 Page
    19. Performance
    20. Maintenance
    21. Custom CSS/JS
    22. MailChimp Settings
  5. Elementor Widget/WPBakery Shortcodes
    1. Address Block
    2. Banner
    3. Button
    4. Callout
    5. Category Box
    6. Clients Logo
    7. Countdown
    8. Counter
    9. Hotspot Image
    10. Static Block
    11. Image Slider
    12. Image Gallery
    13. Info Box
    14. Info Box 2
    15. Instagram (Shortcode)
    16. Kite Box
    17. List
    18. Menu List
    19. Multi Tab Product Listing
    20. Newsletter
    21. Opening Hours
    22. Portfolio
    23. Pricing Box
    24. Product Category Item
    25. Product Deal
    26. Product Deals
    27. Product Showcase
    28. Products Listing
    29. Progress Bar
    30. Recent Posts
    31. Search
    32. Section Title
    33. Single Product Slider
    34. Smart Image View
    35. Social Icons
    36. Team Members
    37. Timeline
    38. Testimonials
    39. Vertical Menu
    40. Video
  6. Videos
    1. WooCommerce
      1. Installing WooCommerce
      2. General Settings
      3. Products Settings
      4. Tax Settings
      5. Tax Rate Example
      6. Shipping Zones
      7. Flat Rate
      8. Free Shipping
      9. Local Pickup
      10. Shipping Options
      11. Shipping Classes
      12. Checkout Settings
      13. BACS
      14. Check Payments
      15. Cash On Delivery
      16. PayPal Standard
      17. Accounts Settings
      18. Emails Settings
      19. API Settings
      20. Product Categories, Tags, & Attributes
      21. Simple Product Overview
      22. Grouped Product Overview
      23. External/Affiliate Product Overview
      24. Variable Product Overview
      25. Downloadable Product Overview
      26. Coupons
      27. Widgets
      28. Shortcodes
      29. Managing Orders
      30. Refunding Orders
      31. Reporting
      32. System Status
  7. Widgtes
  8. Translation
    1. Poedit
    2. Loco Translate
    3. WPML
  9. Extra
    1. Retina Display
    2. Browser Support
    3. How to rate this item
    4. Speed Optimization/Performance
    5. WooCommerce / Shop integration
    6. Plugins Documentation
      1. WPBakery Page Builder
      2. WooCommerce
      3. Dokan Multivendor Marketplace
      4. WC Marketplace
  10. Additional
    1. Header Builder
    2. Custom Sidebar Widget
    3. Mega Menu
    4. Footer Builder
    5. Instagram API Settings
    6. Size Guide
    7. Static Block
    8. Product Variation Not Working Proper
  11. FAQs
    1. Why Sample Data Look Different than Demo Pages?
  12. Changelog
  13. Source & Credits

Header Builder

CiyaShop comes with six predefined header styles with different settings and options, by using them in combination, you can make a beautiful header.

In the process of our product improvement, we built a header-builder in theme. Header builder is an intuitive drag and drop header editor. With the help of header builder, you can create customized, eye-catching and impressive unlimited headers with the infinite number of styles by just drag and drop.

Header builder also provides facility to create customized and responsive headers for mobile devices too, which give a great user experience on all devices and platforms. Header builder provides better and precise control over header elements. You can use a component at different locations, like Top Bar, Main Header or in the Header Bottom, and you can set individual properties for each.

Header builder comes with six predefined styles, which you can import while creating a new header, and then you can customize it as per your requirements.

 

Enable Header Builder in Theme Options

By default, the theme will display predefined header styles. You can display custom header by enabling it by selecting “Header Builder” in Theme Options > Header > Site Header > “Select header type” field. Enabling custom header will enable another field, named “Select Custom Header”, next to “Select header type” field, in which you can choose custom header built in Header Builder section.

 

Header Builder Sections

A header consists of three sections:
1. Top Bar: As the name suggests, it’s the top area of the header.
2. Main Header: As the name suggests, it’s the main area of the header.
3. Header Bottom: As the name suggests, this row is located at the bottom of the header.

 

Header Builder Components

Header builder comes with the below components:

  1. Account: Add a login and register links and form.
  2. Button: Create buttons with various styles and options.
  3. Cart: Add WooCommerce Cart icon.
  4. Compare: Add WooCommerce Compare icon.
  5. Currency: Add WooCommerce currency switcher dropdown.
  6. Divider: Add a separator to divide the header content.
  7. Email: Add email address.
  8. Static Block: Select and add a Static Block content.
  9. Language: Add language switcher/selector dropdown.
  10. Logo: Add a logo in the header. Settings to customize the logo options are available in the theme options.
  11. Menu: Add any existing WordPress menus to the header.
  12. Phone Number: Add a phone number to the header.
  13. Primary Menu: Add menu assigned in the Primary menu location.
  14. Search: Add a WordPress search form.
  15. Social Profile: Add social profile links to the header. Social profiles can be managed from Theme Options.
  16. Space: Add horizontal space between two elements.
  17. Text Block: Add text/HTML content with WYSIWYG editor.
  18. Wishlist: Add WooCommerce Wishlist icon.

 

Suggest Edit