Introduction
In February 2020 I started work at the digital agency Digital Launch in Ho Chi Minh City, Vietnam. As my first assignment, I would be creating a website for the newly founded gin-brand Saigon Baigur. The brand would be introducing the first locally made gin in Vietnam.
The design
I was in charge of developing the full front-end for this amazing website. The design was provided by the client.
It was the first time for me to work with a design from Adobe Photoshop instead of dedicated design software like Adobe XD or Sketch. The client provided 2 designs, one for mobile and one for desktop, below a screenshot of the desktop design.
It was the first time for me to work with a design from Adobe Photoshop instead of dedicated design software like Adobe XD or Sketch.
The front-end
The website was quite a challenge for me as the website was to be “pixel-perfect”. The design was made on a 1920px Photoshop canvas. This created some challenges for responsive development for the website.
I specialize in using responsive CSS code. For this project, I had to reverse this direction in order to make a “pixel-perfect” front-end.
The company where I did this assignment for, Digital Launch, is a mainly WordPress based agency. For this website, I used their usual stack for creating WordPress websites. These tools include Astra and the Elementor page builder.
Elementor + custom made design
Saigon Baigur was the first website where I would be pushing the limits of Elementor. In order to make this website “pixel-perfect” from the design, I added countless extra code. Mostly CSS for the aesthetics but also PHP code for extra functionality.
Client editable backend
The website had some functionality that would be edited quite frequently by the client. These were mainly these three sections:
1. The ingredients carousel This carousel would feature all the ingredients in the gin. This would include a title, a description, and an icon.
2. The cocktail section A gin website is no gin website without a cocktail recipe section! This was the most challenging section for me as it would include a title, image, description, ingredients list, and directions to make the cocktail.
3. Where to buy At the bottom of the website, there would be a little section with some logo’s of places where the gin would be available to buy
As an agency, we want to client to be able to edit their website easily themselves. For customers that do not have any background in Webdesign, editing data in an Elementor carousel for example can be a big challenge. I would be integrating advanced WordPress functionality in order for the client to be able to easily edit the website in the standard WordPress interface.
Adding WordPress PHP code in Elementor
Elementor is a page builder not made for custom functionality. To add custom PHP code to Elementor, the easiest way is to write a custom PHP shortcode and add that to the front-end Elementor builder.
First of all, I added new “Custom Post Types” to WordPress for all the three custom sections. Then I used ACF (Advanced Custom Fields) for extra “meta boxes” below each post section. See the screenshot below for an example:
After that, I wrote a function that would “loop” through all posts in each post type. I added each post type in a slider with the addition of the Swiper Slider library to the website. This would make the slider easily customizable according to the design. It would also work perfectly on mobile.
Conclusion
After dealing with several challenges I am very happy with the end result of this website. The client is satisfied with the end result. I learned a lot from working on this project.