Add Container Link

In this How To we are going to provide a simple SEO friendly and accessible method to create container links. It will require GenerateBlocks Pro and a basic knowledge of Global Styles and Sectors.

The method will use a regular link, in our example a button block, placed inside a container. We will use a Global Style to build and position a CSS Pseudo element to extend our links clickable area to cover the Container.

This method;

• will create a Global Style you can apply to any container.
• gives you full control over the link, its href, content and any HTML attributes
• uses CSS pseudo elements to create the link which:
  • mitigates any risk of invalidating HTML

Lets begin with a simple example to illustrate how container links compare to regular link inside the container.

The first example has a regular button, the second examples has the a button with the “extended” clickable area.

The blocks and the basic concepts

The basic concept requires a Container Block with a Button block ( or other Link ) inside.

In our first example, the button behaves as expected — the clickable area is limited to the space within the border box.

For illustrations purposes only I have styled buttons clickable area with a red overlay:

To make the entire container clickable, we need to extend the button’s clickable area so it fills the parent container. Again we can use our red overlay to illustrate that.

So how do we extend this clickable area to cover the entire container ?

The solution is to use the ::before pseudo element.

The ::before Pseudo element

A ::before Pseudo-element can be created using CSS to attach virtual content to our link. This fake element will act as an extension to our links clickable area which can be styled and positioned independently.

Now we have the concept lets start with building our Container Link.

Building our Container with Link

Breaking down the process; we will:

1. construct the layout with the blocks
2. create a Global Style
   • set the Container position to relative
   • create the pseudo element
   • position the pseudo element
3. Use the global style to add container links.

1. Setting up the blocks

Our example design is very simple in that it uses only 2 blocks, a button inside a container. Lets begin by:

1. add a Container Block
2. add a Button block inside the Container
3. add a link to the button

In your editor list view the block layout will look something like this.

• Container
• Click Here

2. Create a Global Style

Next we are going to build a single global style that will:

• set the parent containers position to relative
• target the first a:link element inside the container
• create a pseudo element on our link
• absolute position our pseudo element over the container.

Lets get started.

1. Select the Container Block

   Container

2. Create a new global style

   2.1 Give it a name eg. has-container-link

   

   2.2 Start with a Blank Style

   

3. Set the has-container-link Styles:

   Position > Position to Relative

4. Add a New Selector to our Global Style class, to do that

   4.1 In the Selector More options panel click + NEW

   

   4.2 In the SELECTOR field copy and paste the following:

   a:first-of-type:before

   Make sure the Compound Selector options remains unchecked.

   

   4.3 Click Create

   

   The CSS selector will now look something like:

   .has-container-link a:first-of-type::before

5. Set the styles for the: .has-container-link a:first-of-type:before

   More > Content to: '' ( that is a two single quotes )

   Position > Position to Absolute

   Position > Inset Top, Right, Bottom & Left to 0

6. Save the page and the global style.

The selector explained

During this step we built a Selector within our global style.

Here is the example selector:

.has-container-link a:first-of-type:before

To help understand the selector, lets break this down into 3 main components and then read it from right to left:

1. :before – target the before pseudo element that it is attached to:
2. a:first-of-type – the first a ( link ) element to be found inside the:
3. .has-container-link – the container element with our global style

Put it all together and this reads as: target the :before pseudo of the first anchor link found inside the block with the has-container-link class

3. Use the Global Style to Add Container Links

Now to add Container Links anywhere we need them we simply have to apply our new has-container-link where it is required. To start a new one yo would:

1. Add a Container Block
2. Give the Block the Global Style of: has-container-link
3. Place inside the Container our Link , using a Button or Text Block

And that is it, the class will automatically target the first link it finds inside the Container Block.