WordPress Tutorials - Free Hosting - ZETTAHOST.com

How to Copy a Page with WordPress Gutenberg Editor

Georgi Boychev — Tue, 09 May 2023 12:52:45 +0000

Looking for ways to copy your WordPress web pages? The Gutenberg block editor got you covered.

In this article, you will read about 3 different methods you can instantly apply when crafting your WordPress website.

How to Copy a Page with WordPress Gutenberg Editor

There are a total of 3 methods that you can use to copy a WordPress page using the Block editor. These methods are:

Method 1: Copy Page Content Block by Block
Method 2: Bulk Copy all Page Content
Method 3: Copy the Page’s HTML Code

However, before we proceed with each method, the first thing you should do is to make sure that Gutenberg is selected as your default WordPress editor.

To activate it, enter your WordPress dashboard and head to Settings->Writing:

Once you click on the Writing settings, WordPress should open a page such as this one:

On this page find the options for the default editor:

Once you locate these options, select Block Editor:

Once you do, click on the blue Save Changes button located at the bottom of the screen, so WordPress applies and saves your preferences:

Now you have selected Gutenberg as your default WordPress editor.

Let’s proceed with the methods themselves.

Method 1: Copy Page Content Block by Block

Gutenberg editor allows you to copy and paste various blocks from one page to another with only several simple clicks. Should you want to use this method, here’s how to apply it.

First, via your WordPress dashboard head to Pages->All Pages:

This will prompt WordPress to display a list with all your published pages and drafts:

Once you see the list of your site pages, hover your mouse cursor over the page you wish to make a copy of and click on Edit:

Once you click the button, Gutenberg will be activated, and you will be able to edit your page’s content:

Now, click on the block you want to copy and then click on the three dots located at the right of the block menu:

Clicking the three dots will prompt Gutenberg to open a new menu with various block options:

From this menu click on Copy block:

Once you click on Copy block, Gutenberg will inform you that the block is copied and saved to the clipboard by showing a message located at the bottom left corner of the screen:

Now that the block is copied, open the page you wish to place the duplicated block into:

Then, click the content area, so you can start typing down text or insert a Gutenberg block:

Once the area is selected, on your keyboard press Ctrl + V (for Windows) or Cmd + C for iOS. This will make Gutenberg paste a copy of the block you want to duplicate:

Now you have managed to copy a block. Do the same for each of the blocks that comprise your page content and when all of them are copied on the new page, click on the blue Publish button located at the top right corner of the new page, so WordPress saves and publishes your changes:

Now you have managed to copy the page content.

Method 2: Bulk Copy all Page Content

This is a faster method, compared to the first one, as it allows you to quickly select all blocks that comprise the content of your page and copy and paste them together into a new WordPress page.

To bulk copy all page content, simply open the page you wish to duplicate and click Ctrl + A (for Windows) or Cmd + A (for iOS).

Notice how the selected blocks will be highlighted in blue:

Once all blocks are selected, click on the three dots located at the top of the page’s content area:

This will open a menu with options that will be applied to all selected blocks:

From this menu select Copy blocks:

Once you click on Copy blocks, Gutenberg will inform you that all items are copied to the clipboard with a message that will appear at the bottom left corner of the screen:

Once you see this message, you can open the new page in which you wish to copy the selected blocks.

Once you open it, simply press Ctrl + V (for Windows) or Cmd + V (for iOS). This will prompt WordPress to paste all selected blocks to the content area of your new page:

Now you have managed to copy your page content.

Method 3: Copy the Page’s HTML Code

This method is very fast and effective, and just like the previous 2, is very easy to execute.

To copy your page content by using this method, open the page whose content you want to copy and click on the three dots located at the top right corner of the screen:

Once you click on the three dots, a new menu with various options will appear:

Once you open it, click on Code Editor:

Clicking this option will prompt Gutenberg to display the entire HTML code of your page content:

Once you see the HTML code string, press Ctrl+A (for Windows) or Cmd+A (for iOS), so you select the entire code. The selected content will be highlighted in blue color:

Now that the HTML code is selected, press Ctrl+C (for Windows) or Cmd+C (for iOS). This keyboard command will make a copy of everything you have selected.

Once the code is copied, head to the new WordPress page you are working on and again activate the code editor from the three dots located at the upper right corner of the screen:

Once the code editor is activated, paste the copied code into your content area by pressing down Ctrl+V (for Windows) or Cmd+V (for iOS). This will paste the code you copied from the previous page:

Once you have placed the HTML string, again click on the three dots at the upper left corner of your screen and activate the visual editor by clicking on the option with the same name:

Clicking on this option will prompt Gutenberg to display the blocks that are comprised of the HTML code, so you can edit them freely right away:

Once you have finished editing your page content and settings, don’t forget to apply and save all changes by clicking on the blue Update button located at the top right corner of the screen:

Now you have managed to copy your page content.

Conclusion

In this tutorial, you read how to copy your page content on a different web page by using three simple methods.

You can apply them for each of your web pages and quickly duplicate your site content, should you wish to do so.

The post How to Copy a Page with WordPress Gutenberg Editor appeared first on Free Hosting - ZETTAHOST.com.

How to Add Tabs to Your WordPress Site with Gutenberg

Georgi Boychev — Fri, 05 May 2023 11:01:49 +0000

Tabs are quite useful in numerous situations and can be a fresh addition to your WordPress websites.

Massively used to showcase content categories, news, and various other types of posts in a very structured manner, tabs contribute to making your site content more easily readable and user-friendly to interact with.

Because of how useful tabs can be, in the following paragraphs, you will read how to use them on your website via Gutenberg Block Editor.

How to Add Tabs to Your WordPress Site with Gutenberg

The first thing you should do is to make sure that Gutenberg is set as your default editor. To do so, enter your WordPress admin dashboard.

Once you have entered the admin panel, head to Settings->Writing:

Clicking on Writing will prompt WordPress to open a page such as this:

On this page search for the Default editor for all users options:

Once you find the default editor settings, select Block Editor:

Once you do, click on the blue Save Changes button located at the bottom left of the screen:

Now that you have activated Gutenberg, it is time to proceed forward and read how to add tabs to your site content.

Although there are numerous ways to add tabs to your site content, it is highly advisable to use WordPress plugins that are compatible with the Block Editor, as by far, this is the fastest, easiest, and most efficient way to include such functionality in any WordPress website.

More precisely, using Gutenberg plugins is great because:

Such plugins are very user-friendly.
You can use various code snippets.
Can be applied to blog posts, static pages, and widgets.
Most plugins come with a wide array of styling options.

There are numerous handy plugins that you can use to design and use tabs on your site. Browse the plugin library and install the one that best fits your needs.

If you are not sure what plugins are or how to use them, then have a look at our comprehensive article explaining everything about WordPress plugins:

What is a WordPress Plugin

For this demonstration, we will be using Tabs Responsive – a simple yet effective tabs plugin, completely compatible with Gutenberg Block Editor.

Once you have installed and activated a suitable plugin, it is time to start crafting the tabs. To do so, via the plugin’s settings, open the new tab setup section. Should you use the plugin we are using, you can do so by going to Tabs Responsive->Add New Tabs:

Then, add a new tab by clicking on the large red Add New Tabs button:

Clicking the button will prompt WordPress to display a new section in which you can add your tab details such as title and description:

Add as many tabs as you need and then click on the blue Publish button at the top right of the screen, so WordPress applies and saves your settings:

Now that you have published your first tab set, it is time to add it to a page. To do so, open the list with all published tabs and copy the Tab Shortcode.

Should you use Tabs Responsive, you can find the Shortcode by simply going to Tabs Responsive->All Tabs:

Clicking on All Tabs will open a list of all your saved tab sets. In our case, there’s only one, but you can create as many as you wish:

Now, while on this page, locate the Tabs Shortcode column. This column contains a short code for each of your tab sets – a simple code snippet that you insert in your blog posts or pages, so the tab set appears on them:

Once you locate the Shortcode, copy it.

After you copy the snippet, open a web page or a blog post in which you wish to insert the tab set.

For this demonstration, we will insert our tabs on a static page.

To insert the snippet, simply go to Pages->All Pages->Edit Page, should you wish to insert your tab set within a page, or to Posts->All Posts->Edit Post:

This will activate Gutenberg:

Now, while the editor is active, select a location in which you wish to insert your tabs. In our case, this will be right below the image. To insert the Shortcode, first, insert a Paragraph block in the content area:

Now, within this newly inserted paragraph add the tab’s Shortcode:

Then, click on the blue Update button (Publish, should this be a new web page or a blog post):

Once you publish or update your content, open the page or post that you have just edited to see how the tab appears:

Now you have managed to insert tabs with the Gutenberg Block editor.

Depending on the plugin you are using, you can customize your tabs in numerous ways, so their design completely fits your website’s layout and purpose.

Conclusion

Tabs can become a very powerful addition to your website, thanks to their convincing way of distributing your content and making it easy for your site visitors to engage with your site.

The post How to Add Tabs to Your WordPress Site with Gutenberg appeared first on Free Hosting - ZETTAHOST.com.

How to Create Tables in WordPress Using Gutenberg Editor

Georgi Boychev — Thu, 04 May 2023 11:24:12 +0000

Creating a table in WordPress with the Gutenberg Block Editor is a straightforward task.

Should you need to add one or several tables to your pages, the following paragraphs explain how to do so.

How to Create Tables in WordPress using Gutenberg Editor

To add a table with the Block editor, the first thing you should do is enter your WordPress dashboard.

Once you have entered your admin panel, make sure that Gutenberg is selected as your default editor. To do so, head to Settings->Writing:

Once you do, WordPress should open a page such as this:

Once there, have a look at the Default editor for all users option and make sure to select Block editor:

Once you select Block editor, click on the blue Save Changes button, so WordPress applies and saves your preferences:

After you have selected Gutenberg as your preferred editor, open the page or blog post to which you wish to add a table to.

Also, keep in mind that the process of adding a table with Gutenberg is the same whether you wish to work on a blog post or a static page.

For this demonstration, we will add a table to a static page. Once we create a webpage, Gutenberg will automatically be activated:

Now, click the black + sign, so you can browse the list of suggested Gutenberg blocks:

Clicking the button will open a menu such as this one:

To find the Table block, simply type down “table block” in the search area, and find the Table icon:

Now, click on the Table icon, so you insert the element in the content area:

Once you click on the Table icon, notice that a new box with options will appear. Via the options within the box, you can decide the number of columns and rows:

Add as many columns and rows as you wish and then click the blue Create Table button:

Clicking this button will create a table with the parameters you just entered:

Now you have managed to insert a table in your blog post/web page.

In the following paragraphs, you will read how to customize the table, so it best fits your site design and your personal preferences.

How to Customize Tables in WordPress Using Gutenberg Editor

Now that you have inserted a table in your site content, it is time to see all the options that help you customize it just the way you want.

To see the customization options, click on the Table block and have a look at the sidebar located at the right of the screen:

Then, have a look at the top of the sidebar and see that there are two sets of options that you can browse – Page options and Block options:

To be able to tweak the options of your table, click on Block:

This will open the options that are available for each Gutenberg block. In the case of a Table block, the options look like this:

In detail, these options are:

Fixed width table cell – engaging this will stop the cell from expanding once the text reaches the right corner of the cell.
Header Section – Adds a set of cells at the top of your table that can be used as headings for your table rows.
Footer Section – When engaged, add an additional row of cells at the bottom of your table.
HTML Anchor – This field allows you to create hyperlinks that point directly to this cell.
Additional CSS Class – This field allows you to add CSS code snippets, so you can further customize your table.

You can also change the color palette of the table, along with text colors and text typography. To access these settings, simply click on the Styles icon:

Clicking this icon will open the various color and typography options for your page. With these settings, you can format your text any way you want:

With these options, you can add various colors to the texts and cells, along with choosing text size, typography, and border size and colors:

Color: this option allows you to browse and select colors for your text and cells.
Typography: Allows you to change text font and text size
Border: Allows you to select the width and color of the border between cells.

Conclusion

Inserting tables in your WordPress website is quite easy when using Gutenberg. With a few simple steps, you can add various types of tables on your web pages and customize them any way you want with the numerous built-in Gutenberg styling options.

The post How to Create Tables in WordPress Using Gutenberg Editor appeared first on Free Hosting - ZETTAHOST.com.

5 Best WordPress Slider Plugins for Gutenberg

Georgi Boychev — Wed, 03 May 2023 13:23:54 +0000

When crafting your WordPress website, it is not only important to publish informative and well-structured content, but it is also crucial to make your web pages as aesthetically appealing as possible.

An effective way of making your site more beautiful is by inserting a slider that automatically showcases and rotates a set of media files on one or several of your site pages.

A very efficient and simple way of adding a slider is by installing a WordPress plugin that can ease your work with the Gutenberg editor. So, if this is your preferred WordPress editor, then check out our list of best slider plugins for the block editor.

5 Best WordPress Slider Plugins

We have carefully handpicked a set of the best slider plugins that you can use with Gutenberg Block Editor and make your site more appealing and engaging for your audience.

MetaSlider

MetaSlider is a simple-to-use slider plugin that allows you to create a slideshow, a gallery, or a carousel in minutes without having to deal with any technical difficulties.

This plugin is very user-friendly and comes with a wide range of features and customization options that can help you make your website even more beautiful and informative.

With MetaSlider you can define the size of your slider, transition effect, slideshow themes, and much more.

Smart Slider 3

Smart Slider 3 is a feature-rich slider plugin that grants you tons of settings that you can tweak, so you design the perfect slider for your website.

The plugin comes with various slider types such as a classic slider, carousel, and showcase type. You can start building your project from the ground up or choose among numerous templates, and you have control over each aspect of your slider to the smallest detail.

Smart Slider 3 is a great choice, should you wish to delve deeper into customizing your site and present your site visitors with a unique design experience.

Soliloquy

Soliloquy is an intuitive and very feature-rich interface WordPress plugin. With Soliloquy you can create a slider from the ground up or, you can quickly set up a dynamic slider with your site’s featured content, social media feed, or e-commerce products.

The plugin allows you to use a drag-and-drop function when choosing which WordPress media files, you want to showcase in a sider and numerous configurations for your slideshow effects and layout.

Soliloquy is a very beginner-friendly plugin and therefore is a great choice, should you wish to benefit from a quick setup and convincing slideshow presentation.

Master Slider

Master Slider is a versatile slider plugin that allows you to build a fully customized slider, sample slider designs, or numerous already premade templates that you can use right away or edit, so they fit your website’s design concept.

One of the great features that the plugin comes with is the premade slider designs that are instantly accessible. They allow you to craft a beautiful layout that fits your website’s design with only a few clicks here and there.

Master Slider is a perfect fit for you and your WordPress project, should you wish to set up a beautiful and fully functional slider quickly and effortlessly.

Wonder Slider Lite

Wonder Slider Lite is a very simple yet versatile plugin that grants you all the tools you need to craft an aesthetically pleasing slideshow.

The plugin comes with various options that allow you to fully customize your slider and also offers YouTube, .mp4, Vimeo, and other media formats.

Wonder Slider Lite is a great option, should you wish to benefit from a simple yet very feature-rich plugin for your slideshow ideas.

Conclusion

With a slider, you can make your web pages really stand out from the competition and retain your visitors’ attention for a longer period and eventually contribute to expanding your site audience and more conversions.

In this article, we shared our best picks for your WordPress site that are completely compatible with Gutenberg Block Editor.

The post 5 Best WordPress Slider Plugins for Gutenberg appeared first on Free Hosting - ZETTAHOST.com.

How to Use the Navigation Block in Gutenberg

Georgi Boychev — Tue, 02 May 2023 14:28:07 +0000

With the Gutenberg Navigation block, you can add various types of navigation on any page or within any blog post on your website.

Similar to the classic WordPress menu, the Navigation block can be modified in numerous ways and become a handy tool in many situations.

In the following paragraphs, you will read how to add a Navigation Block to your page content and how to modify it, so it best fits your needs.

How to Add a Navigation Block in WordPress

The first thing you need to do to use the Navigation block is to insert it in your page/post content area. There are various ways of inserting Gutenberg blocks in WordPress, and each one of them is as effective as the others.

The first thing you should do is to enter your WordPress admin panel.

Once inside the WordPress dashboard, make sure you select Gutenberg as your main editor.

Then, create a new page, a blog post, or simply edit some of your already existing posts and pages.

N.B! Keep in mind that the process of using Navigation blocks in WordPress is the same, regardless of whether you wish to insert it in a blog post or a static page.

For this demonstration, we created a new WordPress page and opened the Gutenberg editor:

Then we added a sample title tag and bulked up the content by inserting some Gutenberg blocks – two paragraph blocks and an image block:

After we have added some content to our page or a blog post, it is time to insert a navigation block. To do so, click on the blue + button located at the top left of the screen:

Clicking the button will make WordPress open the full library of Gutenberg blocks:

Once you open the Gutenberg block library, browse the list and find “Nav block”, or simply type in “Navigation block” in the search field on the top of the list of all available block options:

Now, locate the “Nav block” icon:

Once you find it, click on the icon, so WordPress inserts the block in your content area. It looks like this:

Now you have managed to insert the block in your content area. In the following paragraphs, you will read how to use it, so it best fits your site design and functionality requirements.

How to Set Up the Navigation Block

There are numerous ways you can set up the Navigation block – similar to the built-in WordPress menu, you can add links to your website pages, insert a brand logo, add a button, add a search function, or a link to your website’s blog section. Options are quite abundant.

In our example, we will add a sample logo, and links to Home, About Us, and Services web pages.

To add a logo, the first thing you should do is select the Nav block and then click on the black + button. Doing so grants you the opportunity to add a new item to your navigation block:

Once you click the button, a new menu with various options will appear:

From the suggested options, select Site Logo:

Clicking on this button will make Gutenberg automatically insert your website logo within the Nav block area:

Now, once the logo is inserted, you can move it within the Navigation block area. To do so, click on the logo, so an options menu appears:

Now, while the menu is active, notice the two arrow buttons. They are used to move the Navigation block elements to the left or to the right:

For our example, we would want to move the logo to the far left of the Navigation block. To do so, we click the arrow pointing left until the item has moved to the position we want it to appear:

Once the logo is right where we want it, we can add links to our website pages. The first will be a link pointing to our About page. The navigation block has already inserted several items, one of which is an About link. You can edit this one, or simply add a new item by clicking on the plus button.

For this demonstration, we will edit the default suggestion. To do so, we simply click on the item named About within the Navigation block, so a menu appears:

From this menu click on the Link icon:

Clicking this icon will open more options that you can customize:

To add a link you want and a name within which you will encapsulate it, simply click on the Edit icon:

Once you click it, you can now insert a link to the page you wish this Navigation block item to lead to and its name:

Add the text your URL will be contained in the TEXT area and the page URL within the URL area. Once you do, Gutenberg will save the settings.

Now we have managed to include a logo and a single URL in our Nav block.

Follow these steps for each item you wish to include in your Navigation block and once you are done editing it, click on the blue Update button, so WordPress saves your changes and preferred settings:

Tips and tricks for using the Navigation Block

Although there are many ways you can use the Navigation block, there are some rules of thumb that can you can follow:

The Navigation block should contain just the right number of items, so it becomes useful for your website visitors, so don’t fill it with too much information.
This block is oftentimes used at the top or at the bottom of the web page. When placed at the top, it can be used as a quick guide to the content that follows right after it, or as a section that contains your most important site pages. When placed at the bottom of the page, the Nav block is used to showcase related pages, articles, and links to Social Media sites.
For optimal results, try out different alignment settings – see whether it fits your overall design layout when you align it to the left, or right or keep it in the center.

Conclusion

The Navigation block, or simply the Nav block allows you to create navigation for your website and include logos, page links, custom links, and Social Media links.

To see whether the Nav block will be suitable for your website needs and preferences it is highly advisable to experiment with different layouts and ideas, as working with this particular Gutenberg block is not necessarily a linear process – the possibilities are quite abundant.

The post How to Use the Navigation Block in Gutenberg appeared first on Free Hosting - ZETTAHOST.com.

How to Set Full-Width Alignment in WordPress Gutenberg Block

Georgi Boychev — Mon, 10 Apr 2023 14:56:05 +0000

WordPress Gutenberg block editor introduces a width alignment option that allows you to become more creative with your site layout.

With width alignment, you can use various width settings for your Gutenberg blocks, so they become wider than the main content area and even as wide as your computer screen.

In the following paragraphs, you will read how to enable block width alignment and how to use it across your pages and posts.

How to Enable Full-Width Alignment in WordPress

The full-width alignment is a feature that comes with the choice of a WordPress theme. However, not all themes support it.

Fortunately, you can quickly enable the option, regardless of whether the theme you are using supports width alignment or not.

To activate the feature, you should first enter your WordPress admin dashboard.

Once in, head to Appearance->Theme File Editor:

Once within the Theme File Editor, WordPress should display a page such as this one:

Don’t get intimidated by the amount of code you see. You only need to paste a short snippet within the functions.php file.

To open the functions.php file, while within the Theme Editor, click on the functions.php button on the right of the screen:

Once you do, a new page with code snippets should appear. This is the function.php file with all the code information it contains:

Now, add this snippet to the file:

add_theme_support (‘align-wide’)

Once you add the snippet, click on the blue Update File button at the bottom of the page, so WordPress applies and saves the changes you just made:

Now, you can use the Full-Width Alignment feature with Gutenberg.

How to Set Full-Width Alignment in WordPress Gutenberg Block

Now that the full-width alignment is enabled, you can try out how it works and come up with various design ideas for your WordPress website.

To do so, open a page or a blog post you wish to edit, or simply create a new blog post or a new web page.

For this demonstration, we will edit a blog post.

To be able to use the width align feature, open the Gutenberg editor, and insert a new block in the content area.

We will insert a sample paragraph block and an image block:

Now, click on the block and locate the Align settings:

Now, click the Align button and have a look at the various options:

To align the Gutenberg block to full width, simply click on this option from the menu:

Once you click on the Full width, WordPress will automatically expand the image beyond the content area and to the corners of your screen:

Now you can use the full-width alignment feature on your WordPress posts and web pages.

Conclusion

The Full Width Alignment option in WordPress is very handy, as it gives you new ways to design the layout of your pages and posts.

Now you know how to activate and use the feature.

The post How to Set Full-Width Alignment in WordPress Gutenberg Block appeared first on Free Hosting - ZETTAHOST.com.

How to Display Code with WordPress Gutenberg Code Block

Georgi Boychev — Wed, 05 Apr 2023 11:51:04 +0000

If you wish to share code snippets on your WordPress pages and blog posts, the Gutenberg Block Editor got you covered.

With a special code block, you can showcase any kind of snippets and properly format them, so your site visitors fully understand every code symbol you share.

Why Should You Use Gutenberg Code Blocks

Before Gutenberg was introduced, there was the WordPress Classic editor. To display code snippets with the Classic editor was challenging, as the formatting options were quite limiting.

However, as Gutenberg became the default WordPress editor, the proper display of code snippets is now simple and effective. This is possible with the introduction of the so-called code blocks that can contain any kind of snippets and display them separately from another type of content in a way that the proper alignment and structure are fully maintained.

How to Display Code with WordPress Gutenberg Code Block

The first thing you should do is to enter the WordPress admin panel.

Then, make sure Gutenberg is selected as your default editor. If you are not sure how to do so, we suggest you read how to do so in this article:

How to Use WordPress Gutenberg Block Editor

also, have a look at how to align the width of a Gutenberg block.

Once you enter your WordPress admin panel, you should open the page or a blog post in which you want to include a code block. Regardless of whether you wish to work on a page or a post, keep in mind that the process is the same for both.

For this demonstration, we will insert a code block in a sample blog post. To do so, we created a new sample post by clicking on Posts->Add New:

Once you click on Add New, WordPress should activate Gutenberg:

Once the block editor is active, you can now insert a code block. To do so, click on the black + button:

Clicking this button will open a menu with various blocks you can immediately insert into your page or blog post:

Once the menu with suggested blocks is opened, from the list select Code:

Selecting the Code icon will prompt WordPress to insert a code block in your content structure:

Now that the code block is inserted inside your content area, you can add your code snippet inside the block.

To add your code to the block, click inside the Write code… area and start typing down your snippet. You can also copy and paste your code the same way – click inside the Write code… area and paste the snippet right away.

Either way you choose, the result should look like this:

Now you’ve managed to add a code snippet with a Gutenberg code block. This block will be completely separate from other types of content in the same area, so you should not worry about messing up the structure of the snippet when inserting various blocks such as paragraphs, media, and widgets.

Conclusion

Displaying code snippets with the Gutenberg block editor is quite simple and effective.

Should you launch an educational website featuring code examples, you are sharing any kind of documentation, or for any other reason you should display code snippets, the WordPress block editor makes the process simple and quick, without requiring time and effort.

The post How to Display Code with WordPress Gutenberg Code Block appeared first on Free Hosting - ZETTAHOST.com.

How to Use WordPress Reusable Blocks

Georgi Boychev — Wed, 05 Apr 2023 06:35:34 +0000

The WordPress Gutenberg Editor, known also as the Block editor comes with numerous features that can make the creation of your WordPress website and its maintenance as easy as possible.

One of the handy features Gutenberg includes is reusable blocks. With them, you can select and save various block settings and instantly use them on a different page or a blog post.

What are the WordPress Reusable Blocks

The idea behind reusable blocks is to save time and effort when adding the same content structure across several pages and blog posts. This feature eliminates the need to insert and individually set up each block you use for your site content.

How to Use WordPress Reusable Blocks

To benefit from the Gutenberg reusable blocks, you should first create some.

To create a reusable block, the first thing you should do is enter your WordPress admin panel.

Then, you should open a webpage or a blog post you wish to edit (Page->All Pages->Edit Page or Posts->All Posts->Edit Post).

The process of creating reusable blocks is the same regardless of if you are editing a page or a blog post.

For this demonstration we will create a new page (Admin Dashboard->Pages->Add New):

Once the Gutenberg interface is activated, you can start adding blocks with content. For this demonstration, we will create a sample page with a heading block, an image block, and two paragraph blocks. You can add any kind of blocks to your content, including codes containing code snippets.

If you are new to the Block Editor, then check out how to insert blocks with Gutenberg. Also, have a look at how to Set Full-Width Alignment in the WordPress Gutenberg block

Here’s how the layout turned out to be:

Now, tweak each block the way you want it to look. For example, change the font in the paragraph blocks, add text highlights, change the text color, and change the image formatting and size.

Once you have finished with the setup, it is time to make these Gutenberg blocks into reusable ones.

To make any of the blocks reusable, first click on one of them, and from the menu that pops up, click the three dots:

Clicking the three dots will open more menu options. From there select Create a Reusable Block:

After you click on Reusable Block, Gutenberg will prompt you to come up with a name for the soon-to-be reusable block. As a rule of thumb, add a description that includes more details about the settings you choose for this particular block. This will help you identify reusable blocks faster when there are more of them:

Then, do the same with the rest of the blocks you would wish to reuse across your website.

Now, to use the newly-created reusable blocks, create a new page or a blog post you wish to edit:

Now, click the black + button to add a new block within the page/post:

This button allows you to quickly insert Gutenberg blocks that are being used the most:

Within this list, you can see the reusable blocks you already set up, colored in purple and bearing the names you gave them:

You can include them in your page/post right away by clicking on them. Once you do, they will appear with all the settings you made when creating the reusable blocks:

Without any additional setup and effort, these blocks appear in your content structure with all the settings you made and saved when creating the reusable blocks.

Conclusion

By making reusable Gutenberg blocks, you can save time and effort when crafting web pages with similar content structures.

Luckily, Gutenberg Block Editor makes the process simple and intuitive.

The post How to Use WordPress Reusable Blocks appeared first on Free Hosting - ZETTAHOST.com.

How to Add a Title Tag in WordPress

Georgi Boychev — Tue, 04 Apr 2023 12:54:42 +0000

Adding a title tag to your WordPress webpages and posts is not only important to help search engines find and rank your pages in search results, but it is also important for site visitors, as the proper title tag helps them understand what your site content is all about.

In fact, adding a site title is one of the first things to do after you’ve installed WordPress.

What is a Title Tag in WordPress

At its core, the title tag is an HTML element that contains the heading of each web page and blog post on your website.

When displayed among others in the results list, a properly set up title tag has the potential to persuade Internet users that this website contains the answer to their query and eventually prompt them to open your website and browse its content:

Also, title tags are very important for search engines such as Google, because crawling bots pay attention to whether the title tag is relevant to the search query and whether it is relevant to the website content.

Should search engines determine the title tag as more relevant to the search query and website content they lead to, they will rank your website higher in SERPs.

The title tag is also displayed within the Internet browser tabs with opened web pages:

Because of how beneficial title tags are for the success of your website project, it is important to know how to include them in your WordPress website.

How to Add a Title Tag in WordPress

The first thing you should do to add a website title tag is to enter your WordPress admin dashboard.

After you’ve logged in to your admin panel, head to Settings->General:

Once you open the general WordPress settings, you should be able to see a page such as this:

From this page, you can edit various website settings such as WordPress permalinks, time zone formats, and the site title tag.

To add or edit a website title tag, have a look at the Site Title option that is usually placed just below the General Settings heading:

To add or edit your site title tag, within the Site Title field type down your site title:

Notice how the title tag within the WordPress admin panel in the upper left corner is changing as you type in your title tag:

Once you are satisfied with your website title tag, scroll down to the bottom of the General Settings page and hit the blue Save Changes button. Clicking it will make WordPress apply and change your settings:

Now you’ve managed to add a title tag for your WordPress website.

Conclusion

Title tags are important for every WordPress website, as they allow search engines to find and crawl your site content and rank your pages in search engine result pages.

Adding a title tag to your site can greatly boost your SEO score and eventually contribute to more traffic to your website.

The post How to Add a Title Tag in WordPress appeared first on Free Hosting - ZETTAHOST.com.

How to Add Alt Tags to Images in WordPress

Georgi Boychev — Thu, 30 Mar 2023 11:32:02 +0000

Alt tags, known as image alt tags, alt descriptions, or alt attributes are pieces of text that are a part of your website images.

Alt tags are used for two main reasons:

Google can’t really “see” images the way people see them. To understand what site pictures represent, search engines read the alt descriptions and decypher their context.
Alt tags appear in the case when an image on your website can’t load. This is a convenient way to reveal to your site visitors what this image represents.

In the following paragraphs, you will read how to add alt tags to your site images.

How to Add Alt Tags to Images in WordPress

There are three main ways of adding alt tags to your images in WordPress:

Via the WordPress Media Library
Via WordPress Gutenberg Block Editor
Via the WordPress Code Editor

Add Alt Tags via the WordPress Media Library

To use this method, you should first log in to your WordPress admin panel.

Then, go to Media-> Library:

Once within the WordPress media library, click on the image to which you wish to add an alt tag:

When you click on any of your uploaded images, a pop-up window with various image options will appear:

Now, while the window is opened, look at its right side:

This area allows you to add various types of alt attributes, such as text, title, caption, and description.

You can add your alt text in the Alternative Text field:

To add your alt text, simply click on the white field and start typing your text:

To save your changes, once you finished typing down your text in the Alternative Text area, click with your mouse button somewhere outside the field and WordPress will automatically save and apply your changes.

Now, when search engines crawl your website, they will read the alt text and will have a better idea of what your site content is about.

Also, time the image cannot load, WordPress will display this text.

Add Alt Tags to Images via WordPress Via Gutenberg Block Editor

If you are using WordPress Gutenberg Editor, you should do the following to add alt text to your images:

The first thing you should do is open the blog post or webpage that contains the image you wish to edit.

For this demonstration, we will edit a blog post, but keep in mind that the process is the same for editing images within your pages.

To open a blog post, go to Posts->All Posts via your WordPress dashboard:

After that, click on the heading of the blog post you wish to edit. This will open the Gutenberg editor:

Once block editor is activated, locate the image block containing the image you wish to add an alt tag to, and via the three-dots menu click on Show More Settings:

Clicking on this option will make Gutenberg display the image options side menu:

Within this image side menu, locate the ALT TEXT (ALTERNATIVE TEXT) area under Settings:

You can add your alt text in this area. To do so, click on the white box under ALT TEXT (ALTERNATIVE TEXT) and start typing down:

Once you have typed down your alt text, click on the blue Update button at the top right of the screen, so WordPress applies and saves the changes you have just made:

Add Alt Tags via Code Editor

The WordPress Code Editor allows you to work with your website’s HTML, CSS, and JavaScript codes.

Here’s how to access the code editor, so you can add alt tags to your site images:

If You Are Using WordPress Classic Editor

Open the blog post or web page edit page by going to Posts->All Posts or Pages->All Pages and click on the page or a post containing the image you wish to add your alt text to. Also, keep in mind that the process is the same whether you are editing a blog post or a web page.

Once you have opened the edit page, find the Text tab on the right below the Heading area and click it:

Clicking on the Text tab will open the WordPress Code Editor and display the code that comprises your page or blog post content:

Now, find the HTML code that represents the image you want to add an alt tag to. This piece of code starts with

Once you find the code that represents the image you want to edit, within this snippet find alt=” ” This is part of the HTML code that comprises your image’s alt tag.

To add the alt tag, click between the two quotation marks within alt=” ” and add your text content between them:

Once you have added the alt text, click on the blue Update button located at the top right of the screen, so WordPress applies and saves the changes:

If you are using WordPress Gutenberg Editor

For editing a blog post:

Go to WordPress Admin Dashboard->Posts->All Posts and open the post containing the image you wish to add alt text to.

For editing a web page:

Go to WordPress Admin Dashboard->Pages->All Pages and open the web page containing the image you wish to add alt text to.

Regardless of if you edit a page or a post, the following process is the same for both posts and pages.

Click on the Image block you wish to edit:

Then, click the three dots at the top menu appearing right above the image block, and then click on Edit as HTML:

Clicking on Edit as HTML will open the code that represents the image you are editing:

Within this code block find alt=” ” snippet:

This is the code representation of the image alt tag. To add your alt text between the two quotation marks comprising the alt=” code snippet:

Make sure that the alt text you add is placed between the two quotation marks comprising the alt=” ” HTML element.

When you have typed down your alt text, you should update your page or post, so the changes are being applied. To do so, click on the blue Update button at the top right of the screen:

Conclusion

Alt tags help Google understand better your site content which allows them to rank your web pages higher in search results.

Adding alt tags to your WordPress images also present a convenient way of describing what the images are all about in case they don’t load properly.

Relevant:

Create a WordPress Website – The Ultimate Guide

WordPress Basics Pt.1

How to Create a New Page in WordPress

How to Schedule WordPress Posts

How to Use the Media Library in WordPress

How to Add Links to Your WordPress Posts

How to Change Text Color With WordPress Block Editor

How to Download Media Library Using WordPress Settings

How to Download WordPress Media Library from the ZETTAHOST Server

The post How to Add Alt Tags to Images in WordPress appeared first on Free Hosting - ZETTAHOST.com.