Completed the work on transferring the layout and content of the site from the Tilda platform to the CMS WordPress.

Site: https://omaldivah.ru/

More about the project

The company Lux Islands is engaged in the organization of premium-class tours in the Maldives. The original website of the company was created on the Tilda platform in the form of a landing page. Due to the peculiarities of the platform, it is overloaded and took a very long time to load. It was necessary to transfer the site design and content to WordPress CMS, create a hotel directory and improve the speed indicators compared to the original.

My role in the project

  • layout by sample
  • creating a valid WordPress theme
  • creating a hotel directory plugin
  • installing and configuring the plugin on hosting
  • content transfer

Layout

The layout project is create in Gulp.js. Styles are written in SASS preprocessor (SCSS syntax), html-code is in PUG preprocessor (Jade). Project files are divided into logical modules according to their role on the site, which makes the layout easy to expand.

The layout of the site is responsive, well displayed on mobile devices and desktops. The site is designed as a landing page. Additionally, templates have been created for permanent pages / posts and a block.

The HTML code is completely valid and has no errors or warnings.

W3C Validator Analysis Results
W3C Validator Analysis Results

Theme

The theme is integrated according to all the rules of the wordpress code. The integration did not use third-party plugins or builders. All theme customization is done through the WordPress Customizer API. For some blocks of the main page, non-standard controls are written. Live preview works, that is, when you change the settings, the page preview area is automatically refreshed.

The main focus was on download speed while maintaining code validity and extensibility.

On the original site, all hotels were loaded into the home page along with content and additional fields. The customer wanted nothing visually to change for the customer. Therefore, in order to maintain good speed indicators, hotels are loaded in “portions” of 5 units only during browsing using AJAX.

“Hotels” are loaded from the directory of the site console. Hotel description and additional fields in the form of videos, galleries are loaded only when you click on the corresponding links and open in modal windows.

Plugin

The plugin is built by analogy with the WordPress Plugin Boilerplate template and adds a hotel directory in the form of a non-standard “Hotel” post type.

“Hotel” is a non-hierarchical non-public custom post type. In the plugin settings, the ability to make “Hotels” public, add to the sitemap and also create custom templates for the public part of the site is implemented.

Additional fields of the “Hotel”:

  • short description similar to product description in WooCommerce
  • price
  • living conditions (tour)
  • gallery
  • YouTube video link with detailed description
  • advantages of living as a list
  • Benefits section heading
  • link to the page (anchor) with the ability to order a call back

Screenshots

Screenshot of the main page of the Lux Islands website
51vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x