This widget allows you to display some of your groups (more details below) in a Displaychurch.events view. Groups will be displayed in alphabetical (a-b-c) order according to their names.

Which groups do we display?

CCB
PCO

Church Community Builder (CCB)

We list ONLY groups that are active AND publicly listed. As CCB users know, there is an "inactive flag" in CCB and a Public Search checkbox. If the CCB group does not have an inactive flag and is included in the public search group, we would display it.

Image below shows Inactive Flag.

Image below shows Public Search flag.

Jump to Design Items


Planning Center Online (PCO)

We list ONLY groups that are marked as visible (published) on Church Center.

The image below shows the Published/Hidden radio buttons.

Jump to Design Items


***DESIGN ITEMS***

Just like in DCE Calendars, some Group Widget design items are in every view and some are specific to the view (and integration) you are working with. What you see depends more on the view than the integration.

Hopefully, we are organized things so the information you need is easy to find. [If not, pop us a comment in our website chat. Help us by being specific. We want to know about it!]

HOW TO USE THIS ARTICLE

Step 1: Scroll down to find the Design category you are in.

Step 2: Click on the subcategory of the design item you are working with.

Step 3: Find your view in the table and click on the link of the design item you are working with. You will notice that some items are relevant for all views.

Design category = Frame

Design category = Headers and links

Design category = Simple List, Cards (Grid), Outlined, Mosaic

In this section you tell Displaychurch.events which details to display in your groups view.

Design category = Badges

Jump to separate article

Design category = Details popup

Design category = [View] styles

Jump to a separate article.

Design category = Popup styles

Jump to a separate article

Design category = Navigation

In this section, to tell Displaychurch.events about the colors to use for your filters.

All items for all views.

Design category = Fonts


Design category = Frame

Design subcategory = Frame

View

Relevant items

Simple List

Cards (Grid)

Outlined

Mosaic

Design subcategory = Cards

Design category = Headers and links

Design subcategory = Links

View

Relevant items

Simple List

Cards (Grid)

Outlined

Mosaic

Open links in new tab: Link to separate article

Design subcategory = Filters

This design item is the same for all group views within an integration. For example, there are the same filters for Planning Center (PCO) no matter which groups view you are using.

Your people use these filters to make the display more relevant to their needs.

CCB

You can keep filters off

or toggle on as desired.

NOTE: Can mix and match.

Need help with setting up these filters in Setup? Click here.

PCO

You can keep filters off

or toggle on as desired.

NOTE: Can mix and match.

Need help with setting up these filters in Setup? Click here.

Design category = Simple List, Cards (Grid), Outlined, Mosaic

All subcategories

These toggle on and off buttons are pretty much self-explanatory. They are slightly different depending on the integration you are using. Jump to two examples.

REMINDER: The actual content shown is taken from your integration ChMS.

After toggling, click Save at the bottom of the column to keep your changes.

Simple List (CCB)

More about call-to-action buttons

Simple List (PCO)

More about call-to-action buttons

Cards (Grid) CCB

More about call-to-action buttons

Cards (Grid) PCO

More about call-to-action buttons

Outlined (CCB)

[in process]

More about effects.

Outlined (PCO)

More about effects.

Mosaic (CCB)

NOTE: Group name vertical position only appears if Hover effect is None or Flip.

More about effects.

More about call-to-action buttons

Mosaic (PCO)

NOTE: Group name vertical position only appears if Hover effect is None or Flip.

More about effects.

More about call-to-action buttons

Here are two examples of the 'toggle on - toggle off' results:

Show Group Image if available

Toggled off

Toggled on

This group has an image but it is not shown.

Now the group image is shown.

Show Group description

Toggled off

Toggled on

This group has a description but it is not shown.

Now the group description is shown.

More about CTA buttons

Step 1: Toggle on the button.

Step 2: Click on the CTA action downward arrow to reveal the dropdown menu.

Step 3: Select your preferred action.

Step 4: If you leave this button toggled on, your CTA will say "Join group". To customize, toggle it off.

Step 5: Type your preferred label on the line.

The secondary CTA button works in the same way.

More about effects

Choose your hover effect. Here's what each one does:

Choose the placement of your group name.

Here is how 'right, bottom' (images to the left) looks:

Here's another example:

Click SAVE at the bottom of the column to save your changes.

Design category: Details popup

This first subcategory determines whether or not a popup will display when the group is clicked on.

Design subcategory = Behaviour

View

Relevant items

Simple List

Cards (Grid)

Outlined

Mosaic

Show popup on group click

When this button is toggled off (greyed out as in image below), nothing will happen when you click on a group.

When this button is toggled on (turns blue as in image below), a popup of further information will display.

Here are two popup examples:

If you decide to show a popup, the details you show depend on both your integration and your choices below.

REMINDER; That actual content shown is taken from your integration ChMS.

After toggling, click Save at the bottom of the column to keep your changes.

Design subcategory = Blocks

View

Relevant items

Simple List

Cards (Grid)

Outlined

Mosaic

This information is consistent (the same) for both the CCB and PCO integrations AND for all groups views.

If you toggle on the last item, Show basic information (gold box in image to the left), the Basic information subcategory will display. You will find it AFTER the CTA buttons.

Here are two examples:

Show header toggled off

Nothing displays above the image.

Show header toggled on

There is some information displayed above the image.

Show image toggled off

The image is not displayed.

Show image toggled on

The image is displayed.

Click Save at the bottom of the column to keep your changes.

Design subcategory = Primary call to action & Secondary call to action

View

Relevant items

Simple List

Cards (Grid)

Outlined

Mosaic

More about call-to-action buttons

Design subcategory = Basic information

This information is consistent for all group views WITHIN the integration.

CCB

PCO

Click Save at the bottom of the column to keep your changes.

Design category = Navigation

in process

Design category = Fonts

Design subcategory = Font family

View

Relevant items

Simple List

Cards (Grid)

Outlined

Mosaic


Frame

SUBCATEGORY: FRAME

Frame Color

Default

If you choose this option, the space around and between the cards will be white.

Note the color where the squiggly lines are and between the two cards.

Inherit from website

In this option, the frame color is inherited from your website or other embeddable component. In this case, the inherited background is light grey.

Custom color picker

Use this option to choose your preferred frame color. If you are not yet familiar with how this works, here is the walkthrough.

Transparent

In this option, the frame color is a non-color (greyed out).

Custom color value

Why this and not Custom color picker?

Use Custom color value when you have a specific color that you want to use. For example, you might want to match the color scheme of your website or printed material. So, you don't want "about" the same color, you want exactly the same color.

Select your color by typing in the hex value. Each color has a unique hex value. If you are using this option, most likely you will already have the number you need. If not, for any reason, you can find hex values here.

Here is the result of our choice:

Click Save at the bottom of the column to keep your changes.

Frame width

To change the frame width, type in a number before the "px" (brown arrow in image below).

Enough space? Great.

Too much? Type in a lower number.

Too little? Type in a higher one.

Let's look at some examples.

We've put a gold box around each image to help define the frame width.

This frame width is smaller than the default below.

This frame width is the default.

This frame width is larger than the default above.

Note that the frame width changes the space AROUND the cards but not between them.

Click Save at the bottom of the column to keep your changes.

SUBCATEGORY: CARD

Cards per row

Notice that when you hover near the number box, up and down arrows appear (brown box in image below). Use them to change the number of cards which should show in each row. At the moment, 3 cards appear in each row.

You can increase the number of cards per row:

You can decrease the number of cards per row:

Click Save at the bottom of the column to keep your changes.

Card left and right margin

This design element controls how much space is to the left and right of the cards themselves. Depending on what value you choose, the frame width may be affected since there is a finite amount of space on a device screen.

Compare a 2% margin (gold arrows in the image above) with a 5% margin (gold arrows in the image below). As you can see, the width and length of the cards change to accommodate the new margin.

Here is an even bigger margin:

To change the percent of space, simply type a number on the relevant line.

Click Save at the bottom to keep your changes.

Card corner rounding

This rounding is less than the default below. The corners are almost square.

This rounding is the default. There is a small corner rounding.

This rounding is more than the default above. The corners are well rounded.

Compare 20 px rounding (brown box and gold line in the image above) with 40 px rounding (brown box and gold line in the image below). Note that this design element applies to all four corners of the card.

To change the corner rounding, simply type a number on the relevant line.

Click Save at the bottom to save your changes.

Card hover effect

If you click on the downward arrow, you see the dropdown menu. Note that there are 4 choices: None, Zoom in, Simple accent, Expandable accent.

This is best explained in a video:

Where do you choose the color? Accent color.


Design category = Navigation

No matter your integration (CCB or PCO) and no matter the group view [Simple list, Cards (Grid), Outlined, or Mosaic] the design items are the same.

What is different is the filter options. To remind you, these are the filters in Setup. Let's look at them again:

CCB

PCO

Working with all the items in this section is the same. You can either opt for the DCE default or choose a custom color. If you are not yet familiar with our custom color picker, here is the walkthrough.

What's left is to explain which design item connects to what. Here we go.............

The background color of the filter toolbar.

CCB

PCO

The background color of the filter pill areas.

CCB

PCO

The filter your viewer has clicked on (the active item).

CCB

PCO

The color of the pill area background when you hover on it.

CCB

PCO

The text color.

CCB

PCO

The text hover color when you hover on it.

CCB

PCO

The text color of the filter your viewer has clicked on (the active item). You can see it is active because it has a dropdown menu of sub-filtering options (in this case, just one -- "Any").

CCB

PCO

The background color of the dropdown menu when you hover on it.

CCB

PCO

The background color of the dropdown menu of the filter your viewer has clicked on (the active item).

CCB

PCO

The text color of the dropdown menu of the filter your viewer has clicked on (the active item).

CCB

PCO

The text color of the dropdown menu of the filter your viewer has clicked on (the active item) when you hover on it.

CCB

PCO

The line color of the dropdown menu of the filter your viewer has clicked on (the active item).

CCB

PCO

The line color of the dropdown menu of the filter your viewer has clicked on (the active item) when you hover on it.

CCB

PCO

The left border accent color of the dropdown menu of the filter your viewer has clicked on (the active item) when you hover on it.

CCB

PCO

The color of the circle with the check mark.

CCB

PCO

The color of the check mark.

CCB

PCO

Click Save at the bottom to save your changes.


Design category = Fonts

Design subcategory = Font family

General

This sets the font type of text OTHER THAN the group name.

Default: The default font is Roboto or Cabin depending on the integration and the group view.

Inherit: In this option, the font is inherited from your website or other embeddable component.

Inherit: In this option, the font is inherited from your website or other embeddable component.

Custom: Click on the 'X' to clear the input line. Then start typing. I usually just type any letter. The dropdown menu will populate with the available fonts. Choose the one you prefer.

Group name

This sets the font type of the group name.

Default: The default font is Roboto or Cabin depending on the integration and the group view.

Inherit: In this option, the font is inherited from your website or other embeddable component.

Custom: Click on the 'X' to clear the input line. Then start typing. I usually just type any letter. The dropdown menu will populate with the available fonts. Choose the one you prefer.

Design subcategory = Size

Responsive

This reduces or enlarges the font sizes in a global way. In other words, they change in relation to each other. Titles always remain larger than detail text, etc.

Simply click on and slide the blue circle left and right. Notice the word under the item (in this case "Medium"). It gives you a feel for the global relative size.

Here are some examples:

Click Save at the bottom to save your changes.

Did this answer your question?