Adaptation of Photoshop layout to Weblium

Project Title:
Adaptation of Photoshop mockup to Weblium with elimination of critical platform limitations
Description:
A full cycle of creating a WEB page in Weblium environment based on a design mockup from Adobe Photoshop has been implemented. During the process, a number of issues related to hiding part of the content due to platform restrictions were identified.
Challenges:
- Inaccessibility of certain DOM elements after publishing
- Inability to directly edit CSS/JS code in Weblium
- Overflow and height restrictions of blocks that hid content
Solutions:
- Conducted a complete inspection of DOM and styles
- Developed a JavaScript script that:
– Dynamically updates the height of blocks
– Makes hidden elements visible
– Works independently through a Weblium functional block
Format:
Page created with a focus on mobile devices as the key user interaction platform.
Adaptation for desktop devices is possible with project expansion.
Potential expansion — Countdown timer:
It was planned to implement a dynamic countdown timer that works without page reload and updates the DOM in real time.
Currently, the integration is paused at the client’s request, but the technical solution is fully prepared for launch.
Timer functions include:
– Countdown to an event or date
– Responsive DOM updates
– Styling according to the design
– Optimization for mobile devices
Result:
- Stable operation of the page on all mobile devices
- Full compliance with the visual mockup
- All elements accessible, content not hidden
My role:
Analysis, programming, testing, integration — full implementation cycle