Documentation

Documentation

Introduction

Wirementor Demo Setup

01:02 – 1. Setting up the pre-requisites

02:04 – 2. Installing the demo

05:31 – 3. Finishing the install

Other parts

06:39 – Using Hello or Ocean WP Theme

08:21 – Tips to speed up Wirementor install process

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, 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 Demo Setup

  1. IMPORTANT: DO NOT INSTALL ON A WEBSITE WITH CONTENT! Everything will be wiped out!!!!
  2. Make sure your permalinks are set to %postname%
  3. Install & activate Elementor and Elementor Pro

Unzip the purchased zip package, then:

  1. Install & activate the Wirementor Child Theme in Appearance > Themes (you can install other themes like Hello, or Ocean WP later in the process)
  2. You will be prompted to begin installing 2 plugins: install both then go back to the WP Dashboard, you will then see a new menu item W Demo Manager in the left wp admin navigation, click on it
  3. Click on the “Wirementor Library” tab, then click on Install for the selected demo. Do NOT refresh the page during the import process. This may take a moment.
  4. Next: click on the Installed tab, and activate the demo you just installed: you will automatically be logged out, just log back with the credentials you have received in your account dashboard (on Kaycinho.com)
  5. You will be prompted to immediately change your password. Proceed.
  1. In Wp, go to Elementor > Tools > Replace URL

    • in the old url field, paste https://demo.wirementor.com/
    • in the new url field, paste your new url (with the ending forward slash). Examplehttps://yourwebsite.com/
  2. Activate the Astra theme, and delete the Wirementor Child Theme

  3. Delete the plugins:
    • WordPress Demo Manager
    • Force Password Change

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. Save the page and go back to the WordPress Dashboard
  5. 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
  5. 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
  6. Then click on update to update the page.
  7.  
  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: GDPR Cookie Popup is a simulation of a GDPR cookie Popup
    • Popup: GDPR Privacy Settings is a simulation of a GDPR Privacy Settings Popup
    • 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

Updating Wirementor

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

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

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!

Change log

2020-04-06

New features

  • New Install Procedure!
  • New GDPR [Sim] features!
    • Layout: GRPR Privacy Center [Sim]
    • Layout: GDPR Page Type 1 [Sim]
    • Layout: GDPR Page Type 2 [Sim]
    • Layout: GDPR Page Type 3 [Sim]
    • Popup: Cookie [Sim]
    • PopupPrivacy Setting [Sim]
  • header blocks are now divided in:
    • Header: using a nav menu widget for desktop navigation, linked to the menu Header Navigation in Wp > Appearance > Menus
    • Header [Sim]: using an icon list to simulate desktop navigation
  • all headers blocks now use the Header element
  • all footer blocks now use the Header element

Enhancements

  • all header logos now link to the site URL
  • Woo [Sim] pages are now linked: i.e. button on the shop archive layout takes you to the single product layout, etc.

2020-01-21

Bugs fixing

  • mobile nav Block | Header 05 in mobile landscape mode
  • mobile nav Block | Header 06 in mobile landscape mode
  • login page in mobile landscape mode

Footer

  • increased the Wirementor “W” demo trigger in the footer from 30px to 35px

2020-01-15

Pages

  • all Wirementor pages now have the prefix “ZZZ – “
  • this allows to quickly select all pages starting by ZZZ, and easily delete them, once your project is complete
  • it’s also much easier to see the actual pages of the site you’re trying to build in the Wp back-office, since all Wirementor pages will be last on the list

Always on screen demo menu

  • a Wirementor “W” logo in the footer links to the Wirementor Demo Menu
  • this helps you always access the Wirementor demo menu, while you are building your project, even if you change the header
  • to de-activate, edit the header with the theme builder

2020-01-15

  • changes in the documentation

2020-01-15

  • Version 1.00 released! We’re live baby!

We use cookie to offer you a better online experience and to serve our potential customers better. By accepting, you are accepting our use of cookies according to our privacy policy.

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 that are essential to be able to navigate this website.

Decline all Services
Accept all Services
Edit the icon list widget below or swap by a nav menu widget