Display on
The Display on section hides an element from one or more particular views.
The “Display On” setting lets you choose whether a particular element or section is visible on specific screen types (e.g., desktop, tablet, or mobile). Adjusting this setting allows you to hide or show content depending on the device, ensuring your page is optimized for different user experiences.
How “Display On” Works:
- Desktop: Controls whether the element or section is visible when the page is viewed on desktop screens (larger screens, typically above 992 pixels wide).
- Tablet: Controls visibility on tablet devices (medium-sized screens, typically between 768 pixels and 991 pixels wide).
- Mobile: Controls visibility on mobile devices (small screens, typically below 768 pixels wide).
Use Cases in GemPages
- Mobile-First Design: You may want to create tailored content for mobile users. For example, if you have a large image or a detailed section that looks great on a desktop but doesn’t fit well on smaller screens, you can use the “Display On” setting to hide that element on mobile devices and replace it with a more mobile-friendly version.
- Custom Layouts for Different Devices: You can design different layouts for desktop, tablet, and mobile views. For instance, a complex product grid may work well on a desktop, but on mobile, you might want to simplify the layout by hiding the grid and showing a single-column list instead.
- Targeted Messages: If you want to show different marketing messages to users on different devices (e.g., offering a mobile-exclusive discount), selectively, the “Display On” setting allows you to show certain elements based on the user’s device.
Spacing
In the Spacing section, you can adjust all 4 dimensions of the Margin and the Padding.
Margin
Margin is the space outside of an element’s border. It controls the space between the element and other elements on the page. Margins are transparent and push the element away from its surrounding content, creating a buffer around it.
In GemPages, you might use margins to control the distance between different elements, such as between two images or between a button and a text block, to create visual separation or white space.
Padding
Padding is the space inside an element’s border but outside its content. It defines the amount of space between the content of the element (such as text or an image) and the element’s border.
In GemPages, Padding is used when you want to create space within an element. For example, you can add padding to a button so that the text inside has space around it, making the button larger or more visually balanced.
Shape
Border
The border is the line that surrounds an element’s content and padding. It defines the outline or edge of an element, such as a button, image, or text box. Borders can have different widths, styles (solid, dashed, dotted, etc.), and colors.
Use Cases in GemPages
Borders are used to emphasize, define, or separate elements visually. For instance, adding a border around a call-to-action button makes it stand out more clearly, or applying borders around images gives them a framed look.
Corner (Border Radius)
The corner, often called border-radius, controls the roundness of an element’s corners. It defines how sharp or curved the corners are. When you apply a border radius, the element’s corners will become rounded, with larger values making the corners more circular.
Use Case in GemPages
You might use the border-radius to soften the look of elements by giving them rounded corners. This is particularly useful for buttons, images, and containers where you want to create a modern, friendly, or sleek aesthetic. For example, a rectangular image can be transformed into a circle by setting the border radius to 50%.
Shadow
A shadow adds a shadow effect around an element, giving it depth and a sense of layering or elevation. Shadows can be adjusted by color, blur radius, spread, and offset (the distance from the element).
Use Case in GemPages
Shadows typically create a three-dimensional effect on flat elements, making them pop out from the page. For instance, you can add a subtle shadow to a card or a block of text to create a sense of depth or apply a more dramatic shadow to highlight an important element like a product image.
Position
CSS position is an important attribute for positioning elements on a web page. This attribute allows you to control how an element is positioned on a web page using different values.
- Static: This is the default position. The element appears in the document’s normal flow, where elements are stacked one after the other based on their order in the HTML.Relative: The element is positioned relative to its normal position. You can move it using top, right, bottom, or left properties, but the space it originally occupied will still be preserved.
- Relative: If Static is the default way to display an element’s position, then Relative is the way to display its relative position. The initial position will still occupy a space on the page.
- Absolute: The element is positioned relative to the nearest positioned ancestor (an ancestor with a relative, absolute, or fixed position). The element will be removed from the normal document flow, and no space will be preserved.
- Sticky: The element is positioned based on the user’s scroll position. It toggles between relative and fixed, depending on the scroll position. This is often used for elements you want to stick to the top of the page as the user scrolls down, like sticky navigation bars.
- Fixed: The element is positioned relative to the browser window, and it will stay in the same place even when the page is scrolled. This is useful for elements like headers or floating buttons.
- Z-Index: The Z-Index property determines the stack order of elements on the page along the z-axis (i.e., front-to-back stacking). Elements with a higher z-index appear in front of those with lower values. This is useful when you have overlapping elements and must control which one appears on top.
Use Cases in GemPages
- Overlapping Elements: Using absolute positioning, you can create overlapping elements, such as placing text on top of an image. Adjust the z-index to control which element appears on top.
- Offset Adjustments: You might use top, left, bottom, or right offsets to fine-tune the placement of an image or text that needs to be shifted slightly from its usual position without affecting other elements.
Opacity
Opacity is the degree of transparency of an element, determining how much of the background or underlying elements are visible through it. The opacity value ranges from 0 to 1, where:
- 0: The element is fully transparent (completely invisible).
- 1: The element is fully opaque (completely visible).
- Any value between the elements is partially transparent, allowing for varying visibility.
- Scale: The opacity value is typically represented as a decimal. For example, 0.5 means the element is 50% transparent, while 0.8 is 20% transparent.
Use Cases in GemPages
- Hover Effects: You can create interactive designs where an element becomes less or more transparent when a user hovers over it. For example, an image might start at 0.7 opacity and then change to full opacity on hover, creating a smooth transition effect.
- Layering Elements: Lowering the opacity of an element allows it to blend with other overlapping elements. For example, you can have semi-transparent buttons or overlays on top of images or videos, creating a more complex and layered design.
- Fading Elements: You can use opacity in animations to create fade-in or fade-out effects. For example, when a user scrolls to a particular section, the elements can fade in by gradually increasing their opacity from 0 to 1.
Animation
Animations are categorized into appearing and hovering effects. Choose your preferred one and configure it to align the animation with your expectations.
If you want to understand deeply about Animation features, you can read more Add Animations to GemPages’ Elements & Sections.
Use Case in GemPages
- Call-to-Action Button Shake: You can make a button shake or bounce to grab the user’s attention, encouraging them to click. For instance, a “Buy Now” button can use the shake effect on hover or after a specific delay to make it stand out.
- Section Fade-in on Scroll: Specific sections can fade or slide into view when users scroll down a page. This effect creates a more engaging experience, guiding users through the content in a visually appealing way.
- Image Zoom on Hover: To add interactivity, you can set images to zoom in when the user hovers over them, which works well for product images or visual elements in galleries.
- Text Animation: You can animate text elements to slide or fade in on load or scroll, emphasizing important messages or headings.