WordPress уебсайтове: 14 страхотни примера

Тези невероятни уеб сайтове на WordPress показват най-доброто от тази популярна CMS. Когато стартира за първи път през 2003 г., WordPress се разглежда като основен инструмент за блогове за любители. Много бързо тя излетя, превръщайки се в пълноценна CMS, която сега управлява милиони сайтове по целия свят. А оттогава творческите професионалисти разширяват границите на CMS, за да създават сложни и красиви уеб сайтове на WordPress.

За да ви покажем какво точно може да направи тази невероятна CMS, избрахме някои от най-добрите уеб сайтове на WordPress. Ако тази статия ви вдъхновява да създадете свой собствен уебсайт на WordPress, това Уроци за Wordpress ще ви помогне да започнете, или ако искате да създадете страхотно изглеждащо портфолио, разгледайте нашето ръководство за най-доброто WordPress теми за портфолио .

01. Рафал Божар

WordPress уебсайтове: Rafal Bojar



Това портфолио от фотографии използва WordPress заедно с Vue.js(Кредит на изображението: Рафал Бохар)

Дизайнер Женя Ринжук използва WordPress като полуглава CMS, с Vue.js за предния край, за да създадете този привлекателен сайт за портфолио за фотография за Рафал Божар . Той разполага с начална страница, която показва визуализации на избрани истории, гладка решетка, за да покаже цялата работа на Божар, и страница с „същност“, обясняваща философията и подхода на фотографа.

„Целта беше да се осигури на посетителите уникалното изживяване и да се покажат невероятните произведения на Рафал“, казва Ринжук. Двамата обсъдиха няколко различни бекенда опции, но се спряха на WordPress, така че сайтът да бъде лесен за управление и редовно да се актуализира с нови проекти.

Наред с WordPress и Vue.js, сайтът използва сегмент S3 за съхранение на данни, които се доставят чрез Cloudfront, за да се осигури бързо време за зареждане. Rynzhuk също се възползва от Основа и Хендрик-Ян де Хардер Изглед на скелет , както и GSAP за анимациите.

02. Адел Вакула

WordPress уебсайтове: Adel Vakula

Сайтът на този модел е изпълнен с очарователен, крехък хумор(Кредит на изображението: Adel Vakula)

Адел Вакула е международно известен модел от Украйна и този промоционален сайт за нея пристига от сънародници Яблоко идеи студио , които не само са го проектирали и кодирали, но са създали цялата илюстративна работа. Резултатът е великолепен отличителен визуален празник, обхващащ редица живописни винетки с нашата бляскава героиня.

От отварящия се облак от памучен бонбон, който буквално мехурче с фини анимации, Вакула звезди в мечтателни портрети, предназначени да демонстрират харизматична личност. Тя причудливо пренебрегва парижката нощ на върха на горгулия, удвояваща се като бутон за възпроизвеждане в YouTube, след като е хванала влака на метрото в Ню Йорк от платформа, пълна с котка за пътуване. Посещенията във Венеция и Ибиса осигуряват еднакво ексцентрични фонове на Instagram и връзки по имейл, където дори печатите за коктейлни напитки насърчават последователите. Това е език на бузите, но направено с такъв чар и техника, че няма как да не се влюбите. Дори показалеца на мишката отива изцяло във формата на сърце.

Изграден на WordPress CMS, отличителен потребителски интерфейс е забавна секция, където можете да плъзгате и пускате дрехи върху виртуална Vakula, за да видите реални моментни снимки. Тъй като визитните картички за възможни кастинги отиват, този отдава по-запомняща се поза от повечето.

софтуер за редактиране на видео за компютър от нисък клас

Автор: Марк Билен

03. Средно дете

Уебсайтове на WordPress: Сандвич магазин за средно дете

Middle Child е изграден върху изцяло поръчана тема на WordPress - щракнете върху изображението, за да разгледате сайта

Награден, базиран във Филаделфия сандвич магазин Средно дете се нуждаеше от уебсайт, който да отговаря на странното му, непретенциозно настроение. Студио за дизайн и технологии с пълно обслужване Самосъзнаващ се се справи с предизвикателството, създавайки сайт, базиран на напълно поръчков WordPress тема използвайки дървен материал и ACF - комбинация, която партньорът в студиото Mike Wagz нарича „промяна на играта за сериозни разработчици на WordPress теми“.

Self Aware също използва най-новите уеб технологии, за да предложи оптимално изживяване: оформлението е създадено с помощта на CSS мрежа и а Сервизен работник кешира статични активи, включително CSS и JavaScript файлове, за да ускори първоначалното време за зареждане.

„Средното дете излъчва атмосфера от всяко кътче“, добавя Вагз. „Топло посреща клиентите от всички сфери на живота с точното количество забавление, кич и странности. Мисля, че този дизайн е успешен, защото успяхме да уловим този дух и да го преведем в мрежата. '

За да намерите своя перфектен инструмент, разгледайте тези отгоре строители на уебсайтове . Освен това вижте по-долу за най-добрите цени.

Днешните най-добри оферти за конструктор на уебсайтове Wix Wix Connect домейн £ 3 / mth Изглед HostGator Специализиран хостинг на HostGator 119 щ.д. / mth Изглед Квадратно пространство Лични £ 10 / mth Изглед Всеки ден проверяваме над 130 милиона продукта за най-добри цени

04. Морска реколта

WordPress уебсайтове: Sea Harvest уебсайт на iPad

ED използва оформление в стил вестник в своя уебсайт, базиран на WordPress, за Sea Harvest

Когато пазарът на морски дарове, базиран в Канбера Морска реколта се нуждаеше от нова идентичност на марката и интелигентно дигитално присъствие, за да съвпадне, се обърна към австралийската агенция за уеб и брандиране ED . Уебсайтът на WordPress предлага впечатляващо оформление във вестникарски стил с много странни щрихи за изследване.

„Когато мислим за морски дарове, много от нас се връщат към спомен за ядене на риба и чипс на плажа с приятели и семейство“, казва дизайнерът Кам Тиди. „Често тези стави за вкъщи увиват храната ви във вестник, така че беше естествено да изследвате това като визуална идея.“

Репликирането на статично оформление за печат в мрежата обаче не беше без предизвикателства. Екипът използва CSS Flexbox за преместване на съдържанието, като същевременно поддържа последователно разстояние, независимо от размера на екрана. Почти всяко измерване се основава на отзивчива скала, използваща REM единици, което улеснява поддържането на контрол върху типа и пропорциите на изображението при скалиране на браузъра.

най-добрият лаптоп за кирпичен творчески пакет

Любимата функция на разработчика Bryn Shanahan е фактът, че потребителите могат да 'рисуват' на сайта, включително чрез интерактивно търсене на думи . „Постигнахме това, като покрихме сайта с елемент HTML5 Canvas, който след това беше използван за изчертаване на рисунките на потребителя“, обяснява той.

ED използва WordPress за много от проектите си за уебсайтове, като го намира за лесен за употреба и интуитивен за клиентите. „[WordPress има] лесно развитие отзад, което позволява повече време да се съсредоточи върху предния край, за да оживи дизайна“, добавя разработчикът Адам Форкучи. 'Способността да направете го без глава, като използвате WP Rest API , ни позволява да използваме рамки като React, която се превръща в ядрото на бъдещото ни развитие на платформата. '

05. Максим Шкрет

Уеб сайтове на WordPress: Максим Шкрет

„Топящата се панда“ може да се върти наляво и надясно(Кредит на изображението: Максим Шкрет)

Базиран извън Санкт Петербург, Русия, Максим Шкрет е дигитален художник на свободна практика. Неговият впечатляващ уебсайт на WordPress ожени портфолиото на пазара за електронна търговия, стартирайки нова инициатива за набиране на средства.

Сайтът се отваря от поредица от четири 3D модела или цифрови скулптури, които могат да се влачат и завъртат на 360 градуса. Свиня, пустинна лисица, двудушен еднорог и топяща се панда могат да се въртят наляво и надясно, за да се постигне предпочитан ъгъл. Чрез натискане на бутона ‘Купи този изстрел’ посетителите могат да закупят цифрово изображение с различни размери за различни цени. Приходите ще бъдат обединени обратно в превръщането на всеки цифров модел в истински физически скулптури, използвайки 3D печат с пет оси CNC обработващ процес. Това е добра идея за покана на сътрудници и показва как подходът за краудфандинг може да бъде приложен към обикновено пасивно изживяване.

Кредитите за производство на сайтове включват дизайнерското студио Sochnik в Ню Йорк, но лъскавите усилия на потребителския интерфейс никога не засенчват таланта на Шкрет. Това включва проста секция Галерия от неподвижни скулптурни снимки, които се вълнуват и размахват през воден филтър. Това е фин ефект, но засилва усещането за текстура, която Шкрет възнамерява да даде на всяко парче.

06. КОБУ

Уеб сайтове на WordPress: творческа агенция KOBU

Уебсайтът за KOBU се отваря с вълнообразна начална страница в стил лава

Не е изненадващо, че портфолио сайтовете продължават да предоставят някои от най-благодатната почва за творческа изява и вдъхновение. Тази онлайн телефонна карта за португалска агенция KOBU следва този дух с изискан, сдържан уебсайт на WordPress, който все още мехурче с характер. Наричайки се „лаборатория на марката“, която не се страхува от експерименти, техническата работа тук демонстрира въображение над сложността.

В поредица от елементи получаваме напомняне за това как CSS и SVG могат да се комбинират за максимален интерфейс. Абсолютното позициониране се използва за наслагване на очарователни каркасни мотиви, разделяне на линиите между удебелените цветни блокове на фона и свързване на секции заедно. Завъртеният HTML5 видео панел получава уникален въртящ се ръб, използващ SVG форма като маска, позиционирана по-горе, преди изображенията от казуса да намалят радиуса на границата наполовина, за да станат кръгли. Сайтът правилно използва библиотеката на въртележка slick.js, за да „прекара“ екипа на KOBU с офис кон през средата на главната страница.

Зенитът обаче е може би малкото, което виждаме първо, отваряйки се на вълнообразен заглавка в стил лава, произведена чрез манипулиране на SVG пътеки. Използвайки приставката anime.js, поливалентен двигател за анимация на JavaScript, това е привлекателен трик за създаване на цветова палитра, ако не друго.

Автор: Марк Билен

07. форма

Уеб сайтове на WordPress: начална страница без формат

Началната страница на noformat има много незабавно въздействие

форма е студио за стратегически дизайн със седалище в Ню Йорк. Началната страница се отличава с анимиран дизайн на очната ябълка, който следва курсора на посетителя около екрана, докато наслоеният текст циклично преминава през всички неща, които неформатът може да създаде. За да създаде очната ябълка, екипът първо проучи дизайна през After Effects CC , преди да използвате three.js за изграждане на интерактивна версия, обяснява Иън Брюър, основател и креативен директор на noformat.

„Използвахме вертексни и фрагментни шейдъри, за да оптимизираме за визуализация на графичния процесор и го накарахме да пулсира и да мига логото на noformat вътре“, продължава Brewer. „След това приложихме ефекти за последваща обработка, за да му придадем по-органичен и по-малко триизмерен вид, като размиваме ръбовете и добавяме цъфтеж към акцентите.“

Останалата част от сайта се справя с въздействието на тази първа страница, с хлъзгави преходи при превъртане и фини паралакс ефекти, показващи технически умения, без това да повлияе на използваемостта.

„Избрахме WordPress за нашия сайт за скорост на стартиране и гъвкавост“, обяснява Брюър. „През годините изградихме собствени библиотеки и базирани на модули системи за редактиране, които ни позволяват да създаваме или редактираме сайт по-бързо от всяко друго CMS решение.“

Sonic таралежът филм редизайн изтичане

08. Femme and Fierce

Холандско студио за дизайн на опит страната на чудесата е доставил електронна търговия със sass за Femme и Fierce . Цветовата схема на вашия уеб сайт на WordPress, сблъскваща се с вкус, доставя посланието на марката на онлайн модния търговец от самото начало. Анимирани „стикери“ - въртящи се близалки, удрящи стрелки, облизване на устни - създават нахално усещане и трябва да резонират с поколението Snapchat / Instagram, към което е насочена тази гама.

09. Puree Maison

Уебсайт на Mash House WordPress

Анимирани драсканици оживяват този уебсайт на WordPress

Картофено пюре е креативно и стратегическо студио със седалище в Париж. Уебсайтът на WordPress се откроява най-вече благодарение на слънчевите жълти анимирани драскулки, които се появяват при нанасяне на мишката, вливат личността в скучни изявления на марката и оживяват преходите. Те също така помагат на посетителите да се ориентират и ги насърчават да изследват и взаимодействат със сайта.

10. Ние на практика сме

Уеб сайтове на WordPress: Ние на практика сме

Сайтът на We Virtual Are широко използва 360-градусово видео, за да продава своите услуги

Когато бизнесът ви се занимава с увлечение на хората, използващи виртуална реалност, за да разказват емоционални истории, имате нужда от сайт, който да привлича хората към вашата работа. И бутиково VR студио Ние на практика сме е успял това и след това някои. Нейният сайт, построен от Хердл в WordPress, използва много модерни техники, включително WebGL и 360-градусово видео, за да ви даде неустоим вкус на своите потапящи услуги. Вижте неговите VR тестови дискове за Audi, пълни с неочаквани гости на знаменитости.

11. Асаро

WordPress уебсайтове: Asaro

Сайтът на Asaro е достатъчно отзивчив, за да изглежда красиво на всички размери на екрана

Asaro е доставчик на уникални приключенски преживявания и забавни пътувания за гости на суперяхти по целия свят. Като част от по-широко корпоративно ребрандиране, този лъскав уебсайт е проектиран и разработен от базираната в Бристол агенция Зелен хамелеон .

Изграден върху персонализирана рамка на WordPress, за да улесни текущото редактиране на съдържание за клиента, посетителите се отвеждат на пътешествие на откриването, изпълнено с чар. Ефектните ефекти на превъртане се свързват добре с интерактивна пунктирана линия, като начертават навигационния напредък по начина, по който капитанът на яхта може да маркира карти. Персонализираните CGI визуализации са използвани като графично устройство за представяне Асаро Ексклузивните предложения за услуги, в светлината на недостига на фотографски активи поради частния характер на събитията.

„Художественото направление е вдъхновено от комбинация от фотография с капки вода и театрален дизайн на плакати“, обяснява креативният директор Том Андерсън. „Обичахме естетиката на фотографския стил и чувствахме, че той се свързва добре с основната морска тема на проекта.“

Достатъчно отзивчив, за да изглежда не само красиво последователен на по-малките екрани, скоростта на достъп също беше мотивация за рационализиране на производителността. С жителите на лодките, които са на милостта на свързаността с морските мрежи, времето за зареждане е по-лесно, отколкото накъсано за настолни компютри, таблети и мобилни устройства.

Автор: Марк Билен

12. Музей на дизайна Дания

Уеб сайтове на WordPress: Датски музей на дизайна

Умното използване на паралакс превъртане и отзивчиви изображения правят сайта на Датския музей на дизайна задължителен

Построен от базираната в Копенхаген агенция за дизайн и брандиране Глупави студия , сайтът за Дания Музей на дизайна не само демонстрира архивите, колекциите и изследванията на музея, но също така го представя в модерен стил. От откриването на SVG анимацията на логото на музея до привличането на вниманието превъртане с паралакс и заместващи палитрата за повишаване на настроението, докато превъртате през съдържанието, това е идеалното присъствие онлайн за важна дестинация за дизайн.

13. Кейти Пери

Уеб сайтове на WordPress: Кати Пери

Дори големите знаменитости използват инструментите, предоставени от Wordpress

Поп принцесата Кейти Пери използва не друг, а WordPress, за да хоства официалния си уебсайт. Фокусирайки се - разбираемо - върху визуални ефекти и реплики в социалните медии, сайтът използва портфолио от високоспециализирани снимки на художника, за да направи смело изявление. Превъртете надолу, за да видите дати на обиколка, стоки и други, или използвайте иконите, за да откриете повече.

Това е изрязан, но остър сайт, който успява да съчетае отличителното лично изображение на балончетата с удобна за ползване, лъскава функционалност в стил маг. Отминаха дните на натоварените сайтове на групата, пълни с твърде много анимация и музика, които не можете да спрете. Уебсайт на Пери доказва, че можете да опаковате много личности, като използвате само прост бял фон и лесно навигационни връзки, като давате възможност на феновете да слушат, гледат и учат лесно и при тяхно удобство.

14. Резервоарът за мастило

Уеб сайтове на WordPress: Резервоар за мастило

Сайтът на Kao Collins е създаден, за да ви накара да мислите за мастилото

Започвайки през 1989 г. като Collins Inkjet, еднолична операция, доставяща мастило за непрекъснатия мастиленоструен принтер на Kodak, днес Kao Collins е един от водещите доставчици в света. И ако никога не сте мислили за мастило (освен да ругаете, когато принтерът ви свърши), сайтът на Kao Collins, The Ink Tank, е на път да промени това.

Построен от DBS Interactive , Резервоарът за мастило е привличащ вниманието сайт на WordPress, който извежда всички спирки, за да ви донесе модерни новини от мастилената индустрия и да покаже някои от креативните начини, по които бизнеса и художниците в момента използват мастило. Акцентът, що се отнася до нас, е неговият раздел „История на печата“: великолепен паралакс с един пейджър, пълен с анимация и ефекти, който ви отвежда от глинени таблети до днешния високоскоростен еднократен печат и гледа напред при някои от бъдещите възможности за печат.

Generate CSS - конференцията за уеб дизайнери: 26 септември, Rich Mix, Shoreditch, Лондон

писалка за рисуване на ipad air 2
(Кредит за изображение: бъдеще)

Прочетете още: