Firefox user notice:
Please use another web browser to view this document.
Sorry for the inconvenience.
Buildify for Magento 2 is one of the very few WYSIWYG solutions for building content for online stores powered by Magento 2 Open Source. Employ Buildify page builder to create and arrange content for pages, blocks, category and product descriptions. Start a layout, select widgets from the extensive list of thereof, collate them within the working area and customize neatly to have your content attractive and engaging on all kinds of devices.
Compatibility: Magento Open Source 2.3.X - 2.4.X
Thank you for choosing Aheadworks!
Installing Magento 2 Buildify
Command Line Installation | Composer Installation |
---|---|
1. Backup your web directory and store database 2. Download the Buildify installation package 3. Upload contents of the Buildify installation package to your store root directory 4. In SSH console of your server navigate to your store root folder: cd path_to_the_store_root_folder run: php -f bin/magento module:enable Aheadworks_Buildify then: php -f bin/magento setup:upgrade after: php -f bin/magento setup:static-content:deploy 5. Flush store cache; log out from the backend and log in again Make sure the installation is done from the FTP administrator account. Otherwise, set 775 permissions to the store root directory after the extension is deployed. | If you are installing an extension from Aheadworks for the first time, you need to add our composer repository to your Magento store: 1. Login to your ssh console and navigate to your store folder:
cd path_to_the_store_root_folder
Run the following command:
composer config repositories.aheadworks composer https://dist.aheadworks.com/
On successful execution of the commands you will be able to use the composer to install the extensions. To install the extension: 2. Login to your ssh console and navigate to your store folder:
cd path_to_the_store_root_folder
3. Run the following command to install the latest version of the extension: composer require aheadworks/module-buildify
if you need to install a specific version, run this command: composer require aheadworks/module-buildify:<version>
Specify the version of the extension in <version> When prompted, enter Composer Public Key (Username) and Private Key (Password): Both Composer Public Key (Username) and Private Key (Password) can be found in My Projects and Licenses in your personal account on our site: 4. Enable the extension: php -f bin/magento module:enable Aheadworks_Buildify
Next, register the extension: bin/magento setup:upgrade
Recompile your Magento store if you are in the Production mode: bin/magento setup:di:compile
To verify that the extension is enabled, run this command: bin/magento module:status
Clean store cache, by running the following command: bin/magento cache:clean
Log out and Log in the backend again. To upgrade the extension: 5. To update or upgrade an extension: Download the updated extension file. Take note of the module-name and version. Export the contents to your Magento root. If a composer package exists for the extension, run one of the following. Update per module name: composer update aheadworks/module-buildify Updater per version: composer require aheadworks/module-buildify:<version> Run the following commands to upgrade, deploy, and clean the cache. php bin/magento setup:upgrade --keep-generated
php bin/magento setup:static-content:deploy
php bin/magento cache:clean
|
Introducing Magento 2 Buildify
Buildify page builder for Magento 2 is a WYSIWYG visual editor to create and arrange content for pages, blocks, category and product descriptions. Buildify is widget-based, and comes with an extensive selection of widgets. The solution allows starting a layout of the page, drag and drop widgets onto it, collate them within the working area and customize neatly to have your content attractive and engaging on all kinds of devices. The key-features of the solution are as follows:
- Multiple content widgets to be taken on without any further coding
- Highly customizable style and layout options of the widgets
- Drag & drop action to easily arrange widgets within the content area
- Tweaking content to render well on various devices and screen sizes
- Support of native Magento 2 widgets and image storage
Known Issues
It has been reported, that staging environments which employ NGINX Auth can display page preview incorrectly in Buildify.
Add the code below into the nginx.conf file if either of the following is true for you:
- Header and/or Footer are not displayed in the Preview area of the editor.
- Authentication credentials are prompted when the editor is loaded (on loading the <domain>/aw_buildify/page/preview page)
The file is found in the Magento directory.
location / { location ~ ^/aw_buildify { auth_basic off; try_files $uri $uri/ /index.php$is_args$args; } }
Alternatively, grant https://magento.buildify.shop/ (ip 157.245.245.206) access to your staging environment.
General Information
Authorizing to Buildify
Go to Stores → Configuration → Aheadworks Extensions → Buildify to enter the authorization keys and start working with Buildify. Two keys are required: Public and Private API. Find the keys in My Projects and Licenses in your personal account on aheadworks.com.
Make sure, you use the Buildify authorization keys, not the Composer ones. The latter are used to install extensions from Aheadworks. Buildify authorization keys are located on the My Projects and Licenses page below the list of purchased products, at the bottom of the page.
To enable Buildify, set Enable Buildify to Yes. By default, the selector is set to No. When Buildify is disabled a Magento default editor is used. Content created with Buildify remains available on Front-end on disabling Buildify.
What can I edit with Buildify?
Buildify page builder is available for the following entities of a web-site:
- Pages
- Blocks
- Product descriptions
- Category descriptions
- Blog posts in Aheadworks Blog extension.
Buildify page builder is embedded into the interface of the Create/Edit Page/Block/Product/Category pages (normally, the into "Content" section thereof). It loads itself automatically on loading of the pages. However, when on a Create/Edit Category/Product page, click on the Edit with Buildify button to load the builder. The button is located next to the Description option in the Content section.
Buildify Interface
The builder has two working areas: Preview and Widgets.
The Preview area displays the whole store page, including the content under construction, web-store header, menu and footer. This is where you can arrange the layout of the page, allocate widgets onto and preview changes to the configuration of the sections, columns and widgets.
The Widgets area comes in three tabs: Menu, Widgets and Elements Tree. The Widget tab lists content widgets classified into named groups. Scroll down the list to pick out a widget, or use the Search Widget field to find one quickly.
The Elements Tree tab shows the structure of the sections of the content you are designing. It also enables editing the layout of the page or deleting the content from the Preview area.
The Menu tab gives access to the settings of the editor. This is where you can select the view for the Preview area.
To change the view, go to Widgets Area → Menu → Settings → Page Settings and select a view with the help of the Select Store View setting. The Preview area will then display the page in compliance with the styles of the chosen theme.
Changing views for the Preview area does not change the theme of the web-site. The features are meant for previewing only: for you to switch between the store views to see how your content looks with different themes.
The bottom of the Widget area contains four tabs: Responsive Mode, Help, Revisions and Templates (from left to right). Each tab is supported with an icon, meant to visualize the purpose of the tab.
The Responsive Mode tab allows choice of the preview mode: Desktop (default), Tablet or Mobile. On choice of the mode, the Preview area shows the page and its content the way it will look on the screen of the chosen device. The Tablet and Mobile views show content in device frames.
Use the Responsive Mode to test the responsiveness of the content you have just created.
Help is next to the Responsive Mode tab. Clicking on the Help icon will take you to the present manual.
The Revisions tab is next to Help. Clicking on the Revisions tab opens the list of all the revisions (saved versions) of the given content. The versions show the date and time when the revisions were saved. To load the content, select the version and click on Apply above. To cancel selection, click on Discard.
The Templates tab is to the right of the Revisions tab. Clicking on the tab allows choice of saving the present content as a template or loading a template from the Templates Library.
Page Layout
Using Templates
Buildify comes with a number of free pre-made page templates, which you can employ with the help of the Add Template button in the Preview Area. Clicking on the Add Template button opens the Templates Library popup holding a selection of templates. Templates are shown as thumbnail images. There is an upload button below each image telling the name of the template. Use the button to employ the template to your layout. When loaded, you will be able to modify the template, if need be.
The Templates Library popup has two tabs: Predesigned Templates (on display by default) and My Templates. Content designs that you save appear on the My Templates tab. To save a template, click on the Save Template button next to Close in the right top of the popup and confirm the action.
To use big templates from Predesigned Templates, increase the max_input_vars value in php.ini
Arranging Layout Manually
Start with the layout of the content first. Click on the Add New Section button in the Preview area to see some pre-arranged content structures. The selection appears in the Select Your Structure area which substitutes the buttons Add New Sections and Add Template. Click on the structure and it will be added to the page right above the Select Your Structure area. You can add as many structures of layout as you need.
A structure here is a row of columns within a section.
The Columns widget can also be used to arrange the layout of the page.
The layout of the page can be rearranged at any time:
- columns can be added to or deleted from the sections
- sections can be swapped
- the order of the columns can be altered
- columns can be swapped between the sections
- the configuration of the columns/sections can be tweaked
To change the width of the column, hover the cursor over the right border of the column until the Resize pointer appears and drag the border to the right/left. The % value at the top of the column will indicate the part of the section the column takes.
To change the position of the column/section, hover the cursor over the Column/Section tab at the top left of the column/section until the Reposition pointer appears and drag and drop the column/section to the new position. This is how you can change the order of the sections within the layout, the order of the columns within the section, and to relocate the columns from one section to the other.
Alternatively, columns/sections can be relocated with the help of the Elements Tree in the Widgets area. Sections are represented here as blocks and columns as the content of these blocks. Hovering the cursor over the section/column in the Elements Tree will highlight this section/column in the Preview area. You can change the order of the sections, relocate the columns within the sections and between the sections with the help of the drag and drop feature.
To add a column to the section, click on the Column tab and then click on the '+' icon.
To add a copy of the column in the section, click on the Column tab and then click on the 'Copy' icon.
To delete a column from the section, click on the Column tab and then click on the 'x' icon.
To tweak the configuration of the column, click on the Column tab and refer to the Widgets area (see Configuring Columns).
To add a copy of a section to the page, click on the Section tab and then click on the 'Copy' icon.
To delete a section from the page, click on the Section tab and then click on the 'x' icon.
To save a section as a template, click on the Section tab and then click on the 'Save' icon.
To tweak the configuration of the section, click on the Section tab and refer to the Widgets area (see Configuring Sections).
Alternatively, you can drag and drop widgets right into the Select Your Structure area (or the area of the Add New Structure button) to start a new one-column section consecutively placed below the ones already in use.
Configuring Layout
Configuring Columns
To tweak the configuration of a column, hover the cursor over the column and click on the Column tab. The Widgets area will show two tabs: Style (shown by default) and Advanced.
The Style tab will feature three blocks of configurations: Background & Border, Background Overlay (active when background is selected for the column), Layout and Typography.
See the table below to learn more on the Background & Border configuration options.
Background Type | Border Type and Border Radius | Box Shadow |
---|---|---|
Background Type - None No background is applied to the column. | Border Type - None No border is applied to the column. Border Radius is visible, though not applicable. | Box Shadow - No No shadow is applied to the column. |
Background Type - Classic The Classic type allows specifying a color and/or image for the background. | Border Type - Solid/Double/Dotted/Dashed Whatever type you select for the border, you can specify its width, color and radius. Clicking on the Chain icon for width or radius will link/unlink the values for the top, bottom, left and right dimensions. When unlinked, each dimension can be set individually. You can switch between fixed and floating (%) values for the border radius with the help of the PX and % selector above the parameter. | Box Shadow - Yes When box-shadow is enabled, you can select a color for it, indicate the intensity of blur and spread, and specify the horizontal and vertical offset (from the center of the column). |
Background Type - Gradient When gradient is selected for the background type, you can specify the following:
|
The Background Overlay block is available when the background type is Classic or Gradient. The block has similar configuration options to that of Background & Border, but for the extra Opacity option. The Opacity option is available for the Classic and Gradient background overlay types. It is meant to specify the transparency of the background overlay.
The Layout block has only one option - Content Position, which allows specifying the position of the content within the column: bottom, top (Default), middle.
Two configuration options are available for the Typography block: Colors and Text Align. The former is meant for headings, text, links and link hover. The latter allows choice between left, center and right alignment of text within the column.
The colors indicated herein will not work if Global Colors are enabled.
The Advanced tab has two configuration blocks: Advanced and Responsiveness.
The following options are available within the Advanced block:
- Margin (in px or %) - the margins between the content within the column and the borders of the column;
- Padding (in px, em or %) - the padding between the content of the widget and the borders of the column;
- Entrance Animation - the effect of animation for the content of the column: Fading, Zooming, Bouncing, Sliding, Rotating, Attention Seekers, Light Speed and Specials are on the list (only one effect can be chosen);
- Duration of Animation (available when Entrance Animation is set) - either of the Slow, Fast or Normal.
- CSS ID - the text field to indicate the css IDs, if any are used;
- CSS Classes - the text field to indicate the css classes, if any are used.
You can check how well your content looks like on the screens of mobile devices, given the set margins and padding, with the help of the three icons above the Margin and Padding options. Clicking on each will update the view of the content in the Preview area with regard to the chosen device.
The Responsiveness block enables to manually specify how much narrower the column is to be displayed on the screens of mobile devices. To do so, select Custom in Mobile Width and configure the Column Width.
Mobile Portrait control is no longer supported. Please use the Mobile Width instead.
Configuring Sections
To tweak the configuration of the section, hover the cursor over the section and click on the Section tab. The Widgets area will show two tabs: Layout (shown by default), Style and Advanced.
The Layout tab features two blocks of configurations: Layout and Structure.
The Structure block allows resetting the structure of the section. Click on the Reset Structure to do so and select a new structure from the list below.
The Layout block brings forward the following options for configuration:
- Stretch Section - If Yes is selected, the section will be stretched to the full width of the page using the JS.
- Content Width - Full Width by default; when Boxed is selected, indicate the width of the box with the slider (in px).
- Columns Gap -the gap between the columns: Default, No Gap, Narrow, Extended, Wide or Wider.
- Height - Default, Fit to Screen or Min Height. If Fit to Screen is selected, the Column Position option is available. If Min Height is selected, the Minimum Height option is available too.
- Minimum Height - the slider to indicate the minimum height of the section (in px or VH).
- Column Position - the position of the column within the section: Stretch, Top, Bottom or Middle.
- Content Position - the position of the content within the section: Default, Top, Bottom or Middle.
The Style tab features five blocks of configurations: Background, Background Overlay (when background is Classic, Gradient or Video), Border, Shape Divider and Typography.
The Background, Background Overlay, Border blocks and Typography for sections have the same configuration options as those in the similarly named blocks for columns. The only exception here is the Video type of the background, only available for sections. For the video background type you are suggested to indicate the link to the video (alternatively, a Youtube link) and the fallback background. The latter will replace the background video on mobile and tablet devices.
Shape Divider is a unique block of configuration options, specific for sections. This is where you can employ some pre-arranged shapes to visually separate the section from the one above and/or below it. The Top and Bottom tabs allow switching between the two dividers, configuring each separately. The list of shapes can be accessed via the Type option. Depending on the chosen shape the list of configuration options can be as follows:
- Color - the color of the shape
- Width, Height - the geometry of the shape in px
- Invert - set to Yes to fill the transparent part of the shape with the given color and discolor the colored one
- Flip - set to Yes to rotate the shape to 180 degrees
- Bring to Front - set to Yes to overlay the content of the section with the shape
Samples of section dividers in Preview area | Sample configuration of Shape Divider |
---|---|
The Advanced tab has two configuration blocks: Advanced and Responsive.
The Advanced tab has two configuration blocks: Advanced and Responsiveness.
The following options are available within the Advanced block:
- Margin (in px or %) - the margins between the content within the column and the borders of the section;
- Padding (in px, em or %) - the padding between the content of the widget and the borders of the section;
- Entrance Animation - the effect of animation for the content of the section: Fading, Zooming, Bouncing, Sliding, Rotating, Attention Seekers, Light Speed and Specials are on the list (only one effect can be chosen);
- Duration of Animation (available when Entrance Animation is set) - either of the Slow, Fast or Normal.
- CSS ID - the text field to indicate the css IDs, if any are used;
- CSS Classes - the text field to indicate the css classes, if any are used.
The Responsive block has the following options for configuration:
- Reverse Columns - when set to Yes and when displayed on mobile devices, the order of the columns within the section is reversed: the column at the bottom appears at the top of the section and vice versa.
- Hide on Desktop - set to Yes to hide the section when the page is viewed on desktop devices.
- Hide on Tablet - set to Yes to hide the section when the page is viewed on tablet devices.
- Hide on Mobile - set to Yes to hide the section when the page is viewed on mobile devices.
The display settings (show/hide for mobile, tablet or desktop) will only take effect once you are on the preview or live page, and not while you are in the page editing mode in Buildify.
Import and export functionality
Import Functionality
To import a template click on the Import Template button. After that, you will be able to select and upload templates in JSON format. Every time after importing a new record will be created in the "My Templates" tab.
Export Functionality
To save the template created by you click on My Templates and select the needed one and click on the Export button. When the button is clicked the template will be downloaded in JSON format. The file name will contain [name of the template]-[date of export in the format set in the locale].
Widgets
General Information
Widgets are located in the Widgets area in a searchable continuous list. The Search field is available at the top of the Widgets area within the Widgets tab.
Widgets are broken into the following categories:
- Basic - essentials for page layout customization;
- Typography - text in various forms and arrangement;
- Buttons - buttons, individual and grouped;
- General - most demanded content elements and the Magento 2 widget;
- Media - images and video, individual and in galleries;
- Icons - social media icons, individual and in lists;
- Progress - widgets to visualize progress;
- Slides - text and images in slides and carousels;
- Comments - Facebook or Disqus comments and testimonials;
- Google - Maps, Translate, Analytics and Hangout;
- Pricing - tables and lists of prices;
- Facebook - Facebook comments, posts, buttons, etc.
- Twitter - Twitter comments, posts, buttons, etc.
- Analytics - Google Analytics and Yandex Metrica;
- Modal Windows - intended for displaying all sorts of information.
To populate sections with widgets, drag the widget into the column and drop it there. You can always rearrange the layout and move widgets within sections and columns. Do that either in the Elements Tree tab in the Widgets area or directly in the Preview area. In the Elements Tree, widgets are displayed as sub-elements of columns. In the Preview area, widgets are instantly visualized as per the content they embody. Sample data is used to visualize widgets. It can then be altered to your needs.
Configuring Widgets
To configure a widget, hover the cursor over the content of the widget in the Preview area. An orange frame will appear around the content of the widget. Refer to the right top corner of the frame. This is where the three icons are displayed: Edit, Copy and Delete. Click on the Edit icon and refer to the Widgets area. This is where widget configuration options will be displayed.
Configuration options are broken into three tabs for each widget: Content, Style and Advanced. Depending on the content element the widget embodies, either Content or Style tabs may not be present. The Advanced tab for widgets has the same configuration options as the Advanced tab for sections. The configuration options within the Style and Content tabs vary greatly from widget to widget. See the table below for details.
Widgets in Details
Basic Widgets
Typography
Buttons
General
Media
Icons
Progress
Slides
Comments
Pricing
Analytics
Modal Windows
Uninstalling
Manual Removal
1. Disable the module by executing the following commands:
php bin/magento module:disable Aheadworks_Buildify php bin/magento setup:upgrade
2. Remove the extension files from the following folder:
app/code/Aheadworks/Buildify
Automatic Removal (via Composer)
1. Disable the module by executing the following commands:
php bin/magento module:uninstall Aheadworks_Buildify
Need Customization?
You can always find the latest version of the software, full documentation, demos, screenshots, and reviews on http://aheadworks.com
License agreement: https://aheadworks.com/end-user-license-agreement
Contact Us: https://aheadworks.com/contact
Copyright © 2021 Aheadworks Co. http://www.aheadworks.com