Appeggio Help
Search…
Screen sections and cards
Understand the types of screen sections and cards available to you, and how easy they are to add to your app.
What are screen sections and cards?
A screen section is a part that is designed to make up a section of the screen. A screen section is made up of different parts to form a full section, ready for you to choose from and edit as you like. In Appeggio there are multiple different screen sections designed so you can efficiently build a complete screen using a range of different, easily editable, sections.
To show what we mean by sections, the Apple homepage is shown below. You can see how the page is divided into distinct sections, each with different messaging:
A card is a preconfigured part consisting of various components to help you quickly layout your screen exactly as you need it. There are multiple different cards for you to choose from and edit as you like.
Adding a screen section or card
To add a screen section or a card, or any part within Appeggio, select the part where you’d like to add your part and press ‘+’ on the toolbar.
For screen sections, it makes the most sense to add those to the ‘screen’ rather than to another part. You want the screen section to become a true section of a page, rather than a part within another part.
To add the screen section, go to the top toolbar, and select the screen part, as shown below:
Types of screen sections
Once you’ve selected ‘screen sections’ from the parts menu, you’ll see the range of options available to you:
With all screen sections, select the parts you want to edit and replace images and text as you like.
Call to action
There are various different calls to action, such as those with and without images, parallax calls to action, and video calls to action.
Product and information rows
There are different ways to display products or other pieces of information, including the way that images are displayed, text, buttons, icons, avatars and list items. These types of rows typically show a collection of four cards in a row. Depending on the layout of the information, some of these rows may contain three cards in a row so as to not overcrowd the row.
Centred sections and full-width sections
A centred section is designed to only take up the space in the centre of your screen, rather than the full width.
Here's an example of a page where a card is in a centred section (at the top) and underneath, the card is in a full-width section - it takes the full width of the space available:
Coloring the background of a centred section
There may be times when you want your content in the centre of the screen, but want the background colored to the full width of the screen. Start by adding the screen section to the screen part. You’ll notice that the screen halo toolbar is activated. Then select screen sections, and all of the available screen sections will be in the menu.
I’ve selected the ‘Title, text, columns and button’ screen section.
You’ll notice that the screen section is centred:
Click on the square icon on the left of the halo toolbar to go to the parent part. You’ll see that there is a full-width container that spans the whole screen (as shown by the orange line showing that the whole container has been selected):
Click on the color icon to fill the container with your color of choice.
If you want the contents of your container to match the background color, you’ll need to select those parts and make them transparent.
You can also open the container dropdown menu, and change the color to a background gradient:
Centred section with 2 cards
A centred section with 2 cards offers a blank canvas for you to add any content to 2 columns within a centred section.
Types of Cards
Once you’ve selected ‘cards’ from the parts menu, you’ll see the range of options available to you:
Select the card that best represents what you’d like to achieve, and edit as you see fit.
The width of the card can be amended by changing the column size, as shown below:
Related information
#screen sections #cards #layout helpers #call to action #app building #build your own app
​
​
Last modified 2mo ago