Elements help you add text, images, forms, and more to Website Builder. In this HostPapa Knowledge Base article, we provide an overview of all the editable options that are included in each element. Website Builder offers endless possibilities within different edit menus.
To learn how to access your Website Builder to get started, please visit this article.
At the end of this article, HostPapa will provide you with nine tips on working with text and images on your website!
The elements menu
Your website is made up of different content elements that include text, image galleries, forms, and many other items.
In order to move an element to a different location, please:
- Move your mouse over it.
- Click on its placeholder.
- Reposition the element as desired.
All of your content elements can be edited by rolling your mouse over them. A blue rectangle will mark out the content you are going to edit in the element. You’ll also see a menu appear at the top of the blue rectangle.
- The drag handle lets you move the element around the page to a spot you prefer:
- You can alter the look of your text by using the bold, italic, and underline buttons:
- The look of your text block can also be altered with the alignment button:
- The Show properties button opens the Properties menu:
- The Common tools button brings up options including:
- Copy.
- Remove.
- Hide.
- The AI Assistant.
Nine tips on working with text and images on a website
Designing a website requires attention to both text and images in order to make an impact. A strong balance guarantees your site looks professional and will keep readers engaged. If the two elements clash, users may quickly leave and seek information elsewhere. Proper alignment of words and visuals improves readability and overall brand trust.
1. Balance text and images
First, creating harmony between text and visuals can assist user understanding. Text-heavy pages can overwhelm, while image-heavy ones risk lacking context and clarity. Balance allows the viewer to scan content quickly and engage meaningfully. Strive for a proportion where neither text nor image dominates excessively.
2. Use high-quality images
Next, using crisp, high-resolution photos elevates the visual appeal of your site. Poor quality, pixelated pictures can make content unreliable and unprofessional to visitors. Images must reinforce the written message rather than distract or confuse the reader. Invest in professional photography or dependable stock image resources for consistency.
3. Keep text concise
Additionally, concise, clear sentences aid in holding a visitor’s fleeting attention. Large chunks of text discourage readers, while shorter sections feel inviting to scan. Use paragraphs, subheadings, and bullet points to simplify complex messages. Condensed text paired with visuals supports faster learning and stronger message retention.
4. Sharpen for speed
Moreover, adjusting images for web performance secures faster load times for users. Slow-loading visuals frustrate visitors, often leading to higher bounce rates and exits. Tools for compression reduce image size without hurting overall visual quality. A quicker website benefits both user experience and search engine rankings.
5. Emphasize visual hierarchy
Furthermore, using hierarchy between text and images directs focus appropriately on content. Larger fonts, bold headers, and highlighted visuals guide attention where intended. The key is establishing a pathway from important information down to details. Strong hierarchy helps users absorb information in a structured, engaging manner.
6. Choose consistent styling
In addition, maintaining consistent styles across text and images builds a stronger brand identity. Fonts, colors, and image themes must not conflict with the overall site design. Uniformity creates visual harmony and builds trust with the audience over time. Inconsistent styling often distracts viewers and lessens the site’s professional impression.
7. Add alt text
Also, adding descriptive alt text makes certain there is accessibility for users with vision impairments. Alt descriptions enable screen readers to describe images for visually impaired individuals. This technique also helps with Search Engine Optimization (SEO) by adding keywords properly. Never leave an image empty from both accessibility and ranking perspectives.
8. Position content strategically
Another important factor is placing text and images in supportive proximity consistently. Captions under pictures can boost learning by reinforcing descriptive text. Images beside headers emphasize topics, drawing attention quickly when readers first scan. Smart placement prevents clutter and augments the natural flow of information.
9. Test across devices
Finally, always test how both text and visuals appear on multiple devices. Images may crop poorly and fonts can shrink on smaller mobile screens. Responsive design aides consistent presentation whether on desktop or smartphone. Regular testing avoids surprises and maintains professional aesthetics across varied user platforms.
Practical list for application
Here is a quick way to apply these nine strategies:
- Balance text with images evenly throughout each page.
- Double check all images are sharp, high-resolution, and relevant.
- Keep sentences and paragraphs concise for quick reader scanning.
- Compress and hone images for quick site loading.
- Create a strong hierarchy to guide attention through the design.
- Apply a consistent style with fonts, colors, and image choices.
- Add alt text with descriptive and keyword-friendly phrases.
- Place pictures and captions strategically to reinforce textual meaning.
- Check your design across every device type and browser.
Bullet point highlights
- Keep visuals relevant and supportive of written content.
- Simplify text with headers, lists, and short sentences.
- Use compression tools to upgrade site loading speed.
- Apply design consistency for branding strength and user comfort.
- Prioritize accessibility with proper alt text descriptions.
If you need help with your HostPapa account, please open a support ticket from your dashboard.
