Team

Solutions

Work

Blog

Engage

Team

Solutions

Work

Blog

Engage

Uncode some magic: How to use the Wireframes plugin

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Find out how it can be simple to create stunning pages or entire websites by using the Uncode Wireframes plugin. This plugin is the latest add-on in the Uncode theme plugins bundle and brings extremely fast and easy workflow for both beginners or professional designers and developers.

The market for WordPress page builders is very competitive. Big names in this industry are constantly working on new features for their solutions. While this is aimed to provide web developers more control over every aspect of the development process, industry leaders have also turned to allowing users with a non-technical background to easily build their own websites.

There is no difference when it comes to the functionality of the WPBakery Page Builder and its Uncode theme-adjusted version. This combination is something I consider to be the best I have worked with thus far from the wide range of page builders availability, especially when it comes to plugin and theme symbiosis. Starting from the release of version 2.1 of the Uncode theme, its built-in WPBakery Page Builder became even better with the introduction of the Wireframes plugin.

What is the Wireframes plugin?

Many of us web developers know how pixel-perfect and modern Uncode theme demo layouts are. The import process from the Theme panel is very simple, and Uncode facilitates the seamless import of all demos, single layouts, menus, theme options and demo widgets from the Uncode demo site. But with Wireframes plugin, Uncode extends its demo offer even more and opens up the door to so many more opportunities.

With the Wireframes plugin you can import more than 400 section templates designed from the Uncode theme demo layouts. This plugin is part of the package that’s included in the Uncode theme plugins bundle, and you will need an Uncode licence to be able to install and use it. Wireframes are a massive library of carefully designed sections that you can use to:

  • Easily create landing pages for your website or marketing campaigns.
  • Build a complete website by combining the available templates into pages.
  • Create demo website proposals for your clients in just a few clicks.

How to install the Wireframes plugin

The Wireframes plugin is part of the Uncode theme plugins bundle and you can very easily install it from the Theme panel. Navigate to Uncode -> Install Plugins in the WordPress dashboard. In our case, you see Uncode Child as our team is working with an Uncode child theme:

Uncode Theme panel with Install Plugins selected

You will then be sent to the theme’s Plugins window which can be used for installing plugins from the theme bundle, and activating or updating them. Find the Uncode Wireframes plugin on this list and click Install under the plugin name.

If everything was processed well, you will receive a notification that the plugin has been successfully installed on your website. To start using all the magic this plugin provides, you will need to create a new page or post and edit with the Uncode Backend or Frontend editor.

How to use the Wireframes plugin

The plugin can be used in posts, pages and all other custom post types available for editing with the WPBakery Page Builder. Note that, by default, WPBakery is set to only be able to edit pages, so you will need to edit page builder settings to enable other types.
To do that:

  1. From the WordPress dashboard navigate to WPBakery Page Builder -> Role Manager.
  2. Under the Administrator tab, or any other WordPress role you want to give WPBakery Page Builder edit privileges, -> Post types and select Custom.
  3. Check all the post types you want WPBakery Page Builder to be able to edit. This includes pages, posts, portfolios, products, if the Woocommerce plugin is installed, uncodeblock which stands for Content Blocks and Uncode galleries.
  4. Click Save Changes on the bottom of the page.

Let’s create a new page and start editing it with Frontend editor. You can also use Backend editor and this is totally up to your preferences. Navigate to Pages in the WordPress dashboard and click on Add new page. We are going to create an About page and use it later to show you how easy is to create pages with Wireframes. Choose Frontend editor.

You will see frontend of your website opened in Frontend editor with all options from WPBakery Page Builder. Click on the Add Wireframes button and start building your page.

Types of section templates

At the time this article was written, the Uncode Wireframes plugin library had 410 section template examples. They are divided into 18 section types.

These section types are:

  • Contents – various content sections that combine text and images. You can use these sections for showing services or features, creating banners, an author’s box, events, headings, intro text sections, sliders, sections with dividers and many more options.
  • Icons – create sections with icons that showcase services, lists with custom icons or social media icons with links to your social networks. All kinds of icon positions (top, left, right of the text) and different background variations.
  • Call to Action – place an eye-catching calls to action on your landing pages that combine big heading text with animated buttons. Several options with images in the design are available.
  • Headers – replicate any header from the Uncode demo site. You can add full height headers, headers with sliders, headers with blog posts or products as content, headers with big headings. You can use them with no issues in page layout but a suggestion from Uncode documentation is to use them in Content Blocks as they will perfectly fit in to an Uncode structure like that. 
  • Portfolio – It uses the Posts widget with a query build to show Portfolio post types. You can use various grid options and full-width sections to display portfolios in carousels, classic grids,  lateral designs, masonry or metro view.
  • Blog – it’s the same as for portfolios just with more grid options, more column choices and more layouts to organize your blog posts. The query is built to showcase post content type but this can be changed and edited to match your needs.
  • News – these are more examples of Posts widget usage and its powerful query options. 
  • Shop – create unique and modern shop pages, again by using the Posts widget. Note that you need to have the Woocommerce plugin installed as these templates are dependent on it. 
  • Galleries – a selection of different gallery views that you can add to showcase your images or use for a partners’ logo section. Select from sliders, carousels or a masonry view.
  • Grids – organize your text, images, videos, features, banners or calls to action in these modern and beautiful grids.
  • Counters – use these templates to showcase all kinds of numbers, percentages, progress and data on your website.
  • Pricing Tables – quickly create and show pricing plans on your website. It takes just a few clicks and edits to have them ready for your website. 
  • Forms – Do you need a contact form or newsletter form? No problem, just choose one of the templates, adjust the settings for your business and you are ready to go. Note that you need to have the Contact Form 7 plugin installed as these templates are dependent on it. 
  • Maps – display your business location by using one of these templates and Google Maps. Note that you need to have the Google Maps API key entered in Theme Options to enable maps.
  • Team Members – create team pages or sections using these simple yet creative templates.
  • Quotes – every business will want to have good testimonials on their website to showcase feedback from their happy customers. You can use these templates and create quotes in various layouts. Note that some of the templates use the Media Gallery widget and this will require you to add your quotes to the Media database.
  • Specials – you can use these templates to create custom 404 pages, coming soon pages or maintenance mode pages. It is best to use these templates in Content Blocks as you can easily assign them to an appropriate module in Theme Options.
  • Footers – choose some simple or creative footer layouts for your website. Display your most important pages, policies, social links, newsletter forms or anything you need. Uncode developers suggest that these layouts be utilised in Content Blocks, as in a few clicks, administrators can assign them to footer content in Theme Options.

How to create pages with the Wireframes plugin

Creating pages with Wireframes plugin sections templates is super easy. You can use the navigation list on the left side to select the section you need, scroll through section templates or use search in the top right corner if you already know what to look for. Every template has its own name, set by template structure or by the demo page from which it is sourced and you can see this name by hovering your mouse over the templates.

All you have to do to add a template to a page is to click on the desired template box. Give it a second or two for Uncode to load the template into the page and that’s it. Adjust the layout of columns, colours, text and animation if you need to make it more personalized, or leave as it is and simply add your content. 

For the purpose of this article, we are going to recreate an Uncode About Creative demo page using Wireframes plugin templates to show you how quickly this can be done. Yes, you can use the Demo Importer to do this even quicker but this is just to show you the plugin’s workflow. Your design or layout can be something completely different from the available demo pages.

Create header in Content Blocks

For header we are going to use the Header Classic Studio template and place this template inside Content Block as per Uncode documentation suggestions:
  1. We are creating new Content Block from Content Blocks -> Add New in WordPress dashboard:Uncode theme Content Blocks panel in WordPress dashboard
  2. Name it About Header. Open the Frontend editor and click on Add Wireframe: Uncode Wireframes plugin Add button
  3. Search for Header Classic Studio or navigate to the Headers section and scroll to Header Classic Studio. Click on a template to add it to the page. Uncode Wireframes plugin Header Classic Studio template
  4. We are going to make a couple of edits here. First, remove the play icon box. Edit the heading text and make it larger, 50px in size to be exact. Open the Row setting and in the Style options of the row add a background image. You will end up with something like this:Header section of demo About page
  5. Publish your new Content Block.

Create a content layout of About page

  1. Open the About page we previously created. 
  2. We are first going to connect Content Block About Header to this page. Scroll down to Page Options.
  3. Select Header settings and under Type choose Content Block. Select About Header for the  Content Block option.Uncode theme single page options
  4. You can publish your page at any time while you’re working on it but we find it useful to do that before entering the Frontend editor, which is our next step in the process. We’ll leave you with making your own choice of editor, and when using the Wireframes plugin, it makes no difference whether you use the Frontend or Backend editors.
  5. Now, we need to add page content. For the “What we do” and “How we do it” sections we need one template, just with opposite column placement for the second one. We found the Content Split Grid in the Contents templates to be the most useful in achieving this result. We just need to edit row layout to have ⅓ + ⅔ for the first section and the opposite for second section. Also, the height of rows needs to be 75%. We are leaving demo content as it is.Uncode Wireframes plugin Content Split Grid
  6. Next, we need a “Meet the Team” headline and this is a simple section where we don’t need help from Wireframes. Just add the Heading widget, edit the Columns setting to have text aligned to the centre and set Skin to Dark in Style options. Just to make it the same as the demo page, edit Row settings and apply Custom Padding to Top Padding and Bottom Padding of 4x.
  7. Under the “Meet the Team” headline, we have a gallery of team members. Navigate to Team Members templates in Wireframes and look for Team Members Full Width. Add it to the page.Uncode Wireframes plugin Team Members template
  8. We will need to edit a number of visible members. Open Media Gallery settings and in Blocks options set Width to 4/12 and Height to 4/12. Add your team members’ images from Media and Save Changes.
  9. The last section we need to add is the partner/clients logo carousel. Open Wireframes, go to Galleries templates and look for the Gallery Logo Carousel. Add it to the page and edit Media files with your logos. Click on Save Changes.
  10. Save you page and we are done with the About page content layout.

For the Footer, replicate steps from the Header creation process and use the Footers template: Footer Creative Studio. Save the Content Block and navigate to Theme Options -> Footer in Theme panel. Under Widget Area select the Content Block you just created and click on Save Changes.

The end result of our work is:

Screen capture of Uncode demo page About Creative
Official Uncode demo page About Creative
Screen capture of demo About page created with Uncode Wireframes plugin
Our demo About page created with Wireframes

Conclusion

The Wireframes Plugin makes it super easy and efficient to create stunning pages or entire web sites. It can be used by a range of web design and development enthusiasts, spanning the spectrum of experience from beginners to professional designers. Overall, it can make workflows much easier and more intuitive, while simultaneously maintaining a high level of design quality. Think of them as a strong foundation for website building as they cover every aspect of a website. From the header to the footer, you can have your design ready in just a couple of clicks. Add your own unique flavour to the final result by tweaking and customizing content and elements, and you can have a website ready in minutes. 

With this plugin available in its bundle, Uncode definitely stands out across the market of premium themes. When it comes to choosing a theme for our clients’ websites, Uncode is a clear winner and we hope that you will enjoy your journey with this theme as much as we do.

Let us know in the comments what WP related topics would you like us to cover next.

Do you want our team to design and develop a stunning website for you? Send us the details and we'll start discussing a strategy for your project!
Nemanja Tomanovic

Nemanja Tomanovic

Nemanja is a certified PHP Developer specialized for WordPress development. His main skills are HTML, CSS, PHP, and JavaScript. His IT career starts as a Marketing Analyst working on frontend, maintenance, SEO and different marketing tasks. At Roshem his main area of work is WordPress development.
Nemanja Tomanovic

Nemanja Tomanovic

Nemanja is a certified PHP Developer specialized for WordPress development. His main skills are HTML, CSS, PHP, and JavaScript. His IT career starts as a Marketing Analyst working on frontend, maintenance, SEO and different marketing tasks. At Roshem his main area of work is WordPress development.

Leave a Reply

Comments

  1. What’s up, yes this piece of writing is truly fastidious and I have learned
    lot of things from it concerning blogging. thanks.

  2. Like!! Great article post.Really thank you! Really Cool.

Leave a Comment

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email