Columns Layout
Examples
Below are example of using the "Columns" block with the "Content Blocks" matrix across pages within the backend.
Text & Image(s)
Columns allow you create a row of mixed content, such as text and images. The columns block allows you to define width and alignment of each content and animations.
One Column - Text
This is an example of using only one column with text and all default settings.
Id commodo id ex laborum dolore ad excepteur non ex duis. Non sit ut eu tempor consequat duis amet magna. Ullamco aute et cillum aute officia ea tempor voluptate non Lorem dolor officia consequat aliqua. In qui nulla non ea excepteur ipsum tempor anim. Do Lorem duis laboris officia minim dolore irure do proident enim minim. Culpa anim do nostrud velit non dolor laboris veniam dolor adipisicing velit nisi fugiat. Dolore elit laborum ut deserunt velit aliquip magna adipisicing nostrud consectetur.
One Column - Text (Width 3xl)
This is an example of a single text column with a width of 3xl to improve readability.
Id commodo id ex laborum dolore ad excepteur non ex duis. Non sit ut eu tempor consequat duis amet magna. Ullamco aute et cillum aute officia ea tempor voluptate non Lorem dolor officia consequat aliqua. In qui nulla non ea excepteur ipsum tempor anim. Do Lorem duis laboris officia minim dolore irure do proident enim minim. Culpa anim do nostrud velit non dolor laboris veniam dolor adipisicing velit nisi fugiat. Dolore elit laborum ut deserunt velit aliquip magna adipisicing nostrud consectetur.
One Column - Text with Button
This is an example of a single text column with a button link.
Id commodo id ex laborum dolore ad excepteur non ex duis. Non sit ut eu tempor consequat duis amet magna. Ullamco aute et cillum aute officia ea tempor voluptate non Lorem dolor officia consequat aliqua. In qui nulla non ea excepteur ipsum tempor anim. Do Lorem duis laboris officia minim dolore irure do proident enim minim. Culpa anim do nostrud velit non dolor laboris veniam dolor adipisicing velit nisi fugiat. Dolore elit laborum ut deserunt velit aliquip magna adipisicing nostrud consectetur.
One Column - Text with Buttons
This is an example of a single text column with multiple buttons.
Id commodo id ex laborum dolore ad excepteur non ex duis. Non sit ut eu tempor consequat duis amet magna. Ullamco aute et cillum aute officia ea tempor voluptate non Lorem dolor officia consequat aliqua. In qui nulla non ea excepteur ipsum tempor anim. Do Lorem duis laboris officia minim dolore irure do proident enim minim. Culpa anim do nostrud velit non dolor laboris veniam dolor adipisicing velit nisi fugiat. Dolore elit laborum ut deserunt velit aliquip magna adipisicing nostrud consectetur.
Two Columns - Text & Image
This is an example of a two columns, with text and an image with default settings.
Id commodo id ex laborum dolore ad excepteur non ex duis. Non sit ut eu tempor consequat duis amet magna. Ullamco aute et cillum aute officia ea tempor voluptate non Lorem dolor officia consequat aliqua. In qui nulla non ea excepteur ipsum tempor anim. Do Lorem duis laboris officia minim dolore irure do proident enim minim. Culpa anim do nostrud velit non dolor laboris veniam dolor adipisicing velit nisi fugiat. Dolore elit laborum ut deserunt velit aliquip magna adipisicing nostrud consectetur.
Two Column - Text (Width 2xl) & Image
This is an example of two columns with text and an image. The text has a width of 2xl, allowing the image to fill the remaining space.
Id commodo id ex laborum dolore ad excepteur non ex duis. Non sit ut eu tempor consequat duis amet magna. Ullamco aute et cillum aute officia ea tempor voluptate non Lorem dolor officia consequat aliqua. In qui nulla non ea excepteur ipsum tempor anim. Do Lorem duis laboris officia minim dolore irure do proident enim minim. Culpa anim do nostrud velit non dolor laboris veniam dolor adipisicing velit nisi fugiat. Dolore elit laborum ut deserunt velit aliquip magna adipisicing nostrud consectetur.
Two Columns - Text & Image Reversed
This is an example of two columns with text and an image. The image is first with text second.
Id commodo id ex laborum dolore ad excepteur non ex duis. Non sit ut eu tempor consequat duis amet magna. Ullamco aute et cillum aute officia ea tempor voluptate non Lorem dolor officia consequat aliqua. In qui nulla non ea excepteur ipsum tempor anim. Do Lorem duis laboris officia minim dolore irure do proident enim minim. Culpa anim do nostrud velit non dolor laboris veniam dolor adipisicing velit nisi fugiat. Dolore elit laborum ut deserunt velit aliquip magna adipisicing nostrud consectetur.
Two Columns - Text & Images
This is an example of two columns with text and multiple images within one column.
Id commodo id ex laborum dolore ad excepteur non ex duis. Non sit ut eu tempor consequat duis amet magna. Ullamco aute et cillum aute officia ea tempor voluptate non Lorem dolor officia consequat aliqua. In qui nulla non ea excepteur ipsum tempor anim. Do Lorem duis laboris officia minim dolore irure do proident enim minim. Culpa anim do nostrud velit non dolor laboris veniam dolor adipisicing velit nisi fugiat. Dolore elit laborum ut deserunt velit aliquip magna adipisicing nostrud consectetur.
Id commodo id ex laborum dolore ad excepteur non ex duis. Non sit ut eu tempor consequat duis amet magna. Ullamco aute et cillum aute officia ea tempor voluptate non Lorem dolor officia consequat aliqua. In qui nulla non ea excepteur ipsum tempor anim. Do Lorem duis laboris officia minim dolore irure do proident enim minim. Culpa anim do nostrud velit non dolor laboris veniam dolor adipisicing velit nisi fugiat. Dolore elit laborum ut deserunt velit aliquip magna adipisicing nostrud consectetur.
Threes Columns - Text & Two Images
This is an example of three columns with text and two images. The text has a flex value of 2 so it takes up twice the space of each image, which both have a flex value of 1.
Id commodo id ex laborum dolore ad excepteur non ex duis. Non sit ut eu tempor consequat duis amet magna. Ullamco aute et cillum aute officia ea tempor voluptate non Lorem dolor officia consequat aliqua. In qui nulla non ea excepteur ipsum tempor anim. Do Lorem duis laboris officia minim dolore irure do proident enim minim. Culpa anim do nostrud velit non dolor laboris veniam dolor adipisicing velit nisi fugiat. Dolore elit laborum ut deserunt velit aliquip magna adipisicing nostrud consectetur.
Two Columns - Text & Block Background Colour
This is an example of two columns with text and an image. The text has been set to white and that background to zircon.
Id commodo id ex laborum dolore ad excepteur non ex duis. Non sit ut eu tempor consequat duis amet magna. Ullamco aute et cillum aute officia ea tempor voluptate non Lorem dolor officia consequat aliqua. In qui nulla non ea excepteur ipsum tempor anim. Do Lorem duis laboris officia minim dolore irure do proident enim minim. Culpa anim do nostrud velit non dolor laboris veniam dolor adipisicing velit nisi fugiat. Dolore elit laborum ut deserunt velit aliquip magna adipisicing nostrud consectetur.
Two Columns - Content Background Colour
This is an example of two columns with text and an image. The content background colour has been set to sandstone.
Id commodo id ex laborum dolore ad excepteur non ex duis. Non sit ut eu tempor consequat duis amet magna. Ullamco aute et cillum aute officia ea tempor voluptate non Lorem dolor officia consequat aliqua. In qui nulla non ea excepteur ipsum tempor anim. Do Lorem duis laboris officia minim dolore irure do proident enim minim. Culpa anim do nostrud velit non dolor laboris veniam dolor adipisicing velit nisi fugiat. Dolore elit laborum ut deserunt velit aliquip magna adipisicing nostrud consectetur.
Two Columns - Combined Content Background Colour (Part 1)
This example shows multiple columns unified by a teal content background. Padding has been set to give the appearance of a single, cohesive box.
Id commodo id ex laborum dolore ad excepteur non ex duis. Non sit ut eu tempor consequat duis amet magna. Ullamco aute et cillum aute officia ea tempor voluptate non Lorem dolor officia consequat aliqua. In qui nulla non ea excepteur ipsum tempor anim. Do Lorem duis laboris officia minim dolore irure do proident enim minim. Culpa anim do nostrud velit non dolor laboris veniam dolor adipisicing velit nisi fugiat. Dolore elit laborum ut deserunt velit aliquip magna adipisicing nostrud consectetur.
Two Columns - Combined Content Background Colour (Part 2)
This example shows multiple columns unified by a teal content background. Padding has been set to give the appearance of a single, cohesive box.
Id commodo id ex laborum dolore ad excepteur non ex duis. Non sit ut eu tempor consequat duis amet magna. Ullamco aute et cillum aute officia ea tempor voluptate non Lorem dolor officia consequat aliqua. In qui nulla non ea excepteur ipsum tempor anim. Do Lorem duis laboris officia minim dolore irure do proident enim minim. Culpa anim do nostrud velit non dolor laboris veniam dolor adipisicing velit nisi fugiat. Dolore elit laborum ut deserunt velit aliquip magna adipisicing nostrud consectetur.
One Column - Overlap
This is an example of a one column overlapping the previous block. The background of the text block as been set to white and the top margin of the columns block has been set to a negative value on desktop to create the overlap effect.
Id commodo id ex laborum dolore ad excepteur non ex duis. Non sit ut eu tempor consequat duis amet magna. Ullamco aute et cillum aute officia ea tempor voluptate non Lorem dolor officia consequat aliqua.
Video
Columns allow you create an embedded video. It can be mixed with all other content such as text or images. A thumbnail is required for each video and has an aspect of 16 by 9.
One Column - Video
This is an example of using only one column with a video and all default settings.
One Column - Video
This is an example of a single column containing a video. The video has a width of 4xl and is horizontally centered.
Two Columns - Text & Video
This is an example of a two columns, with text and a video. The video width is set to 4xl, the text will fill the remaining space.
Id commodo id ex laborum dolore ad excepteur non ex duis. Non sit ut eu tempor consequat duis amet magna. Ullamco aute et cillum aute officia ea tempor voluptate non Lorem dolor officia consequat aliqua. In qui nulla non ea excepteur ipsum tempor anim. Do Lorem duis laboris officia minim dolore irure do proident enim minim. Culpa anim do nostrud velit non dolor laboris veniam dolor adipisicing velit nisi fugiat. Dolore elit laborum ut deserunt velit aliquip magna adipisicing nostrud consectetur.
Quote
Columns allow you to create a quote, which is a testimonial from a person. They can be combined with other content, including text and images.
One Column - Testimonial
This is an example of using only one column with a testimonial and all default settings.
Two Column - Testimonial & Image
This is an example of using two columns with a testimonial and an image.
-
Headquarters
Plot 4M-25
Hamriya Free Zone
Phase II
PO Box 42181
Sharjah
United Arab Emirates -
+ 971-6-526 9166
-
info@geosonic.com
© 2025 Geosonic. All rights reserved.
- Privacy Policy
- Disclaimer
-
Cooking Settings
