Navigating the WordPress editor debate between Gutenberg and the Classic Editor? This comprehensive analysis uncovers key features, performance, future development, and user experiences of each. Explore their differences and decide which suits your needs best. #WordPress #GutenbergVsClassicEditor
The post “Classic Editor vs Gutenberg: The Ultimate WordPress Showdown” first appeared on WP Mayor.
The WordPress row block is an important design block that enables you to organize your content into a horizontal row. It’s a versatile block that can be used anywhere in the WordPress editor to organize content in templates, template parts, as well posts and pages. In this post, we’ll explain what it is, how to use it, and answer your burning questions about it. Let’s get to it.
The row block works much like the stack block. However, instead of displaying items vertically, it displays blocks horizontally across the available space of the parent container. By default, the block will evenly space the blocks contained inside of it – and uses the flex CSS property to display content in a grid format on smaller screens.
If you are using a page builder, like Divi, the row block isn’t necessary. You can use the Divi Builder to add rows and other elements with more advanced design options.
For this post, we’ll be adding it using the Twenty Twenty-Three theme, but you can use any block theme or full site editing theme to follow along. Start by logging into your WordPress site. Then, add a new page.
There are a couple of ways to add the block to your site from the block directory. The first way is to use the block inserter. Click the block inserter icon at the top left of your page.
Next, type row in the search bar. Locate it from the search results and either click to add it, or drag it into the page editor.
An alternate way to add the block is to click the + icon on the page editor, or simply start typing /row to reveal the block results. Click the row block to insert it into the page.
After adding a row to the page, you can insert as many blocks within your row as you’d like. Blocks display depending on whether you choose to stack them or not. We’ll get more into that in the next section. By default, as you add blocks, they appear from left to right in the row.
The WordPress row block can be customized using the toolbar settings and additional settings. Here is a breakdown of the settings available.
The toolbar settings group consists of several settings that are outlined in the image below:
The first on the list is transform to. You have a few options here.
You can transform the row into a quote, unwrap it, convert it to columns, or convert it to a cover. When you unwrap a row, each block contained within it will stack on top of each other, rather than being displayed from left to right. Gutenberg will provide you with a preview of how your row will look once unwrapped.
When converted to a cover, you can add a background image, background overlay, and set the padding on it. Choosing this option converts your row into a cover block, but retains the blocks within the row itself.
The drag option enables you to reposition the block anywhere on the page. This is handy for complex page designs that contain multiple sections of content. Similarly, move will allow you to move the row up or down on the page without the need to drag.
The justification setting allows you to either justify the items in your row to left, center, right or evenly space the items in your row from left to right.
With the alignment tool, you can either align the blocks contained in the row to the top, middle, or bottom.
You can specify the width of the block to be a max of 650px wide, 1200px wide, or full width. Full-width rows span the full width of the page, which is good for rows converted to covers or for a call-to-action sections.
Under More Options, you’ll be able to do things like copy, duplicate, insert, move, lock, group, ungroup, remove, or create a reusable block from the row.
You’ll find several options under additional settings. To locate the block’s additional settings, click the block tab located in the sidebar settings for the row block.
First, you can arrange blocks in your row either horizontally or stacked vertically.
Next, you can set justification and orientation options, as well as set blocks to wrap to multiple lines. Justification options are the same as in the toolbar settings. You can set your blocks to align to left, middle, right, or space evenly. Orientation functions similarly to the arranged options in that you can choose horizontal or vertical orientation.
Under color options, you can change colors for text, background, and links in the row’s blocks. Depending on the theme you’re using, gradient background colors are an option as well as solid colors.
Typography options can be set for any text contained in your row. You can set the font family, font size, font weight (appearance), line height, letter spacing, text decoration, and letter case.
Dimension settings control the padding, as well as block spacing. Block spacing controls the amount of space between blocks.
The last setting controls the border, as well as the border radius for the row. Units include pixels, percent, em, rem, vh, and vw.
The row block is a versatile block that will allow you to do a lot of cool things, apply nice effects to your blocks, and keep your content organized. There are a few things you should consider doing to use the block effectively. Using it is a great way to add different effects to groups of blocks. For example, when creating call to action sections for your website, you could use a call to action block, but its uses are limited. Instead, consider using a row so that you can add any type of block that you want.
Additionally, using a row allows you to set the width, vertical alignment, and background options for a group of blocks. This can come in handy when you are trying to draw emphasis to a certain section of your website, such as a group of posts, for example.
Another tip you should consider when using rows is to utilize the list view. The list view comes in handy, especially when you have quite a few blocks on a single page. You can easily determine where your rows begin and end, drag blocks to other locations within the row to arrange them, and add new blocks exactly where you want them.
The row block is a complex block with a ton of uses and features, so you’re bound to have some questions. Hopefully, these will help.
Rows and columns are very similar to each other. A row works the same as a column in that it allows you to add blocks horizontally. However, there is one key difference. A column block requires you to designate a set width for each column, whereas a row does not. You can easily drag blocks within it to resize the column width, whereas columns demand that you enter a value to resize them.
Absolutely! As previously mentioned, the row block is suitable for use in any scenario. Whether it’s in a post, page, template part, or template, the row block is useful for all types of content. Using them is a great way to organize and structure content in your templates, as well as your posts and pages.
One of its coolest features is the ability to handle limitless blocks within it. Unlike the column block, there isn’t a predefined number of spaces that can be used. For example, if you were to start adding images blocks to a row, your images will continue to display from left to right, regardless of how many you add. Each image will scale to fit within the space allotted.
The row block is a crucial design element for providing structure to your website content. It can be used within templates, posts, and pages, and can contain unlimited blocks within it. It’s useful in creating template parts such as headers where multiple blocks are displayed. For example, a header row might contain the site logo, page list, social icons, as well as a call to action button. If you’re creating a website using blocks, this block will be essential.
How do you incorporate the row block into your WordPress website? Let us know by sounding off in the comments section below.
The post How to Use the WordPress Row Block appeared first on Elegant Themes Blog.
The WordPress editor is growing into a full-fledged site builder. Thanks to the full site editing and the new theme blocks like the Query Loop Block, you can display lists of dynamic content for any post type anywhere in WordPress with ease.
In this article, we’ll dive deeper into the WordPress Query Loop Block so you can better understand what it is and how to use it.
The Query Loop Block is one of the most advanced WordPress theme blocks available in the new Site Editor. It was added to WordPress Core in version 5.8 and is a a more complex version of the Latest Posts Block. It allows anyone to visually build a block that pulls and displays post content dynamically to a page or template. The Query Loop Block isn’t limited to displaying blog posts either. You can use it to pull content from any custom post type you may have. You can even use it with WooCommerce Blocks to display products.
In WordPress terminology, a “Loop†is a way of displaying similar information on repeat. A loop of blog posts, therefore, is a series of blog posts with common attributes such as blog title, featured image, author name, publish date, and a short description. The loop pulls this data from posts (or any post type) and places them in a loop. The loop then displays posts to site visitors.
The query aspect of a “Query Loop†means that a user can query, or command, certain information to pull into the loop. So a Query Loop Block can pull and display all posts or posts of specific categories—to name just a couple of options. This allows someone to show posts in “Category A†and no posts from Category B or C.
Query Loop Blocks can display:
Any post types are fair game for display in a dynamic loop.
There are two immediate “Nested Blocks” that belong to the Query Loop Block:
We won’t cover these nested blocks in this article but you can click on any of their hyperlinks above to get all the information about how each works within a Query Loop Block.
In this example, we are using the “Twenty Twenty-two” Default WordPress Theme. This was the first default theme to include editing through the Site Editor (previously called “Full Site Editor”).
We’ll be walking through how to add a WordPress Query Loop Block to a Template in the Site Editor. To get there, first, hover over “Appearances” and then click “Editor”.
Then, click on the icon in the top left to pull down the dropdown menu. In that menu, click “Templates”.
Now, from the list of presented templates, find the template you wish to edit. One of the most natural templates for this block is the “Index” template since it is the template that indexes or displays website posts.
You are now on Twenty Twenty-two’s Index Template. You’ll notice that it already comes with a Query Loop Block configured. But, if you are using a different Block Theme then it may not come with it.
To add a new Query Loop Block, click the “(+)” icon. Scroll down to the “Theme” blocks or type “Query Loop” into the search bar. Drag the Query Loop block into the Site Editor.
WordPress has predefined “Patterns” that can give you a headstart in designing your Query Loop. You can choose a specific pattern if you know that there’s one that fits your needs, or you can start blank. We’re going to click “Start blank”.
There are four default variations to apply to a Query Loop. For this example, click the “Title & Date” variation.
This will create the Query Loop with the “Title and Date†variation.
Notice nested blocks appear inside WordPress’ Query Loop Block. This is because those blocks provide necessary features for the Query Loop. Since we chose the “Title & Date†variation, those nested blocks need to be included to show “Title” and “Date” information. A different variation would have loaded a different arrangement of nested blocks.
Now that a Query Loop Block is on a template, we’ll explore the Toolbar and Settings for this advanced Theme Block.
Each block within the Site Editor and Block Editor has its own Toolbar options and a Sidebar of More Settings.
To find the Toolbar for the Query Loop Block it is easiest to go to the List View and select the block—making sure a nested block is not selected.
The first unique Toolbar option for the Query Loop Block is the “Display Settings”. Clicking on that will show three options:
Next on the Toolbar is the “Replace” button. This gives the option to strip the Query Loop Block’s pattern and replace it with a different pattern.
The last unique Toolbar option for the Query Loop Block is the toggle between List View and Grid View. List View displays the post loop “as a list” with posts stacked. Grid View displays the post loop as a grid with more of a table layout for the posts to fill.
The Query Loop Block has additional configurations in the “More Settings” sidebar. To reveal the sidebar, either click the “Show More Settings” option nested in the Toolbar or by clicking the “Gear” icon in the top right while the Query Loop Block is selected.
The first visible sidebar setting gives site owners the ability to create a New Post for the Query Loop from this editing page. After that, there is the Layout Toggle which affects how Nested Blocks use layout width compared to the Query Loop Block—more on that later. The Settings Toggle allows for selecting a custom or an inherited query for the block—more on that below as well.
The “Layout” settings for nested blocks allow a designer to toggle additional settings on (blue). These settings allow one to choose if those blocks use content and width percentages. It also reveals an option for left, center, or right content justification. With it untoggled (grey), nested items are set to full width by default.
When the query “Settings” is untoggled (grey), then you can select exactly what to query. The first option is “Posts” which can be pages, posts, or custom post types. Next, users can choose between ascending or descending order for either date published or alphabetically. Lastly, there is an option to include or exclude sticky posts in the query.
Toggling “Settings†(blue) sets the Query Loop Block to inherit the query from the template used template.
Next, with query “Filters” gives users the option to further customize the query by filtering posts by:
Lastly, we have Color settings and Advanced settings. The color options allow designers to choose colors for:
Advanced settings include the ability to add a CSS class to the WordPress Query Loop Block and/or assign an HTML element to the block.
Each nested block within the Query Loop Block has its own Toolbar options and sidebar Settings. Visit the list of nestable blocks above to learn more about each and the settings that they have.
Query Loops are powerful blocks. Follow these tips and best practices to get the most out of them.
Global Styles can be set on a block-type-by-block-type basis. This lets designers create global default styles that apply to all instances of a block throughout the website. This is a huge time saver.
Currently, on the 2022 Theme, the Query Loop Block allows you to add Global Styles for text color, background, and link colors. To get to the global styles editor, click on the “Global Styles” icon (half-filled in circle), select “Blocks”, and find the Query Loop Block.
You can also assign separate global styles to each of the nested theme blocks (like Post Template, Post Title, etc.) within a Query Loop as well.
In creating a Blog Page template, you may want to create a featured post that stands out because it is the most recent post published on your site. Below is a simple version of the concept.
There will need to be two Query Loop Blocks on our “Index†template. The top Query Loop Block will have a “List View†display and will only show one single post. Make sure that it has no Pagination Block nested in this first Query Loop.
With the second/bottom Query Loop Block, set it to “Grid View”. It should display multiple posts in columns and set the “Offset” to 1. An offset of 1 will skip the first post of the query. This is desired since the query loop above contains the featured post.
Query Loops used for “blog articles” should look similar. If you use Query Loop Blocks for other post types, consider a slightly different style for those so your site visitors can differentiate what are “Blog Posts” and what are other types of content. This will make for a clear website UX.
If you use Divi, the Blog Module functions much like the native WordPress Query Loop Block. And adding Divi’s Blog Module to a page or template is simple, giving you all the options you need to customize the parameters, layout, and design of the dynamic post content.
The content displayed within the Blog Module is completely flexible as well, allowing you to select a certain post type, post type categories, and the number of posts to include. Individual Module Elements can be added or removed such as featured images, titles, meta-text, body text, read more links, pagination, and so on.
Each of these Module Elements can be completely styled using Divi’s extensive design options. Learn more about using Divi’s Blog Module on Templates.
Answering some of the most asked questions about WordPress’ Query Loop Block.
The Query Loop Block is similar to the Latest Posts Block in that it has the capability of displaying a list of the latest posts on your blog dynamically. However, the Query Loop Block is much more advanced, allowing you to build your “list” of posts, pages, or other post types from scratch by integrating other nested blocks. For example, if you have a custom post type for recipes, you can use the Query Loop Block to create an entire page of recipes customized to your liking.
No, the WordPress Query Loop block does not require coding knowledge because the functionality is already built-in. This block enables you to display a loop of posts on your WordPress site using customizable block settings on the front end.
The WordPress Query Loop Block loops through published posts and pages to display them. It will automatically update as new pages/posts meet the query parameters. This makes this block useful in many places such as post or archive templates, or on static pages where you want to display things like recent posts dynamically.
Have you used the Query Loop Block on your WordPress site? What discoveries have you made? Let us know in the comments below.
Featured Image by Dmitry Kostrov / shutterstock.com
The post How to Use the WordPress Query Loop Block appeared first on Elegant Themes Blog.
Thanks to the introduction of Gutenberg blocks in version 5.8, WordPress makes it easy to organize your content and create awesome patterns. With the help of the WordPress Stack Block, you can add any type of block you choose, then display it vertically to create beautifully stunning layouts with ease.
The WordPress Stack Block is a useful block that allows you to stack multiple blocks in a vertical column. Similar to the row block, it allows you to group multiple blocks together, making it easier to keep your blocks nice and tidy. It’s a versatile block because you can add any block you wish within it such as headings, images, buttons, and more.
Adding the Stack Block to your page using the WordPress Editor is a simple process. Start by clicking the block inserter icon near the top left of the site editor screen.
Next, you can either search for the Stack Block or type /stack into the page editor directly. Then, simply click the block to add it.
There are two settings groups within the WordPress Stack Block – toolbar and additional settings. Let’s go over each group to give you a better understanding of how to use it.
As with every block in WordPress, there are a few standard toolbar settings for the Stack Block. They can be observed by viewing the screenshot below:
The first setting in the Stack Block is Transform To. With this option, you can turn the Stack Block into a quote, unwrap (ungroup) it, convert it to columns, or convert it into a cover block.
The next two settings – drag and move – allow you to either drag your block into a different position on the page, or use the move arrows to move it up and down.
The Justification option in the toolbar settings controls the justification of the blocks within the stack. They can either be aligned to the left, center or right.
Next is the Align option. This option doesn’t necessarily control alignment, but rather the width of the stack. You can set it to None, which will allow the stack and all interior blocks to occupy a maximum of 650px. Wide width will allot 1000px for the stack, and Full width will stretch the Stack Block and all interior blocks across the full width of the page.
The last toolbar settings group is more options. Within it, you can copy, duplicate, insert, move, lock, group, remove, or create a reusable block.
There are quite a few additional settings specific to the Stack Block. First, there is the Layout setting. Under the Layout options, you can control the justification and orientation of the stack, as well as control whether the blocks within the stack should be allowed to wrap to multiple lines. Justification options include left center, and right. For orientation, you can choose whether to orient them horizontally or vertically.
Note that if you choose the horizontal orientation, the Stack Block will automatically be converted to a row block.
Next is the Color settings. When selecting a text color on the stack, it will control the color of the text on every block inserted into it. Alternatively, when choosing a background color, it will only apply a background color to the stack itself, rather than its contents. Finally, link color settings control any links added within the Stack Block.
Within the Typography settings, you can set the font size, appearance, line height, letter spacing, text decoration, and letter case for any block inserted into the Stack, which contains the text.
Next are the Dimension settings. Here you can control the padding around the Stack. You can either set padding as a whole, or individually for the top, left, bottom, and right. Additionally, you can control the block spacing for all blocks contained within the stack.
The Border options allow you to add a border and/or a border radius to the Stack.
Even though the block is fairly simple to use, there are a few best practices that you should follow.
When adding blocks to the Stack, a great way to stay organized and view your blocks is to use the WordPress List View. List view enables you to view each block within the stack, and allows you to easily drag them around to move them. To access the list view, simply click the list view icon to reveal all of the blocks in your stack.
Also, make sure to keep the orientation option set to vertical. Swapping to a horizontal view in the layout settings will convert your Stack to a row. As previously mentioned, rows display blocks horizontally rather than vertically.
Lastly, when setting colors for your stack, keep in mind that if you set a text color on the Stack Block itself, it will apply to other child blocks containing text as well. If you don’t want to apply a color to all blocks within the stack, be sure to apply color settings to individual blocks within the stack.
The WordPress Stack Block is a versatile block that can be utilized in pages, posts, and templates. So you will likely have a few questions. Hopefully, these will help.
While Row Blocks and Stack Blocks allow you to group a series of blocks together, the difference is in orientation. You should use a row block when you want to display blocks horizontally. A great example of when to use a row block is when building a header. Typically, you want to have your site logo, as well as navigation links displayed horizontally. The Block works in much the same way. It can house a group of blocks. However, a Stack Block displays the block vertically. A great way to use the block is to build a sidebar with your post categories.
Yes! Stack Blocks are a great way to display a group of blocks vertically, and help to keep blocks organized. This is especially useful when creating a template using full site editing in WordPress. For example, when creating a blog post template, it’s a good idea to use the block to house your post title, post meta, post content, and other post-related blocks.
Building a website in WordPress starts with adding structural elements like rows and columns. The Stack Block is a convenient way to add a row of content that is aligned vertically instead of horizontally. The block can be easily configured to help you design a page in WordPress using the built-in settings in the toolbar and sidebar block settings. Though this block is native to WordPress, page builders like Divi have more robust design options for optimizing the structure of your page using modules.
For more, check out our other WordPress Block tutorials as well as our complete guide to WooCommerce Blocks.
Have you experienced using the Stack Block on your website? Let us how in the comments below.
The post How to Use the WordPress Stack Block appeared first on Elegant Themes Blog.
Your WordPress website’s title is an incredibly important part of your brand, and knowing how to utilize it properly is important for any WordPress user. In this article, we’ll be delving into the Site Title Block, giving you some tips on how to use it properly to maximize its effectiveness on your WordPress website.
The site title block in WordPress is one of many theme blocks available in the WordPress editor. This block gives you the ability to change or add your site’s title to a WordPress page template or main header.
The Site Title block is also dynamic because it pulls your site title from your website’s data (on the backend) as dynamic content. So changing your site title via the site title block or on the backend will automatically update all iterations of the Site Title Block throughout your site. Furthermore, when using the Site Title Block on a template, you have easier control over the design of the site title globally. This type of functionality is one of many new WordPress features that has come with full site editing.
Important Note: Updating the Site Title Block name WILL update the official name of your website that appears in Settings > General. Changing this will also change it on your browser title bar and in search engine results.
For this example, we are going to use the Twenty Twenty-Two theme to add the site title to WordPress header area of the template. From the WordPress dashboard, go to Appearance  > Editor.
There should already be a Site Title inside the header area of the page template on the right of the Site Logo Block. You can also open the list view to find it as well.
To add a Site Title block, start by clicking the Block Inserter (+).
Then search for “Site Title†in the search bar.
Either click on it or drag it to your desired location to add the block to your header.
You can also type /site-title to quickly add your site’s title to any part of your page.
From here, you can click on the block and update your Site Title for your entire site and subsequently on all Site Title Blocks throughout your site. So don’t change it unless you know the consequences of doing so.
To change your website’s title away from the WordPress editor, you can navigate to Settings > General
If you change your title here, your site title blocks will update on all the pages they are on.
The Site Title Block comes with additional settings and options that make it easy to edit or customize the display of your title on your website. Here is a brief overview of the settings available.
If you hover over the block, you’ll see a formatting menu that includes the following options:
Here’s a quick cheat sheet that shows where each of those options is within the formatting toolbar:
If you click on the three vertical dots on the right side of the toolbar and select show more settings or the cog in the upper right corner you can access the sidebar to view the additional block settings available.
From here you can access additional settings, first you can see Link Settings:
Below Link Settings, you can view the Color tab, here you can:
Under the color section, you can view more settings by clicking the three vertical dots next to Typography.
You can change the font from the font setting section.
Adjust the font size under the size setting.
The font-weight (bold, thin, etc.) can be changed in the appearance section.
You can also adjust the letter spacing and line height in their respective sections.
In the letter case setting, you can adjust the capitalization of the site title block.
And you can underline or strikethrough your site title by selecting those options in the decoration section.
Below the settings section, you can find the dimensions tab where you can adjust the padding and margin of your site title block.
An important distinction to note is that while the text of your site title block will update on all iterations of the block, the style (Background color, text color, etc) will not update unless specified in the site styles sidebar. For example, here we have set our Site Title block in our WordPress Template header to have a blue background color.
If we open a blog post, we can see that the header changes with the updated style (1), but if we put the site title block elsewhere on the page, the style doesn’t match (2).
To change the styles of all the site title blocks we can navigate to the styles tab by clicking the half-white, half-black circle in the top right of our template editor and selecting blocks.
Here we can search and select site title from the search bar.
From here we can make changes that will change the style for all iterations of the site title block.
For algorithms and search engine bots, keywords are crucial. In terms of maximizing your WordPress website’s SEO, it’s excellent practice craft the perfect SEO title for your site and pages. Before choosing your title, do some simple keyword research to find what best describes the information on your website.
Every component related to the branding of your website should be consistent, you should choose the right webfont and utilize the same style for your title as you do the other elements on each page of your site.
This consistency will help keep your audience engaged with your site and not confused or disoriented. Another good practice is making sure you are linking your title to your homepage, as this will help your users navigate your website more effectively.
Even if using the site title block is pretty straightforward, you may still have some concerns regarding this specific component. Let’s break down some of the most often-asked questions about the functionality of the title block.
You shouldn’t change your title too often because you risk losing users that already know your branding as well as confusing search engine bots that know your original title. You should only change your site when your first create your site, are focused on rebranding, have shifted into another field of expertise, or have a better SEO title.
Displaying your site title isn’t necessary. But there are instances where adding this dynamic content to your site makes sense. For example, putting a title next to your site logo, or header would be the best placement for a site title block.
You can change the font of your site title block through the advanced settings, by clicking the three vertical dots next to Typography (Pictured Above.)Â Â You can also change a variety of style options from here as well.
If you are using Divi, you can use the Divi theme builder to add a site title to your global header (or anywhere on your site) in just a few easy steps. You can start by clicking the edit button next to Global Header in your Divi Theme Builder.
Next, add a new module (in this case, a Call to Action Module) in your header.
Under the content settings, hover over the title input box and click the “Use Dynamic Content” icon. Then select “Site Title” from the list.
It’s just that easy! Dynamic content is now supported by all of Divi’s main content inputs. To view a complete list of all content that is accessible, simply click the dynamic content symbol. Next, choose the item you want, alter its output, and connect it to the module. The module, the page, and the rest of your website will all immediately update if that piece of content is modified.
Learn more about how to add a dynamic site title in Divi.
Simple yet essential, your website’s WordPress site title is an integral aspect of your site. It’s one of the first forms a WordPress site owner fills out, and it’s easy to overlook.
Using the site title block you can easily incorporate your title into your posts and edit them based on your preferences and style. We hope this article gave you some useful tips on optimizing your title!
Let us know in the comments if you have any questions regarding the WordPress site title block!
The post How to Use the WordPress Site Title Block appeared first on Elegant Themes Blog.
One of the most essential parts of running a WordPress site is branding, and nothing stands out more than a logo. Your logo defines your brand, so you need to use it properly. In this post, we’ll tell you how you can implement a logo into your website using the WordPress site logo block. We’ll also cover the block settings available and give you some helpful tips for using a logo effectively.
The site logo block in WordPress is one of many site blocks available in the WordPress editor with the rise of full site editing. The block gives you the ability to add your site’s logo to a page template or main header in WordPress.
The site logo block is also dynamic because it can pull your site logo from your website’s data as dynamic content. So changing your site logo via the site logo block or on the backend will automatically update all iterations of the site logo block throughout your site. Furthermore, when using the site logo block on a template, you have easier control over your global logo design.
It’s important to note that the Site Icon, the smaller image seen in your dashboard and browser tabs, etc., is distinct from the Site Logo. However, the site logo can also serve as the site icon if you choose by updating the block settings tab which we’ll get into further below.
For this example, we will show you how to add or customize the site logo on your WordPress header in a template using the Twenty Twenty-Two theme. Here’s how to do it.
From the WordPress Dashboard, navigate to Appearance >  Editor.
There should already be a site logo inside the header area of the page template on the left of the Site Title. You can also open the list view to find it as well.
If you want to add the Site Logo block to the template, you can click on the +  block inserter icon.
Then search for “Site Logo” and click on it and/or drag it to your desired location to add the block to your page.
If you haven’t set your logo, you can upload it after clicking the upload sign on the Site Logo Block.
Once you change your site logo via the site logo block, all other copies of the site logo will display the same image. This is the dynamic functionality of the block in action.
The Site Logo Block comes with additional settings and options that make it easy to customize for your website. Here is a brief overview of the settings available.
If you hover over the block, you’ll see a formatting menu that includes the following options:
As you may have noticed these tools can help you adjust the look of your logo so that you can get the placement and design to match your website’s style.
To change the color of the logo image click the duotone tool and select your desired color scheme.
To set your colors, select the dots within the color bars:
If you open the additional options or block settings toggle in the sidebar, you can find more block settings you can customize.
From here you can change your logo to:
Below the settings section, you can find the dimensions tab where you can adjust the padding and margin of your logo.
That covers everything you need to know about the settings available for your logo block, so you can customize your logo’s style to match perfectly to the rest of your site’s aesthetic. Now, let’s delve into some tips for how to use this block effectively.
Using the site logo block is pretty straightforward to use, but it’s still important to keep some things in mind.
Just like with any image uploaded via WordPress, it’s important to optimize your logo before you upload it to your site logo block. This will improve your load speeds and be beneficial for image SEO as well. Your logo should be a PNG, and the file shouldn’t be too big, we recommend using a web tool like TinyPNG, to help compress your image without losing quality in the process.
Assuming your website already has a design and scheme, your logo mustn’t contrast too much with the style already in place on the rest of your site. So take a look at the colors and layout of your website and see if you can work your logo in as seamlessly as possible.
Making sure you use your logo properly after creating it is an essential step in effectively branding your website. In most cases, your logo should be displayed on your WordPress header area/template so that it can be seen on all the pages of your site. Also, it’s best practice to make your logo link back to your homepage to help with user flow and to constantly draw the user’s eye to your logo.
After you complete the difficult task of creating your logo, using the logo block in WordPress is relatively hassle-free. Still, as with anything, some questions need answering. Here are some answers to frequently asked questions about the logo block.
To replace the site logo, click on the site logo block and then click on Replace in the toolbar settings. There you can add one from your media library, upload a new one, or reset the site logo to the default.
Your logo is the symbol that represents your website and, therefore, should be prominent on nearly every page of your site. This is why we recommend putting your logo in the header area, where it can be used for both navigation (Home button) and branding purposes.
A site icon is used as a browser and app icon for your site; you may see it next to the tab in your browser. The logo for your site isn’t necessarily used as the site icon but can be activated in the logo block’s advanced settings.
When using Divi, you can use the Divi theme builder to add a site logo to your global header in just a few easy steps. You can start by clicking the edit button next to Global Header in your default website template.
Now, you simply add an image module to the header and select the Use Dynamic Content option in the top right corner.
You will then be prompted to select from a list of all dynamic content that is accessible. Select Site Logo to add the dynamic logo to your header.
Learn more about using dynamic content with Divi here.
It is impossible to overstate the significance of your brand’s logo. However, you need a systematic approach to branding your site effectively. This is especially true if you want it to leave a lasting impression on audiences. Hopefully, some of the tips mentioned above can help you create your ideal logo and use the logo block correctly and effectively.
If you have any other tips on making memorable logos, leave them in the comment section below!
Featured Image via VectorMine / shutterstock.com
The post How to Use the WordPress Site Logo Block appeared first on Elegant Themes Blog.
Customizing your WordPress website’s header has gotten much easier with the introduction of full site editing. Now, it’s possible to create and customize headers natively in WordPress using the block editor without having to resort to custom code or plugins.
In this post, we’re going to walk through how to create a custom header in WordPress so that you can easily make the changes needed to your own website header. Let’s get started.
In WordPress, the header is quite possibly the most important element. It houses a navigation menu, a logo, and other important elements such as social media icons, call-to-action buttons, or even business information. Since the WordPress header is the first thing your site visitors see, it’s important to make a good first impression. It should contain everything a visitor needs to see – pages, contact information, branding elements, or other important information.
Thankfully, you are no longer married to the WordPress customizer. With the development of full site editing, it is now possible to design and implement your site’s header, or any other element, in any way you wish.
Full site editing in WordPress is a bit different than the WordPress themes of old. While you can still use the WordPress Theme Customizer, it’s no longer necessary like it once was. The creativity-limiting customizer has been replaced with a new experience – the site editor. While still in beta, it is the future of WordPress customization. For instance, when creating a new header in the Twenty Twenty-Three Theme, the site editor is quite useful for a number of customization options including your header’s fonts, colors, button styling, and more.
In order to access the WordPress header, you’ll need to first navigate to Appearance > Site Editor.
When the editor loads, you’ll be automatically taken to your home settings. To get to the header settings, you can either click the WordPress logo in the upper left corner of the editor, or select the dropdown arrow, then choose Browse all templates.
Next, click on template parts in the WordPress menu. Finally, click Header to edit the site’s header.
In the Twenty Twenty-Three theme, the header is very basic. That being said, you have the option to add or delete any WordPress blocks you’d like. For the sake of this tutorial, we’re going to show you how to edit the header template part of the Twenty Twenty-Three theme to create a simple, yet effective custom header for your website.
To get started, let’s take a look at the header’s structure by clicking the list view icon in the template editor. You’ll see that there is a group block that contains a row with two blocks – the page title and navigation block. The row is already structured the way we want with a centered vertical alignment, and the content is set to full width. So basically all we need to do here is make a couple of changes to this row.
First, we’re going to delete the site title block, then replace it with the social icons block. To do this, simply click on the site title block in the list view, then expand the ellipsis menu.
Finally, click Remove Site Title to delete the block from the header.
The first block we’re going to add is the social icons block. Click the plus icon next to the Page List block, then start typing social icons. Simply click to add it.
To add an icon, click the plus icon to reveal the modal box. Type Facebook to bring up the Facebook icon. Simply click to add it. Next add the Instagram, YouTube., and TikTok icons repeating the previously mentioned steps.
Next, we’ll style our icons. There are a number of options with the social media block including which layout style you’d like – either default, which is a logo enclosed in a circle, logos only, or pill shape. Next is layout justification and orientation, which controls whether your blocks will be displayed horizontally or vertically, and how you’d like them to be justified. Then there are link settings. Here you can choose to open the links in a new tab, and choose whether to show the labels.
Depending on which layout style you choose, you’ll have different color choices. For example, when selecting logo only, you’ll only be able to add color to the logo itself. If you choose default or pill shape, you can choose both icon color and background color. The available colors are pre-selected in the Twenty Twenty-Three theme. Should you choose to add more, you’ll need to add them to your theme’s theme.json file.
The final settings group is Dimension, which enables you to control how much spacing to set between each social icon.
In this tutorial, we’re going to choose the logo-only style, set the justification to space between items, and choose the horizontal orientation. This will evenly space our icons, display them horizontally, and show only the icon itself without a background. Under link settings, set it to open links in a new tab. For color, choose white. Finally, add 15px block spacing under the dimension settings.
Next, we’re going to add a background color to the row. In the list view, select the row block. In additional settings, locate background under color. Click inside the base box and add #8D4CE6 as the color.
Our header requires a new row to be added. We’re going to be adding a site logo block, as well as a call to action button, so we need a place for these to live. It’s good to remember that when creating custom headers, adding rows is a good way to keep your blocks organized.
To add a new row, click on the block inserter icon.
Next, type row into the search bar or /row directly into the page editor to insert a new row.
For the next step, we are going to move our navigation block to our newly created row. Ultimately, we’ll have social icons and a call to action button in the top row, then a site logo block and navigation block on our second row. To move the navigation block, click on it in the page editor. Click the drag icon in the toolbar settings for the navigation block and drag it to our newly created row.
The next step in creating our header is to add the button block to the first row. Click the block inserter, then search for the button block in the search bar. Drag the button block to the first row. We’re going to style our button as follows. Type in BOOK NOW! for the text, then add #8D4CE6 for the text color, assign #ffffff for the button background color, and give the button a border radius of 100px. Leave the button text size set to small. Your button should now look like the screenshot below.
The last block we’re going to add is the site logo block. Using the block inserter, search for and select the site logo block. Drag it to the second row of the header.
To add a new logo, click the upload button within the site logo block. You can either choose an image already in your media library or upload a new one.
For the logo settings, ensure that link image to home is enabled, and choose the width for your logo. Optional settings include whether to open the link in a new tab or use the logo as the site icon. Additionally, you can set the margin and padding for the logo under the dimensions settings.
You may also want to consider using the best logo size for your site.
Before our header can be completed, there are a few settings we need to check. First, ensure that the 2nd row is set to full width to match our first row. Secondly, make sure that the justification is set to space between items. Lastly, set the row alignment to align middle.
That’s it! As you can see, accessing and customizing your website’s header can be accomplished in a few short steps using the WordPress site editor. Adding, editing, moving, and resizing blocks is simple, and allows you to be creative to create a custom header for your site.
Another great feature of the WordPress site editor is the ability to create different headers for different templates. Additionally, WordPress offers some pretty unique pre-made headers in the form of block patterns, that make it quick and easy to change the look of your website’s header. Let’s look at how easy it is to create a different header for your site. We’ll use the single template to illustrate how to create a different header that will be applied to posts on the website.
First, navigate to Templates in the site editor. Next, select the Single template.
When you open the single template, you’ll see that the header we created in the last section is currently applied. It’s important to note that you should not edit the header on this template or any other template because changes you make to the header will be applied across the site. Instead, we’ll delete the header we created from this template, then create a new one that will only apply to the template we’re working with.
To delete the header, click the list view icon. Next, select the header, then click the ellipsis menu to open the settings. Finally, click remove header.
Next, we’re going to add a new header to the single post template. Click the block inserter to add a new block. Next, search for and select the header block to add it to the template.
When creating a new header, there are a couple of options. You can choose from a pre-made pattern, choose a header that you have already created, or create a new one.
To choose a WordPress block pattern, simply navigate to the patterns tab, then search for headers. All of the available header patterns for the Twenty Twenty-Three theme will be listed there. Alternatively, you can click the explore button to search for and add a header from the WordPress pattern library.
NOTE: Not all header patterns will include navigation/menu elements. You may need to search for navigation patterns to find what you are looking for.
If you want to create another header from scratch, rather than use a pattern, you can choose to start with a blank header. By choosing start blank, you’ll be prompted to name your template part. Name it “single post header”, then click create.
Once your header is in place, simply click on it in the page editor to start adding blocks. Alternatively, you can click the edit button to be taken to the template editor, where you can add any rows or blocks you’d like to create a completely new header.
Divi offers a similar way to add custom headers to your WordPress website, but it kicks things up a notch. Divi is the most advanced full site editing theme in the WordPress universe. With over 200 design elements, a fully responsive framework, and the ability to customize literally every aspect of your site without a single line of code, it is the ultimate web designing experience available.
Divi uses the Theme Builder to give you the ability to create custom headers, then apply them to different templates on your website. Headers can be created and applied to your pages, posts, archive pages, 404 pages, search results pages, projects, category pages, author pages, and much more.
For more info, check out these 11 header types you can create with Divi.
We’ve done our best to be as thorough as possible to give you the knowledge you need to build a custom WordPress header from scratch. That being said, we have put together some common questions regarding WordPress headers to give you a better understanding of how they work.
Well, it depends. If you create a custom header, then try to change any aspect of it in a different template, then yes, it will be affected wherever that header is in place across your site. That being said, you can create multiple headers on your website and edit them without worry. For example, if you create a header under template parts, that is considered your global header. However, you can create a different header and apply it to certain templates.
As previously mentioned, you can edit the single post template (or any other template), delete the header currently installed, and create a completely new one that is only applied to that template.
Template parts are sections of your website that are repeated throughout the site. Both headers and footers are considered template parts. Template parts can be global, meaning they apply to a certain section on every page and post on your site, or only apply to sections on certain pages. For example, you can have a header template part that is set globally to apply everywhere, yet another template part that you have assigned only to certain pages, such as the 404 page.
You can use any block in the WordPress library within a WordPress header. Although some blocks make more sense than others. You should definitely incorporate a navigation block, and site logo block, and consider using others such as social media icons, business contact information, and buttons. For more, see our tutorials on WordPress Blocks.
Global site styles will automatically be applied to every block within your header. That being said, you have the ability to override global block styles in your header by assigning different colors, text sizes, dimensions, and more to the blocks in your header.
Thanks to full site editing, it’s possible to make your website’s header look and function any way you’d like. You’re no longer stuck with a boring header where it’s impossible to make even the smallest of changes without a ton of coding. Using a full site editing theme such as Twenty Twenty-Three, or a more robust theme like Divi, gives you more options to style your header to match your branding, add important elements, and make a good first impression.
What tools do you use to customize your website’s header? Let us know by sounding off in the comments below.
The post How to Customize Your WordPress Header (in 2023) appeared first on Elegant Themes Blog.
Creating a WordPress website for your business or portfolio is an excellent way to start growing an audience for yourself. However, you may run into scenarios where you want to limit access to specific posts or pages. For example, you may be a filmmaker that wants to limit the viewership of a film on his website to prevent piracy or a photographer trying to safeguard assets. Regardless of your reason, configuring a password on a page allows you to restrict visitor access and permit only particular clients, colleagues, or partners. In this article, we’ll show you how easy it is to password-protect a page in WordPress and why you might need to.
As previously stated, password-protecting a page is a useful feature when you want to limit access to something on your WordPress site. In this way, only users that have been given access to the password can access the pages you lock.
There are a number of reasons why you would want to do this, which can span a page being under construction, gatekeeping users to get their email for marketing purposes or limiting access to photos, art, or other intellectual property for internal usage.
There are a number of security plugins that may have password protection built-in. And there are plugins designed specifically for enhancing password protection in WordPress. But if you’re looking for basic functionality, WordPress has a default feature for password protection. In the following section, we’ll delve into how to password-protect pages natively.
If you aren’t already aware, you can easily password protect a page or post using the built-in feature of the WordPress editor. To do this, start from your admin dashboard and create a new page or post by navigating to Page or Post -> Add New.
Once you are done editing your page, select the publish button and select Visibility.
From the Visibility panel, select Password protected, and create your password in the textbox below.
If you’re wondering if this still works within the Divi builder, good news! It does; the native password-protect functionality works the same in the WordPress editor and the Divi Builder.
If a user visits your password-protected page, they will be met with something that looks like the page below.
Here’s what it looks like using Divi:
It’s just that simple! But while this is the easiest method for password protection, it’s lacking when it comes to more advanced options. Features such as partial content restriction, password-protecting an entire website or unlocking different areas of a site with a single password aren’t possible natively, so this is where a password protect plugin can be helpful.
If you are looking for more password protection features, there are some plugins that should give you what you need. For this example, we’ll be using Password Protect WordPress (PPWP). It’s almost as easy to set up as native WordPress password protection but comes with more features as well.
To get started, let’s navigate to Plugins > Add New from your WordPress dashboard.
In the search box, type “PPWP” and install and activate the free plugin.
Now, when you navigate to your post or page editor, there will be a new section in your sidebar where you can set user roles and corresponding passwords via PPWP.
You can also use shortcodes to lock parts of your content on a page. To do this, navigate to Partial Protection under the Password Protect WordPress section.
From here, you can customize your shortcode and then simply embed your section into any page on your website.
With PPWP, you can even password-protect your entire website from public view. To do this, navigate to the Sitewide Protection option under the Password Protect WordPress section from your dashboard.
From here, simply toggle the Password Protect Entire site option, set your password, and save the changes.
And don’t worry, PPWP works with Divi, so you can password-protect your content regardless of what editor you’re using. If you’re interested in even more password protection features, you can get the pro version of PPWP.
The main difference between the two options is that the plugin has been designed specifically for password protection. Thus, it comes with more features available. Whether you want to password-protect a section of a page, your whole website, or a category of posts, the easiest way to do it is with a plugin.
Search engines aren’t able to index pages that are protected via passwords; this is where a partial section can be useful for SEO, as search engine bots can still crawl to your page, but the content that you want to protect remains hidden.
Natively, this isn’t possible without some coding know-how, but different users can access pages with multiple passwords using features like the PPWP plugin’s password-protection feature that utilizes user roles.
A good starting point with password protection is getting familiar with the default settings WordPress has to offer, but you can get as sophisticated as you want. If you want a simple on-off solution, you can use the built-in password protection functionality in the WordPress editor. But if you are looking for a simple solution with more features, a plugin like PPWP is the way to go. You can learn more about how to partially restrict content with a password. Or, if you are a Divi user, check out DiviPasswords to take your password protection to the next level.
If you are looking for better password security for WordPress in general, consider using a Password Policy plugin.
What do you password-protect on your website? Let us know in the comments!
Article thumbnail image by Natty_Blissful / shutterstock.com
The post How to Password Protect a Page in WordPress appeared first on Elegant Themes Blog.
Since the release of WordPress 5.8 in 2021, block patterns have become an increasingly popular way to create content in WordPress. They allow for developers and designers to utilize them in every aspect of their websites including headers, footers, posts, pages, and more. As an added bonus, users can save WordPress block patterns to make the design process faster and easier. In this post, we’ll discuss what block patterns are and how to use them. Let’s get started.
When building content in WordPress, you can insert a group of blocks into your posts or pages to display your content in a beautiful and functional way. These groups of blocks are called WordPress block patterns. WordPress offers a series of pre-made block patterns within the WordPress repository. Additionally, most WordPress themes will have a collection of them as well. Block patterns can be edited as easily as any block that you create. Patterns can contain several blocks, or even entire pages. And, with full site editing in WordPress, they can be used anywhere, and are even useful for creating headers, footers, page templates, queries, and more.
As previously stated, a block pattern is a group of blocks that can be inserted into a post, page, template part, or template. Block patterns can be inserted into multiple locations but changed individually. Block patterns can be saved as reusable blocks, but once that happens, it will change everywhere that reusable block is used. So basically, reusable blocks take on a global property, whereas block patterns are a collection of blocks that can be edited to have a different look, regardless of how many times they are used throughout a website.
There are a few places to find WordPress block patterns. The first way is within your WordPress theme itself. As previously mentioned, most themes contain block patterns that you can use for your website. For example, the Twenty Twenty-Two theme has a decent collection of patterns. You can choose from categories including columns, text, galleries, pages, and more.
Another way to find block patterns is within the WordPres block pattern directory. There are currently more than 65 pages of patterns to use including headers, footers, wireframes, columns, buttons, and more.
Adding block patterns to your website is a simple process. If you want to search within your theme to add a pattern, simply click the blue + icon at the top left of your screen.
Next, tab over to Patterns. Select the pattern you wish to use, then click on it to automatically add it to your page.
Another way to add block patterns to your site is to copy and paste them from the pattern directory. Navigate to the pattern directory, locate the pattern of your choice, then hover over it to reveal the copy button.
Next, return to your page. Click inside the edit board and either right click and select paste, or use CTRL + V (in Windows) or CMD + V (Mac). Your block pattern will appear on the page. You can rearrange its location by clicking the list view, then dragging it to the desired location.
Using block patterns in WordPress is easy. As previously mentioned, they can be edited just as any other block. Now that you know how to access them and add them to your site, let’s go over editing them.
Typically, when you import a block pattern into your page, it will be grouped. Grouping blocks makes it easy to drag them around the page, as well as adjust settings such as width, color, typography size, padding, and block spacing – on the group itself.
To make changes to an individual block within the group, simply click to edit it. Editing individual blocks doesn’t require you to ungroup them, and are edited the same way normal blocks are. For example, let’s look at the image block within our pattern. You can add links, crop, add text, or replace the image, just as you would otherwise.
You can add as many block patterns as you’d like into your layout. Adding patterns is an easy way to create beautiful content in a snap. Additionally, removing blocks is just as simple. If you want to remove a pattern from the page, simply click into the parent element in the list view or by clicking the ellipsis menu in the page editor, then click Remove Group.
There are a few ways to create and save block patterns in WordPress. The way you do it depends on your level of expertise, and whether you want to share it with others. Let’s dive in to learn about creating, saving, and sharing block patterns.
This method requires you to have a WordPress account, but is the most simple way to create patterns to use in your website. Start out by heading to the WordPress pattern directory. Next, click create a new pattern.
Next, you’ll need to either login or create a new WordPress account. Once logged in, you’ll be redirected to the pattern editor. It works the same as the page editor in your own website. As an added bonus, you’ll have access to royalty-free images to use in your patterns. To get started, give your pattern a name, then start adding blocks by clicking the black + button.
Once you finish designing your block pattern, it’s time to save it for use on your website. There are two options for saving your pattern. Choosing save draft will allow you to save the pattern for your use only. You’ll be able to keep your pattern in the cloud, and access it any time to copy and paste into your website.
To access your patterns, navigate back to the pattern directory page and click the My patterns link. Both your drafts, as well as favorites, can be used in your WordPress sites.
WordPress allows its users to create and submit block patterns for all of its users to utilize in WordPress block themes. In fact, the pattern gallery is just that – user submitted patterns. To create a block pattern for submission, follow the steps in the previous section. However, this time, you’ll click the submit button. Your pattern will go through a review process before being added to the directory. Once live, your pattern will be visible in the WordPress pattern directory where it is accessible to anyone.
With the growing popularity of Gutenberg blocks, there are more options for saving block patterns in your websites than ever before. Up until recently, if you wanted to create a block pattern within WordPress, you had to code it yourself, which isn’t beginner-friendly. Thankfully, there are a few options for people who want to create them easily.
CoBlocks is created by GoDaddy. It gives you a collection of 40+ blocks to use in your website, plus the ability to create block patterns and register them. The process is simple and only takes a few steps. First, build your preferred layout. Next, select the blocks you wish to include in your pattern. Finally, select Add Design Pattern.
Name your pattern, give it an optional description, and assign a category. Finally, click Save Pattern.
To view your newly created pattern, navigate to the Patterns tab, select the assigned category, and scroll down to view it.
Another option is the Blockmeister – Block Pattern Builder plugin. The process is very similar as with CoBlocks. However, this plugin doesn’t give you any added blocks for your layouts. It merely gives you the capability to create block patterns. To get started, create your layout, then select all blocks to be included in it. Next, click the ellipsis menu in list view, then select Add to Block Patterns.
The next step is to name your pattern, then click Create Pattern. Once saved, refresh your page to find the pattern in your theme’s pattern directory.
To locate your pattern, use the dropdown category menu in patterns, then choose your site name.
Both block patterns and Divi layouts offer the same basic features. You can create, edit, customize, and save them. However, Divi has so much more in terms of customization options, that’s where similarities between the two end. You see, block customizations are theme-based, meaning that you only get as much as that theme offers in terms of colors, fonts, and effects. In order to get more options, users need to add plugins or code to obtain them. With Divi, you have a wealth of customization options at your disposal to help you create amazing layouts for your website.
Divi isn’t just a WordPress theme, it’s a complete website building platform with a lot of power under the hood. Divi utilizes a proprietary drag and drop Visual Builder that enables you to build beautiful layouts on the front end – in real time. There’s no need to preview your layout in a new tab to see what your page will look like in the browser.
There are unlimited design options with over 200 website elements. Within each element, there are amazing background options by using Divi’s dynamic magic color system. Additionally, you can make your layouts impress with transition, hover, and animation effects. Not only that, you can adjust spacing, sizing, add filters and box shadows, and so much more.
When you want to reuse a layout, Divi makes it easy. You can save modules, rows, sections, or even full pages using Divi. Additionally, layouts can be saved as global so that when you need to make a change on a layout that’s being used throughout your site, it only has to be changed once. As an added bonus, you can save your layouts to Divi Cloud, which enables you to use them on any Divi website, anywhere.
With everything we’ve thrown at you in the post, you might have a few questions about block patterns. The good news is that we have answers. Read on.
In a way, yes. Both block patterns and reusable blocks can be created, saved, and edited. However, reusable blocks are more like global blocks. For example, if you create a reusable block as a newsletter optin to use throughout your website, making changes to one instance will result in that change being made wherever that block is displayed. If you were to use a block pattern instead, you could change the background color, button color, or make other design edits without it affecting every instance.
As previously mentioned, you can get them in the WordPress pattern directory, within your WordPress theme, or with a plugin such as Gutenberg Template and Pattern Library by Extendify.
In short, it’s a great way to save time. The biggest time hog with WordPress development is creating the content. With pattern blocks, you can save time and energy by creating patterns that you can use throughout your site’s pages and posts.
You can! However, you will need to be comfortable writing and editing code to create pattern blocks manually. WordPress.org has a good lesson that will help guide you in the process if you want to give it a go.
Block patterns provide an easy, time-saving way to add content to your website. Plus, you can find beautiful, professional designs on the WordPress pattern directory to help get your started. If you aren’t using pattern blocks in your website, we highly recommend doing so.
Are you using pattern blocks on your website? If so, tell us why you like using them in the comments section below.
The post How to Use WordPress Block Patterns: A Simple Guide appeared first on Elegant Themes Blog.
Full site editing (FSE) is the newest buzz in WordPress. Although there have been premium themes utilizing this up-and-coming technology for several years now, it’s finally made it’s way into the mainstream thanks to the adoption of Gutenberg back in 2018. In this post, we’ll give you the low down on what WordPress full site editing is, what it’s built on, and how to use it. Let’s get to it.
In years past, WordPress has had a very distinct structure. You would use the WordPress Editor to add content to posts and pages, then install plugins for extra functionality. WordPress core files were responsible for headers, footers, content areas, sidebars, and other elements. In recent years, WordPress full site editing has changed all of that. Based on blocks, full site editing makes it much more possible to edit every aspect of your WordPress site. You can create custom headers, footers, and build custom content just about anywhere. Full site editing also extends beyond the core of WordPress with page builders like Divi that take it to a whole new level of design capabilities.
One of the greatest benefits of full site editing is the ability to customize your site any way you want from top to bottom. For example, you can now create and edit post and page templates, headers, and footers all on the front end. Plus you can add global styles to your site and blocks and create your own color palettes, fonts, spacing, and more. It allows WordPress users to create custom sites easier than in the past because of minimal coding requirements. As previously mentioned, full site editing themes use blocks, so you can utilize them throughout all areas of your site to create a custom site tailered specifically to you.
Another benefit of full site editing in WordPress is the ease of use for your clients. If you’re a freelancer or web agency professional who wants to be able to hand off a website after completion, FSE themes are the way to go. There’s no need for them to dig down into the theme’s code to make design changes. You see, full site editing themes utilize a theme.json file which allows developers to add styles and functionalities easily. Creating a global color palette, assigning fonts, and other styles can be set globally, making it easy for end users to add and edit content.
Lastly, FSE’s are typically faster. They generally have less bloat, are optimally configured, and process requests much faster than traditional WordPress themes. That being said, hosting is a factor, so you should choose a reputable hosting provider that utilizes caching, is compatible with the latest version of PHP, and preferably provides cloud hosting options. For more, check out how to optimize page speed for SEO.
It’s important to note that not every theme supports full site editing. Built on Gutenberg blocks, which launched back in 2018, is the foundation for FSE. When first introduced, blocks were only supported in the content area of websites – such as posts and pages. With FSE themes, that functionality expands to literally every aspect of the theme. As previously mentioned, the theme.json file controls all of the site’s global settings and styles. In previuos generations, the theme customizer controlled site settings. Now the WordPress Site Editor controls all global styles and settings, plus give users the ability to add blocks throughout the theme.
That being said, there still aren’t a ton of options for full site editing themes out there. There are thousands of WordPress themes out there, with only a smidge over 160 FSE themes currently available. While full-site editing is growing in popularity, the technology is just now starting to take hold.
To put it plainly, a block theme is a WordPress theme that contains templates completely built on blocks. This not only includes posts and pages, but literally everything else. Sidebars, footers, headers, post templates, and every other aspect of the content on the theme.
In the past, WordPress websites consisted of a series of traditional PHP files. Now, block themes are all built on block templates. As previously mentioned, all block themes have a theme.json file that allows for developers and users to add additional functionalities, set global styles, and more.
Default themes such as Twenty Twenty-Two are considered block themes. Instead of using the old WordPress customizer to add your site’s taglines, choose colors, or select fonts, you use the WordPress Site Editor to control those things. Additionally, you use blocks to add content to templates to personalize it.
Before we start showing you how to use full site editing in WordPress, there are a couple of basics to understand in regards to WordPress blocks. There are two types of blocks in WordPress FSE – static blocks and dynamic Theme Blocks. Static blocks are made up of content that is known at the time you create and publish a post. Some examples of static blocks are paragraph, heading, image (although those can be dynamic too), quote, page breaks, buttons, and more.
On the other hand, the new FSE dynamic blocks (called Theme Blocks or Site Blocks) are designed to be used when building templates and can pull content from the backend of your site dynamically to display it on your site. These dynamic Theme Blocks can generate for blog post feeds (with a query loop block), post titles, post content, featured images, and many more. The post content block is a great example because any changes to the post content on the backend will automatically update each instance of that post content block throughout your site.
Now that you have a basic understanding of what full site editing is, let’s talk about how to use it. In this section, we’ll help you understand how to choose a block theme, how to customize templates contained within the theme, set global styles, use dynamic theme blocks, and introduce you to block patterns.
Currently, there are 150+ full site editing themes available in the WordPress repository. There are two ways to choose a FSE theme. You can choose a free one from the WordPress repository, or purchase one from a premium vendor. For this post, we’ll choose a FSE in the WordPress repository.
First, log in to your WordPress dashboard and click Appearance > Themes. Next, click the Add New button.
Next, click the Feature Filter link to set filtering options.
There are three options to sort by including subject, features, and layout. You can choose the subject of the theme if you desire, otherwise you only need to tick the Site Editor box. Once you make your selections, click Apply Filters.
Your screen will refresh and reveal the choices available to you. You can choose a theme to follow along with this tutorial, or simply choose the Twenty Twenty-Two theme, which is what we’ll be using for this post. Once you make your choice, activate your theme to get started.
With your new theme active, the next step is to start customizing. For this tutorial, we won’t go into editing theme.json. We’re going to stick to the basics of Twenty Twenty-Two to get you acclimated to how full site editing themes work. That being said, head over to Appearance > Editor.
Once the site editor loads, you’ll be defaulted to the home page template.
To edit other templates within your theme, simply click the WordPress logo in the upper left corner of the site editor, then click Templates. In Twenty Twenty-Two, there are a number of templates you can edit including single post, page, 404, blank, search arhive, and more. To select a different template to edit, click on it to activate the site editor for that page. Additionally, you can create a new template for your site by clicking the Add New button on the top right hand corner in the dashboard.
There are several options for new templates in Twenty Twenty-Two including front page, author, category, date, tag, and taxonomy pages. That being said, these options will differ depending on which theme you chose in the previous section.
The next area you can edit in a page template are template parts. In Twenty Twenty-Two, you can edit the header and footer template parts on each template. However, each template has different template parts that are editable. For example, the home page template offers a blog template part as well.
For this example, let’s edit the header template part. Here you can edit the existing blocks or add new ones to the template. To add more blocks, toggle the block inserter by clicking the blue + button in the top left corner of the editor.
This will reveal all of the blocks available to you. You can add a block in one of two ways. Either click and drag your chosen block into the template part, or click the + icon to add one.
Additionally, you can edit existing blocks within a template. Simply click on the block you wish to edit to bring up its options. For example, if you want to edit the site logo, click on it to add a new image.
Another great feature of a full site editing theme is the ability to set global styles. You can choose fonts, colors, color themes, and adjust spacing. You can opt to set styles across your entire site, or only on certain blocks. This is a huge timesaver compared to themes of the past.
To access the styles for your site, click the styles icon at the top right of the site editor.
Once activated, you can browse the available styles in the Twenty Twenty-Two theme by clicking the browse styles link to choose a color scheme for your site.
The next option, typography, allows you to choose the font options for your text and links. This includes font family, size, line height, and font weight (appearance).
Under colors, you can edit the colors used in your global color palette. You can assign colors to the background, text, and links. In Twenty Twenty-Two there are 17 solid colors and 20 gradients. Additionally, you can add custom colors and gradients to your site, which is great for branding purposes.
Lastly, you can adjust the padding to your layout. Padding can be set for top, left, right, and bottom as a whole, or set individually.
The block editor contains more than 90 blocks that can be utilized to build page templates in the site editor. Among those, there are some dynamic theme blocks that will populate dynamic content shown on the front end of your site. For example, when clicking into the single post template, you’ll see a few that are used including the post title, post featured image, and post content blocks. These are useful for building a dynamic template to display your blog posts dynamically.
When editing themes, you can utilize theme blocks to build headers, footers, and more. In all, there are 27 theme blocks. We won’t go through all of them here, but we’ll go over a few so that you get a good understanding of what you can do.
Let’s demonstrate how to use a few theme blocks to build a new header template part for your site. Start by navigating to the Templates menu. Next, click Blank template to start.
If you want to be able to see which blocks are utilized in your page, you can use the layers view. It’s accessbile by clicking the layers icon in the top left part of your site edtior screen.
Click the blue + icon to reveal the blocks, then scroll down to the theme block options. The first theme block we’ll select is the template part block. This is very useful for creating global sections for your site. We’re going to use a template part to create a custom header for your site that can be assigned to certain pages.
Drag the template part block into your site editor’s blank page. Select start blank to build a new template part.
Assign a name for your template part, then click create.
First, bring up the blocks and search for spacer, then add it to your pasteboard. Give it a height of 20px. This will add 20px of space at the very top of your template.
Next, find the columns block. Drag it into the pasteboard. Select the 33/33/33 column variation. This will put three columns in your row. The each column will occupy 33% of the available site space.
Your template part should now look like this:
Bring up the blocks menu by clicking the blue + icon. Scroll down to the theme blocks and drag the site logo block into the first column. Upload an image or assign one from your media gallery.
Next, drag the navigation block into the second column. For the navigation block, you can add pages from your website to the menu, or create custom links. Adding menus in full site editing themes is a bit different than in other themes. You no longer use Appearance > Menus to add them. Now, all menus are created and added in the site editor. Click start empty to create links for your site or select pages. To add them, hit the enter key on your keyboard.
Finally, add the social links block to your third column. Add the social media icons you wish to feature by clicking the + at the right site of the social icons block.
NOTE: You are not limited to adding Theme Blocks to your templates. You can use any WordPress Block. In this example, the social links block isn’t a dynamic theme block but is still a useful element to add to a header.
With your blocks all added, your header should now look like this.
Now that you have all of the blocks in your new header, you’ll notice that the spacing seems a bit off. No worries, as is with every aspect of full site editing, you can adjust that too. First, click on the first column in the layers view. In the settings panel under Column Settings > Width, click the dropdown to reveal the different sizing options. Choose %. Type in 20 for the width of the first column.
Repeat the steps to adjust the second column to 60%, then the third column to 20%. You header should now have better spacing. Save your template by clicking the Publish button in the top right hand corner.
Your template should now look like this.
When building templates, there is an easy way to drop in a series of blocks to make the design process easier. These groups of blocks are called block patterns. WordPress comes standard with a few block patterns you can use, or you can build your own to reuse them throughout your site. To access block patterns, click the blue + icon at the top left in the site editor, then click the patterns tab. There are several categories of block patterns to choose from including footers, headers, buttons, galleries, columns, and more.
Each block pattern can be edited to suit your design choices. Color, font, and padding styles can be adjusted within individual blocks in the pattern. If you want to save a block pattern you’ve created, simply click the ellipsis menu in the list view, then click Add to Reusable Blocks. Alternatively, you can also save it as a Template Part.
If you are looking for a versatile, feature-packed full site editing theme for WordPress, look no further than Divi. Take full site editing to a completely different level by utilizing the most advanced Visual Builder in the world. Users can apply hover effects, add shape dividers, apply animations, edit elements in bulk, and apply global styles and color palettes, to name a few features. Plus, Divi has over 200 elements in its arsenal to help you create a stunning, highly functional website. With elements such as blogs, sliders, call to actions, pricing, testimonials, and more, users can create a truly unique website.
In addition to the unlimited design capabilities of Divi, users can also expand customizations to their entire website. You can design headers, footers, product templates, category and archive pages, 404 templates, post templates and more. Plus, you can do all of this with Divi’s proprietary Visual Builder, which allows you to see design changes in real time. There’s no limit to the number of templates you can create. Additionally, Theme Builder templates can be assigned as global elements, or to individual pages if desired.
Divi also has the built-in capability to create dynamic content for your website. Using the Template Builder and/or Visual Builder, users can assign dynamic content to posts, pages, products, and templates. You can use dynamic content in all Divi elements, which allows you to build dynamic modules to display information pulled directly from your database.
Dynamic modules are great for use in all types of websites. They can be used to build modules for travel websites, recipes, rental services, and more. Using Divi’s Visual Builder, you can assign dynamic content based on the type of template you wish to build. For example, when building post or category templates, the dynamic content available for a text module has options that differ from those of an image module. For modules with text, you can choose things like post/archive title, post excerpt, publish date, comment count, tags, category description, and more. On the other hand, image modules are used to set dynamic content such as featured image, author profile picture, and site logo image.
Ecommerce website owners get an added bonus with Divi. When WooCommerce is installed, Divi adds a series of dynamic WooCommerce modules that offer the ability to add dynamic content when building product, cart, and checkout page templates. It’s no longer necessary to utilize CSS when using WooCommerce in order to make your site’s product and cart pages match your branding. Plus, WooCommerce modules can be used anywhere within Divi to highlight products, create product galleries, and much more.
After all of the information that we’ve handed you, we’re sure you have some questions. Not to worry, we have answers for you.
Thankfully, full site editing themes are built on blocks. So, if you are swapping from another theme based on blocks, you should only have to do a few things to get your site looking good. The first thing is to set a site logo and navigation by creating a header template part. Chances are, your old theme used the Customizer. With FSE themes, the site editor is used to create your site’s header.
There are two ways to find a full site editing theme. The first way is to conduct a filtered search in the WordPress theme section of your admin dashboard. There are more than 160 themes to choose from. The second way is to purchase a premium full site editing theme such as Divi.
Since a FSE theme is built entirely on blocks, it doesn’t utilize widgets the same as in the past. However, there are widget blocks that are available. You’ll probably need to replace old widgets with new widget blocks or add new block patterns to help speed up the process.
Full site editing is compatible with versions of WordPress since the release of 5.8 and more Theme blocks have been added in recent versions. If your install doesn’t have 5.8, you’ll need to upgrade it in order to use a FSE theme. The good news is that you need to upgrade anyway, as using outdated versions of WordPress leaves your site vulnerable to security hacks and all sorts of other nasty issues.
Yes! It’s easy for nearly everyone to learn how to build a website using Full site editing. Because FSE themes utilize drag-and-drop visual editing, it’s easy to build beautiful layouts with ease.
Yes, it can, but there’s more to it than that. First, full site editing themes can give you a performance boost because they are built in a way that requires fewer plugins for added functionality. So, you shouldn’t need to install many to get the site where you want it. That being said, FSE themes aren’t automatically designed to be faster out of the box. There are other considerations such as hosting providers. A good hosting provider such as SiteGround, will run the latest version of PHP, and provide a CDN and other speed enhancements that will make websites run faster.
Full Site Editing is gaining ground in the WordPress community. With the ability to edit every aspect of websites, developers and creatives are beginning to see the value in it. Premium themes such as Divi have been using this technology since 2021, and have stayed ahead of the curve. That being said, with the release of WordPress Twenty Twenty-Two theme at the beginning of this year, we can expect full site editing themes to become the norm shortly. Knowing how to utilize full site editing in WordPress development is an essential step to keep you set up for the future.
Do you use full site editing in WordPress? Give us your thoughts on it below.
The post WordPress Full Site Editing: A Beginner’s Guide appeared first on Elegant Themes Blog.