FocusFlow Software presents

The image text box

One of the most fundamental ways you can display content on a website


The image text box is a simple and quick to set up component where you can display a header, description and image side by side, or vertically stacked if on mobile. It has lots of subtle variants in how the text can be formatted and how the element can be animated.

Here are some of the image text boxes uses,

  • Introducing a different page from your homepage
  • Whenever you have lots of text and what to add pictures to keep audience engaged

Variations of the image text box

  • Switching the stacking of the horizontal stacking on destop
  • Triggering the animations scrolling
  • Triggering animations based off the element being in view

How to use this

You can harnesse the power of creativity by making customizing the text, image and animations of the image text box ! Simply type in what you want your content to be about an you can optionally add a picture if you'd like.

From there you can select the animations you want on your component, we have a couple to choose from.

Content options

You type what ever you want below in the inputs

Drag and drop an image here or click to upload

Animation and layout options

You type what ever you want below in the inputs, scroll down to see your own image text box!

This button triggers animations based on the sliding header. The sliding header animation will be activated when the header enters the viewport.

This button makes the elements fade in when they come into the viewport. The animation will smoothly increase the opacity of the element.

If true, the animations will only trigger once. Otherwise, they will toggle on and off as the container moves off the screen.

If true, the sliding header will slide in from the left side and the image will be on the right side on desktop versions.

Fade in animations

  • X offset = how far the element starts in x direction from the center
  • Y offset = how far the element starts in Y direction from the center
  • Has fade = A yes or no option signifying wether you want the element to start invisible and gradually increase opacity
  • Duration: Controls the speed of the animation
  • Delay: Controls the delay of when the animation starts

Current element: Image

  • X offset: 40
  • Y offset: 0
  • Duration: 0.4s
  • Delay: 0s

Place title here

image

Place description here

Advanced Techniques

Take your designs to the next level by exploring advanced features like animations and layout variations. Learn how to make your website more interactive and visually appealing.