This widget allows you to display some of your groups (more details below) in a Displaychurch.events view.

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 you are working with. That means, the view is what decides how your groups will look, NOT the integration you are using.

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!]

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.

Design category = Frame

Design category = Group details

Design category = Styles

Design category = Fonts


Design category = Frame

Design subcategory = Frame

View

Relevant items

Two Columns

Cards

Outlined

Mosaic

Design subcategory = Cards

Design category = Group details

Design subcategory = Information

Design category = Styles

Design subcategory = Main Information

Design subcategory = Controls

Design subcategory = Images

View

Relevant items

Two columns

Cards

Mosaic

Outlined

Design category = Fonts

Design subcategory = Font family

View

Relevant items

Two Columns

Cards

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.


Group Details

SUBCATEGORY: INFORMATION

Group name horizontal position & Group name vertical position

Click to open up the dropdown menu. Mix and match to put the group name in the position of your choice.

Here are some examples:

Group name horizontal position = Left

Group name vertical position = Bottom

Group name horizontal position = Center

Group name vertical position = Middle

Group name horizontal position = Right

Group name vertical position = Top

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

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.

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

Show Group description

Toggled off

Toggled on

This group has a description but it is not shown.

Now the group description is shown.

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

Show Contact Leader/Contact Us Button

Toggled off

Toggled on

This group has such a button but it is not shown.

Now the group's contact leader button is shown.

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


Styles

SUBCATEGORY: MAIN INFORMATION

Accent color

Did you choose 'Simple accent' or 'Expandable accent' in Card hover effect? Here is where you choose the color.

If you don't choose a color, the Default color is turquoise.

Use the Custom color picker to choose your accent color. If you are not yet familiar with how this works, here is the walkthrough.

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

Group name color

If you don't choose a color, the Default color is black.

You can also click on Inherit from website. In this option, the color is inherited from your website or other embeddable component.

Use the Custom color picker to choose your group name color. If you are not yet familiar with how this works, here is the walkthrough.

Here is an example of a Group name Custom color:

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

Group name color on hover

If you don't choose a color, the Default color is orange.

Use the Custom color picker to choose your group name on hover color. If you are not yet familiar with how this works, here is the walkthrough.

Here is an example of a Group name color on hover Custom color:

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

Group description color

If you don't choose a color, the Default color is black.

You can also click on Inherit from website. In this option, the color is inherited from your website or other embeddable component.

Use the Custom color picker to choose your group description color. If you are not yet familiar with how this works, here is the walkthrough.

Here is an example of a Group description Custom color:

SUBCATEGORY: CONTROLS

Contact button text color

If you don't choose a color, the Default color is white.

Use the Custom color picker to choose your contact button text color. If you are not yet familiar with how this works, here is the walkthrough.

Here is an example of a Contact button text Custom color:

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

Contact button text color on hover

If you don't choose a color, the Default color is white.

Use the Custom color picker to choose your contact button text color on hover color. If you are not yet familiar with how this works, here is the walkthrough.

Here is an example of a Contact button text color on hover Custom color:

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

Contact button background

If you don't choose a color, the Default color is black.

Use the Custom color picker to choose your contact button background color. If you are not yet familiar with how this works, here is the walkthrough.

Here is an example of a Contact button background Custom color:

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

Contact button background on hover

If you don't choose a color, the Default color is black.

Use the Custom color picker to choose your contact button background on hover color. If you are not yet familiar with how this works, here is the walkthrough.

Here is an example of a Contact button background on hover Custom color:

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

Image placeholder background

If you do not have a group image or you have chosen to toggle off Show group image if available, Displaychurch.events will display a colored rectangle.

If you don't choose a color, the Default color is a turquoise gradient.

Use the Custom color picker to choose your image placeholder background color. If you are not yet familiar with how this works, here is the walkthrough.

Here is an example of an Image placeholder background using the Custom color picker:

Custom Color value examples:

(1) Changing the first number: linear-gradient(to right, #080db6, #2193b0)

(2) The default is 'linear gradient(to right...) and that is what we see above. We can change the gradient direction. Here, we change it to 'linear gradient(to top right'.

(3) Let's make it even more dramatic by changing the second color value.

4) Another option is a radial (instead of a linear) gradient: radial-gradient(#080db6, #b408b6)

(5) You can also use an effect word such as 'transparent'.

There are many more combinations. Enjoying playing around!

Use Custom color value to choose a specific color or color effect based on CSS [Cascading Style Sheets] values.

If you click on this item, the default CSS value is 'linear-gradient(to right, #6dd5ed, #2193b0)'. This specifies a turquoise gradient (same as the Default above). You can change the numbers to create other gradients. You can also erase what is there and type in 1 number or a color effect word. See the examples to the left.

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

Image blend

NOTE: Depending on your color choices, there may be some interaction (color mixing) between this design item and Frame color. It could be interesting!

This design feature offers a colored overlay on your group image.

If you don't choose a color, the Default overlay color is black.

Use the Custom color picker to choose your image blend color. If you are not yet familiar with how this works, here is the walkthrough.

Here is an example of an Image blend Custom color:

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

Image blend on hover

NOTE: Depending on your color choices, there may be some interaction (color mixing) between this design item and Frame color. It could be interesting!

This design feature offers a colored overlay on your group image on hover.

If you don't choose a color, the Default overlay color is black.

Use the Custom color picker to choose your image blend on hover color. If you are not yet familiar with how this works, here is the walkthrough.

Here is an example of an Image blend on hover Custom color:

Click Save at the bottom of the column to keep 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.

Did this answer your question?