Jump to content

Оцените пробу пера на Wordpress...


chrom
 Share

Recommended Posts

Вот решил в тренировочных целях сверстать чего-нибудь. Потратил некоторую часть свободного времени на изучение Wordpress. Бесплатный шаблон нашёл на просторах интернета. Слегка его модифицировал на свой вкус. Вот что из этого вышло. Буду рад если услышу какие-нибудь конструктивные замечания, по  вёрстке, функциональности и т.д. - Так сказать  для учёта в будущем.

http://chrome3.zzz.com.ua

Link to comment
Share on other sites

2 часа назад, DivMan сказал:

504 Gateway Time-out

Я так понял 504 Gateway Time-out возникает когда сервер не может справиться с нагрузкой запросов. В принципе может быть. Сервер бесплатный со всеми вытекающими. Платным пока не обзавёлся...

Link to comment
Share on other sites

Сижу с телефона и сразу ясно, что дизайн не адаптивный. Успел увидеть, что у текста нету отступа слева(он как раз в притык к левой части экрана). А еще футер "не приклееный" к низу сайта.

А вообще дизайн не очень, сразу видно, что стандартный шаблон (стиль такой).

Ну это мое мнение, мне нрааиться совсем другой стиль.

Link to comment
Share on other sites

Привет! Если оценивать именно дизайн — то да, соглашусь с RealPeha, мне тоже не очень. Потому что:

  1. Общий стиль устаревший: много явно лишних деталей, слайдер в шапке неудобный.
  2. Размер заголовков на главной хромает: например, название секции "What I Can All Do" и подзаголовки этой секции набраны одним размером. В итоге на название вообще глаз внимание не обращает.
  3. Размер обычного текста мелковат: 13px, глазки жалко :)
  4. У формы контактов нет ярлыков к полям для ввода, это неудобно.
  5. В футере неожиданная ссылка на страницу прямо с абзаца текста.
  6. Красная строка у абзацев в статьях непривычна глазу.

Понравилась цветовая схема.

По верстке не знаю, к чему придраться, потому что нет исходного шаблона. Вроде порядок с виду. Кроме того, что не адаптивно :) А, ну и семантические теги main, nav не использованы.

Если говорить о работе сайта, то заметила:

  1. Из футера не работают ссылки на страницы блога.
  2. На ленте блога маловато записей, всего три. А дальше надо листать. Я бы побольше сделала.
  3. Там же нет перехода на страницу статьи по клику на картинку, я бы добавила.

В остальном, вроде обычный WP сайт. Вы его будете наполнять? :)

 

 

Link to comment
Share on other sites

41 минуту назад, RealPeha сказал:

Сижу с телефона и сразу ясно, что дизайн не адаптивный. Успел увидеть, что у текста нету отступа слева(он как раз в притык к левой части экрана). А еще футер "не приклееный" к низу сайта.

А вообще дизайн не очень, сразу видно, что стандартный шаблон (стиль такой).

Ну это мое мнение, мне нрааиться совсем другой стиль.

Ну так я и не ставил задачей сделать адаптивный дизайн. Цель была сверстать макет из PSD и посадить его на Wordpress. Отступы в контейнере прибавить не проблема. Так как верстал сразу без настроя на адаптивность смысла в них не видел. В принципе сейчас их добавлю. Ну а дизайн взял первый, что под руку подвернулся - ибо сам дизайн не рисую. Может подскажете сайты с крутыми бесплатными PSD шаблонами??? Футер тоже пожалуй на досуге приклею. Спасибо за советы. 

Link to comment
Share on other sites

1 час назад, RealPeha сказал:

 

40 минут назад, Svetlana_P сказал:

Привет! Если оценивать именно дизайн — то да, соглашусь с RealPeha, мне тоже не очень. Потому что:.........

Здравствуйте. Да я как бы сайт делал для тренировки. Учусь так сказать верстать. Дизайн простенький. Но я как бы и не дизайнер. Насчёт размеров текста тоже мысли возникали во время вёрстки. Но не было желания заморачиваться и что-то особо менять. На будущее возьму на заметку. Ссылочки на страницы в футере это промах. Подправлю. Ярлыки в форме контактов не ставил, т.к. есть placeholderы внутри полей "Your name", "Your email". Я как бы встречал подобные варианты форм, да и на исходнике так было. А вы считаете что ярлыки это Лучше???
Что касается ленты блога, то из админки их можно выставить их в любом количестве - К моей работе это отношения не имеет.

Спасибо за советы. Будет настроение и время, подправлю согласно всем вашим рекомендациям. Это минутное дело. Кроме адаптивности - нет пока желания(может после).

Edited by chrom
Link to comment
Share on other sites

13 часа назад, chrom сказал:

Может подскажете сайты с крутыми бесплатными PSD шаблонами???

Например, тут можно найти. Смотрите, где в заголовке есть PSD

http://www.bestpsdfreebies.com/freebies/ , https://stylemixthemes.com/freebies/

Еще в ежемесячной рассылке от HTML Academy приходит на почту по три шаблона. При чем не абы каких, а обычно красивых и, бывает, нестандартных. Подписаться можно здесь https://htmlacademy.ru/email

12 часа назад, chrom сказал:

Ярлыки в форме контактов не ставил, т.к. есть placeholderы внутри полей "Your name", "Your email". Я как бы встречал подобные варианты форм, да и на исходнике так было. А вы считаете что ярлыки это Лучше???

Лучше, чтобы было и то, и другое. У label и placeholder разные функции. Ярлык, label — подпись к полю, чтобы было ясно, что вводить. А placeholder призван подсказать, в каком виде вводить данные. При использовании только placeholder неудобство в том, что когда поле в фокусе, не остается указателя, что туда вводить.

12 часа назад, chrom сказал:

Спасибо за советы. Будет настроение и время, подправлю согласно всем вашим рекомендациям. Это минутное дело. Кроме адаптивности - нет пока желания(может после).

По-моему, получилось хорошо. Раз сами сверстали и впервые натянули шаблон на WP, то всё выполнено, и Вы молодец :) 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Mondeus
      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. 
      .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  

    • By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • By its_a_me_mario
      При нажатии на кнопку отправления в форме независимо есть ли текст в форме или нет в любом случае редиректит на главную страницу. Ни письма на почте, ни возникающих ошибок в форме нет.
      json rest api включен
      откатывал contact form 7 до более ранних версий
      smpt плагин настроен
      все остальные плагины поочерёдно отключал
      ни что не помогает
      если отправлять письма с чистого php соответствующей функцией, то письма доходят до почты
      в консоли ошибок нет
      Заранее спасибо, мучаюсь два дня
    • By Andy_Code
      Здравствуйте! Проблема заключается в следующем: есть стартовый шаблон от "Фрилансера по жизни" версии 2021 года, открываю в VSCode, ввожу в терминале npm i затем gulp, все срабатывает как и должно, создается папка с результатом, начинаю прописывать стили для header, задаю ограничивающий контейнер и при проверке работоспособности данного контейнера выясняется, что стили, прописанные мной перекрывают стили медиа-запросов, прописанных в шаблоне и по итогу адаптив не работает, получается что итоговый css собирается в не правильном порядке! Подскажите, пожалуйста, как подобную проблему можно исправить?)
    • By vladdvin
      Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал
      CSS
      В результате отображается следующая картинка

      в режиме инструментов разработчика. А вне режима вообще отображает

      Подскажите как добиться отображения текста как на макете.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy