Use the Cards rail to select, add, duplicate, remove, and reorder graphic slides, then edit supported gradient fills visually without losing advanced CSS values.
Where: Open a Designer Graphics page. Use the Cards rail beside the active artboard, then select an object or frame to edit its Fill.
Before you start
- Open an editable Graphics page. Read-only access lets you inspect the card order but not change it.
Key ideas
- One graphic can become an ordered carousel: The Cards rail contains the document’s graphic cards. Selecting a card chooses the artboard displayed for editing; card order is the presentation sequence.
- Card actions affect the selected card: Add creates a new card, Duplicate copies the selected card, Delete removes it, and drag ordering moves it within the carousel. Delete is disabled when only one card remains.
- Gradient controls preserve CSS: Supported single gradients expose visual stop controls. Layered, repeating, or advanced CSS values remain available in a text editor so the complete background value is not simplified.
Steps
- Open the Graphics page and locate the Cards rail beside the artboard. If the page has only one graphic, choose Add carousel card to begin a multi-card sequence.
- Select a card in the rail to make its artwork active. Rename or edit the active card’s content in the artboard and Properties panel as needed.
- Use Duplicate card when you want to preserve the current design as a starting point for another slide. Use Add carousel card for a new card instead.
- Drag a card by its grip to change presentation order. Confirm the numbered order in the rail before exporting or sharing.
- Select the card you intend to remove and use Delete card. The control is unavailable if it is the only remaining card.
- To edit a gradient, select the supported shape/frame and open its Fill gradient swatch in Properties. Adjust the visible stops and positions, then inspect the artboard.
- For layered or repeating CSS gradients, use the Gradient CSS field to preserve and edit the full value. Use Solid fill to replace it with no gradient; Clear override appears when the current fill is inherited as an override.
- Review every card at presentation size. Card selection and card order are separate from object selection within the active card.
Cards rail
- Cards are selected from the left rail; the active card is the artboard being edited.
- Add carousel card inserts a card and selects it.
- Duplicate card copies the active card and selects the duplicate.
- Drag by the grip to reorder.
- Delete card removes the selected card; the last card cannot be deleted.
- Read-only mode shows order but disables editing controls.
Gradient fill field
- A supported single CSS gradient with two or more stops displays visual gradient controls.
- The swatch opens controls for stop colors, stop positions, and supported gradient geometry.
- The Gradient CSS text area retains complete CSS values for advanced or layered backgrounds.
- Solid fill replaces the gradient; Clear override returns an overridden fill to its inherited value.
Tips
- Duplicate a card before experimenting with a different direction so the earlier slide remains intact.
- Keep contrast and text placement consistent when changing the background; inspect every carousel card rather than only the active one.
- Use CSS editing for complex layered gradients instead of forcing them into the simpler visual stop editor.
Limitations and important notes
- The visual editor does not simplify repeating or layered CSS gradients; those require text editing.
- Card operations are disabled for read-only sessions.
- Card ordering does not automatically prove that a share/export uses the intended sequence; preview the final output.
Troubleshooting
I can see only one graphic.
Use Add carousel card in the Cards rail to create a second slide; the page begins as one graphic.
Delete is disabled.
The selected card is the only remaining card, or the session is read-only.
The visual gradient controls did not appear.
The current fill may be repeating, layered, unsupported, or not a single gradient with editable stops. Use the Gradient CSS field to preserve the full CSS value.