In the impression, wuyuan development platform is only suitable for strengthening business logic and heavy structured information management system, in fact, just a little configuration, can also achieve a variety of sites focusing on the front-end display, such as the government website shown below:

[Example 1 government Website]

  • Address: sample preview previewer. Wuyuan. IO/proj / 25011 #…
  • The sample configuration address: workbench. Wuyuan. IO/proj / 25011 #…

If you think the above site structure is pretty neat, look at this example:

[Example 2 SAAS start-up website landing page]

Can you see what components these pages use?

  • Address: sample preview previewer. Wuyuan. IO/proj / 25011 #…
  • The sample configuration address: workbench. Wuyuan. IO/proj / 25011 #…

Basically, the display page, just need to use a background window as the base, on which to place a variety of functional window components can be quickly implemented.

Implementation steps

1. On the Workbench > Global Configuration > System Settings page, enable the visitor mode.

After this function is enabled, users can access the PC main window without logging in and browse public and unauthorized menu nodes.

2. Choose Workbench > Global Configuration > Front End > Home Settings > Menu Navigation, set the menu style to Cascading, and set a proper width based on the number of menu nodes.

3. On the Workbench > Page Management page, create a home page, add a window, and set the layout accordingly.

How’s that？ Is the procedure simple? Did you really learn?

Can you tell which pages are background and which are components?

[Example 3 Landing page]

  • Address: sample preview previewer. Wuyuan. IO/proj / 25011 #…
  • The sample configuration address: workbench. Wuyuan. IO/proj / 25011 #…

Looking at this, there may be a little question: how is the menu at the top connected with the background as a whole?

How to realize the background window and top menu connected home page

First, add the following CSS code to the custom window style used as the background on the home page:

.adapt-to-home .bg-mask {
    background:#e8eaef ! important;
}
.adapt-to-home  #header {
    position: absolute ! important;
    left:0;
    top:0;
    z-index: 123;
    transition: all .3s ease-in-out;
}
.adapt-to-home.set-top #header {
    border:none;
    background:none;
}
.adapt-to-home.set-top #header a{}.adapt-to-home.set-top #navigator {
    background:none;
}
.adapt-to-home.set-top #navigator a{}.adapt-to-home.set-top #navigator .ui-widget-content {
    background:none;
    border: none;
}
.adapt-to-home.set-top #navigator .ui-widget-content a{}.adapt-to-home #container {
    height: 100% ! important;
}
.adapt-to-home #bottom {
    position:fixed;
    display:none;
}
.adapt-to-home .zpage {
    height: 100%;
}
Copy the code

Enable Global configuration – Front-end – Page open functions and add the following code:

function(Enhancer, e) {
    if (e.pageId == 100) { // Use styles only if the currently opened page is the home page. ! Please modify the home page number!
        $('body').addClass('adapt-to-home set-top');
        return
    }
    // Otherwise remove styles when other pages open to avoid misuse.
    $('body').removeClass('adapt-to-home set-top');
}
Copy the code

How’s that？ Do you feel the urge to start your own business? 23333

If you find it useful, please do not hesitate to praise ~~~