Table of Contents
A collection of UI Components created using Tailwind that can be easily added via Magento's admin via PB or CMS page editor. The widgets are useful when wanting to add custom elements to your page more easily without having to hard-code any of the content.
This project has 6 Hyva-widgets that have been created using the Hyva-Magento-default theme and Tailwind. The 6 Hyva-Widgets include:
- FAQ widget: A widget that displays content as an FAQ block.
- Quotes-Block widget: A widget that displays content for quotes in a row including author and company.
- Horizontal-Advert widget: A widget that is a horizontal advert which includes a text,background image and colour, button and icon image.
- Featured-Image-Block widget: A widget that has a block of images with line colour, title and text.
- Featured-Icon-Block widget: A widget that also has a block of images displaying with title and text for each image where all content is centred.
- Content-Block widget: A widget that has an image or content either in the left or right side in a 1:1 ratio.
The Hyva-Widgets are built using:
- Magento 2.4.4
- Hyva-themes/Magento2-default-theme 1.1
- Tailwind 2.1.5
1. To be able to use the Hyva-Widgets download the folders and upload to your local/cloud environment into app/code folder.
2. Then run the following commands in the terminal:
- bin/magento setup:upgrade
- bin/magento setup:di:compile
3. After running the setup commands you can then check the status of the module by running:
- bin/magento module:status Develodesign_HyvaCmsWidgets
4. If the module is disabled you can enable by running:
- bin/magento module:enable Develodesign_HyvaCmsWidgets
5. Final steps are to clear the cache before using the module:
- bin/magento cache:clean
- bin/magento cache:flush
After the installation of the required applications and dependencies the widgets can now be added in the Page-builder. These can be found in the admin page.
1. Enusre that web-page is configured using the Hyva- theme in the admin by going to Content > Design > Configuration and in the actions column set to Hyva-default
2. The Hyva-Widgets then can be added by going to Content > Pages and clicking on Edit in Action column for the specific page.
3. Once your inside the Page builder by clicking on Edit with Page-builder a row or column needs to be added to the page and text element. Inside of the text element click on edit and then insert widget icon.
4. Widgets can now be selected and added.
5. Final step is to add content in the relevant sections for the widget you choose and click on insert widget to save and then to save again in the Page-builder home-page.
If you have any questions about the Hyva-Magento Widgets that are in this project you can contact us at: info@develodesign.co.uk