HTML Blocks is block based HTML drag & drop theme builder.
HTML Blocks is tool we use for a modern responsive unlimited layouts template. Templates are built on Bootstrap framework. It is perfect template for app landing page, digital studio, online business, personal portfolio, blog, shop, restaurant page, medical page etc. Well organized and very easy to way for you to use in order to help your website projects style according to your needs.
We offer this tool to our network customers to aid and assist us in process of creating a custom layout and design of their website build. This builder is for exactly that, we guide you on how to use this and there is no need to change links etc... we are simply styling your pages, once complete we will integrate the desired theme into a working theme for our CMS.
Current Network clients can use over 200 predefined html blocks.
HTML Builder Features
- build custom HTML pages using predefined HTML elements
- You can - create multiple pages - edit links, images (uploading possible) and icons (integrates with Font Awesome), html code.
- export the created pages
Template Features
- HTML5 Page Builder - Block Based
- Bootstrap 3.3.7 - Fully Responsive
- 200 Ready To Use Blocks
- Almost all element you will ever need
- Create themes in minute
HTML Blocks allows you to drag HTML blocks onto a canvas and drop them where they'd like them to appear. Once dropped onto the canvas, the position can be changed by dragging and dropping as well. Blocks can be deleted individually or all blocks on the current page can be deleted in one go.
When desired by the client who has had some training (if needed) ...The HTML Blocks Builder will allow for basic CSS editing. Using the built-in CSS editor, end-users can customize whatever CSS attributes the script's admin has configured. When editing a link, the end-user can point the link to either an internal page or an (external) URL.
The HTML Blocks Builder allows user to edit links as well. To be able to edit links, firstly the link selectors will need to be added to the editableItems array in the js/modules/config.js module. When selected, a "link" tab will be visible in the left panel, allowing you to either choose a page to link to or enter a URL manually as well as setting the inner text of the link element.
When building a one-page website theme, you might want to link to sections within a single page rather then to a separate page. To do this, simply edit the link and use the second dropdown to choose the block you'd like to link to. The ID's to which can be linked, have to be configured within the block HTML files, and the ID attribute should be assigned to the first child element of the main container (for an example, please have a look at any of the bundled block files).
The HTML Blocks Builder allows user to edit images as well. To be able to edit images, firstly the image selectors will need to be added to the "editableItems" array in the js/modules/config.js file. When selected, a "image" tab will be visible in the left panel, allowing you to either upload an image or enter a URL manually.
HTML Blocks Builder allows you to edit YouTube and Vimeo videos as well. Click the video you'd want to edit. This will open the left sidebar panel where you can enter a YouTube video ID or a Vimeo video ID. You can alter between these as you please, the application will detect which platform you're using and update the video accordingly.
The HTML Blocks Builder script allows user to edit icons as well (the script allows you to use all icons available in the Font Awesome collection). To be able to edit icons, firstly the icon selectors will need to be added to the "editableItems" array in the js/modules/config.js file. After clicking on an icon on the canvas, a "icon" tab will be visible in the left panel, allowing you to choose any item from the Font Awesome collection.
Items which have been setup in the "editableItems" array in js//modules/config.js can be cloned. Select the element which you want to clone and click the clone button in the left panel. Please note that cloned items will be inserted into the canvas right next to the original item.
In some situations, you might want to have the parent of the original item cloned, rather then the item itself. Consider the example of an unsorted list with "a" tags inside "li" tags. In this case, it's the containing "li" element which should be cloned, not the "a" element itself. To make this happen, make sure to add the class name "propClone" to the parent element in your element's .html file. For an example, please have a look at the navigation of the block "header1.html".
When you are happy with the final result, the created markup can be exported by clicking the export button. The export feature will grab all the used HTML blocks for each created page and inserts these blocks into a copy of the HTML skeleton file. Once all pages are completed, all the HTML files are bundled into a ZIP archive together with the other external resources like stylesheets, Javascript files and images which will be downloaded by the end user or team member working on your build with you.
The HTML Blocks Builder script allows users to create multiple pages at once. To add a new page, simply click the green button labeled "+ Add" just below the current pages list. You can alter the page names as well (please use names without the .html extension, these are added automatically during the export). When exporting the markup, the pages will use the same names. To delete a page, simply click the little delete icon next to the page you'd like to delete.
HTML Blocks Builder allows users to switch between different view modes, this to ensure the resulting page will look good on mobiles, tablets and desktop screens. To toggle between modes, use the three buttons to the left of the main toolbar.
HTML Blocks Builder allows users to configure so-called "global blocks". These are blocks that maintain the same appearance and settings across different pages. This feature comes in handy when configuring navigation's and footers for example.
Each block on the canvas has a check box labeled "Global". When checked, changes made to this block will be applied to the same block on all pages in your site, assuming those other blocks are marked as "global" as well.
We are proud to offer our many services that help promote our local businesses! All Services are developed with you in mind! If you need a website please go here.
