Documentation

Documentation

Introduction

WireMentor is a powerful wireframing and prototyping UI kit to be used with the award winning theme builder Elementor Pro.

It was built with rapid implementation in mind to help you craft digital wireframes and prototypes in no-time.

With rapid implementation in mind, this is why, despite Elementor library capabilities, WireMentor comes as a bundle of pages, and not saved layouts.

Why is that?

Simply because:

  • it’s more visual, therefore it is way faster to browser the demo site, and just click on Edit with Elementor when you want to copy, instead of an endless “import this layout” process
  • you can see the Block / Element / Layout in responsive context, before you decide to use it

Pre-requisites

In order to use WireMentor, you will need:

  • a domain name + webhosting, or a local solution such as Local By Flywheel (free)
  • a fresh WordPress install (from WordPress.org and NOT WordPress.com)
  • a page builder friendly theme such as Astra, Ocean Wp or the Hello theme
  • Elementor Pro

WireMentor Setup

Make sure you install WireMentor on a fresh install because it will change the existing content!

  1. Make sure your permalinks are set to %postname%
  2. Install & activate a page builder friendly theme such as Astra
  3. Install & activate the following plugins
  4. In Wp > Tools > Import > WordPress, start the WordPress Importer and import the WireMentor xml file you downloaded after purchase. It may take a moment.
  5. In the next screen, MAKE SURE you tick the optionDownload and import file attachments” otherwise your demo will not show any images
  6. DO NOT refresh the page during the import process. This may take a moment.
  7. In Wp > Settings > Reading, set the homepage by selecting the “Home” newly imported page
  8. In Wp > Elementor > Tools > Replace URL
    • in the old url field, paste https://tipalais.com//
    • in the new url field, paste your new url (with the ending backslash). Examplehttps://yourwebsite.com/

Styling Setup

  1. In Wp > Elementor > Settings, make sure fonts and colors are managed by Elementor
  2. If not, un-tick the options that disable Elementor, then click on Save Changes
  1. Make sure there is no other Elementor page being edited
  2. In Wp > Pages > Style Guide, click on Edit with Elementor
  3. In the top left corner of the window, click on the hamburger icon then click on Default Fonts, and set them such as documented on the Style Guide page:
    1. Primary headline: Roboto / 300
    2. Secondary headline: Roboto / 400
    3. Body Text: Roboto / 400
    4. Accent Text: Roboto / 500
  4. MAKE SURE you click on the Apply button in the top left corner of the window in order for the changes to be taken into account
  5. Save the page and go back to the WordPress Dashboard
  1. Make sure there is no other Elementor page being edited
  2. In Wp > Pages > Style Guide, click on Edit with Elementor
  3. Then, in the open Elementor Window:
    • click on each column that represent a color block
    • style tab > background > color
    • open the color window and just click on the + button to add that color to the Elementor color palette
    • repeat the operation for each individual color you want to add
  4. MAKE SURE you click on the Apply button in the top left corner of the window in order for the changes to be taken into account
  5. Save the page and go back to the WordPress Dashboard
  6. If you experience bugs, see the Troubleshooting section at the end of the documentation on this page
  1. Make sure there is no other Elementor page being edited
  2. In Wp > Pages > Style Guide, click on Edit with Elementor
  3. In the top left corner of the window, click on the hamburger icon then click on Color Palette
  4. Then, just select each desired color from the color picker
  1. In Wp > Templates > Theme Builder > edit Header – 01 with Elementor
  2. If you want to use a different header, go to Wp > Pages > Blocks > Block | Header and click on Edit with Elementor, then copy and paste the desired header to the Header-01 template from step 1 (don’t forget to set the conditions)
  3. If you want to use the header already present in the Header-01 template, just re-confirm the display conditions by clicking on the little arrow to the right of the Update button (bottom left corner of the window), and click on save and close
  1. In Wp > Templates > Theme Builder > edit Footer – 01 with Elementor
  2. If you want to use a different footer, go to Wp > Pages > Blocks > Block | Footer and click on Edit with Elementor, then copy and paste the desired footer to the Footer-01 template from step 1 (don’t forget to set the conditions)
  3. If you want to use the footer already present in the Header-01 template, just re-confirm the display conditions by clicking on the little arrow to the right of the Update button (bottom left corner of the window), and click on save and close

Walktrough

  • WireMentor Elements are for the most part pre-styled Elementor Widgets
  • Some Elements, however, are marked as [ Sim ]: those are simulation of existing widgets, they can be simulated with another widget, several widgets, images, or the combination of those.
  • Example: the Post Comments widgets is composed of 1 Form plugin and several Testimonial plugins, in order to be able to simulate comments, even if there is none in the WordPress install
  • WireMentor Blocks are pre-styled responsive Elementor Sections that can be used “as is”
  • Blocks are made of WireMentor Elements
  • Blocks usually come in light and dark backgrounds variations
  • WireMentor Layouts are pre-styled Elementor Layouts that can be used to quickly map a website prototype
  • Some Layouts, are marked as [ Sim ]: those are simulation of functional features
  • Example: the My Account layout is composed of 1 Tabs Element in order to simulate the My Account page that would be generated from a plugin such as WooCommerce or Easy Digital Downloads. The benefit is that while creating the wireframes / prototype, you don’t need to install & setup WooCommerce and other similar plugins. You can just focus on drafting a prototype without the technical hassle.

Header

  • WireMentor comes with various header Elements, that you can find in Elements > Header.
  • You can then copy & paste the desired header Element to Wp > Templates > Theme Builder > Header – 01.

Footer

  • WireMentor comes with various footer Elements, that you can find in Elements > Footer.
  • You can then copy & paste the desired footer Element to Wp > Templates > Theme Builder > Footer – 01.

Archive

  • WireMentor comes with archives in Wp > Templates > Theme Builder > Archive

Popups

  • WireMentor comes with various Popups in Wp > Templates > Popups
    • Popup: Site Nav is the default demo site navigation
    • Popup: Fullscreen Navigation 01 is a fullscreen navigation template
    • Popup: One Page Navigation 01 is a fullscreen navigation template for the One Page WireMentor Layout

How to use WireMentor?

On the demo site install (or on Wirementor.com), on each WireMentor Element / Block / Layout page, just scroll to the bottom of the page where you will find a section title “Documentation” with:

  • usage instructions
  • custom css location if any
  • additional information

Updates

Best practice

  • WireMentor is meant as a powerful tool to kickstart any Elementor Pro based website design process.
  • Therefore, we recommend installing the latest version to a fresh install.
  • You may just re-import the WireMentor import file on an existing website, but you may lose all existing content!

If you really need to import a specific new Element / Block  /Layout to an existing install:

  • don’t update the original install (intall A)
  • create a fresh new separate install (install B) and install the latest version of WireMentor
  • in install B: export the required page that contains the desired Element / Block  /Layout 
  • in install A: import the page exported in the previous step
  • copy, paste and edit the newly imported items

Troubleshooting

  • in Wp > Appearance > Customizer > Additional Css, add the following code
  • a {color: #0045E8;}
  • click Publish

There seems to be a bug in version 2.8.3 of Elementor. In the meantime, to solve to problem:

  • drag the color picker to any color
  • select the color code in the field below with CMD+A (Mac) or CTRL+A (PC)
  • delete the whole code
  • start typing the desired color code, starting with #
  • Elementor will start adding more numbers to the color code
  • just delete each unwanted character with your keyboard
  • then your color should be set

Painful, but many people are reporting this issue so hopefully it gets resolved soon!

Pages width

In Wp > Appearance > Customize > General Options > General Settings:

  • Layout Style: wide
  • Content width: 100
  • Sidebar width: 0
  • Layout: 100% full width

Remove top bar

In Wp > Appearance > Customize > Top Bar> General:

  • disable top bar

Remove Page Header globally

In Wp > Appearance > Customize > General Options > Page Title:

  • set the style to “Hidden”.

Remove the 1px border below the header

In Wp > Appearance > Customize > Header > General:

  • un-tick the option “Header Border Bottom

Change link colors globally

In Wp > Appearance > Customize > General Options > General Settings:

  • select the desired link and hover link colors with the color picker or color code

Nous utilisons des cookies pour vous offrir la meilleure expérience en ligne. En acceptant, vous acceptez l'utilisation de cookies conformément à notre politique de confidentialité des cookies.

Privacy Settings saved!
Paramètres de confidentialité

Lorsque vous visitez un site Web, il peut stocker ou récupérer des informations sur votre navigateur, principalement sous la forme de cookies. Contrôlez vos services de cookies personnels ici.

Cookies essentiels à la navigation sur le site.

Cookies essentiels à la navigation sur ce site web.

Refuser tous les services
Accepter tous les services
Retour haut de page