Picture with Text
A common pod to use is the Picture with Text pod. This pod allows you to add an image and text and offers flexibility in placement and sizing. The Picture with Text pod can be added to a Page Section and Grid Cell.
Picture with Text template
Content tab
- Internal Name: This title will not be visible on the website; it is only used for organizing your content.
- Share: If you flag this pod, your chosen content and settings will be saved to be added easily throughout your website. *If you need to change this pod, you can adjust it in one instance, and it will automatically be updated throughout the site.
- Image: Add an image from your image library.
- Image Width: This field will determine the width of your image. For the value, you can use pixels or percentages (e.g., 500px or 40%). If you leave this value empty, the maximum width will be applied.
- Title: An H2 header will be applied next to the image, either to the right, left or below it (depending on which alignment is selected). This field is optional.
- URL: If you want to add a button, you will add the link for your button here.
- Button CTA: Add the text for your button. By default, text will be capitalized. Adding a button is optional, but the “URL” and “Button CTA” must be populated if you wish to add a button.
- Content: Add your content here as you would a Text pod. This field is optional.
Options tab
- Preset: Presets are added styling options for pods. Read more here.
- Align: Choose from aligning your image to the frame’s left, right, or center (the image will be centered, and the text will be left-justified). The image and text will be left justified in the frame if no option is chosen. On mobile, the image will sit below the text when the left or right alignment is chosen, and the image will sit above the text when the center or no alignment is selected.
- Newspaper columns: Flag this if you would like your text to be separated into multiple columns. If you left or right align an image, the text will be divided into two columns. The text will be split into three columns if you center the image.
Examples
Picture w/ Text pod Example 1
The image’s alignment is left, and its width is 600px. It’s important to note that the image has a cap size, so even if I set the image to a width of 900px, it will render at the allowed space, which is 688px for this theme (settings can be different per your website’s theme).
This example also has a button.
Picture w/ Text pod Example 2
The image alignment is set to the right. The image width is set to 30%, which means it takes up 30% of the frame.
This example has no button.
Picture w/ Text pod Example 3
Image alignment is centered, and no width is specified, making the image fill the entire frame.
Picture w/ Text pod Example 5
This example has a centered image with a width of 50%. There is no title, and “Newspaper columns” have been selected for the text layout.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam finibus fermentum arcu nec dapibus. Praesent facilisis eros in nibh pharetra, eget sollicitudin libero semper. Nullam et pellentesque nibh, non tempus libero. Donec non enim vel turpis dapibus varius vel porttitor nulla. Pellentesque dictum ante non nisi dignissim faucibus. Duis ultricies efficitur nisi vitae egestas.
Aenean scelerisque neque ut libero lacinia congue. Proin laoreet sagittis leo, sit amet viverra lacus semper quis. Vivamus suscipit bibendum diam, et cursus ante finibus at. Donec lobortis ante metus, in eleifend orci ornare eget.
Example 6
This is an example with a differently styled theme. The image is aligned to the right and has an image width of 520px.
Save and publish
To see your updated content on your website, you need to publish your page. In the Websites App, click on the Publish tab. Once there, click the Create button. On the next screen, you will select the website you want the page to publish to (if you have multiple websites) and check the Pages checkbox. Click Save at the top, then click Start.
