weebly theme fullsite

Summary

This is a custom theme I have built for Weebly. It has fairly complex design and is integrated with the Weebly editor. As a free hosting platform, Weebly offers the best of both worlds since it has both an easy to use drag-and-drop UI and access to code, for further customisation.

weebly theme wireframe
Wireframe

The wireframe for this design was built using Xd. It is one of the more complicated designs I have done and tested my design skills. I ended up using the bootstrap placeholder graphic as part of the design, since it looked good after I added in a globe icon. I was also trying out some 3D-effects in this design. This was achieved by blending the nav bar into the hero image and by creating an overlay effect with the middle banner.

weebly theme site wrapper
Site Wrapper

In a Weebly site you must first create a site wrapper, which is mainly html + css / less. The wrapper contains the top and bottom navigation for the site, with space in the middle for content. My custom wrapper is based off of the default Weebly one and uses moustache tags to access data from the Weebly database e.g. logo, navigation, content.

Additionally, to enable full-functionality in the Weebly Editor, the theme manifest.json needed to be modified. This was to allow the wrapper access to important Weebly variables. This meant the wrapper could be customised using html + css while still allowing drag and drop content to appear inside of it.

weebly theme extracss
Adding Extra CSS

The top-section of this design (the 5 cards arranged in an uneven grid) required a lot of custom code to look right and scale properly. This was mainly because the design was relatively complex and outside of the scope of the Weebly editor (which only uses html tables).

To get around this, I wrote some JQuery script which added extra html IDs to the rows of the table. Using these IDs I could redesign the rows how I liked using css. This gave me the extra functionality I needed without affecting the Editor. (Since this fix uses javascript, it runs on the client-end, which is after the page has been processed by Weebly/the editor).

Animations / Effects

  • -Link hover effects
  • -Sticky top nav
  • -Scroll-to-top button
  • -Image hover effects
  • -Button click

Resources