Responsiv layout responsive-layout
AEM gör att du kan ha en responsiv layout för dina sidor med Layoutbehållare -komponenten.
Detta tillhandahåller ett styckesystem som gör att du kan placera komponenter i ett responsivt rutnät. Rutnätet kan ändra layouten beroende på enhetens/fönstrets storlek och format. Komponenten används tillsammans med Layout läge, vilket gör att du kan skapa och redigera din responsiva layout beroende på enhet.
Layoutbehållaren:
-
Tillhandahåller vågrät fäst mot rutnät, tillsammans med möjligheten att placera komponenter i rutnätet sida vid sida och definiera när de ska komprimeras/omformas.
-
Använder fördefinierade brytpunkter (t.ex. för telefon, surfplatta osv.) så att du kan definiera vad som krävs för innehåll för relaterade enheter/orientering.
- Du kan till exempel anpassa komponentstorleken eller om komponenten kan visas på särskilda enheter.
-
Kan kapslas så att kolumnkontroll tillåts.
Användaren kan sedan se hur innehållet återges för specifika enheter med emulatorn.
AEM realiserar responsiv layout för dina sidor med en kombination av mekanismer:
-
Layoutbehållare komponent
Den här komponenten är tillgänglig i komponentwebbläsare och har ett rutnätsstyckesystem där du kan lägga till och placera komponenter i ett responsivt rutnät. Den kan också anges som standardstyckesystem på sidan.
-
När layoutbehållaren är placerad på sidan kan du använda Layout läge för att placera innehåll i det responsiva rutnätet.
-
Emulator
På så sätt kan du skapa och redigera responsiva webbplatser som ändrar layouten efter enhetens/fönstrets storlek genom att ändra komponenternas storlek interaktivt. Användaren kan sedan se hur innehållet återges med emulatorn.
Med dessa responsiva rutnätsmekanismer kan du:
- Använd brytpunkter för att definiera olika innehållslayouter baserat på enhetens bredd (relaterat till enhetstyp och orientering).
- Använd samma brytpunkter och innehållslayouter för att se till att innehållet är anpassat till storleken på webbläsarfönstret på skrivbordet.
- Använd vågrät fäst mot rutnät för att placera komponenter i rutnätet, ändra storlek efter behov och definiera när de ska komprimeras/omformas så att de ligger sida vid sida eller ovanför/nedanför.
- Dölj komponenter för specifika enhetslayouter.
- Uppnå kolumnkontroll.
Beroende på vilket projekt du arbetar med kan Layoutbehållaren användas som standardstyckesystem för sidorna eller som en komponent som kan läggas till på sidan via komponentwebbläsaren (eller båda).
Layoutdefinitioner, enhetsemulering och brytpunkter layout-definitions-device-emulation-and-breakpoints
När du skapar webbplatsinnehåll vill du se till att innehållet visas på rätt sätt för den enhet som används för att visa det.
AEM gör att du kan definiera layouter beroende på enhetens bredd:
-
Med emulatorn kan du emulera dessa layouter på en mängd olika enheter. Förutom enhetstypen är orienteringen vald av Rotera enhet kan påverka den markerade brytpunkten när bredden ändras.
-
Brytpunkter är de punkter som skiljer layoutdefinitionerna åt.
- De definierar effektivt den maximala bredden (i pixlar) för alla enheter med en viss layout.
- Brytpunkterna är vanligtvis giltiga för ett urval enheter, beroende på vilken bredd de visas på.
- Intervallet för en brytpunkt sträcker sig åt vänster till nästa brytpunkt.
- Du kan inte markera brytpunkten specifikt. Om du väljer en enhet och orientering väljs automatiskt rätt brytpunkt.
Enheten Skrivbord, som inte har någon specifik bredd, relaterar till standardbrytpunkten (d.v.s. allt ovanför den senast konfigurerade brytpunkten).
När du använder emulatorn väljer du en specifik enhet för emulerings- och layoutdefinition och den relaterade brytpunkten markeras också. Alla layoutändringar du gör gäller för andra enheter som brytpunkten gäller för, dvs. enheter som är placerade till vänster om den aktiva brytpunktsmarkören, men före nästa brytpunktsmarkör.
När du t.ex. väljer enheten iPhone 6 Plus (definierat med en bredd på 540 pixlar) för emulering och layout, brytpunkten Telefon (definierat som 768 pixlar) aktiveras också. Alla layoutändringar du gör för iPhone 6 kommer att gälla för andra enheter enligt Telefoner brytpunkt, som iPhone 5 (definierat som 320 pixlar).
Välja en enhet som ska emuleras selecting-a-device-to-emulate
-
Öppna den sida du vill redigera. Till exempel:
http://localhost:4502/editor.html/content/we-retail/us/en/experience.html -
Välj Emulator ikonen i det övre verktygsfältet:
-
Emulatorverktygsfältet öppnas.
Emulatorverktygsfältet innehåller ytterligare layoutalternativ:
- Rotera enhet - Du kan rotera en enhet från lodrät (stående) orientering till vågrät (liggande) orientering och tvärtom.
- Välj enhet - Definiera en specifik enhet som ska emuleras från en lista (mer information finns i nästa steg)
-
Om du vill välja en specifik enhet som ska emuleras kan du antingen:
- Använd ikonen Välj enhet och välj i en nedrullningsbar väljare.
- Tryck/klicka på enhetsindikatorn i emulatorns verktygsfält.
-
När en viss enhet har valts kan du:
- Se den aktiva markören för den valda enheten, till exempel iPad.
- Se den aktiva markören för lämplig brytpunkt som Tablet.
- Den blå prickade linjen representerar vika för den valda enheten (här en iPhone 6).
- Flödet kan också betraktas som sidradbrytningen (ska inte blandas ihop med brytpunkter) för innehållet. Detta visas för att underlätta för användaren att visa vilken del av innehållet som kommer att visas på enheten före rullning.
- Flödets linje visas inte om höjden på den enhet som emuleras är högre än skärmstorleken.
- Flödet visas för författarens bekvämlighet och visas inte på den publicerade sidan.
Lägga till en layoutbehållare och dess innehåll (redigeringsläge) adding-a-layout-container-and-its-content-edit-mode
A Layoutbehållare är ett styckesystem som
- Innehåller andra komponenter.
- Definierar layouten.
- Svar på ändringar.
-
Layoutbehållaren är tillgänglig som en standardkomponent i komponentläsaren. Härifrån kan du dra den till önskad plats på sidan och sedan ser du platshållaren Dra komponenter hit.
-
Du kan sedan lägga till komponenter i layoutbehållaren. De här komponenterna innehåller det faktiska innehållet:
Markera och vidta åtgärder på en layoutbehållare (redigeringsläge) selecting-and-taking-action-on-a-layout-container-edit-mode
Precis som med andra komponenter kan du markera och sedan vidta åtgärder för (klippa ut, kopiera, ta bort) en layoutbehållare (när de är Redigera läge):
-
Om du för musen över eller trycker på platshållaren för stödrastret visas åtgärdsmenyn.
Du måste välja Överordnad alternativ.
-
Om layoutkomponenten är kapslad väljer du Överordnad Med det här alternativet visas en listruta där du kan välja den kapslade layoutbehållaren eller dess överordnade behållare.
När du för musen över behållarnamnen i listrutan visas deras konturer på sidan.
- Den lägsta kapslade layoutbehållaren kontureras i svart.
- Den näst lägsta kapslade layoutbehållaren kommer att vara i mörkgrått.
- Varje efterföljande behållare blir en ljusare nyans av grått.
-
Då markeras hela stödrastret med dess innehåll. Åtgärdsverktygsfältet visas där du kan välja en åtgärd som Ta bort.
Definiera layouter (layoutläget) defining-layouts-layout-mode
Om du vill konfigurera layouten för ett responsivt rutnät som implementeras med layoutbehållaren måste du använda Layout läge.
Layout kan startas på två sätt.
-
Genom att använda lägesmenyn i verktygsfältet och välja layoutläget
- Välj layoutläget på samma sätt som du växlar till redigeringsläget eller målinriktningsläget.
- Layoutläget är beständigt och du lämnar inte layoutläget förrän du väljer ett annat läge med lägesväljaren.
-
När redigera en enskild komponent.
- Genom att använda Layout i snabbåtgärdsmenyn för komponenten kan du växla till Layout läge.
- Layout läget kvarstår när komponenten redigeras och återgår till Redigera när fokus ändras till en annan komponent.
I layoutläget kan du utföra olika åtgärder på ett rutnät:
-
Ändra storlek på innehållskomponenterna med de blå punkterna. Storleksändring fästs alltid mot stödrastret. När du ändrar storlek på bakgrundsstödrastret visas det för att underlätta justeringen:
note note NOTE Proportionerna och proportionerna bevaras när komponenter som Bilder storleksändras. -
Klicka/peka på en innehållskomponent så kan du göra följande i verktygsfältet:
-
Överordnad
Gör att du kan markera hela layoutbehållarkomponenten för att utföra en åtgärd i sin helhet.
-
Flyt till ny rad
Komponenten flyttas till en ny rad, beroende på vilket utrymme som är tillgängligt i rutnätet.
-
Dölj komponent
Komponenten blir osynlig (den kan återställas från verktygsfältet i layoutbehållaren).
-
-
I Layout läge där du kan trycka/klicka på Dra komponenter hit om du vill markera hela komponenten. Då visas verktygsfältet för det här läget.
Verktygsfältet har olika alternativ beroende på layoutkomponentens läge och vilka komponenter som tillhör det. Till exempel:
- Överordnad - Markera den överordnade komponenten.
- Visa dolda komponenter - Visa alla eller enskilda komponenter. Numret visar hur många dolda komponenter det finns för närvarande. Räknaren visar hur många komponenter som är dolda.
- Återställ brytpunktslayout - Återgå till standardlayouten. Det innebär att ingen anpassad layout kommer att användas.
- Flyt till ny rad - Flytta komponenten uppåt en position om avstånd tillåter.
- Dölj komponent - Dölj den aktuella komponenten.
note note NOTE I exemplet ovan är åtgärderna float och hide tillgängliga eftersom den här layoutbehållaren är kapslad i en överordnad layoutbehållare. - Visa komponenter
Välj de överordnade komponenterna för att visa åtgärdsverktygsfältet med
Visa dolda komponenter alternativ. I det här exemplet är två komponenter dolda.
Om du väljer alternativet Visa dolda komponenter visas de dolda komponenterna i blått i sina ursprungliga positioner.
Markera Återställ alla visar alla dolda komponenter.