menu

Communities

Creating a page

To start building your page you must go to your Dashboard and either edit the existing page(s) or simply create a new page (if you have the rights for that. If not, ask Tracy or Astrid or your community leader to do that for you).

  • Draft/pending review: You don't have to make your page public to the staff straight away but can choose on the right hand side under "Status" to have it as a draft or as "pending review" if you want somebody else to have a look at it before publishing. That is highly recommended:).
  • Page name: The page name you choose will automatically be used in the URL which will give you the address to access this page directly on your browser.
  • Page attributes: Important is to choose the parent page (under Page attributes) which will play a role under which menu item this page will be shown. The rest you don't need to touch at all. In order to make your page appear on the red right hand side menu on the website please ask Tracy or Astrid.
  • Setting the featured image - 512 x 250 px: For making a nicer appearance when our staff members search for information/pages related to your community you can also "Set the featured image" which will appear in the "box" of the search results page. This image needs to have the size of 512x250.
  • Page permissions: In case you have the right to do that and you want to restrict your page viewers scroll down to the bottom where you see Readers, Contributors etc. Please tick the right boxes (make them visible by clicking on the "show eligible groups") only under Readers (groups who will be able to view your page and/or subpages on the website) and Editors (people you want to give editing rights for this page and/or subpages). Don't tick anything under the Contributors and Associates.
  • The lead/excerpt text: The "Excerpt" area that you see just above the rights and at the bottom of the Layout Builder is a short lead text that will appear at the bottom of the Title of the page when browsing the website.
  • When all those previous points have been done, please press the "Publish" button on the top right hand corner which will allow you to view the page from the front end as other staff members will start to see it, even when it is not published to everybody yet. If you forgot to set the Status of the page draft or pending review, do that now.

 
 
 

Content of the page

For the content of the page you will use the Elegant design module, called Layout Builder. You should not write anything in the blank area on top of the Layout builder. This needs to left empty.

NB! The "Publish" button needs to be pressed before starting to build the content since there is one bug that interferes with the Layout Builder and we're waiting for the module update to get rid of this bug. You shouldn't press the "Publish" or "Update" button after you've already started to build the content with the Layout Builder. If you need to change something on the points mentioned above, please contact Tracy or Astrid.

 
 
 

I Setting the layout/framework for your page by adding Columns

In order to build the content of the page you must define the basic layout by adding the necessary columns in the Layout Builder (choose the tab "Add a column"). As you see on this page when you "edit" the page, we've used columns sized 1/2, 1/4, 3/4 and "resizable columns". Please stick to using those since the website design is based on those sizes. So you can create a row of:

  • 1/2 and 1/2 columns or
  • 1/4 and 3/4  columns or 3/4 and 1/4 columns or
  • 1/4, 1/4, 1/4, /14 columns or
  • 1/4, 1/2, 1/4 columns or 1/2, 1/4, 1/4 columns or 1/4, 1/4, 1/2 columns so that it sums up to 1 all the time. Little bit of math is useful :).

The resizable column takes the size of the whole row.

And it all works based on drag and drop.

Note - when you've added several columns and want to add some more later, the new ones will always go at the bottom. So you can then drag them to the place you want them to be.

 
 
 

II Choosing the modules for your page

The next step is to choose the modules to fill those columns with. As you can see on this page I've outlined the modules we are using. Please stick to those and don't try to use the others, since they will not correspond to our website design.

In order to fill a column with a functional module you need to now choose the tab called "Add a Module" in the Layout Builder. Then click on the module you want to add to one of your columns and drop it when the chosen column is "activated" (shows to be more grey than other columns).

You can add several modules under the same column. For example if you wish to add several videos under each other, then simply drag the "Video" module several times to the column you've chosen (see below for an example).

NB - the only  module that doesn't need to have a column to fit itself into is the Horizontal bar that is the thin line in between various texts here on this page. This module you can simply add and then drag to the place you want it to be.
 
 

Examples of Modules to be used

This is an example of a testimonial. It looks nice when adding some comments, daily prayer request or anything that your imagination can come up with.

You can choose the size of the button, but stick to the colour blue, as it's suitable with the design. Button functions as a link that you can define. 

  • You can also add a photo description
  • New Dormitory at ça-ira Children's Home

This is an image slider that rotates automatically to make the page more interactive. The speed and size can be changed. You can also choose to stop the movement when a mouse pointer is on the photo(s).

Website design principle

The website design is based on 4 columns form top to bottom and the width of those columns are:

  • 1st column (or the size 1/4) 234px
  • 2 columns (or the size 1/2) 468px
  • 3 columns (or the size 3/4) 762px
  • 4 columns (or the size of the resizable column, or 4 times 1/4)  1026px

This is good to know when you want to add photos to make them the size that fits the best.

For example for the image slider I've chosen the size 468x200 px, since I've used it in a 1/2 column. Obviously you're more free to play with the height.

Toggle is a drop down. Click on it to close/open

Here is the content of the toggle. It can have images, links etc

You can choose the toggle title above in the editing area and use this area to fill with content. You can choose if the default state of the toggle is closed or open at the bottom when editing.

Available Font formats:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Can serve to help organise more regularly updated data and information. For example categorise the upcoming events or available resources or anything you deem necessary.

Use according to your needs and space available 🙂communication-resources234x234

Leaders-and-Influencers6web

This is SIMPLE SLIDER. You can choose to showcase some stories or photos or resources here, for example. In order to have the photo display correctly one needs to add the bold code parts in the TEXT tab once the photo is inserted via "add media":<div style="float: left; margin-right: 20px;"><img src="https://agapeeurope.org//content/uploads/2014/06/Leaders-and-Influencers6web-150x150.jpg" alt="Leaders-and-Influencers6web" width="150" height="150" class="alignright margin-right: 20px size-thumbnail wp-image-1770" /></div>

Slide 2

Link example

Next to the simple slider on your right you can see how a simple image can be displayed using the "Image" module.

Text and photo editing, design guidelines

TEXT

Cleaning the text: When adding a text that has been produced in some other programme like Word or from e-mails etc, it is obligatory to "clean" the text from all formatting by either copying it all to the Url area on your browser (where you usually start to type an internet address where you want to go) and copying it again to the text area in the "Visual" tab here. Mac users can do the same in the Spotlight typing area.

Heading types: You have already seen various heading types in the Toggle module, other text formatting tools are visible, when editing the text in the modules.

There are couple other headings that you also see on the public website which go nicely with the design. If you want to use them you must use the "text" tab when editing a module and insert a bit of HMTL code. If you need help with that feel free to ask Astrid or Tracy. Here are the examples:

Title with lines, with more predefined space above

Use that when you want to have a real break on the page by inserting the HTML code in the text area:

<h3 class="subcategory"><span>Your Title</span></h3>

— Title with lines, with less predefined space above —

The code for this title is: <h3 class="subcategory">— Your Title —</h3>

 

Internet links: For internet links please tick the box "open in a new window" unless you link to some other page on the Agape Europe website. This will ensure that when a visitor is visiting Agape Europe website he is not taken to another website without any reference to ours, thus helping him to stay longer on our website:).
 
 

Some other useful little snippets and codes to enrich the text are:

1. Contact link with an envelope image next to it: Contact Horst

Use the code:  <a href="mailto:example@gmail.com"><i class="fa fa-envelope"></i> Contact [Your person's name]</a>

2. "Back" button with a little blue arrow next to it:

Back to the left: Back to Who We Are

Code: <a href="https://agapeeurope.org/who-we-are/"><i class="fa fa-arrow-left"></i> Back to Who We Are </a>

Back to the right: Next ministry focus: Digital Strategies

Code: <a href="https://agapeeurope.org/what-we-do/digital-strategies/"><i class="fa fa-arrow-right"></i> Next ministry focus: Digital Strategies <i class="fa fa-arrow-right"></i></a>

3. To force a "break" use the code &nbsp;
 
 
PHOTO

To insert a photo:  Click on "Add media" when editing text on the top left corner. There you see two tabs - one that allows you browse the media library and the other to Upload. Upload photos that are not more than 400 KB big by easily dragging and dropping them from your computer. For photo sizes that fit well with the design see the examples I gave above the toggle module with all the columns and their sizes.

For featured images of the page and when adding a new post/story and setting a featured image, the size needs to be 512 x 250 px.

Editing on the website: In case you want to edit a photo in the media library, here are some guidelines.

 

GENERAL PAGE DESIGN PRINCIPLES AND EXAMPLE LAYOUTS

You are free to play around with the layout you want for your page but we strongly recommend you to use the layouts that we've already predefined on other pages.

Predefined example layouts: Some of the predefined layouts are already available in the Layout Builder, when you look at the third tab called "Sample Layout". By choosing any of that you will just need to change the content and it's ready to be used.

Here are some further page design examples that you'd might want to consider:

Creating a New staff story

Staff stories only appear on the staff area for people who are logged in. If you have the right to and you want to create a staff story/post, you follow the same steps as with the page creation. You can just skip the rights phase since this is already automatically set to be viewed only by logged in users.

For the sake of clarity and to help search function, please use the categories on the right hand side that have already been created. For the tags feel free to add as many keywords as you think is necessary.

 

Adding staff stories based on the filter/category to your community page

Create a text box module, activate the "text" editing mode on the top right hand and copy the code that you see in this example in the Text mode, not in the Visual mode.

To change the category  (staffcat) simply type a new (existing one) instead of "Devotional". Empty spaces are marked with a little dash. For example: european-event.

You can choose between two types of heading style for the "Related stories" as is projected below:

 

Related Stories

[ic_add_posts showposts=4 post_type='staff' staffcat="devotional"]

— Related Stories —

[ic_add_posts showposts=4 post_type='staff' staffcat="devotional"]

Videos

Size: There are several sizes that you can choose for embedding the videos (based on the 4 columns and respective width in pixels that are displayed under WEBSITE DESIGN PRINCIPLE paragraph). Keep that in mind when you build your page layout with the column sizes.

The module and embedded code: The module to use when you want to embed a video is always "Video"  and the embedding code needs to be copied to the Text mode of the content editing block. When the video is not centred by default you can then make it active in the Visual mode and center, as you would do for a text. No URL needs to specified then in addition on the gray area of the module. 

Video description: The best way to add a longer description of your video is then to add a text box module above it and write the text into that module. 

Happy exploring and building!

Remember, that Astrid and Tracy are ready to help you :).