HayyaBuild - WordPress Builder Plugin V5.0


Introduction

Welcome to HayyaBuild!! If this is your first time using HayyaBuild, please take a moment to read this documentation. Below you will find all the information you need to get started, including installation, setup, customization and important notes.

HayyaBuild is a powerful and straightforward WordPress plugin that offers responsive headers, pages layouts, shorcodes and footers builder,
this plugin lets you to create an unlimited numbers of headers, contents and footers using Gutenberg editor.

HayyaBuild 5.0 now working with new WordPress Gutenberg editor, so you can use HayyaBuild blocks with pages editor, posts editor or any post type using Gutenberg editor.

Create and manage powerful content for your WordPress blog or website, it's an easy to use HayyaBuild plugin that will help you to save your time and grab your visitor's.

We hope you enjoy working with HayyaBuild and if you have any questions, requests or find any bugs, please leave a comment in the item's comments page at codecanyon.net.

Thank you for purchasing HayyaBuild.
if you like it, don’t forget to keep a good review :) Just click here to keep your reivew. .
Files Included
  • Documentation - contains this help file.
  • Licensing - contains licensing.
  • hayyabuild.zip - contains plugin files, you have to upload it to your server.
  • ReadMe.txt - short help file.
  • before-upgrade.txt - important short notes before upggrade.
This Documentation was created in : 02/01/2016
and updated in : 14/06/2019


Need help? You can find us on:
Plugin Page Plugin Website Our Website

Install HayyaBuild

HayyaBuild Requirements

To install and use HayyaBuild:

  • You must have an WordPress installed on your server.
  • You must have permission to that FTP server to upload your files.
  • You must have administrator privileges to install plugins in WordPress.

Install WordPress

If you have not set up your WordPress installation yet, download the latest WordPress version here: http://wordpress.org/download/.

You can find info on installing WordPress here: https://wordpress.org/support/article/how-to-install-wordpress/.

Installing WordPress on your web server is easy. Each web host is different but when you log in to your dashboard there's usually an option that allows you to install WordPress automatically.

you can check this tutorials about install WordPress plugins to help you:


Install HayyaBuild

Installation via Plugin Dashboard
  • Extract codecanyon-15315666-hayyabuild-wordpress-header-and-footer-builder.zip file.
  • Log into your WP admin and go to Plugins.
  • Go to Plugins Add New.
  • Click in Upload Plugin button.
  • Select hayyabuild.zip file from HayyaBuild directory.
  • Click in Install Now button.
Installation via FTP Client
  • Extract codecanyon-15315666-hayyabuild-wordpress-header-and-footer-builder.zip file.
  • Use an FTP client (for example filezilla) to access your host web server.
  • Transfer the hayyabuild subdirectory of HayyaBuild to your server in the wp-content/plugins/ .
  • Once the plugin is uploaded, Log into your WP admin and go to Plugins.
  • go to plugins list in your WordPress and activate HayyaBuild plugin.

Updating HayyaBuild

Update via WordPress Dashboard
Updating via FTP Client
Since we have made a radical changes to HayyaBuild core in version 5.0. you have to start building your Hayyabuild content from zero. We are sorry for that, but it was necessary to make this plugin more useful.
So. if you have HayyaBuild 4.0 or older that is mean you will lose all HayyaBuild content.

Theme Setup

To use HayyaBuild to only building pages layouts and shortcodes, you don't have to follow these steps.
But it prefers to do so to take advantage of all HayyaBuild features.
To use HayyaBuild to build headers and footers and your theme doesn't support HayyaBuild by default just follow these steps.
  • Make a backup from header.php and footer.php files.
  • Now open "Edit Themes" page which is located in the WordPress Dashboard → Appearance → Editor
  • From template files list "on the right" choose Theme Header (header.php)
  • Now search for the header tag and replace it with hayybuild function
    <header> .... </header> OR <div id="header"> .... </div> or anything else
    with this code
    <?php hayyabuild();?>
    and click on Update
  • From Editor and template files list "on the right" choose Theme Footer (footer.php)
  • Now search for the footer tag and replace it with hayybuild function
    <footer> .... </footer> OR <div id="footer"> .... </div> or anything else
    With this code
    <?php hayyabuild();?>
You can edit header.php and footer.php with any text editor from your desktop and then upload it to your WordPress theme directory.
You can try Hayya Theme from WordPress https://wordpress.org/themes/hayya/
if you have any problem to setup your theme to work with HayyaBuild just content us using this link codecanyon.net.

Getting Started with HayyaBuild

HayyaBuild How To's

  • Create your First Header, page layout or Footer

    To create a new header, page layout, shorcode or footer, simply log in to your WordPress dashboard and navigate your way to the:
    1. HayyaBuild Add Header to build new header.
    2. HayyaBuild Add Content to build new pages layout or short code.
    3. HayyaBuild Add Footer to build new footer.
    Add New Header, Page Layout or Footer
    To create a new shortcode select Add Content then keep the Pages List option empty
    HayyaBuild Pages List

    Gutenberg

    HayyaBuild version 5.0 uses the WordPress Gutenberg editor that makes it very lightweight and efficient, also you can use any Gutenberg blocks from other plugins with HayyaBuild.
    And of course, HayyaBuild also comes with it's own blocks, Which will help you to build modern website quickly from just one place.
    Gutenberg Builder Page
    To add new block to Gutenberg editor you can use the mouse to move to plus icon or just press the tab key on your keyboard to move down and start writing to add Paragraph block. or you can write slash "/" and then write the block name to add a specific block.

    Add new gutenberg block

    HayyaBuild Settings


    HayyaBuild Settings
    1. Header, Conten or Footer title. this title will be appear only at the backend in Hayyabuild list page.
    2. The pages list that you want to appear in. you can select All pages to make this Header, Content or Footer as default for all pages.
      You have to add just one header as default header, one content as default pages layout and one footer as default footer
    3. Background Type there are a four options for you to choose.
      1. Transparent: keep background transparent.
      2. Image: You can add image URL or choose image from library.
      3. Color: You can choose background color with color picker or insert color HEX code manually.
      4. Video: You can add video URL or choose video from library ( you can add youtube video ).
    From Settings you can change Header, content or Footer background. also you can change background size, background repeate, background effects. Also you can setup default text color, height, border, padding and margin.

    CSS editor

    HayyaBuild CSS ditor
    From CSS editor you can add custom CSS for individual header, content and footer. The effects of this custom CSS will be limited to that particular header, content or footer only.

  • Main List

    HayyaBuild Main List
    All HayyaBuild content will be appear in this list. from this list you can edit, publish, deactivate, delete, emport and export headers, content, shortcode or footers.
    Import HayyaBuild Content
    HayyaBuild Import Form
    This feature helps to import headers or footers. By the import form you can easily transfer HayyaBuild content from one WordPress site to the other.
    You have to browse a HayyaBuild JSON files and click on the IMPORT button. Don't Check the checkbox "Include pages list" if you want to import data from anther WordPress site.
    You can change pages list at any time from builder page.
  • HayyaBuild Blocks

    WordPress Gutenberg blocks are a new and innovative way to edit WordPress content like posts and pages in WordPress.
    HayyaBuild version 5.0 uses the WordPress Gutenberg editor that makes it very lightweight and efficient, also you can use any Gutenberg block or blocks from other plugins with HayyaBuild.
    And of course, HayyaBuild also comes with it's own blocks, Which will help you to build modern website quickly from just one place.
    HayyaBuild Blocks List
    HayyaBuild right now comes with more than 15 blocks, these blocks are as follows:
    1. Content Box - you can add any other blocks inside this box also you can style this box as you want.
    2. Sticky Box - like Content Box you can add any other blocks inside this box and style it as you want.
      but this box will stick to the screen when you reach scroll position.
    3. Magic Box - you can add any other blocks inside this box and configure the box to be visible based on some conditions, like
      • show or hide for logged in users.
      • show or hide from front page.
      • show or hide from posts index page.
      • show or hide from single page.
      • Also show or hide from specific pages ID's.
    4. Row block (Grid) - We are using a standard 4 column fluid responsive grid system. The grid helps you layout your page in an ordered, easy fashion.
      create responsive grid system for small, medium or large screen sizes.
    5. Buttons Group - group a series of buttons together on a single line. you can add as many as you want of buttons and control every button separately.
    6. Button - add single button to content.
    7. Separator - Separator block signifies a break in your content. Separator can either single line, double line, dotted, dashed, with text or with icon,
    8. Spacer - create extra space in your content.
    9. Testimonial - a testimonial is often used to let people know what other people think of you or your product.
    10. Alert Box - create alert messages, you can set it as dismissible also you can set it as Rememberable dismissible to to remember it's dismissible state for visitors.
    11. Menu - add beautiful styled menu to header.
      This block will only appear in headers.
    12. Simple Menu - add simple menu to content.
    13. Breadcrumb - a breadcrumb or breadcrumb trail is a graphical control element frequently used as a navigational aid in user interfaces and on web pages. It allows users to keep track and maintain awareness of their locations within programs, documents, or websites.
    14. Search - create search form to any place that you want.
    15. Page Content - you will see this block in HayyaBuild content only.
      you have to use this block when build pages layout. this block will show the orignal page content.
    16. Social Media Menu - Social media icons can be displayed on your site in different ways. These small social media buttons link to services like Twitter and Facebook, allowing visitors to quickly access your social profiles.
    17. Go Down Link - you will see this block in HayyaBuild header only.
      Page jumping, also sometimes referred to as anchor links, add this link to header when you want your visitors to click on to go to page content.
    18. Go Up Link - you will see this block in HayyaBuild footer only.
      Page jumping, also sometimes referred to as anchor links, add this link to footer when you want your visitors to click on to go to top of page.
    More blocks will arrived in the next releases.

    Block Options

    HayyaBuild Block Options
    All HayyaBuild blocks comes with this option "except for some exceptions". with this option you can control a wide range of features. like:
    • Visibility Options - based on screen size.
    • Scroll Effects - When visitors scrolls down your webpage, the action can be designed to trigger a variety of animation options such as fade effects, 3D, parallax, and more..
    • Other Options - some helper options.
    • Inline Style - Margins, Borders, Paddings, Font Size, Text Color...etc.
    HayyaBuild Block Options
    HayyaBuild Block Options - Inline Style Tab

HayyaBuild Shortcode

  • [hayya_pagetitle]: Show current page title.
  • [hayya_sitetitle]: Show Site title
  • [hayya_blogtitle]: Show current blog title
  • [hayya_blogdesc]: Show blog description
  • [hayya_adminemail]: Show admin email
  • [hayya_siteurl]: Show site URL
  • [hayya_homeurl]: Show home URL
  • [hayya_username]: Show current user name
  • [hayya_date]: Show current date

UPDATES

HayyaBuild Version 5.0
  • New Feature: convert all HayyaBuild modules to Gutenberg editor blocks to make them available in pages editor, posts editor or any other plugin uses Gutenberg editor.
  • New Feature: Adding new options to all blocks..
  • Improvements: Update HayyaBuild core to make it faster, safer and more flexible.
  • Improvements: Update backend interface.
  • Fixed bug: some of spelling mistakes.
  • Fixed bug: fix shortcode issues footer and header.
  • Other Changes: Update Documentation.
  • Other Changes: Update .po file for translation.
  • Other new features, improvements and bugs fixes.
20 June 2019
HayyaBuild Version 4.0
  • For Developers: now you can write your own modules for your themes or plugins in just a few minutes.
  • New Feature: New option "Centering on only medium and small screen" for all module.
  • New Feature: Adding new options to separator modules.
  • Improvements: Update HayyaBuild core to make it faster, safer and more flexible.
  • Improvements: RTL backend improvements.
  • Improvements: Adding WordPress editor to all text boxes.
  • Improvements: rewrite Menu module.
  • Improvements: Update third-party libraries.
  • Improvements: Update backend interface.
  • Fixed bug: CSS conflicting with some themes.
  • Other Changes: Remove DEMO theme and adding it to wordpress.org.
  • Other Changes: Update Documentation.
  • Other Changes: Update .po file for translation.
  • Other features, improvements and bugs fixes.
14 April 2018
  • Security Changes: Many improvements in security to make this plugin more safety.
  • Fixed bug: Error with old WordPress versions.
  • Other features, improvements and bugs fixes.
22 August 2017
HayyaBuild Version 3.2
  • Security Changes: Many improvements in security to make this plugin more safety.
  • Other features, improvements and bugs fixes.
31 July 2017
HayyaBuild Version 3.1
  • New Module: Card Module, Cards are a convenient means of displaying content composed of different types of objects
  • New Module: Testimonial Module, The testimonials module lets you to add kudos from your customers and clients and display them on your site.
  • New Feature: now with HayyaBuild you can build 404 error page.
  • New Feature: Adding new scroll effects to all module.
  • Other Changes: New pre-made template (404 error page template).
  • Other Changes: Back-end interface improvements.
  • Other Changes: Front-end improvements in CSS and JavaScript.
  • Fixed bug: Fix Parse Error, issue with parsing HTML output.
  • Other features, improvements and bugs fixes.
09 June 2017
HayyaBuild Version 3.0
  • New Module: Conditional Box, You can use this box to display content under a specific conditions.
  • New Feature: pages content builder, Now with HayyaBuild you can build your pages content from one place without the needs for editing all pages separately.
  • New Feature: Adding scroll effects to all module "Scale Out, Scale In, Slide Left, Slide Right, Slide UP, Slide DOWN, Left Rotation, Right Rotation, Fade IN, Fade OUT, Parallax Background (UP), Parallax Background (DOWN)".
  • New Feature: Adding visibility Options to all module "Visible on extra small devices, Visible on small devices, Visible on medium devices, Visible on large devices, Hidden on extra small devices, Hidden on small devices, Hidden on medium devices, Hidden on large devices".
  • New Feature: module ID text box to add an ID for modules.
  • New Feature: popover dialog to display module info " like Module name, ID, class and style".
  • New Feature: date shortcode, to display current date.
  • Fixed bug: Menu module - improvements in CSS and mobile screen size.
  • Other Changes: Menu module - centering problem.
  • Other Changes: PHP, CSS, HTML and JavaScrit Code improvements.
  • Other Changes: Update all pre-made templates.
  • Other Changes: Update Documentation.
  • Other Changes: Update Demo theme.
  • Other Changes: Update .po file for translation.
  • Other features, improvements and bugs fixes.
22 May 2017
HayyaBuild Version 2.3
  • Fixed bug: all links inside header of footer don't accepted tel and callto.
  • Fixed bug: Menu module - hover problem at right alignment.
  • Other Changes: Update Documentation.
  • Other features, improvements and bugs fixes.
20 November 2016
HayyaBuild Version 2.2
  • New Feature: CSS Editor for header or footer, Now you can add CSS style rules to just one header or footer.
  • New Feature: Add more than 10 new Pre-made template.
  • Improvements: Re-adjust colors and CSS style rules for the backend
  • Improvements: Improves drag and drop functionality. works better now.
  • New Feature: Sorting modules side by side.
  • New Feature: Adding some important shortcodes ( page title, site title, blog title, blog description, site URL, home URL ).
  • Fixed bug: Fixing YouTube Video background problem.
  • Fixed bug: some of spelling mistakes.
  • Fixed bug: Modules background removed by HTMLPurifier.
  • Fixed bug: open links to new window.
  • Fixed bug: updated message not working whene user click the update button.
  • Other Changes: Update Documentation "add HowTo's section".
  • Other Changes: Prompt confirm before Leaving edited header or footer.
  • Other Changes: .po file updated.
  • Other features, improvements and bugs fixes.
10 October 2016
HayyaBuild Version 2.1
  • New Element: Bootstrap Panels.
  • New Feature: Now you can active and deactivate any module.
  • New Feature: CSS Editor, to add CSS style rules for WordPress pages.
  • Improvements: Include HTMLPurifier library, HTML filter that guards against XSS and ensures standards-compliant output.
  • Improvements: Re-adjust colors and CSS code in the backend
  • Improvements: Separation of headers and footers in backend to avoid confusion when the list is long
  • Improvements: Remove unwanted HTML attributes from frontend with HTMLPurifier to make website more faster.
  • Improvements: Minify some of CSS and JS files to make website more faster by decreasing the file size.
  • Fixed bug: In Responsive embed module "the embed code not rendered in frontend".
  • Fixed bug: In Bootstrap Progress bar module "Progress bar not rendered in backend".
  • Fixed bug: In Google Map module "Javascript error in map when content is more than one line".
  • Fixed bug: fixing some of spelling mistakes.
  • Fixed bug: Video background not working.
  • Other features, improvements and bugs fixes.
12 September 2016
HayyaBuild Version 2.0
  • New Element: Facebook like and recommend button.
  • New Element: Facebook timeline box.
  • New Element: Twitter button.
  • New Element: Twitter timeline box ( list template and grid template).
  • New Element: Google Map.
  • New Element: Contact Form 7 ( for ContactForm7 plugin ).
  • New Element: Revolution Slider ( for Revolution Slider plugin ).
  • New Element: Layer Slider ( for Layer Slider plugin ).
  • New Feature: Display background image for headers and footers in list page.
  • New Feature: More than 10 Pre-made templates to get started from them.
  • New Feature: You can disable any libraries if you are already use it in your theme.
  • Fixed bug: Footer scroll effects problem ( pin It ).
  • Update CSS code for admin theme
  • Other features, improvements and bugs fixes.
27 June 2016
HayyaBuild Version 1.2
  • Migrate from Skrollr to Scrollmagic ( for scrolling effects ).
  • New Scroll Effects Fixed effect, Parallax effect, opacity effect, scale in, scale out.
  • Fixed bug mobile Scrolling problem when Parallax effect is activated
  • Change Demo theme.
  • Change HayyaBuild Demo content.
  • Other features and bugs fixes.
12 April 2016
HayyaBuild Version 1.1
  • New Element: WordPress menu.
  • New Element: Simple WordPress menu.
  • New Element: Heading text.
  • New Element: WordPress Breadcrumb menu.
  • New Feature: Adding a new features to must of modules.
  • New Feature: Adding some classes.
  • New Feature: Now you can change text align from the Division module
  • Change Demo them.
  • Change HayyaBuild Demo content.
  • Other features and bugs fixes.
31 March 2016
HayyaBuild Version 1
  • First release!
10 March 2016