Graphic design is ubiquitous in contemporary websites. The one-page structure nevertheless is among the popular web design developments. Those kind designs are frequently challenging to create, they ask for unique template format with lots of module positions in rows, and designers need to plainly express details whilst also gratifying aesthetic targets. The key notion in the One-Page format is predicated on this concept: hyperlinks really don't open up a fresh page; rather, each time a person clicks around the sub-menu hyperlinks the display jump down the web page to that exact content’s area. These designs are challenging as they are less structured and also have a broader variety of dimensions and element ratios. Aesthetics can also be important, as patterns need to usually be eye-catching and visually pleasing.

Many templates also custom-made can be utilized as One Webpage structure, not only those which have been created expressly for this goal. In general what might be surprising for you never even need any module position expect perhaps leading menu, all new positions you'll be able to produce utilizing only SP Page Builder and every Joomla! subpage can use different layout. In means that you'll be able to even use Protostar (default Joomla 3.4+ template) to produce beautiful and expanded layout. This Joomla! extension designed for you to definitely enable you to create your own personal a single subpage masterpiece with several modern trendy functions in-build. 1 of these is an smart responsive style that adjustments it's screen dependent on the dimension from the display your visitor is viewing your site with. What this means is that you simply only need a single design to operate within the multitude of devices: tablets, telephones, laptops and desktop screens that your customer could be viewing your site with.

  • Very first phase is nearly this exact same, you've got to put in SP Page Builder component (Basic or Professional version).
  • Inside of PB component click "New" button to make a brand new webpage check out. Input title, for instance "onepage". Now as an example you can set up template structure called "Full Width Layout" which can present you ways it works.



    While building PB we kept in mind User Experience and customizability. As a result it is easy to navigate and to customize appearance of used elements.
  • Every row has beneath "gear" icon settings also there you will find "Section ID" area - in which you can established the ID attribute for your specific factor. An ID ought to be distinctive in a webpage if you would like utilize it later on for OnePage functions. Knowing this you'll be able to very easily incorporate new rows with picked addons and use distinctive ID title for every of them, for instance: company-features, our-services, our-clients, address-map.

    A lot more usually, style needs creating many options, including colors, fonts, and pictures; we go away picking these variables to long term work.



    After it will allows you to use #company-features menu links in Menu Manager for your sub-menu module. Right now focus on adding different add-ons to your layout with real content if you have it.

  • Save new page layout, and go to Menu Manager -> New Menu Item -> Menu Item Type -> SP Page Builder -> Page and choose your created before layout, in my case it was "one-page".



    It means that under this menu item you will have page which you created in SP Page Builder few moments ago.
  • Now using # before ID name you can add menu lub sub-menu links. Don't forget that they are only local links in single page view.

Bear in mind, our element provides only basic designs - therefore if you will need a lot more polished and beautiful last end result you've got to make use of your own personal css designs and class'es in rows.

The single webpage web design can be a great solution for presenting certain product (new mobile application) or services (repair laptops, car, motorbikes and so on.). You should use it as being a multi page website or benefit from the 1 web page framework - all around you.