PageBuilder - Mercator Page Builder
PageBuilder is a plugin for WinterCMS, which allows end users to assemble web pages from a number of pre-defined components. The current PageBuilder uses GetUIKit, which can be quite a welcome differnce from all those websites made with Bootstrap.
All is done on Static Pages by selecting the element you want and filling in the necessary information. For example, for a Lightbox, it looks as follows:
The current version includes - amongst standard elements such as full text (rich text or markdown) - the following elements:
Maps
Chose the address, hight and map type (roadmap, satellite or hybrid).
Contact Page
-
- Paradeplatz 1, 8001 Zürich, Switzerland
- +41 44 123456789
- info@somewhere.com
- https://zurich.ch
Thank you for getting in touch - your message is on its way!
Your message is incomplete or could not be sent. Please, try again.
Lightbox, Slideshow and Slider
Compile a lightbox, slideshow or slider from images located in one or more directories.
Click on image to image to start slideshow. You can choose the thumbnail sizes, limited the number of images to include, if you want to randomise the images.
Masonry
Create a masonry from images in one or more directories. The number of columns can be varied by screen size. If you are on a mobile device, rotate it. Or resize the window on a desktop.
Grid
This is a column-based view of the world.
With images...
And some Markdown...
... text for you to look at.
Auto Columns
If you have lots of text, you might want to spread it across multiple columns on bigger screens For example.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse.
Popup
If there is something important, use a popup. You will only see it every X minutes (5 minutes in this case). Neat, right?
You can even add images - or any other rich editor component.
And there is more, such as
- Timelines
- Résumé
- Cards
- Plain HTML
- Code
All elements are fully responsive and can often be configured based on the device size. PageBuilder has a string focus on the handling of images (galleries and alike) as I am a pationate photographer.
Adding new elements is easy:
- Add the required information to a YAML
- Create a partial to render the data
- Nothing more
For an additional example how such a website could look like, see mercator dot li, though not all elements are visible.