Budżet: 140 UAH Termin: 2 dni
Здраствуйте, готов приступить к выполнению задания. Но заморачиватса и говорить куда писать код это долго легче скинуть копию сайта мне я все зделаю
Есть сайт на Wordpress нужно сделать всю область фона кликабельной.
Сайт: http://russian-consumer.ru/ . Вы пишите мне куда вставить код.
Budżet: 140 UAH Termin: 2 dni
Здраствуйте, готов приступить к выполнению задания. Но заморачиватса и говорить куда писать код это долго легче скинуть копию сайта мне я все зделаю
Budżet: 300 RUB Termin: 1 dzień
Здравствуйте, Алексей.
Могу приступить к выполнению задания в ближайшее время.
Стоимость - 300р.
С уважением,
Ольга.
Budżet: 150 UAH Termin: 1 dzień
Здравствуйте,
Я разработчик WordPress / FrontEnd с 2-летним опытом работы, работая как инженером, так и руководителем команды на различных крупномасштабных платформах.
Я совсем недавно перешел на фриланс, поэтому я был бы признателен, чтобы вы дали мне возможность проявить себя, несмотря на то, что мой профиль сейчас не заполнен. Я могу гарантировать вам быструю и надежную роботу, поверьте мне, вы не пожалеете.
Жду ответа от Вас.
Здравствуйте. По большому счету неважно, главное чтобы была возможность переодически менять картинку фона и её кликабельность (гиперссылку на ней).
на чистом css без нагрузки на сервер
<!DOCTYPE html>
<html><head>
<style>
html {
min-height: 100%
}
body {
min-height: 100%;
margin:0;
padding:0;
font: 15px Tahoma;
color:#555;
}
p {
margin: 1em 0;
text-align: center;
}
#top {
width:100%;
background: #222;
text-align:center;
height:35px;
line-height:35px;
}
#top a {
color:#00FF00;
text-decoration:none;
}
.logo {
width:200px;
font: 22px/125% Tahoma;
float:left;
line-height:35px;
}
.logo span {
font: 12px/125% Tahoma;
}
.body_slides {
list-style:none;
margin:0;
padding:0;
z-index:-2;
background:#000;
}
.body_slides,
.body_slides:after {
position: fixed;
width:100%;
height:100%;
top:0px;
left:0px;
}
.body_slides:after {
content: '';
background: transparent url(images/pattern.png) repeat top left;
}
@-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;}
100% {
opacity:0;
}
}
.body_slides li {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-size:cover;
background-repeat:none;
opacity:0;
-webkit-animation: anim_slides 18s linear infinite 0s;
-moz-animation: anim_slides 18s linear infinite 0s;
-o-animation: anim_slides 18s linear infinite 0s;
-ms-animation: anim_slides 18s linear infinite 0s;
animation: anim_slides 18s linear infinite 0s;
}
.body_slides li:nth-child(1) {
background-image: url(http://russian-consumer.ru/wp-content/uploads/2017/12/37997938_-_07_04_2016_-_eqgourmet10.jpg);
}
.body_slides li:nth-child(2) {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
background-image: url(https://i2.wp.com/russian-consumer.ru/wp-content/uploads/2015/03/82a028a20bc552604144ad46d38709ad_XL1.jpg?resize=350%2C230);
}
.body_slides li:nth-child(3) {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
background-image: url(https://i2.wp.com/russian-consumer.ru/wp-content/uploads/2018/07/ATB_0317.jpg?resize=350%2C230);
}
.logo a {
color: #fff;
font-size: 3rem;
}
.logo {
width: 100%;
text-align: center;
padding: 3em 0 0;
}
</style>
</head>
<body id="body">
<ul class="body_slides">
<li></li>
<li></li>
<li></li>
</ul>
<div class="logo"><a href="http://russian-consumer.ru/" target="_blank">RC</a></div>
</body>
</html>
откройте какой-нибудь ваш текстовый редактор, допустим Блокнот, вставте это дело, и сохраните куда-нибудь на компьютер, допустим как rc.html , обязательно чтоб было .html, откройте этот файл в браузере и посмотрите что это такое.
1- Если хотел показать себя, то делай уже до конца. (хотя бы в кодепен засунуть это полотно и сюда запостить ссылку)
2- В тз как бы понятно указано, что нужно кликабельным сделать фон, который замещает пространство вокруг блока с основным материалом.
Итог. Данный код никакого отношения к тз не имеет, хоть и неплохое решение для слайдера на цсс.
чтоб менять картинки в строку background-image: url(http://russian-consumer.ru/wp-content/uploads/2017/12/37997938_-_07_04_2016_-_eqgourmet10.jpg) вместо http://russian-consumer.ru/wp-content/uploads/2017/12/37997938_-_07_04_2016_-_eqgourmet10.jpg , т.е. путь к картинке, вставляйте свои изображения.
чтобы было всё как нужно сделайте следующее. Я не знаю какой у вас доступ к вашим файлам, через хостинг, а может через ftp, скорей всего так и так. Короче, откройте в вашей теме файл functions.php, и вставте такой код
function background_rc(){
$content='<ul class="body_slides"><li></li><li></li><li></li></ul>';
return $content;
}
add_shortcode( 'backgroundrc, 'background_rc');
После этого в header.php сразу после <body <?php body_class(); ?>> вставте <?php echo do_shortcode('[backgroundrc]'); ?> всё что находится между <style></style> вставте в ваш основной css файл, обычно это в самой теме style.css
Хотя что я вам пишу, может вам это и не надо. Но по крайней мере, в отличие от js, здесь не будет никакой нагрузки на сервер.
Но по крайней мере, в отличие от js, здесь не будет никакой нагрузки на сервер.
Я всегда почему то был уверен, что JS выполняется на стороне клиента, и никакой нагрузки на сервер не делает ?
function background_rc(){
$content='<ul class="body_slides"><li></li><li></li><li></li></ul>';
return $content;
}
add_shortcode( 'backgroundrc, 'background_rc');
После этого в header.php сразу после <body <?php body_class(); ?>> вставте <?php echo do_shortcode('[backgroundrc]'); ?>
Как раз этот кусок кода делает нагрузку на сервер. ( Так как написан на php)
слушай, грамотей, объясни ка мне дураку что такое кодепен, первый раз такой бред слышу.
Вот как можно было бы показать в работе свой код
https://codepen.io/anon/pen/qyaPPy
Все просто и наглядно, не надо ничего сохранять и создавать, все видно в браузере сразу.
я ошибся
<body id="body">
<a href="http://russian-consumer.ru/" target="_blank" title="RC">
<ul class="body_slides">
<li></li>
<li></li>
<li></li>
</ul></a>
<div class="logo"><a href="" target="_blank">RC</a></div>
</body>
кликабельный фон
<!DOCTYPE html>
<html><head>
<style>
.body_slides {
list-style:none;
margin:0;
padding:0;
z-index:-2;
background:#000;
}
.body_slides,
.body_slides:after {
position: fixed;
width:100%;
height:100%;
top:0px;
left:0px;
}
.body_slides:after {
content: '';
background: transparent url(images/pattern.png) repeat top left;
}
@-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;}
100% {
opacity:0;
}
}
.body_slides li a {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index: 9;
background-size:cover;
background-repeat:none;
opacity:0;
-webkit-animation: anim_slides 18s linear infinite 0s;
-moz-animation: anim_slides 18s linear infinite 0s;
-o-animation: anim_slides 18s linear infinite 0s;
-ms-animation: anim_slides 18s linear infinite 0s;
animation: anim_slides 18s linear infinite 0s;
}
.body_slides li:nth-child(1) a {
background-image: url(http://russian-consumer.ru/wp-content/uploads/2017/12/37997938_-_07_04_2016_-_eqgourmet10.jpg);
}
.body_slides li:nth-child(2) a {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
background-image: url(https://i2.wp.com/russian-consumer.ru/wp-content/uploads/2015/03/82a028a20bc552604144ad46d38709ad_XL1.jpg?resize=350%2C230);
}
.body_slides li:nth-child(3) a {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
background-image: url(https://i2.wp.com/russian-consumer.ru/wp-content/uploads/2018/07/ATB_0317.jpg?resize=350%2C230);
}
</style>
<ul class="body_slides">
<li><a href="http://russian-consumer.ru/" target="_blank" title="RC"></a></li>
<li><a href="http://russian-consumer.ru/2018/07/18/%d0%bb%d0%b5%d0%bd%d1%82%d0%b0-%d0%be%d1%82%d0%ba%d0%b0%d0%b7%d0%b0%d0%bb%d0%b0%d1%81%d1%8c-%d0%be%d1%82-%d0%bf%d1%80%d0%b5%d1%82%d0%b5%d0%bd%d0%b7%d0%b8%d0%b9-%d0%ba-%d1%81%d0%b2%d0%b5/" target="_blank" title="RC"></a></li>
<li><a href="http://russian-consumer.ru/2018/07/18/self-scanning/" target="_blank" title="RC"></a></li>
</ul>
тогда
function background_rc(){
$content='<ul class="body_slides">
<li><a href="http://russian-consumer.ru/" target="_blank" title="RC"></a></li>
<li><a href="http://russian-consumer.ru/2018/07/18/%d0%bb%d0%b5%d0%bd%d1%82%d0%b0-%d0%be%d1%82%d0%ba%d0%b0%d0%b7%d0%b0%d0%bb%d0%b0%d1%81%d1%8c-%d0%be%d1%82-%d0%bf%d1%80%d0%b5%d1%82%d0%b5%d0%bd%d0%b7%d0%b8%d0%b9-%d0%ba-%d1%81%d0%b2%d0%b5/" target="_blank" title="RC"></a></li>
<li><a href="http://russian-consumer.ru/2018/07/18/self-scanning/" target="_blank" title="RC"></a></li>
</ul>';
return $content;
}
add_shortcode( 'backgroundrc, 'background_rc');
После этого в header.php сразу после <body <?php body_class(); ?>> вставте <?php echo do_shortcode('[backgroundrc]'); ?>
Na podstawie już istniejącego szablonu projektu strony internetowej wykonać szereg dla frameworka Laravel. Makieta projektu została stworzona w Figma. Bardziej szczegółowo opiszę już w wiadomościach prywatnych.
Jest lejek sprzedażowy dla sklepu internetowego, który chcemy powtórzyć u siebie Wygląda on tak Główna strona (produkt, który jest główny w sprzedaży, na przykład koszula) Potem strona checkout (gdzie osoba wprowadza swoje dane i wybiera, ile na przykład koszul chce kupić) Następnie przechodzi dalej w lejek i oferowane są dodatkowe sprzedaże 1 (skarpetki) + potem dodatkowa sprzedaż 2 (majtki) i na końcu strona dziękuję Jak to powinno działać w kwestii przejść między stronami i logiki, możesz zobaczyć tutaj (trzeba dojść do końca do strony dziękuję) https://3plus3.heroman.com.ua/standard/ Mamy przykłady stron, które chcemy zrobić u siebie To znaczy, dla nas w zasadzie skopiujemy design - zrealizujemy - wypełnimy pod nasz produkt Strony z dodatkowymi sprzedażami będą takie same pod względem designu i struktury jak na stronie, którą wysłałem powyżej (majtki) Nie musisz wypełniać stron informacjami, tylko zebrać szkielet - aby zgłoszenie przychodziło poprawnie Nie trzeba też wymyślać struktury stron Od Ciebie w zasadzie Skopiować i zrealizować Ustawić, aby technicznie działało poprawnie Pokazać, jak z tym pracować, abyśmy mogli to robić sami Są 2 konstruktorzy stron, które mamy na myśli, z jednym intensywnie pracujemy teraz i trzeba zrozumieć, czy można na nim coś takiego rozwinąć (ale czytałem w GPT, że można)
Zadanie Trzeba stworzyć stylowy, responsywny szablon e-mailowy na podstawie dostarczonego tekstu i przygotować go do załadowania do usługi e-mail marketingowej. Co należy zrobić Opracować projekt e-maila. Stworzyć responsywny HTML e-mail. Wstawić dostarczony tekst. Przygotować bloki na obrazy i ikony. Dodaj przyciski CTA. Przygotować linki z znacznikami UTM. Stworzyć wersję tekstową wiadomości. Sprawdzić wyświetlanie w głównych klientach e-mailowych. Przygotować finalny plik do załadowania do usługi wysyłkowej. Wymagania dotyczące projektu Potrzebny jest czysty, nowoczesny, premium-style e-mail. Wiadomość powinna być łatwa do przeczytania, nieprzeładowana, z jasną strukturą, krótkimi blokami tekstowymi, wizualnymi akcentami i kilkoma przyciskami CTA. Wymagania techniczne responsywna HTML e-mailowa; poprawne wyświetlanie na desktopie i urządzeniach mobilnych; układ oparty na tabelach; szerokość kontenera około 600–700 px; inline CSS / CSS kompatybilne z e-mailem; przyciski powinny być HTML/CSS, nie obrazkami; wszystkie ważne dane powinny być tekstem HTML; obrazy powinny mieć tekst alternatywny; bez JavaScript; bez formularzy w e-mailu; poprawne działanie linków; przygotowanie znaczników UTM dla CTA. Sprawdzenie Trzeba sprawdzić wyświetlanie w co najmniej: Gmail; Apple Mail; Outlook; mobilnych klientach e-mailowych. Na wyjściu trzeba otrzymać Gotowy plik HTML e-maila. Wersję tekstową. Podgląd lub zrzuty ekranu desktop/mobile. Instrukcję, gdzie zmieniać linki, tekst i obrazy. Plik/wersję gotową do załadowania do usługi wysyłkowej. W odpowiedzi proszę dołączyć przykłady HTML e-maili, które wykonaliście, oraz wskazać, z jakimi usługami wysyłkowymi pracowaliście.
It is necessary to reproduce as accurately as possible:– the structure of the pages; – the layout of the blocks; – the catalog grid; – the sizes of the elements; – the margins; – the typography; – the colors; – the header and footer; – product cards – the menu structure; – menu categories; – modal windows; – adaptive behavior; – hover, active, and mobile states. – the product page must have microdata for products – Pages must be optimized according to Google SEO recommendations1. Type of siteResponsive online sushi delivery store.Main versions:– desktop – from 1280 px; – tablet – 768–1279 px; – mobile – 320–767 px.2. NavigationHomeCategoriesPromotionsAbout UsDelivery and PaymentContactsMenuProduct CardShopping CartPage TemplateThe “Page Template” block should contain:– header;– breadcrumb;— “up” arrow— Light and dark theme switcher with user choice retention.— A watermark with the logo on the background of the page— Fix an image of chopsticks on the right edge of the background— Footer ResultDeliver:– Figma mockup for desktop and mobile; – HTML files; – CSS; – JavaScript; – a folder with placeholders; – responsive version of the page; – archive of the completed project.The main requirement is the most accurate reproduction of the structure, design, and behavior of the page example.com
Kontynuacja projektu. Redesign i restart strony internetowej kliniki stomatologicznej Brovchak Family Dental Care 0680006609 http://brovchak-clinic.com.ua/ specyfikacja od eksperta SEO https://docs.google.com/spreadsheets/d/17_WyPf3XVpzbuBjpJ7MNFs12QUL-aHv7iIbKudY-IEw/edit?gid=0#gid=0 https://miro.com/app/board/uXjVHXxFvIE=/O projekcie Wymagany jest pełny redesign istniejącej strony internetowej kliniki stomatologicznej na podstawie gotowego prototypu w Miro. Wynik powinien obejmować: projekt UI/UX responsywne kodowanie integrację z WordPress SEO-bezpieczny restart optymalizację techniczną ustawienie analityki możliwość łatwej samodzielnej edycji treści Krytycznie ważne: strona nie tylko musi wyglądać nowocześnie, ale także poprawiać wskaźniki biznesowe i nie tracić aktualnych pozycji SEO.Cele biznesowe projektu Redesign jest realizowany w celu: zwiększenia liczby zapytań z strony; podniesienia konwersji formularzy rejestracji; wzmocnienia zaufania do kliniki; prezentacji ekspertyzy lekarzy; prezentacji skomplikowanych przypadków klinicznych; formowania premium pozycjonowania; zwiększenia liczby zapytań o implantację, ortopedię i kompleksowe leczenie.Koncept wizualnyPozycjonowanie Premium autorska stomatologia. Nie sieciowa klinika. Nie masowy napływ pacjentów. Indywidualne podejście, przewidywalne wyniki i skomplikowane rozwiązania kliniczne.Emocja, jaką ma wywoływać strona "Tutaj pracują nie tylko stomatolodzy. Tutaj zespół ekspertów tworzy długoterminowe i przewidywalne rozwiązania, zwracając uwagę na każdy detal."Styl Warsztat / Atelier Stomatologiczne. Autorska stomatologia. Premium minimalizm. Akcent na: mikroskopię; nawigacyjną implantację; cyfrowe skanowanie; gnatologię; skomplikowane rehabilitacje. Używać: wielkich profesjonalnych zdjęć lekarzy; zdjęć lekarzy w trakcie pracy; realnych przypadków pacjentów; zdjęć kliniki. Zminimalizować lub całkowicie wykluczyć: zdjęcia stockowe; szablonowe obrazy stomatologiczne; typowe rozwiązania projektowe sieciowych klinik.SEO i restart Krytyczny wymóg: Redesign nie powinien prowadzić do znacznego spadku organicznego ruchu. Wymagane: zachowanie struktury SEO strony; zachowanie lub poprawne przeniesienie URL; ustawienie 301 przekierowań; przeniesienie wszystkich metatagów; zachowanie indeksacji stron; sprawdzenie robots.txt; sprawdzenie sitemap.xml; sprawdzenie canonical; sprawdzenie schema.org; przeprowadzenie audytu SEO przed i po uruchomieniu.KPI SEO Dopuszczalny spadek organicznego ruchu po uruchomieniu: nie więcej niż 10%. Preferowani są wykonawcy, którzy mają udane przypadki SEO-bezpiecznych migracji.UX i konwersja Strona powinna zapewniać: szybki dostęp do rejestracji na konsultację; zrozumiałą strukturę usług; łatwą nawigację; mobilną wygodę; szybki kontakt z kliniką. Przewidzieć: bloki CTA; formularze rejestracji; szybki telefon; messengery; bloki zaufania; wideo-rekomendacje; przypadki leczenia.Wymagania technicznePrędkość Google PageSpeed: Desktop — 90+ Mobile — 95+ Core Web Vitals muszą odpowiadać zaleceniom Google.Optymalizacja Wymagane: optymalizacja CSS; optymalizacja JS; ustawienie cache; optymalizacja obrazów; użycie WebP; zminimalizowanie zewnętrznych skryptów.Jakość kodu Ważne: czysty kod; brak zbędnych wtyczek; użycie standardowych możliwości WordPress i motywu; kompatybilność z przyszłymi aktualizacjami WordPress.Asystent AI (agent) Wymagane jest zaproponowanie rozwiązania do wdrożenia konsultanta AI. Pożądana funkcjonalność: odpowiedzi na typowe pytania; rejestracja na konsultację; integracja z Telegram; integracja z Instagram Direct; integracja z Facebook Messenger; integracja z Viber; przekazywanie leadów do CRM lub administratorów, lub do bota telegramowego Proszę opisać zaproponowane rozwiązanie osobno.Wynik pracy Na wyjściu należy uzyskać: Nowy projekt strony. Responsywne kodowanie. SEO-bezpieczne uruchomienie. Optymalizowany kod. Ustawioną analitykę. Instrukcję dla administratora. Gwarancyjne wsparcie po uruchomieniu. Realizacja AI Search i AI-wydania W ramach projektu należy zrealizować osobny kompleks prac przygotowawczych strony do Google AI Overviews, AI Mode, ChatGPT, Gemini, Perplexity, Copilot i innych systemów wyszukiwania AI. Do prac należy: Projektowanie mapy podmiotów kliniki: organizacja, filie, lekarze, usługi, przypadki, artykuły, FAQ, wideo i ceny. Tworzenie logicznych powiązań między: lekarzami a usługami; usługami a przypadkami; usługami a FAQ; artykułami a autorami; filie a dostępnymi kierunkami leczenia. Realizacja danych strukturalnych JSON-LD: Organizacja; KlinikaMedyczna / Dentysta; LokalnyBiznes; Osoba; ProfilStrony; Usługa; ProceduraMedyczna — gdzie semantycznie poprawnie; Artykuł / BlogPosting; ObiektWideo; FAQPage; BreadcrumbList; WebSite; WebPage; ObiektObrazu. Tworzenie w WordPress strukturalnych typów treści: usługi; lekarze; przypadki; artykuły; FAQ; wideo; filie; ceny. Realizacja powiązań ACF między typami treści oraz automatyczne generowanie schema.org z zatwierdzonych pól. Budowa FAQ w trzech poziomach: FAQ na stronach usług; osobne strony eksperckie decision-guide; ogólny centrum pytań pacjentów. Zabezpieczenie dostępności podstawowej treści w HTML bez zależności od klienta JavaScript, obrazów lub PDF. Realizacja autorstwa treści medycznej: autor; recenzent medyczny; data publikacji; data aktualizacji; link do profilu lekarza. Dodanie transkrypcji do eksperckich wideo oraz powiązanie wideo z usługami, lekarzami i przypadkami. Sprawdzenie robots.txt, sitemap.xml, canonical, noindex, snippet controls i dostępności strony dla wyszukiwarek i crawlerów AI. Ustawienie śledzenia ruchu AI: osobna grupa kanałów w GA4; źródła referrer ChatGPT, Perplexity, Gemini, Copilot, Claude; przekazywanie źródła do CRM i zgłoszeń Telegram; raport w Looker Studio; uwzględnienie self-reported attribution od pacjenta. Stworzenie podstawowego zestawu zapytań do regularnego monitorowania widoczności kliniki w AI-wydaniu. Sprawdzenie danych strukturalnych przez Rich Results Test oraz Schema Markup Validator. Przygotowanie instrukcji dla administratora: jak dodawać FAQ; jak tworzyć przypadek; jak wskazywać autora; jak aktualizować datę przeglądu medycznego; jak dodawać wideo i transkrypt; jak powiązać materiał z usługą i lekarzem. inne.