This widget allows you to display some of your groups (more details below) in a Display.Church view. Groups will be displayed in alphabetical (a-b-c) order according to their names.
Which groups do we display?
Pushpay/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.
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.
***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 Display.Church which details to display in your groups view.
Design category = Badges
Design category = Details popup
Design category = [View] styles
Design category = Popup styles
Design category = Navigation
In this section, to tell Display.Church about the colors to use for your filters.
Design category = Fonts
Design category = Frame
Design subcategory = Frame
View | Relevant items |
Simple List Cards (Grid) Outlined Mosaic |
|
Design subcategory = Cards
View | Relevant items |
Cards (Grid) | |
Outlined |
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.
CCBYou 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. | PCOYou 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)
| Simple List (PCO)
|
Cards (Grid) CCB
  
| Cards (Grid) PCO
 
 |
Outlined (CCB)
 | Outlined (PCO)
|
Mosaic (CCB)
  NOTE: Group name vertical position only appears if Hover effect is None or Flip.
 | Mosaic (PCO)
NOTE: Group name vertical position only appears if Hover effect is None or Flip.
 |
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. |
 | NOTE: If you choose Contact leader, several things happen.
(2) A message box pops up. You can customize the email message (gold box in image to the left). |
| 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 | Pushpay/CCB 
PCO 
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 a few 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.
 |
Show basic information toggled off Minimal info is displayed below the CTA button(s).
PCO
Pushpay/CCB
| Show basic information toggled on All the chosen information is display below the CTA button(s).
PCO
Pushpay/CCB
|
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 |  |
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
| DefaultIf 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 websiteIn 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 pickerUse this option to choose your preferred frame color. If you are not yet familiar with how this works, here is the walkthrough.
|
| TransparentIn this option, the frame color is a non-color (greyed out).
 |
| Custom color valueWhy 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
NOTICE: The link button on the right-hand end is toggled off (greyed out). See below for what happens when it is toggled on. | Find Frame width.
The default is that the size of the frame (space around your items) is measured in PX (pixels) as shown in the image to the left. However you can also have the size measured in %, EM, and REM.
Enough space? Great. Too much? Type in a lower number. Too little? Type in a higher one. |
 | When the link button is toggled on, changing one value will change all values. So instead of changing each input separately, you adjust it in one place and all the others will follow. If it’s unlined, you can set these values separately. |
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.