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).
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.
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:
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.
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.
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.
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).
The website design is based on 4 columns form top to bottom and the width of those columns are:
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.
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:
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>
Next to the simple slider on your right you can see how a simple image can be displayed using the "Image" module.
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:
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>
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:).
1. Contact link with an envelope image next to it: Contact Horst
Use the code: <a href="mailto:email@example.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
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:
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.
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:
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 :).