Layout Builder is a complex functionality that, as soon as it’s installed, may not suit every website. However, it can be customized to work appropriately for almost any website. Such a procedure may seem complicated and costly. Fortunately, there are modules available to extend the standard functionality. In this text, we’ll look at one of them - the Bootstrap Layout Builder which aims to adapt the Layout Builder to the specifics of Bootstrap.

Bootstrap Layout Builder - general information

The Drupal Bootstrap Layout Builder module adds support for responsive grids and many UX improvements. It supports Bootstrap versions 3 and 4 and is ready for version 5. In addition, the module supports its adaptation to other frameworks. However, this requires time and a good understanding of the specifics of the framework in question.

The main functionalities of the module include:

• support for mobile devices,
• possibility to configure sections or the interface of the Layout Builder,
• possibility to set images or videos as the background of the section,
• and many advanced settings, allowing you to configure virtually everything the module offers.

Popularity of the module

The Bootstrap Layout Builder module is used by around 5500 websites. The vast majority of websites use version 2.0.x of this tool.

Source: Drupal.org

Authors of the module

The principal developer of the module is Mahmoud Zayed (mahmoud-zayed), with Aaron Christian (AaronChristian) also listed as the maintainer. In addition, the module is supported by two organisations: Dexalo, which develops and supports the module, and ImageX, which partially supported the development of the module in version 2.x.

Installation of the module

The module in version 2.x defines a dependency to another Drupal module, Bootstrap Styles. By selecting Composer, all necessary libraries and modules will be installed automatically. For this reason, we recommend installation with this tool, using the command:

$ composer require drupal/bootstrap_layout_builder

 

Permissions

The module provides one new permission - Configure Bootstrap Layout Builder. Granting this permission allows full access to the module's configuration form. Therefore, this permission should only be granted to trusted roles.

Configuration of the Bootstrap Layout Builder module

We’ve already installed the module and assigned permissions. The next step is to configure it. Under the path

/admin/config/bootstrap-layout-builder/breakpoints

we’ll find all the configuration options, divided into 4 sections: Breakpoints, Layouts, Styles, and Settings.

Configuration of Breakpoints

With the installation of the module, we receive 3 predefined breakpoints. To add a new breakpoint, we need to give it a name and specify a base class. Each existing breakpoint also has a flag, allowing it to be enabled or disabled.

The list of breakpoints is later used in Layout Builder layouts to change the appearance of sections at different browser widths.

Configuration of Layouts

In this tab, we’ll find a list of all the layouts defined by the Bootstrap Layout Builder module. Here, we can rename any of these layouts and define a list of their options. The layout option in this case is a string of numeric values specifying how many columns a section should occupy. For example, giving a value of 6 6 with twelve columns in the grid for the Bootstrap 2 Cols layout will make the first and second sections have the same width. If we use the value 9 3, the first section will occupy 75% of the width and the second section 25%. We can enable or disable each layout option for any breakpoint.

 

Configuration of Styles

This tab is responsible for enabling and disabling the ability to configure parameters that give additional styles for sections.

 

Configuration in the Bootstrap Layout Builder Settings tab

Here we can define a global class to be used in a layout containing only one section. In addition, we can enable or disable the display of advanced settings when creating and configuring layouts.

How to create a custom layout using the Bootstrap Layout Builder?

After configuring the Bootstrap Layout Builder, it’s time to create the layout. The steps and options look the same for every layout added by the module. We’ll illustrate everything with an example of one of the layouts available after installing the module - Bootstrap 3 Cols.

Configuration of the layout

When adding a new section, the first thing that can be defined is the container type. By default, we can choose from three - Boxed, Full, and Edge to Edge. Next, we can decide whether or not we want to use gutters for this section. The next step will be to choose what percentage a given column should occupy at a given breakpoint.

 

Configuration of styles

In this tab, we can choose the section background, text color and alignment, margins and padding, border, border-radius, or the type of on-scroll animation.

Selecting the colors of the section background and text.

Setting margins and paddings.

Adjusting border-related settings for a section.

A wide selection of scroll effects.

Configuration of the section settings

In the third and final tab, we’ll find options for changing the section title. Here we can also set classes and attributes for the container, rows, and columns. We should provide attributes in YAML format.

 

Bootstrap Layout Builder - summary

The Bootstrap Layout Builder module significantly extends the features of Layout Builder. The flexibility of this module is a considerable advantage. If your corporate website on Drupal uses Bootstrap or another framework that works similarly and you want to gain the freedom that Layout Builder provides, using the Bootstrap Layout Builder module will be a good step.

A group of Lullabots get together to swap scary stories from their professional pasts. Sometimes computers are hard and result in some scary situations.

We're pretty sure that ghosts and goblins weren't ever to blame, but we can't be too sure.

Happy Halloween!

The pandemic ended a lot of Drupal User Group events throughout the world. We at Factorial miss the regular check-in with the community as many others do as well which is why we will be reviving the User Group Hamburg with a recurring meetup, starting already next week.

 

One of the questions I get asked every other week is “Does next-drupal work with GraphQL?” . Yes. Both the Next.js Drupal module and the next-drupal package work with GraphQL 🥳 Let’s take a look at how we can use DrupalClient to fetch GraphQL data. Fetching GraphQL data with DrupalClient We built the DrupalClient on top of the standard Fetch API. This means you can use the DrupalClient.fetch method to make GraphQL requests. Here’s what a GraphQL query looks like:

Commerce Core 2.32 is a maintenance release providing PHP 8.1 compatibility fixes, a requirements bump to Drupal 9.3, and a handful of test fixes. A dozen folks contributed code and patch review to make it happen, with maintainer Jonathan Sacksick (jsacksick) landing a variety of quality of life improvements during the course of Centarro’s development sprint at DrupalCon Prague.

One notable addition is the definition of an entity label for draft orders, which includes shopping carts, alongside an update to the label for placed orders. Orders are “placed” via a customer completing the checkout process or a store manager placing it via the order management interface, at which time they are assigned order numbers. Placed orders now have a label of “Order ###”, where ### is that assigned order number. Draft orders will use “Draft ###” or “Cart ###”, where ### is the serial numeric order ID.

A higher education website is the gateway to a plethora of information for future and current students, alumni, faculty, staff, and the public at large. While some websites need to serve all these audiences, more often than not, it’s more useful to prioritize your audiences and create pathways to the most important content for each audience or audience segment.

Defining your website goals clearly is the first step.

Here are some tips you can follow when you're ready to start developing content for your college or university website

Prospective Students As A Primary Audience

While prospective students are not the sole audience to consider when strategizing content for your post-secondary website, they are the most important audience for many higher education websites. In fact, they are the primary domain of competition between post-secondary institutions, which is why an institution’s main website, often serves as a marketing hub for this audience.

But universities and colleges often have a mandate that reaches far beyond teaching students. They are engines of research innovation, employers, and often house repositories of information for the larger community. And the needs of these secondary audiences should be taken into account, but they are often served by other websites. Websites for individuals schools, faculties, and departments, online learning platforms, and intranets for faculty and staff, with a more targeted, internal audience. 

That’s why the primary marketing focus of any university or college is typically student recruitment and therefore, understanding the needs of prospective students is paramount to your content strategy. 

 

7 Content Ideas for Your Higher Education Website

Your higher education website plays a significant role in establishing your online brand and in recruiting prospective students. Here are content ideas to consider to appeal to this key audience

1. Student Testimonials

Student testimonials are a great way to show off the student experience. You can use these testimonials in a number of ways, such as on your website, social media, or in marketing materials. 

These can be featured prominently on your website, either on the homepage or on specific pages like your program pages. They also make for excellent social media content, showcasing to potential students what it's really like to be a student at your institution.

One technique for these testimonials is to embed them as videos, as a stand-in for talking to a current student, which we know from our user research is one of the top things potential students do to assess an institution.

2. Numbers & Key Statistics 

Provide information that helps prospective students make informed choices such as student satisfaction, job placement rates, fees and housing costs, and more. 

An example of our work with York University Website - Content geared to Future students

 

Include information about the courses offered and ensure that it’s consistent with the rest of the website, brochures, handbooks, and other admissions websites you might have. Review this content at a regular frequency to assure the accuracy of the information. For more information about keeping your content up-to-date, read our recent article about content governance strategies.

And always make sure to use reliable sources and cite them properly when sharing data and analytics.

3. Campus Life

Potential students want to learn what it would be like if they were to study at your school. They want to get a taste of campus life, activities, and culture. Your website is a place to invite students into the atmosphere on campus, get them excited, and give them a reason to choose your institution, or at least schedule an in-person visit. 

You can do this by showing pictures of the campus, students and events. These snapshots give potential applicants a better picture of what they can expect and whether your school is a good fit for their interests and lifestyle. 

4. Embedded Cost Calculator 

We’ve heard it directly from students in user interviews. Students want to know up-front the costs of attending your school. Creating a calculator that breaks down the cost of the user’s selected program based on their demographic information gives potential students an interactive way to start planning out their course of study. It’s great if you can include estimated costs for books and housing, as these costs will be new for students studying away from home at a higher education institution for the first time. 

5. Spotlights on Individuals

Powerful and engaging storytelling is key to attracting prospective students. Beyond student testimonials, you may want to feature profiles of some researchers, admin staff or alumni to showcase what individuals in your community have achieved. This helps prospective students relate on a more personal level to your institution.

We featured these types of spotlights extensively in our work with York University. Read our York University Future Students case study for details.

6. Trending Topics Using Search Engine Optimization Tools 

Take the time to perform keyword research to uncover opportunities to write keyword-focused content and rank well in search engines – generating organic traffic for your website. While it’s important to write about the topics that are relevant to your institution, you can do it in a way that is optimized for search, giving you the best chance that it will be found when potential students are searching for a particular program, online learning opportunity, or institution in your region.

Let’s say you want to write an article about a niche Engineering program offered at your school. You can use Google AdWords Keyword Planner or Google Trends to see what keywords are being searched in relation to the field of engineering. You can then use those keywords in your article, so it has a better chance of ranking highly in search engines.

7. Administrative Information

The logistics of the institution are important as well. Be sure to include administrative information on your website, such as housing options, work permit information for international students, visa requirements, how to apply, and other necessary information. Providing enough information so that potential students understand the admissions process helps keep them on your website while researching their options. 

That said, providing too much detail about every service and option that you offer can overwhelm the site and dilute its main purpose of giving a great first impression. Draw the line and don’t duplicate content that lives elsewhere in your digital ecosystem.

Creating Great Content for Your Prospective Students

Hopefully, these content recommendations will help make your institution's website more engaging for prospective students. Remember that you’re making a first impression, and your goal is to give users a realistic glimpse at your institution so they can make the best decision for their academic careers. 

 

A well-thought-out content strategy can make all the difference for your enrollment numbers! We can help you achieve your goals, contact us to get started.

 

+ more awesome articles by Evolving Web

A guide to Project Browser Maitreayee Bora Wed, 10/19/2022 - 12:06

To add a new feature to a Drupal website, one needs to find the right module on Drupal.org, download and then add it to the website. 

Surfing over 40,000 Drupal modules is not a smooth task. 

Lack of resources and technical knowledge can turn out to be a challenge in Drupal adoption and usage.

The Project Browser initiative, proposed in DrupalCon Europe 2021, seeks to make this entire process less complicated & user-friendly for website owners & managers. With browsing and installing modules at the click of a button. 

It lets site builders discover and add modules of their choice right away from their own website. To make certain actual-time records access, the component will connect with the Drupal.org API using a decoupled approach.

What is Project Browser?

The concept of Project Browser was first discussed around 2011. Finding and installing modules requires too many steps, and it happens to be difficult for new users. This initiative offers the chance of enhancing Drupal’s experience and enlarge the community. 

The minimum viable product (MVP) will deliver users the capacity to browse modules compatible with the Drupal version of their website, give instructions for downloading and installing modules, and also filter modules in regard to category. 

Initially, it was developed as a contributed module, however, now it is planned in Drupal 10 core.

It is planned to automatically set up modules through Composer, add additional filters, include themes and distributions, and include the detail page of the module inside the Project Browser UI rather than linking to Drupal.org. 

Source: Drupal.org 

At DrupalCon Prague 2022, during Dries’ keynote, he showed a video of Srishti Bankar, who works on the Project Browser initiative. So, the goal of the Project Browser is to simplify the installation of new modules in a project. The user will basically have access to a page within the user interface where they are able to search for modules and use filters such as Maintenance Status or Security Advisory Coverage renovation popularity or safety Advisory Coverage to narrow down the search results.

How does it work? 

The process of using Project Browser is pretty simple. Let’s understand it in three easy steps.

Step1- Install the Project Browser module.

Step2- A “browse” tab appears with the “Extend” section of the admin interface.

Step3- One can search through Drupal’s modules and find the right one for their use case.

Here is an informative video on Drupal Project Browser Initiative from DrupalCon North America 2021. 
 

Learn more about:

• The Drupal 10 Readiness Initiative
• The new features and improvements in Drupal 10
• Decoupled menus initiative of Drupal

Conclusion

The Drupal community is focused on making the Project Browser easier for all to find and install new functionality on their websites. Project Bowser is one of the key upcoming features for Drupal 10 that is being built as contributed modules. Hence, we look forward to seeing some amazing updates to this module in near future.
 

Articles Off

• 

  Take a deep dive into the Decoupled menus initiative of Drupal

• 

  The new features and improvements in Drupal 10

• 

  The Drupal 10 Readiness Initiative - What’s your Drupal 10 plan?

While the need for web accessibility was not envisioned when the Americans with Disabilities Act was signed into law more than 30 years ago, ADA web accessibility has emerged as a fundamental necessity, and top-of-mind topic among web developers and stakeholders.

This article will explain what website migration involves and why it is worth the effort. We’ll also discuss why you need migration and how to prepare for it.

Join us on Thursday, October 20 at 1pm ET / 10am PT, for our normally scheduled call to chat about all things Drupal and nonprofits. (Convert to your local time zone.)

This month frequent chat participant Stephen Musgrave of Capellic will be giving us a demonstration of visual regression testing -- just in time for the upcoming PHP 7.4 end of life!  (Thank you, Stephen!) Got thoughts/questions/concerns? Feel free to share ahead of time in our collaborative Google doc: https://nten.org/drupal/notes!

All nonprofit Drupal devs and users, regardless of experience level, are always welcome on this call.

This free call is sponsored by NTEN.org and open to everyone. 

• Join the call: https://us02web.zoom.us/j/81817469653

  • Meeting ID: 818 1746 9653
    Passcode: 551681

  • One tap mobile:
    +16699006833,,81817469653# US (San Jose)
    +13462487799,,81817469653# US (Houston)

  • Dial by your location:
    +1 669 900 6833 US (San Jose)
    +1 346 248 7799 US (Houston)
    +1 253 215 8782 US (Tacoma)
    +1 929 205 6099 US (New York)
    +1 301 715 8592 US (Washington DC)
    +1 312 626 6799 US (Chicago)

  • Find your local number: https://us02web.zoom.us/u/kpV1o65N

• Follow along on Google Docs: https://nten.org/drupal/notes

View notes of previous months' calls.