Alle.bg / Блог

Картинките в дизайна на моя уебсайт

9 Януари 2020г.
Здравейте!

Радваме се, че отново сме заедно и през новата година. Предполагаме всеки от вас си е набелязал цели и планове, които желае да изпълни през 2020г. Пожелаваме ви, да ги постигнете по-скоро, по-лесно и да се забавлявате докато го правите. Една от целите, която ние си поставихме е да ви дадем още повече знания и инструменти, с които да се възползвате още по-успешно от ползите, които Интернет дава.

Започваме серия от статии, с които искаме да ви покажем, че не са нужни курсове и дипломи за да можете да управлявате качествен уебсайт. Вярваме, че със знанията, които ще придобиете ще можете да подобрите своите уебсайтове значително, при това с минимални усилия.

В тази статия ще поговорим за картинките/снимките във вашия уебсайт.

Вече сте запознати с инструментите за управление на съдържанието на Alle.bg и знаете, че е много лесно да добавите снимка или албум със снимки във вашия уебсайт. Можете да ги поставите в колони или да ги обградите с текст. Албумите разполагат също с няколко различни изгледа.

А знаете ли, че също толкова лесно, но с няколко клика в повече, можете да добавите картинки в дизайна на вашия уебсайт? Universal дизайнът например предоставя възможност за добавяне на лого и фонови картинки на почти всяка част от вашия уебсайт. Можете да поставите фонова картинка на цялата страница, на хедъра (горната част), на навигацията, на бутоните и т.н.

Нека разгледаме в детайли опцията за фон, която можете да намерите в настройките на дизайна на своя уебсайт.
Картинките в дизайна на моя уебсайт
С нея можете да:
  • Изберете фонов цвят
  • Добавите до 5 фонови картинки
  • Укажете различна визия при преминаване върху съответния елемент и при неговото натискане.

Избор на фонов цвят

Картинките в дизайна на моя уебсайт
С опцията за цвят избирате цвета на фона. Разполагате и с възможност да добавите прозрачност. В примера виждате стойността 100%, която показва че избраният цвят е без никаква прозрачност. Ако поставите стойност 50% ще получите полупрозрачност. Виждате и кода на избрания цвят. Можете да го копирате за да го поставите на друг елемент или да го изтриете за да премахнете фоновия цвят на елемента.

Избор на фонови картинки

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

При натискането върху фонова картинка ще видите списък с опции за всяка от тях:

Хоризонтална и вертикална позиция
Указват мястото, на което се позиционира фоновата картинка, спрямо страните на елемента. Ако са указани “Вляво” и “Отгоре”, картинката ще бъде позиционирана в горния ляв ъгъл на елемента. Ако са избрани стойности “В средата” и за двете опции, центърът на картинката ще съвпада с центъра на елемента.

Повторение
Фоновите картинки могат да се повтарят като по този начин може да се получи ефект на шарка. Ако добавите картинка със снежинка, ще можете автоматично да получите много снежинки.

Фиксирана
Тази опция е подходяща най-вече за фоновите картинки на целия прозорец. С нея ще можете да фиксирате фона, дори когато посетителят се насочи към долната част на страницата ви.

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

Преминаване върху елемента и натискане

Опциите “Изглед”, “Отгоре” и “Натискане” дават възможност да добавите напълно различен изглед на елемента при преминаване с мишката и при натискате. Те са подходящи за бутони (в главната навигация например) за да индикират, че въпросният елемент може да бъде натиснат. Не са подходящи за фоновете на статичните елементи като фона на цялата страница, хедъра и т.н. Използвайте ги внимателно, за да не прекрачите границата между ”функционален дизайн” и ”пречещ дизайн”.

Подготовка на картинките

Много често се налага обработка на картинките преди да ги добавите в настройките на дизайна на вашия уебсайт. Дори бихме го препоръчали, ако желаете да постигнете перфектна визия. А и операции като промяна на размера на снимка и добавяне на отстояния са лесни с програми като Paint (ако сте с Windows) и GIMP, които също така са и безплатни.

Препоръчваме ви и да обръщате внимание на размера на качените снимки. Когато снимате с мобилен телефон или фотоапарат, снимките обикновено са с размери по-големи от 1MB. Такива снимки са подходящи в съдържанието на вашия уебсайт (Alle.bg прави нужните оптимизации), но могат да бъдат много неподходящи за фонови картинки в дизайна на вашия уебсайт. Посетели с мобилни устройства и/или с бавен Интернет ще трябва да чакат повече време докато видят “рамката” на страницата, която са отворили. Форматът на снимката (PNG, JPG, GIF) също оказва влияние на размера. JPG форматът е подходящ за снимки, а PNG е подходящ за илюстрации.

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

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

Ще се радваме да споделите в коментарите вашите впечатления и резултати.

Коментари

timakatrade 15 Януари
Много писане и нищо не казвате,имам един елементарен въпрос ,създавам текст и отстрани на същото ниво искам да поставям снимка,за да се знае за кое се отнася текстано снимката отива отгоре, не отстрани.Искам да попитам това с цел ли е направено,за да се възползват клиентите от Вашата 'компентенция'.след като не могат сами да се справят.И не добавяйте,излишни екстри,защото не са екстри а само писане.За пореден път Ви пиша,че първоначалната версия,преди толкова години беше в пъти по-удобна.Чакам отговор.
Alle.bg 16 Януари
@timakatrade, можете да постигнете желания ефект използвайки елементите "Колони" или "Плаващо съдържание". В една от първите версии на Alle.bg наистина имаше елемент, който даваше възможност да поставите снимка и текст около нея. В момента това може да се постигне с елемента "Плаващо съдържание" - създавате първо него и после в него поставяте елемент "Снимка" и елемент "Текст". Той също дава възможност да поставите текст около всеки друг елемент или комбинация от елементи. На https://alle.bg/help/съдържание-елементи/плаващо-съдържание/ можете да видите нагледно как да го направите.