Akvapark Zatoka — Umsetzung der Resort-Website auf Basis eines Figma-Designs
Pixelgenaue Umsetzung mit Elementor sowie weitere Optimierungen und technischer Support
Rolle: Frontend-Umsetzung, technische Realisierung des Designs und beratende Unterstützung · Jahr: 2025 · Stack: WordPress, Astra Pro, Elementor
Mehrseitige Resort-Website, entwickelt auf Basis von Figma mit präziser Umsetzung in Elementor und fortlaufender technischer Unterstützung
Jahr: 2025
Projekttyp: Frontend-Umsetzung in Elementor auf Basis eines individuellen Figma-Layouts
Plattform: WordPress
Stack: Astra Pro / Elementor
{/}
Über den Kunden
Akvapark Zatoka ist ein Resortkomplex am Meer, gelegen an der Schwarzmeerküste in der Region Odesa, Ukraine. Das Projekt kombiniert Hotelunterkünfte mit einem integrierten Wasserpark und bietet den Gästen ein umfassendes Sommererlebnis mit Unterhaltungseinrichtungen, Gastronomieangeboten und zusätzlichen Annehmlichkeiten.
Desktop · Akvapark Zatoka Hotel
Die Hotelseite bietet eine klare Übersicht über die Unterkunftsmöglichkeiten und beginnt mit einem Hero-Bereich, der einen informativen Video-Hintergrund mit einem integrierten Buchungsmodul kombiniert. Die Seite präsentiert die Zimmerkategorien in strukturierten, sliderbasierten Vorschauen, sodass Besucher die verfügbaren Optionen in einem intuitiven Format erkunden können.
Ein besonderes technisches Merkmal ist der verschachtelte Karussellblock im unteren Seitenbereich, bei dem mehrere unabhängige Slider innerhalb eines übergeordneten Karussells eingebettet sind und dabei ihre vollständige Funktionalität und Interaktionslogik beibehalten. Dies erforderte eine sorgfältige Synchronisierung des Karussellverhaltens sowie eine präzise Umsetzung in Elementor.
Mobile · Akvapark Zatoka Hotel
{?}
Projektübersicht
Die Website wurde von einem externen Auftragnehmer entwickelt, der mich als Subunternehmer mit der Umsetzung der Seitenlayouts in Elementor beauftragte.
Ein fertiges Figma-Design wurde vom Hauptauftragnehmer bereitgestellt.
Alle Seiten wurden gemäß dem Design umgesetzt, wobei eine präzise Reproduktion der Layoutstruktur, Abstände, Proportionen und der gesamten Blocklogik sichergestellt wurde.
Wie häufig der Fall ist, waren nach der ersten Live-Umsetzung einige Anpassungen erforderlich — das visuelle Verhalten in Figma und auf einer Live-Website ist nie vollständig identisch. Alle angeforderten Änderungen wurden gemäß den freigegebenen Spezifikationen umgesetzt.
{#}
Technische Besonderheiten
- Das lizenzierte Astra Pro Theme mit den erforderlichen Plugins wurde bereitgestellt und verwendet.
- Die Umsetzung erfolgte in Elementor ohne den Einsatz umfangreicher Drittanbieter-Builder-Erweiterungen.
- Eine nicht standardmäßige verschachtelte Karussellstruktur wurde implementiert: Innerhalb eines primären Karussells wurden zusätzliche, vollständig funktionale Karussells eingebettet.
Dies erforderte eine sorgfältige Handhabung des JavaScript-Verhaltens sowie eine präzise Synchronisierung zwischen den Komponenten.
Fortlaufende Zusammenarbeit
Nach Abschluss der primären Umsetzung wurde dem Hauptauftragnehmer zusätzliche Unterstützung bereitgestellt, einschließlich:
- Beratung zur Konfiguration des Astra-Themes und der zugehörigen Plugins
- Mitwirkung an der Erstellung von Header und Footer
- Technische Unterstützung beim Start einer zweiten Sprachversion
- Umsetzung ausgewählter zusätzlicher Elemente
Die weitere Entwicklung wurde größtenteils eigenständig vom Hauptauftragnehmer durchgeführt, wobei bei Bedarf beratende Unterstützung bereitgestellt wurde.
Bereitstellung
Die Website wurde direkt in der Hosting-Umgebung des Kunden entwickelt:
- Zunächst auf einer temporären technischen Domain
- Anschließend auf die permanente Produktionsdomain migriert
Bei Bedarf wird weiterhin beratende Unterstützung bereitgestellt.
{!}
Nachweis der Zusammenarbeit
Das Projekt wurde über Freelancehunt umgesetzt.
Unten finden Sie eine echte Kundenbewertung, die weiterhin auf der Plattform verfügbar ist.
{*}
<Kontakt>
…Wenn Sie ein Projekt besprechen, Anforderungen klären oder eine mögliche Zusammenarbeit erkunden möchten, finden Sie alle Kontaktdaten auf der Kontaktseite.