How To Add Text + Image Blocks
Video tutorial on how to add text + image blocks to your PhotoBiz website.
The Text + Image block allows you to create dynamic content easily by incorporating an image with your text content. You can give your readers a "next step" by including a call-to-action button below your text content.
This guide will walk you through the different options for the Text + Image block in your PhotoBiz Website Builder
STEP ONE
Log into your PhotoBiz account and click on WEBSITE in the left-side menu.
STEP TWO
From your Block Editor on the right side of the screen, click on the TEXT + IMAGE block to add it to your page.
EDIT A TEXT + IMAGE BLOCK
Once the TEXT + IMAGE block has been added to your page, click inside of the block to customize it.
ADDING TITLE + TEXT
You can now add a Title and Text to the block using the editor. If you don’t have content prepared, click on "Ask PhotoBiz AI" in the top-right corner of the text editor, and it will help you generate text based on prompts you provide.
PRO TIP!
When copying text from external sources (like Word documents or websites), use the following keyboard shortcuts to avoid formatting issues:
- Apple/MAC: Command + Shift + V
- Windows/PC: Ctrl + Shift + V
Ask PhotoBiz AI
PhotoBiz AI is built into the text editor and can generate text for you. Simply click "Ask PhotoBiz AI" and provide a prompt. Here are a few example prompts:
- "Write a bio for a senior photographer with 10 years of experience based in Boston."
- "Help me write a personal and approachable 'About Me' page, focusing on my passion for photography and client connection."
- "Create an engaging description for my photography services, emphasizing my style and experience."
Click on the Generate Text button to have the copy generated by PhotoBiz AI.
Once the AI generates the text, you can review it, make edits, and click Save Changes to finalize it. If you’re not satisfied, you can submit another prompt to the AI.
ADDING A IMAGE TO THE TEXT + IMAGE BLOCK
Next, add an image to the block. You may upload a new image, insert an image from the clipboard, or use a stock image.
The ALT TEXT section allows you to include alternative text (also known as an alt tag) for the image you've uploaded to your Text + Image block.
If needed, you can adjust the focal point of the image and add alt text. Click save changes to finalize your image selection.
ADDING A BUTTON TO YOUR TEXT + IMAGE BLOCK
You can use the Button to provide your website visitors a call-to-action after reading your text content. You can use your button in 10 different ways!
Link options include:
- NONE: Your button would not link anywhere.
- EXTERNAL LINK: Direct your clients to helpful resources that exist in a place other than your website.
- PAGE: Direct your visitors to an existing web page on your website.
- FORM: Connect to a Custom Form you have created in your FORM BUILDER.
- MARKETING: Direct users to a Campaign or Landing Page you have created in the MARKETING tool.
- FILE: Allow users to open a PDF, JPG, PNG, or GIF file that has been uploaded to the DOCUMENTS area of your account's FILES section.
- PHONE: Connecting your button to a phone number allows users to quickly click to call you.
- EMAIL: Connecting your button to an email address opens a user's default mail client to easily send you an email.
- ADDRESS: Allow users to find where you are by opening an address in Google Maps.
- VIDEO: Add a video embed code obtained from YouTube or Vimeo to play in a light-box.
- POP-UPS: You can trigger a pop up from your marketing tools for things such as a video or a form.
LAYOUT OPTIONS
The Text + Image block offers over 30 different layouts that you can choose from to display the text, image, and button you've added.
Text Overlay Layouts: The title, text, and button will lay over a portion of your image. You can adjust the opacity of the background behind the text in the Styling section. The available layouts are:
- Text overlay left
- Text overlay right
- Text overlay center
- Text overlay bottom
- Text overlay center left
- Text overlay center right
Text Left/Right Layouts: The title, text, and button will appear to the left or right of your image without an overlap. This layout will display a larger image in comparison to your text. The available layouts are:
- Text left
- Text right
Image Parallax Layouts: The title, text, and button appear to the left or right of your image with a scrolling animation. The available layouts are:
- Image parallax left
- Image parallax right
- Landscape parallax left
- Landscape parallax right
Profile Text Layouts: Similar to the Text Left and Text Right layouts, the Profile Text layouts display your image to the left or right of your text, however the image is smaller in comparison to the text area. The available layouts are:
- Profile text left
- Profile text right
Image Overlay Layouts: These layouts introduce innovative design elements and shapes, adding a magazine-like flair to your website and significantly enhancing its appeal. The available layouts are:
- Image overlay text left
- Image overlay text right
- Image overlay left
- Image overlay right
- Image overlay top
- Image border text bottom
- Image overlay bottom left
- Image overlay bottom right
Other Layouts:
- Image square left
- Image square right
- Image circle left
- Image circle right
- No crop image center left
- No crop image center right
STYLING OPTIONS
The Styling area allows you to customize different options depending on the layout you've selected.
- Text Wrap: You can wrap your text around your image with any of the layout options that don't have an overlay or parallax effect.
- Title Alignment: Controls if the title section is left, right, or center aligned.
- Button Alignment: Controls if the button is left, right, or center aligned.
- Image Border Thickness: Choose between Ultra Thin, Thin, Medium, & Thick for your image border thickness.
- Space Below Blocks: Controls the amount of space before the next block begins.
- Space Inside Blocks: Controls the amount of space at the top and bottom of a block.
- Flushing: This choice only applies to the Image Parallax layouts. Turning Flushing on will flush your Text + Image block to fill the width of the screen, whereas turning Flushing off will contain your block in the center of your site.
COLOR OPTIONS
You may customize the colors of your Text + Image block to be different from your global settings selections. Click on the color box to change your colors. You may select from your accent colors or pick a new color. Press OK followed by save changes when you are happy with your color selection.
BACKGROUND OPTIONS
You can add a background image to display behind your Text + Image block. You can upload your own custom background image or choose one from the Background Library. You can customize how the background image is displayed in the Background Settings.
FONTS
You can easily customize the fonts you're using on your text + image blocks to override your global font settings. You can change the font, font size, letter spacing (kerning), and line height for any of the following items in your banners:
- TITLE
- PARAGRAPH
- HEADING H1
- HEADING H2
- HEADING H3
- BUTTON TEXT
Click on Save Changes at the bottom of the control panel menu to apply your changes.