Making an Underwater CSS Text Effect

Category Image 076

Web design can serve as a playful exploration ground for learning new techniques. In today’s guide, we’ll dive into the creation of an underwater CSS text effect, not just for the visual outcome, but to deepen our understanding of how different CSS properties harmonize to create dynamic text effects.

Your Web Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
Starting at only $16.50/month!


Setting up the Structure

Our journey into the deep sea starts with a simple HTML structure: a div element with the class underwater, wrapping around an h1 tag.

<div class=”underwater”>
<h1>1stWebDesigner</h1>
</div>

Achieving the Underwater Effect

For our underwater CSS text effect, we introduce a range of CSS properties such as background-image, animation, and -webkit-background-clip.

@import url(‘https://fonts.googleapis.com/css2?family=Maven+Pro:wght@700&amp;display=swap’);

body{
/* Using a dark background color for optimal contrast */
background-color: #000;
font-family: ‘Maven Pro’, sans-serif;
}

.underwater h1{
/* Font settings: sizing and a semi-transparent color */
font-size: 2.5rem;
color: #2c3e5010;

/* Assigning an underwater image as the background */
background-image: url(‘https://w7.pngwing.com/pngs/183/509/png-transparent-under-water-scenery-sunlight-underwater-ray-star-ocean-atmosphere-cloud-computer-wallpaper.png’);

/* Clipping the background image to the outline of the text */
-webkit-background-clip:text;

/* Setting a 10s infinite animation for a dynamic effect */
animation: waterEffect 10s infinite;
}

/* Animation to simulate flowing water */
@keyframes waterEffect {
0% { background-position: left 0 top 0; }
100% { background-position: left 100% top 0; }
}

Explaining Key CSS Properties and Values

Breaking down our CSS code, the first point of interest is the background-image property. By setting an underwater image as the background, we immediately set the tone for our effect.

The -webkit-background-clip:text property clips the background image to the shape of the text. It allows the underwater image to fill the text, setting the stage for our effect.

The color property plays a vital role as well. We’re using a semi-transparent color (color: #2c3e5010;), where the last two digits 10 represent the alpha channel in hexadecimal format, controlling the transparency. This enables the background image to shine through, enhancing the underwater illusion.

The animation property sets our waterEffect animation into motion. Defined by the @keyframes rule, it continuously shifts the background-position from left 0 top 0 to left 100% top 0, creating the illusion of water flowing over the text.

The Result

See the Pen
Underwater Text Effect by 1stWebDesigner (@firstwebdesigner)
on CodePen.

Exploring Other Methods

Different methods can achieve similar effects. An alternate approach involves utilizing the clip-path property with CSS animations, yielding a wavy text appearance akin to an underwater CSS text effect. This method manipulates the clip region of an element over time, evoking a dynamic sense of movement reminiscent of water’s rhythmic flow. In addition, the technique doesn’t necessitate a background image, instead, it transforms the appearance of the text directly. By turning to this method, you’re exposed to yet another aspect of CSS and its potential for dynamic text effects.

How to Limit Post Revisions in WordPress

Category Image 036

Optimizing your WordPress workflow often involves tweaking a few settings and functions. One of these features is post revisions. This built-in functionality can be a lifesaver, especially when you want to revert changes or restore an earlier version of a post. However, having an excessive number of revisions can be overwhelming and may clutter your database.

We’ll guide you through the steps to limit post revisions in WordPress, without turning to specific plugins.

Kinsta

Understanding WordPress Post Revisions

Post revisions, a core feature of WordPress, allows you to undo changes and revert to previous versions of your posts or pages. For every draft in progress, WordPress automatically generates a temporary revision (known as an auto-save) every 60 seconds. It supersedes older versions with these new auto-saves.

Alongside auto-saves, WordPress creates permanent revisions each time a user hits save, update, or publish. These permanent revisions are stored in the WordPress database and can be managed from the post-edit screen.

Why Would You Limit Post Revisions?

Limiting post revisions does not necessarily mean you’re capping your site’s performance. WordPress intelligently excludes post revisions from the database calls on the front end, only including them on the post-edit screen or while browsing revisions.

However, having a large number of post revisions can cause your WordPress database to become bulky, and although it won’t affect your site’s performance, it may make you feel a bit disorganized. Keeping your database clean and neat is good practice and can make your backend operations smoother.

The Manual Approach

Now, let’s jump into how you can limit post revisions manually in WordPress without the use of plugins.

Restricting the Number of WordPress Post Revisions

WordPress enables you to control the number of revisions retained for an article. To set a limit, you’ll need to add a specific line of code to your WordPress site’s wp-config.php file.

define( 'WP_POST_REVISIONS', 7 );

In the above code snippet, replace “7” with the desired number of revisions you wish to store for each post. Remember to save and close the file after making your adjustments.

How to Completely Turn Off WordPress Post Revisions

If your objective is to entirely disable post revisions, WordPress allows for this as well. By incorporating the following line of code into your wp-config.php file, you can turn off the post revision functionality:

define('WP_POST_REVISIONS', false );

Specifically, this command will deactivate the post revisions feature on your website. However, it’s crucial to understand that WordPress will continue to preserve one auto-save and one browser-stored revision despite this change.

Wrapping Up

Fine-tuning how post revisions are handled in WordPress can lead to a tidier database and a more streamlined content production process. It’s worth noting that manipulating core files requires a basic level of comfort with code or additional guidance. For related WordPress management topics, feel free to check out our guide on managing widgets in your WordPress dashboard.

Twelve Pitfalls To Avoid in Data Integration

Featured Imgs 23

Data integration can be a tricky business, like navigating a maze filled with dead-ends, detours, and pitfalls. But fear not! With the right map and tools, you can reach the end of the maze successfully. To help you get there, we've outlined the top 12 common pitfalls to watch out for in your data integration journey. So buckle up, and let's embark on this exciting and fun adventure together!

Are Data Format Mismatches Messing With Your Integration Goals?

Picture this: you've finally reached the heart of the data integration maze and are ready to integrate your data sources. You expect a seamless data flow, but instead, you're met with a roadblock - data in different formats. It's like discovering that your GPS uses metric while the map you have is in imperial. It just doesn't match!

This is a common issue when integrating data from different sources. For example, one data source might use the MM/DD/YYYY date format, while another uses DD/MM/YYYY. If these mismatches are not addressed, they can cause errors and prevent you from reaching the end goal of seamless data integration.

To avoid this pitfall, you must get your data in the same format before integrating it. Think of it as a translator, converting data from one language to another, making sure that everyone can understand each other.

What’s New in HMS Core Scan Kit 6.11.0

Featured Imgs 23

The latest version (6.11.0) of HMS Core Scan Kit is now available, and this article aims to share some of its exciting new features with you:

  • The kit adds the decode API that is available to both camera-based and image-based barcode scanning scenarios.

This API supports image data in NV21 format (which is output by your custom camera API) and multi-barcode recognition. Compared with decodeWithBitmap, an API released in an earlier version that supports only the bitmap format, the decode API saves time converting the image format and delivers a faster barcode scanning process in the camera-based mode.

Russian Girls Vs American Girls: Exploring Cultural Variations

Featured Imgs 23
Content Romance Travel To Laxa, sweden Loveforheart ~ Take Motion And Find Your Soulmate! Your search may take a few months, so calculate mail order bride pricingon courting platforms within 6 months on common. As for the language barrier, it’s going to hardly be a problem. As we’ve mentioned before, plenty of Japanese women for […]

How to Optimize UX Design for Screen Readers

Category Image 036

Achieving digital accessibility and optimizing your platform for screen readers, can be a strategic decision with multifaceted benefits. Not only does it reflect empathy and inclusivity for visually impaired users, but it also potentially expands your audience and the reach of your message.

Let’s delve into the importance of UX design for screen readers, practical adaptation strategies, and the continuing commitment toward digital accessibility.

The UX Designer Toolbox

Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design Assets Starting at only $16.50 per month!

Screen Readers: Essential Instruments for Digital Accessibility

Screen readers act as interpreters between the digital content and the visually impaired users, transforming visual data into speech or Braille output. A well-crafted UX design for these tools acknowledges the linear and sequential content interpretation that screen readers follow. To put it simply, a screen reader reads the content line by line, from top to bottom, requiring designers to create logical and understandable content flow.

Practical Suggestions for Adapting UX Design for Screen Readers

Modifying your UX design for screen readers is an iterative process that requires planning, attention to detail, and ongoing enhancements. Let’s explore some actionable suggestions.

Consistent Layouts

The fundamental principles of accessibility are predictability and consistency. Applying these principles to your web page design, with uniform layouts, allows users to intuitively anticipate the positioning of elements. Consistent placement of menus and sidebars across various pages, for example, fosters efficient navigation, especially for those relying on screen readers.

Descriptive Labels

Pay attention to the labeling of interactive elements. A button labeled as “Download Tutorial” gives users a clear direction, as opposed to a vague “Click Here.” Descriptive labels significantly improve navigability, making your site more user-friendly for visually impaired users.

Comprehensive Image Alt Text

Make your visual content accessible to screen readers with comprehensive alt text. Alt text serves as a narrative for images, assisting screen readers in conveying the purpose and context. Alt text like “Pie chart showing website traffic sources” is a valuable nugget of information for users reliant on screen readers.

Accessible Forms

Think about how your form controls can be understood by screen readers. Accurate labeling of each form field, such as indicating “Enter your name” in a name field, can improve interaction for users relying on screen readers.

Logical Content Structure

Well-structured, logically ordered content is crucial when designing for screen readers. As these tools interpret content from top to bottom, it’s essential to place significant messages and calls to action strategically for maximum impact.

An insightful study by the Nielsen Norman Group illustrates the hurdles that screen reader users encounter, especially on mobile devices. The study emphasizes that although third-party solutions can be part of the answer, solely relying on them may fall short. While they might tick the boxes for standard accessibility requirements, these tools don’t necessarily account for the specific needs of your users.

Thus, integrating accessibility improvements within your design process provides a more inclusive and tailored user experience. The goal is to create a balanced approach, incorporating third-party tools as a starting point while continuously refining your design based on user feedback and evolving accessibility standards.

Final Thoughts

Optimizing your UX design for screen readers isn’t a task you complete and forget. It’s an ongoing process, driven by user feedback and the changing landscape of accessibility standards.

Taking on this task presents the potential to cater to a wider audience, delivering both ethical and commercial benefits. The strategy of improving website accessibility can also foster business value, extending your reach to a more diverse user base.

Ensuring digital accessibility is a commitment to understanding and learning from the experiences of all users. It’s not just about compliance but about providing a seamless user experience irrespective of abilities.

WordPress Dashboard: Removing Unwanted Widgets

Featured Imgs 21

Your website’s command center, the WordPress dashboard, arrives with several widgets that enhance functionality. However, not all of these may be beneficial for every user. As plugins introduce more widgets over time, your dashboard may start to feel crowded and less straightforward to navigate. WordPress offers the ability to remove these unnecessary widgets, either manually or programmatically. We’ll guide you through both of these methods, aiding in decluttering your dashboard and promoting better website management.

Kinsta

Understanding Widgets

Widgets are elements you can include in your WordPress site’s sidebars or other widget-ready areas. WordPress includes default widgets, and plugins may introduce more. All these widgets can be managed through the Appearance » Widgets screen in your WordPress dashboard. However, an excess of unused widgets can lead to a messy widget screen. To make your dashboard more navigable, consider disabling those you don’t need. For an in-depth look at managing widgets, you can explore the WordPress official documentation.

Manual Widget Removal from WordPress Dashboard

For the quick and temporary cleanup of your dashboard, WordPress allows you to hide widgets that you don’t frequently use. Follow these steps to hide widgets:

  1. Log into your WordPress Dashboard.
  2. Locate the “Screen Options” button at the top right corner of the screen and click on it.
  3. Uncheck the boxes beside the widgets you want to hide.

While this method doesn’t eliminate the widgets entirely, it does make them invisible from your view. Other users can still enable these widgets from the Screen Options panel.

Programmatic Widget Removal from WordPress Dashboard

For a more lasting cleanup, WordPress provides a way to get rid of dashboard widgets completely, preventing other users from turning them back on. This involves adding a code snippet to your theme’s functions.php file or to the site-specific plugin you’re using. Here’s the code snippet:

function clear_dashboard_widgets() {
global $wp_meta_boxes;

unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_drafts']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
}

add_action('wp_dashboard_setup', 'clear_dashboard_widgets' );
}

The function above targets and removes the widgets listed. If there are certain widgets you wish to retain, simply remove the corresponding line from the code.

To customize this further, you can add the following function to the functions.php file to restrict the dashboard widget removal to only non-admin users:

if (!current_user_can('manage_options')) {
add_action('wp_dashboard_setup', 'clear_dashboard_widgets' );
}

Concluding Remarks

Having a neat and organized dashboard is a significant step towards more efficient WordPress management. Discarding unnecessary widgets tailors your dashboard to your exact needs, fostering a more effective and enjoyable user experience.

Aside from decluttering your dashboard, there are other optimization steps you can take to bolster your website’s performance and security. For instance, hiding your WordPress version can contribute to creating a more secure WordPress environment.

We hope these tweaks will help you maintain a clean and efficient dashboard, helping you focus on what truly matters: creating outstanding content.

Ripple Button Effect Using Pure CSS

Featured Imgs 03

Google’s Material Design guidelines introduced the ripple effect, a subtle animation that indicates user action. The ripple effect rapidly gained popularity in web design as a sophisticated visual feedback form that refines user interaction, particularly on buttons. Today, we’ll show you how to create a ripple button effect using nothing but pure CSS.

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets


Building the Button

The basic structure of our button is quite simple. It’s a single line of HTML:

<button class="btn-ripple">CLICK ME</button>

This is a standard button element with a class btn-ripple attached to it, which will be our reference when we define the ripple effect in CSS.

Casting Ripples With CSS

/* Styling for the ripple button */
.btn-ripple {
  border: none; /* Removing the default button border */
  border-radius: 6px; /* Giving our button rounded corners */
  padding: 12px 16px; /* Providing some padding around the button text */
  font-size: 1.2em; /* Increasing the font size of the button text */
  cursor: pointer; /* Changing the cursor to a hand icon when hovering over the button */
  color: white; /* Making the button text color white */
  background-color: #fa6e83; /* Setting the initial button background color */
  outline: none; /* Removing the outline from the button */
  background-position: center; /* Setting the position of the background image to center */
  transition: background 1s; /* Adding a transition to the background color */
}

/* Defining the hover state */
.btn-ripple:hover {
  background: #f94b71 radial-gradient(circle, transparent 1%, #f94b71 1%)
    center/15000%; /* Creating a radial gradient background on hover */
}

/* Defining the active (clicked) state */
.btn-ripple:active {
  background-color: #f97c85; /* Changing the button color when active */
  background-size: 100%; /* Increasing the size of the background image */
  transition: background 0s; /* Removing the transition from the background color */
}

Let’s break down the CSS setup:

  • The .btn-ripple class sets up the basic appearance of the button. The background-color is initially set to #FA6E83, a light color, and the background-position is centered to ensure our ripple effect starts from the middle of the button.
  • When you hover over the button, the :hover pseudo-class is activated. It changes the background to a radial gradient that’s centered where the pointer is located, simulating the ripple effect. The gradient starts as transparent (transparent 1%) and transitions to the button color (#F94B71 1%), creating a soft ripple effect.
  • Upon clicking the button, the :active pseudo-class takes effect. It changes the background-color to a darker shade (#F97C85) and expands the background-size to 100%, reinforcing the ripple effect. The transition for the background is also set to 0s, making the effect appear instantaneously when the button is clicked.

The Result

See the Pen Pure CSS Ripple Button Effect by 1stWebDesigner (@firstwebdesigner) on CodePen.

Final Thoughts

We demonstrated a classic example of how simple CSS can be used to create appealing interactivity in a user interface. But as you strive to refine your UI, it’s critical to remember that each interface element might require different tweaks.

Consider the context in which your buttons are used. A button for submitting form data might benefit from a more subdued ripple effect, while a call-to-action button could be more prominent with a stronger one.

For more intricate animations or synchronizing with other UI events, JavaScript could be leveraged for more granular control. CSS provides a solid base for styling and basic animations, but JavaScript opens up more advanced possibilities.

And of course, customization is key. While we used specific colors for our ripple button here, feel free to experiment with colors, shapes, and transitions that align with your brand and design aesthetic.

Own ChatGPT Bot in Telegram

Category Image 062

Recently, mirror sites providing access to ChatGPT have started to appear. However, using them is unsafe because such sites can collect and analyze all your correspondence. Especially those sites that provide such access completely free of charge. There is a demand for such sites because some countries block access to ChatGPT, and OpenAI blocks access to some countries. And for some users, 20 dollars for a ChatGPT subscription is expensive. 

So today, we will write our own chatbot based on ChatGPT in the Telegram messenger. 

How To Use Terraform to Provision and Configure Distributed YugabyteDB Clusters

Featured Imgs 23

Terraform is a popular Infrastructure as Code tool that simplifies the process of creating, managing, and updating infrastructure components. In this blog post, I’ll explore how to use Terraform to effectively provision and configure distributed YugabyteDB Managed clusters.

I will guide you through the process of configuring the YugabyteDB Managed Terraform provider, defining variables, initializing the Terraform project, and adjusting configurations as needed. Let's dive in!

Why the sharp decline in Google indexing?

Featured Imgs 11

Hi there,
I do SEO for my website, and I found the indexed pages declined too much from around 4,000 to no more than 2,000. I had searched for many reasons online, but many of them are superficial. Could you tell me the steps to find out the reason and solve them?
Best regards,
Thanks

How to Animate Gradient Text Using CSS

Category Image 036

Web design takes a captivating turn when CSS comes into play. It enables a world of transformations, such as taking static text elements and infusing them with life. Our focus today is one such engaging transformation – animate gradient text using CSS.

So, let’s demonstrate how a seemingly complex effect can be achieved with a few lines of code.

UNLIMITED DOWNLOADS: 400,000+ Fonts & Design Assets

Starting at only $16.50 per month!

Setting Up the Text in the HTML

We begin by defining our text element in HTML, which in this case is a simple heading:

<h1 class="animated-gradient">1stWebDesigner</h1>

Here, we create an <h1> element with a class called “animated-gradient”. This class becomes our anchor for creating the gradient animation in CSS.

Unfolding the Gradient Animation

The core part lies within our CSS. Let’s define the gradient and set it in motion with the following code:

/* Google Fonts for Open Sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&amp;display=swap');

/* Define animation */
@keyframes gradient-shift {
  0% {background-position: 0%}
  100% {background-position: 100%}
}

/* Styling our animated gradient text */
.animated-gradient {
  font-family: 'Open Sans', sans-serif;
  font-size: 2em;
  background: linear-gradient(270deg, #ff4b59, #ff9057, #ffc764, #50e3c2, #4a90e2, #b8e986, #ff4b59);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 3s ease-in-out infinite;
}

Our CSS setup does the following:

  • @import url: This directive fetches the Open Sans font from Google Fonts, noted for its modern and clean aesthetics.
  • @keyframes: Here, we define an animation named gradient-shift. This animation creates the illusion of motion in the gradient by shifting the background’s position from 0% to 100%.
  • font-family and font-size: These properties set our text’s font to Open Sans and its size to 2em.
  • background: This property generates a linear gradient using a striking array of colors. The gradient direction is set to 270 degrees, providing a left-to-right color flow.
  • background-size: This property, set to 200%, enlarges the background, contributing to the illusion of movement.
  • -webkit-background-clip and -webkit-text-fill-color: These properties render the text transparent, allowing the animated gradient to shine through.
  • animation: Lastly, we deploy our gradient-shift animation. It uses an ease-in-out timing function for smooth transitions and loops indefinitely, creating an ever-changing cascade of colors.

The Result

And there we have it! Check out the vibrant, animated gradient text:

See the Pen Animated Gradient Text by 1stWebDesigner (@firstwebdesigner) on CodePen.

Final Thoughts

The process of creating the animated gradient text effect is surprisingly straightforward, but the creative opportunities it unveils are far-reaching. With this foundational knowledge, you can experiment with different color schemes and gradient directions, apply the animation to various elements like buttons or headers, and even incorporate subtle animated accents into your design.

Remember, the real beauty of CSS is in its flexibility and power – it provides a vast canvas for creativity. You could also explore further with CSS keyframes to manipulate other properties and add more dynamic animations to your design. Feel free to dive deeper into the world of CSS animations with our guide on CSS keyframes.

Frequency for Performing Database Integrity Checks in SQL Server

Featured Imgs 23

In this article, we will learn some recommendations for checking the database's integrity in an SQL Server. We will see how often we should perform an integrity check and how to automate this process.

What Is Database Integrity?

SQL Server can have problems with the tables, indexes, catalogs, etc. When we check integrity, we verify that there are no consistency errors in the database.

22 Common WordPress Errors and How to Fix Them

Category Image 091
Common WordPress errorsWordPress is a powerful and secure platform, but that doesn’t mean your experience using it will always be smooth. On occasion, you might encounter common WordPress errors while working on your website. Although some of these are harmless, others can have significant consequences, and therefore require immediate attention.

Electronic Data Bedroom Features

Featured Imgs 23
There are a variety of virtual info room features that allow users to work quickly and proficiently. These features include file templates and drag-and-drop upload competencies. These features help to reduces costs of the process of populating a VDR with paperwork and simplifying complex file structures. Additionally, they make that easier to discuss content documents …

Electronic Data Bedroom Features Read More »

How to Select and Use Nested Blocks in WordPress

Typography Definitions Cover

Do you want to learn how to select and use nested blocks in WordPress?

The WordPress Gutenberg nested blocks feature allows you to add multiple blocks within a parent block. Then, you can customize different block elements at the same time, organize post content efficiently, and access more design flexibility.

In this article, we will show you how to easily select and use WordPress nested blocks.

Select and use nested blocks in WordPress

What Are WordPress Nested Blocks?

The WordPress Gutenberg nested block feature allows you to insert (or ‘nest’) one or more blocks within another block.

Nested blocks help you create more complex layouts on your WordPress website by adding multiple blocks inside each other. This allows for more flexibility when designing and formatting content for pages and posts.

For instance, you can nest multiple Image blocks within a Group block to display a set of photos from a particular event or a series of artworks created using a particular technique.

Preview of WordPress nested blocks

Moreover, the nested block feature allows you to edit individual blocks separately. This means that you can customize each block according to your needs without affecting the other blocks. In turn, this results in better content organization, makes your content more attractive, and streamlines your content creation process.

That being said, let’s see how you can easily select and use WordPress Gutenberg nested blocks.

How to Use WordPress Nested Blocks

You can easily nest multiple blocks together using the Group or Columns block in the Gutenberg block editor.

First, you need to open up an existing or new post in the block editor from the WordPress admin sidebar.

From here, simply click on the ‘+’ button in the top left corner of the screen and find the ‘Group’ block. Upon clicking it and adding it to the page, you will need to select a layout for the blocks that you will nest together.

For this tutorial, we will be selecting the ‘Group’ layout.

Select Group block from the block menu

Next, simply click on the ‘+’ button on the screen to start adding content within the parent block.

For the sake of this tutorial, we will be adding an Image block.

Add an image block within the Group block

Upon adding the Image block, just click the ‘Group’ button in the block toolbar at the top to select the parent block.

Next, you need to click the ‘+’ button to open up the block menu, from where you can choose other blocks to add.

Open the block menu to add another block within the Group block

How to Configure WordPress Nested Block Settings

Once you have nested multiple blocks, you can configure their individual settings by clicking on each block. This will open up the block settings in the right column on the screen.

From here, you can adjust the background color, text color, and size of the individual blocks without affecting the other blocks that are nested within it.

Configure the individual block settings

To configure the settings of all the nested blocks together, you will have to click the ‘Group’ button in the block toolbar at the top. This will open up the parent block settings in the right column.

You can now configure the justification, orientation, background color, text color, and typography of all the nested blocks.

Keep in mind that these settings will affect all the blocks nested within the parent block.

Configure the settings of the Group block

You can also convert an existing individual block into nested blocks by clicking the ‘Options’ button in the top toolbar of any block.

This will open up a menu prompt, where you need to select the ‘Create Reusable block’ option.

Choose the Create Reusable Block option

Once you have done that, a new reusable block will be created where you can add multiple blocks.

After you are done, don’t forget to click the ‘Publish’ or ‘Update’ button to save your changes.

Create nested blocks

In our example, we have nested a Title, Image, and Paragraph block within a Group block. This is how the nested blocks looked on our demo website.

Preview of WordPress nested blocks

Bonus: Use the Wayfinder Plugin to Easily Select Nested Blocks

Sometimes, it can be difficult to select an individual block and configure it when there are multiple blocks nested together.

Luckily, the Wayfinder plugin makes it super easy to select nested blocks from a parent block and even tells you the type and class of the blocks.

First, you will need to install and activate the Wayfinder plugin. For more instructions, you may want to see our guide on how to install a WordPress plugin.

Upon activation, head over to the Settings » Wayfinder page from the WordPress admin sidebar.

Once you are there, all the settings will already be activated. You simply need to uncheck the box next to the settings that you don’t want to use.

For example, if you want Wayfinder to display block types for all the blocks in the editor, then keep the box checked next to the ‘Display block type’ option.

Configure the Wayfinder plugin settings

However, if you don’t want the plugin to display block classes, simply uncheck the box next to that option.

After configuring the settings, don’t forget to click the ‘Save Changes’ button.

Next, you need to open up an existing or new post from the WordPress admin sidebar.

Once you are there, hovering your mouse over any block will show an outline with its name. You will also be able to see the outline and name of any nested blocks within the parent block.

GIF for the Wayfinder plugin

This will help you identify all the different blocks that are nested within a Group or Columns block.

From here, you can easily select an individual block from the parent block to configure its settings.

Use Wayfinder plugin to easily select a block

You can also select all the nested blocks at the same time by simply clicking on the ‘Columns’ or ‘Group’ heading. This will open up the parent block settings in the right column.

Once you have configured the block settings, simply click the ‘Update’ or ‘Publish’ button to save your changes.

Click the Group block outline to open its settings

We hope this article helped you learn how to select and use WordPress nested blocks. You may also want to see our tutorial on how to change block height and width in WordPress and our top picks for the must-have WordPress plugins to help grow your site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Select and Use Nested Blocks in WordPress first appeared on WPBeginner.