The Wireframes Plugin, bundled from Uncode version 2.1, allows you to easily import over 750 carefully designed section templates that can be easily combined to create a complete website or independent landing pages. Think of Wireframe like the Tetris game. You pick the relevant wireframes you need, then customize each one to make it fit your website. This is a great tool to design your pages or quickly create the proposal for your clients, with the advantage that expert designers have already designed them. The Wireframes enables a faster workflow for your website creation!
Huge library of wireframes layouts
There are more than 750 different Wireframes available, spread across 18 popular categories: Contents, Icons, Call to Actions, Counters, Quotes, Headers, Portfolio, Blog, News, Shop, Galleries, Grids (layouts with grid style), Pricing Tables, Forms, Maps, Team Members, Specials (404 and Coming Soon) and Footers.
How does it work?
After you have installed the Wireframes Plugin, you find the new Wireframe buttons (which enhances the old 'templates' button on the toolbar and at the bottom of the Page Builder screen), screenshot.
From this button, you can open the Wireframe tool. You can filter the various categories or search for what you're looking for and pick the best match, screenshot.
One of the best parts is that when you import the wireframes, they automatically have the styles, fonts, and colors inherited from your Theme Options. This makes the sections immediately integrated into your website. This makes the task of fitting the different wireframe together much more straightforward.
Easy to use & faster workflow
'Wireframes' is not just a new addition plugin; it presents an alternate workflow. It can be useful for beginners just learning the ropes of Uncode, as well as for professional web designers who create websites for a living.
- For beginners, it enables them to create what they want quickly. Beginners sometimes lack the experience required to develop a needed part of a page. They know their page needs better-designed sections, they don't know how to build it. With Wireframes, it's just a matter of picking the right element, inserting it and tweaking the content a bit.
- For professional designers, it enables a faster workflow. Wireframes are independent and straightforward. This makes it easy to combine different wireframes. Using the Wireframe plugin can have a real impact on your workflow. Just consider how quickly you can create a proposal for your clients. If used right, you can develop a streamlined process!
Important notes
- Dependencies: Please note that certain wireframes have a dependency on some plugins, as in the case of the Shop layouts that are dependent on WooCommerce Plugin or of the Forms that are dependent on the Contact Form 7 Plugin. If you do not have these active plugins, you will not be able to import the related contents.
- Suggestions: Some elements, such as Headers, Footers, and Specials, have instead of the suggestion to be used within a Content Block. You can always use them even in the content of an official page, but the perfect gold fit is inside a Content Block.
- Approximation: The Wireframe Plugin works perfectly with the original Theme Options that can be imported from the Demo Contents but does not import the Theme Options as the standard Demo Contents. In the absence of the original Theme Options settings (typography settings and colors), the Plugin uses approximations based on your current Theme Options. For example, if a wireframe uses a 100px heading and this value is not present in your Theme Options, the nearest value is used. The same also happens in the case of colors.
- Nothing found: Please note that if when you enter a Posts module (Blog, Portfolio or Products) and you have a message 'Nothing Found' this is due to the fact that you have no blog post, portfolio or product single item. The Wireframes plugin does not work as a Demo Import that imports the necessary blog posts, portfolios, or products. The Plugin only imports layouts, if the design includes thumbnails (generally associated with the Posts module) make sure you have at least one.
Use your own placeholders images
When importing a wireframe, Uncode will use placeholder images. This method allows you to keep your Media Library clean without adding dozens of photos and help to speed up the import process. In fact, when you activate the plugin, a few placeholder images are imported in the Media Library, and some Contact Forms examples are imported in the appropriate section of the Contact Form 7 plugin.
If you want to use images from your Media Library as placeholder, we have created a convenient hook that you can apply from your Child Theme. This way, you can already assume how a particular page can come with your images. Or better yet, if you are creating proposals for your client, you can immediately show them what the result might be in just a few simple clicks.
Media placeholder
function uncode_custom_generic_placeholder_media_id( $id ) { $placeholders = array( 5065, // media ID 5066, // media ID 5067 // media ID ); $random_placeholder = $placeholders[ mt_rand( 0, count( $placeholders ) - 1 ) ]; return $random_placeholder; } add_filter( 'uncode_wireframes_get_generic_placeholder_media_id', 'uncode_custom_generic_placeholder_media_id' );
Team placeholder
function uncode_custom_team_placeholder_media_id( $id ) { return 5065; // media ID } add_filter( 'uncode_wireframes_get_team_placeholder_media_id', 'uncode_custom_team_placeholder_media_id' );
Quote placeholder
function uncode_custom_quote_placeholder_media_id( $id ) { return 5065; // media ID } add_filter( 'uncode_wireframes_get_quote_placeholder_media_id', 'uncode_custom_quote_placeholder_media_id' );
Logo placeholder
function uncode_custom_logo_placeholder_media_id( $id ) { return 5065; // media ID } add_filter( 'uncode_wireframes_get_logo_placeholder_media_id', 'uncode_custom_logo_placeholder_media_id' );
Block import of default placeholders
function uncode_custom_block_import_default_placeholders_medias() { return false; } add_filter( 'uncode_wireframes_create_placeholders_medias', 'uncode_custom_block_import_default_placeholders_medias' );
Block import of Wireframe Contact Forms
function uncode_custom_block_import_default_forms() { return false; } add_filter( 'uncode_wireframes_create_forms', 'uncode_custom_block_import_default_forms' );
Comments
0 comments
Article is closed for comments.