A very dramatic responsive design idea is to use an image as the background behind a section.
If you add a parallax effect, as the user scrolls down the page the background image and the content over it will scroll at different speeds. This creates a sense of depth.
This lesson outlines the steps to add an image background to a Section on the Flow page and set it to a slow parallax effect.
Adding a background to a Section on a Flow page is a great design idea. But images are often very complex visually and it can be hard to read text over them.
One way to help the text be more readable is to add a background color with a transparency setting to the text. The background helps the text stand out against the image while the transparency means the image can still be seen behind the text so the effect is added depth to your page.
In this lesson we’ll add the transparent backgroun...
Steps to add a Label to an image.
Instead of adding text within an image file you can add Labels when authoring. This is great for identifying or naming parts of a diagram, for example.
If you move the image on a Claro page or if it moves or resizes in a Flow page the labels will stay in position in relation to the image.
The text in the labels is also included in Translation export files, making it easy to translate the text (much easier than editing the image in another application to ch...
In a Flow page, the height of a Section is set by the height of the content it contains by default. You can override that default height, though, and tell the Section to behave as if its height is a ratio based on the height of the browser window it’s being viewed within. Along with that height setting, you can set the content within the Section to align within the Section’s new height. It’s a great design idea for creating a dramatic full-height Section on your page.
In this lesson we’ll s...
Steps to change the Responsive behavior of a Section on a Flow Page.
In this example, we have a section that has a Header element and two body Elements.
We can set the body elements to switch to vertical orientation the Extra Small breakpoint range or at the Small breakpoint range.
Steps to set a background (fill) color on an element.
Setting a background color can be used for many visual effects.
In this example, we have a text element over an image and it's difficult to read the text.
We can add a background or fill color to help the text stand out more.
Giving the background color a slight transparency allows the image to still be seen through the text element, which can be an interesting visual design effect.
You can create a custom Section by starting with the Add a Blank Row option under the blue + sign at the bottom of your Flow Page then adding more Rows to that Section.
This lesson outlines how to add more Rows to the intial Section.
Flow pages have no fixed height. You can add as much content as you need or want.
This means you can use scrolling as a design experience.
You see this in many modern websites, or even in social media apps where scrolling is the basic way of navigating content.
This lesson shows how to add a Blank section template to a Page.
Steps to use drag and drop to upload and add an image to a Page.
In Claro you can drop the image anywhere on the page. In Flow, you need to drop the image on an empty Placeholdeer.
The image upload process will allow you to add a Description and keyword Tags to help improve how the image appears in searches in the Media Library.
Flow allows you to control what content on your page gets shown at different breakpoints. It’s quick and easy to Hide content this way.
In this lesson we’ll set a graphic to be hidden when the page is viewed within the Extra Small breakpoint range.
You can create your own custom Section layouts using the Add a Blank Row option available under the blue + sign at the bottom of a Flow page.
You start by adding the first Row you want to start with, then continue adding more Rows.
This lesson outlines how to do this.
Adding a background to a Section on a Flow page is a great design idea. But images are often very complex visually and it can be hard to read text over them.
One way to help the text be more readable is to add a background color with a transparency setting to the text. The background helps the text stand out against the image while the transparency means the image can still be seen behind the text so the effect is added depth to your page.
In this lesson we’ll add the transparent backgroun...
Steps to add a Label to an image.
Instead of adding text within an image file you can add Labels when authoring. This is great for identifying or naming parts of a diagram, for example.
If you move the image on a Claro page or if it moves or resizes in a Flow page the labels will stay in position in relation to the image.
The text in the labels is also included in Translation export files, making it easy to translate the text (much easier than editing the image in another application to ch...
In a Flow page, the height of a Section is set by the height of the content it contains by default. You can override that default height, though, and tell the Section to behave as if its height is a ratio based on the height of the browser window it’s being viewed within. Along with that height setting, you can set the content within the Section to align within the Section’s new height. It’s a great design idea for creating a dramatic full-height Section on your page.
In this lesson we’ll s...
Steps to change the Responsive behavior of a Section on a Flow Page.
In this example, we have a section that has a Header element and two body Elements.
We can set the body elements to switch to vertical orientation the Extra Small breakpoint range or at the Small breakpoint range.
Steps to set a background (fill) color on an element.
Setting a background color can be used for many visual effects.
In this example, we have a text element over an image and it's difficult to read the text.
We can add a background or fill color to help the text stand out more.
Giving the background color a slight transparency allows the image to still be seen through the text element, which can be an interesting visual design effect.
You can create a custom Section by starting with the Add a Blank Row option under the blue + sign at the bottom of your Flow Page then adding more Rows to that Section.
This lesson outlines how to add more Rows to the intial Section.
Flow pages have no fixed height. You can add as much content as you need or want.
This means you can use scrolling as a design experience.
You see this in many modern websites, or even in social media apps where scrolling is the basic way of navigating content.
This lesson shows how to add a Blank section template to a Page.
Steps to use drag and drop to upload and add an image to a Page.
In Claro you can drop the image anywhere on the page. In Flow, you need to drop the image on an empty Placeholdeer.
The image upload process will allow you to add a Description and keyword Tags to help improve how the image appears in searches in the Media Library.
Flow allows you to control what content on your page gets shown at different breakpoints. It’s quick and easy to Hide content this way.
In this lesson we’ll set a graphic to be hidden when the page is viewed within the Extra Small breakpoint range.
You can create your own custom Section layouts using the Add a Blank Row option available under the blue + sign at the bottom of a Flow page.
You start by adding the first Row you want to start with, then continue adding more Rows.
This lesson outlines how to do this.
Comments ( 0 )
Sign in to join the discussion.