Sitewide Announcement Bar Appears Here Blog
Purchase Theme

About Gutenberg Blocks

The Gutenberg editor is the latest and greatest page/post editor from WordPress. We use it as the foundation of LaLa Theme 4. The Gutenberg editor comes with a number of basic page building blocks. Below is an example page which showcases the basic Gutenberg blocks and styles for this theme. 

In WordPress you use the Gutenberg editor to stack blocks on top of each other in order to build out the pages/posts. Once you learn what each block does, you will have many options to create dynamic pages/posts.

LaLa Theme 4 also has a large selection of LaLa Custom Blocks to offer you additional, fun page-building options. We also support JetPack and WooCommerce Blocks.

Learn more about the Gutenberg Editor at WordPress.org.


Text Blocks Examples

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Paragraph Block

The Paragraph Block is 12 columns wide. This means it spans the entire width of the website body.

Quote Block

Whether you think you can, or you think you can’t – you’re right.

Henry Ford

Verse Block

YOU HAVE TO SCROLL LEFT / RIGHT TO SEE THE ENTIRE MESSAGE
Motivation is the art of getting people to do what you want them to do because they want to do it. —Dwight D. Eisenhower 

Preformatted Block

You have to scroll left / right to see the entire message
I would visualize things coming to me. It would just make me feel better. Visualization works if you work hard. That’s the thing. You can’t just visualize and go eat a sandwich. —Jim Carrey

Bulleted List

  • List Item One
  • List Item Two
  • List Item Three

Numbered List

  1. List Item One
  2. List Item Two
  3. List Item Three

Table

column 1column 2column 3column 4column 5
12345
12345
12345
12345

Column Examples

1/3 Columns

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. 

2/3 Columns


1/4 Column

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

1/2 Column

1/4 Column

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


Image Blocks

Full-Width Image Block

Gallery Block

Cover Image Block

lala-texture4.2
THREE BANNER TYPES
lala-texture1.2
FEATURED IMAGE
lala-texture2.2
SMART SLIDER SLIDE SHOW
bubbles
BACKGROUND VIDEO
previous arrow
next arrow

Media Blocks

Full-Width Video Block


Video Block inside of Column Block

The column block is 25% 50% 25%. The video is in the center column, which is set to 50%. This makes the video block appear smaller on the page. The column block is responsive, which means that on mobile, all columns will stack on top of each other with a width of 100%.


Audio Block


Media & Text Block

The Media & Text Block is very versatile and there are a ton of tweaky little settings that can be used to craft the page that you want. Here are a few tips and tricks.

Text Right, Image Left

The text appears centered next to the image. The block is 50% image and 50% text by default.


EDIT VIA THE WORDPRESS CMS

Move Image to the Right

Text Left, Image Right

You can move the image to the right side using the settings at the top of the WordPress editor.


Make the Image Smaller

Text Right, Image Left

You can make the image smaller to take up less space in the block. Just use the blue dot located with the WordPress editor to drag the image into a smaller size.


Mobile Setting

It is important to check the “Stack On Mobile” toggle to ON. This will turn on the mobile responsiveness and will make the image stack on top of the text so your page will look great on smaller devices.