Editor Gutenberg de Wordpress (Guía para crear contenido)

Introduction to Gutenberg Editor

Overview of Gutenberg

• The video introduces the Gutenberg editor in WordPress, named after Johannes Gutenberg, the inventor of the modern printing press.

• It emphasizes that this tutorial is part of a comprehensive free WordPress course and encourages viewers to like and subscribe.

Features of Gutenberg

• The Gutenberg editor was introduced in WordPress 5.0 and utilizes a block-based system for content creation, making it more flexible and user-friendly compared to previous editors.

• Users no longer need additional visual builders like Elementor; they can create posts and pages directly with Gutenberg.

Using the Gutenberg Editor

Creating Content

• The presenter demonstrates how to create a new post or page using the minimalist interface of the Gutenberg editor.

• Each piece of content created is treated as a "block," allowing for organized content management.

Adding Blocks

• To add a block, users can click on an icon or use keyboard shortcuts (e.g., Shift + 7 for recommended options).

• A variety of blocks are available beyond just paragraphs; users can explore different types by clicking on the "+" icon.

Practical Example: Creating Posts

Writing Text

• By default, every new block created is a paragraph. Users can quickly add multiple paragraphs by pressing Enter after each one.

• The presenter uses placeholder text ("lorem ipsum") to fill in a paragraph as an example.

Inserting Images

• To insert images, users can type "/" followed by "image" to access image options from their media library.

• Images automatically cover full width but can be aligned left or right through alignment settings.

Advanced Layout Techniques

Column Layout

• If an image is too large, users may want to separate text into columns. This involves selecting "Add Block" and choosing "Columns."

Creating and Customizing Posts with Gutenberg

Adding Columns and Media

• The speaker demonstrates how to create a layout with two columns and add an image, emphasizing the ease of using the media library.

• A new block can be created by pressing 'Enter', allowing for additional text or elements in the same column.

Creating Links

• The importance of links in blog posts is highlighted; they are essential for effective content creation.

• To create a link, select the desired anchor text, click on the link option, and input the URL (e.g., https://DavidZamoraBlog).

Customizing Link Appearance

• The default appearance of links may not be visually appealing; CSS can be used to change their color.

• Users can customize link colors directly through settings by selecting text and adjusting color options in the block settings.

Header Structure

• Only one H1 header should exist per post; multiple H2 headers are allowed. Proper hierarchical structure is crucial for SEO.

• The speaker explains how to create different header levels (H2, H3, etc.) while maintaining a logical order.

Utilizing Custom Blocks

• Gutenberg allows users to create custom blocks like forms without needing HTML or PHP knowledge.

• Predefined patterns such as image galleries simplify design processes, eliminating the need for manual coding.

Creating Custom Designs with Elementor

Predefined Designs and Customization

• The speaker discusses the use of predefined designs in Elementor, emphasizing that while these templates are convenient, more complex or personalized designs require custom coding.

• To implement a design, users can simply click to add it; however, they must provide their own images for the design elements.

• Predefined designs save significant time in both design and implementation processes, particularly useful for creating calls to action.

Flexibility and Custom Blocks

• The speaker highlights the flexibility of Gutenberg for content creation, allowing users to create numerous blocks easily.

• There is an invitation for viewers interested in learning about creating custom blocks to leave comments for future video content.

Design Tips and Best Practices

• A key piece of advice is to maintain a clean and coherent design without overloading pages with excessive scripts or blocks.

• The importance of checking responsive versions of blocks is stressed since many visitors will access sites via mobile devices; this consideration is crucial for user experience.