De betegelde lay-out is een van de meest populaire. Weet je niet wat het is? Denk aan Pinterest, Windows Metro, enz. Om dit in woorden uit te leggen, stel je het gekke effect voor van het verbinden van blokken van verschillende groottes in een esthetisch geordend, vaak schaakbordpatroon.
De betegelde lay-out is niets nieuws. Dus waarom hebben we het nu over haar? Er zijn immers uitstekende oplossingen om het effect van een tegelvloer te bereiken? Eten. Maar kunnen we de pure CSS-oplossing nog een stapje verder brengen? Kunnen we flexbox inzetten om het gewenste effect te bereiken?
De eenvoudigste tegel
Laten we beginnen met de basisindeling. Stel je een DOM-structuur als deze voor voor onze lay-out:
We willen kolommen aan onze inhoud toevoegen. Kunnen we met minimale inspanning zelfs een eenvoudig tegellay-outeffect bereiken op basis van onze DOM-structuur met alleen CSS3-kolommen of flexbox?
Wat is een meerkolomsindeling en flexbox?
Een lay-out met meerdere kolommen proberen
CSS voor lay-outs met meerdere kolommen heeft de eigenschappen column-count en column-gap. Hierdoor is het relatief eenvoudig om een eenvoudige tegellay-out te creëren. Houd er rekening mee dat dit in de lay-out staat belangrijk gebruik de break-inside eigenschap op blokken met inhoud. Dit voorkomt dat de inhoud van de blokken wordt gesplitst en verdeeld over de kolommen. De CSS voor dit startpunt zou zijn:
Je kunt dit in actie zien. Dit is een goed begin en laat zien dat lay-outeigenschappen met meerdere kolommen het zware werk voor ons kunnen doen.
Flexbox proberen
Kunnen we hetzelfde resultaat bereiken met Flexbox? Dit is niet zo eenvoudig als bij een lay-out met meerdere kolommen. Ik kwam problemen tegen bij het oplossen van hetzelfde probleem met flexbox.
Bij mijn eerste poging wilde ik een kolomindeling simuleren met behulp van flex-direction: column . Het probleem met het gebruik van de kolomwaarde is dat u de lay-outhoogte moet instellen voordat u de kolommen omloopt. Maar dit is geen ideale optie, omdat elke overloop leidt tot horizontaal scrollen. Je hebt dus óf te maken met scrollen, óf je moet de opmaakhoogte kunnen aanpassen, dan kun je alles mooi indelen. Als u werkt met dynamische inhoud die in grootte varieert, moet u zich voortdurend zorgen maken over de uitlijning terwijl u deze toevoegt. Dit past duidelijk niet bij het doel van flexbox.
Beschouw het volgende voorbeeld:
Metselwerk-indeling (weergave: flex; flex-richting: kolom; flex-wrap: wrap; opvulling: 10px; hoogte: 100vw; ) .metselwerk-indeling__panel (weergave: flex; flex: 1 1 auto; breedte: 33,3%; marge -onder: 10px; randradius: 10px )
Als u bereid bent meer controle te hebben over uw opmaak en lay-out, kunt u met Flexbox het gewenste effect bereiken. Beschouw de volgende structuur:
Door kolommen aan een lay-out toe te voegen, krijgt u extra controle over de lay-out. U zult echter een beetje moeten nadenken over hoe en waar u individuele stukjes inhoud plaatst. Je kunt deze aanpak in actie zien.
Lay-out met meerdere kolommen wint
Eigenschappen voor lay-outs met meerdere kolommen profiteren zeker van het creëren van een tegeleffect. Dit wordt bereikt dankzij de eenvoud en beknoptheid van de opmaak. In elementaire gevallen zijn hun mogelijkheden voldoende. Hoewel er voordelen zijn aan beide benaderingen.
Metselwerk-layout (kolomaantal: 3; kolomopening: 0; ) .metselwerk-layout__panel ( break-inside: vermijden; opvulling: 5px; ) .metselwerk-layout__panel-content (opvulling: 10px; randradius: 10px; )
Laten we naar deze code kijken. Idealiter zijn onze panelen ook blokken. Dus we zullen een kleine refactoring uitvoeren.
Metselwerk-layout (kolomaantal: 3; kolomopening: 0; ) .metselwerk-layout-paneel ( break-inside: vermijden; opvulling: 5px; ) .metselwerk-layout-paneel__content ( opvulling: 10px; randradius: 10px)
Onze eenvoudigste tegel heeft nog steeds potentieel. Wij gaan het koeler maken en Flexbox helpt ons hierbij.
Geneste inhoudsclusters
Het toevoegen van geneste clusters aan onze lay-out kan de inhoud een beetje opsplitsen en de stroom enigszins verstoren, wat ons doel is. Dit kan worden gebruikt om het effect te creëren van inhoud die kolommen bevat.
Clusters zijn in wezen geneste lay-outs, met verticale of horizontale stroom. Flexbox is hier ideaal voor.
Onze basisindeling past niet perfect in de quad, maar de clusters zouden dat wel moeten doen omdat we geen lege ruimtes in de indeling willen hebben. Om dit tegen te gaan, kunnen we de clustergroottes instellen. Bijvoorbeeld zoals dit:
Metselwerk-indeling-paneel--klein ( hoogte: 200px; ) .metselwerk-indeling-paneel--medium ( hoogte: 300px; ) .metselwerk-indeling-paneel--groot ( hoogte: 400px; )
Maar dit is niet helemaal de juiste aanpak. Het instellen van afmetingen is niet voor elk geval geschikt. Het zou beter zijn om de kolomachtige containers te introduceren die we eerder bespraken. Overweeg de volgende optie:
Hallo
Ja
Een paar coole foto's.
De stroom clusters kan horizontaal of verticaal zijn. Als de clusterstroom horizontaal is, definiëren we kolommen met segmenten die verticaal stromen en omgekeerd. Dit wordt gewijzigd met behulp van flex-richting. Clustersegmenten groeien/krimpen om de lege ruimte op te vullen, en clusters werken als blokken.
Als we een fijnere controle over de clustersegmenten nodig hebben, kunnen we nutsklassen maken om het flexbasispercentage in te stellen. We hebben de nutsklasse "volledige grootte" niet nodig, omdat we slechts één element in de container kunnen opnemen en dit de gehele breedte of hoogte in beslag neemt. Voor “de helft” stellen wij de flexbasis vast: 50%. Het voordeel van deze implementatie is de mogelijkheid om respectievelijk een willekeurig aantal kolommen of rijen te plaatsen.
Hoe zou de code eruit kunnen zien? Als een optie:
Metselwerk-indeling-cluster (weergave: flex; opvulling: 0; ) .metselwerk-indeling-cluster--verticaal (flex-richting: rij; ) .metselwerk-indeling-cluster--horizontaal (flex-richting: kolom; ) . metselwerk-indeling-cluster__segment (weergave: flex; flex: 1 1 auto; ) .metselwerk-indeling-cluster__segment--row ( flex-richting: rij; ) .metselwerk-indeling-cluster__segment--kolom (flex-richting: kolom; ) .metselwerk-indeling-cluster__segment--half ( flex-basis: 50%; ) .metselwerk-indeling-cluster__segment--kwart ( flex-basis: 25%; )
Je kunt de code in actie zien. Geneste clusters zijn het moeilijkst te begrijpen, maar met hun hulp kunnen we sommige problemen eenvoudiger oplossen.
Thema en panelen met afbeeldingen
Onze taak is om de lay-outstructuurstijlen te isoleren van de themastijlen. Dit maakt het gemakkelijker om de code in andere projecten te gebruiken. Als je de codedemo's in dit artikel hebt bekeken, zul je merken dat de inhoudspanelen afgeronde hoeken hebben. Dit wordt gedaan door minimale thema's toe te voegen.
Metselwerk-indeling-paneel__content (randradius: 10px; overloop: verborgen; opvulling: 10px; )
Hoe zit het met afbeeldingen? Vaak moet u afbeeldingen weergeven als afzonderlijke panelen in een tegel. Als we een afbeelding in een paneel plaatsen, wordt deze beïnvloed door de opvullingen die voor ons thema zijn ingesteld. Dus waarom gebruiken we de klasse masonry-layout__panel-content niet met een modifier voor de afbeelding?
Dit is bijna wat we nodig hebben. Je hoeft alleen maar een beetje beeldspecifiek thema toe te voegen en dat is alles.
Metselwerk-indeling-paneel__content--img ( max. breedte: 100%; opvulling: 0; )
Hoe het eruit ziet, kun je in de demo bekijken. Opmerking: Omdat klassenamen vaak opgeblazen worden, worden in de codevoorbeelden afkortingen gebruikt. Metselwerk-indeling wordt bijvoorbeeld ml en metselwerk-indeling-cluster wordt ml-clstr. Tijdelijke aanduidingen voor afbeeldingen worden geel weergegeven.
Panelen animeren tijdens het zweven
Hoe zit het met het laten reageren van onze panelen op gebruikersacties? We kunnen de panelen laten draaien en extra inhoud weergeven als u erover zweeft. Hiervoor implementeren wij ons panel in de vorm van een kaart met inhoud. Door aan beide zijden contentcontainers toe te voegen. Dit alles vereist dat we de hoogte van onze panelen instellen, zodat we gebruiksklassen kunnen gebruiken om de hoogte in te stellen, zoals dit:
Metselwerk-indeling-flip--medium ( hoogte: 300px; )
Nou, een nieuw blok voor het omdraaien van kaarten:
Hier is een gespiegeld beeld...
Met behulp van CSS-transformaties en -overgangen voegen we een hover-animatie toe aan onze panelen die omdraaien en de achterkant laten zien.
/* CSS VOOR FLIPPERPANELEN */ .masonry-layout-flip (perspectief: 1000; ) .masonry-layout-flip:hover .masonry-layout-flip__content ( transform: rotatieY(180deg); ) .masonry-layout-flip- -md ( hoogte: 300px; ) .metselwerk-indeling-flip__panel ( zicht op de achterkant: verborgen; randradius: 10px; hoogte: 100%; links: 0; overloop: verborgen; positie: absoluut; boven: 0; breedte: 100%; ) .metselwerk-indeling-flip__paneel--voorzijde ( transformatie: rotatieY(0deg); z-index: 2; ) .metselwerk-indeling-flip__paneel--achter ( transformatie: rotatieY(180deg); ) .metselwerk-indeling -flip__content ( hoogte: 100%; overloop: zichtbaar; positie: relatief; transformatiestijl: behouden-3d; overgang: 0,25s; )
Dit effect kun je zien op het eerste layout-element in de demo.
Wij beperken ons niet tot flippanelen. We kunnen verschillende effecten aan panelen toevoegen als we gefocust zijn. In de uiteindelijke code zal ik ook enkele effecten toevoegen.
Reactievermogen toevoegen
Als je zo ver bent gekomen, heb je waarschijnlijk gemerkt dat onze tegelindeling op kleine schermen allesbehalve cakey is. Laten we het responsief maken. Wat willen we krijgen? Naarmate het scherm groter wordt, willen we het aantal kolommen in de lay-out vergroten. En wanneer het scherm wordt verkleind, zullen we niet alleen het aantal kolommen verminderen, maar ook de clusters demonteren, waardoor hun segmenten de volledige breedte van de lay-out kunnen beslaan. Natuurlijk zullen we onze stijlen ontwikkelen, beginnend met mobiel. Hier is een voorbeeld met een responsief aantal kolommen:
/* KOLOMWIJZIGINGEN */ .masonry-layout (kolomaantal: 1; kolomopening: 0; ) @media (min-breedte: 768px) ( .masonry-layout (kolomaantal: 2; ) ) @media ( min-breedte: 1200px) ( .metselwerk-indeling (kolomaantal: 3; ) )
Voor geneste clusters negeren we de horizontale stroming en flexbasis op kleine schermen. We willen dat de clusters uiteenvallen en dat hun segmenten de gehele viewport in beslag nemen, ongeacht of het kolommen of rijen zijn.
/* CLUSTERSTROOM GENEGEERD BIJ ONDERSTE VIEWPORT */ @media (min-width: 768px) ( .masonry-layout-cluster__segment--row ( flex-direction: row; ) ) @media (min-width: 768px) ( .masonry -layout-cluster--verticaal (flex-richting: rij; ) ) /* FLEX-BASIS GENEGEERD BIJ ONDERSTE VIEWPORT */ @media (min-breedte: 768px) ( .masonry-layout-cluster__segment--half (flex-basis : 50%; ) .metselwerk-indeling-cluster__segment--kwart ( flex-basis: 25%; ) )
U kunt een demo van deze code bekijken.
Wij maken gebruik van een preprocessor
Het is niet nodig om nogmaals te zeggen dat het gebruik van preprocessors het schrijven van stijlen aanzienlijk vereenvoudigt. Ik raad ten zeerste aan om een preprocessor te gebruiken in combinatie met tools om leveranciersvoorvoegsels toe te voegen. Ik gebruik persoonlijk Stylus, de broncode is veel kleiner dan de gecompileerde stijlen.
Dus ter vergelijking de uiteindelijke CSS-code uit het voorbeeld in dit artikel (zonder leveranciersvoorvoegsels en thema's, er worden afkortingen gebruikt in klassenamen).
/* MASONRY CSS */ .ml ( box-size: border-box; column-count: 1; column-gap: 0; positie: relatief; ) .ml * ( box-size: border-box; ) @media ( min-breedte: 768px) ( .ml (aantal kolommen: 2; ) ) @media (min-breedte: 1200px) ( .ml (aantal kolommen: 3; ) ) .ml-pnl ( marge: 0; opvulling: 5px; ) @media (min-breedte: 768px) ( .ml-pnl (break-inside: vermijden; ) ) .ml-pnl__cntnt (randradius: 10px; overflow: verborgen; opvulling: 10px; breedte: 100%; ) .ml-pnl__cntnt--img ( max. breedte: 100%; opvulling: 0; ) .ml-flp ( perspectief: 1000; ) .ml-flp:hover .ml-flp__cntnt ( transformatie: rotatieY(180deg); ) .ml-flp--sm ( hoogte: 200px; ) .ml-flp--md ( hoogte: 300px; ) .ml-flp--lg ( hoogte: 400px; ) .ml-flp__pnl ( zichtbaarheid achterkant: verborgen; grensradius: 10px; links: 0; positie: absoluut; .ml-flp__pnl--frnt (transformeren: roterenY(0deg); index: 2; ) .ml-flp__pnl--bck (transformeren: roterenY( 180 graden); ) .ml-flp__cntnt ( hoogte: 100%; overloop: zichtbaar; positie: relatief; transform-stijl: behouden-3d; overgang: 0,25s; ) .ml-clstr (weergave: flex; opvulling: 0; ) .ml-clstr--vrt (flex-richting: kolom; ) @media (min-breedte: 768px) ( .ml-clstr--vrt ( flex- richting: rij; ) .ml-clstr--hrz (flex-richting: kolom; ) .ml-clstr__sgmnt (weergave: flex; overflow: verborgen; flex: 1 1 auto; ) .ml-clstr__sgmnt--rw (weergave: flex; flex-richting: kolom; ) @media (min-breedte: 768px) ( .ml-clstr__sgmnt--rw (flex-richting: rij; ) . ml-clstr__sgmnt--clmn (flex-richting: kolom; ) @ media (min-breedte: 768px) ( .ml-clstr__sgmnt--hlf ( flex-basis: 50%; ) .ml-clstr__sgmnt--qrt ( flex-basis: 25%; ) )
Conclusie
We hebben gekeken naar een techniek voor het maken van een tegellay-out met behulp van pure CSS. Ik vind het resultaat echt leuk. Pure CSS-tegels kunnen werken, hoewel ze niet foutloos zijn. Ik zie potentiële problemen. Het zal bijvoorbeeld lastig zijn als je een blog gesorteerd op datum wilt weergeven, dit vergt extra nadenken. Eén oplossing zou zijn om kolommen te gebruiken en deze vervolgens in chronologische volgorde in te vullen. Als gevolg hiervan staat de laatste invoer in de eerste kolom, de vorige in de tweede, enzovoort.
Ik ga verder met het werken aan de code, de resultaten worden op github geplaatst. Je kunt de repository met een pure ziel afsplitsen of experimenteren met de democode (aangezien je dit tot nu toe hebt gelezen, zul je in deze demo de beloofde extra hover-effecten vinden).
Navigatie is een belangrijk ontwerpelement waarmee de gebruiker snel toegang krijgt tot de delen van de site die hij nodig heeft. In dit artikel leggen we uit waarom navigatieplanning speciale aandacht verdient en laten we de beste websitemenu-ontwerpen zien.
Wanneer een gebruiker voor de eerste keer op uw site terechtkomt, ziet hij niet noodzakelijkerwijs uw startpagina. Hij kan uit een zoekopdracht komen of op een link naar een product of artikel op een sociaal netwerk klikken. Daarom moeten alle pagina's van de site navigatie hebben waarmee bezoekers meer te weten kunnen komen over het bestaan van andere secties die mogelijk interessant voor hen zijn. Elke e-commercesite moet bijvoorbeeld informatie bevatten over de betalings- en leveringsvoorwaarden.
Een goede website kan niet zonder navigatie om de volgende redenen:
- Het helpt u te begrijpen waar de site over gaat, zonder dat u alle pagina's hoeft te doorlopen.
- Door de navigatie ziet de site er logisch en overzichtelijk uit en wordt de bruikbaarheid verbeterd.
- De navigatie moedigt de gebruiker aan om rond te blijven hangen om andere secties te verkennen.
- Goede navigatie is goed voor SEO, omdat het de crawlers van zoekmachines helpt de inhoud van uw site te indexeren.
We hebben de geselecteerde menu-ontwerpvoorbeelden in drie groepen verdeeld: horizontaal, verticaal en drop-down (drop-down). Er kunnen echter verschillende soorten menu's tegelijkertijd op een website worden gebruikt - het hangt allemaal af van hoe uitgebreid de structuur is.
Horizontaal menu
Een horizontaal menu is geschikt voor sites met een klein aantal secties, maar ook voor sites met één kolom. Het bevindt zich meestal onder of boven de koptekst. Hier zijn enkele ontwerpopties voor een dergelijk menu:
In de vorm van links met het ene of het andere ontwerp:
Tegelijkertijd is het vanuit het oogpunt van bruikbaarheid belangrijk om de huidige sectie in het menu te markeren, zodat de gebruiker begrijpt in welk deel van de site hij zich momenteel bevindt:
Hetzelfde geldt voor het item waar de cursor overheen zweeft. In dit voorbeeld staat het in Notes:
Ook het gebruik van iconen is gebruikelijk. Bovendien kan een verticaal menu soms worden geminimaliseerd en alleen pictogrammen worden weergegeven:
Omdat verticale menu's een groot aantal links kunnen bevatten, groeien ze soms gewoon uit tot gigantische proporties. In dergelijke gevallen kunt u overwegen een verticaal of horizontaal vervolgkeuzemenu te gebruiken.
Drop-down menu
Uitklapmenu's zijn geschikt voor sites met een vertakte structuur: winkels met een breed assortiment en een groot aantal productgroepen. Ze helpen subsecties te verbergen en maken de siteruimte niet rommelig:
Een speciaal geval van een vervolgkeuzemenu is het hamburgermenu, dat nu niet alleen op mobiele apparaten wordt gebruikt, maar ook op desktopversies van sites. Er kunnen verschillende punten in verborgen zijn:
Of een complete set secties en subsecties:
In het bovenstaande voorbeeld wordt veel witruimte gebruikt om het grote aantal links gemakkelijker leesbaar te maken.
Het nadeel van dit type menu is dat het niet zichtbaar is en er dus secundaire gegevens in worden geplaatst. Tegelijkertijd moet de ontwerper ervoor zorgen dat de gebruiker begrijpt dat dit een menu is:
En in het geval van gecombineerde menutypen moet u beslissen welke delen van het menu worden uitgebreid en extra subsecties bevatten:
Grote vervolgkeuzemenu's kunnen grafische elementen gebruiken om de aandacht van de gebruiker te helpen richten. Voorbeeld van het gebruik van afbeeldingen in een horizontaal menu:
In het verticale menu:
Ook het vermelden waard is het innovatieve ontwerp van websitemenu's, dat nog niet wijdverspreid is, maar wel interessant is. De navigatie-elementen op de Unlabel-website bevinden zich bijvoorbeeld aan alle vier de zijden van de inhoud van de hoofdpagina:
Deze navigatiemogelijkheid is lastig te gebruiken op een pc- of laptopscherm, omdat de gebruiker te veel hand- en muisbewegingen zal moeten maken om door secties te navigeren, maar dit unieke menu is geschikt voor mobiele apparaten:
Het idee van een schuifmenu is interessant geïmplementeerd in het Wordie-thema voor Wordpress:
De Issuefly-webapplicatiesite implementeert de mogelijkheid om tussen reeds bezochte secties te schakelen, alsof het geopende vensters in het besturingssysteem zijn, met behulp van het hamburgermenu:
We hopen dat de voorbeelden van menuontwerp in dit artikel u zullen helpen begrijpen hoe u de navigatie op uw website kunt verbeteren.
Wij, de studio, ontwikkelen ontwerpen met handige en functionele navigatie en creëren graag een website of applicatie voor uw bedrijf.
Volgens uw verzoek betegelde menukaart gevonden 708 resultaten
-
In deze zelfstudie maken we een diavoorstelling met een parallaxeffect met behulp van verschillende CSS3-eigenschappen. Het idee is om de positie van twee achtergrondafbeeldingen te verplaatsen terwijl de diacontainer schuift.
Wedstrijd: 1
-
Een goede gewoonte bij het werken met WordPress is om er een gewoonte van te maken om bestandsuploads alleen te organiseren wanneer dat nodig is. Dit principe is van toepassing op zowel de client- als de beheerderstools. Er is geen reden om CSS- en JavaScript-bestanden voor het hele beheerderspaneel te laden als u ze maar op één pagina nodig heeft. WordPress heeft een tool waarmee je deze functionaliteit met slechts één functie kunt implementeren.
Wedstrijd: 1
-
Glijdende navigatiebalk gebouwd met behulp van CSS3. Het paneel gebruikt afbeeldingen waarvan de transparantie verandert. Het paneel werkt in IE-browsers, maar zonder effecten.
Wedstrijd: 1
-
We gebruiken HTML5 om tekst met 3D-effecten (met behulp van schaduwen) te maken en deze in een cirkel te rangschikken. Er zal ook een animatie van de beweging van de letters worden uitgevoerd.
Wedstrijd: 1
-
Voorwaardelijke tags zijn een van de krachtige tools die het ontwikkelen van WordPress-projecten eenvoudiger maken. In deze zelfstudie bekijken we verschillende voorwaardelijke tags en voorbeelden van functies die deze gebruiken om verschillende taken uit te voeren, zoals het opschonen van de foutpagina of het wijzigen van de favicon voor het beheerdersdashboard.
Wedstrijd: 1
-
Dynamische informanten hebben aandacht nodig. Elke keer dat er een verandering plaatsvindt, moet er een visueel effect worden afgespeeld, zodat de gebruiker kan zien wat er gebeurt. Laten we CSS3-animaties gebruiken.
Wedstrijd: 1
-
Je hebt waarschijnlijk dergelijke laadindicatoren gezien, vooral op Flash-sites. Dit is een sector van een cirkel die steeds groter wordt totdat het een volledige cirkel wordt.
Wedstrijd: 1
-
In deze tutorial zullen we een reeks experimenten uitvoeren met effecten wanneer u de muiscursor over een object beweegt. Omdat er een eigenschap bestaat om de hoeken van het frame af te ronden, kunnen we ronde vormen creëren, en deze verschijnen steeds vaker als ontwerpelementen op websitepagina's. Iedereen kan ze gebruiken, en ronde miniaturen zien er bijzonder interessant uit in vergelijking met gewone rechthoekige afbeeldingen. En omdat cirkels zulke bijzondere vormen hebben, creëren we een aantal effecten die verschijnen als je er met de muis overheen beweegt!
Soorten catalogusweergave
Om het type weergave van producten in de catalogus te configureren, dat wil zeggen hoe de producten in het winkelvenster worden geplaatst, moet u naar het beheerpaneel gaan, menu-item "Instellingen-Productcatalogus" tabblad "Algemeen" (Fig. 1).
Figuur 2.
Laten we eens kijken hoe het product in categorieën in de etalage wordt gerangschikt, afhankelijk van het geselecteerde type.
Figuur 3.
Figuur 4.
Figuur 5.
Ook in de subsectie "Weergavetype productlijst", in de regel "In zoeken (standaard)" kunt u opgeven welk type weergave u wilt gebruiken voor producten in zoekresultaten.
Vink in de regel “Categorieën weergeven in het onderste menu” het vakje aan als je een lijst met categorieën wilt weergeven in het onderste menu van de site (in de voettekst van de site). Als categorieën samen met de gebruikelijke items in het onderste menu niet nodig zijn, schakel dan de optie uit.
Figuur 6.
Aantal producten op één pagina
Om op te geven hoeveel producten er in een categorie op één pagina moeten worden weergegeven, gaat u naar het beheerpaneel, menu-item "Instellingen-Productcatalogus" tabblad "Algemeen" (Fig. 7).
Figuur 7.
Geef in het gedeelte 'Weergave van producten', in de regel 'Producten per pagina', op hoeveel producten er in een categorie op één pagina moeten worden weergegeven.
Instellen van de weergave van fotovoorbeelden in de catalogus
Een voorbeeld is een kopie van een afbeelding die is verkleind tot kleine formaten voor een compacte presentatie aan de gebruiker. Previews worden vaak gebruikt in online winkels, wanneer de gebruiker op een pagina een reeks kleine afbeeldingen ziet die een verkleinde afbeelding van het product vertegenwoordigen. Wanneer u op de preview klikt, wordt een volledige of vergrote afbeelding geopend, waarin de afbeelding beter en gedetailleerder kan worden bekeken (Fig. 8).
Figuur 8.
Om de weergave van voorbeeldfoto's in de catalogus te configureren, gaat u naar het beheerpaneel, menu-item "Instellingen - Productcatalogus". Vink in het gedeelte 'Productweergave', in de regel 'Fotovoorbeelden weergeven', het vakje aan.
Figuur 9.
Als de optie is ingeschakeld in de categorie en u met de muis over het product beweegt, worden andere foto's van het product weergegeven naast de hoofdafbeelding van het product.
Configuratie van de weergave van het aantal foto's in de catalogus
Om de weergave van het aantal foto's in de catalogus van een product te configureren, gaat u naar het beheerpaneel, menu-item "Instellingen - Productcatalogus". Vink in het gedeelte 'Producten weergeven', in de regel 'Aantal foto's weergeven' het vakje aan (Afb. 10).
Figuur 10.
Deze optie bepaalt of er al dan niet een klein pictogram wordt weergegeven met het aantal foto's van het product in de catalogus (Fig. 11).
Figuur 11.
Weergave van producten op voorraad instellen
Om de weergave van alle producten of alleen producten die op voorraad zijn te configureren, gaat u naar het administratiepaneel, menu-item "Instellingen - Productcatalogus" tabblad "Algemeen". Vink in het gedeelte 'Weergave van producten', in de regel 'Alleen op voorraad weergeven' het vakje aan.
Figuur 12.
Wanneer deze optie is ingeschakeld, worden in de catalogus geen producten weergegeven die niet op voorraad zijn.
Instellen van de weergave van producten in de catalogus volgens sortering
Om een product in de catalogus weer te geven, kunt u de sortering instellen, bijvoorbeeld op naam, op prijs (oplopend of aflopend), op beoordeling, enz.
Om de sortering in te stellen, gaat u naar het beheerpaneel, het tabblad "Catalogus". Klik op de knop "Bewerken" (Fig. 13) en selecteer in het blok "Display - Standaard sortering" de juiste sortering (Fig. 14).
Figuur 13.
Figuur 14.
Met behulp van de opties die in het artikel worden besproken, kunt u dus de weergave van goederen configureren in een vorm die geschikt is voor u en uw klanten.
Alles is klaar.
Hoe u de weergave van een artikel in een catalogus kunt verbergen
Bij het bekijken van de catalogus wordt het artikelnummer weergegeven onder de productnaam (Fig. 15); dit kan verborgen zijn.
Figuur 15.
Om dit te doen, moet u naar het beheerpaneel gaan, menu-item "Instellingen" -> "Productcatalogus" (Fig. 16.1) en vervolgens naar het tabblad "Algemeen" (Fig. 16.2).
Figuur 16.1.
Figuur 16.2.
Figuur 17.
Figuur 18.
Figuur 19.
En schakel deze regel daarom uit als u niet wilt dat de productbeoordeling op de productkaart wordt weergegeven.
Weergave van kleuren in de catalogus uitschakelen
Laten we eens kijken hoe u de weergave van kleuren in de catalogus kunt uitschakelen.
De kleuren in de catalogus worden als volgt weergegeven (Fig. 20).
Figuur 20.
Om ervoor te zorgen dat de kleuren alleen op de productkaart worden weergegeven, stonden ze niet in de catalogus, ga naar het menu-item "Instellingen" - "Productcatalogus" (Fig. 20.1), het tabblad "Algemeen", het sectie "Grootte en kleur" en verwijder het vinkje uit het vakje "Houd rekening met verschillende prijzen, kleuren, foto's van één product in de klantencatalogus (er zijn meer bronnen vereist)" (Fig. 20.2)
Figuur 20.1
Figuur 20.2
Sla de wijzigingen op en controleer het klantgedeelte, de kleur wordt niet weergegeven in de catalogus (Fig. 21)
Figuur 21.
Om producten die niet op voorraad zijn naar het einde van de lijst op de cataloguspagina te verplaatsen, gaat u naar het beheerpaneel, menu-item "Instellingen->Catalogus - tabblad "Algemeen" (Afb. 22, p. 3).
Figuur 22.
Wanneer deze optie geactiveerd is, worden producten die “niet op voorraad” zijn naar het einde van de lijst verplaatst, ongeacht de geselecteerde sortering.
Een van de belangrijkste verschillen tussen Windows 10, merkbaar voor gebruikers, en eerdere versies was de verandering in de interface van het besturingssysteem. We zullen u vertellen hoe u het Start-menu in Windows 10 zelf kunt aanpassen, zodat u comfortabel met het systeem kunt werken.
Metro-stijl: nieuwe implementatie
De grafische interface van Windows OS, genaamd Metro, verving Aero enkele jaren geleden, toen Microsoft's mobiele besturingssysteem en desktop Windows 8 werden geïntroduceerd. In plaats van glanzende pictogrammen introduceerde het bedrijf een nieuw menuformaat bestaande uit rechthoekige tegels.
Deze interface bleek zeer comfortabel voor bezitters van mobiele apparaten (smartphones en tablets) uitgerust met touchscreens. Maar gebruikers van desktop-pc's en laptops reageerden dubbelzinnig op de innovatie. Navigeren door het betegelde menu met een muis bleek merkbaar moeilijker dan het gebruik van het touchscreen, en sommige mensen stonden vijandig tegenover de innovatie.
Gezien de groeiende populariteit van touchscreens in de niche van laptops en desktopcomputers mogen we echter verwachten dat de populariteit van de Metro-interface alleen maar zal toenemen.
Het Startmenu is terug
Het Start-menu is al jaren een integraal onderdeel van de Windows OS-interface, maar in 2012 werd besloten het gebruik ervan stop te zetten ten gunste van de Metro-desktop. Niet iedereen was blij met deze innovatie, en in de nieuwste versie van hun besturingssysteem besloot Microsoft het terug te geven, nadat het aanzienlijk was verbeterd.
Er was veel discussie over de vraag of het Start-menu nodig is in versie 10 van Windows, maar de meerderheid van de gebruikers was voorstander van de noodzaak om dit interface-element terug te geven. Het is niet bekend of Microsoft naar de mening van gebruikers heeft geluisterd of zich heeft laten leiden door ergonomie, maar op de een of andere manier is het aangepaste Start-menu teruggekeerd.
Het belangrijkste verschil tussen de nieuwe implementatie van dit interface-element is de combinatie van klassieke menu-items en live-tegels. De aanpassingsmogelijkheden zijn ook uitgebreid: nu kan iedereen het Startmenu voor zichzelf aanpassen.
Een betegelde interface instellen in Start
In tegenstelling tot klassieke iconen die verantwoordelijk zijn voor het aanroepen van applicaties, zijn tegels interactieve elementen. Ze kunnen niet alleen als snelkoppeling worden gebruikt, maar dienen ook om relevante informatie uit de applicatie weer te geven. Dit kunnen de weersvoorspelling zijn, het aantal ongelezen berichten, wisselkoersen, servicemeldingen.
De functionaliteit van live-tegels in het nieuwe besturingssysteem bleef op het niveau van Windows 10; Microsoft introduceerde geen zichtbare innovaties. Om de tegels aan te passen, klikt u met de rechtermuisknop op het pictogram. U kunt de grootte en kleur bewerken, animatie in- of uitschakelen, het pictogram naar de taakbalk sturen of het pictogram uit Start verwijderen.
Nieuwe tegels toevoegen en verwijderen
Om een nieuwe applicatietegel toe te voegen, zoekt u deze op in de lijst met programma's en klikt u met de rechtermuisknop op de naam ervan. Selecteer in het pop-upmenu 'Vastzetten op startscherm'.
Soortgelijke handelingen moeten worden uitgevoerd om een tegel te verwijderen, u hoeft alleen de optie “Losmaken van startscherm” te selecteren.
Om de locatie van het pictogram in het menu te wijzigen, klikt u met de rechtermuisknop op de tegel en sleept u deze naar de gewenste locatie.
Maataanpassing
Gebruikers hebben de mogelijkheid om niet alleen de locatie, maar ook de grootte van de tegels te wijzigen. Er zijn voor elk pictogram verschillende formaatopties beschikbaar. Afhankelijk hiervan verandert ook de functionaliteit van de tegel: bij de minimale grootte dient de tegel alleen om het programma op te roepen, maar vergroot kan hij ook als uitvoerelement worden gebruikt. Hoeveel informatie een pictogram kan weergeven, en in welk formaat, hangt af van de grootte ervan.
Om de grootte van een tegel te wijzigen, moet u er met de rechtermuisknop op klikken en de optie “Formaat wijzigen” selecteren.
De tegels kunnen rechthoekig of vierkant van formaat zijn. Hoe groter het formaat, hoe groter de functionaliteit, maar op kleine schermen kan het ruimteverlies alle voordelen hiervan dekken.
Een klein nadeel van tegels is dat als de grootte te klein is ingesteld en het aantal oneven is, er lege ruimtes in het menu zullen zijn. U kunt dit elimineren door de grootte van individuele pictogrammen en hun locatie te wijzigen.
Voorkom tegelupdates
Het is best handig om in realtime verschillende meldingen van applicaties te ontvangen. Maar soms besteden ontwikkelaars te veel aandacht aan deze functie, met als gevolg dat de gebruiker voortdurend wordt afgeleid door onbeduidende programmaberichten. Om dit te voorkomen, biedt Startmenu-instellingen een optie om meldingen van individuele tegels uit te schakelen.
Om dit te doen, klikt u met de rechtermuisknop op de tegel en selecteert u de laatste optie “Live tegels uitschakelen” in het pop-upmenu.
Hierna blijft het tegelontwerp altijd ongewijzigd en heb je geen last meer van vervelende berichten.
Pas de kleuren van het startmenu aan
De achtergrond van de achtergrond in Windows 10 kan op dezelfde manier worden gewijzigd als de kleur van individuele tegels. Om dit te doen, klikt u met de rechtermuisknop ergens waar het pictogram niet staat en selecteert u het menu-item "Personalisatie".
In het geopende venster kunt u de achtergrondkleur opgeven in het menu Start en enkele andere parameters wijzigen. U kunt niet alleen de kleur kiezen, maar ook de verzadiging. De gebruiker kan een kant-en-klaar kleurenschema kiezen of dit zelfstandig tot in detail naar zijn smaak aanpassen.
Maak een programmasnelkoppeling vast aan het Startmenuscherm
Als u de snelste toegang tot een app of programma in het Start-menu wilt, kunt u deze vastmaken aan het Start-menuscherm.
Om dit te doen, klikt u met de rechtermuisknop op de snelkoppeling van het programma of de applicatie die u nodig heeft op uw bureaublad. Hierna verschijnt een pop-upmenu waarin u op "Pin to Start Screen" moet klikken. U kunt nu het menu openen en de locatie van de gemaakte tegel wijzigen door deze tussen groepen te verplaatsen.
Voor een nieuw toegevoegde tegel kunt u ook de naam instellen van de groep waarin deze zich bevindt. Er is ook een omgekeerd proces: u kunt een snelkoppeling maken vanaf elke tegel op het startscherm door met de rechtermuisknop op de tegel te klikken en deze naar het bureaublad te slepen.
Pictogrammen die aan de linkerkant van Start zijn vastgezet, kunnen daar eenvoudig worden verwijderd; klik met de rechtermuisknop en selecteer de opties "Geavanceerd" en "Niet weergeven in deze lijst".
Bijzondere elementen toevoegen
Deze functie is ook aanwezig in Windows 10, maar het principe van de werking ervan verschilt enigszins van het toevoegen van tegels. Allereerst moet u naar het bureaublad gaan en vervolgens met de rechtermuisknop op een lege ruimte klikken en de optie ‘personalisatie’ selecteren. In het venster dat verschijnt, selecteert u onderaan het tabblad “Start”. In het dialoogvenster dat verschijnt, vindt u een lijst met elementen die aan de linkerhelft van Start kunnen worden toegevoegd.
Het Start-menu terugbrengen van Windows 7
Niet iedereen hield van de bijgewerkte interface van Windows 10. Sommigen zijn al lang gewend aan het oude uiterlijk van het besturingssysteem, terwijl anderen simpelweg niet van de betegelde elementen van Start houden. In dit geval hebben de ontwikkelaars de mogelijkheid geboden om het menu terug te brengen naar het klassieke uiterlijk, bekend bij iedereen uit Windows 7. U kunt Start zo configureren dat het qua uiterlijk niet verschilt van de versie van het besturingssysteem van Microsoft het jaar ervoor.
De eenvoudigste methode om dit te doen is door alle live-tegels te verwijderen. Helaas is het niet mogelijk om ze met een paar klikken uit te schakelen; je zult ze allemaal handmatig moeten verwijderen. Vervolgens kunt u de breedte van de rechterkant van het venster wijzigen, zodat het wordt samengevouwen.
We brengen het Metro-tegelsmenu terug
Eigenaren van tablets met een klein scherm die gewend zijn aan het Metro-menu, kunnen het lastig vinden om Start terug te sturen op hun apparaat. Daarom hebben Microsoft-ontwikkelaars de mogelijkheid geboden om het Metro-startscherm in het besturingssysteem handmatig te activeren.
Om dit te doen, klikt u met de rechtermuisknop op de taakbalk en selecteert u 'personalisatie' in het pop-upmenu. In het geopende venster opent u het tabblad "Start" en schakelt u de optie "Startscherm openen op volledig scherm" in. In de definitieve versie zal Windows u niet langer vragen om opnieuw in te loggen en kunt u genieten van het startmenu dat u kent van Windows 8 zonder uw pc opnieuw op te starten.
Wat u moet weten voordat u een upgrade naar Windows 10 uitvoert
Naast de aantrekkelijke innovaties die veel gebruikers al leuk vonden, is het nieuwe besturingssysteem niet zonder tekortkomingen.
Op dit moment is er dus nog geen volledige en foutloze ondersteuning voor alle apparaten die perfect werken onder Windows 7. Het onvermogen om automatische systeemupdates op de gebruikelijke manier uit te schakelen, kan ook veel gebruikers van streek maken. Bij beperkt verkeer of een lage verbindingssnelheid kan het downloaden van updates immers extra kosten met zich meebrengen of de kwaliteit van het surfen op internet tijdens de downloadperiode beïnvloeden.
Degenen die niet van inmenging in hun leven houden, zijn misschien op hun hoede voor het feit dat het besturingssysteem het gedrag van de gebruiker analyseert en informatie over hem verzamelt. Dit wordt zowel gedaan om het werk te verbeteren als voor reclamedoeleinden, dus veel mensen zijn niet blij met deze aanpak.
Wanneer u een nieuwe versie van het besturingssysteem installeert, moet u dus op de hoogte zijn van de functies ervan en de volledige verantwoordelijkheid nemen voor de onstabiele werking ervan of de verspreiding van gebruikersinformatie.
