Layout of the template dentalkids.com.ua
Performance requirements for the template (lighthouse/pagespeed):
All 4 scores (LCP, INP, CLS, FCP) for mobile and desktop versions must be in the range of 80-100. A decrease to 70 is acceptable in some cases.
Main requirements:
- Preloading of styles, fonts, and the main image is required using the preload tag. External resources should use the dns-prefetch and preconnect tags.
- The size of images must be minimal. It is recommended to use SVG/WEBP. The lazyload attribute must be added for all images except those that are on the first screen.
- Critical css/js must be moved to the head tag to speed up loading.
Additional requirements:
- Use as little js as possible. It is recommended to implement basic elements using CSS.
- Minimize layout shifts during loading.
Project Brief – Layout for dentalkids.com.ua
It is necessary to create a responsive theme for WordPress based on the designs from Figma without using builders and/or third-party paid templates.
Goal:
- to change the current theme, making the website design light and welcoming
- to move away from creating layouts and content using the Divi builder
- to use the Gutenberg editor for content creation
- to make the website fast and compliant with Core Web Vitals standards
Optimization of all main images of the template is required (except for content images).
All text content should not be static but editable. Hardcoding text in the theme is unacceptable.
Most blocks should be customizable and editable using the Gutenberg editor.
Priority is given to the mobile version, as 80% of traffic comes from mobile users.
Browsers: Chrome, Safari, Samsung Internet browser (Opera, Firefox)
OS: Android, iOS, Windows (MacOS, Linux)
Technical specifications of the site:
- WordPress 6.7
- Editor - Gutenberg
- Multilingual - Polylang plugin, site versions - Ukrainian and Russian. Translation of all dynamic elements (popup, forms, custom blocks, etc.) must be implemented through Polylang.
- Popup - Popup maker plugin, replacement is allowed without loss of functionality
- Forms - Forminator plugin, replacement is allowed without loss of functionality
- SEO - Yoast Seo
- page rating (stars) - kk Star Ratings plugin, replacement is allowed without loss of functionality
- Current theme - Divi Builder, template engine. Part of the content is written in Divi, part of the content in Gutenberg. The content will be completely redone from Divi to Gutenberg. If possible, during the transition period, part of the content in Divi should work on the previous theme.
- Photo gallery – part of the Divi builder – needs to be replaced with a similar one without loss of functionality – carousel, lightbox, creation and placement of multiple albums on one page, captions for images.
List of pages for layout:
- Home
- Services section
- Service card
- Prices section
- Team section
- Team member card
- Photos section
- Contacts section
- Partners section
- Blog section
- Blog article
- FAQ section
List of modules for layout:
- price - custom module for displaying the price using shortcode, code is easy to replace
- popup - styles and layout from the Popup maker module
- binotel - integration of call-tracking in the code
- several custom functions of different purposes are moved to a separate file
Requirements for template performance metrics (lighthouse/pagespeed):
All 4 scores (LCP, INP, CLS, FCP) for mobile and desktop versions must be in the range of 80-100. A decrease to 70 is acceptable in some cases.
Main requirements:
- Preloading of styles, fonts, main image using the preload tag is necessary. External resources using the dns-prefetch, preconnect tags.
- Image sizes must be minimal. It is recommended to use SVG/WEBP. The lazyload attribute must be added for all images except those on the first screen.
- Critical css/js should be moved to the head tag to speed up loading.
Additional requirements:
- Use as little js as possible. It is recommended to implement basic elements using CSS.
- Minimize layout shifts during loading.
ТЗ – верстка шаблону dentalkids.com.ua
Необхідно створити адаптивну тему для Wordpress за макетами з Figma без використання білдерів і/або сторонніх платних шаблонів.
Мета:
- змінити поточну тему, зробити дизайн сайту легким та привітним
- відійти від створення верстки і контенту на шаблонізаторі Divi
- використовувати створення контенту редактор Gutenberg
- зробити сайт швидким та відповідним до стандартів Core Web Vitals
Необхідна оптимізація всіх основних зображень шаблону (окрім контентних).
Весь текстовий контент не повинен бути статичним, а має бути доступним для редагування. Хардкод для текстів теми неприпустимий.
Більшість блоків мають кастомізуватися та правити за допомогою редактора Gutenberg.
Пріоритет – мобільна версія, адже 80% трафіку – мобільні користувачі.
Браузери: Chrome, Safari, Samsung Internet browser (Opera, Firefox)
ОС: Android, iOS, Windows (MacOS, Linux)
Технічні характеристики сайту:
- WordPress 6.7
- Редактор - Gutenberg
- Мультимовність - плагін Polylang, версії сайту - українська та російська. Переведення всіх динамічних елементів (popup, форми, кастомні блоки тощо) має бути реалізовано через Polylang.
- Popup - плагін Popup maker, допускається заміна без втрати функціоналу
- Форми - плагін Forminator, допускається заміна без втрати функціоналу
- SEO - Yoast Seo
- рейтинг сторінок (зірки) - плагін kk Star Ratings, допускається заміна без втрати функціоналу
- Поточна тема - Divi Builder, шаблонізатор. Частина контенту написана в Divi, частина контенту в Gutenberg. Контент буде цілком перероблений з Divi на Gutenberg. Якщо можливо, для перехідного періоду щоб частина контенту на Divi працювала на попередній темі.
- Фотогалерея – у складі білдера Divi – необхідна заміна на подібну без втрати функціоналу – карусель, lightbox, створення та розміщення кількох альбомів у рамках однієї сторінки, підписи до зображень.
Перелік сторінок для верстки:
- Головна
- Розділ “Послуги”
- Картка послуги
- Розділ "Ціни"
- Розділ "Команда"
- Картка учасника команди
- Розділ "Фото"
- Розділ "Контакти"
- Розділ "Партнери"
- Розділ “Блог”
- Стаття блогу
- Розділ FAQ
Перелік модулів для верстки:
- прайс - самописний модуль для виведення прайсу за допомогою shortcode, код легко замінити
- popup - стилі та верстка з модуля Popup maker
- binotel - інтеграція call-tracking у коді
- кілька самописних функцій різного призначення винесено до окремого файлу
Вимоги до показників швидкодії шаблону (lighthouse/pagespeed):
Усі 4 оцінки (LCP, INP, CLS, FCP) для мобільної та десктопної версій повинні перебувати в діапазоні 80-100. Допустимо у деяких випадках зниження до 70.
Основні вимоги:
- Необхідне попереднє завантаження стилів, шрифтів, головної картинки за допомогою тега preload. Зовнішні ресурси за допомогою тега dns-prefetch, preconnect.
- Розмір зображень має бути мінімальним. Рекомендується використовувати SVG/WEBP. Необхідно додавати атрибут lazyload для всіх зображень, крім тих, що знаходяться на 1 екрані.
- Необхідно винести критичний css/js в тег head для прискорення завантаження.
Додаткові вимоги:
- По можливості використовувати якнайменше js. Рекомендується реалізувати основні елементи за допомогою CSS.
- Мінімізувати зміщення макету під час завантаження.
Applications 1
Client's review of cooperation with Anastasiya Pinchuk
Layout of the template dentalkids.com.uaSatisfied with the work.
In the end, we received a fast website with an updated design and working functionality, according to the specifications.
If needed, we will reach out again.
Freelancer's review of cooperation with Oleksandr Hch
Layout of the template dentalkids.com.uaInteresting project and good payment, it was a pleasure to work.
-
753 11 2 Good night, Oleksandr. I am ready to perform high-quality, adaptive layout of the designs with subsequent implementation on WordPress. I will create the theme from scratch, without unnecessary plugins and files, editing all content through the admin panel. Clean, valid W3C code, green zone on Page Speed (80-100). Stack: Html5, Css3, Scss, Flexbox, Grid Css, Js, jQuery, Bootstrap, WordPress, ACF, Carbon Fields, Custom Fields. I am ready to start after agreeing on the details and familiarizing myself with the layout. Feel free to contact me, I am happy to work on your project!
-
968 10 1 Hello. I have reviewed your technical specifications. I am ready to implement your project.
I will do the work with high quality, according to the provided technical assignment. The layout will be using HTML5, CSS3 with the involvement of Flexbox, CSS GRID. When laying out, I use the BEM methodology for building the HTML structure. Strictly adhering to the rules of validity, semantics, and modularity.
If necessary, I will draw/correct elements in vector format. I will adapt the background (raster) graphics to the required screen sizes.
The layout will be responsive and cross-browser compatible. The submitted code will be neat, logically thought out, and valid. There is a one-month warranty on my layout.
We can also discuss the cost of the project and all other details through private messages. Feel free to reach out. I guarantee that you will be satisfied with the quality and results of the work, as I am always focused on the best outcome.
My projects:
Digital agency Kronix: https://digatal-agency-kronix.netlify.app/
Delizioso: https://delizioso-online-store.netlify.app/
… Sonic Logistic site: https://sonic-logistic.netlify.app/
PetZen: https://petzen.netlify.app/
Pixelmagnet DMW: https://pixelmagnet-dmw.netlify.app/
Coffee Shop: https://coffee-shop-magazine.netlify.app/
Frontend developer landing: https://frontend-developer-landing.netlify.app/
Pages: https://pages-books.netlify.app/
Realco: https://realco-realestate.netlify.app/
Plato: https://plato-energy.netlify.app/
Developer expert: https://developer-expert.netlify.app/
WavesCo: https://sound-effect-library.netlify.app/
Frontend topics: https://frontend-topics.netlify.app/
-
1690 161 1 9 Good day! I will complete your task quickly and efficiently.
I have been working with WordPress for over 8 years, I will create your site without unnecessary plugins! No builders that slow down loading speed - only clean code!
Reviews ->Freelancehunt
-
643 4 0 Good day, I reviewed your technical specifications for the website development, the tasks are set clearly and distinctly, the main task is the performance and loading speed of the website.
I have been working with WordPress for over 4 years, I do not use builders or ready-made templates for development, only a custom theme, as well as a minimal number of plugins that guarantee the speed of the website.
You did not provide the design of your website, so it is difficult for me to estimate the development timeline, please send a link to Figma in private messages after which I will be able to give you the timeline for the implementation of your project.
-
481 6 0 Good evening, Oleksandr, I am ready to perform the layout of the template according to the example, I code with clean code in HTML, CSS, SCSS, adding JS functionality, I layout responsively, cross-browser, valid, adhering to BEM methodology. I would like to clarify some details regarding the technical specifications. Examples of my layout work: https://vitalik-13.github.io/my-portfolio/
-
4833 19 0 Hello, Oleksandr!
I have reviewed the task and am ready to start working on the assignment with high quality.
To assure you that there will be no issues during the work, you can check my latest work:
https://gvadiko2004.github.io/grill/
I also provide links to other projects:
…
https://gvadiko2004.github.io/Anon-shop/
https://iliarchie.github.io/cates/
https://iliarchie.github.io/beautyf/
https://iliarchie.github.io/lagvilava-build/
If you are interested in my feedback, please contact me in private messages.
Thank you in advance.
-
111 I am ready to start the work, I guarantee a professional approach and adherence to requirements to achieve the best results. Write to discuss the details of the task!
Current freelance projects in the category HTML & CSS
Moved the website from OpenCart to the Khoroshop platformHello. There is a website on OpenCart, an online store. It is necessary to transfer the structure of the site to the GoodShop platform, select a design for the new site, and make it fully functional. HTML & CSS, Web Programming ∙ 13 hours 20 minutes back ∙ 22 proposals |
Need a strong WordPress / WooCommerce specialist for the refinement of the MARSPRO website.We are looking for a responsible freelancer or a small team for the quality completion and technical refinement of the MARSPRO company website. The website is already operational, but there are many minor and significant technical issues left by the previous developer. We need a… Content Management Systems, HTML & CSS ∙ 1 day 13 hours back ∙ 43 proposals |
Sandra Ice Cream - Kaleidoscop
92 USD
We have a small project, and we would like to know if you can prepare a video for us for an LED screen. The video will be used at our event. We will provide all necessary materials: design, brand book, dimensions, and technical requirements. Please let us know if you are… HTML & CSS ∙ 1 day 15 hours back ∙ 7 proposals |
WordPress block layoutHello. We need to do a redesign, specifically the layout of the blocks as shown in the mockup. The structure is not very different from what is currently done, except for the header and hero block. We need to redesign both the mobile and desktop versions. The website is on… HTML & CSS, Website Maintenance ∙ 1 day 20 hours back ∙ 68 proposals |
Development of a website according to the specifications on FramerYou need to create a website based on the parameters in the technical specification. https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Please provide your actual rate based on this design. HTML & CSS, Javascript and Typescript ∙ 1 day 21 hours back ∙ 26 proposals |