Верстка лендинга і натяжка на WordPress
Technical Assignment (TA)
1. General Requirements
Goal:
To create a layout for the main page (and additional informational pages) on WordPress using the Avada theme and its visual builder (Avada Builder).
To set up a global Header and Footer, add a modal window "Join our waitlist" for collecting email addresses with integration into a mailing service.
Cross-browser compatibility: Support for the latest versions of major browsers (Chrome, Firefox, Safari, Edge).
Responsiveness: Correct display on all popular devices (desktop, tablet, smartphone).
Interface: The entire site (header, buttons, texts, captions, messages, modal window) — only in English, without Russian or Ukrainian words.
Structure: To create the header and footer globally (Avada > Layouts), and all blocks of the main page – in Avada Builder.
Reusability: All sections/containers created for the main page must be "saved" (saved containers/sections) so that they can be reused or edited.
Editability: All texts, images, links, as well as the content of the modal window must be editable through Avada Builder.
2. Structure of the Main Page
Below are the blocks (sections) that need to be created and arranged sequentially on the main page. Each section specifies which elements inside should be editable.
2.1. Header
Logo (icon + text "fantribe"):
The ability to replace the icon and text through Avada/WordPress settings (the logo can be stored in Media Files).
Main Menu:
Items: For Creators, For Fans, Monetization, Subscription, FAQ, etc.
On mobile devices – a "burger" button, which opens a dropdown menu when clicked.
Buttons: Log in / Sign up — style according to the layout (different colors).
Minimal Animation:
Possible light animation on hover over menu items (change of text color).
2.2. Hero Section
Background: Gradient background, rounded corners (radius 40px).
Heading: Large text (example: "Fantribe is on a mission…"). Part of the text highlighted with a gradient (via CSS).
Block with avatars and button "join creators community":
One image
The text "join creators community" is editable in the builder.
Phone Mockup with a slider:
Behind the "screen" of the phone are slides (Swiper or Avada carousel), scrolling horizontally infinitely (loop).
The active slide is centered and highlighted with a border.
PNG frame of the phone overlaps the slides.
The caption (e.g.: "Natan Levy – Fantribe.com/natanlevy") changes according to the active slide.
2.3. "Fan subscriptions" Block
Description (text) at the top.
Cards (infinite carousel):
The ability to edit titles, descriptions, images).
2.4. "Community Perks" Block
Left Column with the title "Community Perks" and 4 items (Exclusive community access, Live events, Meet-the-creator sessions, Community challenges).
Right Column — screenshot or illustration (replaced through the builder).
2.5. "Monetization Opportunities" Block
Heading.
Left Column (2 cards: Exclusive discounts, Crowdfunding perks), vertical stripe in the middle, right column (2 cards: Sponsorship opportunities, Launch discounts).
Card: icon (emoji), title, description. All editable.
2.6. "Subscription Models" Block
Heading "Subscription Models".
Toggle: "Billed Monthly / Billed Annually" – when toggled, the active class changes. Optional: price change (JS/Avada conditional logic).
Cards (3 pcs.: Basic, Premium, VIP) with editable titles, prices, descriptions, and "Get Started" buttons.
VIP Card – dark gradient.
2.7. "FAQ" Block
Heading "FAQ".
Questions (5 pcs.):
Expand/collapse on click (JS or Avada toggle).
The ability to edit questions and answers.
2.8. Footer
Background (gradient), rounded corners (40px).
Text + Unlock button (Seamlessly connect with your audience…).
Horizontal line.
Bottom stripe: logo (with icon) on the left, copyright on the right.
3. Additional Pages
Privacy Policy
Terms of Use
To be formatted as separate pages, linked to the menu/footer. The text can be a placeholder, everything — in English.
4. Integration of Mailing Service + Modal Window
Modal Window "Join our waitlist":
Close button (icon "×") in the corner.
Heading "Join our waitlist", logo, text description, email input field, and button "Join now →".
Background of the window (dark/semi-transparent) + dark panel for content.
Minimal animation for the window appearance (fade-in or scale-in).
All inscriptions — only in English.
Button/link that opens this window (can be located in the menu, in the Hero block, or in any other place).
Email collection service:
Need to set up a form (Avada Forms or third-party plugin) with an email field, integrate with the chosen service (Mailchimp, Sendinblue, ActiveCampaign, etc.).
When submitted, the email address is added to the mailing list.
Success/error message (in English).
5. Dynamic Blocks / Reusable Sections
Header and Footer – global Layouts (Avada > Layouts).
Popup ("Join our waitlist") – can be formatted as a separate Popup (Avada or plugin). All texts and images – through the builder/plugin.
Main Sections – save as reusable containers (Avada Builder), so they can be used on other pages or cloned.
6. Animations
Hover effects on cards/buttons (lift, shadow, color change).
Fade-in or slide-in on scroll (optionally through Avada Animations).
Swiper – smooth horizontal scrolling (infinite).
7. Functional Requirements
WordPress + Avada:
Install the Avada theme, create a global Header/Footer, main page, "Privacy Policy" and "Terms of Use" pages.
Insert main blocks (Hero, Fan subscriptions, Community Perks, Monetization, Subscription Models, FAQ) through Avada Builder.
Modal Window:
Opens when clicking the button (e.g., "Join our waitlist").
Closes when clicking the "×" icon or on the overlay (optionally).
The subscription form sends the email to the chosen service (Mailchimp/other).
Swiper (in Hero Section):
The active slide is always centered, with a border.
Infinite scrolling (loop).
Display of multiple slides, ability to swipe left/right.
8. Conclusion
Main page fully created in Avada Builder on WordPress, the entire interface — in English.
Modal window with the "Join our waitlist" form, integrated with the mailing service.
Additional pages: Privacy Policy and Terms of Use (placeholders, everything in English).
All blocks are editable through Avada Builder, and the Header/Footer are moved to Layouts.
Додатки 2
Відгук замовника про співпрацю з Yurii K.
Верстка лендинга і натяжка на WordPressПроект завершено, рекомендую працювати з Юрієм!
Відгук фрилансера про співпрацю з Стефаном Васильевим
Верстка лендинга і натяжка на WordPressДякую за співпрацю! Було приємно працювати над вашим завданням) Оперативний зворотний зв'язок та дружнє взаємодія зробили роботу комфортною та продуктивною) Якщо виникнуть питання або знадобиться допомога, звертайтеся, завжди на зв'язку!
-
Вітаю.
З Avada працюю доволі часто, готовий виконати завдання.
На старті можу почати все на своєму хостингу (тема є в наявності), зробити кілька блоків/елементів. Побачите чи буде влаштовувати результат. Якщо так - продовжимо співпрацю.
-
319 10 0 Привіт, маю великий досвід роботи, портфоліо за потреби вишлю в особисті.
Буду радий співпраці з Вами.
-
280 Привіт, Стефане
Дякую за детальне пояснення проекту.
1. У вас уже є обліковий запис Mailchimp (або інший поштовий сервіс) для збору електронної пошти?
2. Ви хочете, щоб я налаштував хостинг, чи ваш сайт WordPress уже працює та готовий до встановлення теми?
-
326 1 0 Доброго дня.
Маю досвід роботи з WordPress 3+ роки.
Готовий до співпраці по даному проєкту.
Мої останні роботи:
https://www.malynovskyi.agency/
https://kitsystyle.com.ua/
https://www.target.malynovskyi.agency/
-
290 1 0 Доброго дня. Готовий виконати.
Маю великий досвід розробки сайтів на WP.
Моє портфоліо:Freelancehunt
Зверстаю макет головної та інформаційних сторінок. Реалізую весь необхідний функціонал. Оптимізую під необхідні браузери та платформи. Інтерфейс буде англійською мовою. Необхідні елементи та блоки будуть розташовані відповідно до описаної структури. Усі блоки будуть редаговані через Avada Builder.
Інтегрую сервіс розсилки в модальне вікно. Забезпечу максимальну швидкодію.
Пишіть, обговоримо деталі і я приступлю до роботи.
-
411 6 1 Готовий до обговорення проекту! Будь ласка, надішліть дизайн і детально опишіть свої побажання до лендингу.
-
6463 82 3 3 Добрий день!
Готовий працювати над Вашим проєктом.
Чекаю на відповідь.
З повагою Іван
-
2276 37 0 Доброго дня! Виконаю якісну, адаптивну верстку.
Можу тему з 0 зробити і посадити на wp/acf, щоб все редагувалося з адмінки.
Досвід роботи понад 5 років.
Звертайтеся, буду радий співпраці!
-
619 7 0 Доброго дня. Буду рад співпраці.
Готовий обговорити деталі в особистому листуванні.
Великий досвід, відповідальний та якісний підхід.
З повагою Роман!
Пишіть, обговоримо
-
2830 19 0 Вітаю, готовий зверстати сайт на wp із вказаною темою та враховуючи все з ТЗ. Якість та оперативність роботи гарантую.
Пишіть, буду радий співпраці!
-
1405 10 0 Добрий день.Є досвід у дизайні,верстці та WordPress. Усі проекти тут (https://github.com/divinebang). Ми можемо обговорити всі кроки. Готовий розпочати роботу, як тільки врегулюємо деталі.
-
753 11 2 Доброї дня Стефан, із вимогами та макетом ознайомилася і готова якісно зверстати вам лендінг на WordPress із застосуванням таких технологій:
Hhtml5
Css3, SCSS
Flexbox, Grid Css
Js, jQuery
Wordpress, ACF
Валідний код (W3C), зелена зона Page Speed, SEO оптимізований код.
… Розпочати готова відразу після затвердження.
Звертайтеся, буду рада допомогти!
-
224 1 0 Вітаю!
Хочемо запропонувати свої послуги. В нас є професійна команда розробників, що складається з фронт, бекенд спеціалістів, а також ТЛ. Ми більше 4 років працюємо з різними нішами, гео та проєктами, саме тому ми гнучкі до умов та різноплановості роботи.
E-Commerce, SaaS, Маркетингові агентства, Логістичні та IT компанії це те, з чим ми працюємо.
Ми вже довго працюємо зі схожими проєктами, тому ми виконаємо Ваш проєкт якісно та швидко.
Давайте обговоримо деталі проєкту.
-
5569 114 4 2 Добрий день. Зверстаю кросбраузерний, адаптивний, валідний та швидкісний сайт з посадкою на WordPress, до виконання готовий приступити відразу після обговорення деталей.
На зв'язку 24/7
-
4833 19 0 Привіт, Стефане!
Я ознайомився з завданням і готовий приступити до якісного виконання роботи.
Пропоную розробку на WordPress + ACF PRO
Термін: 5 днів
Портфоліо: webisen.com
…
Щоб ви були впевнені, що під час роботи не виникне проблем, можете ознайомитися з моєю останньою роботою:
https://telya.ch/
Також наводжу посилання на інші проекти:
https://gvadiko2004.github.io/grill/
https://gvadiko2004.github.io/Anon-shop/
https://iliarchie.github.io/cates/
Якщо вас зацікавив мій відгук, зв'яжіться зі мною в особистих повідомленнях.
Заздалегідь дякую
Актуальні фриланс-проєкти в категорії HTML та CSS верстання
365 бет
1500 UAH
1. Мета проекту Розробити веб-інтерфейс демонстраційної платформи Betano спортивних ставок з: публічним екраном купона ставки; відображенням одиничної та потрійної ставки; адмін-панеллю для редагування контенту; можливістю швидко змінювати коефіцієнти, події, статус і суми;… HTML та CSS верстання, PHP ∙ 29 хвилин тому ∙ 8 ставок |
Верстка та посадка на WordPress сайту будівельної компанії (Premium-сегмент) з акцентом на SEOОпис проєкту:Шукаємо досвідченого WordPress-розробника для верстки та посадки готового дизайн-макета з Figma на CMS WordPress. Важливий контекст проєкту:Це не розробка сайту з нуля. Компанія має діючий сайт, ми оновлюємо структуру та дизайн. Нам необхідно реалізувати головну… HTML та CSS верстання, Веб-програмування ∙ 2 години 30 хвилин тому ∙ 34 ставки |
Переніс сайта з опенкарту на платформу ХорошопДобрий день. Є сайт на опенкарті, інтернет магазин. Потрібно перенести струкутуру сайту на платформу хорошоп, підібрати дизайн для нового сайту та зробити його повноцінно працюючим HTML та CSS верстання, Веб-програмування ∙ 23 години 8 хвилин тому ∙ 27 ставок |
Потрібен сильний WordPress / WooCommerce спеціаліст для доопрацювання сайту MARSPROШукаємо відповідального фрілансера або невелику команду для якісного завершення та технічного доопрацювання сайту компанії MARSPRO. Сайт вже працює, але після попереднього розробника залишилось багато дрібних і важливих технічних проблем. Нам потрібна людина, яка зможе не просто… CMS, HTML та CSS верстання ∙ 1 день 23 години тому ∙ 44 ставки |
Сандра Айс Крим - Калейдоскоп
4132 UAH
У нас є невеликий проект, і ми хотіли б дізнатися, чи зможете Ви підготувати для нас відеоролик для LED-екрана. Відео буде використовуватися на нашому заході. Ми надамо всі необхідні матеріали: дизайн, брендбук, розміри та технічні вимоги. Будь ласка, повідомте, якщо Ви доступні… HTML та CSS верстання ∙ 2 дні 1 година тому ∙ 7 ставок |