Ang layout ng tile ay isa sa pinakasikat. Hindi alam kung ano ito? Isipin ang Pinterest, Windows' Metro, atbp. Upang ipaliwanag ito sa mga salita, isipin ang nakatutuwang epekto ng pagkonekta ng mga bloke ng iba't ibang laki sa isang aesthetically ordered, madalas na pattern ng checkerboard.

Ang naka-tile na layout ay walang bago. Kaya bakit natin siya pinag-uusapan ngayon? Pagkatapos ng lahat, may mga mahusay na solusyon para sa pagkamit ng epekto ng isang naka-tile na layout? Kumain. Ngunit maaari ba nating gawin ang dalisay na solusyon sa CSS nang kaunti pa? Maaari ba nating gamitin ang flexbox upang makamit ang ninanais na epekto?

Ang pinakasimpleng tile

Magsimula tayo sa pangunahing layout. Isipin ang isang istraktura ng DOM na tulad nito para sa aming layout:

Gusto naming magdagdag ng mga column sa aming content. Maaari ba tayong makamit kahit isang simpleng naka-tile na epekto ng layout batay sa aming istraktura ng DOM na may kaunting pagsisikap gamit lamang ang mga CSS3 na column o flexbox?

Ano ang multi-column layout at flexbox?

Sinusubukan ang isang multi-column na layout

Ang CSS para sa mga multi-column na layout ay may column-count at column-gap properties. Ginagawa nitong medyo madali upang lumikha ng isang pangunahing naka-tile na layout. Mangyaring tandaan na sa layout mahalaga gamitin ang break-inside property sa mga bloke na may nilalaman. Pipigilan nito ang mga nilalaman ng mga bloke na mahati at maipamahagi sa pagitan ng mga haligi. Ang CSS para sa panimulang puntong ito ay:

Makikita mo ito sa pagkilos. Ito ay isang magandang simula at nagpapakita na ang mga katangian ng multi-column na layout ay kayang gawin ang mabigat na pag-angat para sa amin.

Sinusubukan ang Flexbox

Makakamit ba natin ang parehong resulta gamit ang Flexbox? Ito ay hindi kasing simple ng isang multi-column na layout. Nagkaroon ako ng mga problema kapag nilulutas ang parehong problema sa flexbox.

Sa aking unang pagsubok, gagayahin ko ang isang layout ng column gamit ang flex-direction: column . Ang problema sa paggamit ng halaga ng column ay kailangan mong itakda ang taas ng layout bago i-wrap ang mga column. Ngunit hindi ito perpektong opsyon, dahil ang anumang pag-apaw ay humahantong sa pahalang na pag-scroll. Kaya't kailangan mong harapin ang pag-scroll, o dapat mong ayusin ang taas ng layout, kung saan maaari mong ayusin ang lahat ng mabuti. Kung nagtatrabaho ka sa dynamic na content na iba-iba ang laki, kailangan mong patuloy na mag-alala tungkol sa pagkakahanay habang idinaragdag mo ito. Malinaw na hindi ito akma sa layunin ng flexbox.

Isaalang-alang ang sumusunod na halimbawa:

Masonry-layout ( display: flex; flex-direction: column; flex-wrap: wrap; padding: 10px; taas: 100vw; ) .masonry-layout__panel ( display: flex; flex: 1 1 auto; lapad: 33.3%; margin -ibaba: 10px; border-radius: 10px )

Kung handa kang magkaroon ng higit na kontrol sa iyong markup at layout, maaari mong makamit ang epekto na gusto mo sa Flexbox. Isaalang-alang ang sumusunod na istraktura:

Ang pagdaragdag ng mga column sa isang layout ay nagbibigay sa iyo ng karagdagang kontrol sa layout. Gayunpaman, kakailanganin mong mag-isip nang kaunti tungkol sa kung paano at saan mo inilalagay ang mga indibidwal na piraso ng nilalaman. Maaari mong makita ang diskarteng ito sa pagkilos.

Panalo ang layout ng multi-column

Tiyak na nakikinabang ang mga property para sa mga layout ng multi-column sa paggawa ng tile effect. Ito ay nakamit dahil sa pagiging simple at conciseness ng markup. Sa elementarya na mga kaso, ang kanilang mga kakayahan ay sapat. Bagaman may mga benepisyo mula sa parehong mga diskarte.

Masonry-layout ( column-count: 3; column-gap: 0; ) .masonry-layout__panel ( break-inside: avoid; padding: 5px; ) .masonry-layout__panel-content ( padding: 10px; border-radius: 10px; )

Tingnan natin ang code na ito. Ang aming mga panel ay dapat ding mga bloke. Kaya gagawa tayo ng kaunting refactoring.

Masonry-layout ( column-count: 3; column-gap: 0; ) .masonry-layout-panel ( break-inside: avoid; padding: 5px; ) .masonry-layout-panel__content ( padding: 10px; border-radius: 10px)

Ang aming pinakasimpleng tile ay may potensyal pa rin. Gagawin namin itong mas malamig at tutulungan kami ng Flexbox dito.

Mga naka-nest na cluster ng content

Ang pagdaragdag ng mga nested cluster sa aming layout ay maaaring masira nang kaunti ang nilalaman at bahagyang makagambala sa daloy, na aming layunin. Magagamit ito upang lumikha ng epekto ng nilalamang naglalaman ng mga column.

Ang mga cluster ay mahalagang mga nested na layout, na may patayo o pahalang na daloy. Ang Flexbox ay mahusay para dito.

Ang aming pangunahing layout ay hindi ganap na magkasya sa quad, ngunit ang mga kumpol ay dapat gawin ito dahil hindi namin nais na magkaroon ng mga walang laman na espasyo sa layout. Upang labanan ito, maaari naming itakda ang mga laki ng kumpol. Halimbawa, tulad nito:

Masonry-layout-panel--small ( height: 200px; ) .masonry-layout-panel--medium ( height: 300px; ) .masonry-layout-panel--large ( height: 400px; )

Ngunit hindi ito ganap na tamang diskarte. Ang pagtatakda ng mga sukat ay hindi angkop para sa bawat kaso. Mas mainam na ipakilala ang mga lalagyan na mala-kolum na napag-usapan natin kanina. Isaalang-alang ang sumusunod na opsyon:

Ang daloy ng mga kumpol ay maaaring pahalang o patayo. Kung pahalang ang daloy ng cluster, tinutukoy namin ang mga column na may mga segment na dumadaloy nang patayo at vice versa. Binago ito gamit ang flex-direction. Lumalaki/lumiliit ang mga segment ng cluster upang punan ang bakanteng espasyo, at gumagana ang mga cluster na parang mga bloke.

Kung kailangan namin ng mas pinong kontrol sa mga segment ng cluster, maaari kaming lumikha ng mga utility class upang itakda ang porsyento ng flex-basis. Hindi namin kailangan ang klase ng utility na "buong laki" dahil maaari lang naming isama ang isang elemento sa lalagyan at aabutin nito ang buong lapad o taas. Para sa "kalahati" magtatakda kami ng flex-basis: 50% . Ang bentahe ng pagpapatupad na ito ay ang kakayahang maglagay ng anumang bilang ng mga column o row, ayon sa pagkakabanggit.

Ano kaya ang hitsura ng code? Bilang kahalili:

Masonry-layout-cluster ( display: flex; padding: 0; ) .masonry-layout-cluster--vertical ( flex-direction: row; ) .masonry-layout-cluster--horizontal ( flex-direction: column; ) . masonry-layout-cluster__segment ( display: flex; flex: 1 1 auto; ) .masonry-layout-cluster__segment--row ( flex-direction: row; ) .masonry-layout-cluster__segment--column ( flex-direction: column; ) .masonry-layout-cluster__segment--kalahati (flex-basis: 50%; ) .masonry-layout-cluster__segment--quarter ( flex-basis: 25%; )

Maaari mong makita ang code sa pagkilos. Ang mga nested cluster ay ang pinakamahirap na bahaging unawain, ngunit sa kanilang tulong mas madali nating malulutas ang ilang problema.

Theming at mga panel na may mga larawan

Ang aming gawain ay ihiwalay ang mga istilo ng istraktura ng layout mula sa mga istilo ng tema. Ginagawa nitong mas madaling gamitin ang code sa iba pang mga proyekto. Kung napanood mo ang mga demo ng code sa artikulong ito, mapapansin mong may mga pabilog na sulok ang mga panel ng nilalaman. Ginagawa ito sa pamamagitan ng pagdaragdag ng minimal na tema.

Masonry-layout-panel__content ( border-radius: 10px; overflow: hidden; padding: 10px; )

Paano ang tungkol sa mga imahe? Kadalasan kailangan mong magpakita ng mga larawan bilang magkahiwalay na mga panel sa isang tile. Kung maglalagay kami ng larawan sa loob ng isang panel, maaapektuhan ito ng mga padding na itinakda para sa aming tema. Kaya bakit hindi natin gamitin ang klase ng masonry-layout__panel-content na may modifier para sa imahe?

Ito ang halos kailangan natin. Kailangan mo lang magdagdag ng kaunting theming na partikular sa imahe at iyon na.

Masonry-layout-panel__content--img ( max-width: 100%; padding: 0; )

Maaari mong tingnan kung ano ang hitsura nito sa demo. Tandaan: Dahil ang mga pangalan ng klase ay may posibilidad na maging namamaga, ang mga pagdadaglat ay ginagamit sa mga halimbawa ng code. Halimbawa, ang masonry-layout ay nagiging ml , ang masonry-layout-cluster ay nagiging ml-clstr . Ang mga placeholder ng imahe ay ipinapakita sa dilaw.

Naka-hover ang mga animating panel

Paano ang tungkol sa paggawa ng aming mga panel na tumugon sa mga aksyon ng user? Maaari naming gawing paikutin ang mga panel at magpakita ng karagdagang nilalaman sa hover. Upang gawin ito, ipinapatupad namin ang aming panel sa anyo ng isang card na may nilalaman. Sa pamamagitan ng pagdaragdag ng mga lalagyan ng nilalaman sa magkabilang panig. Ang lahat ng ito ay nangangailangan sa amin na itakda ang taas ng aming mga panel, upang magamit namin ang mga klase ng utility upang itakda ang taas, tulad nito:

Masonry-layout-flip--medium ( height: 300px; )

Well, isang bagong bloke para sa pagbabalik ng mga card:

Gamit ang CSS transforms at transition, magdaragdag kami ng hover animation sa aming mga panel na mag-flip at magpapakita sa likod na bahagi.

/* CSS PARA SA MGA FLIPPER PANELS */ .masonry-layout-flip ( perspective: 1000; ) .masonry-layout-flip:hover .masonry-layout-flip__content ( transform: rotateY(180deg); ) .masonry-layout-flip- -md ( height: 300px; ) .masonry-layout-flip__panel ( backface-visibility: hidden; border-radius: 10px; height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; ) .masonry-layout-flip__panel--front ( transform: rotateY(0deg); z-index: 2; ) .masonry-layout-flip__panel--back ( transform: rotateY(180deg); ) .masonry-layout -flip__content ( taas: 100%; overflow: nakikita; posisyon: kamag-anak; transform-style: preserve-3d; transition: 0.25s; )

Makikita mo ang epektong ito sa unang elemento ng layout sa demo.

Hindi kami limitado sa mga flip panel. Maaari kaming magdagdag ng iba't ibang mga epekto sa mga panel kapag nakatutok. Sa huling code ay magdaragdag din ako ng ilang mga epekto.

Pagdaragdag ng kakayahang tumugon

Kung naabot mo na ito, malamang na napansin mo na ang aming naka-tile na layout ay anumang bagay ngunit cakey sa maliliit na screen. Gawin natin itong tumutugon. Ano ang gusto nating makuha? Habang lumalaki ang screen, gusto naming dagdagan ang bilang ng mga column sa layout. At kapag nabawasan ang screen, bilang karagdagan sa pagbabawas ng bilang ng mga haligi, i-disassemble namin ang mga kumpol, na nagpapahintulot sa kanilang mga segment na sakupin ang buong lapad ng layout. Siyempre, bubuo kami ng aming mga istilo simula sa mobile. Narito ang isang halimbawa na may tumutugon na bilang ng mga column:

/* COLUMN CHANGES */ .masonry-layout ( column-count: 1; column-gap: 0; ) @media (min-width: 768px) ( .masonry-layout ( column-count: 2; ) ) @media ( min-width: 1200px) ( .masonry-layout ( column-count: 3; ) )

Para sa mga nested cluster, babalewalain namin ang pahalang na daloy at flex-basis sa maliliit na screen. Gusto naming maghiwa-hiwalay ang mga kumpol at ang kanilang mga segment ay kunin ang buong viewport, hindi alintana kung sila ay mga column o row.

/* ANG CLUSTER FLOW AY BINALEWALA SA LOWER VIEWPORT */ @media (min-width: 768px) ( .masonry-layout-cluster__segment--row ( flex-direction: row; ) ) @media (min-width: 768px) ( .masonry -layout-cluster--vertical ( flex-direction: row; ) ) /* FLEX-BASIS AY BINALEWALA SA LOWER VIEWPORT */ @media (min-width: 768px) ( .masonry-layout-cluster__segment--half ( flex-basis : 50%; ) .masonry-layout-cluster__segment--quarter ( flex-basis: 25%; ) )

Makakakita ka ng demo ng code na ito.

Gumagamit kami ng isang preprocessor

Hindi na kailangang sabihin muli na ang paggamit ng mga preprocessor ay lubos na nagpapadali sa pagsulat ng mga estilo. Lubos kong inirerekomenda ang paggamit ng preprocessor kasabay ng mga tool upang magdagdag ng mga prefix ng vendor. Personal kong ginagamit ang Stylus, ang source code ay mas maliit kaysa sa mga pinagsama-samang estilo.

Kaya, para sa paghahambing, ang panghuling CSS code mula sa halimbawa sa artikulong ito (nang walang mga prefix at theming ng vendor, ginagamit ang mga pagdadaglat sa mga pangalan ng klase).

/* MASONRY CSS */ .ml ( box-sizing: border-box; column-count: 1; column-gap: 0; position: relative; ) .ml * ( box-sizing: border-box; ) @media ( min-width: 768px) ( .ml ( column-count: 2; ) ) @media (min-width: 1200px) ( .ml ( column-count: 3; ) ) .ml-pnl ( margin: 0; padding: 5px; ) @media (min-width: 768px) ( .ml-pnl ( break-inside: iwasan; ) ) .ml-pnl__cntnt ( border-radius: 10px; overflow: hidden; padding: 10px; width: 100%; ) .ml-pnl__cntnt--img ( max-width: 100%; padding: 0; ) .ml-flp ( perspective: 1000; ) .ml-flp:hover .ml-flp__cntnt ( transform: rotateY(180deg); ) .ml-flp--sm ( height: 200px; ) .ml-flp--md ( height: 300px; ) .ml-flp--lg ( height: 400px; ) .ml-flp__pnl ( backface-visibility: hidden; border-radius: 10px; kaliwa: 0; posisyon: absolute; .ml-flp__pnl--frnt (transform: rotateY(0deg); .ml-flp__pnl--bck 180deg); .ml-flp__cntnt ( taas: 100%;

overflow: nakikita;

posisyon: kamag-anak;

transform-style: preserve-3d;

Ang nabigasyon ay isang mahalagang elemento ng disenyo na tumutulong sa user na mabilis na ma-access ang mga bahagi ng site na kailangan nila. Sa artikulong ito, ipapaliwanag namin kung bakit ang pagpaplano ng nabigasyon ay nararapat na espesyal na pansin at ipapakita ang pinakamahusay na mga disenyo ng menu ng website.

Kapag napunta ang isang user sa iyong site sa unang pagkakataon, hindi nila makikita ang iyong home page. Maaaring nagmula siya sa isang query sa paghahanap o mag-click sa isang link sa isang produkto o artikulo sa isang social network. Samakatuwid, ang lahat ng mga pahina ng site ay dapat na may nabigasyon na magpapahintulot sa mga bisita na malaman ang tungkol sa pagkakaroon ng iba pang mga seksyon na potensyal na kawili-wili sa kanila. Halimbawa, ang anumang e-commerce na site ay dapat maglaman ng impormasyon tungkol sa mga tuntunin sa pagbabayad at paghahatid.

Ang isang magandang website ay hindi magagawa nang walang nabigasyon para sa mga sumusunod na dahilan:

1. Tinutulungan ka nitong maunawaan kung tungkol saan ang site nang hindi dumadaan sa lahat ng pahina.
2. Ginagawang lohikal at maayos ng nabigasyon ang site, at pinapabuti nito ang kakayahang magamit.
3. Hinihikayat ng nabigasyon ang gumagamit na manatili sa paligid upang galugarin ang iba pang mga seksyon.
4. Ang mahusay na nabigasyon ay mabuti para sa SEO dahil nakakatulong ito sa mga crawler ng search engine na i-index ang nilalaman ng iyong site.

Hinati namin ang mga napiling halimbawa ng disenyo ng menu sa tatlong grupo: pahalang, patayo at drop-down (drop-down). Gayunpaman, maraming uri ng mga menu ang maaaring gamitin nang sabay-sabay sa isang website - depende ang lahat sa kung gaano kalawak ang istraktura nito.

Pahalang na menu

Ang pahalang na menu ay angkop para sa mga site na may maliit na bilang ng mga seksyon, pati na rin sa mga site na may isang hanay. Karaniwan itong matatagpuan sa ilalim o sa itaas ng header. Narito ang ilang mga pagpipilian sa disenyo para sa naturang menu:

Sa anyo ng mga link na may isang disenyo o iba pa:

Kasabay nito, mula sa punto ng kakayahang magamit, mahalagang i-highlight ang kasalukuyang seksyon sa menu upang maunawaan ng user kung saang bahagi ng site siya kasalukuyang matatagpuan:

Ang parehong naaangkop sa item kung saan nag-hover ang cursor. Sa halimbawang ito ito ay nasa Mga Tala:

Ang paggamit ng mga icon ay karaniwan din. Bilang karagdagan, kung minsan ang isang vertical na menu ay maaaring i-minimize at nagpapakita lamang ng mga icon:

Dahil sa katotohanan na ang mga vertical na menu ay maaaring tumanggap ng isang malaking bilang ng mga link, kung minsan sila ay lumalaki lamang sa napakalaking sukat. Sa ganitong mga kaso, dapat mong isaalang-alang ang paggamit ng patayo o pahalang na drop-down na menu.

Dropdown na Menu

Ang mga drop-down na menu ay angkop para sa mga site na may branched na istraktura: mga tindahan na may malawak na assortment at isang malaking bilang ng mga pangkat ng produkto. Tumutulong sila na itago ang mga subsection at hindi nakakalat sa espasyo ng site:

Ang isang espesyal na kaso ng isang drop-down na menu ay ang hamburger menu, na ginagamit ngayon hindi lamang sa mobile, kundi pati na rin sa mga desktop na bersyon ng mga site. Maaaring nakatago ang ilang mga punto dito:

O isang kumpletong hanay ng mga seksyon at subsection:

Ang halimbawa sa itaas ay gumagamit ng maraming puting espasyo upang gawing mas madaling basahin ang malaking bilang ng mga link.

Ang kawalan ng ganitong uri ng menu ay hindi ito nakikita, kaya ang pangalawang data ay inilalagay dito. Kasabay nito, dapat tiyakin ng taga-disenyo na nauunawaan ng user na ito ay isang menu:

At sa kaso ng pinagsamang mga uri ng menu, kakailanganin mong magpasya kung aling mga bahagi ng menu ang lalawak at naglalaman ng mga karagdagang subsection:

Ang malalaking drop-down na menu ay maaaring gumamit ng mga graphic na elemento upang makatulong na idirekta ang atensyon ng user. Halimbawa ng paggamit ng mga larawan sa isang pahalang na menu:

Sa patayong menu:

Karapat-dapat ding banggitin ang makabagong disenyo para sa mga menu ng website, na hindi pa naging laganap, ngunit may interes. Halimbawa, ang mga elemento ng nabigasyon sa website ng Unlabel ay matatagpuan sa lahat ng apat na panig ng nilalaman ng pangunahing pahina:

Ang opsyon sa pag-navigate na ito ay hindi maginhawang gamitin sa isang PC o laptop screen, dahil ang user ay kailangang gumawa ng napakaraming paggalaw ng kamay at mouse upang mag-navigate sa mga seksyon, ngunit ang natatanging menu na ito ay angkop para sa mga mobile device:

Ang ideya ng isang sliding menu ay kawili-wiling ipinatupad sa Wordie na tema para sa Wordpress:

Ang Issuefly web application site ay nagpapatupad ng kakayahang lumipat sa pagitan ng nabisita nang mga seksyon, na para bang sila ay mga bukas na bintana sa operating system, gamit ang hamburger menu:

Umaasa kami na ang mga halimbawa ng disenyo ng menu sa artikulong ito ay makakatulong sa iyo na maunawaan kung paano pahusayin ang iyong nabigasyon sa website.

Kami, ang studio, ay bumuo ng mga disenyo na may maginhawa at functional na nabigasyon at magiging masaya na lumikha ng isang website o application para sa iyong negosyo.

Maghanap

Ayon sa iyong kahilingan naka-tile na menu natagpuan 708 resulta

• Sa tutorial na ito, gagawa kami ng parallax effect slideshow gamit ang ilang CSS3 properties. Ang ideya ay ilipat ang posisyon ng dalawang larawan sa background habang nag-slide ang lalagyan ng slide.

  Tugma: 1

• Ang isang magandang kasanayan kapag nagtatrabaho sa WordPress ay ang ugaliing ayusin ang mga pag-upload ng file kapag kinakailangan lamang. Nalalapat ang prinsipyong ito sa parehong panig ng kliyente at mga tool ng administrator. Walang dahilan upang i-load ang mga file ng CSS at JavaScript para sa buong admin panel kapag kailangan mo lamang ang mga ito sa isang pahina. May tool ang WordPress na nagbibigay-daan sa iyong ipatupad ang functionality na ito sa isang function lang.

  Tugma: 1

• Ang sliding navigation bar na binuo gamit ang CSS3. Gumagamit ang panel ng mga larawan kung saan nagbabago ang transparency. Gagana ang panel sa mga browser ng IE, ngunit walang mga epekto.

  Tugma: 1

• Gumagamit kami ng HTML5 upang lumikha ng teksto na may mga 3D effect (gamit ang mga anino) at ayusin ito sa isang bilog. Isasagawa rin ang animation ng paggalaw ng mga titik.

  Tugma: 1

• Ang mga conditional na tag ay isa sa mga makapangyarihang tool na tumutulong na gawing mas madali ang pagbuo ng mga proyekto ng WordPress. Sa tutorial na ito, titingnan natin ang ilang mga conditional na tag at mga halimbawa ng mga function na gumagamit ng mga ito upang ipatupad ang iba't ibang mga gawain, tulad ng paglilinis ng pahina ng error o pagpapalit ng favicon para sa admin panel.

  Tugma: 1

• Ang mga dinamikong impormante ay nangangailangan ng pansin. Sa tuwing may pagbabagong nangyayari, kailangang maglaro ng visual effect para makita ng user kung ano ang nangyayari. Gamitin natin ang mga animation ng CSS3.

  Tugma: 1

• Marahil ay nakakita ka na ng mga naturang tagapagpahiwatig ng pag-load, lalo na sa mga site ng Flash. Ito ay isang sektor ng isang bilog na palaki nang palaki hanggang sa ito ay maging isang kumpletong bilog.

  Tugma: 1

• Sa tutorial na ito, magsasagawa kami ng isang serye ng mga eksperimento na may mga epekto kapag ini-hover ang cursor ng mouse sa isang bagay. Dahil may pag-aari ng pag-ikot sa mga sulok ng frame, maaari tayong lumikha ng mga bilog na hugis, at lalong lumalabas ang mga ito bilang mga elemento ng disenyo sa mga pahina ng website. Kahit sino ay maaaring gumamit ng mga ito, at ang mga thumbnail na hugis bilog ay mukhang kawili-wili kumpara sa mga regular na hugis-parihaba na larawan. At dahil ang mga bilog ay mga espesyal na hugis, gagawa kami ng ilang mga epekto na lilitaw kapag ini-hover mo ang iyong mouse sa ibabaw ng mga ito!

Mga uri ng pagpapakita ng katalogo

Upang i-configure ang uri ng pagpapakita ng mga produkto sa catalog, iyon ay, kung paano matatagpuan ang mga produkto sa window ng tindahan, kailangan mong pumunta sa panel ng administrasyon, menu item na "Mga Setting-Catalog ng Produkto" na tab na "General" (Fig. 1).

Larawan 2.

Isaalang-alang natin kung paano isasaayos ang produkto sa mga kategorya sa window ng tindahan, depende sa napiling uri.

Larawan 3.

Larawan 4.

Larawan 5.

Gayundin sa subsection na "Ipakita ang uri ng listahan ng produkto", sa linyang "Sa paghahanap (default)" maaari mong tukuyin kung anong uri ng display ang gagamitin para sa mga produkto sa mga resulta ng paghahanap.

Sa linyang “Ipakita ang mga kategorya sa ibabang menu”, lagyan ng check ang kahon kung gusto mong magpakita ng listahan ng mga kategorya sa ibabang menu ng site (sa footer ng site). Kung ang mga kategorya kasama ang karaniwang mga item sa ibabang menu ay hindi kailangan, huwag paganahin ang opsyon.

Larawan 6.

Bilang ng mga produkto sa isang pahina

Upang tukuyin kung gaano karaming mga produkto ang ipapakita sa isang kategorya sa isang pahina, kailangan mong pumunta sa panel ng administrasyon, menu item na "Mga Setting-Catalog ng Produkto" na tab na "General" (Fig. 7).

Larawan 7.

Sa seksyong "Pagpapakita ng mga produkto," sa linyang "Mga Produkto sa bawat pahina," tukuyin kung gaano karaming mga produkto ang ipapakita sa isang kategorya sa isang pahina.

Pagse-set up ng pagpapakita ng mga preview ng larawan sa catalog

Ang preview ay isang kopya ng isang imahe na pinaliit sa maliliit na laki para sa compact na presentasyon sa user. Ang mga preview ay kadalasang ginagamit sa mga online na tindahan, kapag sa isang pahina ay nakikita ng user ang isang serye ng maliliit na larawan na kumakatawan sa isang pinababang larawan ng produkto. Kapag nag-click ka sa preview, bubukas ang isang buo o pinalaki na larawan, kung saan makikita ang larawan nang mas mahusay at mas detalyado (Larawan 8).

Larawan 8.

Upang i-configure ang pagpapakita ng mga preview na larawan sa catalog, kailangan mong pumunta sa administration panel, menu item na "Mga Setting - Catalog ng Produkto". Sa seksyong "Display ng Produkto," sa linyang "Ipakita ang mga preview ng larawan," lagyan ng check ang kahon.

Larawan 9.

Kung pinagana ang opsyon sa kategorya, kapag nag-hover ka ng mouse sa ibabaw ng produkto, ipapakita ang ibang mga larawan ng produkto sa tabi ng pangunahing larawan ng produkto.

Pag-configure ng pagpapakita ng bilang ng mga larawan sa catalog

Upang i-configure ang pagpapakita ng bilang ng mga larawan sa catalog ng isang produkto, kailangan mong pumunta sa panel ng administrasyon, menu item na "Mga Setting - Catalog ng Produkto". Sa seksyong “Ipakita ang mga produkto,” sa linyang “Ipakita ang bilang ng mga larawan,” lagyan ng check ang kahon (Larawan 10).

Larawan 10.

Tinutukoy ng opsyong ito kung magpapakita o hindi ng maliit na icon na may bilang ng mga larawan ng produkto sa catalog (Larawan 11).

Larawan 11.

Pag-set up ng pagpapakita ng mga produkto sa stock out of stock

Upang i-configure ang pagpapakita ng lahat ng mga produkto o mga produkto lamang na nasa stock, kailangan mong pumunta sa panel ng administrasyon, menu item na "Mga Setting - Catalog ng Produkto" na tab na "Pangkalahatan". Sa seksyong "Pagpapakita ng mga produkto," sa linyang "Ipakita lamang sa stock," lagyan ng check ang kahon.

Larawan 12.

Kapag pinagana ang opsyong ito, hindi ipapakita ng catalog ang mga produkto na wala sa stock.

Pagse-set up ng pagpapakita ng mga produkto sa catalog ayon sa pag-uuri

Upang magpakita ng produkto sa catalog, maaari mong itakda ang pag-uuri, halimbawa, ayon sa pangalan, ayon sa presyo (pataas o pababa), ayon sa rating, atbp.

Upang itakda ang pag-uuri, kailangan mong pumunta sa panel ng administrasyon, ang tab na "Catalogue". I-click ang pindutang "I-edit" (Larawan 13) at sa bloke na "Display - Default na pag-uuri" piliin ang naaangkop na pag-uuri (Larawan 14).

Larawan 13.

Larawan 14.

Kaya, gamit ang mga opsyon na tinalakay sa artikulo, maaari mong i-configure ang pagpapakita ng mga kalakal sa isang form na maginhawa para sa iyo at sa iyong mga customer.

Handa na ang lahat.

Paano itago ang pagpapakita ng isang artikulo sa isang catalog

Kapag tinitingnan ang catalog, ang numero ng artikulo ay ipinapakita sa ilalim ng pangalan ng produkto (Larawan 15), kung kinakailangan, maaari itong itago.

Larawan 15.

Upang gawin ito, pumunta sa panel ng administrasyon, menu item na "Mga Setting" -> "Catalog ng Produkto" (Larawan 16.1), pagkatapos ay ang tab na "Pangkalahatan" (Larawan 16.2).

Larawan 16.1.

Larawan 16.2.

Larawan 17.

Larawan 18.

Larawan 19.

At ayon dito, alisan ng tsek ang linyang ito kung ayaw mong ipakita ang rating ng produkto sa card ng produkto.

Hindi pagpapagana ng pagpapakita ng mga kulay sa catalog

Tingnan natin kung paano hindi paganahin ang pagpapakita ng mga kulay sa catalog.

Ang mga kulay sa catalog ay ipinapakita bilang mga sumusunod (Larawan 20).

Larawan 20.

Upang ang mga kulay ay maipakita lamang sa card ng produkto, wala sila sa catalog, kailangan mong pumunta sa menu item na "Mga Setting" - "Catalog ng Produkto" (Fig. 20.1), ang tab na "General", ang "Laki at Kulay" na seksyon, at alisan ng check ang kahon na "Isaalang-alang ang iba't ibang mga presyo, kulay, mga larawan ng isang produkto sa katalogo ng kliyente (higit pang mapagkukunan ang kinakailangan)" (Fig. 20.2)

Larawan 20.1

Larawan 20.2

I-save ang mga pagbabago at suriin sa bahagi ng kliyente, ang kulay ay hindi ipinapakita sa catalog (Larawan 21)

Larawan 21.

Upang ilipat ang mga out-of-stock na produkto sa dulo ng listahan sa pahina ng catalog, kailangan mong pumunta sa administration panel, menu item na "Settings->Catalog - tab na "General" (Fig. 22, p. 3).

Larawan 22.

Kapag na-activate ang opsyong ito, ang mga produktong "out of stock" ay ililipat sa dulo ng listahan, anuman ang napiling pag-uuri.

Ang isa sa mga pangunahing pagkakaiba sa pagitan ng Windows 10, na kapansin-pansin sa mga gumagamit, at mga nakaraang bersyon ay ang pagbabago sa interface ng operating system. Sasabihin namin sa iyo kung paano i-customize ang Start menu sa Windows 10 para sa iyong sarili para sa komportableng trabaho sa system.

Estilo ng Metro: bagong pagpapatupad

Ang graphical na interface ng Windows OS, na tinatawag na Metro, ay pinalitan ang Aero ilang taon na ang nakalilipas, nang ang mobile OS ng Microsoft at desktop na Windows 8 ay ipinakilala sa halip na mga makintab na icon, ang kumpanya ay nagpakilala ng isang bagong format ng menu na binubuo ng mga hugis-parihaba na tile.

Ang interface na ito ay naging napaka komportable para sa mga may-ari ng mga mobile device (smartphone at tablet) na nilagyan ng mga touch screen. Ngunit ang mga gumagamit ng mga desktop PC at laptop ay may magkahalong reaksyon sa pagbabago. Ang pag-navigate sa naka-tile na menu gamit ang isang mouse ay naging kapansin-pansing mas mahirap kaysa sa paggamit ng touchscreen, at ang ilang mga tao ay salungat sa pagbabago.

Gayunpaman, dahil sa lumalaking katanyagan ng mga touch screen sa angkop na lugar ng mga laptop at desktop computer, dapat nating asahan na ang katanyagan ng interface ng Metro ay tataas lamang.

Ang Start Menu ay bumalik

Ang Start menu ay naging mahalagang bahagi ng interface ng Windows OS sa loob ng maraming taon, ngunit noong 2012 napagpasyahan na iwanan ang paggamit nito pabor sa Metro desktop. Hindi lahat ay nasiyahan sa pagbabagong ito, at sa pinakabagong bersyon ng kanilang OS, nagpasya ang Microsoft na ibalik ito, na makabuluhang napabuti ito.

Nagkaroon ng maraming debate tungkol sa kung kailangan ang Start menu sa bersyon 10 ng Windows, ngunit ang karamihan ng mga user ay pabor sa pangangailangang ibalik ang elemento ng interface na ito. Hindi alam kung nakinig ang Microsoft sa mga opinyon ng mga user, o ginabayan ng ergonomya, ngunit, sa isang paraan o iba pa, ang binagong Start menu ay bumalik.

Ang pangunahing pagkakaiba sa pagitan ng bagong pagpapatupad ng elemento ng interface na ito ay ang kumbinasyon ng mga klasikong item sa menu at mga live na tile. Lumawak din ang mga opsyon sa pagpapasadya: ngayon ay mako-customize ng lahat ang Start menu para sa kanilang sarili.

Pagse-set up ng naka-tile na interface sa Start

Hindi tulad ng mga klasikong icon na responsable para sa pagtawag sa mga application, ang mga tile ay mga interactive na elemento. Magagamit ang mga ito hindi lamang bilang isang shortcut, ngunit nagsisilbi rin upang ipakita ang may-katuturang impormasyon mula sa application.

Ito ay maaaring ang taya ng panahon, ang bilang ng mga hindi pa nababasang mensahe, mga foreign exchange rate, mga abiso sa serbisyo.

Ang pag-andar ng mga live na tile sa bagong OS ay nanatili sa antas ng Windows 10; Upang i-customize ang mga tile, i-right-click lamang sa icon. Maaari mong i-edit ang laki, kulay, i-on o i-off ang animation, ipadala ang icon sa taskbar, o alisin ang icon sa Start.

Upang magdagdag ng bagong tile ng application, hanapin ito sa listahan ng programa at i-right-click ang pangalan nito. Mula sa pop-up na menu, piliin ang "I-pin sa Home Screen."

Dapat gawin ang mga katulad na operasyon para mag-alis ng tile, kailangan mo lang piliin ang opsyong "I-unpin mula sa Start Screen".

Upang mabago ang lokasyon ng icon sa menu, kailangan mong i-right-click ang tile at i-drag ito sa nais na lokasyon.

Pag-customize ng laki

Ang mga gumagamit ay may kakayahang baguhin hindi lamang ang lokasyon, kundi pati na rin ang laki ng mga tile. Mayroong ilang mga pagpipilian sa laki na magagamit para sa bawat icon. Depende sa kanila, ang pag-andar ng tile ay nagbabago din: sa pinakamababang sukat nito, ang tile ay nagsisilbi lamang upang tawagan ang programa, ngunit kapag pinalaki, maaari rin itong magamit bilang isang elemento ng output. Kung gaano karaming impormasyon ang maipapakita ng isang icon, at sa anong format ito gagawin, depende sa laki nito.

Upang baguhin ang laki ng isang tile, kailangan mong i-right-click ito at piliin ang opsyong "Baguhin ang laki".

Ang mga tile ay maaaring hugis-parihaba o parisukat sa laki. Kung mas malaki ang sukat, mas malaki ang pag-andar, ngunit sa maliliit na screen ang pagkawala ng espasyo ay maaaring masakop ang lahat ng mga benepisyo nito.

Ang isang maliit na disbentaha ng mga tile ay kung ang laki ay nakatakda sa maliit at ang bilang ay kakaiba, magkakaroon ng mga walang laman na puwang sa menu. Maaari mong alisin ito sa pamamagitan ng pagbabago ng laki ng mga indibidwal na icon at lokasyon ng mga ito.

Pigilan ang mga pag-update ng tile

Ang pagtanggap ng iba't ibang mga notification mula sa mga application sa real time ay medyo maginhawa. Ngunit kung minsan ang mga developer ay nagbabayad ng labis na pansin sa tampok na ito, at bilang isang resulta, ang gumagamit ay patuloy na ginulo ng hindi gaanong mahalagang mga mensahe ng programa. Upang maiwasan ito, ang Mga Setting ng Start Menu ay nagbibigay ng opsyon upang i-off ang mga notification mula sa mga indibidwal na tile.

Upang gawin ito, mag-right-click sa tile at piliin ang huling opsyon na "Huwag paganahin ang mga live na tile" mula sa pop-up na menu.

Pagkatapos nito, ang disenyo ng tile ay palaging mananatiling hindi nagbabago at ang mga nakakainis na mensahe ay hindi na makakaabala sa iyo.

I-customize ang Mga Kulay ng Start Menu

Ang background ng background sa Windows 10 ay maaaring baguhin sa parehong paraan tulad ng kulay ng mga indibidwal na tile. Upang gawin ito, mag-right-click saanman na hindi inookupahan ng icon at piliin ang item sa menu na "Pag-personalize".

Sa window na bubukas, maaari mong tukuyin ang kulay ng background sa Start menu, pati na rin baguhin ang ilang iba pang mga parameter. Maaari mong piliin hindi lamang ang kulay, kundi pati na rin ang saturation nito. Ang gumagamit ay maaaring pumili ng isang yari na scheme ng kulay, o ipasadya ito nang detalyado sa kanyang panlasa nang nakapag-iisa.

I-pin ang shortcut ng program sa screen ng Start menu

Kung gusto mo ng pinakamabilis na access sa isang app o program sa Start menu, maaari mo itong i-pin sa screen ng Start menu.

Upang gawin ito, mag-right-click sa shortcut ng program o application na kailangan mo sa iyong desktop. Pagkatapos nito, lilitaw ang isang pop-up menu, kung saan kailangan mong i-click ang "Pin to Start Screen". Maaari mo na ngayong buksan ang menu at baguhin ang lokasyon ng nilikhang tile sa pamamagitan ng paglipat nito sa pagitan ng mga grupo.

Gayundin, para sa isang bagong idinagdag na tile, maaari mong itakda ang pangalan ng pangkat kung saan ito matatagpuan. Mayroon ding reverse na proseso: maaari kang gumawa ng shortcut mula sa anumang tile na matatagpuan sa start screen sa pamamagitan ng pag-right click sa tile at pag-drag nito sa desktop.

Ang mga icon na naka-pin sa kaliwang bahagi ng Start ay madaling maalis mula doon, i-right-click lang at piliin ang mga opsyon na "Advanced" at "Huwag ipakita sa listahang ito."

Pagdaragdag ng mga espesyal na elemento

Ang tampok na ito ay naroroon din sa Windows 10, ngunit ang prinsipyo ng pagpapatakbo nito ay medyo naiiba sa pagdaragdag ng mga tile. Una sa lahat, dapat kang pumunta sa Desktop, at pagkatapos ay i-right-click sa isang walang laman na espasyo at piliin ang opsyon na "personalization". Sa lalabas na window, piliin ang tab na "Start" sa ibaba. Sa lalabas na dialog box, mahahanap mo ang isang listahan ng mga item na maaaring idagdag sa kaliwang kalahati ng Start.

Ibalik ang Start menu mula sa Windows 7

Hindi lahat ay nagustuhan ang na-update na interface ng Windows 10. Ang ilan ay matagal nang nasanay sa lumang hitsura ng OS, habang ang iba ay hindi gusto ang mga naka-tile na elemento ng Start. Sa kasong ito, ang mga developer ay nagbigay ng kakayahang ibalik ang menu sa klasikong hitsura, pamilyar sa lahat mula sa Windows 7. Maaari mong i-configure ang Start upang sa hitsura ay hindi ito naiiba sa bersyon ng OS mula sa Microsoft noong nakaraang taon.

Ang pinakamadaling paraan upang gawin ito ay alisin ang lahat ng mga live na tile. Sa kasamaang palad, hindi posible na i-disable ang mga ito sa ilang mga pag-click, kakailanganin mong tanggalin nang manu-mano ang bawat isa sa kanila. Pagkatapos ay maaari mong baguhin ang lapad ng kanang bahagi ng window upang ito ay i-collapse.

Ibinabalik ang Metro tiled menu

Maaaring makita ng mga may-ari ng mga small-screen na tablet na sanay sa Metro menu ang pagbabalik ng Start na hindi maginhawa sa kanilang device. Samakatuwid, ang mga developer ng Microsoft ay nagbigay ng kakayahang manu-manong i-activate ang Metro start screen sa OS.

Upang gawin ito, mag-right-click sa taskbar at piliin ang "personalization" mula sa pop-up menu. Sa window na bubukas, buksan ang tab na "Start" at paganahin ang opsyon na "Buksan ang Start screen sa buong screen". Sa huling build, hindi ka na ipo-prompt ng Windows na mag-log in muli at masisiyahan ka sa start menu na pamilyar sa Windows 8 nang hindi nire-reboot ang iyong PC.

Ano ang kailangan mong malaman bago mag-upgrade sa Windows 10

Bilang karagdagan sa mga kaakit-akit na pagbabago na nagustuhan na ng maraming mga gumagamit, ang bagong OS ay walang mga pagkukulang.

Kaya, sa ngayon, ang buong at walang error na suporta para sa lahat ng mga aparato na gumagana nang perpekto sa ilalim ng Windows 7 ay hindi pa naibigay. Pagkatapos ng lahat, na may limitadong trapiko o mababang bilis ng koneksyon, ang pag-download ng mga update ay maaaring magresulta sa mga karagdagang gastos o makaapekto sa kalidad ng pagba-browse sa Internet sa panahon ng pag-download.

Ang mga hindi gusto ang panghihimasok sa kanilang buhay ay maaaring maging maingat sa katotohanan na sinusuri ng OS ang pag-uugali ng gumagamit at nangongolekta ng impormasyon tungkol sa kanya. Ginagawa ito kapwa upang mapabuti ang trabaho at para sa mga layunin ng advertising, kaya maraming tao ang hindi nasisiyahan sa diskarteng ito.

Kaya, kapag nag-i-install ng bagong bersyon ng OS, dapat mong malaman ang mga tampok nito at tanggapin ang buong responsibilidad para sa hindi matatag na operasyon nito o ang pagpapakalat ng impormasyon ng user.