- Web Development, WordPress
- 13 min
Creating WordPress Dropdown Menus: A Guide for Everyone
It's hard to imagine a website without dropdowns. It you want to learn how to create and add dropdown menus in WordPress, this post will teach you.
Over the years, we have served clients from almost every industry you can name, including construction, medicine, showbiz, finance, automobile, education, and many more. In this post, we want to share a success story from yet another industry: boat rentals.
It showcases our ability to create beautiful, engaging digital experiences that can easily convert visitors into loyal customers.
Let’s get going!
The Client
Dinghy Daily Charter is dedicated to creating unforgettable maritime experiences around Gdańsk. Specializing in tailored adventures, they ensure each journey reflects the unique interests of their clients.
Whether it’s uncovering hidden gems or enjoying the picturesque Baltic sunsets, Dinghy Daily Charter provides a seamless service from booking to docking, making luxury and comfort a given on their modern fleet.
The Challenge
Dinghy Daily Charter turned to us for assistance with a WordPress project that they were developing – a mobile-first site for a boat charter business that included several iFrame elements.
They didn’t ask us to use any front-end frameworks such as Bootstrap, only the basic web technologies: HTML, CSS, SCSS, and WordPress.
The client also wanted us to make the website more engaging by creating some JavaScript-powered animations.
Dinghy Daily Charter provided us with the designs of the following pages and popups:
Pages
- Homepage
- Cruise Details
- Summary
- Additional Services
Popups
- Terms & Conditions
- Cookies
- Privacy Policy
After sorting out the technical and financial details, our expert WordPress team, made up of a full-stack developer, a QA engineer, and a dedicated project manager, set out to turn Dinghy Daily Charter’s vision into a beautiful and functional website.
The Solution
As requested by the client, we started the development from the mobile version – a crucial factor from an online visibility standpoint, especially for a company involved in a rental business. Here are the most notable features and effects that we created page by page.
Homepage
Hero Section with a Background Video
First, we added an engaging, professionally shot background video with the company’s slogan atop to the hero section. This is probably the most standout feature, visually presenting Dinghy Daily Charter’s offering.
Find Perfect Trip for you Section
The most labor and time-consuming part of the Homepage that we developed was the Find perfect trip for you section. It includes two tabs implemented through iFrames: Rent a boat and Join a trip.
The Rent a boat tab features three subsections:
- Adventure. This contains several cards with information about boat trips for adventurous clients available on future dates. Each card includes the name of the boat, the price, the maximum number of people who can take the trip, and a link to Additional services. Clicking on a card takes you to the corresponding Cruise Details page.
- Leisure. This section is almost identical to the Adventure section, except that it includes cards with details about trips for leisure-loving clients available on future dates.
- Watertaxi. This contains information about water taxis to get to a specific destination in the area by sea quickly on a future date. If there are no offers at the moment, the section displays a subscription form.
Notice the fade-in/fade-out animation when switching from section to section that we created using JavaScript. Also see the currently selected section icon turn blue.
When the company has no offers for either of the sections within the tab, the corresponding section displays a subscription form.
The Join a trip tab includes two subsections:
- Sightseeing, containing information about currently available sightseeing trips with vacant seats. The cards in this section look identical to those in the Rent a boat tab.
- Watertaxi. This contains information about vacant seats on currently available water taxi trips. If there are no offers at the moment, the section displays a subscription form.
Our Philosophy Section with Per-Character Heading Animation
Our Philosophy section is nothing but text, but we made it more engaging by animating the heading – one letter at a time.
Extra Services and Reviews Carousels
We also created the Extra Services carousel on the Homepage. It contains several cards with identical information, representing the additional services Dinghy Daily Charter provides: a photo, the name of the service, a short description, and a Read more link. Users can slide through the carousel by clicking the arrow buttons under the cards.
Clicking a card takes you to the corresponding Additional Services page, where you can find more details about the service.
Apart from the Extra Services carousel, we created the Reviews carousel. Users can scroll through it by clicking the arrow buttons to the right and left of the reviews.
FAQ Accordions
Finally, we added the FAQ section with accordion-style questions and answers that open and close smoothly.
Cruise Details
The Cruise Details page contains comprehensive information about a specific cruise, including its name, price, starting place, trip time, maximum number of passengers, additional services, and a detailed description.
We also added a booking system here. It’s an external service built-in with two iFrames. The first one is on the page. It contains a datepicker along with BOOK NOW and BUY GIFT CARD buttons. Clicking on either of those opens the cruise Summary popup with the booking details, which is the second iFrame.
Additional Services
Each additional service page contains the details about the respective service plus the Extra Services carousel for users to view the other services the company offers. Besides, there are breadcrumbs at the top of the page for switching to the Homepage easily.
Website-Wide Features
We also created several site-wide functionalities accessible from any page.
Header
First, it’s a website header with a navigation bar. It’s quite straightforward, but notice the animated Book Now button. When you hover over it, the icon disappears and the button becomes transparent. Once you move the cursor away, the initial state is restored.
The footer is displayed across the site, too. It contains links to the pages and sections of the website. Once you click a link, you’re taken to the corresponding page or section with a smooth scrolling effect.
The last two links Privacy Policy and Terms & Conditions open the respective popups.
The Outcome
While the website is quite straightforward, it did require some minor fixes the client requested. Overall, though, Dinghy Daily Charter was fully content with our outstanding performance, excellent communication flow, and meticulous attention to detail.
As usual, we made sure the website followed the WAI A guidelines so that it could be easy to use and navigate by people with disabilities. Another thing worth noting is that we completed the project exactly by the deadline we agreed upon with the client: 16 business days.
To sum up, Dinghy Daily Charter now has a mobile-first, responsive, engaging, and accessible website that boosts the company’s chances of converting more visitors into clients and increasing revenue. And all that thanks to our skillful WordPress developers who always put the client’s needs front and center.
Want to be our next happy client? Let’s get in touch!
