With a Vivid Image created WordPress site, numerous “blocks” come styled to match your website’s branding. As WordPress continues to progress, new blocks will be added as your Core WordPress is updated for security and new features. When new blocks are added, the blocks may not match your site’s existing look & feel. If you would like to take advantage of any new blocks and have them seamlessly blend in with your existing blocks, talk with your Account Director about customizing your site.
Heading, Paragraph, & List
This is a heading block.
This is a paragraph block. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- Make a list with the list block
- Another bullet
- And one more bullet point
Classic Editor
Are you struggling with adding content into blocks? You can start with the old WordPress Classic Editor to add content and convert it to blocks later. The headline and content line below use the classic editor block. If you need help learning how to use blocks, contact your account director for learning resources.
Classic Editor Starts here.
Content added here.
Advanced Columns
The advanced columns block makes display content in columns a simple job without the hassle of using shortcodes: #1. Insert the block. #2. Select 2-6 columns. #3. Choose the width you want for each column. #4. Start adding blocks to each column.
Column 1
Text to go in this column.
Column 2
Text to go in this column.
Column 3
Text to go in this column.
Column 4
Text to go in this column.
Quote
“Before you marry a person, you should first make them use a computer with slow internet service to see who they really are.”
Will Ferrell
Buttons
Separator and Spacer
The lines dividing the sections are all separators. If you need extra space between blocks, use an invisible spacer:
Accordion
What type of information should be put in accordions?
You can add frequently asked questions, or you may want to use the Yoast block shown below. Long calendar lists and directions could also be options. Use it to condense information on a page, allowing the reader to see only the answers they need.
Another question here?
And add your supporting information here.
Yoast FAQ and How to…
Use the Yoast blocks so google can index the information and pull it into a google preview if needed.
Enter the answer here.
With another answer.
How do I…
- Enter step title
Enter step description
- Enter step title
Enter step description
Table
| Table heading One | Table heading Two |
|---|---|
| 1 | 3.45″ |
| 2 | 20.5″ |
| 3 | 1.25″ |
| 4 | .60″ |
Image and Image Gallery
Embeds: Video, Audio, and Social Media
The Embed blocks allow you to share graphics from 3rd party sites and place them onto your page with the use of a URL.
To show a video, use the YouTube or Video block with the source’s URL and it will show up on your published page. The same applies for the social media posts. Use the advanced column block to better control the size of the shared media.
Forms
Add a Gravity form to any page or post.
Cover
Use a Cover Block to have a background with text over it…
or add any blocks you see fit: buttons, accordions, images. Although, keeping it simple can be the most effective recipe to get information across to your visitors.
Call-to-Action
Let’s get started with this CTA party!
Another line of text if needed
Media and Text
Use a Media and Text block to place an image left or right of the text. Add a background color and choose to scale the image to match the same proportions as your text for balance in your design.
Container
A container is simply a box you can control and add blocks inside it. You can also:
- Create your own layouts by changing it’s background color or image
- Combine multiple blocks inside the container
- Manipulate container paddings and margins
This text is inside a container with:
background image
background color overlay
padding
Post and Pages Grid
Show page or post previews in either a column or list view. Choose to display a featured image, title, excerpt, link, and more:
More
Use a read more block if you have a specific spot in your content to mark an ending place for a post preview or excerpt.
Files
Show a file preview with the file name and download button. Best used for pdf files.
Word Example
Code
Use the Code block to show HTML or any other programming code in your content. This will prevent WordPress from reading and translating the code on the front-end of the browser.
<html>
<body><h1>Hello World</h1></body>
</html>Custom HTML
Use the custom HTML block to paste in HTML code. A Google map is a great example for using this block with iframe HTML code. This code is usually found in a “share” area of the content on other websites. If you are using a URL address instead of HTML, use an Embed Block.
Shortcodes
Use a shortcode to pull in pre-programmed items. The example shortcode below auto pulls a website’s programmed colors.
Layouts
Layouts allow for prebuilt sections or pages. Some standard layouts come with your site you can use. If you would like access to other prebuilt layouts as shown below, please contact your Account Director for pricing.
